一、使用npm或yarn安装mpvue-echars
npm install mpvue-echarts
二、可在echarts官网在线定制,下载echarts.min.js文件
ECharts 在线构建
三、在node_modules中找到mpvue-echarts,将src中的文件复制出来,作为组件,将第二步下载的echarts.min.js放进去
四、改写echarts.vue文件
这里我直接把我项目中的代码放上来了
<template>
<canvas v-if="canvasId" class="ec-canvas" :id="canvasId" :canvasId="canvasId" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @error="error"></canvas>
</template>
<script>
import WxCanvas from './wx-canvas';
import * as echarts from './echarts.min.js';
export default {
props: {
// echarts: {
// required: true,
// type: Object,
// default() {
// return echarts;
// }
// },
onInit: {
required: true,
type: Function,
default: () => {}
},
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();
},
canvasToTempFilePath(opt) {
const { canvasId } = this;
this.ctx.draw(true, () => {
wx.canvasToTempFilePath({
canvasId,
...opt
});
});
},
touchStart(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>
.ec-canvas {
width: 100%;
height: 100%;
flex: 1;
}
</style>
五、引入该组件到页面中
import mpvueEcharts from "./mpvue-echarts/echarts"
import echarts from "./mpvue-echarts/echarts.min"
<mpvue-echarts id="order" canvasId="order" ref="order" :onInit="initOrder">
</mpvue-echarts>
六、在onInit回调中将echarts图标的参数以及数据渲染出来
initOrder(canvas, width, height) {
let echar = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(echar)
// 此处为配置以及数据,可在echarts官网将图表绘制完成后,复制在此处
let option = {}
echar.setOption(option)
return echar
}
七、注意事项
1.由于this指向问题,在上图initOrder中使用this会报错,如果需要将option的数据放在函数外,可以单独创建一个js文件,放入option数据,再使用import { option } from 'xxxx'引入使用。
2.如果需要获取后台数据,使用async,await,获取到数据后放入option
3.由于该组件是在uniapp开发使用,语法是vue,如果是使用微信开发者工具直接开发,需要将本文中HTML语法,data中数据的改,查,以及函数的使用改为小程序的写法。
八、总结文章来源:https://www.toymoban.com/news/detail-486946.html
前端内容更新速度都很快,也许目前能使用,可能几年,几个月甚至几天就行不通了,如果本文能够帮助到大家,希望可以得到一个关注+赞,如果有什么问题,也可以在下方留下评论。有时间就会回复。本人经验不足,有什么错误,不足之处,可以在评论区指出。文章来源地址https://www.toymoban.com/news/detail-486946.html
到了这里,关于在uniapp,微信小程序中使用echarts的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!