web数据可视化(Echarts版)5-3柱状图联动图表(代码仅供参考)

最新推荐文章于 2023-09-15 10:26:13 发布

白日梦想家☜

最新推荐文章于 2023-09-15 10:26:13 发布

阅读量282

点赞数

分类专栏： HTML 文章标签： echarts 前端信息可视化

本文链接：https://blog.csdn.net/m0_63471474/article/details/130808594

版权

HTML 专栏收录该内容

40 篇文章 9 订阅

订阅专栏

echarts.js文件下载地址:Apache 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 option1 = {   //指定第1个图表的配置项和数据
        color: ['LimeGreen',' DarkGreen', 'red', 'blue', 'Purple'],
        backgroundColor: 'rgba(128,128,128,0.1)',  //rgba设置透明度为0.1
        title: { text: '某学院2019年专业招生情况汇总表', left: 40, top: 5 },
        tooltip: { toolip: { show: true }, },
        legend: { data: ['2019年招生'], left: 422, top: 8 },
        xAxis: [{ data: ["大数据", "云计算", "Oracle", "ERP", "人工智能","软件开发", "移动开发", "网络技术"], axisLabel: { interval: 0}
    }],
        yAxis: [{ type: 'value', }],
        series: [{     //配置第1个图表的数据系列
            name: '2019年招生',
            type: 'bar', barWidth: 40,  //设置柱状图中每个柱子的宽度
            data: [125, 62, 45, 56, 123, 205, 108, 128],
        }]
    };
    //基于准备好的dom，初始化ECharts图表
    var myChart2 = echarts.init(document.getElementById("main2"));
    var option2 = {   //指定第2个图表的配置项和数据
        color: ['blue',' LimeGreen', 'Darkgreen', 'red', 'Purple'],
        backgroundColor: 'rgba(128,128,128,0.1)',  //rgba设置透明度为0.1
        title: { text: '某学院2020年专业招生情况汇总表', left: 40, top: 8 },
        tooltip: { toolip: { show: true }, },
        legend: { data: ['2020年招生'], left: 422, top: 8 },
        xAxis: [{ data: ["大数据", "云计算", "Oracle", "ERP", "人工智能","软件开发", "移动开发", "网络技术"], axisLabel: { interval: 0}
    }],
        yAxis: [{ type: 'value', }],
        series: [{    //配置第2个图表的数据系列
            name: '2020年招生',
            type: 'bar', barWidth: 40,  //设置柱状图中每个柱子的宽度
            data: [325, 98, 53, 48, 222, 256, 123, 111],
        }]
    };
    myChart1.setOption(option1);   //为mychart1对象加载数据
    myChart2.setOption(option2);   //为mychart2对象加载数据
    //多图表联动配置方法1：分别设置每个ECharts对象的group值
    myChart1.group = 'group1';
    myChart2.group = 'group1';
    echarts.connect('group1');
</script>
</body>
</html>