前端用echarts绘制含有多个分层的波形图关键代码
作者：大嘴史努比
每次实现各种图表时,总会用到echarts,不得不说确实是一个非常好用的开源库,这篇文章主要给大家介绍了关于前端用echarts绘制含有多个分层的波形图的相关资料,需要的朋友可以参考下
一、效果图展示
先展示一下实际的效果图
用户选择完需要的波形参数字段之后，页面开始渲染图表，有几个参数就要渲染几个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)', // 设置白色的半透明背景总结
到此这篇关于前端用echarts绘制含有多个分层的波形图的文章就介绍到这了,更多相关前端echarts绘制波形图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！