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

ChartView

echarts常用方法（一）