echarts实现多重环形图

大屏里有一个多重环形图的展示,设计图效果:

 

echarts没有直接实现的,参考了网上的几种方法,自己修改了一下,主要分两种: 1 环形饼图重叠  2 柱形图结合极坐标系

这篇先介绍使用环形饼图实现

两种效果图:

  

第一种效果代码:

<template>
  <div>
    <div id="chart3" />
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";

onMounted(() => {
  var myChart3 = echarts.init(document.getElementById("chart3"));

  const placeItemStyle = {
    label: {
      show: false,
    },
    labelLine: {
      show: false,
    },
    itemStyle: {
      color: "#cbccd0",
    },
    emphasis: {
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
    },
  };
  myChart3.setOption({
    title: {
      text: "销售分布",
    },
    tooltip: {},
    legend: {
      data: ["一月", "二月", "三月"],
    },
    // yAxis: {},
    series: [
      {
        name: "销量",
        type: "pie",
        radius: ["65%", "80%"],
        color: ["#afdd8a", "#cbccd0"],
        zlevel: 1,
        hoverAnimation: false, //鼠标移入变大
        data: [
          {
            value: 22,
            name: "一月",
            itemStyle: {
              color: "#afdd8a",
              //   borderRadius: 15,
            },
          },
          {
            value: 64,
            name: "",
            ...placeItemStyle,
          },
        ],
      },
      {
        name: "销量",
        type: "pie",
        radius: ["49%", "64%"],
        color: ["#00BDAE", "#cbccd0"],
        zlevel: 2,
        hoverAnimation: false, //鼠标移入变大
        data: [
          {
            value: 32,
            name: "二月",
            itemStyle: {
              // color: '#00BDAE',
              //   borderRadius: 15,
            },
            labelLine: {
              length: 45,
            },
          },
          {
            value: 54,
            name: "",
            ...placeItemStyle,
          },
        ],
      },
      {
        name: "销量",
        type: "pie",
        radius: ["34%", "48%"],
        color: ["#efb754", "#cbccd0"],
        zlevel: 3,
        hoverAnimation: false, //鼠标移入变大
        itemStyle: {
          color: "#efb754",
          //   borderRadius: 15,
        },
        data: [
          {
            value: 28,
            name: "三月",
            labelLine: {
              length: 70,
            },
          },
          {
            value: 60,
            name: "",
            ...placeItemStyle,
          },
        ],
      },
    ],
  });
});
</script>

<style scoped>
#chart3 {
  width: 500px;
  height: 400px;
}
</style>

 

主要是将三个环形饼图叠加在一起,radius 递减就可以,配置高亮的颜色,与阴影的颜色,这里的阴影实际也是一项数据,只是不显示相关 label,看起来就像背景颜色

这里的 label 展示,正常是会被图形覆盖,可以添加 zlevel 来指定层级

如果不需要线段的尾端是圆弧型,这样就可以了,如果加上末尾的样式,borderRadius,连接处就会出现空隙,这个方法就不适用了,需要第二种实现

第二种效果代码:

<template>
  <div>
    <div id="chart" />
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";

onMounted(() => {
  var myChart = echarts.init(document.getElementById("chart"));
// 反向阴影效果
var placeHolderStyle = {
    label: {
      show: false,
      position: "center",
    },
    labelLine: {
      show: false,
    },
    itemStyle: {
      color: "#5b5b5b",
      borderColor: "#5b5b5b",
      borderWidth: 10,
    },
    emphasis: {
      disabled: true,
      //   label: {
      //     show: false,
      //   },
      //   labelLine: {
      //     show: false,
      //   },
    },
  };
  const labelStyle = (color, length = 100) => {
    return {
      label: {
        // show: false,
        position: "outside",
        formatter: "{a}: {c}",
      },
      labelLine: {
        // show: false,
        length,
        smooth: 0.5,
      },
      itemStyle: {
        borderWidth: BorderWidth,
        shadowBlur: 40,
        borderColor: color,
        shadowColor: "rgba(0, 0, 0, 0)", //边框阴影
      },
    };
  };
  var BorderWidth = "10";

  myChart.setOption({
    backgroundColor: "#333",
    color: ["#53f1f2", "#4ebefd", "#30ed9d", "#faa234", "#fff"],
    legend: {
      show: true,
      orient: "vertical",
      left: "left",
      top: "middle",
      data: ["正常", "次要", "警告", "重要", "严重"],
      textStyle: {
        color: "#fff",
        fontSize: 16,
      },
    },
    series: [
      {
        name: "正常",
        type: "pie",
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        radius: [100, 101],
        ...labelStyle("#53f1f2", 50),
        data: [
          {
            value: 3,
            name: "",
            ...placeHolderStyle,
          },
          {
            value: 7,
            name: "70%",
          },
        ],
      },
      {
        name: "次要",
        type: "pie",
        clockWise: false,
        hoverAnimation: false,
        radius: [80, 81],
        ...labelStyle("#4ebefd", 60),
        data: [
          {
            value: 4,
            name: "",
            ...placeHolderStyle,
          },
          {
            value: 6,
            name: "60%",
          },
        ],
      },
      {
        name: "警告",
        type: "pie",
        clockWise: false,
        hoverAnimation: false,
        radius: [60, 61],
        ...labelStyle("#30ed9d", 70),
        data: [
          {
            value: 5,
            name: "",
            ...placeHolderStyle,
          },
          {
            value: 5,
            name: "40%",
          },
        ],
      },
      {
        name: "重要",
        type: "pie",
        clockWise: false,
        hoverAnimation: false,
        radius: [40, 41],
        ...labelStyle("#faa234", 90),
        data: [
          {
            value: 7,
            name: "",
            ...placeHolderStyle,
          },
          {
            value: 3,
            name: "30%",
          },
        ],
      },
      {
        name: "严重",
        type: "pie",
        clockWise: false,
        hoverAnimation: false,
        radius: [20, 21],
        ...labelStyle("#fff"),
        labelLine: {
          lineStyle: {
            color: "#fff",
          },
          length: 100,
          smooth: 0.5,
        },
        data: [
          {
            value: 6,
            name: "",
            ...placeHolderStyle,
          },
          {
            value: 4,
            name: "30%",
          },
        ],
      },
    ],
  });

  });
</script>

<style scoped>
#chart {
  width: 500px;
  height: 400px;
}
</style>

这种也是将环形饼图叠加,但是不一样的是使用的是 border,radius 的宽度间距仅设置为 1;因为饼图的 border 默认是有圆角的,这样就解决了圆角的问题

这里要注意后一个数据的圆弧会覆盖前一个,所以这里的数据 data 顺序要换一下,可以通过 clockWise:false,逆时针放置饼图的扇区

 

总的来说,这种实现效果是最好的

 

 使用极坐标+柱图实现多层环形图, 单独写了一篇https://www.cnblogs.com/steamed-twisted-roll/p/16919329.html