找回密码
 立即注册

QQ登录

只需一步,快速开始

Simon.hu 讲师达人认证 悬赏达人认证 活字格认证
超级版主   /  发表于:2024-2-5 15:05  /   查看:4015  /  回复:0
本帖最后由 Patrick.Zhu 于 2024-4-2 17:16 编辑
看见标题你可能在想:怎么又是Echarts?活字格内置的图表不都是Echarts画的么?我觉得胡童鞋是想划水,老饭新吃,忽悠人来了

我:看破不说破,做人留一线,日后好相见。 再说了,你还没看怎么就知道我这个不是王炸呢?

先看2个效果图
(我的动图截图工具可能有点不太行,也许你看起来会比较卡)
(建议看这2个动图的时候,自己脑补《反转地球》的音乐)
地球大气.gif

活字格3D.gif
怎么样不是老饭新吃吧?

-----------------------正文------------------------
隆重介绍一下,这个版本很强的一个插件--Echarts
只是很强而已,后面还有更强的插件

image.png740777587.png
让先那最简单的图表说明一下玩法
有一个表【销售数据表】,里面2个字段【年份】【销售额】
image.png936191406.png
页面上随便选一片区域设置成Echarts单元格,并且设置数据源,起名字【销售数据信息】,数据源中选择销售数据表的【年份】和【销售额】这2列
image.png543943786.png
设置完了以后,打开【Echarts设置...】超链接
然后一顿代码,怼进去
(如果你能懂一些JS的话,你其实大概能看懂下面的代码,就是横轴显示啥纵轴显示啥。当然其中你可能看不懂的就是ForguncyEchartsHelper.splitDataSource(Context.销售数据信息)  这句话其实就是按照名字取到你刚才设置的数据源,然后去取数据)
  1. const{
  2.   "年份":xAxisData,
  3.   "销售额":yAxisData
  4. } = ForguncyEchartsHelper.splitDataSource(Context.销售数据信息);

  5. option = {
  6.   xAxis: {
  7.     type: 'category',
  8.     data: xAxisData
  9.   },
  10.   yAxis: {
  11.     type: 'value'
  12.   },
  13.   series: [
  14.     {
  15.       data: yAxisData,
  16.       type: 'line'
  17.     }
  18.   ]
  19. };
复制代码
image.png964742126.png
不要以为这个图表只是展示一下,秀一下,他是可以跟数据一起联动的,不信,我绑定一个表格修改一下数据给你看
Echarts.gif
有了这个插件以后,只要你懂一点JS代码,只要你能看懂Echarts玩法;那么Echarts有什么咱活字格就能做什么
我没有吹牛,我们自己已经做了几乎所有Echarts的demo,并且放到了一个工程文件中
image.png927490234.png
image.png19486693.png
到时候这个工程文件,可以给大家学习。
示例工程见市场:传送门
(注意的是,当前只支持预览版二 10.0.1.0 版本)

一起想想一下,以后只要Echarts有的图表类型(基础图表,高级图表,还是3D图表)咱活字格统统能做,而且这一个插件就能搞定
但是美中不足的事,你可能需要稍微会点代码


评分

参与人数 12满意度 +60 收起 理由
阿Q7 + 5
牧野流云 + 5
中力工贸 + 5
蜜雪冰城 + 5
condust + 5
13794930121 + 5
Tom猫 + 5
true + 5
玉轩 + 5
samta + 5
+ 5
吴小胖 + 5

查看全部评分

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部