多表联动和水印案例

最新推荐文章于 2024-07-25 09:24:40 发布

劳大别肘

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量275

点赞数 7

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/2301_77838071/article/details/137767852

版权

本文介绍了如何使用ECharts库在HTML页面中创建一个包含饼状图和柱状图的多表联动示例，展示了数据可视化中的交互效果。

摘要由CSDN通过智能技术生成

多表联动就是俩表放一起

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>主播姐欺人太甚</title>
    <style>
        /* 配置样式让两个图表显示在一行 */
        div{float: left}
    </style>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div>
        <!-- 饼状图Dom -->
        <div id="main1" style="width: 500px;height:500px;"></div>
        <!-- 柱状图Dom -->
        <div id="main2" style="width: 500px;height:500px;"></div>
    </div>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.js"></script>
    <script type="text/javascript">
        // 指定饼状图图表的配置项和数据
const waterMarkText = '24';
const canvas = document.createElement('canvas');
const 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'
  },
  tooltip: {},
            title : {
                text: '最常用攻击植物',  // 标题内容
                subtext: '数据源于我虚构',
                x:'center'                 // 居中显示
            },
            // 鼠标触发提示
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"  // 展示格式
            },
            // 图例
            legend: {
                orient : 'vertical',    // 垂直显示
                x : 'left',             // 显示位置--左上
                data:['西瓜投手','机枪豌豆','玉米加农炮','仙人掌','玉米投手']
            },
            calculable : true,
            series : [
                {
                    name:'使用占比',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', 225],
                    data:[
                        {value:335, name:'西瓜投手'},
                        {value:310, name:'机枪豌豆'},
                        {value:234, name:'玉米加农炮'},
                        {value:135, name:'仙人掌'},
                        {value:800, name:'玉米投手'}
                    ]
                }
            ]
        };

        // 指定柱状图图表的配置项和数据
        var option2 = {
          backgroundColor: {
     type: 'pattern',
     image: canvas,
      repeat: 'repeat'},
            tooltip : {
                trigger: 'axis',//触发器
                axisPointer : { // 指示器类型，shadow为阴影指示器
                    type: 'shadow'
                }
            },
            legend: {
                data:['西瓜投手','机枪豌豆','玉米加农炮','仙人掌','玉米投手']
            },
            // 工具栏组件
            toolbox: {
                show : true,
                orient : 'vertical',
                top : 'center',
                feature : {
                    mark : {show: true},
                    // 启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
                    magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore : {show: true},     // 是否支持配置项还原
                    saveAsImage : {show: true}  // 保存图片
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : ['肘关节','袁烦','徐治病','逆批','小V','我','赵志若']//只能想起这些人
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    splitArea : {show : true}
                }
            ],
            grid: {
                x2:40
            },
            series : [
                {
                    name:'西瓜投手',
                    type:'bar',
                    stack: '总量',
                    data:[320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name:'玉米加农炮',
                    type:'bar',
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name:'机枪豌豆',
                    type:'bar',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name:'仙人掌',
                    type:'bar',
                    stack: '总量',
                    data:[150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name:'玉米投手',
                    type:'bar',
                    stack: '总量',
                    data:[820, 932, 901, 934, 1290, 133, 1320]
                }
            ]
        };
        // 对饼状图dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('main1'));
        myChart1.setOption(option1);    // 按option1展示myChart1图表

        // 对柱状图dom，初始化echarts实例
        var myChart2 = echarts.init(document.getElementById('main2'));
        myChart2.setOption(option2);

        // 将myChart1和myChart2关联起来
        echarts.connect([myChart1, myChart2])

        // 配置自动适应Windows窗口大小
        setTimeout(function (){
            window.onresize = function () {
                myChart.resize();
                myChart2.resize();
            }
        },200)

    </script>
</body>
</html>

运行截图