前端用echarts绘制含有多个分层的波形图关键代码
更新时间：2024年03月16日 14:10:24 作者：大嘴史努比
每次实现各种图表时,总会用到echarts,不得不说确实是一个非常好用的开源库,这篇文章主要给大家介绍了关于前端用echarts绘制含有多个分层的波形图的相关资料,需要的朋友可以参考下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
一、效果图展示
先展示一下实际的效果图
用户选择完需要的波形参数字段之后，页面开始渲染图表，有几个参数就要渲染几个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绘制波形图内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！
相关文章
这篇文章主要为大家详细介绍了javascript实现简易数码时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下2016-05-05
BootStrap Table 设置height表头与内容无法对齐的问题
这篇文章主要介绍了BootStrap Table 设置height表头与内容无法对齐的问题,需要的朋友可以参考下2016-12-12
用js有很久了，但都没有深究过js的数组形式。偶尔用用也就是简单的string.split(char)。对于字符的处理很多情况下需要用到数组2013-03-03
Bootstrap的popover（弹出框）2秒后定时消失的实现代码
Bootstrap Popover（弹出框）是使用定制的 Jquery 插件创建的。它可以用来显示任何元素的一些信息。这篇文章主要介绍了Bootstrap的popover（弹出框）2秒后定时消失功能，需要的朋友参考下2017-02-02
异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。在我们学习的传统单线程编程中，程序的运行是同步的，同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行，而异步的概念则是不保证同步的概念2022-09-09
这篇文章主要介绍了JS获取指定月份的天数两种实现方法,需要的朋友可以参考下2018-06-06
p5.js 是一个JavaScript的函数库，它在制作之初就和Processing有同样的目标。本文将利用p5.js 制作出一束动态花束，感兴趣的可以尝试一下2022-06-06
这篇文章主要为大家详细介绍了JavaScript实现登录滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要介绍了使用JS中的Replace()方法遇到的问题小结,需要的朋友可以参考下2017-10-10
最新评论