uniapp 中如何使用echart_uni-app引用Echarts_hbuilder教程,mui教程,flutter教程,apicloud教程_我爱模板网 - 提供下载各种免费建站资源，免费网站模...

因为项目分为web端和小程序端，而echart又能满足项目中变态的效果，web端好解决，小程序端被坑了好长时间，下面记录完整过程：

1、创建一个空的文件夹如：test-echarts。

2、进入 test-echarts 打开命令行工具，执行 npm init 一路回车即可。

3、下载第三方库：

npm install echarts mpvue-echarts --save

4、进入 node_modules 目录，里面的三个目录：echarts、mpvue-echats 、zrender 就是我们需要的第三方库。

5、将刚才下载的node_modules里面的三个文件夹拷贝到项目根目录，最终项目截图如下：

6、在需要显示的地方加上：

7、在页面中加入下面的代码：

import * as echarts from 'echarts'

import mpvueEcharts from 'mpvue-echarts'

function lineInit(e) {

let { width, height } = e;

let canvas = this.$refs.lineChart.canvas;

echarts.setCanvasCreator(() => canvas);

let lineChart = echarts.init(canvas, null, {

width: width,

height: height

});

canvas.setChart(lineChart);

var lineOption = {

title: {

text: '某站点用户访问来源',

subtext: '纯属虚构',

x: 'center'

},

tooltip: {

trigger: 'item',

formatter: "{a} {b} : {c} ({d}%)"

},

legend: {

orient: 'vertical',

bottom: '10%',

data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']

},

series: [{

name: '访问来源',

type: 'pie',

radius: '55%',

center: ['50%', '40%'],

data: [{

value: 335,

name: '直接访问'

},

{

value: 310,

name: '邮件营销'

},

{

value: 234,

name: '联盟广告'

},

{

value: 135,

name: '视频广告'

},

{

value: 1548,

name: '搜索引擎'

}

],

itemStyle: {

emphasis: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

}

}]

};

lineChart.setOption(lineOption);

this.$refs.lineChart.setChart(lineChart);

}

export default {

components: {

mpvueEcharts

},

data() {

return {

state:0,

//初始化图表

echarts,

onInit: lineInit

}

},

methods: {

openHelpPopup(){

this.$refs.helpPopup.open()

},

closeHelpPopup(){

this.$refs.helpPopup.close()

},

}

}

8、找到mpvue-echarts/src/echarts.vue，换成下面的代码：

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

});

}

}

};

.ec-canvas {

width: 100%;

height: 100%;

flex: 1;

}

至此，应该在小程序就能显示了。