Vue3Echarts写关于温湿度统计的好看折线图

已于 2024-07-01 14:13:11 修改
阅读量326 收藏
点赞数 12
分类专栏： 前端 文章标签： echarts 前端 javascript
于 2024-07-01 14:12:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56164131/article/details/140099430
版权

在项目统计界面，我们离不开对Echarts的使用，接下来是我在做项目过程中做的一个关于温湿度统计的好看折线图，统计的是温度蓝色和湿度绿色，它们还会有告警和断电，分别用橘黄色和红色区分，以下是示例：

下载Echarts

//npm
npm install echarts --save

//淘宝镜像cnpm(安装速度快)
cnpm install echarts --save

//yarn
yarn add echarts

代码案例

<template>
    <div id="echartsOne" style="width: 100%;height: 100%;"></div>
</template>

<script setup>
    import * as echarts from 'echarts';
    import { onMounted,ref } from 'vue';
    onMounted(()=>{
        getEcharts();
    })
    const getEcharts = () => {
        let chartDom = document.getElementById("echartsOne");
        let myChart = echarts.init(chartDom);
        let wsdList = [{
      	createTime: "10:20",
      	humStatus: 0,
      	humidity: "59.4",
      	isOff: 0,
      	tempStatus: 0,
      	temperature: "28.8",
      }, {
      	createTime: "10:21",
      	humStatus: 0,
      	humidity: "59.4",
      	isOff: 1,
      	tempStatus: 0,
      	temperature: "28.8",
      }, {
      	createTime: "10:22",
      	humStatus: 0,
      	humidity: "59.4",
      	isOff: 0,
      	tempStatus: 1,
      	temperature: "28.8",
      }, {
      	createTime: "10:23",
      	humStatus: 0,
      	humidity: "59.4",
      	isOff: 0,
      	tempStatus: 0,
      	temperature: "28.8",
      }, {
      	createTime: "10:24",
      	humStatus: 1,
      	humidity: "59.4",
      	isOff: 0,
      	tempStatus: 0,
      	temperature: "28.8",
      }, {
      	createTime: "10:25",
      	humStatus: 0,
      	humidity: "59.4",
      	isOff: 1,
      	tempStatus: 0,
      	temperature: "28.8",
      }, {
      	createTime: "10:26",
      	humStatus: 1,
      	humidity: "59.4",
      	isOff: 0,
      	tempStatus: 0,
      	temperature: "28.8",
      },]
      let rq = []
      rq = wsdList.map(val => {
      	return val.createTime
      })
      let seriesArr = []
      let list = [{
      		name: "温度",
      		children: wsdList.map(val => {
      			let temp0 = val.tempStatus == 0 ? `rgb(68, 247, 227)` : `rgb(240, 128, 19)`;
      			return {
      				name: val.createTime,
      				value: val.isOff == 1 ? 6 : val.temperature,
      				isOff: val.isOff,
      				offTime: val.offTime ? val.offTime : "",
      				itemStyle: {
      					color: {
      						type: 'radial',
      						x: 0.5,
      						y: 0.5,
      						r: 0.5,
      						colorStops: [{
      								offset: 0,
      								color: val.isOff == 1 ? 'rgb(191, 53, 44)' : temp0, //中心颜色
      							},
      							{
      								offset: 0.4,
      								color: val.isOff == 1 ? 'rgb(191, 53, 44)' : temp0,
      							},
      							{
      								offset: 0.5,
      								color: '#ffffff00',
      							},
      							{
      								offset: 1,
      								color: '#ffffff00',
      							},
      						],
      					},
      					borderColor: val.isOff == 1 ? 'rgb(191, 53, 44)' : temp0,
      					borderWidth: 2,
      				},
      				lineStyle: {
      					type: "dashed",
      					color: val.isOff == 1 ? 'rgb(191, 53, 44)' : temp0,
      					width: 2,
      				},
      				label: {
      					show: false,
      					// show: val.isOff == 1 ? false : true
      				}
      			}
      		})
      	},
      	{
      		name: "湿度",
      		children: wsdList.map(val => {
      			let hum0 = val.humStatus == 0 ? `rgb(36, 214, 129)` : `rgb(240, 128, 19)`;
      			return {
      				name: val.createTime,
      				value: val.isOff == 1 ? 10 : val.humidity,
      				isOff: val.isOff,
      				itemStyle: {
      					color: {
      						type: 'radial',
      						x: 0.5,
      						y: 0.5,
      						r: 0.5,
      						colorStops: [{
      								offset: 0,
      								color: val.isOff == 1 ? 'rgb(191, 53, 44)' : hum0, //中心颜色
      							},
      							{
      								offset: 0.4,
      								color: val.isOff == 1 ? 'rgb(191, 53, 44)' : hum0,
      							},
      							{
      								offset: 0.5,
      								color: '#ffffff00',
      							},
      							{
      								offset: 1,
      								color: '#ffffff00',
      							},
      						],
      					},
      					borderColor: val.isOff == 1 ? 'rgb(191, 53, 44)' : hum0,
      					borderWidth: 2,
      				},
      				// lineStyle: {
      				//     type: "dashed",
      				//     color: val.isOff==1?'rgb(191, 53, 44)':hum0,
      				//     width: 2,
      				// },
      				label: {
      					show: false,
      					// show: val.isOff == 1 ? false : true,
      				}
      			}
      		})
      	}
      ]
      let colorArr = ["68, 247, 227", "36, 214, 129", "191, 53, 44"]
      list.forEach((val, index) => {
      	seriesArr.push({
      		yAxisIndex: val.name == "温度" ? 1 : 0,
      		xAxisIndex: 0,
      		name: val.name,
      		type: 'line',
      		data: val.children,
      		markLine: {
      			symbol: ['none', 'none'],
      			label: {
      				formatter: '{b}',
      				show: true,
      			},
      			data: [{
      				lineStyle: {
      					type: 'dashed',
      					color: "rgba(191, 53, 44,0)",
      					width: 2,
      				},
      				name: '断电',
      				label: {
      					color: "rgb(191, 53, 44)",
      					fontWeight: 600,
      					fontFamily: "黑体",
      					fontSize: 14,
      				},
      				yAxis: val.name == "湿度" ? 10 : 6,
      			}],
      		},
      		smooth: false,
      		symbolSize: 15,
      		symbol: 'circle',
      		showAllSymbol: true,
      		itemStyle: {
      			color: {
      				type: 'radial',
      				x: 0.5,
      				y: 0.5,
      				r: 0.5,
      				colorStops: [{
      						offset: 0,
      						color: `rgb(${colorArr[index]})`, //中心颜色
      					},
      					{
      						offset: 0.4,
      						color: `rgb(${colorArr[index]})`,
      					},
      					{
      						offset: 0.5,
      						color: '#ffffff00',
      					},
      					{
      						offset: 1,
      						color: '#ffffff00',
      					},
      				],
      			},
      			borderColor: `rgb(${colorArr[index]})`,
      			borderWidth: 2,
      		},
      		label: {
      			show: true,
      			position: val.name == "湿度" ? 'top' : "bottom",
      			textStyle: {
      				color: '#fff',
      				fontSize: 12
      			},
      			formatter: function(arr) {
      				return val.name == "温度" ? arr.value : arr.value + '%'
      			}
      		},
      		lineStyle: {
      			type: "dashed",
      			color: `rgb(${colorArr[index]})`,
      			width: 2,
      		}
      	})
      })
      let endNum = 5 / wsdList.length * 100
      let option = {
      	backgroundColor: "#06444a",
      	dataZoom: [{
      			type: 'inside',
      			start: 100 - (endNum > 100 ? 100 : endNum),
      			end: 100,
      			zoomLock: true, //定当前窗口，将缩放修改为左右偏移窗口
      		},
      		{
      			type: 'slider',
      			start: 100 - (endNum > 100 ? 100 : endNum),
      			end: 100,
      			zoomLock: true, //定当前窗口，将缩放修改为左右偏移窗口
      			height: 20,
      			showDetail: false,
      			brushSelect: false,
      		},
      	],
      	tooltip: {
      		trigger: 'axis',
      		axisPointer: {
      			lineStyle: {
      				color: '#ddd'
      			}
      		},
      		backgroundColor: 'rgba(255,255,255,1)',
      		padding: [5, 10],
      		textStyle: {
      			color: '#000',
      		},
      		formatter: function(params) {
      			return params[0].data.isOff == 1 ? `<div style='color:red;'>断电开始时间<br/>
                                  ${params[0].data.offTime.split(' ')[0]}<br/>
                                  ${params[0].data.offTime.split(' ')[1]}</div>` : `<div>
                              <div>${params[0].data.name}</div>
                              <div style='display:flex;align-items:center;'>
                                  温度：<b>${params[0].data.value}℃</b>
                              </div>
                              <div style='display:flex;align-items:center;'>
                                  湿度：<b>${params[1].data.value}%</b>
                              </div>
                          </div>`
      		}
      	},
      	legend: {
      		left: "center",
      		top: "0%",
      		textStyle: {
      			color: '#fff',
      			fontSize: 14,
      			fontWeight: 600
      		},
      		data: ["湿度", "温度", "告警", "断电"]
      	},
      	grid: {
      		left: '2%',
      		right: '3%',
      		bottom: '10%',
      		top: '10%',
      		containLabel: true
      	},
      	xAxis: [{
      		type: 'category',
      		data: rq,
      		axisTick: {
      			show: false
      		},
      		axisLine: {
      			lineStyle: {
      				color: '#bbdce0'
      			}
      		},
      		axisLabel: {
      			// margin: 10,
      			textStyle: {
      				fontSize: 12,
      				color: "#bbdce0",
      				fontWeight: 600
      			}
      		},
      		splitArea: {
      			show: true,
      			areaStyle: {
      				color: ["rgba(250,250,250,0.08)", "rgba(250,250,250,0)"]
      			}
      		}
      	}, {
      		type: 'category',
      		boundaryGap: false,
      		axisLabel: {
      			show: false
      		}
      	}],
      	yAxis: [{
      		name: "(%)",
      		type: 'value',
      		splitLine: {
      			show: true,
      			lineStyle: {
      				type: "dashed",
      				color: ['rgba(58, 129, 132,.6)']
      			}
      		},
      		axisTick: {
      			show: false
      		},
      		axisLine: {
      			show: true,
      			lineStyle: {
      				fontSize: 12,
      				color: '#bbdce0',
      			}
      		},
      		axisLabel: {
      			textStyle: {
      				fontSize: 12,
      				color: "#bbdce0",
      				fontWeight: 600
      			}
      		},
      		max: 100
      	}, {
      		name: "(℃)",
      		type: 'value',
      		splitLine: {
      			show: false,
      			lineStyle: {
      				type: "dashed",
      				color: ['#39868a']
      			}
      		},
      		axisTick: {
      			show: false
      		},
      		axisLine: {
      			show: true,
      			lineStyle: {
      				fontSize: 12,
      				color: '#bbdce0',
      			}
      		},
      		axisLabel: {
      			textStyle: {
      				fontSize: 12,
      				color: "#bbdce0",
      				fontWeight: 600
      			}
      		},
      		max: 60
      	}],
      	series: [...seriesArr, {
      		name: "告警",
      		type: 'line',
      		data: [],
      		smooth: false,
      		symbolSize: 15,
      		symbol: 'circle',
      		showAllSymbol: true,
      		itemStyle: {
      			color: {
      				type: 'radial',
      				x: 0.5,
      				y: 0.5,
      				r: 0.5,
      				colorStops: [{
      						offset: 0,
      						color: `rgb(240, 128, 19)`, //中心颜色
      					},
      					{
      						offset: 0.4,
      						color: `rgb(240, 128, 19)`,
      					},
      					{
      						offset: 0.5,
      						color: '#ffffff00',
      					},
      					{
      						offset: 1,
      						color: '#ffffff00',
      					},
      				],
      			},
      			borderColor: `rgb(240, 128, 19)`,
      			borderWidth: 2,
      		},
      		label: {
      			show: false
      		},
      		lineStyle: {
      			type: "dashed",
      			color: `rgb(240, 128, 19)`,
      			width: 2,
      		}
      	}, {
      		name: "断电",
      		type: 'line',
      		data: [],
      		smooth: false,
      		symbolSize: 15,
      		symbol: 'circle',
      		showAllSymbol: true,
      		itemStyle: {
      			color: {
      				type: 'radial',
      				x: 0.5,
      				y: 0.5,
      				r: 0.5,
      				colorStops: [{
      						offset: 0,
      						color: `rgb(191, 53, 44)`, //中心颜色
      					},
      					{
      						offset: 0.4,
      						color: `rgb(191, 53, 44)`,
      					},
      					{
      						offset: 0.5,
      						color: '#ffffff00',
      					},
      					{
      						offset: 1,
      						color: '#ffffff00',
      					},
      				],
      			},
      			borderColor: `rgb(191, 53, 44)`,
      			borderWidth: 2,
      		},
      		label: {
      			show: false
      		},
      		lineStyle: {
      			type: "dashed",
      			color: `rgb(191, 53, 44)`,
      			width: 2,
      		}
      	}]
      };
        myChart.setOption(option);
    }
</script>

运行结果

陈琦鹏
关注
  • 12
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
echarts温度计柱状图效果实现
童童童彤
12-14 3991
现在官网有部分的温度计图，但是很多都是一个温度计，最近工作过程中遇到了一个需要有很多温度计的柱状图，并且还要根据不同字段的值来改变每个温度计的颜色，稍微研究了一下，这里面的实现方式在这里给大家简单讲解一下吧。 我也很烦那些写了半天的话，代码还是零零散散的，那我就话不多说直接上整体代码吧（里面有讲解，肯定还有可以优化的地方，望大家多多指导） var echartOption = { thermometer: function (data, tagId, color) { let barSerise =
微信小程序：折线图，仿墨迹天气的气温折线图----echarts
Crazy_GirlLL的博客
12-17 2278
参考： 这是wx-charts的文档：参数配置：https://github.com/xiaolin3303/wx-charts/issues/56 如何使用和一些例子：https://blog.csdn.net/m0_37938910/article/details/80744562 https://blog.csdn.net/u012011360/article/details/84968489
Vue+Echarts+API 实现折线图对农地温湿度采集功能
Lushengshi的博客
08-10 1469
农田农作物种植最主要受到的环境因素一般有温度、湿度等等，这两个环境因素的不同，可以影响到农物的生长，所以我们要设计的是一个可以实时获取到现场农田的温湿度的设备--温湿度模块，这里我们就不详述，通过模块可以得到数据，将数据存在后端数据库，实现前后端分离，这样我们只需要将后端那边得到整理好的数据，以我们的方式将它展示出来就好了。...
vue3 封装ECharts组件
Huangxianlong的博客
04-26 5342
前端开发需要经常使用ECharts图表渲染数据信息，在一个项目中我们经常需要使用多个图表，选择封装ECharts组件复用的方式可以减少代码量，增加开发效率。
动态 Echarts 温湿度示意图 背景可以随温度变化
无线智能模块 可视DIY智能专家
07-22 2467
效果展示 源代码（h5） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 初始化移动浏览显示 --> <meta http-equiv="Content-Type" .
echarts实现温度曲线折线图
小太阳的博客
08-31 4026
如图所示： 首先我想到了使用echarts，用属性控制x轴y轴的隐藏，然后修改拐点以及折线上的文字 代码： 图表组件 <template> <div id="tem-chart" style=" height: 120px" /> </template> <script> const echarts = require('echarts'); export default { name: 'TemChart', props: {
Echarts实现双排图片天气预报，包含最低气温及最高气温加风向
m0_45256829的博客
10-25 776
该echarts图表用于展示七天天气数据，（包含最高气温、最低气温、天气对应的天气图标展示，图表可自行替换本地图片、包含风向和风力强度）
echarts 实现类似心电图效果，随时间后移
weixin_44941581的博客
10-18 2060
// -----温湿度 initCharts_wenshidu (echartsId) { let that = this // this.clearTiming_huozai_err() // 将定时器清除掉！！ var i = 0 var j = 0 function randomData1 () { // 温度 now = new Date(+now + 1000) // 间隔时间要和下面的定时间隔对应 .
easyEcharts3.5移动端echarts，折线，雷达，柱状，地图，饼图，温度计，水球纯js绘制canvas渲染
huo611的博客
06-02 1323
pc端实例：http://jstopo.top 网站本人微信号：jays611 easyEcharts又称简易echarts（本人针对uniapp 的canvas纯JS源码绘制， 如出现bug可以及时在论坛或联系微信，会及时修改。更新时间：2021-05-15 16:29 性能优越！不依赖任何JS包，让使用者可以自行查看分析原理，修改源码！） 0.new 雷达图 参数实例： let grid = { x: dom.width/2,//占总canvas标签元素的宽度一半 y: dom.heig...
vue+echarts实现动态折线图的方法与注意
10-14
在Vue.js框架中结合ECharts库创建动态折线图，主要涉及到以下几个关键步骤和技术要点： 1. **引入ECharts库**： 在项目中安装ECharts依赖，可以通过npm或yarn进行安装： ``` npm install echarts ``` 2. **在...
在vue中使用echarts(折线图的demo,markline用法)
10-15
通过以上步骤，你已经在Vue中成功实现了ECharts折线图并添加了markline功能。你可以根据项目需求调整配置，以展示不同类型的图表和自定义标记线。记得在实际项目中根据实际情况调整样式和数据源，以满足实际需求。
vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）
10-17
在本文中，我们将探讨如何使用Vue.js和ECharts库来创建一个可拖动节点的折线图，并且支持拖动方向和上下限的设置。首先，我们要了解Vue和ECharts的基本概念。 Vue.js是一个轻量级的前端JavaScript框架，它采用组件...
HTML+VUE+Echarts折线图让某一个点闪烁
11-04
HTML+VUE+Echarts折线图让某一个点闪烁
前端面试题（12）答案版
最新发布
weixin_49062485的博客
06-30 383
在不同的操作系统上,设置环境变量的方式有所不同,比如在Windows上使用set命令,在Unix/Linux上使用export命令。-2） setImmediate：是Node.js中的特有API,属于微任务,会被添加到微任务队列中,在事件循环的微任务阶段执行。2) 执行完所有宏任务后,检查微任务队列(如Promise.then)是否有待执行的任务,依次执行。- 1）setTimeout：是宏任务,会被添加到宏任务队列中,在事件循环的宏任务阶段执行。在前端面试中,考察这些基本概念是非常常见的。
实战|记一次java协同办公OA系统源码审计
weixin_46239998的博客
06-26 1537
实战|记一次java协同办公OA系统源码审计
React useImperativeHandle Hook
hawk2014bj的博客
06-26 625
useImperativeHandle 在 React 为我提供了一个可以为 ref 绑定处理方法的 hook，useImperativeHandle 源码中可以看到实现了绑定以及清理的逻辑。
SPECweb2009调优指南
developersupport的博客
06-25 1545
 SPECweb2009 是衡量 Web 服务器性能和能效的标准化基准，可以对 Web 服务器的并发数进行性能测试，评测 Web 服务器能够支持的最大同时连接数的客户端/服务器（每秒能够响应的最大请求数）。为充分利用服务器性能，提升SPECweb2009测试结果，可通过增大系统进程数、优化服务器软件参数、绑核以及优化参数等。
新交友盲盒+付费进群二合一源码+视频教程
12年全栈程序开发
06-27 656
包括项目前端和后端的讲解、宝塔面板的安装教程，以及盲盒交友和付费进群二合一的搭建教程。无论你是技术小白还是有一定技术基础，都能轻松搭建出属于自己的盲盒交友平台。
用vue3+echarts写一个双y轴折线图
05-11
好的，以下是一个基于 Vue3 和 Echarts 的双 y 轴折线图实现： 1. 首先安装 Echarts： ``` npm install echarts --save ``` 2. 在 Vue3 组件中引入 Echarts： ```javascript import * as echarts from 'echarts' ``` 3. 在 Vue3 组件中定义数据和配置项并初始化 Echarts： ```javascript <template> <div class="chart-container"> <div ref="chart" class="chart"></div> </div> </template> <script> export default { name: 'DoubleLineChart', data() { return { chartData: { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: [ { type: 'value', name: 'y1' }, { type: 'value', name: 'y2' } ], series: [ { name: 'y1', type: 'line', data: [820, 932, 901, 934, 1290, 1330, 1320], yAxisIndex: 0 }, { name: 'y2', type: 'line', data: [10, 20, 30, 40, 50, 60, 70], yAxisIndex: 1 } ] } } }, mounted() { this.chart = echarts.init(this.$refs.chart) this.chart.setOption(this.chartData) } } </script> <style> .chart-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .chart { width: 600px; height: 400px; } </style> ``` 4. 在父组件中使用 DoubleLineChart 组件： ```javascript <template> <div class="app"> <DoubleLineChart /> </div> </template> <script> import DoubleLineChart from './components/DoubleLineChart.vue' export default { name: 'App', components: { DoubleLineChart } } </script> ``` 5. 运行项目，即可看到双 y 轴折线图的效果。 注意：这里的代码只是一个简单的示例，实际使用时需要根据自己的需求进行适当的修改。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

陈琦鹏

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

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

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

打赏作者

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

抵扣说明：

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

余额充值