插件 (echarts、swiper)

1、echarts（4）

title　　　  標題(大小標題)

legend　　 圖例組件(series有多個對象時有用)

grid　　     圖的位置，大小等

 

xAxis　　   x座標軸  （axisTick: x軸刻度線、splitLine: x間隙、axisLine: x軸線、axisLabel: x座標軸刻度標籤）

yAxis　　   y座標軸  （axisTick: y軸刻度線、splitLine: y間隙、axisLine: y軸線、axisLabel: y座標軸刻度標籤）

 

toolbox　　工具（下載canvas圖片等）

tooltip　　  鼠標懸停提示

 

color　　　　　　　　全局顏色組

backgroundColor　　全局背景顏色

textStyle　　　　　　全局的字體樣式

 

---

 例子：

1.

ECharts

①  radar圖:

　　splitNumber (從圓點到最外有多少個圓圈)

　　splitLine （圓圈的樣式）

　　axisLine (從圓點到最外直線的樣式)

　　splitArea (從圓點到最外圈層的樣式)

　　splitLine 的type只能一種，但能畫兩個

　　

2.

（微信小程序版）

3.

柱狀圖每一個都不一樣顏色

 1 series : [
 2     {
 3         type:'bar',
 4         itemStyle: {                            //  圖形樣式
 5             normal:{
 6                 color: function (params){
 7                     let aDataMachine1 = [];
 8                     var colorList = [];
 9                     for(let i=0; i<aDataMachine.length; i++){
10                         aDataMachine1.push(aDataMachine[i])
11                     }
12                     aDataMachine1.sort(function (a,b){
13                         return b.number-a.number
14                     });
15                     for(let i=0; i<aDataMachine.length; i++){
16                         if (aDataMachine[i].number == aDataMachine1[0].number) {
17                             colorList.push('rgb(0,255,255)');
18                         } else if(aDataMachine[i].number == aDataMachine1[1].number) {
19                             colorList.push('rgb(42,170,227)');
20                         } else {
21                             colorList.push('rgb(195,229,235)')
22                         }
23                     }
24                     return colorList[params.dataIndex];
25                 }
26             },
27         },
28     }
29 ],

View Code

 

---

2、swiper（3）