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>
相关推荐
Bellafu66621 分钟前
selenium 常用xpath写法
前端·selenium·测试工具
superxxd25 分钟前
跨平台音频IO处理库libsoundio实践
开发语言·qt·音视频
_OP_CHEN2 小时前
C++基础:(十二)list类的基础使用
开发语言·数据结构·c++·stl·list类·list核心接口·list底层原理
blackorbird3 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者4 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强4 小时前
Chrome和IE获取本机ip地址
前端
天***88964 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*4 小时前
zabbix安装
linux·运维·前端·网络·zabbix
大怪v5 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
清羽_ls5 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks