echarts实现多圆环嵌套

最新推荐文章于 2024-12-25 16:33:22 发布

不写bug写什么

最新推荐文章于 2024-12-25 16:33:22 发布

阅读量4.1k

点赞数 4

分类专栏：前端文章标签： js css echarts

本文链接：https://blog.csdn.net/qq_37942884/article/details/118297407

版权

本文分享了如何使用echarts实现多圆环嵌套的效果，通过配置多个环形图（pie），调整各环大小比例，详细介绍了基本思路和具体代码实现。

摘要由CSDN通过智能技术生成

这里写自定义目录标题

echarts实现多圆环嵌套

echarts实现多圆环嵌套

先贴效果图，或许有些初用echarts的小伙伴用得到，分享一下实现方法

基本思路

实现多圆形嵌套的基本思路就是利用echarts的环形图“pie”，在series配置多个圆环，圆环的大小百分比不一样从而实现圆环嵌套效果，多的不说，直接上代码

代码

let data1 = [
        { value: 1000, name: '全部工单' },
        { value: 500, name: '服务预订工单' },
      ]
      let data2 = [
        { value: 1000, name: '全部工单' },
        { value: 250: '社区管家工单' },
      ]
      let data3 = [
        { value: 1000, name: '全部工单' },
        { value:150, name: '志愿者工单' },
      ]
      let data4 = [
        { value: 1000, name: '全部工单' },
        { value: 100, name: '咨询工单' },
      ]
      this.data1 = data1
      this.data2 = data2
      this.data3 = data3