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,
            }
        },

结果如下图

猜你喜欢