uniapp 中如何使用echart_如何解决在uni-app使用mpvue-echarts报this.echarts.setCanvasCreator is not a function的错误...

注意：:此方法用在微信小程序

安装依赖

npm install echarts mpvue-echarts

找到mpvue-echarts模块里的echarts文件，找到相应代码覆盖即可，替换如下

复制代码`

v-if="canvasId"

class="ec-canvas"

:id="canvasId"

:canvasId="canvasId"

@touchstart="touchStart"

@touchmove="touchMove"

@touchend="touchEnd"

@error="error"

>

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

});

}

}

};

width: 100%;

height: 100%;

flex: 1;

} `

3.图表示例文件

复制代码`

更改

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);

}

}

};

width: 100%;

height: 300px;

}`