echarts-pie

option = {
  width: 165,
  height: 165,
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['70%', '85%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderWidth: 5,
        borderColor: "#fff", // "rgba(12, 49, 95, 0.5)",
        color: function(params) {
          // 传入的是数据项 seriesIndex, dataIndex, data, value 等各个参数
          const color = ['#1ab0a5', '#6db436', '#d53f46', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
          return color[params.dataIndex];
        }
      },
      label: {
        show: false,
      },
      emphasis: {
        label: {
          show: false,
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
      ]
    }
  ]
}

<template>
  <div
    ref="echartsDemo"
    class="charts chart-pie"
  ></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'CockpitEChartPie',
  props: {
    value: Array,
  },
  data() {
    return {}
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    })
  },
  methods: {
    init() {
      const option = {
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['70%', '85%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderWidth: 5,
              borderColor: "#0c315f", // "rgba(12, 49, 95, 0.5)",
              color: function(params) {
                // 传入的是数据项 seriesIndex, dataIndex, data, value 等各个参数
                const color = ['#1ab0a5', '#6db436', '#d53f46', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
                return color[params.dataIndex];
              }
            },
            label: {
              show: false,
            },
            emphasis: {
              label: {
                show: false,
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
            ]
          }
        ]
      };
      const echartsPie =  echarts.init(this.$refs.echartsDemo);
      echartsPie.setOption(option)
    }
  }
}
</script>
<style lang="scss">
.charts {
  width: 100%;
  height: 100%;
}
</style>