echarts5.2.2实现 水球图表

需求背景

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

echarts 图表集链接

解决思路

引入 echarts-liquidfill^3.1.0

解决效果

index.vue

javascript 复制代码
<!--/**
 * @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>
相关推荐
Yhame.2 分钟前
【使用层次序列构建二叉树(数据结构C)】
c语言·开发语言·数据结构
言之。8 分钟前
【Go语言】RPC 使用指南(初学者版)
开发语言·rpc·golang
小墨宝17 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED32 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿36 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子37 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
投笔丶从戎1 小时前
Kotlin Multiplatform--01:项目结构基础
android·开发语言·kotlin
志存高远661 小时前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue1 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm