echarts——圆环饼图

需求

• 需求：圆环饼图
  • 1、每个圆环分为左右两部分，分别为每个商品的库存和销量，销量设置为渐变色
  • 2、在圆环中心显示该商品名字和销量，设置不同的颜色
  • 3、每次展示5个产品的圆环图，定时切换展示下一页商品，这里就不写了
  • 4、随着屏幕的变化，适配标题大小和圆环的半径以及内部标签文字的大小

<template>
  <div class="w100 h100">
    <div ref="looppie" class="w100 h100"></div>
  </div>
</template>

<script>
import { ququ } from "../../public/static/theme/ququ";
export default {
  data() {
    return {
      size: null, //基准字体大小——控制标题和图例的大小
      looppieChart: null,
      looppieData: [
        {
          name: "服装",
          stock: 100,
          sales: 200,
        },
        {
          name: "水果",
          stock: 140,
          sales: 210,
        },
        {
          name: "家居",
          stock: 50,
          sales: 120,
        },
        {
          name: "奶粉",
          stock: 170,
          sales: 200,
        },
        {
          name: "奶瓶",
          stock: 70,
          sales: 260,
        },
      ],
      index: 0, // 当前一级分类的索引
    };
  },
  mounted() {
    /**
     * 需求：圆环饼图
     * 1、每个圆环分为左右两部分，分别为每个商品的库存和销量，销量设置为渐变色
     * 2、在圆环中心显示该商品名字和销量，设置不同的颜色
     * 3、每次展示5个产品的圆环图，定时切换展示下一页商品，这里就不写了
     * 4、随着屏幕的变化，适配标题大小和圆环的半径以及内部标签文字的大小
     */
    this.init();
    this.getData();
    // 监听屏幕大小变化
    window.addEventListener("resize", this.screenResize);
    // 一进来主动调取屏幕适配
    this.screenResize();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.screenResize);
  },
  methods: {
    // 初始化图表
    init() {
      this.$echarts.registerTheme("ququ", ququ);
      this.looppieChart = this.$echarts.init(this.$refs.looppie, "ququ");

      let initOption = {
        // 标题
        title: {
          text: "▍五个圆环饼图", // ▍ 任意打一个字，调出搜狗输入法卡片，右键单击——表情符号——符号大全
          left: 40,
          top: 40,
          textStyle: {
            color: "#fff",
          },
        },
      };
      this.looppieChart.setOption(initOption);
    },

    // 获取并处理数据，然后渲染图表
    getData() {
      // 五个饼图的圆心位置
      let positionArr = [
        ["18%", "40%"],
        ["50%", "40%"],
        ["82%", "40%"],
        ["34%", "75%"],
        ["66%", "75%"],
      ];
      // 五个饼图的渐变色起始颜色
      let colorArr = [
        ["#4ff778", "#0ba82c"],
        ["#e5dd45", "#e8b11c"],
        ["#e8821c", "#e55445"],
        ["#5052ee", "#ab6ee5"],
        ["#23e5e5", "#2e72bf"],
      ];
      // 因为有5个饼图，所以series配置项数组有5项数据分别代表每个饼图的数据
      let seriesArr = this.looppieData.map((item, index) => {
        return {
          type: "pie",
          // radius: [115, 100], // 圆环饼图内外直径的大小
          center: positionArr[index], // 饼图的位置——正中心
          // 圆环中间显示的文字标签
          label: {
            show: true, // 显示饼图每块区域的名称
            position: "center", // 标签文字显示在圆环中间
            color: colorArr[index][0], // 每个饼图的标签文字颜色
          },
          labelLine: {
            show: false, // 隐藏名字和图之间默认的一条线
          },
          name: item.name,
          data: [
            {
              name: item.name + "\n" + item.sales, //lable显示的文字内容
              value: item.sales,
              itemStyle: {
                //该区域对应渐变色
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  { offset: 0, color: colorArr[index][0] },
                  { offset: 1, color: colorArr[index][1] },
                ]),
              },
            },
            {
              // name: "库存",
              value: item.stock,
              itemStyle: {
                color: "#666", //该区域对应颜色
              },
            },
          ],
        };
      });
      let dataOption = {
        series: seriesArr,
      };
      // 生成图表
      this.looppieChart.setOption(dataOption);
    },
    // 监听屏幕变化——标题大小，圆环半径和标签文字大小
    screenResize() {
      this.$nextTick(() => {
        // 获取图表区域的宽度，作为基准值来设置其他需要动态改变的尺寸
        let width = this.$refs.looppie.offsetWidth;
        this.size = (width / 100) * 3.6; // 定义一个基准尺寸

        let screenOption = {
          title: {
            textStyle: {
              fontSize: this.size,
            },
          },
          // 动态设置圆环的大小和标签文字大小,有五个饼图，所以series数组就有5项
          series: [
            {
              type: "pie", //设置类型是为了第一次加载先执行这个方法
              radius: [this.size * 3, this.size * 2.5],
              label: {
                fontSize: this.size / 1.5,
              },
            },
            {
              type: "pie",
              radius: [this.size * 3, this.size * 2.5],
              label: {
                fontSize: this.size / 1.5,
              },
            },
            {
              type: "pie",
              radius: [this.size * 3, this.size * 2.5],
              label: {
                fontSize: this.size / 1.5,
              },
            },
            {
              type: "pie",
              radius: [this.size * 3, this.size * 2.5],
              label: {
                fontSize: this.size / 1.5,
              },
            },
            {
              type: "pie",
              radius: [this.size * 3, this.size * 2.5],
              label: {
                fontSize: this.size / 1.5,
              },
            },
          ],
        };
        this.looppieChart.setOption(screenOption);
        // 更新图表
        this.looppieChart.resize();
      });
    },
  },
};
</script>