原生js饼图、环形图、环形渐变(原创)

所属分类:UI-图表

 19230  226  查看评论 (5)
分享到微信朋友圈
X
原生js饼图、环形图、环形渐变(原创) ie兼容9

更新时间:2019/7/8 下午4:43:42

更新说明:修改了一些bug,增加了一些样式配置,如图例


发布时间:2019-07-07 23:34:45

调用方法:

drawCircle()

参数列表:

  • id: 绑定生成图表的元素的id

  • data: 展示数据

  • name: 数据列表名称,中间label显示

  • value: 数据,必填

  • colors:[start, end] 渐变颜色,两个数值必须为rgb格式

  • radius: 圆环半径,可以是 number,string,array,比如 100,'100', '50%', [50], ['50%'], ['50%', '40%'],为数组时,第二个元素表示内部圆半径,内部圆半径默认为外部圆半径*0.8

  • center: 圆环中心位置坐标,默认['50%', '50%'],可以是具体数值,比如[100, 100]

实例方法:

update()

用于更新数据,传入参数为 data

相关插件-图表

抖音业绩销量动态排行,加载数据实现动态排名

git上的部分项目改造,根据自己的需求可以自行进行修改。一般用于大屏演示和数据展示
  图表
 14111  137

动态数据表格插件ZBTable(原创)

能够根据后台传来的JSON数据动态创建的基本功能的JQuery表格插件
  图表
 29014  299

ets实现汽车动态仪表盘

通过ets实现汽车动态仪表盘,包括速度,转速等的实时数据更新
  图表
 17059  207

类似芝麻信用占比的插件

这是一块款信用占比的插件
  图表
 24895  375

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    悠悠的fish 0
    2019/7/9 9:15:19

    都已经有了那么强大的echarts插件了,比你这个完善太多了,不过你原创的东西自己学习了也很不错的。

        好人中的恶魔0
        2019/7/11 16:58:22
        我这就是echarts没有实现的哦,不过我这个比较简单,是根据我们公司实际项目写的,其他情况需要修改,echarts目前没有这种渐变方式
        好人中的恶魔0
        2019/7/11 17:04:19
        也有可能是我没有完全掌握echarts,没有找到方法吧
        卑鄙的我0
        2019/8/26 17:56:32
        请问怎么修改百分比哪里的颜色
        好人中的恶魔0
        2019/9/17 16:16:58
        不好意思啊,一直没看这个,参数列表有个 labelStyle属性,可以设置color
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复