前言

项目框架使用的是 vben 语言用的是 vue3+ts

业务需求需要在页面中使用水球图,在此记录 echarts 图表中的水球图 看下效果 ~

写在前面 : 项目中本身已经用了 echarts 的图表,用的是按需引入,且是 TS 语法 (其实这里语法上基本一致)

一、echarts liquidfill.js水球图插件

水球图 (Liquid Fill Chart) 是 echats 是ECharts 的水球图是一个插件类型的图表。 是一个比较适合用来展示单个百分比数据的图表 在 ECharts 官网下载的完整版本不包含水球图，使用时，需要在引入 echarts.js 之后，另外引入水球图对应的 echarts-liquidfill.js

npm install echarts
npm install echarts-liquidfill

注意:echarts-liquidfill@3 版本匹配 echarts@5 版本，echarts-liquidfill@2 版本匹配 echarts@4 版本 其中在我自己引入 npm install echarts-liquidfill 操作的时候报错 最终用 cnpm 搞定了 引入成功后

二、使用步骤

1.上代码

<!--这里是关于流量剩余情况的图表-->
<template>
  <div ref="chartRef" :style="{ width, height }"></div>
</template>
<script lang="ts" setup>
  import {
          
    Ref, ref, watch } from vue;
  import {
          
    useECharts } from /@/hooks/web/useECharts;
  import echarts-liquidfill;

  const props = defineProps({
          
   
    loading: Boolean,
    width: {
          
   
      type: String as PropType<string>,
      default: 200px,
    },
    height: {
          
   
      type: String as PropType<string>, 
      default: 200px,
    },
    rate: Number,
  });

  const chartRef = ref<HTMLDivElement | null>(null);
  const {
          
    setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  watch(
    () => props.loading,
    () => {
          
   
      if (props.loading) {
          
   
        return;
      }
      setOptions({
          
   
        backgroundColor: #fff,
        width: 100%,
        height: 100%,
        series: [
          {
          
   
            color: [#D3E0FF, #165DFF], //波浪的颜色
            type: liquidFill,
            radius: 90%,
            data: [
              //波浪的高度占比 (第一个是浅色的 : 在传过来的数据上加上一点作为展示效果,第二个用传过来的数据)
              {
          
   
                value: props.rate + 0.05,
              },
              {
          
   
                value: props.rate,
              },
            ],
            center: [50%, 50%], //图在整个画布的位置
            backgroundStyle: {
          
   
              color: white,
              borderColor: #F0F2F5, //边框颜色
              borderWidth: 5, //边框粗细
              shadowColor: #ffffff, //阴影颜色
              shadowBlur: 20, //阴影范围
            },
            label: {
          
   
              //水球图里面的文字喝字体等设置
              normal: {
          
   
                formatter: function (value) {
          
   
                if (!value) {
          
   
                  return 加载中;
                } else {
          
   
                  return props.rate*100 + %;
                }
              },
                textStyle: {
          
   
                  fontSize: 22,
                },
              },
            },
            outline: {
          
   
              //水球图的外层边框 可设置 show:false  不显示
              itemStyle: {
          
   
                borderColor: #DCDCDC,
                borderWidth: 3,
              },
              borderDistance: 0,
            },
            itemStyle: {
          
   
              opacity: 0.95,
              shadowColor: rgba(0,0,0,0),
            },
          },
        ],
      });
    },
    {
          
    immediate: true },
  );
</script>

总结

主要就是这个水球图不在 echarts 本身的基础图表库中,想用的话还需要单独安装 ~