vue中绘制水球图（水波纹增长图，波纹型百分比）

本文链接：https://blog.youkuaiyun.com/u012716788/article/details/120056718

本文介绍了如何在项目中安装并使用Echarts和echarts-liquidfill插件来创建水球图。首先通过npm安装依赖，然后在组件中导入并初始化图表。接着展示了创建一个容器并生成水球图的代码，同时提供了Echarts水球图教程链接。遇到IE浏览器报'对象不支持“ensureState”属性或方法'错误时，可以调整Echarts和echarts-liquidfill的版本为4.9.0和2.0.6或5.2.0和3.0.0来解决问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在项目中安装 echarts 和 echarts-liquidfill 依赖

npm i echarts -s
npm i echarts-liquidfill -s

2.在组件中引入需要的echarts和水球图插件

import echarts from 'echarts'
import 'echarts-liquidfill'

若安装echarts5.0以上版本引入方式如下

import * as echarts from 'echarts';
import 'echarts-liquidfill'

3.创建一个容器安置图形（设置好宽高）

<div style="width: 600px;height:400px;" ref='liquidEchart' ></div>

4.生成图表

initLiquidEchart(){
      setTimeout(() => {
        let myChart = echarts.init(this.$refs['liquidEchart'])
        // 把配置和数据放这里
        myChart.setOption({
          title: {// 标题
            text: '补贴资金剩余',
            textStyle: {// 标题的样式
              color: '#888', // 字体颜色
              fontFamily: 'Microsoft YaHei', // 字体
              fontSize: 24,
              fontWeight: '400',
              align: 'center', // 文字的水平方式
              baseline: 'middle',
              position: 'inside',
              verticalAlign: 'middle'// 文字的垂直方式
            },
            left: 'center', // 定位
            top: '20%'
          },
          series: [{
            type: 'liquidFill',
            radius: '95%',
            waveAnimation: true,
            data: [{
              value: 0.5,
              direction: 'left',
              itemStyle: {
                normal: {
                  color: '#1890ff'
                }
              }
            }],
            outline: {
              // show: true , //是否显示轮廓 布尔值
              borderDistance: 1, // 外部轮廓与图表的距离 数字
              itemStyle: {
                borderColor: '#1890ff', // 边框的颜色
                borderWidth: 3 // 边框的宽度
                // shadowBlur: 5 , //外部轮廓的阴影范围 一旦设置了内外都有阴影
                // shadowColor: '#000' //外部轮廓的阴影颜色
              }
            },
            itemStyle: {
              opacity: 0.9, // 波浪的透明度
              shadowBlur: 0 // 波浪的阴影范围
            },
            backgroundStyle: {
              color: '#fff' // 图表的背景颜色
            },
            label: { // 数据展示样式
              show: true,
              color: '#000',
              insideColor: '#fff',
              fontSize: 24,
              fontWeight: 400,
              align: 'center',
              baseline: 'middle',
              position: 'inside'
            }
          }]
        })
      }, 1000)
    }

实现效果：
在这里插入图片描述

附: Echarts 水球图教程 https://efe.baidu.com/blog/echarts-liquidfill-chart-tutorial/

问题记录：

若报 对象不支持“ensureState”属性或方法 错误（IE浏览器报此错），可切换插件匹配的版本

“echarts”: “^4.9.0”,
“echarts-liquidfill”: “^2.0.6”

或

“echarts”: “^5.2.0”,
“echarts-liquidfill”: “^3.0.0”,

该版本不会报错

安装对应版本插件的命令：npm i echarts@4.9.0 -s 或 npm i echarts-liquidfill@2.0.6 -s