vue3+ts 之echarts 水球图 liquidFill 的使用

前言

项目框架使用的是 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 本身的基础图表库中,想用的话还需要单独安装 ~