javascript - Apache Echarts 和 Vue-ECharts - 饼图动画在加载时不起作用

Question

我有一个工作正常的简单甜甜圈/饼图，但我无法获得默认动画或任何动画工作。

我正在使用 laravel 8、vuejs 2 和 echarts / vue-echarts。

这是我在 /resopurces/js/components/popular-brands-chart.vue 中的 vue 组件

<template>
  <v-chart class="chart" :option="option" autoresize />
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import { TitleComponent, TooltipComponent, LegendComponent } from "echarts/components";
import VChart from "vue-echarts";

use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent]);

export default {
  name: "mostpopularbrands",
  components: {
    VChart,
  },
  data() {
    return {
      option: {
        animation: true,
        backgroundColor: "#fefefe",
        color: ["#AD5BA3", "#4EC0B1", "#F4A620", "#EE5969", "#528DCA"],
        textStyle: {
          fontFamily: "museo-sans",
          fontWeight: "bold",
        },
        label: {
          show: true,
          color: "#fff",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          right: "15%",
          top: "13%",
          data: ["Titleist", "TaylorMade", "Callaway", "Ping", "Nike"],
          icon: "circle",
          padding: [5, 5],
          itemGap: 15,
          textStyle: {
            fontFamily: "museo-sans",
            fontWeight: "normal",
            color: "#4C4C4C",
            fontSize: "15",
          },
        },
        series: [
          {
            name: "Most popular brands",
            type: "pie",
            animationType: "expansion",
            animationDuration: 5000,
            animationDurationUpdate: 500,
            startAngle: 0,
            endAngle: 360,
            radius: [30, 95],
            center: ["25%", "36%"],
            label: {
              formatter: function (d = "{d}") {
                let rounderPercent = Math.round(d.percent);
                return rounderPercent + "%";
              },
              position: "inside",
              show: true,
            },
            data: [
              { value: 170, name: "Titleist" },
              { value: 100, name: "TaylorMade" },
              { value: 75, name: "Callaway" },
              { value: 50, name: "Ping" },
              { value: 37, name: "Nike" },
            ],
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2,
            },
          },
        ],
      },
    };
  },
};
</script>

<style scoped>
.chart {
  margin-top: 2rem;
  height: 300px;
  width: 100%;
}
</style>

在 bootstrap.js文件中，我也添加了它，但很确定它目前没有做任何事情，即使我使用 vue 3 示例导入它也没有任何效果。

/* VueCompositionAPI */
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI) 

从技术上讲，我不应该做任何事情来让它动画，没有控制台错误。这是它应该做什么的参考： https ://echarts.apache.org/examples/en/editor.html?c=pie-doughnut

我实际上可以通过 CDN 和 codepen 在这里工作，为什么它工作，我不知道： https ://codepen.io/marcgaumont/pen/OJWyZwe

这是用于 vue 的包： https ://github.com/ecomfe/vue-echarts

一切正常，但经过 10 多个小时试图让它动画化，尝试了每一个例子。我完全不走运。

有任何想法吗 ？

标签： javascriptlaravelvuejs2echartsapache-echarts