echarts折线图分段显示不同颜色

最新推荐文章于 2024-06-28 10:57:23 发布

转载最新推荐文章于 2024-06-28 10:57:23 发布 · 2.9k 阅读

本文介绍了一个使用ECharts实现的折线图堆叠案例，图表展示了不同渠道一周内的访问数据趋势。该案例利用了ECharts的动态数据展示特性，并提供了保存图表为图片的功能。

摘要生成于 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',
data:["-", "-", 191, 234, 190, "-", "-"]
},
{
name:'',
type:'line',
data:["-", "-", "-", "-", 190, 330, 410]
},

]
};

weiChart.setOption(option);