Echarts饼图

Echarts饼图

<template>
  <div :id="id"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "bt",
  props: {
    id: String,
    title:String,
    seriesData:Array
  },
  data() {
    return {};
  },
  mounted() {
    this.initEchart(this.id);
  },
  methods: {
    initEchart(id) {
      var chartDom = document.getElementById(id);
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
          text: this.title, //主标题文本，'\n'指定换行
          x: "center", //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
          y: "top", //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontSize: 14,
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "0%",
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
        },
        grid: {
          top: "5%",
          left: "3%",
          right: "8%",
          bottom: "10%",
          containLabel: true,
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["36%", "60%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.seriesData,
          },
        ],
      };

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