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

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


https://www.lkuaiy.com/image/editor/1628317265950364.JPG大数据时代,数据可是化基本是标配,若是你的程序没有一些让人耳目一新的数据图表,可就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.htmlhttps://www.lkuaiy.com/image/editor/1628317296571268.JPG
下面我们先用html加上JS实现原生的网页版js的加载演示,这样让你,知其然,也知其所以然!从官网下载echarts.min.js或直接用火山官方库自带的echarts.min.js,代码如下:使用流程非常简单的:1新建html文件2引入echarts.min.js库文件3新建DIV容器来盛放JS生成的图表4设置图表的各种参数5显示图表https://www.lkuaiy.com/image/editor/1628317317725170.JPG怎么样代码是不是非常简单,看下运行结果:https://www.lkuaiy.com/image/editor/1628317328806930.JPG好的,小伙伴知道原理之后,我们就用火山封装好的ECharts图表库实现上面一样的柱状图: 第一步,引用库,不然你在界面设计区域找不到echarts组件的https://www.lkuaiy.com/image/editor/1628317338970427.JPG 第二步选择用到的图表,我们用的是柱状图举例https://www.lkuaiy.com/image/editor/1628317348882908.JPG3.编写代码实现上述原生网页图表:https://www.lkuaiy.com/image/editor/1628317356282425.JPG 看下最终运行的动画,是不是特别简单,加油,小伙伴们https://www.lkuaiy.com/image/editor/1628317369021244.gif 注意事项,生成的exe文件需要node.dll才能正常运行喔: https://www.lkuaiy.com/image/editor/1628317373412712.JPG

源码下载：**** Hidden Message *****

xo37 发表于 2021-8-8 19:34:44

感谢分享这个库

网络注册会员 发表于 2021-8-8 19:57:45

感谢分享这个库

1185907650 发表于 2021-8-9 10:30:16

日常一顶

xshn 发表于 2021-8-11 13:44:13

学习一下

1185907650 发表于 2021-8-17 14:35:30

日常一顶

飞翔网络工作室 发表于 2021-8-17 15:28:25

顶一目~

芒g一号 发表于 2021-8-17 20:05:41

感谢分享这个库

xo37 发表于 2021-8-21 14:20:43

本帖最后由 xo37 于 2021-8-21 14:55 编辑

这个库，新版火山PC里有

lovely 发表于 2021-8-21 15:02:39


感谢分享这个库
页: [1] 2 3 4 5
查看完整版本: 带你快速上手火山ECharts图表库