入门案例+架构图带你快速上手ECHarts

最新推荐文章于 2024-06-14 13:03:54 发布

Mantana

最新推荐文章于 2024-06-14 13:03:54 发布

阅读量469

点赞数

分类专栏：开发问题文章标签：数据可视化 echarts

本文链接：https://blog.csdn.net/Mantana/article/details/115069690

版权

最近对数据可视化很感兴趣，顺便玩了玩ECharts（一个基于 JavaScript 的开源可视化图表库），写点东西记录一下。
ECharts官网：https://echarts.apache.org/zh/index.html
一个简单的案例，创建柱状图：
ECharts的绘图流程可以分成6步：

引入js库
编写渲染容器DOM（一定要为容器添加width和height属性）
获取渲染DOM对象
初始化ECharts对象
编写option参数
调用setOption完成渲染

具体实施步骤如下：

创建一个简单的html文件，script中引入js文件。这里采用通过jsDelivr CDN 引入。ECharts的获取还可以通过：

从 Apache ECharts 官网下载界面获取官方源码包后构建。
在 ECharts 的 GitHub 获取。
通过 npm 获取 echarts，npm install echarts --save

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
  </head>
  <body>
  </body>
</html>

编写渲染容器DOM，并为其配上width和height属性

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
  </head>
  <body>
  	<div id="main" style="width: 600px;height:400px;"></div>
  </body>
</html>

通过JavaScript获取渲染DOM对象

最低0.47元/天解锁文章

Mantana

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
入门案例+架构图带你快速上手ECHarts

最近对数据可视化很感兴趣，顺便玩了玩ECharts（一个基于 JavaScript 的开源可视化图表库），写点东西记录一下。ECharts官网：https://echarts.apache.org/zh/index.html一个简单的案例，创建柱状图：ECharts的绘图流程可以分成6步：引入js库编写渲染容器DOM（一定要为容器添加width和height属性）获取渲染DOM对象初始化ECharts对象编写option参数调用setOption完成渲染具体实施步骤如下：创建一个
复制链接

扫一扫