活字格10.0新功能解密：四、Echarts插件
本帖最后由 Patrick.Zhu 于 2024-4-2 17:16 编辑看见标题你可能在想：怎么又是Echarts？活字格内置的图表不都是Echarts画的么？我觉得胡童鞋是想划水，老饭新吃，忽悠人来了
我：看破不说破，做人留一线，日后好相见。;P 再说了，你还没看怎么就知道我这个不是王炸呢？
先看2个效果图
（我的动图截图工具可能有点不太行，也许你看起来会比较卡）
（建议看这2个动图的时候，自己脑补《反转地球》的音乐）
怎么样不是老饭新吃吧？
http://img.soogif.com/P8emFxfrERO8UekUivjxRybv42vH2649.gif_s400x0
-----------------------正文------------------------
隆重介绍一下，这个版本很强的一个插件--Echarts
只是很强而已，后面还有更强的插件
让先那最简单的图表说明一下玩法
有一个表【销售数据表】，里面2个字段【年份】【销售额】
页面上随便选一片区域设置成Echarts单元格，并且设置数据源，起名字【销售数据信息】，数据源中选择销售数据表的【年份】和【销售额】这2列
设置完了以后，打开【Echarts设置...】超链接
然后一顿代码，怼进去
（如果你能懂一些JS的话，你其实大概能看懂下面的代码，就是横轴显示啥纵轴显示啥。当然其中你可能看不懂的就是ForguncyEchartsHelper.splitDataSource(Context.销售数据信息)这句话其实就是按照名字取到你刚才设置的数据源，然后去取数据）
const{
"年份":xAxisData,
"销售额":yAxisData
} = ForguncyEchartsHelper.splitDataSource(Context.销售数据信息);
option = {
xAxis: {
type: 'category',
data: xAxisData
},
yAxis: {
type: 'value'
},
series: [
{
data: yAxisData,
type: 'line'
}
]
};
不要以为这个图表只是展示一下，秀一下，他是可以跟数据一起联动的，不信，我绑定一个表格修改一下数据给你看
有了这个插件以后，只要你懂一点JS代码，只要你能看懂Echarts玩法；那么Echarts有什么咱活字格就能做什么
我没有吹牛，我们自己已经做了几乎所有Echarts的demo，并且放到了一个工程文件中
到时候这个工程文件，可以给大家学习。
示例工程见市场：传送门
（注意的是，当前只支持预览版二 10.0.1.0 版本）
一起想想一下，以后只要Echarts有的图表类型（基础图表，高级图表，还是3D图表）咱活字格统统能做，而且这一个插件就能搞定
但是美中不足的事，你可能需要稍微会点代码
http://img.soogif.com/QOjEU3wYausY0lUGcLOdDmABG5tLsjIQ.gif_s400x0
页:
[1]