使用echarts的详细步骤（入门级）

原创于 2021-11-16 23:37:56 发布 · 2.7k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#echarts #数据可视化

echarts 同时被 2 个专栏收录

2 篇文章

订阅专栏

数据可视化

2 篇文章

订阅专栏

本文介绍了如何通过BootCDN获取ECharts的JS文件链接，并将其添加到HTML文档中，以实现ECharts图表的快速引用。示例代码展示了在HTML中直接引入和从外部js文件引用ECharts的方式，帮助开发者便捷地在网页中展示数据图表。

目的：通过在HTML文件里面引用echarts的js文件来使用echarts

echarts官网：传送门

通过这个网站BootCDN 找到echarts对应的链接，速度更快

输入echarts找到镜像链接
找到下面这个链接，可以直接复制<script>标签
加到HTML文档里面即可

效果展示：（用的echarts官网里面的示例）
也可以将代码放入一个js文件中，（例如下面代码里的：style.js）然后在<script>里面通过src引用js文件地址

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <!-- 引用外部js文件定义格式 -->
    <script type="text/javascript" src="static/js/style.js"> </script>
  </body>
</html>