vue3中按需使用echarts5贴花图案和跨系列的形变动画

先做一下说明，是在vue3中采用按需引入的方式，对应版本如下：

"@vue/cli":"4.5.15",
"vue": "^3.2.21",
"echarts": "^5.2.2"

按照官方对贴花图案和跨系列的形变动画的说明：

Apache ECharts 5 新增支持贴花纹理，作为颜色的辅助表达，进一步用以区分数据。在 aria.enabled 为 true的前提下，将 aria.decal.show 设为 true 即可采用默认的贴花样式。

在设置universalTransition:true开启全局过渡动画后，从饼图切换成柱状图，或者从柱状图切换成散点图，甚至旭日图和矩形树图这类复杂的图表之间，都可以通过形变的方式自然的进行动画过渡。

随后点击案例的编辑去查看代码的设置，也点击了按需引入方式去显示代码，官方的有效果，但是运用到自己的项目中并没有贴花图案和跨系列形变动画效果，仔细对比了案例代码甚至直接复制案例的完整代码，vue中采用ref去获取对应需要渲染的dom，最后还是不行，折腾了一会儿后想了下是否缺少引入的组件呢？结果还真是

1.使用贴花图案

import { AriaComponent } from "echarts/components";
// 注册对应组件
echarts.use([AriaComponent]);
//在配置项中添加代码
options={
  aria:{
      enabled: true,
      decal: {
         show: true,
       },
    }
}

2.跨系列的形变动画

import { TransformComponent } from "echarts/components";
import { UniversalTransition } from "echarts/features";
// 注册对应组件
echarts.use([AriaComponent,UniversalTransition]);
//在配置项中添加代码，注意另一个图表配置项series里的id也要相同
options={
  series: [
        {
          type: "bar",
          // 通过 id 关联需要过渡动画的系列
          id: "Score",
          // 每个数据都是用不同的颜色
          colorBy: "data",
          universalTransition: true,
          animationDurationUpdate: 1000,
        },
     ]
}

完整代码及示例：

• 新建一个Echarts.js文件并导出，代码如下

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart, PieChart } from "echarts/charts";
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  LegendComponent,
  TransformComponent,
  AriaComponent,
} from "echarts/components";
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent,
  AriaComponent,
  BarChart,
  PieChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
]);
export default echarts;

• 在.vue文件中引入此js文件

<template>
  <div class="">
    <div id="charts_box" ref="myChart">div>
  div>
template>
<script>
import { ref, onMounted } from "vue";
import echarts from "../../components/Echats";//更改为自己项目的路径
export default {
  name: "Charts",
  setup() {
    const myChart = ref(""); //获取需要图表渲染的dom
    let chartsInit; //创建图表实例
    //饼图和柱状图的共用数据
    const dataset = {
      dimensions: ["name", "score"],
      source: [
        ["html", 314],
        ["css", 351],
        ["nodejs", 287],
        ["vue", 219],
        ["react", 253],
        ["ECMAScript6", 165],
        ["deno", 318]
      ]
    };
    //饼图配置项
    const pieOption = {
      dataset: [dataset],
      aria: {
        enabled: true,
        decal: {
          show: true,
        },
      },
      series: [
        {
          type: "pie",
          // 通过 id 关联需要过渡动画的系列
          id: "Score",
          radius: [0, "50%"],
          universalTransition: true,
          animationDurationUpdate: 1000,
        },
      ],
    };
    //柱状图配置项
    const barOption = {
      dataset: [dataset],
      xAxis: {
        type: "category",
      },
      yAxis: {},
      aria: {
        enabled: true,
        decal: {
          show: true,
        },
      },
      series: [
        {
          type: "bar",
          // 通过 id 关联需要过渡动画的系列
          id: "Score",
          // 每个数据都是用不同的颜色
          colorBy: "data",
          encode: { x: "name", y: "score" },
          universalTransition: true,
          animationDurationUpdate: 1000,
        },
      ],
    };
    let option = barOption;
    onMounted(() => {
      chartsInit = echarts.init(myChart.value);
      setInterval(() => {
        option = option === pieOption ? barOption : pieOption;
        chartsInit.setOption(option, true);
      }, 2000);
    });
    return {
      myChart,
    };
  },
};
script>
<style lang="scss" scoped>
#charts_box {
  width: 100%;
  height: 400px;
}
style>