【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中不包含颜色

[JavaScript] 纯文本查看 复制代码

[1000,3000,2005,6000,3000]

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

[JavaScript] 纯文本查看 复制代码

[
  {
    value:1000,    itemStyle:{
      color="#ffde00"
    }
  },{
    value:3000,
    itemStyel:{
      color:"#00247d"
    }
  }.......
]

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


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

小磊88

支持开源~！感谢分享，很给力！~

wolfpack

wolfpack

谢谢分享。。。。。。。。。。

zzccll

好东西，谢谢楼主

year1970

感谢分享

year1970

感谢分享

sjsjsjsj

666666666666666666666666666666

yangjun21

6666666666666666

cf2006a

成员上50个就没有柱形图了