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

所属分类:UI-图表

 19525  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

相关插件-图表

JS饼状图效果

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

冻结表头

冻结表头 实现表头的冻结效果
  图表
 46506  373

D3&jquery多功能图表(原创)

基于D3的多功能图表。可添加描述,收缩节点,滚轮缩放整图尺寸
  图表
 17950  214

jquery-html5关系图

jquery-html关系图-介绍人物关系
  图表
 126050  462

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