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: "{b} : {c} ({d}%)" // 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: "{b} : {c} ({d}%)" // 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: "{b} : {c} ({d}%)" // 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);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    }
  }
};
</script>

4 饼图扩展

在 ECharts 中，饼图的半径radius除了3.3节提到的，可以是一个数值或者字符串之外，还可以是一个包含两个元素的数组，每个元素可以为数值或字符串。当它是一个数组时，它的前一项表示内半径，后一项表示外半径，这样就形成了一个圆环图。

从这个角度上来说，可以认为饼图是一个内半径为 0 的圆环图，也就是说，饼图是圆环图的特例。

例子：

const option = {
    legend: {
        // 图例
        data: ["江苏", "浙江", "山东", "广东", "湖南"],
        right: "10%",
        top: "30%",
        orient: "vertical"
    },
    title: {
        // 设置饼图标题，位置设为顶部居中
        text: "国内院士前五省份图示",
        top: "0%",
        left: "center"
    },
    series: [
        {
            type: "pie",
            label: {
                show: true,
                formatter: "{b} : {c} ({d}%)" // b代表名称，c代表对应值，d代表百分比
            },
            radius: ["40%", "70%"], //圆环内半径40%，外半径70%
            data: [
                {
                    value: 463,
                    name: "江苏"
                },
                {
                    value: 395,
                    name: "浙江"
                },
                {
                    value: 157,
                    name: "山东"
                },
                {
                    value: 149,
                    name: "广东"
                },
                {
                    value: 147,
                    name: "湖南"
                }
            ]
        }
    ]
};

如图所示：

5 总结

饼图在我们业务场景中引用价位哦广泛，以上介绍的属性基本能解决大多数业务场景的饼图展示，本篇介绍到此位置，若要展示一些更为复杂的饼图，欢迎留言探讨。