ECharts 的多表联动是指多个图表实例能够共享同一套数据,并且在一个图表实例上的操作会影响其他图表实例。这通常通过监听 ECharts 提供的事件系统来实现。
以下是一个简单的例子,演示如何实现两个图表的基本联动:
// 假设已经在页面上初始化了两个ECharts实例:chart1 和 chart2
// 图表1的配置
var option1 = {
// ... 其他配置 ...
series: [
{
// 示例系列类型为柱状图
type: 'bar',
data: [10, 20, 30, 40]
}
]
};
// 图表2的配置
var option2 = {
// ... 其他配置 ...
series: [
{
// 示例系列类型为线形图
type: 'line',
data: [10, 20, 30, 40]
}
]
};
// 应用配置
chart1.setOption(option1);
chart2.setOption(option2);
// 监听图表1的点击事件来更新图表2
chart1.on('click', function (params) {
// 假设我们在点击柱状图的某个柱子时更新线形图的数据
var data = option2.series[0].data;
data[params.dataIndex] = params.value;
// 更新图表2的数据
chart2.setOption({
series: [{
data: data
}]
});
});
在这个例子中,我们有两个 ECharts 实例chart1和 chart2。图表1是一个柱状图,图表2是一个线形图。我们监听图表1的点击事件,然后更新图表2中对应索引的数据点。这样,当用户点击图表1中的某个柱子时,图表2的相应数据点会随之变化,实现了两个图表的联动。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小(宽高)的DOM--->
<div id="main1" style="width: 700px; height: 350px"></div>
<div id="main2" style="width: 700px; height: 350px"></div>
<script type="text/javascript">
//指定图表的配置项和数据
//基于准备好的dom,初始化ECharts图表
var myChart1 = echarts.init(document.getElementById("main1"));
var waterMarkText = 'xxx';
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.10;
ctx.font = '20px Microsoft Yahei';
ctx.translate(50,50);
ctx.rotate(-Math.PI / 4);
ctx.fillText(waterMarkText, 0, 0);
var option1 = {
backgroundColor:{type:'pattern',image:canvas,repeat:'repeat'},
color: ['#45C2E0', '#C12BDD', '#FF7851','yellow','#FF9325'],
title: { text: '火影人物受欢迎程度', },
tooltip: { toolip: { show: true }, },
radar: {
// shape: 'circle',
indicator: [
{ name: '卡卡西', max: 100 },
{ name: '漩涡鸣人', max: 100 },
{ name: '佐助', max: 100 },
{ name: '春野樱', max: 100 },
{ name: '雏田', max: 100 },
]
},
series: [{ //配置第1个图表的数据系列
type: 'radar', //设置柱状图中每个柱子的宽度
data: [{
value: [88.0, 94.5, 90.00, 70.50, 67.40],
name: '天天',
areaStyle:{
normal:{
color:'pink'
}
}
}],
}]
};
//基于准备好的dom,初始化ECharts图表
var myChart2 = echarts.init(document.getElementById("main2"));
var waterMarkText = 'vvv';
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.10;
ctx.font = '20px Microsoft Yahei';
ctx.translate(50,50);
ctx.rotate(-Math.PI / 4);
ctx.fillText(waterMarkText, 0, 0);
var option2 = {
backgroundColor:{type:'pattern',image:canvas,repeat:'repeat'},
color: ['#45C2E0', '#C1EBDD', '#FF9393','black','#FF9393'],
title: { text: '鬼灭之刃受欢迎程度', },
tooltip: { toolip: { show: true }, },
radar: {
// shape: 'circle',
indicator: [
{ name: '蝴蝶刃', max: 100 },
{ name: '灶门炭治郎', max: 100 },
{ name: '祢豆子', max: 100 },
{ name: '富冈义勇', max: 100 },
{ name: '鬼舞', max: 100 },
]
},
series: [{ //配置第1个图表的数据系列
type: 'radar', //设置柱状图中每个柱子的宽度
data: [{
value: [83.30, 77.50, 80.90, 81.25, 90.00],
name: '鬼舞',
areaStyle:{
normal:{
color:'green'
}
}
}],
}]
};
myChart1.setOption(option1); //为mychart1对象加载数据
myChart2.setOption(option2); //为mychart2对象加载数据
//多图表联动配置方法1:分别设置每个ECharts对象的group值
myChart1.group = 'group1';
myChart2.group = 'group1';
echarts.connect('group1');
</script>
</body>
</html>
效果
水印