需求：echarts中需要轮播展示不同的线性图，几张图的横纵坐标数据都不一样
方法：通过timeLine设置时间轴进行跳转https://www.makeapie.com/editor.html?c=xsHh439K0 我是在这个基础上得到启发的
如图所示，这是两张图通过timeLine进行切换的，页面样式参考的https://www.makeapie.com/editor.html?c=xS9Oh_JY06
这两张图在切换的同时还要满足图中的数据进行轮播展示（这里用到定时器触发dispatchAction，可以参考我的这篇https://www.jianshu.com/p/2f5f337b01be）
image.png
image.png
整个option如下图
optionMap = {
baseOption: {
backgroundColor: '#080b30',
timeline: { //时间轴
axisType: 'category',
autoPlay: true,
width: '6%',
height: '6%',
left: 'center',
playInterval: 10000, //10s切换一次
data: [
'1', '2'
],
lineStyle: {
show: false
},
symbolSize: 8,
itemStyle: { //默认样式
borderWidth: 0,
color: '#ddd',
},
progress:{ //已经选中的样式
itemStyle:{
color:'#ddd'
}
},
checkpointStyle: { //当前选中样式
color: '#fff',
borderWidth: 0,
symbolSize: 10,
},
emphasis: {
itemStyle: {
color: '#fff',
borderWidth: 0,
}
},
label: {
show: false
},
controlStyle: {
showPlayBtn: false,
showPrevBtn: false,
showNextBtn: false
}
},
title: {
text: '多线图',
align: 'center',
color: '#fff',
fontSize: 20,
top: '5%',
left: 'center',
},
tooltip: {
trigger: 'axis',
show: true,
axisPointer: {
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(0, 255, 233,0)'
}, {
offset: 0.5,
color: 'rgba(255, 255, 255,1)',
}, {
offset: 1,
color: 'rgba(0, 255, 233,0)'
}],
global: false
}
},
},
},
grid: {
top: '15%',
left: '5%',
right: '5%',
bottom: '15%',
// containLabel: true
},
xAxis: [{
type: 'category',
axisLine: {
show: true
},
splitArea: {
// show: true,
color: '#f00',
lineStyle: {
color: '#f00'
},
},
axisLabel: {
color: '#fff'
},
splitLine: {
show: false
},
boundaryGap: false,
}],
yAxis: [{
type: 'value',
min: 0,
// max: 140,
splitNumber: 4,
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.1)'
}
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
margin: 20,
color: '#d1e6eb',
},
axisTick: {
show: false,
},
}],
series: [
{
type: 'line',
smooth: true, //是否平滑
showAllSymbol: true,
// symbol: 'image://./static/images/guang-circle.png',
symbol: 'circle',
symbolSize: 15,
}
]
},
options: [
{
title: {
text: '图1',
textStyle:{
color:'#fff'
}
},
xAxis: [{
data: ['A', 'B', 'C', 'D', 'E', 'F'],
}],
series: [{
lineStyle: {
color: "#00b3f4",
shadowColor: 'rgba(0, 0, 0, .3)',
shadowBlur: 0,
shadowOffsetY: 5,
shadowOffsetX: 5,
},
label: {
show: true,
position: 'top',
color: '#00b3f4',
},
itemStyle: {
color: "#00b3f4",
borderColor: "#fff",
borderWidth: 3,
shadowColor: 'rgba(0, 0, 0, .3)',
shadowBlur: 0,
shadowOffsetY: 2,
shadowOffsetX: 2,
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,179,244,0.3)'
},
{
offset: 1,
color: 'rgba(0,179,244,0)'
}
], false),
shadowColor: 'rgba(0,179,244, 0.9)',
shadowBlur: 20
},
data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02,]
}],
}, {
title: {
text: '图2',
textStyle:{
color:'#fff'
}
},
xAxis: [{
data: ['a', 'b', 'c', 'd', 'e', 'f']
}
],
series: [{
lineStyle: {
color: "#00ca95",
shadowColor: 'rgba(0, 0, 0, .3)',
shadowBlur: 0,
shadowOffsetY: 5,
shadowOffsetX: 5,
},
label: {
show: true,
position: 'top',
color: '#00ca95',
},
itemStyle: {
color: "#00ca95",
borderColor: "#fff",
borderWidth: 3,
shadowColor: 'rgba(0, 0, 0, .3)',
shadowBlur: 0,
shadowOffsetY: 2,
shadowOffsetX: 2,
},
tooltip: {
show: true
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,202,149,0.3)'
},
{
offset: 1,
color: 'rgba(0,202,149,0)'
}
], false),
shadowColor: 'rgba(0,202,149, 0.9)',
shadowBlur: 20
},
data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14,],
},]
}],
}
网友评论