echarts 筆記

昨天寫代碼使用到了echarts，記錄一下

第一張圖表，裏面有兩組座標系，這兩組座標公用一條y軸， 而且經過 柱形的高度/條形的寬度 來表現數據的大小；

因此我在echarts的配置項中設置了兩個x軸，兩個y軸，第一個x軸添加了inverse屬性，讓x軸反向。第一個y軸添加show屬性禁止它顯示。

具體代碼以下

 1  xAxis: [
 2             {
 3                 gridIndex: 0,
 4                 min: 0,
 5                 max: 0.6,
 6                 inverse:true, 
 7                 splitLine:{lineStyle:{color:'#faecdb'}},
 8                 axisTick:{show:false},
 9                 axisLabel:{
10                     color:'#333',
11                 },
12                 axisLine:{
13                     onZero:false,
14                     lineStyle:{color:'#faecdb'}
15                 }
16             },
17             {
18                 gridIndex: 1,
19                 min: 0,
20                 max: 30,
21                 splitLine:{lineStyle:{color:'#dbeaf9'}},
22                 axisTick:{show:false},//座標軸刻度禁止顯示
23                 axisLine:{
24      25                     lineStyle:{color:'#dbeaf9'} //座標軸線線的顏色
26                 },
27                 axisLabel:{
28                     color:'#333',
29                 }
30             }
31         ],
32         yAxis: [
33             {
34                 gridIndex: 0,
35                 type : 'category',
36                 data:dataAll[2],
37                 show:false,
38                 splitLine:{lineStyle:{color:'#faecdb'}}//座標軸在 grid 區域中的分隔線的顏色。
39             },
40             {
41                 gridIndex: 1, type : 'category',
42                 data:dataAll[2],
43                 axisLabel:{margin:16},
44                 axisTick:{show:false},
45                 axisLine:{
46                     show:false,
47                     onZero:false,
48                 },
49                 splitLine:{lineStyle:{color:'#dbeaf9'}}
50             }
51         ],

除此以外還能夠在series[i]-bar.itemStyle中設置柱條的顏色和形狀具體設置能夠參考文檔  http://www.echartsjs.com/option.html#series-bar.itemStyle

{
                type: 'bar',
                xAxisIndex: 0,
                yAxisIndex: 0,
                itemStyle: {
                    normal: {color: '#faecdb'}
                },
                barGap:'-100%',
                barCategoryGap:'40%',
                data:dataAll[2],
                animation: false
            },
            {
                name: 'I',
                type: 'bar',
                xAxisIndex: 0,
                yAxisIndex: 0,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient( //柱條的顏色爲漸變色 
                        0, 0, 1, 0,
                        [
                            {offset: 0, color: '#fcd'},
                            {offset: 0.5, color: '#fbc'},
                            {offset: 1, color: '#f9a'}
                        ]
                    ),
                    barBorderRadius:[40,0,0,40]
                },
                data: dataAll[0],

            },
            {
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                itemStyle: {
                    normal: {color: '#dbeaf9'}
                },
                barGap:'-100%',
                barCategoryGap:'40%',
                data:dataAll[3],
                animation: false,
            },// 柱條的背景設置
            {
                name: 'II',
                type: 'bar',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        1, 0, 0, 0,
                        [
                            {offset: 0, color: '#afc'},
                            {offset: 0.7, color: '#82bdfe'},
                            {offset: 1, color: '#64b'}
                        ]
                    ),
                    barBorderRadius:[0,40,40,0]
                },
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: dataAll[1],
            }],

完成以後頁面的展現效果爲

第二張圖表 也是柱狀圖，只是y軸的數據是在軸線裏面，而且在相對應的柱條上面顯示

第二張圖表主要是y軸的配置代碼以下 axisLabel 的inside屬性設置爲true 讓數據能夠顯示在軸線內部，至於數據顯示在柱條上面，在axisLabel屬性中沒有設置文字的位置的屬性，因此我使用文字投影，經過控制文字投影的位置來達到目的

  yAxis: {
            data: dataAxis,
            type: 'category',

            axisTick: {
                show: false
            },
            axisLine:{
                show: false,
            },
            axisLabel:{
                inside:true,
                margin:0,
                textStyle: {
                    color: '#fff',
                },
                textShadowColor:"#666",
                textShadowOffsetX:0,
                textShadowOffsetY:-20,
            }
        },

 

結果以下圖