- 下载依赖:cnpm install mpvue-echarts
- 下载依赖:cnpm install echarts
- 页面引用:
import echarts from ‘echarts’
import mpvueEcharts from ‘mpvue-echarts’
页面引用组件
components: {
mpvueEcharts
},
- view页面中使用:
<mpvue-echarts class='ec-canvas' @onInit='lineInit' canvasId='line' ref='lineChart' />
- data里:
lineInit:lineInitChart,
- 最后实现js
var barec=null;
function lineInitChart(e) {
let {
width,
height
} = e;
let canvas = this.$refs.lineChart.canvas;
echarts.setCanvasCreator(() => canvas);
let barec = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(barec1);
//获取数据
//this.department()
//里面数据应根据接口返回传入
var option = {
color: ["#e13f12", "#1a6ee1", "#1ae186"],
legend: {
data: ['待维修', '维修中', '已完成'],
top: 10
},
grid: {
left: '3%',
right: '4%',
top: '10%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type