带你快速上手火山ECharts图表库

1185907650 · 发表于 2021-8-8 09:07:05

大数据时代,数据可是化基本是标配,若是你的程序没有一些让人耳目一新的数据图表,可就out了喔.

今天给大家分享下火山自带的ECharts图表组件(注意找不到此组件的小伙伴注意,请更新到20210803日的火山PC喔)

ECharts图表组件的实质:

实际上就是一个MB浏览器加载JS脚本实现的ECharts.js图表的显示!

miniblink 是一款基于chromium内核开源的浏览器框架，进行了大量的裁剪，体积非常小且封装的很简练，只需要一个node.dll和wke.h就可以使用

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。(echarts是**出品的开源库)

**官方文档,上面有大量的使用案例可供参考,非常不错喔 https://echarts.apache.org/examples/zh/index.html

下面我们先用html加上JS实现原生的网页版js的加载演示,这样让你,知其然,也知其所以然!

从官网下载echarts.min.js或直接用火山官方库自带的echarts.min.js,代码如下:

使用流程非常简单的:

1新建html文件

2引入echarts.min.js库文件

3新建DIV容器来盛放JS生成的图表

4设置图表的各种参数

5显示图表

怎么样代码是不是非常简单,看下运行结果:

好的,小伙伴知道原理之后,我们就用火山封装好的ECharts图表库实现上面一样的柱状图:

第一步,引用库,不然你在界面设计区域找不到echarts组件的

第二步选择用到的图表,我们用的是柱状图举例

3.编写代码实现上述原生网页图表:

看下最终运行的动画,是不是特别简单,加油,小伙伴们

注意事项,生成的exe文件需要node.dll才能正常运行喔:

源码下载：

游客，如果您要查看本帖隐藏内容请回复

tyler998 · 发表于 2026-9-19 18:20:09

感谢分享这个库

ac9861213 · 发表于 2026-9-14 10:47:05

支持多线程调用吗

zj4f · 发表于 2026-8-7 01:43:54

yiyuyan77 · 发表于 2026-8-5 21:19:24

学习........................

liu735168732 · 发表于 2026-7-22 21:03:52

6666666666666

lhn0925 · 发表于 2026-4-14 00:12:00

感谢分享这个库

souldoor · 发表于 2024-5-29 16:12:26

非常好，下载看看

yh2393105053 · 发表于 2024-2-21 18:41:39

看看帖子里藏了啥好东西~~~

hanyongbo · 发表于 2024-2-21 16:24:19

学习学习

		自动登录	找回密码
密码			立即注册

[视窗] 带你快速上手火山ECharts图表库