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

最新推荐文章于 2024-04-03 16:23:48 发布

Timer95

最新推荐文章于 2024-04-03 16:23:48 发布

阅读量2.4k

点赞数 1

分类专栏： echarts 数据可视化文章标签： echarts 数据可视化

本文链接：https://blog.csdn.net/Rover95/article/details/121367877

版权

echarts 同时被 2 个专栏收录

2 篇文章 2 订阅

订阅专栏

数据可视化

2 篇文章 0 订阅

订阅专栏

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

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

目的：通过在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>

Timer95

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用echarts的详细步骤（入门级）

通过这个网站BootCDN 找到echarts对应的链接，速度更快输入echarts找到镜像链接找到下面这个链接，可以直接复制<script>标签加到HTML文档里面即可效果展示：也可以将代码放入一个js文件中，（例如下面代码里的：style.js）然后在<script>里面通过src引用js文件地址<!DOCTYPE html><html> <head> <meta charset="utf
复制链接

扫一扫

专栏目录