数据可视化(Echart)以及监听尺寸变化

最新推荐文章于 2024-08-07 22:25:18 发布

Mrs.Yang249

最新推荐文章于 2024-08-07 22:25:18 发布

阅读量699

点赞数

文章标签：大数据 echarts

本文链接：https://blog.csdn.net/weixin_68500850/article/details/125770689

版权

本文介绍了如何使用Echarts进行数据可视化，包括从官方获取Echarts的方式，如源码下载、npm安装，以及如何在线定制所需模块。此外，还详细讲解了如何在项目中初始化Echarts并监听窗口尺寸变化，以实现图表的响应式布局，确保在不同设备上都能良好展示。

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

1.官网:https://echarts.apache.org/zh/index.html

2.下载方式:

1.通过下载源码的方式 https://github.com/apache/echarts/tree/5.3.3/dist

2.通过npm 进行下载 npm install echarts(先npm init -y) ------常用

3.选择需要的模块,在线定制下载

3.初始echarts


<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" />
    <!-- 第一步引入相关的基础库 -->
    <script src="你下载的echarts.js地址(eg:./node_modules/echarts/dist/echarts.js)"></script>
    <title>初识数据可视化</title>
    <style>
      #box {
        width: 600px;
        height: 500px;
      }
</style>

</head>
<body>
  <!-- 第二步 设置容器 用来承载可视化视图 -->
    <div id="box"></div>
    <!-- 第三步 逻辑代码 -->
<script>
/