echarts圖錶配置參數，web前端開發發展趨勢

series: [{
// 折線區域顏色
areaStyle: { color: '#0c229f45'},
// 折線線條顏色
lineStyle: { color: '#0c229f45'},
// 折線點顏色（散點圖顏色描邊等樣式）
itemStyle: { color: '#0c229f45'}
}]


1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

series: [{
label: {
normal: {
show: true, // 是否顯示
position: top, //值還可以是(/left/right/inside/insideTop，[50%, 50%]相對圖形左上角的比特置)
distance: 30，// 當positon值為'top'等有效
rotate: 30, // 旋轉角度
offset: true, //文字偏移量
formatter: function(val) {
var strs = val.name.split('') //字符串數組
var str = ''
for(var i = 0, s; s = strs[i++];) { //遍曆字符串數組
str += s
if(!(i % 4)) str += '\n' //按需要求餘
}
return `${str}: ${val.value}%`
},//文本格式設置
color: red // (fontSize, fontStyle, fontWeight等css常用屬性)
}
}
}]


1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.

series: [
label: {
normal: {},
emphasis: {
show: true, //是否有高亮效果
textStyle: {
fontWeight: 'bold'
}
}
}
]


1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

series: [
labelLine: {
normal: {
show: true, // 是否顯示
length: 30, // 第一段線長度
length2: 40, // 第二段線長度
smooth: false, // 是否平滑視覺引導線，也可以是錶示平滑程度的數值
lineStyle: {
color: 'red', // 線的顏色
width: 3, // 線的寬度
type: 'solid' // 線的類型
},
emphasis: {
show: true,
lineStyle: {
}
} // 高亮狀態下引導線的樣式
}
}
]


1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.

xAxis: {
show: false, //將x軸隱藏
type: 'value',
boundaryGap: [0, 0], //坐標軸兩邊留白策略,即圖形在坐標軸內距離坐標軸線的邊距,在未設置min和max值時,[0,0]錶示兩邊不留白,圖錶緊挨坐標軸線,[0.3, 0.8]即錶示圖錶距離軸線有留白
//min: 1000000 當設置min值是坐標軸起點的數值,如果Min值小於數據中的最小值,則圖形會到坐標軸左側顯示,設置的boundrayGap: [x, y]中的x值無效,坐標軸刻度按max值和數據值來設定
//max: 2000000 當設置max值是坐標軸終點的數值,設置的boundrayGap: [x, y]中的y值無效
}
yAxis: {
axisLine: {
show: false
}, // y軸坐標軸線隱藏,注意不是y軸隱藏,我們還要顯示文字的
axisTick: [{
show: false
}] // y軸坐標軸刻度隱藏
}
// 設置兩個數據區域
series: [
{
type: 'bar',
data: [2.3, 64.2, 73.2, 63.4, 63.4]，
tooltip: { show: false},
barMinHeight: 30, //最小柱高
barWidth: 10, // 柱寬度
barMaxWidth: // 最大柱寬度
z: 10, // 控制圖錶前後順序
itemStyle: { // 柱子樣式
normal: {
color: '#ff6600', // 柱狀圖顏色
label: {
### ajax
1)ajax請求的原理/ 手寫一個ajax請求？
2)readyState？
3)ajax异步與同步的區別？
4)ajax傳遞中文用什麼方法？
![echarts圖錶配置參數，web前端開發發展趨勢_程序員](https://s5.51cto.com/images/20210918/1631936381581177.jpg)
![echarts圖錶配置參數，web前端開發發展趨勢_前端_02](https://s6.51cto.com/images/20210918/1631936381651628.jpg)
**[CodeChina開源項目：【大廠前端面試題解析+核心總結學習筆記+真實項目實戰+最新講解視頻】](https://ali1024.coding.net/public/P7/Web/git)**

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.