在做小程序時需要用到圖表，今天就研究了下Echarts在小程序中怎么使用。在官方文檔上看了下如何使用及基本配置方法，包括如何在json、js中引入，具體配置和引入方法可以多看下Echart官方文檔。（官方文檔地址：https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts）
這個是Echart官方在GitHub上提供的圖表組件代碼：https://github.com/ecomfe/echarts-for-weixin

下載組件后在項目中引入，網(wǎng)上有好多引入的方法，大家也可以百度下，這里就不過多的介紹了。在對應(yīng)的目錄中的json文件中引入組件，這步很重要。

"usingComponents": {"ec-canvas": "../../ec-canvas/ec-canvas"}

1、取消圖例上的點擊事件

legend:{
    selectedMode:flase;//取消圖例上的點擊事件, 默認(rèn)顯示
    orient: 'horizontal', // 布局方式，默認(rèn)為水平布局 // 'horizontal' | 'vertical
}

2、解決 X軸 文字顯示不全或文字傾斜。

 xAxis: [
    axisLabel: {
          show: true,
          color: '#666',
          interval: 0,  
          formatter:function(value){  
            var ret = "";//拼接加\n返回的類目項  
            var maxLength = 2;//每項顯示文字個數(shù)  
            var valLength = value.length;//X軸類目項的文字個數(shù)  
            var rowN = Math.ceil(valLength / maxLength); //類目項需要換行的行數(shù)  
            if (rowN > 1)//如果類目項的文字大于3,  
            {  
                for (var i = 0; i < rowN; i++) {  
                    var temp = "";//每次截取的字符串  
                    var start = i * maxLength;//開始截取的位置  
                    var end = start + maxLength;//結(jié)束截取的位置  
                    //這里也可以加一個是否是最后一行的判斷，但是不加也沒有影響，那就不加吧  
                    temp = value.substring(start, end) + "\n";  
                    ret += temp; //憑借最終的字符串  
                }  
                return ret;  
            }  
            else {  
                return value;  
            }  
          } 
        }
]

3、網(wǎng)格線設(shè)置 邊線顏色、類型、是否顯示

yAxis: [{
    splitLine :{//網(wǎng)格線
          lineStyle:{
            type:'dashed',    //設(shè)置網(wǎng)格線類型 dotted：虛線   solid:實線
            color:'#ededed'  //網(wǎng)格線顏色
          },
          show:true //隱藏或顯示   false時隱藏網(wǎng)格線
        },
}]

4、更換X、Y軸刻度線顏色

 axisLine: {
      show:true //隱藏或顯示   false時隱藏刻度線
      lineStyle: {
        color: '#dadada',//X、Y軸刻度線顏色
      }
  },

5、圖形中顏色漸變

series: [
      {
        name: '上半年',
        type: 'bar',
        data: [300, 270, 340, 374, 300, 320, 310],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(//圖形漸變
              0, 0, 0, 1,
              [
                  {offset: 0, color: '#d9a8f2'},
                  {offset: 0.5, color: '#b31fff'},
                  {offset: 1, color: '#5c1cff'}
              ]
          )
      }
      }]

6、legend圖例上的文字要和series中的name一致，不然圖例不顯示。

legend: {
      selectedMode:false,//取消圖例上的點擊事件
      padding: 10, // 圖例內(nèi)邊距，單位px，默認(rèn)各方向內(nèi)邊距為5，
      data: ['上半年',  '下半年']
    },

series: [
      {
        name: '上半年',
        type: 'bar',
        data: [300, 270, 340, 374, 300, 320, 310],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                  {offset: 0, color: '#d9a8f2'},
                  {offset: 0.5, color: '#b31fff'},
                  {offset: 1, color: '#5c1cff'}
              ]
          )
      }
      },
      {
        name: '下半年',
        type: 'bar',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                  {offset: 0, color: '#83bff6'},
                  {offset: 0.5, color: '#188df0'},
                  {offset: 1, color: '#188df0'}
              ]
          )
      },
        data: [120, 102, 141, 174, 190, 250, 220]
      }
    ]

7、圖形上顯示每個節(jié)點的數(shù)據(jù)，要在series中添加 label，如果不需要節(jié)點數(shù)據(jù)的話，則不用添加。

label: {
          normal: {
            show: true,
            position: 'center',
            color: '#666'
        }
  },

下面看下實際效果圖：

20200622163034938.png

20200622163051974.png

20200622163107617.png

20200622165343482 (1).png