八哥吃瓜群

吃瓜网是一个坐等吃瓜群众的在线吃瓜网站平台,网站主要分享生活中各种吃瓜事件,用坐等吃瓜的状态认识世界,看一个不一样的世界。

【Echarts图表模块示例源码】GDP增长动态变化效果

Echarts图表模块使用示例

GDP增长动态变化效果

【Echarts图表模块示例源码】GDP增长动态变化效果

源码主要为演示Echarts的自由度,希望在使用中不要被模块本身限制,echarts本身的实力是无限的,更多的效果还是需要发挥想象力+查阅文档+自己上手调配参数。

本示例中除了创建基本图形使用了模块本身的生成命令,另外主要演示了通过查阅官方文档手动配置json来生成自己想要的效果(源码中自定义配置的都有附带官方文档的地址)。

注:

echarts模块当前最新版是v1.7.0.328(内核echarts.min.js版本v5.2.2

因为工作关系好久没有玩这个了,今天看b站的gdp变化视频突然就想用易来做一下,本来想顺便更新一下模块的,但是发现官网的echarts.js最新版5.4好像已经放弃对ie支持了(无法用超文本浏览框调用了),所以就暂时还是不更新模块了。

Echarts模块详细介绍:

Echarts商业级数据图表库模块v1.7.0.328【模块及示例大全】

https://bbs.125.la/forum.php?mod=viewthread&tid=14708561

补上单独设置颜色的效果和方法

本来想在示例中直接实现的,但是感觉写出来代码太多会让新手望而生畏就没写

其实也很简单,可以参考文档:https://echarts.apache.org/zh/option.html#series-bar.data.itemStyle.color

默认的数据数组data(也就是json配置中的series.data)里只是一个数据数组,要单独为其配置颜色就把颜色也写到这里就行里

示例1:series.data中不包含颜色

示例2:serires.data中包含颜色

【Echarts图表模块示例源码】GDP增长动态变化效果

实现步骤1.生成带颜色图形:

【Echarts图表模块示例源码】GDP增长动态变化效果

生成步骤2.刷新数据(和原来不带颜色的data路径不一样,所以也要改一下)

【Echarts图表模块示例源码】GDP增长动态变化效果

发表评论