uni-app微信小程序使用ECharts

  1. 引入 npm install echarts mpvue-echarts
  2. ECharts 在线构建 定制 echarts 的 js 文件
  3. 新建 common 文件夹,将定制文件放在 common 下
  4. 将 node_modules 下 mpvue-echarts 中 src 文件夹复制到 components 文件夹下
  5. 页面绘制
<view class="echarts-wrap">
	 <my-echarts id="mychart-dom-bar" canvas-id="mychart-bar" :echarts="echarts" :onInit="initChart"></my-echarts>
</view>
import * as echarts from '@/common/echarts.min.js';
import myEcharts from '@/components/src/echarts.vue';
export default {
	components:{myEcharts},
	data() {
		return {echarts}
	},
	methods: {
		initChart(canvas, width, height) {
			let chart = null
				chart = echarts.init(canvas, null, {
					width: width,
					height: height
				});
				var option = {...}
				chart.setOption(option);
		 		return chart;
		}
	}
}
.echarts-wrap{
	width: 100%;
	height:500px;
}
  1. 遇到 this.echarts.setCanvasCreator is not a function 报错在 components 下 src 中找到 echarts.vue文件
    引入 import * as echarts from ‘@/common/echarts.min.js’;
    注销掉 props 中 echarts 对象
    找到 this.ctx 和 const query ,给其添加 this 参数
this.ctx = wx.createCanvasContext(canvasId,this);
const query = wx.createSelectorQuery().in(this);
  1. 遇到 t.addEventListener is not a function 报错在 common 中找到 echarts.min.js文件
    全文搜索 use strict 在下面增加语句var isDomLevel2 = (typeof window !== ‘undefined’) && !!window.addEventListener
    全文搜索 function Pe(t, e, n, i) 和 function Le(t, e, n, i) 进行修改增加判断,(注意是参数中带有i的,Le 与 Pe 函数里内容可能颠倒,在原有方法上增加对应新判断即可)
		function Pe(t, e, n, i) {
			if(isDomLevel2){
				t.addEventListener(e, n, i)
			}else{
				t.attachEvent('on' + e, n)
			}
		}
		function Le(t, e, n, i) {
			if(isDomLevel2){
				t.removeEventListener(e, n, i)
			}else{
				t.detachEvent('on' + e, n)
			}
		}

8.全文搜索 preventDefault() 修改当前的方法函数增加判断(函数名可能不叫 t_,不影响)

t_ = function(t) {
		if(isDomLevel2 ){
			t.preventDefault(), t.stopPropagation(), t.cancelBubble = !0
		}else{
			t.returnValue = false
			t.cancelBubble = !0
		}
	}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值