Vue echarts 水球图

水球图（Liquid Fill Gauge）是ECharts中的一种可视化图表类型，它可以用来展示一个变量相对于另一个变量的比例关系。本文将介绍水球图的基本概念、使用方法以及应用场景。

一、水球图的基本概念

水球图是一种通过填充不规则形状的容器（通常是圆形或类似圆形的形状）来展示数据的图表类型。水球图的填充程度表示了一个变量相对于另一个变量的大小比例关系，通常用于展示百分比。

二、使用方法

在Vue中，可以通过以下步骤创建水球图：

1. 引入ECharts库和主题文件

import * as echarts from 'echarts'

     2. 创建一个DOM元素作为容器

    <div ref="chartBox" class="chart-box" style="height: 180px" />

    3. 初始化ECharts实例

    const myChart = echarts.init(this.$refs.chartBox)

    4. 配置水球图的数据和样式

    const option = {

    series: [

      {

          type: 'liquidFill',

          data: [0.4], // 一个数据对应一条波纹 大小队形波纹的高度

          radius: '70%', // 图形的大小

          center: ['12%', '50%'], // 图形的位置

          label: {

            normal: {

              formatter: '42%',

              textStyle: {

                fontSize: 20, // 百分比字体的大小

                rich: {

                  a: {

                    color: 'black',

                    fontSize: 0,

                    lineHeight: 50

                  },

                  b: {

                    color: '#ccc',

                    fontSize: 24,

                    lineHeight: 50

                  },

                  c: {

                    color: '#FFAA00',

                    fontSize: 36,

                    lineHeight: 50

                  }

                }

              }

            }

          },

          outline: {

            borderDistance: 8,

            itemStyle: {

              borderWidth: 1, //  外圈的边框大小

              borderColor: 'red', // 外圈的边框颜色

              shadowBlur: 20,

              shadowColor: 'rgba(0, 0, 0, 0.25)'

            }

          },

          backgroundStyle: {

            color: '#fee5e0', // 波纹没有覆盖的部分颜色

            borderColor: '#fff',

            borderWidth: 0, // 内圈的边框

            shadowColor: 'rgba(0, 0, 0, 0.3)',

            shadowBlur: 10

          },

          itemStyle: {

            color: '#df6040', // 波纹的颜色

            shadowBlur: 1,

            shadowColor: 'rgba(255, 170, 0, 0.4)'

          }

        },

    5. 将配置项设置到ECharts实例中并绘制图表

     myChart.setOption(option)

三、应用场景

水球图适用于需要展示百分比或比例关系的场景，例如：

1. 展示销售额占比情况；

2. 展示进度完成情况；

3. 展示用户留存率等指标。

总之，水球图是一种简单易懂的数据可视化工具，可以帮助人们更好地理解数据信息。