vue项目中写echarts水球图-liquidFill

效果图：

1、安装依赖

npm install  echarts@^4.9.0
npm install echarts-liquidfill@^2.0.2

2、引入echarts

import echarts from 'echarts' // echarts5之前
import * as echarts from 'echarts' // echarts5
import "echarts-liquidfill/src/liquidFill.js"; //水球图

3、添加到全局变量

Vue.prototype.$echarts = echarts // Vue2
app.confing.globalProperties.$echarts = echarts // Vue3

main.js中(vue3.0)

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import * as echarts from 'echarts'
import "echarts-liquidfill/src/liquidFill.js";
const app = createApp(App)
app.config.globalProperties.$echarts = echarts
app.use(store)
  .use(router)
  .use(VueAxios, axios)
  .use(element)
  .use(scrollBoard).use(loading)
  .mount("#app");

5、以上准备就绪以后，下边是渲染水球图的代码部分

pieChart() {
      var myChart = this.$echarts.init(document.getElementById("pieChart"));
      let option = {
        series: [
          {
            name: "title",
            type: "pie",
            hoverAnimation: false,
            legendHoverLink: false,
            radius: ["45%", "55%"],
            center: ["45%", "40%"],
            color: [
              "rgba(0, 150, 254, 1)",
              "rgba(2, 205, 206, 1)",
              "rgba(253, 160, 0, 1)",
              "rgba(191, 40, 18, 1)",
            ],
            label: {
              show: true,
              formatter: (params) => {
                return  params.value + '\n' + params.percent + '%';
              },
            },
            labelLine: {
              show: true,
              length: 30,
              length2: 20,
              lineStyle: {
                type: "dashed",
              },
            },
            itemStyle: {
              borderColor: "rgba(0, 18, 58, 1)",
              borderWidth: 5,
            },
            data: [
              {
                value: 41,
                name: "低级",
                label: {
                  color: "rgba(0, 150, 254, 1)",
                },
              },
              {
                value: 20,
                name: "中级",
                label: {
                  color: "rgba(2, 205, 206, 1)",
                },
              },
            ],
          },
          {
            name: "水球图",
            type: "liquidFill",
            radius: "45%",
            data: [0.5, 0.5], //几个数代表几层波浪
            center: ["45%", "40%"],
            backgroundStyle: {
              color: "RGBA(51, 66, 127, 0)",
            },
            color: [
              {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 1,
                    color: ["rgba(0, 117, 241, 1)"], // 0% 处的颜色
                  },
                  {
                    offset: 0,
                    color: ["rgba(0, 117, 241, 0)"], // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            ],
            label: {
              normal: {
                color: "#27e5f1",
                insideColor: '#27e5f1',
                textStyle: {
                  fontSize: 40,
                  fontWeight: "bold",
                },
              },
            },
            outline: {
              show: false,
              borderDistance: 5,
              itemStyle: {
                borderColor: "#27e5f1",
                borderWidth: 3,
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => myChart.resize(), false);
    }

6、问题
1> echarts-liquidfill 最新版本和 echarts最新版本不兼容。所以我引入echarts的是5.0以下的版本。
2>报错 ：Component series.liquidFill not exists. Load it first
    首先检查echarts 和 liquidFill 安装了没有，如果没有就先安装，如果安装完成以后还会出现以上错误那就重新安装。
    echarts 4以下版本应该使用liquidfill 1+版本，echarts 4+版本对应的是liquidfill 2+版本