Vue 3.0 + ECharts 实现电影票房自定义环形图教程

上期视频我们实现了票房的柱状图展示，那么这期视频我们来看一个环形图的配置。先看一下最终效果，环形图的各个部分表示的是某个电影的票房占比，占比越高的颜色越浅，占比越低的颜色越深，每部分还会有指示线，配有文本指明这块区域是哪部电影，占比是多少。鼠标移到某区域的时候，会显示提示框，上面有电影名和具体的数值。

在大体了解做成什么样之后，我们来看一下组件的主要代码。

创建组件

环形图组件的代码位于 src/components/DoughnutChart.vue 中，它的代码跟柱状图的几乎一样：

• 根据传递进来的票房数据生成图表数据。
• 这里要注意的是，环形图需要的数据只有一个维度，在 populateMovieData() 函数中只返回了一个数组，数组中的对象有 name 和 value 属性。
• 最后使用封装的 echarts 基础组件进行渲染。

因为和柱状图的代码极其相似，那么我们是否可以把它抽离成通用的呢？答案是肯定的，可以参照之前的 Vue 3 Todo App 教程把它抽离成 composables，这里就不演示了。

<template>
  <Chart :options="options" />
</template>

<script setup>
import Chart from "./Chart.vue";
import doughnutChartCreator from "../charts/doughnutChart.js";
import { computed, toRefs } from "vue";

const props = defineProps({
  boxOfficeData: Array,
});

const { boxOfficeData } = toRefs(props);

const options = computed(() => {
  const data = populateMovieData(boxOfficeData.value);
  return doughnutChartCreator(data);
});

function populateMovieData(rawData) {
  let data = [];
  rawData.forEach((movie) => {
    data.push({
      name: movie?.name,
      value: movie?.boxOffice,
    });
  });
  return data;
}
</script>

编写配置

我们接下来看一下 doughnutChartCreator() 中的配置项，代码位于 src/charts/doughnutChart.js 中。它导出了一个接收 data 作为参数的函数，并返回图表的配置项，我们来看一下它们的含义。

• title 部分和柱状图的一样，设置了标题和字体。
• tooltip 是设置鼠标移到环形图某个区域时，弹出的提示框。
  • trigger 设置为 item 意思为触发提示框的是环形图的各块区域。
  • 后面的属性分别设置了内间距、边框、阴影和文本样式。内间距的设置方法、顺序和 css 中的一样，只是用数组表示，extraCssText 则是设置自定义的 css 样式。
• color 设置环形图所用到的颜色，通过 hsl 颜色表示法表示，只需要调整饱和度和亮度部分，就能表示浅红到深红的颜色。
• series 用来配置环形本身。
  • 类型为 pie 饼图，然后通过 radis 设置内、外半径来把它变成环形图。
  • 起始角度设置为 160 度，这样各个电影在图表中的分布比较平均。再设置距离上方 60 个距离单位。
  • label 用来设置环形图各个部分的文本说明，给它设置为显示在外侧，与指示线对齐，调整边界的距离，颜色和字体。
    • label 中的文本使用 formatter 和 rich 来对某部分文本单独设置样式。
    • formatter 中的 {b}、{d} 是占位符，分别表示数据名，也就是电影名，和百分比。 {d}% 前边的 d | 相当于是 css 中的 class，可以在 rich 中引用。
    • rich 里通过引用 d 来设置百分比的样式，给文字添加背景、圆角和间距，这样文字就会显示为 tag 样式，然后设置字体颜色和加粗。
  • emphasis 设置鼠标移到环形区域后的高亮样式，给 label 设置加粗并增加字体尺寸，这样鼠标移上去，label 就有了放大的效果。
  • labelLine 用于设置指示线的样式。
    • length 设置起始段长度，length2 设置弯折后的长度。
    • 再把它设置为平滑、虚线。
  • 最后，把传递进来的 data 设置到 series 中。

export default (data) => ({
  title: {
    text: "电影当日综合票房占比",
    subtext: "数据来自猫眼电影（非实时）",
    textStyle: {
      fontSize: 24,
      color: "hsl(0deg, 100%, 100%)",
    },
    subtextStyle: {
      fontSize: 14,
      color: "hsl(0deg, 20%, 75%)",
    },
  },
  tooltip: {
    trigger: "item",
    padding: [14, 24],
    borderWidth: 0,
    extraCssText: "box-shadow: 0 0 24px hsl(0, 100%, 50%, 0.2);",
    textStyle: {
      fontWeight: "bold",
      color: "hsl(0deg, 0%, 40%)",
    },
  },
  color: [
    "hsl(0deg, 100%, 70%)",
    "hsl(0deg, 90%, 60%)",
    "hsl(0deg, 80%, 50%)",
    "hsl(0deg, 70%, 45%)",
    "hsl(0deg, 60%, 40%)",
    "hsl(0deg, 50%, 35%)",
    "hsl(0deg, 40%, 30%)",
  ],
  series: [
    {
      type: "pie",
      radius: ["50%", "70%"],
      startAngle: 160,
      top: 60,
      label: {
        show: true,
        position: "outer",
        alignTo: "labelLine",
        edgeDistance: "3%",
        distanceToLabelLine: 20,
        color: "hsl(0deg, 100%, 98%)",
        fontSize: 14,
        fontWeight: "bold",
        formatter: "{b} {d|{d}%}",
        rich: {
          d: {
            backgroundColor: "hsl(0deg, 100%, 70%)",
            borderRadius: 4,
            padding: [4, 8],
            color: "white",
            fontWeight: "bold",
          },
        },
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 18,
          fontWeight: "bold",
        },
      },
      labelLine: {
        length: 30,
        length2: "20%",
        smooth: true,
        lineStyle: {
          type: "dashed",
        },
      },
      data: data,
    },
  ],
  backgroundColor: "transparent",
});

预览效果

我们在 App.vue 的 template 中加载 DoughnutChart 组件：

<template>
  <div class="wrapper">
    <BarChart :boxOfficeData="boxOfficeData" class="chart" />
    <DoughnutChart :boxOfficeData="boxOfficeData" class="chart" />
  </div>
</template>

启动一下服务，就可以看到环形图的实际效果了。 好了，这个就是 Vue + Echarts 实现电影票房环形图的教程，你学会了吗？如果有帮助，请三连，想更好的学前端，请关注峰华前端工程师，感谢观看！