前言

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

vue3+ts 之echarts 水球图 liquidFill 的使用相关推荐

vue echarts 水球图多个水球图并存配置
echarts 水球图下面介绍为vue-cli开发环境下 npm下载 npm install echarts --save npm install echarts-liquidfill --save ...
echart水滴_漂亮得不像实力派：ECharts 水球图教程
水球图是一种适合于展现单个百分比数据的图表类型,ECharts 的水球图插件使你能够通过非常简单的配置,实现酷炫的数据展示效果. 那么,今天我们就一起来学习一下,如何使用 ECharts 水球图. 第 ...
echarts 水球图
// ECharts 水球图插件,需要额外插件脚本,参见上方"脚本" // 完整配置参数参见:https://github.com/ecomfe/echarts-liquidfil ...
vue3+ts 之echarts的使用以及 echarts 图表初始不渲染,代码改变之后才渲染
vue3+ts 之echarts的使用以及 echarts 图表初始不渲染,代码改变之后才渲染前言一.按需引入 ECharts 图表和组件二.使用步骤 1.还是先上代码叭 2. 上实现效果 ! ...
ECHARTS 水球图
转载编辑. 原作者链接地址:https://zhuanlan.zhihu.com/p/25353670?group_id=827655855632715776 水球图是一种适合于展现单个百分比数据的图 ...
微信小程序 ECharts 水球图
效果图: 水球图插件 git地址:https://github.com/ecomfe/echarts-liquidfill#api 下载后,将dist下面的echarts-liquidfill.min ...
Echarts 水球图设置基准线
*前言:最近的项目需求中,要求在水球图中加一条标准线(作为报警提示线). 1.效果如下: 2.思路: 注意:如果是直接在水球图上画标线是实现不了的. 所以我们换种思路(大佬指点了一下),在折线图 ...
html5 加速球效果,css 渐隐渐现、echarts 圆环图、百度地图覆盖物、echarts水球图（360加速球效果）...
说一下知识点: 1.水球是echarts的插件echarts-liquidfill,官网下载-扩展下载中可以拿到,git传送阵https://github.com/ecomfe/echarts-liq ...
echarts水球图
在项目当中我们可能会遇到这种图,这种叫水球图,但是我们如果要写的话,得安装 npm install echarts-liquidfill --save 安装好之后我们就可以在项目当中使用了,以下是代 ...

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

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

前言

一、echarts liquidfill.js水球图插件

二、使用步骤

1.上代码

总结

vue3+ts 之echarts 水球图 liquidFill 的使用相关推荐

最新文章

热门文章