实现步骤：
1、使用如下命令安装相加包
npm install mpvue-echarts
npm install echarts
2、根据需要在echart官网下载相应的图表，echart版本要使用5.2.2及以下，否则会报t.addListen...错误
3、在页面中引入下列文件
<divclass="wrap"><mpvue-echarts:echarts="echarts":onInit="initChart"/></div>import * as echarts from "echarts/dist/echarts.min"; import mpvueEcharts from "mpvue-echarts";
4、具体页面代码如下：
<template><divclass="container"@click="topClick"><divclass="wrap"><mpvue-echarts:echarts="echarts":onInit="initChart"/></div></div></template><script>import*asechartsfrom'../../../../static/js/echarts.min'importmpvueEchartsfrom'mpvue-echarts'import { request, formatTime, formatSwitchTab, formatNavigateTo, getUrlParms} from"../../../utils/util.js"; importconfigfrom'../../../utils/config'; letchart=null; exportdefault { onLoad() { this.initData(); this.getData(); }, onShow() { }, data() { return { echarts, chartOption:null, timeData:[], other_vec:[], x_vec:[], y_vec:[], z_vec:[], x_lable:'X', y_lable:'Y', z_lable:'Z', other_name:'velocity' }; }, components: { mpvueEcharts }, mounted() {}, methods: { create() {}, initData() { letself=this; self.getData(); }, initChart (canvas, width, height) { letself=this; chart=echarts.init(canvas, null, { width: width, height: height }) chart.setOption(self.chartOption); canvas.setChart(chart); returnchart; }, asyncgetData() { letself=this; self.other_vec= [0.94, 3.28, 5.01,3.11, 4.03, 10.67, 11.12, 13.66, 16, 38.43]; self.x_vec= [0.005, 0.017, 0.017, 0.017, 0.017, 0.011, 3.22,5.4,1.2,5.4]; self.y_vec= [0.94, 3.28, 5.01,3.11, 4.03, 10.67, 11.12, 13.66, 16, 38.43]; self.z_vec= [0.005, 0.017, 0.017, 0.017, 0.017, 0.011, 3.22,5.4,1.2,5.4]; lettimeData= ['2009/6/12 2:00', '2009/6/12 3:00', '2009/6/12 4:00', '2009/6/12 5:00', '2009/6/12 6:00', '2009/6/12 7:00', '2009/6/12 8:00', '2009/6/12 9:00', '2009/6/12 10:00', '2009/6/12 11:00']; self.timeData=timeData.map(function (str) { returnstr.replace('2009/', ''); }); self.prepChartOption(); }, prepChartOption(){ letself=this; varoption= { // title: {// text: '数据分析',// left: 'center'// },tooltip: { trigger: 'axis', axisPointer: { animation: false } }, legend: {//图例组件。data: [self.other_name, 'X','Y','Z'],//left: 10, //图例组件离容器左侧的距离。 }, toolbox: { feature: {//各工具配置项。dataZoom: {//数据区域缩放yAxisIndex: 'none' }, restore: {}, saveAsImage: {} } }, axisPointer: {//不同轴的 axisPointer 可以进行联动link: [ { xAxisIndex: 'all' } ] }, // dataZoom: [//用于区域缩放// {// show: true,// realtime: true,// start: 0,//数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。// end: 100,//数据窗口范围的结束百分比。范围是：0 ~ 100。// xAxisIndex: [0, 1, 2,3]//设置 dataZoom-inside 组件控制的 x轴// },// {// type: 'inside',// realtime: true,//拖动时，是否实时更新系列的视图// start: 0,// end: 100,// xAxisIndex: [0, 1, 2,3]// }// ],grid: [ { left: 25,//grid 组件离容器左侧的距离。right: 20,//grid 组件离容器右侧的距离。top: '60',//grid 组件离容器上侧的距离。height: '12%'//grid 组件的高度 }, { left: 25,//xright: 20, top: '170', height: '12%' }, { left: 25,//yright: 20, top: '280', height: '12%', }, { left: 25,//zright: 20, top: '400', height: '12%', } ], xAxis: [ { type: 'category', boundaryGap: false, axisLine: { onZero: true , symbol:['none', 'arrow'] }, data:self.timeData, name:self.other_name, nameTextStyle:{ fontSize:15 }, show:false , position: 'bottom',//x 轴的位置。 }, { gridIndex: 1,//x 轴所在的 grid 的索引，默认位于第一个 gridtype: 'category',//坐标轴类型boundaryGap: false,//坐标轴两边留白策略axisLine: { onZero: true ,//X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。symbol:['none', 'arrow']//只在末端显示箭头 }, data:self.timeData, position: 'bottom',//x 轴的位置。show:false ,//是否显示x轴，默认为truename:'X',//坐标轴名称。nameLocation:'end',//坐标轴名称显示位置。nameTextStyle:{//坐标轴名称文字的字体大小。fontSize:15 } }, { gridIndex: 2, type: 'category', boundaryGap: false, axisLine: { onZero: true , symbol:['none', 'arrow'] }, data: self.timeData, position: 'bottom', name:'Y', nameTextStyle:{ fontSize:15 }, show:false }, { gridIndex: 3, type: 'category', boundaryGap: false, axisLine: { onZero: true , symbol:['none', 'arrow'] }, data: self.timeData, position: 'bottom', name:'s', nameTextStyle:{ fontSize:15 }, nameLocation:'end', // show:false } ], yAxis: [ { name: self.other_name,//type: 'value', }, { gridIndex: 1, name: self.x_lable,//'X' type: 'value', // inverse: true //是否是反向坐标轴。 }, { gridIndex: 2, name: self.y_lable,//'Y' type: 'value', }, { gridIndex: 3, name: self.z_lable,//'Z' type: 'value', }, ], series: [ { name: self.other_name,//type: 'line', symbolSize: 4, // prettier-ignoredata: self.other_vec, itemStyle:{ normal:{ color:'#5470c6' } }, label:{ fontSize:8 }, markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ], symbolSize:20, label:{ fontSize:8 } }, symbol:'none'//标记的图形,默认circle }, { name: 'X', type: 'line', xAxisIndex: 1,//使用的 x 轴的 indexyAxisIndex: 1,//使用的 y 轴的 indexsymbolSize: 4,//标记的大小// prettier-ignoredata: self.x_vec,//itemStyle:{ normal:{ color:'#91cc75' } }, label:{ fontSize:8 }, markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'}, { name: 'xPeakIndex', coord: [self.xPeakIndex, 0], symbolSize:8, symbol:'diamond', itemStyle:{ color:'#f00' } }, { name: 'xValleyIndex', coord: [self.xValleyIndex, 0], symbolSize:8, symbol:'diamond', itemStyle:{ color:'#f00' } }, ], symbolSize:20, label:{ fontSize:8 } }, symbol:'none'//标记的图形,默认circle }, { name: 'Y', type: 'line', xAxisIndex: 2, yAxisIndex: 2, symbolSize: 4, data: self.y_vec,//itemStyle:{ normal:{ color:'#fac858' } }, label:{ fontSize:8 }, markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'}, { name: 'yPeakIndex', coord: [self.yPeakIndex, 0], symbolSize:8, symbol:'diamond', itemStyle:{ color:'#f00' } }, { name: 'yValleyIndex', coord: [self.yValleyIndex, 0], symbolSize:8, symbol:'diamond', itemStyle:{ color:'#f00' } }, ], symbolSize:20, label:{ fontSize:8 } }, symbol:'none'//标记的图形,默认circle }, { name: 'Z', type: 'line', xAxisIndex: 3,//使用的 x 轴的 indexyAxisIndex: 3,//使用的 y 轴的 indexsymbolSize: 4,//标记的大小// prettier-ignoredata: self.z_vec,//itemStyle:{ normal:{ color:'#ee6666' } }, label:{ fontSize:8 }, markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'}, { name: 'ts1', coord: [self.ts1, 0],//coord: [5, 33.4], 其中 5 表示 xAxis.data[5]，即 '33' 这个元素。symbolSize:8, symbol:'diamond', itemStyle:{ color:'#f00' } }, { name: 'te1', coord: [self.te1, 0], symbolSize:8, symbol:'diamond', itemStyle:{ color:'#f00' } }, { name: 'ts2', coord: [self.ts2, 0], symbolSize:8, symbol:'diamond', itemStyle:{ color:'#f00' } }, { name: 'te2', coord: [self.te2, 0], symbolSize:8, symbol:'diamond', itemStyle:{ color:'#f00' } }, { name: 'startBreakIndex', coord: [self.startBreakIndex, 0], symbolSize:8, symbol:'circle', itemStyle:{ color:'#00009c' } }, { name: 'zPeakIndex', coord: [self.zPeakIndex, 0], symbolSize:8, symbol:'diamond', itemStyle:{ color:'#f00' } }, { name: 'zValleyIndex', coord: [self.zValleyIndex, 0], symbolSize:8, symbol:'diamond', itemStyle:{ color:'#f00' } }, ], symbolSize:20, label:{ fontSize:8 } }, symbol:'none'//标记的图形,默认circle } ] };//option 结束self.chartOption=option; } } }; </script><stylescoped>.wrap { width: 100%; height: 1160rpx; } </style>
5、运行界面
