先上效果图：
如图，通过点击右侧div中的柱体，修改左侧多组折线图中的第一条数据。柱体和多组折线图表都是echart官网标准图例未做修改，各位可以根据自己的需求去做样式这里就不多说了，下面我们说正题。
要实现不同div中的echart图表联动，可以使用echarts提供的setOption方法，通过在某个图表上选中某个数据项时，更新另一个图表的数据。
具体代码如下：
html部分：
这部分主要是用来展示图表，可以随便改。
<div style="display: flex">
<div id="lineChart" style="height: 500px;width: 1000px"></div>
<div id="barChart" style="height: 500px;width: 1000px;"></div>
</div>
js部分：
// 初始化柱图
const barChart = echarts.init(document.getElementById('barChart'));
// 配置柱图的option
let barOption = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [1120, 2100, 300, 1180, 710, 600, 1130],
type: 'bar'
}
]
};
//设置echart实例的配置项
barChart.setOption(barOption);
//自适应
window.addEventListener("resize", function () {
barChart.resize();
});
// 初始化折线图
const lineChart = echarts.init(document.getElementById('lineChart'));
// 配置折线图的option
//这部分配置看不清的可以翻翻我之前的echart配置博客
const lineOption = {
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'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 290, 130, 120]
}
]
};
lineChart.setOption(lineOption);
window.addEventListener("resize", function () {
lineChart.resize();
});
// 监听柱图的点击事件，更新折线图的数据
barChart.on('click', function(params) {
// 根据点击的柱子的数据项，计算出对应的新数据
lineOption.series[0].data[0] = params.data;
//给折线图设置新的option设置
lineChart.setOption(lineOption);
});
数据随便写的，可以根据业务做接口获取或修改。注意要引入echarts依赖！
