• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

dataV实现动态环形图

互联网 diligentman 1周前 (10-16) 13次浏览

dataV实现动态环形

1.开发环境 vue+element+echarts
2.电脑系统 windows10 专业版
3.在开发的过程中,我们根据项目的需求,可能会实现饼图动态切换展示,怎么实现呢?
4.效果图如下:
dataV实现动态环形图
5.在template中添加如下代码:

<dv-active-ring-chart :config="BtObj" style="width:300px;height:300px" />

6.在data下return中添加如下代码:

BtObj:{
        data:[{
      name: '周口',
      value: 55,
    },
    {
      name: '南阳',
      value: 120,
    }],
    color:["#C23531","#0F8A61"]//表示自定义颜色值,和上面的数据是一一对应的关系
      },

7.本期的教程到了这里就结束啦,是不是很简单,让我们一起努力走向巅峰!


喜欢 (0)