[Echarts] 饼图或环形图设置扇叶间隔

饼图或环形图设置扇叶间隔

实现思路

设置series中的itemStyle属性：

itemStyle: {
  borderColor: "#fff",
  borderWidth: 10,
}

完整代码附录

<template>
  <div class="ring-chart-container">
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "RingChart",
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          // trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            label: {
              formatter: function (e) {
                // 数据为0时，不显示label与labeline
                console.log("参数值:", e);
                const data = e.data;
                if (data.value === 0) {
                  data.labelLine.show = false;
                  data.label.show = false;
                } else {
                  return data.value;
                }
              },
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 10,
            },
            radius: ["40%", "50%"],
            data: [
              {
                value: 100,
                name: "类别1",
                labelLine: { show: true },
                label: { show: true },
              },
              {
                value: 100,
                name: "类别2",
                labelLine: { show: true },
                label: { show: true },
              },
              {
                value: 100,
                name: "类别3",
                labelLine: { show: true },
                label: { show: true },
              },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

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