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

2024-02-18 23:30
文章标签 快速 图表 火山 echarts

本文主要是介绍带你快速上手火山ECharts图表库,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

大数据时代,数据可是化基本是标配,若是你的程序没有一些让人耳目一新的数据图表,可就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才能正常运行喔:

 

源码下载:火山图表案例下载

这篇关于带你快速上手火山ECharts图表库的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/722789

相关文章

乐鑫 Matter 技术体验日|快速落地 Matter 产品,引领智能家居生态新发展

随着 Matter 协议的推广和普及,智能家居行业正迎来新的发展机遇,众多厂商纷纷投身于 Matter 产品的研发与验证。然而,开发者普遍面临技术门槛高、认证流程繁琐、生产管理复杂等诸多挑战。  乐鑫信息科技 (688018.SH) 凭借深厚的研发实力与行业洞察力,推出了全面的 Matter 解决方案,包含基于乐鑫 SoC 的 Matter 硬件平台、基于开源 ESP-Matter SDK 的一

亮相WOT全球技术创新大会,揭秘火山引擎边缘容器技术在泛CDN场景的应用与实践

2024年6月21日-22日,51CTO“WOT全球技术创新大会2024”在北京举办。火山引擎边缘计算架构师李志明受邀参与,以“边缘容器技术在泛CDN场景的应用和实践”为主题,与多位行业资深专家,共同探讨泛CDN行业技术架构以及云原生与边缘计算的发展和展望。 火山引擎边缘计算架构师李志明表示:为更好地解决传统泛CDN类业务运行中的问题,火山引擎边缘容器团队参考行业做法,结合实践经验,打造火山

echarts省份标注加散点效果

这个是安徽的效果图,鼠标移到红色标注或者对应的市区位置都会显示对应的数值。 先直接上代码: import anhuiMapJson from './anhui.json'getCoords: function(city) {var res = [];if (city != null) {for (var c in this.cityMap.features) {if (this.cityMa

LVGL快速入门笔记

目录 一、基础知识 1. 基础对象(lv_obj) 2. 基础对象的大小(size) 3. 基础对象的位置(position) 3.1 直接设置方式 3.2 参照父对象对齐 3.3 获取位置 4. 基础对象的盒子模型(border-box) 5. 基础对象的样式(styles) 5.1 样式的状态和部分 5.1.1 对象可以处于以下状态States的组合: 5.1.2 对象

如何利用echarts编写立体的柱状图表

1、引入 import * as echarts from 'echarts' 2、创建图标容器 3、调用渲染 <template><div ref="eachrtsBox" style="width: 200px;height: 200px;"></div></template><script>import * as echarts from 'echarts'export d

【Spring】Spring Boot 快速入门

📚博客主页:爱敲代码的小杨. ✨专栏:《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 |《MySQL探索之旅》 |《Web世界探险家》 ❤️感谢大家点赞👍🏻收藏⭐评论✍🏻,您的三连就是我持续更新的动力❤️ 🙏小杨水平有限,欢迎各位大佬指点,相互学习进步! 小杨近些在学习人工智能方面的知识,发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一

Sublime Text 快速折叠CSS代码到一行

快速折叠CSS代码到一行 1.使用HTML/CSS/JS Prettify或者CSScomb美化代码 2.使用Alt+F3特征选取,删除下图中所有的特征空格 3.使用Ctrl+Shift+M选取括号里的内容,再使用一次Ctrl+Shift+M将大括号也一起选中。 4.使用Ctr+J折叠代码 5.Home键 6.Backspace键

一篇文章带你快速入门java

文章目录 一、一个简单的java代码1.1 Java程序的结构由三个不成组成:1.2 运行java程序1.3 JDK,JRE,JVM之间的关系?(面试题)1.4 标识符1.5 注释1.6 关键字 一、一个简单的java代码 public class HelloJava {public static void main(String[] args) {System.out.

汇编快速入门

一.基础知识 1.数据类型 DB(Define Byte,字节类型    占位8位bit == 1字节) 范围:DB可以用来定义(无符号、有符号)整数(包含二、十、十六进制)和字符 语法:a DB  数据个数  数据值 用法:a DB  -1 , 1 , 1000H , 'A' , "ABC" , ?(?是不知道的数值,一般机器自动使用0填充) DW(Define Word,字类型

(转)Sublime Text 2 (Emmet):HTML/CSS代码快速编写神器

Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示:   Zen coding下的编码演示   去年年底,该插件已经改名为Emmet。但Emmet不只改名,还带来了一些新特性。本文就来直观地演示给你。 一、快速编写HTML代码 1.