入门级Echarts商业级数据图表库模块2025年新手小白教学

KD飞飞 · 发表于 2026-1-9 11:10:51

本帖最后由 KD飞飞于 2026-1-9 13:44 编辑

原头贴：【Echarts图表模块示例源码】GDP增长动态变化效果_精易论坛感谢大佬开发的模块，真的巨牛杯

Apache ECharts 是一款由百du开源，并现已晋升为 Apache 基金会顶级项目的、基于 JavaScript 的数据可视化图表库。它能帮助开发者通过简单的配置，在网页上创建出直观、生动、可交互的多样化图表

因为原始案例引用了各类第三方浏览器库，而且比较复杂，纯萌新略有门槛，一丢丢门槛

该组件模块极大的减轻了图表可视化上手难度，方便工业领域和办公领域的小白方便入手，例如在财会统计方面，在股票图形方面，在工控领域的动态显示方面均可应用，
加之我自己也需要用到
随后就简单研究了一下下
当前我的系统是win1022H2
附件代码共计40行非常的简单，模块和源码都打包了，不想下载的可以看代码框，想下载的自己下载附件
最后：祝各位仓管员，文员，会计出纳，文书文秘们，在企事业软件领域赚多一个亿
效果：图

窗口程序集名	保留	保留	备注
窗口程序集_启动窗口
变量名	类型	数组	备注
页面框架	Echarts类_框架
图形对象	Echarts类_图形

子程序名	返回值类型	公开	备注
_按钮1_被单击

变量名	类型	静态	数组	备注
计数器	整数型
x轴	文本型		0
数据组1	整数型		0
数据组2	整数型		0
数据组3	整数型		0

置随机数种子 (取秒 (取现行时间 ()))
加入成员 (数据组1, { 1, 2, 3, 4, 17, 6, 7, 8, 9, 10 })
加入成员 (数据组2, { 11, 12, 13, 55, 15, 16, 17, 18, 19, 20 })
加入成员 (数据组3, { 21, 22, 23, 30, 25, 26, 27, 28, 29, 30 })

计次循环首 (取数组成员数 (数据组1), 计数器)

加入成员 (x轴, 到文本 (计数器) ＋ “周\n情况”)

计次循环尾 ()
' 上面是加入成员
' =================================================================================这里是折线图
图形对象.初始化 ()
图形对象.添加图形数据_折线 (“产品1销售额”, 工具_创建JSON数组 (, , 数据组1, ), , , , , , , , , , , , , , , , , , , , , )
图形对象.添加图形数据_折线 (“产品2销售额”, 工具_创建JSON数组 (, , 数据组2, ), , , , , , , , , , , , , , , , , , , , , )
图形对象.添加图形数据_折线 (“产品3”, 工具_创建JSON数组 (, , 数据组3, ), , , , , , , , , , , , , , , , , , , , , )
图形对象.设置组件_标题 (“静态折线图示例”, “演示”, , , , , , , #位置_居中, , , , )
图形对象.设置组件_X轴 (工具_创建JSON数组 (x轴), , , , , , , , , , “时间”)
图形对象.设置组件_Y轴 (, , , , , , , “数据”)
图形对象.设置组件_图例 (, , , , , , #位置_右 )
图形对象.设置组件_鼠标提示 (真)
页面框架.创建_图形主体 (到文本 (超文本浏览框1.宽度) ＋ “px”, 到文本 (超文本浏览框1.高度) ＋ “px”, , , , 图形对象.取代码 (), , )
写到文件 (取运行目录 () ＋ “\temp.html”, 到字节集 (页面框架.生成_最终html页面 (, , #CSS_隐藏滚动条, , , 2)))
超文本浏览框1.地址＝取运行目录 () ＋ “\temp.html”
' =================================================================================这里是饼图
图形对象.初始化 () ' 如果想组合显示可以不初始化这里屏蔽看看效果你就懂我说的意思了
图形对象.添加图形数据_柱图 (“产品1销售额”, 工具_创建JSON数组 (, , 数据组1, ), )
图形对象.添加图形数据_柱图 (“产品2销售额”, 工具_创建JSON数组 (, , 数据组2, ), )
图形对象.设置组件_标题 (“静态柱状图示例”, “演示”, , , , , , , #位置_居中, , , , )
图形对象.设置组件_X轴 (工具_创建JSON数组 (x轴), , , , , , , , , , “时间”)
图形对象.设置组件_Y轴 (, , , , , , , “数据”)
图形对象.设置组件_图例 (, , , , , , #位置_右 )
图形对象.设置组件_鼠标提示 (真)
页面框架.创建_图形主体 (到文本 (超文本浏览框2.宽度) ＋ “px”, 到文本 (超文本浏览框2.高度) ＋ “px”, , , , 图形对象.取代码 (), , )
写到文件 (取运行目录 () ＋ “\temp2.html”, 到字节集 (页面框架.生成_最终html页面 (, , #CSS_隐藏滚动条, , , 2)))
超文本浏览框2.地址＝取运行目录 () ＋ “\temp2.html”

i支持库列表	支持库注释
HtmlView	超文本浏览框支持库

.版本 2<br />
.支持库 HtmlView<br />
<br />
.程序集 窗口程序集_启动窗口<br />
.程序集变量 页面框架, Echarts类_框架<br />
.程序集变量 图形对象, Echarts类_图形<br />
<br />
.子程序 _按钮1_被单击<br />
.局部变量 计数器, 整数型<br />
.局部变量 x轴, 文本型, , "0"<br />
.局部变量 数据组1, 整数型, , "0"<br />
.局部变量 数据组2, 整数型, , "0"<br />
.局部变量 数据组3, 整数型, , "0"<br />
<br />
置随机数种子 (取秒 (取现行时间 ()))<br />
加入成员 (数据组1, { 1, 2, 3, 4, 17, 6, 7, 8, 9, 10 })<br />
加入成员 (数据组2, { 11, 12, 13, 55, 15, 16, 17, 18, 19, 20 })<br />
加入成员 (数据组3, { 21, 22, 23, 30, 25, 26, 27, 28, 29, 30 })<br />
.计次循环首 (取数组成员数 (数据组1), 计数器)<br />
    加入成员 (x轴, 到文本 (计数器) ＋ “周\n情况”)<br />
.计次循环尾 ()<br />
' 上面是加入成员<br />
' =================================================================================这里是折线图<br />
图形对象.初始化 ()<br />
图形对象.添加图形数据_折线 (“产品1销售额”, 工具_创建JSON数组 (, , 数据组1, ), , , , , , , , , , , , , , , , , , , , , )<br />
图形对象.添加图形数据_折线 (“产品2销售额”, 工具_创建JSON数组 (, , 数据组2, ), , , , , , , , , , , , , , , , , , , , , )<br />
图形对象.添加图形数据_折线 (“产品3”, 工具_创建JSON数组 (, , 数据组3, ), , , , , , , , , , , , , , , , , , , , , )<br />
图形对象.设置组件_标题 (“静态折线图示例”, “演示”, , , , , , , #位置_居中, , , , )<br />
图形对象.设置组件_X轴 (工具_创建JSON数组 (x轴), , , , , , , , , , “时间”)<br />
图形对象.设置组件_Y轴 (, , , , , , , “数据”)<br />
图形对象.设置组件_图例 (, , , , , , #位置_右)<br />
图形对象.设置组件_鼠标提示 (真)<br />
页面框架.创建_图形主体 (到文本 (超文本浏览框1.宽度) ＋ “px”, 到文本 (超文本浏览框1.高度) ＋ “px”, , , , 图形对象.取代码 (), , )<br />
写到文件 (取运行目录 () ＋ “\temp.html”, 到字节集 (页面框架.生成_最终html页面 (, , #CSS_隐藏滚动条, , , 2)))<br />
超文本浏览框1.地址 ＝ 取运行目录 () ＋ “\temp.html”<br />
<br />
' =================================================================================这里是饼图<br />
图形对象.初始化 ()  ' 如果想组合显示可以不初始化这里 屏蔽看看效果你就懂我说的意思了<br />
图形对象.添加图形数据_柱图 (“产品1销售额”, 工具_创建JSON数组 (, , 数据组1, ), )<br />
图形对象.添加图形数据_柱图 (“产品2销售额”, 工具_创建JSON数组 (, , 数据组2, ), )<br />
图形对象.设置组件_标题 (“静态柱状图示例”, “演示”, , , , , , , #位置_居中, , , , )<br />
图形对象.设置组件_X轴 (工具_创建JSON数组 (x轴), , , , , , , , , , “时间”)<br />
图形对象.设置组件_Y轴 (, , , , , , , “数据”)<br />
图形对象.设置组件_图例 (, , , , , , #位置_右)<br />
图形对象.设置组件_鼠标提示 (真)<br />
页面框架.创建_图形主体 (到文本 (超文本浏览框2.宽度) ＋ “px”, 到文本 (超文本浏览框2.高度) ＋ “px”, , , , 图形对象.取代码 (), , )<br />
写到文件 (取运行目录 () ＋ “\temp2.html”, 到字节集 (页面框架.生成_最终html页面 (, , #CSS_隐藏滚动条, , , 2)))<br />
超文本浏览框2.地址 ＝ 取运行目录 () ＋ “\temp2.html”