ECharts双层环形图备用

最新推荐文章于 2024-07-26 15:37:42 发布

永不满足的求知者

最新推荐文章于 2024-07-26 15:37:42 发布

阅读量756

点赞数

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/qq_41154522/article/details/119667607

版权

echarts 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述

var datas = {
  value: 78,
  company: "%",
  ringColor: [
    {
      offset: 1,
      color: "#FFF4DF" // 0% 处的颜色
    },
    {
      offset: 0,
      color: "#FFF4DF" // 100% 处的颜色
    }
  ]
};
option = {
  grid: {
    left: 0,
    bottom: 0,
    top: 0,
    containLabel: true
  },
  title: {
    text: 78,
    subtext: "%",
    x: "center",
    y: "center",
    itemGap: 0,
    textStyle: {
      fontWeight: "bold",
      color: "#000",
      fontSize: 14
    },
    subtextStyle: {
      color: "#000",
      fontSize: 12
    }
  },
  series: [
    {
      name: "内环",
      type: "pie",
      clockWise: true,
      radius: ["80%", "65%"],
      center: ["50%", "50%"],
      itemStyle: {
        normal: {
          borderRadius: 50,
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        }
      },
      hoverAnimation: false,
      color: "#0ac4a6",
      data: [
        {
          value: 100 - datas.value,
          name: "",
          itemStyle: {
            normal: {
              color: "#FFF",
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          }
        },
        {
          name: "",
          value: datas.value
        }
      ]
    },
    // 边框的设置
    {
      name: "外环",
      center: ["50%", "50%"],
      radius: ["100%", "80%"],
      type: "pie",
      silent: true,
      animation: false,
      color: "#f0f2f5",
      data: [
        {
          value: 100
        }
      ]
    }
  ]
};