echarts图表共用一个 timeline（A表 timeline 同时控制B表）
先看效果：
再看代码（部分）：
let barOption = {
baseOption: {
height: 350,
timeline: {
x: 'center',//时间轴X轴方向位置设置
y: 'bottom',//时间轴Y轴方向位置设置
width: '80%',//宽度
height: 50,//高度
show:true,
axisType: 'category',
autoPlay: true,
playInterval: 1000,
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
label: {
formatter: function (s) {
return s;
}
}
},
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
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',
name: '太阳总辐射（MJ/m2）',
min: 0,
axisLabel: {
formatter: '{value}'
},
splitArea: {
show: false, // 是否显示分隔区域
},
axisLine: {
show: true, // 是否显示坐标轴轴线
lineStyle: {
color:'#91CC75', // 坐标轴线线的颜色
width: '1', // 坐标轴线线宽
type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
},
},
axisTick: {
show: true, // 是否显示坐标轴刻度
alignWithLabel: true, //设置x轴刻度线与x轴文字对齐的
lineStyle: {
width: 1, // 坐标轴刻度线宽
type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
},
},
splitLine:{
show: false, // 是否显示分隔线。默认数值轴显示，类目轴不显示
interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
lineStyle:{
color: ['#b3b3b4'],
width: 1, // 分隔线线宽
type: 'dashed', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
}
},
},
series: [
{ name: 'Email',
type: 'line',
symbol: 'circle', // 设置标记的图形为circle
symbolSize: 8, //设定实心点的大小
emphasis: {
focus: 'series'
},
},
{ name: 'Union Ads',
type: 'line',
symbol: 'circle', // 设置标记的图形为circle
symbolSize: 8, //设定实心点的大小
emphasis: {
focus: 'series'
},
},
{ name: 'Video Ads',
type: 'line',
symbol: 'circle', // 设置标记的图形为circle
symbolSize: 8, //设定实心点的大小
emphasis: {
focus: 'series'
},
},
{ name: 'Direct',
type: 'line',
symbol: 'circle', // 设置标记的图形为circle
symbolSize: 8, //设定实心点的大小
emphasis: {
focus: 'series'
},
},
{ name: 'Search Engine',
type: 'line',
symbol: 'circle', // 设置标记的图形为circle
symbolSize: 8, //设定实心点的大小
emphasis: {
focus: 'series'
},
},
]
},
options: [
{
title: { text: 'Email' },
series: [
{ data: dataMap.data1['Email'] },
{ data: dataMap.data2['Email'] },
{ data: dataMap.data3['Email'] },
{ data: dataMap.data4['Email'] },
{ data: dataMap.data5['Email'] },
{ data: dataMap.data6['Email'] },
{ data: dataMap.data7['Email'] },
]
},
{
title: { text: 'Union Ads' },
series: [
{ data: dataMap.data1['Union Ads'] },
{ data: dataMap.data2['Union Ads'] },
{ data: dataMap.data3['Union Ads'] },
{ data: dataMap.data4['Union Ads'] },
{ data: dataMap.data5['Union Ads'] },
{ data: dataMap.data6['Union Ads'] },
{ data: dataMap.data7['Union Ads'] },
]
},
{
title: { text: 'Video Ads' },
series: [
{ data: dataMap.data1['Video Ads'] },
{ data: dataMap.data2['Video Ads'] },
{ data: dataMap.data3['Video Ads'] },
{ data: dataMap.data4['Video Ads'] },
{ data: dataMap.data5['Video Ads'] },
{ data: dataMap.data6['Video Ads'] },
{ data: dataMap.data7['Video Ads'] },
]
},
{
title: { text: 'Direct' },
series: [
{ data: dataMap.data1['Direct'] },
{ data: dataMap.data2['Direct'] },
{ data: dataMap.data3['Direct'] },
{ data: dataMap.data4['Direct'] },
{ data: dataMap.data5['Direct'] },
{ data: dataMap.data6['Direct'] },
{ data: dataMap.data7['Direct'] },
]
},
{
title: { text: 'Search Engine' },
series: [
{ data: dataMap.data1['Search Engine'] },
{ data: dataMap.data2['Search Engine'] },
{ data: dataMap.data3['Search Engine'] },
{ data: dataMap.data4['Search Engine'] },
{ data: dataMap.data5['Search Engine'] },
{ data: dataMap.data6['Search Engine'] },
{ data: dataMap.data7['Search Engine'] },
]
}
]
};
//设置echart实例的配置项
barChart.setOption(barOption);
//自适应
window.addEventListener("resize", function () {
barChart.resize();
});
// 初始化折线图
const lineChart = echarts.init(document.getElementById('lineChart'));
barChart.on('timelineChanged', function (params) {
// 获取当前选中的时间点
const i = params.currentIndex;
// 配置折线图的option
const lineOption ={
height: 350,
title: {
text: str[i]
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
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',
name: '太阳总辐射（MJ/m2）',
min: 0,
axisLabel: {
formatter: '{value}'
},
splitArea: {
show: false, // 是否显示分隔区域
},
axisLine: {
show: true, // 是否显示坐标轴轴线
lineStyle: {
color:'#91CC75', // 坐标轴线线的颜色
width: '1', // 坐标轴线线宽
type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
},
},
axisTick: {
show: true, // 是否显示坐标轴刻度
alignWithLabel: true, //设置x轴刻度线与x轴文字对齐的
lineStyle: {
width: 1, // 坐标轴刻度线宽
type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
},
},
splitLine:{
show: false, // 是否显示分隔线。默认数值轴显示，类目轴不显示
interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
lineStyle:{
color: ['#b3b3b4'],
width: 1, // 分隔线线宽
type: 'dashed', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
}
},
},
series: [
{ name: 'Email',
type: 'line',
symbol: 'circle', // 设置标记的图形为circle
symbolSize: 8, //设定实心点的大小
emphasis: {
focus: 'series'
},
data:map[i]['Email']
},
{ name: 'Union Ads',
type: 'line',
symbol: 'circle', // 设置标记的图形为circle
symbolSize: 8, //设定实心点的大小
emphasis: {
focus: 'series'
},
data:map[i]['Union Ads']
},
{ name: 'Video Ads',
type: 'line',
symbol: 'circle', // 设置标记的图形为circle
symbolSize: 8, //设定实心点的大小
emphasis: {
focus: 'series'
},
data:map[i]['Video Ads']
},
{ name: 'Direct',
type: 'line',
symbol: 'circle', // 设置标记的图形为circle
symbolSize: 8, //设定实心点的大小
emphasis: {
focus: 'series'
},
data:map[i]['Direct']
},
{ name: 'Search Engine',
type: 'line',
symbol: 'circle', // 设置标记的图形为circle
symbolSize: 8, //设定实心点的大小
emphasis: {
focus: 'series'
},
data:map[i]['Search Engine']
},
]
};
lineChart.setOption(lineOption);
window.addEventListener("resize", function () {
lineChart.resize();
});
});