echarts5.2.2实现 水球图表

• 需求背景
• 解决思路
• 解决效果
• index.vue

需求背景

需要做一个水球echarts图表效果，却发现echarts5以上版本已移除liquidFill类型

echarts 图表集链接

解决思路

引入 echarts-liquidfill^3.1.0

解决效果

index.vue

<!--/**
 * @author: liuk
 * @date: 2024-10-24
 * @describe: 水情水球图表
 */-->

<template>
  <div ref="chatDom" class="waterConditionLiquiChartChart"></div>
</template>

<script lang="ts" setup>
import {ref, onMounted, watch, nextTick} from "vue"
import * as echarts from 'echarts'
import "echarts-liquidfill"
import {formatToFixed, getEquiUnit} from "@/utils/dictionary";

// Props
const props = defineProps(['data'])

let myChart = null // Vue3 使用 proxy 对象代理，而 echarts 则使用了大量的全等（===）, 对比失败从而导致了bug。
const chatDom = ref(null)

watch(() => props.data, (data) => {
  nextTick(() => {
    if (!myChart) return
    drawChart()
    const option = myChart.getOption()
    myChart.clear()
    myChart.setOption(renderFn(option, data))
  })
}, {immediate: true})

onMounted(() => {
  drawChart()
  window.addEventListener('resize', () => {
    drawChart()
    const option = myChart.getOption()
    myChart.clear()
    myChart.setOption(renderFn(option, props.data,))
  });
})

const renderFn = (option, data) => {
  // option.series[0].data[0].value = data.num || 0
  // option.series[0].max = data.total || 0
  return option
}

const drawChart = () => {
  let chartDom = chatDom.value
  if (chartDom == null) {
    return
  }
  echarts.dispose(chartDom)
  myChart = echarts.init(chartDom)
  const option = {
    series: [
      {
        type: 'liquidFill',
        phase: 0.1,
        amplitude: 10,
        data: [
          {
            value: 0.6,

          },
          {
            value: 0.6,
          }
        ],

        radius: '90%',
        // 波浪颜色
        itemStyle: {
          shadowBlur: 5,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(34,189,171, 1)',
              },
              {
                offset: 0.5,
                color: 'rgba(48,166,195, 1)',
              },
              {
                offset: 1,
                color: '#3D8BCF',
              },
            ],
            globalCoord: false,
          }
        },
        backgroundStyle: {
          color:'rgba(5, 108, 252, 0.1)',
          borderWidth: 5,
          borderColor: 'transparent'
        },
        outline: {
          show: false
        },
        // 水波图标签配置
        label: {
          show: true,
          align: 'center',
          distance: 50,
          color: '#fff',
          fontSize: 32,
        }
      }
    ]
  }

  option && myChart.setOption(option)
}

</script>

<style lang="scss" scoped>
.waterConditionLiquiChartChart {
  width: 100%;
  height: 100%;
}
</style>
<style lang="scss" >
.waterConditionLiquiChartChart-popup {
  overflow: hidden;
  font-size: 12px;
  color: #fff;

  .top {
    //margin-bottom: 16px;
    font-weight: bold;
  }

  .item {
    display: flex;
    align-items: center;
    margin: 5px 0;

    &:last-child {
      margin-bottom: 0;
    }

    .icon {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 10px;
      border-radius: 50%;
      background: rgba(0, 166, 255, 1);
    }

    .name {
      width: 50px;
      margin-right: 10px;
    }

    .value {
      flex: 1;
      text-align: right;
    }
  }
}
</style>