Echarts系列——饼图

<template>
  <div id="chartLine" class="chart"></div>
</template>

<script>
/*
基础折线图，需要dataset：source、dimensions
*/
export default {
  props: {
    config: {
      type: Object,
      default() {
        return {
          title: "标题",
          xField: "",
          yField: "",
          seriesField: "",
        };
      },
    },
  },
  data() {
    return {
      chartObj: null,
      dataset: null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.chartObj = this.echarts.init(this.$el, "macarons");
      this.chartObj.on("click", "series.pie", (params) => {
        this.goDetail(params.data);
      });
    },
    goDetail(query) {
      console.log(query);
      this.$router.push({
        name: "product-detail",
        query: query,
      });
    },
    loadingMethod() {
      this.chartObj.showLoading("default", {
        text: "loading",
        color: "#2d8cf0",
        textColor: "#000",
        maskColor: "rgba(255, 255, 255, 0.8)",
        zlevel: 0,
      });
    },
    noDataMethod() {
      this.chartObj.clear();
      this.chartObj.showLoading("default", {
        text: "暂无数据",
        color: "#ffffff",
        textColor: "#8a8e91",
        maskColor: "rgba(255, 255, 255, 0.8)",
      });
    },
    getData(url, params) {
      this.loadingMethod();
      this.postJson(url, params).then((data) => {
        if (data.result) {
          this.chartObj.hideLoading();
          this.dataset = data.result;
          this.draw();
        } else {
          this.noDataMethod();
        }
      });
    },
    draw() {
      let option = {
        title: {
          text: this.config.title,
          textStyle: {
            fontSize: 16,
            fontWeight: "500",
            color: "#000000",
          },
        },
        tooltip: {
          trigger: "item",
        },
        dataset: {
          source: this.dataset,
        },
        legend: {
          orient: "vertical",
          left: "left",
          top: 30,
        },
        series: [
          {
            type: "pie",
            emphasis: { focus: "data" },
            radius: ["30%", "50%"],
            labelLine: {
              show: false,
            },
            label: {
              position: "center",
              formatter: `{@[0]}\n\r{@[2]}`,
            },
            encode: {
              itemName: 0,
              value: 1,
              tooltip: [0, 1],
            },
          },
        ],
      };
      this.chartObj.setOption(option);
    },
  },
};
</script>

<style lang='less' scope>
.chart {
  width: 100%;
  height: 400px;
}
</style>