饼图

基础饼图

饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例

import * as echarts from "echarts";
export default {
  install: (app: any) => {
    app.config.globalProperties.$pai = (id: any) => {
      var chartDom = document.getElementById(id)!;
      if (chartDom == null) {
        return;
      }
      echarts.dispose(chartDom);
      var myChart = echarts.init(chartDom, "", { width: 500, height: 300 });
      window.addEventListener("resize", () => {
        myChart.resize({
          width: window.innerWidth / 2,
          height: window.innerHeight / 2,
        });
      });
      var option = {
        series: [
          {
            type: "pie",
            radius: "50%",
            label: {
              show: true, // 是否显示文本
            },
            data: [
              {
                value: 335,
                name: "直接访问",
              },
              {
                value: 234,
                name: "联盟广告",
              },
              {
                value: 1548,
                name: "搜索引擎",
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    };
  },
};

圆环图

圆环图同样可以用来表示数据占总体的比例，相比于饼图，它中间空余的部分可以用来显示一些额外的文字等信息，因而也是一种常用的图表类型

import * as echarts from "echarts";
export default {
  install: (app: any) => {
    app.config.globalProperties.$pai = (id: any) => {
      var chartDom = document.getElementById(id)!;
      if (chartDom == null) {
        return;
      }
      echarts.dispose(chartDom);
      var myChart = echarts.init(chartDom, "", { width: 500, height: 300 });
      var option = {
        title: {
          text: "圆环图的例子",
          left: "center",
          top: "center",
        },
        legend: {
          orient: "vertical", // 图例的方向 (水平和竖直) 可选，horizontal
          left: 0,
          top: 0,
          data: ["A", "B", "C"],
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"], // 把饼图变成圆环图
            avoidLabelOverlap: false, // 防止标签堆叠
            label: {
              show: true,
            },
            labelLine: {
              show: true, // 是否显示视觉引导线
            },
            data: [
              {
                value: 335,
                name: "A",
              },
              {
                value: 234,
                name: "B",
              },
              {
                value: 1548,
                name: "C",
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    };
  },
};

南丁格尔图(玫瑰图)

南丁格尔图又称玫瑰图，通常用弧度相同但半径不同的扇形表示各个类目

import * as echarts from "echarts";
export default {
  install: (app: any) => {
    app.config.globalProperties.$pai = (id: any) => {
      var chartDom = document.getElementById(id)!;
      if (chartDom == null) {
        return;
      }
      echarts.dispose(chartDom);
      var myChart = echarts.init(chartDom, "", { width: 500, height: 300 });
      var option = {
        toolbox: {
          //内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
          show: true,
          itemGap: 20, // 工具之间的间距
          feature: {
            saveAsImage: { show: true }, // 图片导出
            dataView: { show: true, lang: ["数据视图", "关闭", "刷新"] }, // 数据视图
            restore: { show: true }, // 刷新
            // 其他请参考官方文档
          },
        },
        series: [
          {
            type: "pie",
            roseType: "area", // 变成玫瑰图，可选radius,area
            itemStyle: {
              borderRadius: 10,
            },
            // radius: [50, 150],  // 圆环玫瑰图
            radius: "50%", // 非圆环玫瑰图
            data: [
              {
                value: 100,
                name: "A",
              },
              {
                value: 200,
                name: "B",
              },
              {
                value: 300,
                name: "C",
              },
              {
                value: 400,
                name: "D",
              },
              {
                value: 500,
                name: "E",
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    };
  },
};

提示

toolbox 也是全局属性，在任意图表中都可使用