Echarts 水滴图

echarts 插件,官方地址:https://echarts.apache.org/zh/download-extension.html

<template>
  <div class="LiquidFill">
    <div class="styles" @click="HandleClick()">
      <el-button>simple</el-button>
      <el-button>Multiple Waves</el-button>
      <el-button>Color and Opacity</el-button>
      <el-button>Color and Opacity 2</el-button>
      <el-button>Static Waves</el-button>
      <el-button>Still Water</el-button>
      <el-button>Change A Single Wave</el-button>
      <el-button>Background Style</el-button>
      <el-button>Outline Style</el-button>
      <el-button>Shape</el-button>
      <el-button>Background Style</el-button>
    </div>
    <!-- Component content -->
    <div class="liquid" ref="liquid"></div>

    <div>
      <a href="https://github.com/ecomfe/echarts-liquidfill?tab=readme-ov-file">文档</a>
    </div>
  </div>
</template>

import * as echarts from "echarts";
import "echarts-liquidfill";
export default {
  name: "LiquidFill",
  mounted() {
    this.initChart();
  },
  data() {
    return {
      liquid:undefined
    };
  },
  methods: {
    initChart() {
      this.liquid = echarts.init(this.$refs.liquid);
      const options_1 = {
        series: [
          {
            type: "liquidFill",
            data: [0.6],
          },
        ],
      };
      this.liquid.setOption(options_1);
    },
    HandleClick() {
      const button = event.target.closest(".el-button");
      if (!button) return;
      const text = button.innerText;
      this.liquid.clear();
      switch(text) {
        case 'simple':
          this.liquid.setOption({
            series: [{ type: "liquidFill", data: [0.6] }]
          });
          break;
        case 'Multiple Waves':
          this.liquid.setOption({
            series: [{ type: "liquidFill", data: [0.6, 0.5, 0.4, 0.3] }]
          });
          break;
        case 'Color and Opacity':
          this.liquid.setOption({
            series: [{
              type: "liquidFill",
              data: [0.6],
              color: ['#294D99', '#156ACF', '#1598ED', '#45BDFF'],
              itemStyle: { opacity: 0.6 }
            }]
          });
          break;
        case 'Color and Opacity 2':
          this.liquid.setOption({
            series: [{
              type: "liquidFill",
              data: [0.6],
              color: ['red', 'green', 'blue'],
              itemStyle: { opacity: 0.3 }
            }]
          });
          break;
        case 'Static Waves':
          this.liquid.setOption({
            series: [{
              type: "liquidFill",
              data: [0.6],
              waveAnimation: false
            }]
          });
          break;
        case 'Still Water':
          this.liquid.setOption({
            series: [{
              type: "liquidFill",
              data: [0.6],
              amplitude: 0
            }]
          });
          break;
        case 'Change A Single Wave':
          this.liquid.setOption({
            series: [{
              type: "liquidFill",
              data: [0.6, {value: 0.5, direction: 'left'}]
            }]
          });
          break;
        case 'Background Style':
          this.liquid.setOption({
            series: [{
              type: "liquidFill",
              data: [0.6],
              backgroundStyle: { color: 'yellow' }
            }]
          });
          break;
        case 'Outline Style':
          this.liquid.setOption({
            series: [{
              type: "liquidFill",
              data: [0.6],
              outline: { show: false }
            }]
          });
          break;
        case 'Shape':
          this.liquid.setOption({
            series: [{
              type: "liquidFill",
              data: [0.6],
              shape: 'diamond'
            }]
          });
          break;
        default:
          this.liquid.setOption({
            series: [{ type: "liquidFill", data: [0.6] }]
          });
      }

    },
  },
};