移動(dòng)端設(shè)備中，難免會(huì)涉及到數(shù)據(jù)的可視化展示、數(shù)據(jù)統(tǒng)計(jì)等等，本篇主要講解原生微信小程序中嵌入echarts并進(jìn)行動(dòng)態(tài)渲染，實(shí)現(xiàn)數(shù)據(jù)可視化功能。

基礎(chǔ)使用

首先在GitHub上下載echarts包
地址：https://github.com/ecomfe/echarts-for-weixin/tree/master
下載項(xiàng)目
解壓壓縮包，將ec-canvas文件夾放到我們的項(xiàng)目中
在需要使用的頁面引入echarts

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

在頁面中使用

<view class="line_chart">  <ec-canvas class="chart" id="charts" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas></view>

先給echarts的父級(jí)元素設(shè)置高度

.line_chart {  width: 100%;  height: 550rpx;  background: #fff;
}

然后就可以使用了

// 引入 echarts 文件，這里路徑一定要正確，就是ec-canvas -> echart.jsimport * as echarts from '../../../ec-canvas/echarts';// 定義 initChart 方法
function initChart(canvas) {  
const chart = echarts.init(canvas, null, {    
height: 250, // 圖表高
    // width: 100  // 圖標(biāo)寬
  });
  canvas.setChart(chart);  // 此為配置項(xiàng)。配置圖表展現(xiàn)樣式與數(shù)據(jù)
  var option = {    
  xAxis: {      
  type: 'category',      
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },    
    yAxis: {      
    type: 'value'
    },    
    series: [
      {        
      data: [150, 230, 224, 218, 135, 147, 260],        
      type: 'line'
      }
    ]
  };
  chart.setOption(option);  return chart;
}Page({  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {    // 此處的ec名稱與wxml結(jié)構(gòu)中命名保持一致
    ec: {      // 使用 onInit 方法定義
      onInit: initChart
    }
  },  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad(options) {
  },
})

在echarts中，配置項(xiàng)與echarts文檔中的配置項(xiàng)相同，按照官網(wǎng)的配置項(xiàng)進(jìn)行開發(fā)即可。
配置項(xiàng)手冊(cè)：https://echarts.apache.org/zh/option.html

動(dòng)態(tài)渲染echarts

我們會(huì)根據(jù)業(yè)務(wù)場景，傳入不同的數(shù)據(jù)進(jìn)行動(dòng)態(tài)渲染echarts，那么在這里charts實(shí)例就必須配置為全局

var chart = null; // 重要-保存chart為全局實(shí)例
// initChart必須為全局函數(shù)
function initChart(canvas) {
  chart = echarts.init(canvas, null, {    
  height: 250,
  });
  canvas.setChart(chart);  return chart;
}

當(dāng)你的數(shù)據(jù)變化后，重新渲染echarts

 data: {    
 ec: {      
 onInit: initChart
    }
  },  
  getData() {    
  return { // 你配置的的options數(shù)據(jù)...... };
  },  
  getCharts() {      
  setTimeout(() => {        // 由于chart被你定義為全局，所以這里可以直接獲取
        // 通過setOption設(shè)置options數(shù)據(jù)，刷新圖標(biāo)
        chart.setOption(this.getData(), true)
      }, 1500)
    }

解決真機(jī)文字陰影

在options配置中添加

   tooltip: {     
   textStyle: {       
   textShadowBlur: 10, // 去掉文字陰影
       textShadowColor: 'transparent', // 去掉文字陰影
     },
   },

解決圖標(biāo)模糊問題

在真機(jī)中echarts可能會(huì)出現(xiàn)分辨率低，圖形模糊的情況，此時(shí)我們需要獲取設(shè)備像素比給echarts做初始化設(shè)置。
微信小程序獲取設(shè)備信息：wx.getSystemInfo

function initChart(canvas) {  // 獲取設(shè)備像素比
  const getPixelRatio = () => {    
  let pixelRatio = 0
    wx.getSystemInfo({      
    success: function (res) {
        pixelRatio = res.pixelRatio
      },      fail: function () {
        pixelRatio = 0
      }
    })    
    return pixelRatio
  }  
  var dpr = getPixelRatio(); // 像素比
  chart = echarts.init(canvas, null, {    
  height: 250,    
  devicePixelRatio: dpr // 設(shè)置初始化像素比
  });
  canvas.setChart(chart);  
  return chart;
}

此時(shí)圖表的像素就會(huì)按照設(shè)配像素比進(jìn)行渲染

另外
1、你可以將echarts封裝成組件，通過observers監(jiān)聽數(shù)據(jù)的變化來實(shí)現(xiàn)echarts的動(dòng)態(tài)渲染。
2、在渲染層面，你可以將 legend、label、調(diào)色盤、 series拆開，這樣可以方便你更好的管理數(shù)據(jù)。
3、微信小程序有分包限制，在這里我做的是echarts包的直接下載，可能會(huì)占一些體積，你可以在echarts官網(wǎng)上選擇在線訂制，只下載你需要的圖表解來減少包的體積，官網(wǎng)：在線訂制