ECharts 饼图-环形进度图

Hermia_yuan

于 2024-03-21 11:11:04 发布

阅读量665

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Hermia_yuan/article/details/136902838

版权

option = {
  tooltip: {
    trigger: 'item',
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  title:[{
        text: "40.5%",
        x: "center",
        y: "46%",
        itemGap: 5, // 文本间距
        textStyle: {
          color: "rgba(255, 255, 255, 0.95)",
          fontFamily: "PingFang SC",
          fontWeight: 500,
          fontSize: 30,
        },
        subtext: "完成情况",
        subtextStyle: {
          color: "rgba(255, 255, 255, 0.6)",
          fontSize: 20,
          // lineHeight: 16,  或者使用lineHeight来调节文本间距
          fontFamily: "PingFang SC",
          align: "center",
          fontWeight: 400,
        },
      }],
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '50%'],
      center: ["50%", "50%"],
      avoidLabelOverlap: false,
      label: {
        show: false,
      },
      data: [
          {
            value: 40.5,
            name: "Search Engine",
            itemStyle: {
              borderColor: "rgba(255, 255, 255, 0.6)",
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "#65FF99", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#11A92A", // 100% 处的颜色
                  },
                ],
              },
            },
          },
          {
            value: 100 - 40.5,
            tooltip: {
              show: false,
            },
            emphasis: {
              disabled: true,
            },
            itemStyle: {
              borderWidth: 1,
              color: "rgba(160, 225, 255, 0.2)",
            },
          },
        ],
    }
  ]
};