echarts多表联动

最新推荐文章于 2024-04-20 18:42:44 发布

2242

最新推荐文章于 2024-04-20 18:42:44 发布

阅读量407

点赞数 5

文章标签：前端 javascript 开发语言 echarts

本文链接：https://blog.csdn.net/xsp123456789_/article/details/137773583

版权

ECharts提供了多图表联动（connect）的功能，连接的多个图表可以共享组件事件并实现保存图片时的自动拼接。多图表联动支持直角系下tooltip的联动
。
分别设置每个ECharts对象为相同的group值，并通过在调用ECharts对象的connect方法时，传入group值，从而使用多个ECharts对象建立联动关系

 `myChart1.group = 'group1';  //给第1个ECharts对象设置一个group值
  myChart2.group = 'group1';  //给第2个ECharts对象设置一个相同的group值
  myChart3.group = 'group1';  //给第3个ECharts对象设置一个相同的group值
  myChart4.group = 'group1'; //给第4个ECharts对象设置一个相同的group值
  echarts.connect('group1');  //调用ECharts对象的connect方法时，传入group值`

完整代码

<!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: '70后', max: 100 },
            { name: '80后', max: 100 },
            { name: '90后', max: 100 },
            { name: '00后', max: 100 },
            { name: '10后', 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: '70后', max: 100},
            { name: '80后', max: 100},
            { name: '90后', max: 100},
            { name: '00后', max: 100},
            { name: '10后', max: 100},
            ]
        },
        series: [{     //配置第1个图表的数据系列
            type: 'radar',   //设置柱状图中每个柱子的宽度
            data: [{
                value: [83.30, 77.50, 80.90, 81.25, 90.00],
                name: '情况',
                areaStyle:{
                    normal:{
                        color:'blue'
                    }
                }
        }],
        }]
    };
    myChart1.setOption(option1);   //为mychart1对象加载数据
    myChart2.setOption(option2);   //为mychart2对象加载数据
    //多图表联动配置方法1：分别设置每个ECharts对象的group值
    myChart1.group = 'group1';
    myChart2.group = 'group1';
    echarts.connect('group1');
</script>
</body>
</html>

实现效果图

水印

2242

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
echarts多表联动

分别设置每个ECharts对象为相同的group值，并通过在调用ECharts对象的connect方法时，传入group值，从而使用多个ECharts对象建立联动关系。ECharts提供了多图表联动（connect）的功能，连接的多个图表可以共享组件事件并实现保存图片时的自动拼接。多图表联动支持直角系下tooltip的联动。
复制链接

扫一扫