uniapp 中如何使用echart_uniapp中如何引用echarts

uniapp引用echarts的方法：1、通过uni-app官网直接安装echarts插件生成echarts项目模板；2、创建一个新的hello uni-app项目模板；3、把echarts放到components中。

本教程操作环境：windows7系统、uni-app2.5.1版本，Dell G3电脑。

uni-app 引入 echarts

// import * as echarts from '@/components/echarts/echarts.simple.min.js';

// import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue';

import * as echarts from '../echarts/echarts.simple.min.js'

import mpvueEcharts from '../mpvue-echarts/src/echarts.vue'

export default {

data() {

return {

updateStatus: false,

line: {

legend: {

data: ['邮件营销']

},

xAxis: {

type: 'category',

data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

},

yAxis: {

type: 'value',

data: []

},

dataZoom: [{ type: 'slider', start: 30, end: 100, zoomLock: false, }],

grid: {

left: 40,

right: 40,

bottom: 20,

top: 40,

containLabel: true

},

series: [{ data: [],

data: [820, 932, 901, 934, 1290, 1330, 1320],

type: 'line',

color: ['#5eb4e2'], //折线条的颜色

}]

}

}

},

methods: {

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)

lineChart.setOption(this.line)

this.$refs.lineChart.setChart(lineChart)

},

},

components: {

mpvueEcharts

}

}

.ec-canvas {

display: flex;

height: 100%;

flex: 1;

}

.canvasView {

width: 700upx;

height: 500upx;

}

1、通过 uni-app 官网直接安装echarts 插件 生成 echarts项目模板

2、在Hbuilder中创建一个新的hello uni-app项目模板

3、把echarts模板中 components 下面的 echarts 放到自己项目components 中

4、把hello uni-app模板中 components 下面的mpvue-echarts 放到自己项目components 中