Echarts之多表联动

最新推荐文章于 2024-05-22 10:05:28 发布

小智张

最新推荐文章于 2024-05-22 10:05:28 发布

阅读量103

点赞数 2

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/2301_77751917/article/details/137604802

版权

<!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>
    <div id="main1" style="width: 600px; height: 400px;"></div>
    <div id="main2" style="width: 600px; height: 400px;"></div>
    <!-- 第一个水印 -->
  <div class="watermark1">水印 1</div>
  <!-- 第二个水印 -->
  <div class="watermark2">水印 2</div>
    <script type="text/javascript">
        var myChart1=echarts.init(document.getElementById("main1"));
        var waterMarkText = '小智张'; // 设置水印的字符
		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 = '30px Microsoft Yahei'; // 设置水印文字的字体
		ctx.translate(50, 50); // 设置水印文字的偏转值
		ctx.rotate(-Math.PI / 4); // 设置水印旋转的角度
		ctx.fillText(waterMarkText, 0, 0); // 设置填充水印
        var option1={
            title: {
                text: '北斗七行受欢迎度',
                subtext: '来源：百度',
            },
            tooltip: {
                trigger: 'axis',
            },
            legend:{
                data:['欢迎度'],
                left:422,
                color:'red',
                top:8
            },
            xAxis: {
               type: 'category',
               data: ['璐姐', '岚姐', '蕾姐','巴巴','小胡','王哥','小妹']
            },
            yAxis: {
               type: 'value'
            },
            series: [{
                name: '欢迎度',
                type: 'bar',
                label: { // 柱状图上的文字设置
                show: true, // 是否显示
                rotate: 60, // 旋转角度
                position: 'top' // 显示位置
                        },
                barWidth: '30%', // 柱的宽度
                data:[75,84,90,98,77,80,70] 
        }]
    };
    var myChart2=echarts.init(document.getElementById("main2"))
    var option2={
            title: {
                text: '北斗七行受欢迎度',
                subtext: '来源：百度',
            },
            tooltip: {
                trigger: 'axis',
            },
            legend:{
                data:['欢迎度'],
                left:422,
                color:'red',
                top:8
            },
            xAxis: {
               type: 'category',
               data: ['璐姐', '岚姐', '蕾姐','巴巴','小胡','王哥','小妹']
            },
            yAxis: {
               type: 'value'
            },
            series: [{
                name: '欢迎度',
                type: 'line',
                label: { // 柱状图上的文字设置
                show: true, // 是否显示
                rotate: 60, // 旋转角度
                position: 'top' // 显示位置
                        },
                barWidth: '30%', // 柱的宽度
                data:[75,84,90,98,77,80,70] 
        }]
    };
    myChart1.setOption(option1);// 为myChart1对象加载数据
    myChart2.setOption(option2);// 为myChart2对象加载数据
    // 多图表联动配置方法1：分别设置每个echarts对象的group值
    myChart1.group='group1';
    myChart2.group='group1';
    echarts.connect('group1');
    // 多图表联动配置方法2：直接传入需要联动的echarts对象myChart1，myChart2
	echarts.connect([myChart1,myChart2]);
    </script>
</body>
</html>