vue中利用echarts的饼图封装进度条，并实现动态生成进度条的个数据功

最新推荐文章于 2024-07-23 17:04:55 发布

959946790

最新推荐文章于 2024-07-23 17:04:55 发布

阅读量1.4k

点赞数

分类专栏： vue组件和功能文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_37741863/article/details/105381932

版权

vue中利用echarts的饼图封装进度条，并实现动态生成进度条的个数据功

灵感来源：echarts的饼图
根据这个来改写的，具体的可以到echarts官网查看案例
设计图: 在这里插入图片描述
目前完成的进度：

功能需求：进度条包层的百分比是动态的，颜色是动态的，数据也是动态的。进度条的个数也要动态生成

分析：封装echarts组件,在页面定义数据格式,用v-for列表循环并传参给echarts组件，子组件接收到值再去自动画图

完成步骤：

重点：定义渲染画图的数据格式是重点！！！
组件内容：

<template>
  <div :id="id" style="width:100%;height:100%;">

  </div>
</template>
<script>
import resize from 'element-resize-detector'
export default {
  name: "vCircle",
  props: ['setData','id','colorArr','percentArr','fontSize'],
  data(){
      return {
            
      }
  },
  watch:{
    setData:{
        handler(val){
            // console.log("父组件传值id",this.id)
            // console.log("父组件传值setData",