關於微信小程式中如何實現資料視覺化-echarts動態渲染

DCodes發表於2023-11-27
微信小程式視覺化Echarts

移動端裝置中，難免會涉及到資料的視覺化展示、資料統計等等，本篇主要講解原生微信小程式中嵌入echarts並進行動態渲染，實現資料視覺化功能。

基礎使用

首先在GitHub上下載echarts包
地址：https://github.com/ecomfe/echarts-for-weixin/tree/master
下載專案
解壓壓縮包，將ec-canvas資料夾放到我們的專案中
在需要使用的頁面引入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的父級元素設定高度

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

然後就可以使用了

// 引入 echarts 檔案，這裡路徑一定要正確，就是ec-canvas -> echart.js
import * as echarts from '../../../ec-canvas/echarts';

// 定義 initChart 方法
function initChart(canvas) {
  const chart = echarts.init(canvas, null, {
    height: 250, // 圖表高
    // width: 100  // 圖示寬
  });

  canvas.setChart(chart);

  // 此為配置項。配置圖表展現樣式與資料
  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({
  /**
   * 頁面的初始資料
   */
  data: {
    // 此處的ec名稱與wxml結構中命名保持一致
    ec: {
      // 使用 onInit 方法定義
      onInit: initChart
    }
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad(options) {
  },
})

在echarts中，配置項與echarts檔案中的配置項相同，按照官網的配置項進行開發即可。
配置項手冊：https://echarts.apache.org/zh/option.html

動態渲染echarts

我們會根據業務場景，傳入不同的資料進行動態渲染echarts，那麼在這裡charts例項就必須配置為全域性

var chart = null; // 重要-儲存chart為全域性例項
// initChart必須為全域性函式
function initChart(canvas) {
  chart = echarts.init(canvas, null, {
    height: 250,
  });
  canvas.setChart(chart);
  return chart;
}

當你的資料變化後，重新渲染echarts

 data: {
    ec: {
      onInit: initChart
    }
  },

  getData() {
    return { // 你配置的的options資料...... };
  },
  
  getCharts() {
      setTimeout(() => {
        // 由於chart被你定義為全域性，所以這裡可以直接獲取
        // 透過setOption設定options資料，重新整理圖示
        chart.setOption(this.getData(), true)
      }, 1500)
    }

解決真機文字陰影

在options配置中新增

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

解決圖示模糊問題

在真機中echarts可能會出現解析度低，圖形模糊的情況，此時我們需要獲取裝置畫素比給echarts做初始化設定。
微信小程式獲取裝置資訊：wx.getSystemInfo

function initChart(canvas) {
  // 獲取裝置畫素比
  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 // 設定初始化畫素比
  });
  canvas.setChart(chart);
  return chart;
}

此時圖表的畫素就會按照設配畫素比進行渲染

另外
1、你可以將echarts封裝成元件，透過observers監聽資料的變化來實現echarts的動態渲染。
2、在渲染層面，你可以將 legend、label 、調色盤、 series拆開，這樣可以方便你更好的管理資料。
3、微信小程式有分包限制，在這裡我做的是echarts包的直接下載，可能會佔一些體積，你可以在echarts官網上選擇線上訂製，只下載你需要的圖表解來減少包的體積，官網：線上訂製

如果你覺得本文章不錯，歡迎點贊?、收藏?、轉發✨哦~
閱讀其它：
微信小程式檔案預覽和下載-檔案系統
微信小程式動態生成表單來啦！你再也不需要手寫表單了！
微信小程式使用者隱私API
微信小程式-支付
微信小程式登入流程與實現

相關文章