精易论坛

标题: 【Echarts图表模块示例源码】GDP增长动态变化效果 [打印本页]

作者: 最近正迷糊 时间: 2023-9-12 17:13
标题: 【Echarts图表模块示例源码】GDP增长动态变化效果
本帖最后由最近正迷糊于 2023-9-13 09:38 编辑

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://125.confly.eu.org/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路径不一样，所以也要改一下）

echarts示例_动态柱图.e

121.5 KB, 下载次数: 125, 下载积分: 精币 -2 枚

Echarts模块v1.7.0.328.zip

408.89 KB, 下载次数: 104, 下载积分: 精币 -2 枚

作者: 查过 时间: 2023-9-12 17:26
全都是大佬~

作者: 豆豆灰常开心 时间: 2023-9-12 17:31
感谢分享，很给力！~

作者: 深圳梦 时间: 2023-9-12 19:11
感谢分享，很给力！~

作者: 不得了了 时间: 2023-9-12 19:53
学习学习

作者: 查过 时间: 2023-9-13 07:27
全都是大佬~

作者: 豆豆灰常开心 时间: 2023-9-13 07:32
感谢您对论坛的支持！

作者: 君九 时间: 2023-9-13 08:37

感谢分享！

作者: 一指温柔 时间: 2023-9-13 08:56
感谢分享！

作者: shuaier 时间: 2023-9-13 08:57
柱图的颜色怎么设置成不同的颜色？

作者: 最近正迷糊 时间: 2023-9-13 09:13
本帖最后由最近正迷糊于 2023-9-13 09:18 编辑

shuaier 发表于 2023-9-13 08:57
柱图的颜色怎么设置成不同的颜色？

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

其实也很简单，可以参考文档：https://echarts.apache.org/zh/option.html#series-bar.data.itemStyle.color
默认的数据数组data（也就是json配置中的series.data）里只是一个数据数组，要单独为其配置颜色就把颜色也写到这里就行里

示例1：series.data中不包含颜色
[1000,3000,2005,6000,3000]

示例2：serires.data中包含颜色
[
  {
value:1000, itemStyle:{
   color="#ffde00"
}
  },{
value:3000,
itemStyel:{
   color:"#00247d"
}
  }.......
]

作者: 最近正迷糊 时间: 2023-9-13 09:32
实现效果：

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

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

作者: mhtjsgxpfs1 时间: 2023-9-13 09:33
感谢，学习了

作者: 396384183 时间: 2023-9-13 09:39
感谢分享！

作者: kantal 时间: 2023-9-13 11:32
新技能已get√

作者: qqmqqg 时间: 2023-9-13 12:27
6666666666666666666666666666

作者: qqmqqg 时间: 2023-9-13 12:59
可以挂个头像不就完美了

作者: jysoft2022 时间: 2023-9-13 14:17
感谢分享

作者: dede1 时间: 2023-9-13 14:25
好厉害的感觉

作者: fengyewl 时间: 2023-9-14 08:24
感谢分享~感谢分享~

作者: 一指温柔 时间: 2023-9-14 08:48
感谢分享!

作者: aijianli 时间: 2023-9-16 11:31
一直想要这样的效果，感谢大神收藏下载了

作者: pipicool 时间: 2023-9-17 02:29
学习一下

作者: 内蒙逍遥 时间: 2023-9-19 05:56
感谢，感谢，瞌睡来枕头。

作者: a13100412800 时间: 2023-9-20 14:11
支持支持，感谢分享！

作者: sjsjsjsj 时间: 2023-9-21 21:17
66666666666666666666666666666666

作者: 爱易编程 时间: 2023-9-27 09:12
很不错，抖音上经常看到这种

作者: jingyigg 时间: 2023-9-29 08:12
哈哈，之前用这个echart是直接替换html里面的关键字

作者: chabajiayu 时间: 2023-10-30 15:33
支持支持，感谢分享！

作者: cf2006a 时间: 2024-1-1 08:14

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

作者: yangjun21 时间: 2024-1-2 17:47
6666666666666666

作者: sjsjsjsj 时间: 2024-1-12 20:14
666666666666666666666666666666

作者: year1970 时间: 2024-2-19 09:51
感谢分享

作者: year1970 时间: 2024-3-16 08:05
感谢分享

作者: zzccll 时间: 2024-3-18 10:01
好东西，谢谢楼主

作者: wolfpack 时间: 2024-4-26 10:41
谢谢分享。。。。。。。。。。

作者: wolfpack 时间: 2024-4-26 10:42

作者: 小磊88 时间: 2024-4-26 10:54
支持开源~！感谢分享，很给力！~

作者: 原味 时间: 2024-8-11 11:23
学习下刚好需要

作者: aa0810 时间: 2024-10-8 01:27
热力图可以给个实例吗哥

作者: 夜店大话骰 时间: 2025-5-5 20:20
来坎坎坷坷

欢迎光临精易论坛 (https://125.confly.eu.org/)