echarts常用方法（一）

　　目前，项目中涉及到图表的，使用echarts的频率较多，因为UI设计一般不会考虑到是否能实现的问题，他们专注的只是显示的效果。所以作为前端开发，要对echarts进行不同程度的改造，组合，甚至重写等。接下来会根据我目前的接触到的问题，进行一个循序渐进的总结。因为echart版本的升级等问题，虽说会兼容低版本，但是部分写法依旧在新版本的效果与老版本有区别。以下方法大家只作为参考，版本的不兼容导致写法不同的话，只能靠大家发现。

1.x轴文本换行、调整旋转角度、文本不同颜色

axisLabel: {                     
     interval: '0',
     rotate: 45,
     textStyle: {
         fontSize: 10,
         color:"#666666"
             color:function (xdata) {                                
              return xdata.indexOf('时')<=-1 ? '#E87731' : '#F2F2F2';
          }
     },
     formatter: function (value, index) {
            var arr = value.split(' ');
            return arr[0]+'\n'+arr[1];
     }
 }

2.柱状图渐变+不同色

if(params.dataIndex > 6){
         return new echarts.graphic.LinearGradient(0, 0, 0, 1,[
               {offset:0,color:colorList[1][0]},
               {offset:1,color:colorList[1][1]}
    ])
}else{
    return new echarts.graphic.LinearGradient(0, 0, 0, 1,[
            　 {offset:0,color:colorList[0][0]},
               {offset:1,color:colorList[0][1]}
    ])                                    
 }

3.对没有y轴线,只显示label标签的样式

 yAxis: [
    {
            type: 'category',
            axisTick : {show: false},
            axisLine: {
                 lineStyle:{                                
                      color:'#527877',
                      opacity:0
                 }
      　　　　},
             axisLabel: {                            
                  color:'#527877'
             },
             data: ['榆林市','安康市','宝鸡市','商洛市','铜川市','咸阳市','西安市']
      },
]

opacity:0

4.后台报错

如果报错为，该节点已经创建过dom，则需要先销毁再加载chart
echarts.dispose(chartView);
chartView是chart容器的ID

echarts常用方法（一）

猜你喜欢