echarts 水滴形图表

Echarts 水滴图也是一种数据可视化图表，通常用来表示一些具有特定含义的数据，比如温度、湿度等等。下面是一个简单的水滴图表示例，你可以根据自己的需求进行修改和适配。

// 引入echarts
import echarts from 'echarts'

// 获取dom元素
const chartDom = document.getElementById('chart')

// 初始化echarts实例
const chart = echarts.init(chartDom)

// 指定图表的配置项和数据
const option = {
  series: [
    {
      type: 'liquidFill',
      data: [0.7, 0.5, 0.3],
      color: ['#57D9A3', '#FEE46B', '#E95C4F'],
      radius: '80%',
      itemStyle: {
        opacity: 0.8,
        shadowBlur: 5,
        shadowColor: '#000'
      },
      label: {
        normal: {
          textStyle: {
            fontSize: 20
          }
        }
      }
    }
  ]
}

// 使用刚指定的配置项和数据显示图表
chart.setOption(option)

在上面的代码中，我们引入了 echarts 库，获取了一个 DOM 元素并初始化了 echarts 实例。接着，我们指定了图表的配置项和数据，包括了水滴图的类型、数据、颜色、半径、样式等等。最后，使用 `setOption` 方法将配置项和数据渲染到图表中。

需要注意的是，上面的代码中的 `data` 数组包含了三个数字，分别表示了三个水滴的占比。你可以根据自己的需求修改这个数组并适配其他的配置项，来实现不同样式和功能的水滴图表。