echarts做水滴图；解决[echarts] unknown series liquidfill 水球加载问题

一份echarts示例代码，包含水滴图

直接在echarts里使用水滴图liquidfill会报错[echarts] unknown series liquidfill
解决方案：需要下载echarts-liquidfill依赖
echarts-liquidfill@2兼容echarts@4;
echarts-liquidfill@3兼容echarts@5;
例如：我的版本如下：

    "echarts": "^5.2.2","echarts-liquidfill": "^3.1.0",

1.安装依赖

npm install echarts-liquidfill@3.1.0 -S

2.在对用使用水滴图页面引入js

import "echarts-liquidfill/src/liquidFill.js"; // 在需要水滴图的页面js引入

3.使用水滴图配置，代码可以直接复制

<template><div class="dlsFirst"><div style="padding: 50px;">水滴图</div><div class="one_box" id="one_box" ref="one_box"></div></div>
</template><script>
import "echarts-liquidfill/src/liquidFill.js"; // 在需要水滴图的页面js引入
export default {data() {return {chartHeight1: "300px",option2: {}};},mounted() {const myChart = this.$echarts.init(this.$refs.one_box);//调用resize方法给图表设置动态宽高myChart.resize({height: this.chartHeight1});this.option2 = {backgroundColor: "#485C6D", //背景色series: [{type: "liquidFill", //水位图radius: "80%", //显示比例center: ["50%", "50%"], //中心点amplitude: 20, //水波振幅data: [0.5, 0.5, 0.5], // data个数代表波浪数color: ["#23cc72"], //波浪颜色backgroundStyle: {borderWidth: 6, //外边框borderColor: "#23cc72", //边框颜色color: "#485C6D" //边框内部填充部分颜色},label: {//标签设置position: ["50%", "30%"],formatter: "50%", //显示文本,fontSize: "52px", //文本字号,color: "#fff"},outline: {show: false //最外层边框显示控制}}]};myChart.setOption(this.option2);},
};
</script><style lang="less" scoped></style>