echarts实时动态折线图（关于echarts 使用 dataZoom 中动态配置 start、end 值出现折线图错乱问题）
本文目录
- 关于echarts 使用 dataZoom 中动态配置 start、end 值出现折线图错乱问题
- Echarts折线图显示最高最低点以及首尾两点的标注
- Vue-ele中echart折线图动态展示和修改
- Echarts折线图实现 多条折线
- echarts折线图实现按时间自动划分间隔(3)
关于echarts 使用 dataZoom 中动态配置 start、end 值出现折线图错乱问题
项目中使用echarts进行图表的展示，当数据量很大的时候，需要配置dataZoom进行图表可滚动，但是数据都挤在一起，严重影响了图表的美观性，所以动态配置dataZoom的start 、 end属性
在图表option设置前，进行计算startLength的值
这种设置，在数据动态切换时，随着this.startLength的变化，会出现折线图发生部分连接错乱问题，后发现解决方法如下：
添加filterMode属性为 empty即可解决该问题
Echarts折线图显示最高最低点以及首尾两点的标注
最终实现的效果
上面这是写死的数据，接下来就用动态数据再写一遍
Vue-ele中echart折线图动态展示和修改
《LineChart :reportsList="reportsList" v-if="Object.keys(reportsList).length" /》
data() {
return {
reportsList: {},
};
},
created() {
reportsGet("reports/type/1").then((res) =》 {
console.log(res);
let { meta, data } = res.data;
if (meta.status == 200) {
this.reportsList = data;
} else {
this.$message.error(meta.msg);
}
});
},
data() {
return {
lineList: {},
};
},
props: {
reportsList: {
type: Object,
default: () =》 {
return {
title: {
text: "折线图",
},
tooltip: {},
xAxis: {
axisLabel: { interval: 0, rotate: 0, margin: 15 },
data: ,
},
yAxis: {},
series: [
{
name: "销量",
type: "line",
data: ,
},
],
};
},
},
},
mounted() {
var myChart = echarts.init(this.$refs.main);
this.lineList = JSON.parse(JSON.stringify(this.reportsList));
this.lineList.title = {
text: "折线图",
};
/* 给折线图设置上下左右的距离 */
this.lineList.legend.top=’10%’;
this.lineList.xAxis.axisLabel =
{ interval: 0, rotate: 30, margin: 15 };
this.lineList.grid = {
top: "30%",
width: "80%",
height: "50%",
left: "20%",
};
/* 把折线图所属区域删掉 */
this.lineList.series.forEach(r=》{
delete r.areaStyle;
r.smooth=true
})
myChart.setOption(this.lineList);
window.LineChart = myChart;
},
};
Echarts折线图实现 多条折线
官方例子： Examples - Apache ECharts
官方文档： Documentation - Apache ECharts
必须要的属性：xAxis、yAxis、series
效果图：
实现步骤：
样式：
遇到什么问题，可留言，看到会尽快回复。
echarts折线图实现按时间自动划分间隔(3)
因为直接设置interval在X轴type为time的折线图中不起作用，所以需要minInterval ：自动计算的坐标轴最小间隔大小。
本文相关文章：
cname记录要备案吗（godaddy怎么解析二级域名godaddy二级域名解析配置）
2026年9月26日 00:30
2026年9月25日 20:10
tftp服务器端口设置（思科交换机dhcp配置命令介绍【详细讲解】）
2026年9月9日 21:50
2026年9月2日 19:00
2026年8月30日 12:30
linux怎么进入命令行（怎么样配置linux使其启动时直接登录到命令行模式）
2026年10月14日 02:00
echarts饼图label显示不全（Echarts 解决饼图文字过长重叠的问题）
2026年8月29日 00:10
php的安装包下载（我下载了php的安装包，解压后如下，请问哪一个是配置文件，我根据书本教程，找不到php.ini-dist这个文件）
2026年8月26日 14:50
idea显示service窗口（IDEA开启并配置services窗口）
2026年8月17日 15:10
nginx69（使用https访问http/https通信协议，需要哪些配置文件）
2026年8月3日 09:00
更多文章：
idea控制台乱码（idea 输出 System.out.println（） 控制台乱码）
2026年10月14日 07:30
2026年10月14日 06:20
spring事务的作用（为什么要使用spring的事务，一般在什么情况下使用）
2026年10月14日 05:40
2026年10月14日 04:50
linux怎么进入命令行（怎么样配置linux使其启动时直接登录到命令行模式）
2026年10月14日 02:00
java培训机构好还是大学好（大学生想转行学java，该去java培训班还是自学呢）
2026年10月13日 23:30
2026年10月13日 19:10
2026年10月13日 19:00
前端面试必背十个点（资深HR揭秘：Web前端面试技巧有哪些）
2026年10月13日 17:50
sqlplus重置用户名密码（Oracle中的plus的用户名和密码忘了怎么办）
2026年10月13日 17:40