echarts 实现水利计算模型-雨量，流量，时间分割线

已于 2024-07-15 13:35:03 修改
阅读量187 收藏 3
点赞数 2
分类专栏： # echarts实践 文章标签： echarts 前端 javascript
于 2024-07-15 11:35:11 首次发布
那一抹阳光--铁子--有没坑位推荐一哈
本文链接：https://blog.csdn.net/hr_beginner/article/details/140434378
版权

需求背景

实现水利计算模型-雨量，流量，时间分割线

解决效果

在这里插入图片描述

ISQQW代码地址

链接

index.vue

<!--/**
* @author: liuk
* @date: 2024/06/13
* @describe: 水利计算模型图表
*/-->
<template>
  <div ref="chatDom" class="sectionalResultChart"></div>
</template>

<script lang="ts" setup>
import {ref, onMounted, watch, nextTick, defineProps} from "vue"
import * as echarts from 'echarts'
import moment from 'moment'

import {formatToFixed} from "@/utils/dictionary"
// Props
const props = defineProps(['data'])

import {usefloodForecastStore} from "@/store/modules/floodForecast";

const floodForecastStore = usefloodForecastStore()

let myChart = null // Vue3 使用 proxy 对象代理，而 echarts 则使用了大量的全等（===）, 对比失败从而导致了bug。
const chatDom = ref(null)
const isWrank = ref(false) // 最大值是否超出1w

watch(() => props.data, (data) => {
  const temp = data.map(item => {
    const {historyFlow, hdlflow, ddrmflow, xajflow, siflow, lstmflow} = item
    return Object.values({historyFlow, hdlflow, ddrmflow, xajflow, siflow, lstmflow})
  }).flat()
  const maxValue = Math.max.apply(null, temp)
  isWrank.value = maxValue >= 1e4

  nextTick(() => {
    drawChart()
    myChart.showLoading({
      text: '加载中...',  // 加载提示文本
      color: '#fff',   // 加载动画颜色
      textColor: '#fff',  // 文字颜色
      maskColor: 'rgba(41, 12, 12, .5)',  // 遮罩颜色
      zlevel: 0           // z轴层级
    })
    if (data.length) {
      myChart.hideLoading();
      const option = myChart.getOption()
      myChart.clear()
      myChart.setOption(renderFn(option, data))
    }
  })
}, {immediate: true})

const renderFn = (option, data) => {
  const curForecastTime = floodForecastStore.curSelectObj.forecastTime || ''
  const len = data.length // 数据总长度
  let curDivisionHourNum = Math.max(data.findIndex(item => moment(item.time).valueOf() === moment(curForecastTime).valueOf()), 0) // 分割线位置
  debugger
  option.legend[0].data = ['面雨量', '实测流量', '混合深度学习', 'DDRM', '新安江', '时空异构', 'LSTM']
  option.xAxis[0].data = data.map(item => item.time)
  option.yAxis[0].name = isWrank.value ? '流量 万m³/s' : '流量 m³/s'
  option.yAxis[1].max = Math.max.apply(null,data.map(item => formatToFixed(item.rainfallValue) || 0)) * 3
  option.series[0].data = data.map(item => formatToFixed(item.rainfallValue) || 0)//面雨量
  option.series[1].data = data.map(item => formatToFixed(item.historyFlow) || 0)//实测流量
  option.series[2].data = data.slice(0, curDivisionHourNum).fill('-').concat(data.slice(curDivisionHourNum).map(item => formatToFixed(item.hdlflow) || 0))//混合深度学习
  option.series[3].data = data.slice(0, curDivisionHourNum).fill('-').concat(data.slice(curDivisionHourNum).map(item => formatToFixed(item.ddrmflow) || 0))//DDRM
  option.series[4].data = data.slice(0, curDivisionHourNum).fill('-').concat(data.slice(curDivisionHourNum).map(item => formatToFixed(item.xajflow) || 0))//新安江
  option.series[5].data = data.slice(0, curDivisionHourNum).fill('-').concat(data.slice(curDivisionHourNum).map(item => formatToFixed(item.siflow) || 0))//时空异构
  option.series[6].data = data.slice(0, curDivisionHourNum).fill('-').concat(data.slice(curDivisionHourNum).map(item => formatToFixed(item.lstmflow) || 0))//LSTM
  // ------- 虚线
  option.series[7].data = data.slice(0, curDivisionHourNum + 1).map(item => formatToFixed(item.hdlflow) || 0)//混合深度学习
  option.series[8].data = data.slice(0, curDivisionHourNum + 1).map(item => formatToFixed(item.ddrmflow) || 0)//DDRM
  option.series[9].data = data.slice(0, curDivisionHourNum + 1).map(item => formatToFixed(item.xajflow) || 0)//新安江
  option.series[10].data = data.slice(0, curDivisionHourNum + 1).map(item => formatToFixed(item.siflow) || 0)//时空异构
  option.series[11].data = data.slice(0, curDivisionHourNum + 1).map(item => formatToFixed(item.lstmflow) || 0)//LSTM
  // ----- 定位分割线
  option.series[12].data = new Array(len).fill(0.1)
  option.series[12].data[curDivisionHourNum] = 0
  const curHeight = parseInt(window.getComputedStyle(chatDom.value).height)
  switch (true) {
    case curHeight >= 600:
      option.series[12].markPoint.symbolSize = [1.5, 515]
      option.series[12].markPoint.symbolOffset = [0, -257]
      break
    case curHeight > 460:
      option.series[12].markPoint.symbolSize = [1.5, 385]
      option.series[12].markPoint.symbolOffset = [0, -192]
      break
    default:
      option.series[12].markPoint.symbolSize = [1.5, 200]
      option.series[12].markPoint.symbolOffset = [0, -100]
  }

  return option
}

onMounted(() => {
  window.addEventListener('resize', () => {
    drawChart()
    const option = myChart.getOption()
    myChart.clear()
    myChart.setOption(renderFn(option, props.data,))
  }, {passive: true});
})

const drawChart = () => {
  let chartDom = chatDom.value
  if (chartDom == null) {
    return
  }
  echarts.dispose(chartDom)
  myChart = echarts.init(chartDom)
  const option = {
        color: ['rgba(46, 165, 255, 1)', 'rgba(0, 0, 255, 1)', 'rgba(0, 207, 19, 1)', 'rgba(254, 254, 62, 1)', 'rgba(244, 106, 87, 1)', 'rgba(255, 162, 0, 1)', 'rgba(247, 0, 237, 1)'],
        tooltip: {
          trigger: 'axis',
          padding: [0, 10, 10, 10],
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
            },
          },
          formatter: function (param) {
            let data = param.filter(item => item.data !== '-' && item.seriesName !== "定位分割线")
            data = data.filter((item, i) => data.findIndex(x => x.seriesName === item.seriesName) === i)
            return `
          <div class="sectionalResultChart-popup">
            <p class="top">
                <span>${param[0]?.axisValue} </span>
            </p>
            ${
                data.map(item => {
                  let unit
                  switch (true) {
                    case ['面雨量'].includes(item.seriesName):
                      unit = 'mm';
                      break
                    default:
                      unit = 'm³/s'
                      break
                  }
                  return `
                  <p class="item">
                      <i class="icon" style="background-color:${item.color}"></i>
                      <span class="name">${item.seriesName}</span>
                      <span class="value"><b>${item.data || 0}</b>${item.data !== '--' ? unit : ''}</span>
                  </p>`
                }).join("")
            }
          </div>
        `
          }
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        grid: {
          left: 45,
          top: 40,
          right: 40,
          bottom: 40,
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.1)',
              type: 'dashed'
            }
          }
        },
        legend: {
          data: [],
          top: 5,
          icon: 'circle',
          textStyle: {
            color: '#fff'
          },
        },
        xAxis: {
          type: 'category',
          data: ['2021/06/25', '2021/06/25', '2021/06/25', '2021/06/25', '2021/06/25', '2021/06/25', '2021/06/25',],
          alignTicks: true,
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              width: 1,
              color: '#eee',
            },
          },
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              color: '#eee',
              fontSize: 14,
            },
            formatter: (val) => moment(val).format('HH:mm')
          },
        },
        yAxis: [
          {
            type: 'value',
            name: '流量 m³/s',
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            nameTextStyle: {
              color: '#fff'
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              color: '#fff',
              formatter: (val) => isWrank.value ? formatToFixed(val / 1e4, 1) : val
            },
          },
          {
            type: 'value',
            name: '面雨量 mm',
            nameLocation: 'start',
            inverse: true,
            nameTextStyle: {
              color: '#fff'
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              color: '#fff',

            },
          }
        ],
        series: [
          {
            name: '面雨量',
            type: 'bar',
            data: [],
            yAxisIndex: 1,
            itemStyle: {
              borderRadius: [0, 0, 5, 5]
            },
          },
          {
            name: '实测流量',
            smooth: true,
            type: 'line',
            showSymbol: false,
            barWidth: '30%',
            data: [],
            yAxisIndex: 0,
          },
          {
            name: '混合深度学习',
            type: 'line',
            smooth: true,
            showSymbol: false,
            barWidth: '30%',
            data: [],
            yAxisIndex: 0,
          },
          {
            name: 'DDRM',
            type: 'line',
            smooth: true,
            showSymbol: false,
            barWidth: '30%',
            data: [],
            yAxisIndex: 0,
          },
          {
            name: '新安江',
            type: 'line',
            smooth: true,
            showSymbol: false,
            barWidth: '30%',
            data: [],
            yAxisIndex: 0,
          },
          {
            name: '时空异构',
            type: 'line',
            smooth: true,
            showSymbol: false,
            barWidth: '30%',
            data: [],
            yAxisIndex: 0,
          },
          {
            name: 'LSTM',
            type: 'line',
            smooth: true,
            showSymbol: false,
            barWidth: '30%',
            data: [],
            yAxisIndex: 0,
          },
          // 虚线 -------------
          {
            name: '混合深度学习',
            type: 'line',
            smooth: true,
            showSymbol: false,
            barWidth: '30%',
            data: [],
            lineStyle: {
              type: 'dashed'
            },
            yAxisIndex: 0,
          },
          {
            name: 'DDRM',
            type: 'line',
            smooth: true,
            showSymbol: false,
            barWidth: '30%',
            data: [],
            lineStyle: {
              type: 'dashed'
            },
            yAxisIndex: 0,
          },
          {
            name: '新安江',
            type: 'line',
            smooth: true,
            showSymbol: false,
            barWidth: '30%',
            data: [],
            lineStyle: {
              type: 'dashed'
            },
            yAxisIndex: 0,
          },
          {
            name: '时空异构',
            type: 'line',
            smooth: true,
            showSymbol: false,
            barWidth: '30%',
            data: [],
            lineStyle: {
              type: 'dashed'
            },
            yAxisIndex: 0,
          },
          {
            name: 'LSTM',
            type: 'line',
            smooth: true,
            showSymbol: false,
            barWidth: '30%',
            data: [],
            lineStyle: {
              type: 'dashed'
            },
            yAxisIndex: 0,
            markLine: {
              silent: true,
              lineStyle: {
                type: 'solid',
                color: 'red',
              },
              data: 2
            },
          },
          //定位分割线 ---------------
          {
            name: '定位分割线',
            smooth: true,
            type: 'line',
            showSymbol: false,
            barWidth: '30%',
            color: 'transparent',
            data: ['0.1', '0.1', 0.1, 0.1, 0.1, 0.1, 0.1, 0, 0.1],
            yAxisIndex: 0,
            markPoint: {
              symbol: 'rect',
              symbolSize: [1.5, 600],
              symbolOffset: [0, -215],
              data: [
                {
                  type: 'min',
                  itemStyle: {
                    color: 'red'
                  },
                  label: {
                    show: true,
                    color: 'red',
                    position: 'top',
                    formatter: '预报作业时间',
                    fontSize: 12,
                  },
                  emphasis: {
                    disabled: true
                  }
                },
              ],
            },
          },
        ],
      };
  option && myChart.setOption(option)
}

</script>

<style lang="scss" scoped>
.sectionalResultChart {
  width: 100%;
  height: 100%;
  max-height: 600px;
}
</style>

<style lang="scss">
.sectionalResultChart-popup {
  overflow: hidden;
  //margin: 3px 10px;

  .top {
    //margin-bottom: 16px;
    font-weight: bold;
  }

  .item {
    display: flex;
    align-items: center;
    margin: 10px 0;

    &:last-child {
      margin-bottom: 0;
    }

    .icon {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 10px;
      border-radius: 50%;
    }

    .name {
      width: 90px;
      margin-right: 10px;
    }

    .value {
      flex: 1;
      text-align: right;
    }
  }
}
</style>
柳晓黑胡椒
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
echarts3的使用——绘制雨量流量关系图
As的博客
04-18 3344
承接上文，在webpack项目的基础上，绘制echarts图表 1.初始化 npm 环境并安装 echarts npm init npm install echarts --save 2.构建脚本前，会遇到一些小问题需安装一些依赖等等（碰上了你就知道了，缺什么百度什么） npm install -D grunt-cache-bust npm install -D fs-extra npm ins...
数据可视化 - 雨量流量关系图
YYDataV的博客
05-21 1892
import pyecharts.options as opts from pyecharts.charts import Line, Grid """ From Echarts Gallery: https://www.echartsjs.com/examples/zh/editor.html?c=grid-multiple """ timeData = [ "2009/6/12 2:00", "2009/6/12 3:00", "2009/6/12 4:00", ...
echarts实现水滴图
小小迎的博客
04-26 1094
【代码】echarts实现水滴图。
专业水利图表（Echarts）
qq_38498069的博客
03-25 575
收录专业水利图表，欢迎大家一起参与。
行业文档-设计装置-雨量水位视频一体化快装钢结构遥测站.zip
08-25
行业文档-设计装置-雨量水位视频一体化快装钢结构遥测站.zip
论文研究 - 雨量计网络密度对水文模型性能的影响
05-31
由于传统上雷达数据会受到时间误差的影响，因此通过使用雨量计数据使用平均场偏（MFB）方法对其进行了校正，然后将其进一步用作研究中的参考降水量。 通过交叉验证评估了逆距离加权（IDW）和普通克里格（OK）插值...
hydrology-forecasting.zip_hydrology_产流_水利_水文_蒸发模型
07-14
武汉大学水利水电学院水文与水资源工程专业全套水文预报程序集。包括前期影响雨量、三层蒸发、蓄满产流模型以及新安江模型和实时校正。
山洪灾害临界雨量分析计算gao-2.doc
12-07
山洪灾害临界雨量分析计算gao-2.doc
山洪灾害临界雨量分析报告计算gao-2.doc
11-26
山洪灾害临界雨量分析报告计算gao-2.doc
前端技术学习记录-基础知识（二）JavaScript基本语法
adanjeep的博客
07-11 203
/ 声明一个String类型的变量name name = "Alice";// 初始化变量name int age;// 声明一个int类型的变量age age = 25;// 初始化变量age。静态强类型：Java语言，在申明变量时，需要明确定于变量的类型。对明确申明的变量，需要做强制转换，才会发生变化，否则不变。//数字 a = "hahaha";//字符串 </script>动态弱类型语言：变量可以存放在不同类型的值（动态）=== 比较相等（不会进行隐式类型转换）>>> 无符号右移（逻辑右移）
如何搭建互联网医院系统源码？医疗陪诊APP开发实战详解
meihusdk的博客
07-11 277
希望本文能够为正在或即将从事相关开发的技术人员提供一些参考和帮助。通过不断的努力和创新，我们可以为患者提供更优质的医疗服务，推动医疗行业的数字化转型。
微信小程序开发笔记之”表单读不出数据“解决指南
qq_46396470的博客
07-12 308
脑瓜子好了后，忘记了表单控件必须要加上。提交后打印的字典是空的，卡了十几分钟。
Node多版本管理器NVM安装使用
GongWeiBuQi的博客
07-11 201
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
xiejunlan的博客
07-11 1410
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
Javafx利用fxml变换场景的小细节
2301_80311013的博客
07-09 907
在这个代码中，在JavaFX中，FXMLLoader是用来加载FXML文件并将其转换为Java对象（例如控制器类）的工具。当您使用FXMLLoaderFXMLLoader在整个过程中，FXMLLoader是使用JavaFX的后台线程（也称为JavaFX线程）来执行这些操作的，这是为了保持UI线程的响应性。这意味着在用户界面（UI）线程中，您不会看到任何阻塞，即使FXMLLoader正在执行耗时的操作。当FXMLLoader完成加载并调用load()方法时，它会返回一个Parent。
this指向解析
最新发布
Zrf2191318455的博客
07-14 266
2.3：调用构造函数personA中的show2函数，为箭头函数，指向外层最近的普通函数的this，在第一题中，person1只是一个对象，所以指向windows，但是在第二题中，personA为构造函数，show2指向的就是personA，所以依旧打印personA。1.8：调用person1中的show4函数，并再次调用返回函数，show4为普通函数，返回函数为箭头函数，箭头函数的this指向为外面最近一层普通函数的this，即show4的this，因此打印person1。
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
yunmoon的博客
07-10 1057
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
前端工具-json-server
zhangankang的博客
07-14 89
以项目为例，介绍前端mock数据的方式；
基于单片机的雨量检测系统设计(论文+源码)-kaic.docx
12-17
目 录 第1章 绪论 1.1 研究背景及现况 1.2 国内外研究现状 1.3 研究方法 第2章 系统设计 2.1 系统总体方案设计 2.2 设计系统方案 2.2.1 单片机选择 2.2.2 雨滴传感器选择 2.2.3 无线收发模块选择 2.2.4 显示器选择 第3章 硬件设计 3.1 微控制器电路设计 3.2 雨滴传感模块电路设计 3.3 无线收发模块电路设计 3.4 显示模块电路设计 3.5 系统电路原理图 第4章 软件设计 4.1 采集端软件设计 4.1.1 雨滴传感模块软件设计 4.1.2 NRF24L01无线发送软件设计 4.2 接收端软件设计 4.2.1 NRF24L01无线接收软件设计 4.2.2 OLED显示模块软件设计 第5章 系统调试 5.1 硬件测试 5.2 测试结果及分析 结 论 参考文献 致 谢 附 录 附录A 原理图 附录B 程序

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柳晓黑胡椒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值