1.水球图
水球图的基本配置
- echarts-liquidfill@3 与 echarts@5 兼容
- echarts-liquidfill@2 与 echarts@4 兼容
- 根据echarts版本按需安装 echarts-liquidfill
- 实现思路：当数据发生改变后，可以使用监听器，监听数据到数据发生改变之后重新调用一个渲染函数即可
安装依赖：
``` npm install echarts
npm install echarts-liquidfill
项目文件中引入
``` import * as echarts from 'echarts';
import 'echarts-liquidfill'
一个水球图完整代码如下
``` <script setup>
import { onMounted, reactive, ref, watch } from 'vue';
import * as echarts from 'echarts';
import 'echarts-liquidfill';
// 水球图
const initEchart = () => {
//获取对应的dom元素
const el = document.querySelector('.chart-box1')
// 初始化
const chartInstance = echarts.init(el)
// 设置option
chartInstance.setOption(
{
series: [{ // 水球图
type: 'liquidFill', // 水球图
name: 'Liquid Fill1', // 水球图名称
radius: '100%', // 水球图半径
itemStyle: { // 水球图样式
opacity: 1, // 水球图透明度
shadowBlur: 0 // 波浪的阴影范围
},
data: [{ // 水球图数据
name: 'score', // 水球图数据名称
direction: 'right',// 水球图数据方向
value: 0.45, // 水球图数据值
itemStyle: { // 水球图数据样式
opacity: 1, // 水球图数据透明度
normal: { // 水球图数据正常样式
color: '#e25d3e', // 水球图数据正常样式颜色
}
},
}],
backgroundStyle: { // 设置水球图内部背景色
// borderColor: '#4348EC',
// borderWidth: 10
color: "#ffe5e0",//水球图内部背景色
},
label: { // 设置百分比展示
color: "#f70", // 百分比颜色
normal: { // 百分比正常样式
textStyle: { // 百分比正常样式字体
fontSize: 20, // 百分比正常样式字体大小
color: '#333'
},
formatter: function (param) { // 百分比正常样式字体格式
return param.value * 100 + '%'; // 百分比正常样式字体格式
}
}
},
//外部细圆
outline: { // 是否显示外圈
show: true,
borderDistance: 6, // 外部圆线距离水球的距离
itemStyle: { // 外部圆线样式
borderWidth: 3, // 外部圆线宽度
borderColor: '#e25d3e', // 外部圆线颜色
//shadowBlur: 20, // 外部圆线阴影范围
//shadowColor: 'rgba(0, 0, 0, 0.25)' // 外部圆线阴影颜色
}
},
}],
}
)
}
onMounted(initEchart) // 调用水球图
</script>
<template>
<div class="ball01">
<div class="chart-box1"></div>
</div>
</template>
<style lang="scss" scoped>
// 水球
.ball01 {
width: 160px;
height: 160px;
background-color: #fdfdfd;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
.chart-box1 {
width: 130px;
height: 130px;
:deep(canvas) {
border-radius: 50%;
}
}
}
</style>
具体配置信息（一）
``` myChart.setOption(
{
series: [{ // 水球图
type: 'liquidFill', // 水球图
name: 'Liquid Fill', // 水球图名称
radius: '100%', // 水球图半径
itemStyle: { // 水球图样式
opacity: 0.55, // 水球图透明度
},
data: [{ // 水球图数据
name: 'score', // 水球图数据名称
direction: 'right',// 水球图数据方向
value: 0.32, // 水球图数据值
itemStyle: { // 水球图数据样式
opacity: 0.55, // 水球图数据透明度
normal: { // 水球图数据正常样式
color: '#fff', // 水球图数据正常样式颜色
}
},
},
{
name: 'scores',
direction: 'right',
value: 0.69,
itemStyle: {
opacity: 0.55,
normal: {
color: '#134892'
}
}
},
{
name: 'scorex',
direction: 'right',
value: 0.45,
itemStyle: {
opacity: 0.55,
normal: {
// color: 'red'
}
}
}],
backgroundStyle: { // 设置水球图内部背景色
// borderColor: '#4348EC',
// borderWidth: 10,
color: "transparent",//水球图内部背景色
},
label: { // 设置百分比展示
color: '#02CDF6', // 百分比颜色
normal: { // 百分比正常样式
textStyle: { // 百分比正常样式字体
fontSize: 20, // 百分比正常样式字体大小
},
formatter: function (param: any) { // 百分比正常样式字体格式
return param.value * 100 + '%'; // 百分比正常样式字体格式
}
}
},
outline: { // 是否显示外圈
show: true
}
}],
}
)
具体配置信息（二）
``` myChart.setOption(
{ // 定义配置
backgroundColor: '#fff',
title: {
text: '', // 标题
textStyle: { // 文字样式
fontWeight: 'normal', // 标题字体粗细
fontSize: 25, // 标题字体大小
color: 'rgb(97, 142, 205)' // 标题字体颜色
}
},
series: [ // 数据
{
type: 'liquidFill', // 图表类型
radius: '99%', // 整个图占比
center: ['50%', '50%'], // 图标位置
data: [data.value, data.value], // data个数代表波浪数
itemStyle: { // 波浪样式设置
opacity: 1, // 波浪的透明度
shadowBlur: 0 // 波浪的阴影范围
},
amplitude: 10, // 波浪起伏
backgroundStyle: { // 球背景样式设置
borderWidth: 1, // 球背景边框宽度
borderColor: '#448af9', // 球背景边框颜色
color: '#fff' // 球背景颜色
},
// 修改波浪颜色(对应上面波浪个数)
color: ['#e9ecff', '#bacffe'],
label: { // 水球中间显示文字
normal: { // 水球中间显示
// 水球中间显示
formatter: 0.5 * 100 + '%', // 水球中间显示文字
textStyle: { // 水球中间显示文字样式
// 水球中间显示文字大小
fontSize: 40
}
}
},
// 外部圆线
outline: {
show: true, // 是否显示外部圆线
borderDistance: 0, // 外部圆线距离水球的距离
itemStyle: { // 外部圆线样式
borderWidth: 0, // 外部圆线宽度
borderColor: '#42d1b4', // 外部圆线颜色
shadowBlur: 20, // 外部圆线阴影范围
shadowColor: 'rgba(0, 0, 0, 0.25)' // 外部圆线阴影颜色
}
},
// 内部圆线
// waveAnimation: true,
// 内部圆线
}
]
}
)
多个水球图配置
水球图单独封装成一个组件，多个水球图共用一个水球图组件，水球图里面的数据通过父组件传参来改变水球图里面的数据及其颜色，来实现多个水球图。
父组件
``` <el-main style="padding:20px 10px;display: flex;justify-content: space-between;">
<div class="centerZ">
<liquidFill
:rate="backlog.waitingPickupRate"
:colorList="colorList[0]">
</liquidFill>
<div class="bottomNum"><span>代取件 <span>42</span></span> </div>
</div>
<div class="centerZ">
<liquidFill
:rate="backlog.waitingDispatchRate"
:colorList="colorList[1]">
</liquidFill>
<div class="bottomNum"><span>待派件 <span style="color:#ffc45e">31</span></span> </div>
</div>
<div class="centerZ">
<liquidFill
:rate="backlog.waitingPickupNumber"
:colorList="colorList[2]">
</liquidFill>
<div class="bottomNum"><span>未分配运输<span style="color:#ff9b41">39</span></span> </div>
</div>
<div class="centerZ">
<liquidFill
:rate="backlog.timeoutTransportTaskRate"
:colorList="colorList[3]">
</liquidFill>
<div class="bottomNum"><span>超时运输 <span style="color:#edde83">42</span></span> </div>
</div>
</el-main>
<script>
// 颜色
const colorList = [
{
bgColor: '#ffe5e0',
color: '#e25d3e'
},
{
bgColor: '#fff1d9',
color: '#ffc45e'
},
{
bgColor: '#ffead7',
color: '#ff9b41'
},
{
bgColor: '#fafade',
color: '#edde83'
}
]
let backlog = ref({}) //获取接口数据，信息
const getWorkList = async () => {
const { data } = await getWorkbench()
backlog.value = data.backlog
}
</script>
因为子组件会先渲染，父组件接口还没有接收到参数，会导致子组件没有数据，所以子组件接收数据用watch监听数据变化
封装子组件：
``` <script setup>
import { onMounted, watch, ref } from 'vue';
import * as echarts from 'echarts';
import 'echarts-liquidfill';
const props = defineProps({
rate: {
type: Number,
default: 0
},
colorList: {
type: Object
}
})
// const liquidData = ref()
// setTimeout(() => {
// liquidData.value = props.data
// console.log(liquidData.value);
// },1000)
let chartInstance = null
watch(() => [props.rate, props.colorList], (newData) => {
// liquidData.value = newData
// console.log(newData);
// console.log(liquidData.value.waitingPickupRate);
chartInstance.setOption(
{
backgroundColor: '#fff',
series: [
{ // 水球图
type: 'liquidFill', // 水球图
name: 'Liquid Fill1', // 水球图名称
radius: '100%', // 水球图半径
itemStyle: { // 水球图样式
opacity: 1, // 水球图透明度
shadowBlur: 0 // 波浪的阴影范围
},
data: [
{ // 水球图数据
name: 'score1', // 水球图数据名称
direction: 'right',// 水球图数据方向
value: newData[0] / 100, // 水球图数据值
itemStyle: { // 水球图数据样式
opacity: 1, // 水球图数据透明度
normal: { // 水球图数据正常样式
color: newData[1].color, // 水球图数据正常样式颜色
}
},
}
],
backgroundStyle: { // 设置水球图内部背景色
// borderColor: '#4348EC',
// borderWidth: 10
color: newData[1].bgColor,//水球图内部背景色
},
label: { // 设置百分比展示
color: "#f70", // 百分比颜色
normal: { // 百分比正常样式
textStyle: { // 百分比正常样式字体
fontSize: 16, // 百分比正常样式字体大小
color: '#333'
},
formatter: function (param) { // 百分比正常样式字体格式
return param.value * 100 + '%'; // 百分比正常样式字体格式
}
}
},
//外部细圆
outline: { // 是否显示外圈
show: true,
borderDistance: 6, // 外部圆线距离水球的距离
itemStyle: { // 外部圆线样式
borderWidth: 3, // 外部圆线宽度
borderColor: newData[1].color, // 外部圆线颜色
//shadowBlur: 20, // 外部圆线阴影范围
//shadowColor: 'rgba(0, 0, 0, 0.25)' // 外部圆线阴影颜色
}
},
}
],
})
})
const uniId = ~~(Math.random() * 100000)
// 水球图1
const initEchart = () => {
//获取对应的dom元素
const el1 = document.querySelector(`.box-${uniId}`)
// 初始化
chartInstance = echarts.init(el1)
// 设置option
}
onMounted(initEchart) // 调用水球图
</script>
<template>
<div class="ball01">
<div class="chart-box" :class="`box-${uniId}`"></div>
</div>
</template>
<style lang="scss" scoped>
// 水球
.ball01 {
width: 140px;
height: 140px;
background-color: #fdfdfd;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
.chart-box {
width: 120px;
height: 120px;
:deep(canvas) {
border-radius: 50%;
}
}
}
</style>
