@[toc]
使用 echart 实现一个折线图内线段的多种不同形式
通过不同形式的线段代表过去、当下、未来(预测)
效果图
代码如下
option = {
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun',"","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","",""]
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [872, 950, 1034, 1123, 925, 804, 932, 1109, 1083, 941, 1056, 857, 882, 1136, 938, 899, 862, 1149, 1135, 1108, 1005, 1001, 1049, 1124, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null
]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 0, 1000, 1200, 1039, 861, 1016, 850, null, null, null, null, null, null, null, null
]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, 0, 1073, 842, 1087, 948, 1091, 1182, 998, 963],
lineStyle:{
type: 'dashed'
}
}
]
};