Echarts实现一个html页面同时显示多个图表

2023年1月2日 331次阅读 来源: 懒惰的小妖

最近小编开发前端页面,根据需求做一个统计分析的页面.

需求是:Echarts实现一个html页面同时显示多个图表,布局为左右,右边有分上下的布局.

 如图所示:

《Echarts实现一个html页面同时显示多个图表》

参考文档:https://www.echartsjs.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

 步骤:1.先进行div中布局样式的调整.

         2.在指定的div中进行图表数据的填充.

个人思路:先放一张图在各个布局中看看能不能处来,然后在每个布局中放同样的图是否都展示出来,展示出来后,对三个图中的数据进行替换,就ok!(如果怕一次性整好,图不出来或者出来不全,可以试试这个笨办法)

注意:要保证多个图表的id不一致,每一个div处要有宽和高否则图表出不来.

根据官网的案例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>


<! --在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。 -->

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>


 <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            dataset: {
        source: [
            ['score', 'amount', 'product'],
            [89.3, 58212, 'Matcha Latte'],
            [57.1, 78254, 'Milk Tea'],
            [74.4, 41032, 'Cheese Cocoa'],
            [50.1, 12755, 'Cheese Brownie'],
            [89.7, 20145, 'Matcha Cocoa'],
            [68.1, 79146, 'Tea'],
            [19.6, 91852, 'Orange Juice'],
            [10.6, 101852, 'Lemon Juice'],
            [32.7, 20112, 'Walnut Brownie']
           ]
        },
        grid: {containLabel: true},
        xAxis: {name: 'amount'},
        yAxis: {type: 'category'},
        visualMap: {
            orient: 'horizontal',
            left: 'center',
            min: 10,
            max: 100,
            text: ['High Score', 'Low Score'],
            // Map the score column to color
            dimension: 0,
        inRange: {
            color: ['#D7DA8B', '#E15457']
        }
    },
        series: [
        {
            type: 'bar',
            encode: {
                // Map the "amount" column to X axis.
                x: 'amount',
                // Map the "product" column to Y axis
                y: 'product'
                }
            }
        ]
    };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

简单的进行记录,如果你也遇到跟我一样的问题,记得参考哦!

    原文作者：懒惰的小妖
    原文地址: https://blog.csdn.net/qq_40615403/article/details/90929606
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞