目录

开始使用

遇到问题

使用自定义主题

开始使用

1. 引入 npm install echarts mpvue-echarts

2. ECharts 在线构建 定制 echarts 的 js 文件

3. 新建 common 文件夹，将定制文件放在 common 下

4. 将 node_modules 下 mpvue-echarts 中除 src 文件夹之外的部分删除，mpvue-echarts文件夹复制到 components 文件夹下，删除node_modules

5.创建components/my-echart/my-echart.vue文件 

<template>
	<view class="echarts-wrap">
		<myechart ref="mapChart" :echarts="echarts" :onInit="initChart" />

	</view>
</template>

<script>
	import * as echarts from '@/common/echarts.min.js';
	import myechart from '@/components/mpvue-echarts/src/echarts.vue';
	import theme from '@/common/chalk.js';
	var that=''
	export default {
		name: '',
		props: [],
		components: {
			myechart
		},
		data() {
			return {
				echarts
			}
		},
		onReady() {
			uni.hideHomeButton()
		},
		computed: {},
		watch: {},
		methods: {
			initChart(canvas, width, height) {
				// console.log('图标', canvas);
				let chart = null
				echarts.registerTheme('theme', theme)
				chart = echarts.init(canvas, 'theme', {
					width: width,
					height: height
				});
				var option = {
					animationDuration: 500,
					throttleTouch: true,
					title: {
						text: ''
					},
					// toolbox: {
					//     feature: {
					//       dataZoom: {
					//         yAxisIndex: 'none'
					//       },
					//       restore: {},
					//       saveAsImage: {}
					//     }
					//   },
					dataZoom: [{
						show: true,
						type: 'slider',
						startValue: 0,
						endValue: 5
					}],
					legend: {
						show: false
					},
					grid: {
						top: '4%',
						left: '3%',
						right: '4%',
						bottom: '20%',
						containLabel: true
					},
					xAxis: {
						data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '00', '01']
					},
					yAxis: {},
					series: [{
						name: 'x',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20]
					}, {
						name: 'y',
						type: 'bar',
						data: [15, 30, 26, 30, 5, 10, 15, 30, 26, 30, 5, 10]
					}, {
						name: 'z',
						type: 'line',
						data: [50, 20, 16, 20, 30, 2, 50, 20, 16, 20, 30, 2]
					}]
				}; // ECharts 配置项
				// console.log(option);
				// console.log(chart);
				chart.on('datazoom',function(params){
					console.log(that.$refs);
					that.$refs.mapChart.canvasToTempFilePath('noTime')
				})
				chart.setOption(option);

				return chart; // 返回 chart 后可以自动绑定触摸操作
			}
		},
		created() {
			that=this
		},
		mounted() {},
	}
</script>
<style lang="scss" scoped>
	.echarts-wrap {
		position: relative;
		width: 100%;
		height: 500rpx;
	}

	image {
		position: absolute;
		top: 0;
	}
</style>
<style lang="scss">

</style>

遇到问题

1.this.echarts.setCanvasCreator is not a function 报错

在components/mpvue-echarts/src/echarts.vue文件中

  1. 引入 import * as echarts from '@/common/echarts.min.js';
  2. 注释掉 props 中 echarts 对象
  3. 在**init()**函数中找到 this.ctx 和 const query ，给其添加 this 参数： this.ctx = wx.createCanvasContext(canvasId,this); const query = wx.createSelectorQuery().in(this);

或直接替换文件代码

<template>
	<view class="canvas">
		<canvas v-if="canvasId" class="ec-canvas" :id="canvasId" :canvasId="canvasId" @touchstart="touchStart"
			@touchmove="touchMove" @touchend="touchEnd" @error="error"></canvas>
	</view>

</template>

<script>
	import WxCanvas from './wx-canvas';
	import * as echarts from '@/common/echarts.min.js';

	export default {
		props: {
			// echarts: {  
			//   required: true,  
			//   type: Object,  
			//   default() {  
			//     return echarts;  
			//   }  
			// },  
			onInit: {
				required: true,
				type: Function,
				default: null
			},
			canvasId: {
				type: String,
				default: 'ec-canvas'
			},
			lazyLoad: {
				type: Boolean,
				default: false
			},
			disableTouch: {
				type: Boolean,
				default: false
			},
			throttleTouch: {
				type: Boolean,
				default: false
			}
		},
		onReady() {
			this.echarts = echarts;
			if (!this.echarts) {
				console.warn('组件需绑定 echarts 变量，例：<ec-canvas id="mychart-dom-bar" ' +
					'canvas-id="mychart-bar" :echarts="echarts"></ec-canvas>');
				return;
			}

			// console.log('echarts');  
			// console.log(this.onInit);  

			if (!this.lazyLoad) this.init();
		},
		methods: {
			init() {
				const version = wx.version.version.split('.').map(n => parseInt(n, 10));
				const isValid = version[0] > 1 || (version[0] === 1 && version[1] > 9) || (version[0] === 1 && version[
					1] === 9 && version[2] >= 91);
				if (!isValid) {
					console.error('微信基础库版本过低，需大于等于 1.9.91。' + '参见：https://github.com/ecomfe/echarts-for-weixin' +
						'#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82');
					return;
				}

				if (!this.onInit) {
					console.warn('请传入 onInit 函数进行初始化');
					return;
				}

				const canvasId = this.canvasId;
				this.ctx = wx.createCanvasContext(canvasId, this);

				const canvas = new WxCanvas(this.ctx, canvasId);

				this.echarts.setCanvasCreator(() => canvas);

				const query = wx.createSelectorQuery().in(this);
				query.select(`#${canvasId}`)
					.boundingClientRect(res => {
						if (!res) {
							//setTimeout(() => this.init(), 200);  
							return;
						}

						this.chart = this.onInit(canvas, res.width, res.height);
					})
					.exec();
				this.canvasToTempFilePath()
			},
			canvasToTempFilePath(noTime) {
				const {
					canvasId
				} = this;
				this.ctx.draw(false, setTimeout(() => {
					wx.canvasToTempFilePath({
						canvasId,
						x: 0,
						y: 0,
						width: 2500,
						height: 2000,
						success: (res)=> {
							// console.log(res.tempFilePath);
							this.$store.commit('getImg',res.tempFilePath)
						}
					}, this);
				}, 1000));
			},
			touchStart(e) {
				console.log(e);
				const {
					disableTouch,
					chart
				} = this;
				if (disableTouch || !chart || !e.mp.touches.length) return;
				const touch = e.mp.touches[0];
				chart._zr.handler.dispatch('mousedown', {
					zrX: touch.x,
					zrY: touch.y
				});
				chart._zr.handler.dispatch('mousemove', {
					zrX: touch.x,
					zrY: touch.y
				});
			},
			touchMove(e) {
				const {
					disableTouch,
					throttleTouch,
					chart,
					lastMoveTime
				} = this;
				if (disableTouch || !chart || !e.mp.touches.length) return;

				if (throttleTouch) {
					const currMoveTime = Date.now();
					if (currMoveTime - lastMoveTime < 240) return;
					this.lastMoveTime = currMoveTime;
				}

				const touch = e.mp.touches[0];
				chart._zr.handler.dispatch('mousemove', {
					zrX: touch.x,
					zrY: touch.y
				});
			},
			touchEnd(e) {
				const {
					disableTouch,
					chart
				} = this;
				if (disableTouch || !chart) return;
				const touch = e.mp.changedTouches ? e.mp.changedTouches[0] : {};
				chart._zr.handler.dispatch('mouseup', {
					zrX: touch.x,
					zrY: touch.y
				});
				chart._zr.handler.dispatch('click', {
					zrX: touch.x,
					zrY: touch.y
				});
			}
		}
	};
</script>

<style scoped>
	.canvas{
		width: 100%;
		height: 500rpx;
	}
	.ec-canvas {
		width: 100%;
		height: 100%;
		flex: 1;
	}
</style>

2.遇到 t.addEventListener is not a function 报错

在 common/echarts.min.js文件中

  1. 全文搜索 use strict 在下面增加语句 var isDomLevel2 = (typeof window !== 'undefined') && !!window.addEventListener
  2. 全文搜索 function Pe(t,e,n,i) 和 function Le(t,e,n,i) 在方法中进行修改增加判断 if(isDomLevel2){t.addEventListener(e,n,i)}else{t.attachEvent('on' + e,n)}
  3. 全文搜索t.preventDefault()修改为
    if(isDomLevel2){t.preventDefault(), t.stopPropagation(),t.cancelBubble=!0}else{t.returnValue = falset.cancelBubble = !0}

使用自定义主题

1.前往echarts主题编辑器编辑主题

2.编辑完成后在下载主题中选json格式复制

3.创建common/theme.js文件

const theme = 复制的json
export default theme

4.在components/my-echart/my-echart.vue文件中引入

  1. import theme from '@/common/theme.js';
  2. 在**initChart()**方法中添加代码/修改代码 新增：echarts.registerTheme('theme', theme) 修改：chart = echarts.init(canvas, 'theme', {width: width,height: height});
# echarts # uni-app # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

MySQL全文索引源码剖析之Insert语句执行过程

avatar 华为云开发者联盟
cover

openGauss - 向量化执行引擎 - distinct分组聚合的实现

avatar 华为云开发者联盟
cover

【酷哥说库|GaussDB微动画】GaussDB数据库透明数据加密

avatar 华为云开发者联盟