vue3+ts 之echarts 水球图 liquidFill 的使用
- 前言
- 一、echarts liquidfill.js水球图插件
- 二、使用步骤
- 1.上代码
- 总结
前言
项目框架使用的是 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 本身的基础图表库中,想用的话还需要单独安装 ~