分别设置每个ECharts对象为相同的group值,并通过在调用ECharts对象的connect方法时,传入group值,从而使用多个ECharts对象建立联动关系
添加水印
完整代码
<!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: 400px"></div>
<div id="main2" style="width: 700px; height: 400px"></div>
<script type="text/javascript">
//指定图表的配置项和数据
//基于准备好的dom,初始化ECharts图表
var myChart1 = echarts.init(document.getElementById("main1"));
var waterMarkText = '111';
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.08;
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: ['blue', 'yellow', 'black','red','green'],
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: [55.00, 23.5, 99.00, 82.50, 43.40],
name: '寻梦环游记',
areaStyle:{
normal:{
color:'green'
}
}
}],
}]
};
//基于准备好的dom,初始化ECharts图表
var myChart2 = echarts.init(document.getElementById("main2"));
var waterMarkText = '222';
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.08;
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: ['blue', 'yellow', 'black','red','green'],
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: [43.30, 21.20, 92.90, 79.25, 39.10],
name: '正义联盟',
areaStyle:{
normal:{
color:'red'
}
}
}],
}]
};
myChart1.setOption(option1); //为mychart1对象加载数据
myChart2.setOption(option2); //为mychart2对象加载数据
//多图表联动配置方法1:分别设置每个ECharts对象的group值
myChart1.group = 'group1';
myChart2.group = 'group1';
echarts.connect('group1');
</script>
</body>
</html>
效果展示