注意：:此方法用在微信小程序
-
安装依赖
npm install echarts mpvue-echarts -
找到mpvue-echarts模块里的echarts文件，找到相应代码覆盖即可，替换如下
<pre style="box-sizing: border-box; overflow: auto; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 11.899999618530273px; display: block; padding: 16px; margin: 0px 0px 16px; line-height: 1.45; word-break: break-all; word-wrap: normal; color: rgb(51, 51, 51); background-color: rgb(246, 248, 250); border: 1px solid rgb(204, 204, 204); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;">复制代码`<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";
export default {
props: {
canvasId: {
type: String,
default: "ec-canvas"
},
lazyLoad: {
type: Boolean,
default: false
},
disableTouch: {
type: Boolean,
default: false
},
throttleTouch: {
type: Boolean,
default: false
}
},
// #ifdef H5
mounted() {
if (!this.lazyLoad) this.init();
},
// #endif
// #ifndef H5
onReady() {
if (!this.lazyLoad) this.init();
},
// #endif
methods: {
setChart(chart) {
this.chart = chart;
},
init() {
const { canvasId } = this;
this.ctx = wx.createCanvasContext(canvasId, this);
this.canvas = new WxCanvas(this.ctx, canvasId);
const query = wx.createSelectorQuery().in(this);
query
.select(`#${canvasId}`)
.boundingClientRect(res => {
if (!res) {
setTimeout(() => this.init(), 50);
return;
}
this.$emit("onInit", {
width: res.width,
height: 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>`</pre>
3.图表示例文件
<pre style="box-sizing: border-box; overflow: auto; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 11.899999618530273px; display: block; padding: 16px; margin: 0px 0px 16px; line-height: 1.45; word-break: break-all; word-wrap: normal; color: rgb(51, 51, 51); background-color: rgb(246, 248, 250); border: 1px solid rgb(204, 204, 204); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;">复制代码`<template>
<view class="materials">
<view class="echarts-wrap">
<mpvue-echarts class="ec-canvas" @onInit="onInit" canvasId="demo-canvas" ref="chart1" />
</view>
<button @click="changeChart">更改</button>
</view>
</template>
<script> import * as echarts from "echarts/dist/echarts.min";
import mpvueEcharts from "mpvue-echarts";
function getDate(date) {
return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
}
let chart1 = null;
export default {
components: {
mpvueEcharts
},
data() {
return {};
},
onReady() {},
methods: {
changeChart() {
chart1.setOption(this.getOptions(10, 30));
},
getOptions(nan, nv) {
return {
title: {
text: "性别比例",
x: "center",
textStyle: {
fontSize: 16
}
},
backgroundColor: "#FFF",
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
xAxis: { type: "value", splitNumber: 7 },
yAxis: { type: "category", show: false, data: [getDate(new Date())] },
series: [
{
name: "男",
type: "bar",
stack: "总量",
data: [nan],
barWidth: 50,
itemStyle: { normal: { color: "#00aaff" } }
},
{
name: "女",
type: "bar",
stack: "总量",
data: [nv],
itemStyle: { normal: { color: "#f4516c" } }
}
]
};
},
onInit(e) {
let { width, height } = e;
let canvas = this.$refs.chart1.canvas;
echarts.setCanvasCreator(() => canvas);
chart1 = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart1);
chart1.setOption(this.getOptions(50, 10));
this.$refs.chart1.setChart(chart1);
}
}
}; </script>
<style> .echarts-wrap {
width: 100%;
height: 300px;
}`</pre>
</article>
网友评论