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