一、效果图展示
先展示一下实际的效果图
用户选择完需要的波形参数字段之后，页面开始渲染图表，有几个参数就要渲染几个grid，也就是几行波形。
二、绘制逻辑
拿到所选的参数数据之后
1.首先是给横坐标轴的里程-数据注入
2.修改tooltip（跟着竖线走的卡片弹窗）里面的弹出窗的显示，需要返回html模板字符串
3.修改datazoom（最底下的蓝色滑动窗），里面初始的起点和终点
4.按照参数的个数添加grid（每一行的波形），需要叠加计算的是，距离bottom的高度，一个距离100，2个距离200
5.按照参数的个数添加xAxis里面的对象 （需要修改 gridIndex 0 1 2 ...）
只有第一个对象，要显示X轴坐标，且同时要判断X轴坐标是否包含车站
第二个对象开始不显示xAxis坐标轴
6.修改y轴 （可显示刻度）（需要修改 gridIndex 0 1 2 ...）
7.最后修改series 每个参数是一个对象的配置（包括数据，线条的类型，颜色）
（值得注意的是，这套绘制，建议放置在一个函数里，然后加载时调用，重新绘制时调用，需要注意重新绘制时，除了要myChart.dispose(); //销毁，还要重新配置option）
三、关键代码
绘制逻辑代码：
const self = this; //重新给图标赋值数据 this.tableData.forEach(function (currentValue, index, array) { // 4.按照参数的个数添加grid，需要叠加计算的是，距离bottom的高度，一个距离100，2个距离200 let height = (index+1)*100; if(index===array.length-1){ self.option.grid.push({ show:true, left: 50, right: 50, bottom: height, height: 100, //每一个折现图的高度 backgroundColor: index % 2 === 1 ? '#f0f0f0' : 'white', // 背景色 }) }else{ self.option.grid.push({ show:true, left: 50, right: 50, bottom: height, height: 100, //每一个折现图的高度 backgroundColor: index % 2 === 1 ? '#f0f0f0' : 'white', // 背景色 }) } // 5.按照参数的个数添加xAxis里面的对象 （需要修改 gridIndex 0 1 2 ...） // !!!只有第一个对象，要显示X轴坐标，且同时要判断X轴坐标是否包含车站 // 第二个对象开始不显示坐标轴 if(index==0){ self.option.xAxis.push({ gridIndex: 0, //x 轴所在的 grid 的索引 type: 'category', //类目轴 boundaryGap: false, //坐标轴两边留白策略， axisLine: { //是否显示坐标轴轴线。 onZero: false, lineStyle: { color: 'black', width: 2, }, }, //车站标注 axisLabel: { // interval: 0,//自适应X轴间距 formatter: function (params) { // 自定义div // console.log(typeof(params)) let res; if (params.includes('站')) { res = '{abg11|' + params + '}'; } else { res = '{abg1|' + params + '}'; } return res; }, rich: { abg11: { backgroundColor: '#2B8AFD', width: '100%', align: 'right', height: 22, borderRadius: 3, padding: [2, 4, 2, 4], color: '#ffffff', }, abg1: { color: '#595959', }, }, }, data: xData, show: true, //是否显示 x 轴。 }) }else{ self.option.xAxis.push({ gridIndex: index, //x 轴所在的 grid 的索引 type: 'category', //类目轴 boundaryGap: false, //坐标轴两边留白策略， axisLine: { onZero: true, //X 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。 lineStyle: { color: '#979797', }, }, data: xData, show: true, //是否显示 x 轴。 axisTick: { //坐标轴刻度相关设置 show: false, }, axisLabel: { //刻度标签 show: false, }, }) } // 6.修改y轴 （可显示刻度）（需要修改 gridIndex 0 1 2 ...） self.option.yAxis.push({ gridIndex: index, //y 轴所在的 grid 的索引 type: 'value', // name: "PM2.5",//纵坐标名字 // nameLocation: "middle",//纵坐标名字的位置 // nameGap: 30,//纵坐标名字与轴线之间的距离 position: 'left', //y轴的位置 inverse: false, splitLine: { //坐标轴在 grid 区域中的分割线 show: false, }, axisLine: { //坐标轴轴线相关设置 竖着那一根 show: true, lineStyle: { color: '#979797', }, }, axisTick: { //坐标轴刻度相关设置 show: false, }, axisLabel: { //刻度标签 show: false, }, },) // 7.最后修改series 每个参数是一个对象 self.option.series.push({ //参数的名字-数据注入 name: currentValue.name, type: 'line', color: self.colorArray[index], // 设置不显示小圆圈 symbol: 'none', showSymbol: false, xAxisIndex: index, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。 yAxisIndex: index, //使用的 y 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。 symbolSize: 8, //标记的大小 // hoverAnimation: false, smooth: true, //平滑曲线 //每个grid的数据-数据注入 data: currentValue.data, markLine: { symbol: 'none', //去掉箭头 //最大值和最小值 data: [ { // type: 'median', //中位数。 type: 'average', //中位数。 symbol: 'none', //去掉开始的原点 label: { //字体设置 show: 'true', position: 'insideEndTop', distance: 10, formatter: currentValue.name, color: 'inherit', }, lineStyle: { //横线设置 width: 1, }, }, ], }, lineStyle: { shadowColor: self.colorArray[index], //透明的颜色 shadowOffsetX: 0, shadowOffsetY: 0, opacity: 0.8, //透明度 shadowBlur: 8, //阴影大小 type: "solid", //实线 width: 2, }, }) }); this.getHeight(this.tableData.length)//重新获得动态的图表高度 //折线图 this.$nextTick(()=>{ this.getChart();//实际绘制 })动态高度函数代码：
//获得动态高度 getHeight(num){ this.dynamicHeight = `${num * 100 + 150}px`; },绘制代码：
//绘制折线图 getChart() { const chartDom = document.getElementById('main-echarts'); if (myChart != null && myChart != '' && myChart != undefined) { console.log("销毁了"); myChart.dispose(); //销毁 } // // 显示加载图 // myChart.showLoading(); this.$nextTick(()=>{ myChart = echarts.init(chartDom); myChart.setOption(this.option, true);//这里设置true,会每次根据数据重新绘制，设置为false之后，每次新的绘制会在原有图表的基础上再添加（不会有断裂感，会形成流动感） }) window.addEventListener('resize', function () { myChart.resize(); }); }
Y轴名字显示且竖直放置：
// 6.修改y轴 （可显示刻度）（需要修改 gridIndex 0 1 2 ...） self.option.yAxis.push({ gridIndex: index, //y 轴所在的 grid 的索引 type: 'value', name: currentValue.name.toString().split("").join("\n"),//纵坐标名字竖直从上到下排列 nameRotate:0, nameTextStyle: { padding: 10, // 设置与坐标轴的距离，单位为像素 color: 'black', // 这里设置颜色 }, nameLocation: "middle",//纵坐标名字的位置 nameGap: 40,//纵坐标名字与轴线之间的距离 position: 'left', //y轴的位置 inverse: false, splitLine: { //坐标轴在 grid 区域中的分割线 show: false, }, axisLine: { //坐标轴轴线相关设置 竖着那一根 show: true, lineStyle: { color: '#979797', }, }, axisTick: { //坐标轴刻度相关设置 show: false, }, axisLabel: { //刻度标签 show: true, showMinLabel: false, // 隐藏最小值标签 showMaxLabel: false, // 隐藏最大值标签 }, },)弹窗显示为半透明
this.option = { //鼠标放上去显示的弹窗 tooltip: { trigger: 'axis', //坐标系出触发 backgroundColor: 'rgba(255, 255, 255, 0.7)', // 设置白色的半透明背景