微信小程序echarts運用指南

一、基本概念

微信小程序是一種新興的應用平台，echarts則是一種常用的JavaScript圖表庫。微信小程序echarts可以將這兩者結合起來，讓小程序用戶能夠方便地使用echarts展示數據，同時在小程序端實現交互和動態效果。

二、安裝與基本使用

1、安裝echarts

npm install echarts -S

2、在需要使用echarts的頁面json文件中添加引用

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

3、在需要使用echarts的頁面wxml文件中添加使用代碼

4、在需要使用echarts的頁面js文件中添加代碼

import * as echarts from '../../libs/ec-canvas/echarts';

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
})

function initChart (canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {
      // echarts配置
  };

  chart.setOption(option);
  return chart;
}

三、數據與交互

1、數據綁定

echarts的數據可以通過data屬性進行傳遞，通過setData動態更新數據，實現動態展示效果。

this.setData({
  ec: {
    onInit: initChart,
    // echarts配置
    data: {
      // echarts數據
    }
  }
});

2、交互與事件

微信小程序可以通過wx.canvasTouchEvent將用戶的觸摸事件轉化為echarts的觸摸事件，進而進行交互。

canvasId = e.currentTarget.dataset.canvasId;
chartInstance = this.selectComponent('#' + canvasId).getChart();
if (chartInstance) {
  const canvas = chartInstance.getDom();
  const touchEvent = e.changedTouches[0];
  const touch = {
    x: touchEvent.x,
    y: touchEvent.y,
  };
  chartInstance.dispatchAction({
    type: 'mousemove',
    event: {
      target: 'none',
      // 轉換觸摸位置
      zrX: touch.x - canvas.offsetLeft,
      zrY: touch.y - canvas.offsetTop,
    }
  });
}

四、常用圖表展示效果

1、折線圖

折線圖是一種展示連續數據變化趨勢的圖表，可以通過echarts提供的配置項實現各種效果。

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line'
  }]
};

2、柱狀圖

柱狀圖是用長方形的面積或高度等比例的表現數據的圖表。在echarts中，可以通過配置項實現多種效果的柱狀圖。

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'bar'
  }]
};

3、餅狀圖

餅狀圖是一種用圓環的比例表現數據的圖表，echarts提供的餅狀圖配置項可以實現多種效果。

option = {
  series: [{
    type: 'pie',
    data: [
      {value: 335, name: '直接訪問'},
      {value: 310, name: '郵件營銷'},
      {value: 234, name: '聯盟廣告'},
      {value: 135, name: '視頻廣告'},
      {value: 1548, name: '搜索引擎'}
    ]
  }]
};

五、總結

本文簡要介紹了微信小程序echarts的基本概念、安裝與使用、數據與交互以及常用圖表展示效果。希望讀者能夠應用本文所述的技能，為小程序增添更美觀、人性化的數據展示效果。