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

所属分类:UI-图表

 19669  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

相关插件-图表

layui的复杂表头及数据处理总结(原创)

在layui的官网有些东西是查不到的,这给我 们造成很多的误解,在网上也找不到成套的实例用法。在这里总结了layui框架的复杂表头的拼接及数据的展示,希望给大家的开发,带来些实用的方便。
  图表
 26237  184

原生js表格插件systable

原生js表格插件systable,代码注释全
  图表
 43871  382

JS饼状图效果

基于highcharts.js实现的饼状图效果,报表
  图表
 49594  373

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

自己开发中使用ets无法实现饼图环形图颜色环形渐变,且目前并未发现有其他插件可以实现,故手写一个,供大家使用,请根据自己实际情况自行修改,欢迎交流。
  图表
 19670  226

讨论这个项目(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
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复