小程序echarts绘画

echarts为小程序提供了组件：ec-canvas

• 官网echarts-for-weixin
• echarts配置项
• 微信小程序中使用ec-canvas

bmi-chart.json

{
  "component": true,
  "usingComponents": {
	  "ec-canvas" : "../ec-canvas/ec-canvas"
  }
}

bmi-chart.wxml

<view class="container">
	<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
</view>

bmi-chart.js

import * as echarts from '../ec-canvas/echarts'
//记得在这里全局声明一下
let seriesDataArr = [];
let timeArr = [];
let chart = null;

Component({
	/**
	 * 组件的属性列表
	 */
	properties: {
		// 数据
		seriesData: {
			type: Array,
			value: [],
			observer: function (seriesData) {
				//这里写个订阅事件去监听父组件传过来的值，
				//为什么要监听呢，因为父子间时通过调接口异步获取的数据，需要去监听一下，在onshow中是获取不到的
				if (seriesData.length > 0) {
					//这里为什么要写setTimeout呢，因为要保证下面的ec渲染初始化图表之后再来这里去调取数据挂载上去
					setTimeout(() => {
						console.log(seriesData, '关注度图表数据')
						seriesDataArr = seriesData
						this.runColumncCanva()
					}, 300)
				}
			},
		},
		// 横坐标日期
		time: {
			type: Array,
			value: [],
			observer: function (time) {
				console.log(time)
				if (time.length > 0) {
					timeArr = []
					time.forEach(time => {
						// 去掉年份，并且以 / 显示日期
						timeArr.push(time)
					})
					this.runColumncCanva()
				}
			},
		},
	},

	/**
	 * 组件的初始数据
	 */
	data: {
		ec: {
			// 初始化图表
			onInit: function(canvas, width, height, dpr) {
				console.log('关注度渲染ec');
				//初始化echarts元素，绑定到全局变量，方便更改数据
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: dpr
				});
				canvas.setChart(chart);
				return chart;
			}
		}
	},

	/**
	 * 组件的方法列表
	 */
	methods: {
		// 绘制图表
		runColumncCanva() {
			var option = {
				color: ['#37A2DA', '#67E0E3', '#9FE6B8'],
				grid: {
					containLabel: true,
					left: '6.7%',
					right: '6.7%',
					top: '6.7%',
					bottom: '6.7%',
				},
				tooltip: {
					show: true,
					trigger: 'axis',
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: timeArr,
					axisLine: {
						show: false,
					},
					axisLabel: {
						rotate: 0, //倾斜度 -90 至 90 默认为0
					},
				},
				yAxis: {
					type: 'value',
					axisLine: {
						show: false,
					},
					splitLine: {
						show: false
					},
					min: seriesDataArr[0]&&seriesDataArr[0].data.length>0?undefined:0,
					max: seriesDataArr[0]&&seriesDataArr[0].data.length>0?undefined:40
				},
				series: seriesDataArr,
			}
			//这里一定要做个charts是否存在的判断，因为万一ec那里没有初始化，这里就会报错
			if (chart) {
				chart.setOption(option)
			}
		},
	},
})

bmi-chart.wxss

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

ec-canvas {
	width: 750rpx;
	height: 553rpx;
}