Vue+Echarts繪制餅圖的示例詳解

更新時間：2023年03月16日 14:05:13 作者：Saga?Two

這篇文章主要為大家詳細介紹了如何利用Vue和Echarts實現繪制餅圖，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下

1 引入Echarts

1.1 安裝

使用如下命令通過 npm 安裝 ECharts

npm install echarts --save

注：本文安裝Echarts版本為：“echarts”: “5.2.1”

1.2 引入

安裝完成以后，可以將echarts全部引入，這樣一來，我們可以在該頁面使用echarts所有組件；引入代碼如下：

import * as echarts from "echarts";

1.3 基本使用

vue+Echarts基本使用請見：在Vue項目中引入 ECharts

2 基本餅狀圖

餅圖和折線圖、柱狀圖略有不同，不再需要配置坐標軸，而是把數據名稱和值都寫在系列中。只需要一個series屬性即可畫出餅圖，以下是一個最簡單的餅圖的例子。

const option = {
        series: [
          {
            type: "pie", // type設置為餅圖
            data: [
              {
                value: 463,
                name: "江蘇"
              },
              {
                value: 395,
                name: "浙江"
              },
              {
                value: 157,
                name: "山東"
              },
              {
                value: 149,
                name: "廣東"
              },
              {
                value: 147,
                name: "湖南"
              }
            ]
          }
        ]
      };

需要注意的是，這里是 value 不需要是百分比數據，ECharts 會根據所有數據的 value ，按比例分配它們在餅圖中對應的弧度。

圖示：

3 為餅圖添加標題等屬性

3.1 標題圖例

通常我們給餅圖設置標題，可以通過title屬性設置，其中title.text代表圖表標題的文本，可以通過left ,top ,right ,bottom 四個屬性調整標題位置，title.textStyle設置標題文本樣式。

此外我們也可給標題設置圖例：

legend:data對應折線名稱以及數量，位置屬性left ,top ,right ,bottom ；圖例方向orient：默認橫向排列，vertical表示縱向排列。

例子如下：

const option = {
    legend: {
        // 圖例
        data: ["江蘇", "浙江", "山東", "廣東", "湖南"],
        right: "10%",
        top: "30%",
        orient: "vertical"
    },
    title: {
        // 設置餅圖標題，位置設為頂部居中
        text: "國內院士前五省份圖示",
        top: "0%",
        left: "center"
    },
    series: [
        {
            type: "pie",
            data: [
                {
                    value: 463,
                    name: "江蘇"
                },
                {
                    value: 395,
                    name: "浙江"
                },
                {
                    value: 157,
                    name: "山東"
                },
                {
                    value: 149,
                    name: "廣東"
                },
                {
                    value: 147,
                    name: "湖南"
                }
            ]
        }
    ]
};

如圖所示：

3.2 數據展示

餅圖的文本標簽書信默認值與柱狀圖和折線圖不同，柱狀圖和折線圖文本標簽默認不展示，也就是label.show默認為false，但是餅圖文本標簽默認展示，也就是label.show默認為true；餅圖數值默認不會展示在圖上，需要借助label.formatter將數據展示在圖上，示例如下：

const option = {
    legend: {
        // 圖例
        data: ["江蘇", "浙江", "山東", "廣東", "湖南"],
        right: "10%",
        top: "30%",
        orient: "vertical"
    },
    title: {
        // 設置餅圖標題，位置設為頂部居中
        text: "國內院士前五省份圖示",
        top: "0%",
        left: "center"
    },
    series: [
        {
            type: "pie",
            label: {
                show: true,
                formatter: " : {c} (ublnpf9mb%)" // b代表名稱，c代表對應值，d代表百分比
            },
            data: [
                {
                    value: 463,
                    name: "江蘇"
                },
                {
                    value: 395,
                    name: "浙江"
                },
                {
                    value: 157,
                    name: "山東"
                },
                {
                    value: 149,
                    name: "廣東"
                },
                {
                    value: 147,
                    name: "湖南"
                }
            ]
        }
    ]
};

圖示如下：

3.3 樣式設置

樣式設置這塊只對餅圖的半徑進行說明，可以通過 series.radius 設置，可以是諸如 '30%' 這樣相對的百分比字符串，或是 200 這樣的絕對像素數值。當它是百分比字符串時，它是相對于容器寬高中較小的一條邊的。也就是說，如果寬度大于高度，則百分比是相對于高度的，反之則反；當它是數值型時，它表示絕對的像素大小。

示例如下：

const option = {
    legend: {
        // 圖例
        data: ["江蘇", "浙江", "山東", "廣東", "湖南"],
        right: "10%",
        top: "30%",
        orient: "vertical"
    },
    title: {
        // 設置餅圖標題，位置設為頂部居中
        text: "國內院士前五省份圖示",
        top: "0%",
        left: "center"
    },
    series: [
        {
            type: "pie",
            label: {
                show: true,
                formatter: " : {c} (ublnpf9mb%)" // b代表名稱，c代表對應值，d代表百分比
            },
            radius: "30%", //餅圖半徑
            data: [
                {
                    value: 463,
                    name: "江蘇"
                },
                {
                    value: 395,
                    name: "浙江"
                },
                {
                    value: 157,
                    name: "山東"
                },
                {
                    value: 149,
                    name: "廣東"
                },
                {
                    value: 147,
                    name: "湖南"
                }
            ]
        }
    ]
};

圖示如下：

以上示例vue代碼如下：

<template>
  <div class="echart" id="mychart" :style="myChartStyle"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      myChart: {},
      pieData: [
        {
          value: 463,
          name: "江蘇"
        },
        {
          value: 395,
          name: "浙江"
        },
        {
          value: 157,
          name: "山東"
        },
        {
          value: 149,
          name: "廣東"
        },
        {
          value: 147,
          name: "湖南"
        }
      ],
      pieName: [],
      myChartStyle: { float: "left", width: "100%", height: "400px" } //圖表樣式
    };
  },
  mounted() {
    this.initDate(); //數據初始化
    this.initEcharts();
  },
  methods: {
    initDate() {
      for (let i = 0; i < this.pieData.length; i++) {
        // this.xData[i] = i;
        // this.yData =this.xData[i]*this.xData[i];
        this.pieName[i] = this.pieData[i].name;
      }
    },
    initEcharts() {
      // 餅圖
      const option = {
        legend: {
          // 圖例
          data: this.pieName,
          right: "10%",
          top: "30%",
          orient: "vertical"
        },
        title: {
          // 設置餅圖標題，位置設為頂部居中
          text: "國內院士前五省份圖示",
          top: "0%",
          left: "center"
        },
        series: [
          {
            type: "pie",
            label: {
              show: true,
              formatter: " : {c} (ublnpf9mb%)" // b代表名稱，c代表對應值，d代表百分比
            },
            radius: "30%", //餅圖半徑
            data: this.pieData
          }
        ]
      };
      console.log(this.seriesData);
      const optionFree = {
        xAxis: {},
        yAxis: {},
        series: [
          {
            data: this.seriesData,
            type: "line",
            smooth: true
          }
        ]
      };
      this.myChart = echarts.init(document.getElementById("mychart"));
      this.myChart.setOption(option);
      //隨著屏幕大小調節(jié)圖表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    }
  }
};
</script>

4 餅圖擴展

在 ECharts 中，餅圖的半徑radius除了3.3節(jié)提到的，可以是一個數值或者字符串之外，還可以是一個包含兩個元素的數組，每個元素可以為數值或字符串。當它是一個數組時，它的前一項表示內半徑，后一項表示外半徑，這樣就形成了一個圓環(huán)圖。

從這個角度上來說，可以認為餅圖是一個內半徑為 0 的圓環(huán)圖，也就是說，餅圖是圓環(huán)圖的特例。

例子：

const option = {
    legend: {
        // 圖例
        data: ["江蘇", "浙江", "山東", "廣東", "湖南"],
        right: "10%",
        top: "30%",
        orient: "vertical"
    },
    title: {
        // 設置餅圖標題，位置設為頂部居中
        text: "國內院士前五省份圖示",
        top: "0%",
        left: "center"
    },
    series: [
        {
            type: "pie",
            label: {
                show: true,
                formatter: " : {c} (ublnpf9mb%)" // b代表名稱，c代表對應值，d代表百分比
            },
            radius: ["40%", "70%"], //圓環(huán)內半徑40%，外半徑70%
            data: [
                {
                    value: 463,
                    name: "江蘇"
                },
                {
                    value: 395,
                    name: "浙江"
                },
                {
                    value: 157,
                    name: "山東"
                },
                {
                    value: 149,
                    name: "廣東"
                },
                {
                    value: 147,
                    name: "湖南"
                }
            ]
        }
    ]
};

如圖所示：