微信小程序使用Echarts-for-weixin实现图表动态更新数据

一、Echarts介绍

Apache Echarts是一个基于JavaScript的开源可视化图表库，用于创建各种类型图表，常用图表类型有柱状图、折线图、饼状图、散点图等等。

二、微信小程序中使用 Echarts

1、下载Echart-for-weixin项目

echart-for-weixin 项目提供了一个小程序组件（ec-canvas），用这种方式可以方便地使用Echarts

解压下载下来的项目文件去小程序中打开效果如下：

我们想要去使用这个Echarts图表的话，我们有两种方式。

第一种方式：就是像现在这样解压后直接用小程序打开，然后我们可以直接在这个基础上进行修改，一般情况是比较麻烦的，大部分情况下我们是用不到这么多图表的，所以是不推荐的。

第二种方式：是在我们现在已有的项目中来引入Echarts图表

我们首先来看一下我们从GitHub上下载的文件，在这个文件中有一个文件夹是ec-canvas，这其实就是我们的一个核心的文件。

我们只需要将ec-canvas文件夹拷贝到我们自己的项目目录中

拷贝完之后我们回到开发者工具

现在我们目录结构就是这样，它是放在我们根目录下的

根据项目需求在线定制图表
考虑到小程序后期上线会对文件大小有限制，建议到官网进行 在线定制图形 按需下载相应的echarts图表、坐标系和组件

将下载好生成的图表定制文件echarts.min.js重命名为echarts.js并替换掉项目组件ec-cancas中的echarts.js，启动项目

在页面中使用Echarts图表
(1) 在页面json文件中引入ec-canvas组件
pages/test/test.json

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

(2) 在页面wxml文件中使用ec-canvas组件（图表组件标签内添加 force-use-old-canvas=“true” 避免上下滑动页面图表出现漂移）
pages/test/test.wxml

<view style="display: flex;">
  <button class="{{isSel == 1 ? 'selColor': ''}}" bindtap="selectTap" data-sel="1">日</button>
  <button class="{{isSel == 2 ? 'selColor': ''}}" bindtap="selectTap" data-sel="2">周</button>
  <button class="{{isSel == 3 ? 'selColor': ''}}" bindtap="selectTap" data-sel="3">月</button>
</view>
<!-- 使用ec-canvas组件 -->
<view class="main">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas>
</view>

(3) 在页面wxss文件中给ec-canvas图表组件设置高度（使用图表的容器必须给定高度！！！）
pages/test/test.wxss

.main {
  height: 400rpx;
}

ec-canvas {
  width: 100%;
  height: 100%;
}

.selColor {
  background: #3FD0AA;
  color: #ffffff;
}

(4) 在页面js文件中配置echart图表样式（这里我对图表的配置选项option做了封装，便于动态更新数据和切换图表类型）
pages/test/test.js

import * as echarts from '../../ec-canvas/echarts';
const chartsOption = require('../../utils/chartsOption')

Page({
  data: {
    isSel: 1,
    barData: {
      xData: ['10:20', '10:30', '10:50'],
      yData: [90, 60, 80]
    },
    ec: {
      lazyLoad: true // 懒加载
    }
  },

  selectTap(e) {
    const isSel = e.currentTarget.dataset.sel
    const that = this
    const barData = that.data.barData
    console.log(barData);
    if (isSel == 1) {
      barData.xData = ['10:20', '10:30', '10:50']
      barData.yData = [90, 60, 80]
    } else if (isSel == 2) {
      barData.xData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      barData.yData = [23, 50, 18, 25, 80, 25, 100]
    } else {
      barData.xData = ['09-01', '09-02', '09-03', '09-04', '09-05', '09-06', '09-07']
      barData.yData = [90, 60, 80, 70, 40, 50, 100]
    }
    that.setData({
      isSel,
      barData
    })
    that.initChart(that.data.barData)
  },

  initChart(barData) {
    // 绑定组件
    this.barComponent = this.selectComponent("#mychart-dom-bar");
    // 初始化柱状图
    this.barComponent.init((canvas, width, height, dpr) => {
      // 初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // 解决模糊显示问题
      })
      // 开发中根据从后端获取barData数据,动态更新图表
      chart.setOption(chartsOption.barOption(barData))
      return chart
    })
  },

  onShow() {
    this.initChart(this.data.barData)
  }
})

(5) chartsOption.js文件封装图表的配置选项option，便于切换图表（option配置项内容有点多，就不一一介绍了，感兴趣的小伙伴可以去官网开看一下，活学活用~）
utils/chartsOption.js

// 柱状图
function barOption(data) {
	// 图表内容配置项
	const option = {
		xAxis: {
			// 隐藏x轴刻度线
			axisTick: {
				show: false
			},
			data: data.xData
		},
		yAxis: {
			// 隐藏y轴网格线
			splitLine: {
				show: false
			},
			// 隐藏y轴数值
			axisLabel: {
				show: false
			},
		},
		grid: {
			top: '10%',
			right: '3%',
			left: '3%',
			bottom: '22%'
		},
		series: [{
			type: 'bar',
			barWidth: '20', // 柱的宽度
			data: data.yData,
			// 柱的数值显示
			label: {
				show: true,
				position: 'top',
			},
			itemStyle: {
				color: '#3FD0AA',
				barBorderRadius: 2,
				borderWidth: 1,
				shadowColor: '#3FD0AA',
				borderType: 'dashed'
			}
		}],
		// Echarts 横向滚动
		// dataZoom: [{
		// 	type: 'slider',
		// 	show: true,
		// 	xAxisIndex: [0],
		// 	startValue: 0,
		// 	endValue: 7,
		// 	height: '5%', // 滚动条高度
		// 	bottom: '5%',
		// 	left: '2%',
		// 	right: '3%'
		// }]
	}
	return option
}

// 其他图表的配置...

module.exports = {
	barOption
}

微信小程序+Echarts图表