多个echarts引用

最新推荐文章于 2023-03-28 00:02:41 发布

置顶

猫化

最新推荐文章于 2023-03-28 00:02:41 发布

阅读量885

点赞数 1

分类专栏：前端编写(推荐) 文章标签：数据可视化

I from China

本文链接：https://blog.csdn.net/weixin_43701595/article/details/115787903

版权

本文介绍了如何在页面中引用多个Echarts图表，关键在于指定不同的容器ID。内容包括效果图展示，Echarts引用的重点，以及提供了一个在线运行的HTML传送门。源码全部在一个.html文件中，包括了Echarts的基本库和3D地图所需的echarts-gl.js及相关数据文件。建议在进行二次开发时，注明转载来源。

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

多个echarts引用

1.效果图

在这里插入图片描述

2.说明

2.1 Echarts引用关键在于容器的创建

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>***</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <!-- 引入主题 -->
    <script src="https://www.runoob.com/static/js/wonderland.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 			*****************
 			*****************
     
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);      
        </script>
</body>
</html>

2.2 Echarts多个图表的引用关键在于getElementById(‘main’)的命名
div标签中id="main"定义的是它的id
例如<div id="main1.2" class="box"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main1.2'));
参考代码：

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height:600PX;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
	********************
	********************

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

    <div id="main1.1" class="box"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main1.1'));
        ****************
        ****************
        
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

     <div id="main1.2" class="box"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main1.2'));
        *****************
        *****************
        
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

3.html在线运行传送门

4.源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--引用bootstrap4-->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>2021年-诺乐智能科技-售后月结</title>
    <style>
        .box{
    
            width: 100%;
            height:560PX;
        }
        .boxl{
    
            width: 600px;
            height: 400px;
            float: left;
        }
        .boxmax{
    
            width: 100%;
            height: 800px;
            background-color:skyblue;
        }
        body{
     min-height: 100%; background: linear-gradient(#FFFAD0,#ffffff); }
        /* .boxlift{
            width: 600px;
            height: 300px;
            float: left;
        }
        .boxcenter{
            width: 600px;
            height: 300px;
            float: center;
        }
        .boxright{
            width: 600px;
            height: 300px;
            float: right;
        } */
    </style>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js

最低0.47元/天解锁文章

猫化

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
多个echarts引用

1.效果图2.说明2.1 Echarts引用关键在于容器的创建<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>***</title>  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.m
复制链接

扫一扫

专栏目录