echarts实现 水库高程模拟图表

news/2024/10/30 16:54:35/

  • 需求背景
  • 解决思路
  • 解决效果
  • index.vue

需求背景

需要做一个水库高程模拟的图表,x轴是水平距离,y轴是高程,需要模拟改水库的形状
echarts 图表集链接

解决思路

配合ui切图,模拟水库形状

解决效果

在这里插入图片描述

index.vue

javascript"><!--/*** @author: liuk* @date: 2024-10-24* @describe: 水情图表*/--><template><div ref="chatDom" class="waterConditionChart"></div>
</template><script lang="ts" setup>
import {ref, onMounted, watch, nextTick} from "vue"
import * as echarts from 'echarts'
import "echarts-liquidfill"
import {formatToFixed, getEquiUnit} from "@/utils/dictionary";// Props
const props = defineProps(['data'])let myChart = null // Vue3 使用 proxy 对象代理,而 echarts 则使用了大量的全等(===), 对比失败从而导致了bug。
const chatDom = ref(null)watch(() => props.data, (data) => {nextTick(() => {if (!myChart) returndrawChart()const option = myChart.getOption()myChart.clear()myChart.setOption(renderFn(option, data))})
}, {immediate: true})onMounted(() => {drawChart()window.addEventListener('resize', () => {drawChart()const option = myChart.getOption()myChart.clear()myChart.setOption(renderFn(option, props.data,))});
})const renderFn = (option, data) => {// option.series[0].data[0].value = data.num || 0// option.series[0].max = data.total || 0return option
}const drawChart = () => {let chartDom = chatDom.valueif (chartDom == null) {return}echarts.dispose(chartDom)myChart = echarts.init(chartDom)const option = {title: [{top: 125,left: 50,text: "当前水位:33.15m",textStyle: {color: "#fff",fontSize: 12,fontWeight: "normal"},}],tooltip: {trigger: 'axis',padding: [5, 10, 5, 10],backgroundColor: 'rgba(0,0,0,.6)',borderColor: 'transparent',formatter: (param) => `<div class="waterConditionChart-popup">${param.filter(item=>item.seriesName==="当前水位").map(item => `<p class="item"><i class="icon" style="background-color:${item.color || 'red'}"></i><span class="name">${item.seriesName}</span><span class="value"><b>${formatToFixed(item.data)}</b>${item.data !== '--' ? getEquiUnit(item.seriesName) : ''}</span></p>`).join("")}</div>`},grid: {top: '35',left: '0',right: '10',bottom: '0',containLabel: true,},xAxis: [{type: 'category',boundaryGap: false,nameGap: 5,axisLine: {show: true,lineStyle: {color: '#999'},},axisLabel: {color: '#9eaaba',},axisTick: {show: false,},data: ['0', '50', '100', '150', '200', '250', '300'],}],yAxis: [{name: '高程(m)',nameTextStyle: {color: '#9eaaba',},offset: 0,min: 20,max: 60,type: 'value',interval: 5,axisLabel: {show: true,color: "#9eaaba",},axisLine: {show: false},splitLine: {show: true,lineStyle: {width: 1,color: "rgba(49,105,129,0.4)",type: 'dashed'}},}],series: [{name:"当前水位",type: 'line',smooth: true, //是否平滑曲线显示symbolSize: 0,lineStyle: {width: 1},areaStyle: {color: "rgba(0, 145, 255,0.5)"},data: [33, 33, 33, 32, 26, 25, 24],z: 1},{type: 'line',symbolSize: 0,areaStyle: {color: "rgb(194,137,44)"},lineStyle: {width: 0},data: [25, 25, 25, 25, 25, 25, 25],z: 2},{type: 'line',symbolSize: 0,lineStyle: {width: 2,type: "dashed",color: "rgba(114, 255, 198, 1)"},data: [50, 50, 50, 50, 50, 50, 50],z: 2}]}option && myChart.setOption(option)
}</script><style lang="scss" scoped>
.waterConditionChart {width: 100%;height: 100%;
}
</style>
<style lang="scss">
.waterConditionChart-popup {overflow: hidden;font-size: 12px;color: #fff;.top {//margin-bottom: 16px;font-weight: bold;}.item {display: flex;align-items: center;margin: 5px 0;&:last-child {margin-bottom: 0;}.icon {display: inline-block;width: 12px;height: 12px;margin-right: 10px;border-radius: 50%;background: rgba(0, 166, 255, 1);}.name {width: 50px;margin-right: 10px;}.value {flex: 1;text-align: right;}}
}
</style>

http://www.ppmy.cn/news/1543144.html

相关文章

【Python爬虫实战】网络爬虫完整指南:网络协议OSI模型

网络爬虫完整指南&#xff1a;从协议基础到实践应用 什么是网络协议&#xff1f; **网络协议&#xff08;Network Protocol&#xff09;**是指计算机网络中设备和设备之间进行通信的规则和约定。它定义了数据传输的格式、顺序、传输方法和错误处理机制&#xff0c;使不同设备和…

Ubuntu 22.04系统启动时自动运行ROS2节点

在 Ubuntu 启动时自动运行 ROS2 节点的方法 环境&#xff1a;Ubuntu 系统&#xff0c;ROS2 Humble&#xff0c;使用系统自带的 启动应用程序 目标&#xff1a;在系统启动时自动运行指定的 ROS2 节点 效果展示 系统启动后&#xff0c;自动运行小乌龟节点和键盘控制节点。 实践…

uniapp写抖音小程序阻止右滑返回上一个页面

最近用uniapp写小程序遇到一个问题因为内部用到右滑的业务&#xff0c;但是只要右滑就会回到上一页面&#xff0c;用了event.preventDeafult()没有用&#xff0c;看了文档找到了解决办法 1.在最外层view加上touchstart事件 <view class"container" touchstart&q…

ChartCheck: Explainable Fact-Checking over Real-World Chart Images

论文地址: https://aclanthology.org/2024.findings-acl.828.pdfhttps://aclanthology.org/2024.findings-acl.828.pdf 1.概述 事实验证技术在自然语言处理领域获得了广泛关注,尤其是在针对误导性陈述的检查方面。然而,利用图表等数据可视化来传播信息误导的情况却很少受到…

一篇快速入门Jmeter

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 为什么要撰写这样一个教程呢&#xff1f; 深入学习Jmeter 温故而知新。尽管我已经使用JMeter很长时间&#xff0c;但还有许多元件我并不十分了解&#xff0c;…

C++:STL

STL的定义&#xff1a;包括了三类&#xff0c;算法容器和迭代器。 算法&#xff1a;包括排序、复制等常用算法&#xff0c;以及不同容器特定的算法。 容器&#xff1a;数据存放的形式&#xff0c;包括序列式容器和关联式容器。序列式容器就是list、vector等。关联式容器就是s…

C# 将时间转换为毫秒

作者&#xff1a;逍遥Sean 简介&#xff1a;一个主修Java的Web网站\游戏服务器后端开发者 主页&#xff1a;https://blog.csdn.net/Ureliable 觉得博主文章不错的话&#xff0c;可以三连支持一下~ 如有疑问和建议&#xff0c;请私信或评论留言&#xff01; C# 将时间转换为毫秒…

C++进阶-->多态(Polymorphism)

1. 多态的概念 多态&#xff0c;顾名思义多种形态&#xff1b;多态分为编译时多态&#xff08;静态多态&#xff09;和运行时多态&#xff08;动态多态&#xff09;&#xff0c;静态多态就是就是我们前面讲的函数重载和函数模板&#xff0c;可以通过传不同类型&#xff0c;然后…