3.在Vue 3中使用Echarts实现水球效果
引言
在数据可视化中，水球图（Liquid Fill Chart）是一种常见的图表类型，它通过流动的液体效果来呈现数字变化，使得数据展示更具动感和视觉吸引力。在本教程中，我们将通过在 Vue 3 项目中结合 Echarts 和 Echarts-LiquidFill 插件来实现一个水球效果，并通过输入框实时更新数据。
环境准备
- Vue 3 项目：确保你的开发环境中已经配置好了 Vue 3 项目。如果还没有，你可以使用 Vue CLI 或 Vite 来快速创建一个项目。
- Echarts：我们将使用 Echarts 来创建图表，Echarts 是一个非常强大的数据可视化库，支持丰富的图表类型。
- Echarts-LiquidFill 插件：该插件扩展了 Echarts 的功能，允许我们创建流体填充效果的水球图。
步骤一：安装依赖
首先，确保你已经安装了 Echarts 和 Echarts-LiquidFill 插件。
npm install echarts echarts-liquidfill --save步骤二：创建组件并引入 Echarts
在 Vue 3 中，我们通过 <script setup> 来创建组件。首先，我们需要在组件中引入 echarts 和 echarts-liquidfill 插件，并初始化图表。
步骤三：初始化 Echarts 图表
我们在 onMounted 钩子中初始化 Echarts 图表，并使用 updateChart 函数来设置水球图的配置项。
步骤四：设计界面
接下来，我们设计一个简单的界面，其中包括一个输入框，用于动态更新水球的数值，输入框的值会实时反映在水球图上。
这里我们使用了 element-plus 库中的 el-input 组件，绑定了 Data.score 数据，并且通过 @input 事件来更新图表内容。
步骤五：样式设计
通过简单的 CSS 样式让界面看起来更整洁，确保水球效果图居中显示，并且界面响应式良好。
步骤六：结果展示
现在，当你打开这个页面时，你将看到一个水球图，它会根据输入框中输入的数值进行更新。比如，当输入框中的数字为 50 时，水球图的水位会填充到 50%；当数值变为 80 时，水位上升至 80%。
完整代码
<!--
* @Author: 彭麒
* @Date: 2024/12/24
* @Email: 1062470959@qq.com
* @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。
-->
<template>
<button class="back-button" @click="goBack">返回</button>
<div class="font-bold text-[24px]">在Vue3中使用Echarts实现水球效果</div>
<div class="con">
<div id="myEcharts" class="w-[180px] h-[180px]"></div>
<el-input type="number" v-model="Data.score" @input="updateChart" style="width: 240px"/>
</div>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import router from "@/router";
import * as echarts from 'echarts';
import 'echarts-liquidfill';
type EChartsOption = echarts.EChartsOption;
let myChart: echarts.ECharts | null = null;
const Data = ref({
score: 50
});
const goBack = () => {
router.push('/Echarts')
}
const initChart = () => {
const chartDom = document.getElementById('myEcharts') as HTMLElement;
if (chartDom) {
myChart = echarts.init(chartDom, 'default');
updateChart();
window.onresize = () => {
myChart?.resize();
};
} else {
console.error('Chart DOM element not found');
}
};
const updateChart = () => {
if (myChart) {
const score = Data.value.score || 0;
const option: EChartsOption = {
title: [{
bottom: '15%',
left: 'center',
textStyle: {
color: '#4F515A',
fontSize: 16,
fontWeight: 300
}
}],
series: [{
type: 'liquidFill',
radius: '60%',
color: [
'#def2fe',
'#b6e3fc',
new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#72D1FB",
}, {
offset: 0.8,
color: "#43ABF7",
}])
],
data: [score / 100, score / 100, score / 100],
center: ['50%', '50%'],
label: {
normal: {
formatter: String(score),
fontSize: 30,
fontWeight: 400,
color: '#72D1FB'
}
},
itemStyle: {
shadowBlur: 0
},
emphasis: {
itemStyle: {
opacity: 0.8,
},
},
outline: {
borderDistance: 0,
itemStyle: {
borderWidth: 4,
borderColor: '#ecebea',
shadowBlur: 20
}
},
backgroundStyle: {
color: '#fff'
}
}]
};
myChart.setOption(option);
}
};
onMounted(() => {
initChart();
});
onUnmounted(() => {
if (myChart) {
myChart.dispose();
}
});
</script>
<style scoped lang="scss">
.con {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
</style>小结
在这篇文章中，我们展示了如何在 Vue 3 项目中使用 Echarts 实现一个简单的水球效果，并通过输入框实现实时更新。你可以将此效果应用于各种实时监控、数据展示或动态仪表盘的项目中。希望你能从中获得灵感，并将其应用到自己的项目中。
原文地址：https://blog.csdn.net/Miller777_/article/details/144709751
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！