4 Star 12 Fork 4

lsy9202 / E-echarts

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
Clone or Download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

E-echarts {#top}

易语言模块(开源)


目录


特别说明{#shuoming}

由于示例更新频繁并且示例的基础文件包稍大,所以不再上传源码,示例大全源码及基础文件包将保存在群文件中,需要的可以加群下载(群号:93902676),有问题也欢迎及时群内留言反馈。

模块简介: {#jianjie}

本模块封装百度echarts.js(开源),相对于chart.js好处具有更全面api文档支持,更多的图形样式及配置支持,例如:散点图、折线图、柱状图、饼图、地图、雷达图、K线图、箱线图、热力图、关系图、矩形树图、平行坐标、桑基图、漏斗图、仪表盘等等。

官方图形样例展示:http://echarts.baidu.com/examples.html
官方API文档:http://echarts.baidu.com/option.html

官方示例 官方示例

网友示例 网友示例 #####回到顶部


模块运行效果: {#demo}

动态效果展示(gif动图稍慢) 动态数据图形 K线图

#####回到顶部


模块特点: {#tedian}

下边除了第一行,后边的都是echarts.js的特点,本模块仅是最大限度还原保留了它的特点。

  • 使用本模块前请花3分钟学习一下json文件格式基础
  • 简单三行代码即可快速生成图表
  • echarts.js源码已更新至最新版,且内置到模块中,所以支持离线使用
  • 支持WKE浏览框控件或超文本浏览框控件(建议使用wke,可使用更好的性能和兼容性,并支持运行js代码)
  • 支持使用js动态加载数据(实时动态加载显示,无需刷新整个页面,比如CPU使用率曲线功能)
  • 支持单页面显示多个图表互不干扰,分别js动态加载数据
  • 模块支持引入外部js或者css文件
  • 模块已封装了大量常用图形和各个图形组件,无需了解官方json结构即可快速生成图形
  • 本模块内部封装了一个简单好用的json操作类,但不强制使用,使用者可以使用任意自己熟悉的方式来生成或操作配置json

#####回到顶部


1.6版最新功能:{#zuixin}

  • 使用echarts类的形式重写模块架构,并将echarts图形分为框架类和图形类,以便分别控制。

  • 新架构最大限度保留了旧版本模块的支持一框多图、多框多图、json参数自定、组件化控制图形等优点。

  • 新架构最大限度的将图形配置json保留在echarts类之内,不熟悉json的新手从图形创建到图形绘制全程无需关心json内容(当然依旧保留了json可自定修改、可导出、可导入等等特点)

  • 统一调整了命令名称和部分参数位置,以便使用更简便。

  • 新架构封装了大量常用js命令,例如操作运行图形、异步刷新图形等等操作无需再自行手写js代码了。

  • 折线、柱图、散点图、K线图封装了数据异步调用的方法(原理:数据写入js引擎,使用js变量名调用数据),大数据时可以大幅度减少json生成和图形绘制时间。

  • 所有命令添加了英文名词注释,可以用来快速对照官方api文档。

新特性展示

1.图形对象类和框架类分离控制

  • 页面框架生成html页面时会自动调用图形对象代码 ​

  • 一屏多图时创建多个图形主体即可,生成html页面时会自动调用

2.从图形创建到图形绘制无需担心json的内容

3.封装了数据异步调用的方法

> 下图中K线的数据量比较大(250KB左右,一共18年4110条数据)
> 如果这么大量的数据直接写入json中,会造成json读写非常缓慢,浪费大量时间
> 1.6版模块允许将数据写入js引擎,然后使用js变量名调用数据,同时不影响json内容编辑
> (普通的json类不允许使用js变量名或js代码,如果有嵌入js内容之后是无法再使用命令修改json内容,本模块突破了此壁障)
> json中使用过js变量名或者嵌入过js代码后,最后运行图形配置需要使用“运行图形配置_带JS变量()”命令

4.新版1.6模块简化了异步更新图形数据的方法

旧版本模块刷新图形数据时需要修改json内容,json内容比较多并且对官网json数据结构不了解的朋友可能无从下手。

新版本封装了"取图形数据()"和"JS操作_更新图形数据 ()"命令,大幅度简化数据修改和更新到图形的过程。

  • 取图形数据()

    本命令将取出当前图形对象中的所有图形数据(仅仅是图形数据,其他将忽略)

  • 取到的数据:

  • 修改数据

    取到的数据都是标准json格式,直接使用内置json类修改即可

    下图是删除数组中开头的第一个成员,然后在末尾添加一个新数据成员,最后修改后重新存到变量

    这样可以得到图形从右往左移动的效果(最右边是新数据)

  • 写入数据更新到图形

5.新版模块所有命令都添加了英文名词注释,以便对照查阅官网api文档

官网api文档地址:http://echarts.baidu.com/option.html

#####回到顶部


运行环境说明: {#huanjing}

Echarts是js图形库,运行需要浏览框支持,可使用易语言内置超文本浏览框(ie内核),也可使用wke模块(精简chrome浏览器内核),也可以使用更强大一些的CEF3(精易黑猫封装的完整Chromium内核浏览框模块或支持库)

性能比较:超文本浏览框 < WKE < CEF

  • 如果仅仅展示一些静态数据图形,可以使用超文本浏览框
  • 如果需要使用复杂图形,比如股票K线图或复杂函数极坐标图、水球图等建议使用CEF(推荐精易论坛黑猫封装的CEF3模块和支持库)
  • 一般应用建议使用wke,支持js,支持动态图形,性能基本够用(推荐易语言论坛kyozy封装的wke1.3模块)

1.wke浏览框初始化,并载入生成的图形

.版本 2
wke.绑定 (_启动窗口.取窗口句柄 ()) ' 这里默认使用整个窗口做图形显示
json.解析 (标准配置_折线图 (“折线图主标题”, “折线图副标题”, X轴内容组, Y轴内容组))
wke.载入(页面代码_生成 (#CSS_隐藏滚动条, 创建图形 (“640px”, “480px”, , “myChart”, json.取代码 ())))  

2.wke浏览框使用运行js命令关闭loading动画并载入数据

.版本 2
wke.运行js("myChart.hideLoading();")
wke.运行js("myChart.setOption(" + json.取代码() + ")")

#####回到顶部


文件列表: {#wenjian}

演示文件中因为需要演示js异步加载功能,所以使用了exui的wke浏览框控件,实际使用如果不需要js也可以使用易语言内置的超文本浏览框。

  • 目录code ---- 为模块文本源码(方便在线查看)
  • 目录js ---- 为引用的echart.js文件(只为展示,使用时不需要,js文件已内置到模块中)
  • Echart_DEMO.e ---- 为演示程序(演示程序使用了EXUI支持库的wke浏览框控件,需要单独下载)
  • Echarts模块v---.ec ---- 为已编译的成品模块文件
  • READMO.md ---- 说明文件
  • LICENSE ---- 开源协议
  • echart.e ---- 模块易语言源码文件
  • wke.dll ---- demo演示文件使用了EXUI支持库的wke浏览框控件
  • ex_ui2016.9.15.zip ---- EXUI支持库(demo演示文件中使用)

#####回到顶部


讨论群: {#qun}

Echarts讨论群:93902676(本模块最新版及所有演示文件都在群文件中) WKE等webui讨论群:124479181

#####回到顶部


Repository Comments ( 0 )

Sign in to post a comment

About

echarts易语言模块。 expand collapse
JavaScript and 2 more languages
MIT
Cancel

Releases (2)

All

E-echarts

Contributors

All

Activities

Load More
can not load any more
1
https://gitee.com/lsy9202/E-echarts.git
git@gitee.com:lsy9202/E-echarts.git
lsy9202
E-echarts
E-echarts
master

Search