echarts折线图实线加虚线

最新推荐文章于 2025-06-16 16:19:14 发布

原创最新推荐文章于 2025-06-16 16:19:14 发布 · 7.2k 阅读

5 ·

CC 4.0 BY-SA版权

PC端专栏收录该内容

30 篇文章

订阅专栏

本文介绍了如何利用Echarts库创建一个折线图，其中部分线条为实线，部分线条为虚线。通过设置Echarts的option属性，可以灵活控制折线图的样式，实现数据的可视化展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var weiChart = echarts.init(document.getElementById('box'));
option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
{
name:'',
type:'line',
data:[120, 132, 191, "-", "-", "-", "-"]
},
{
name:'',
type:'line',
smooth:false, //关键点，为true是不支持虚线，实线就用true
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted' //'dotted'虚线 'solid'实线
}
}
},
data:["-", "-", 191, 234, 190, "-", "-"]
},
{
name:'',
type:'line',
data:["-", "-", "-", "-", 190, 330, "-"]
},
{
name:'',
type:'line',
smooth:false, //关键点，为true是不支持虚线，实线就用true
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted' //'dotted'虚线 'solid'实线
}
}
},
data:["-", "-", "-", "-", "-", 330, 410]
},

]
};

weiChart.setOption(option);