一、效果图展示
先展示一下实际的效果图
用户选择完需要的波形参数字段之后，页面开始渲染图表，有几个参数就要渲染几个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)', // 设置白色的半透明背景
推荐链接
您阅读本篇文章共花了：
发表评论