uniapp 根据后台返回数据，循环展示echarts

最新推荐文章于 2024-06-19 11:01:44 发布
最新推荐文章于 2024-06-19 11:01:44 发布
阅读量2.1k 收藏 1
点赞数
文章标签： web app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39650950/article/details/108799681
版权

备注：开始用了Ucharts --样式还可以，但是根据业务需要根据不同选择时间返回的数据条数不定，需要加横向滚动条，Ucharts加完后，页面Ucharts区块不能竖向滚动了，加了Ucharts群，也没解决竖向滚动问题，过段放弃Ucharts，开始了echarts的进坑之旅。
采用的是echarts-renderjs 插件
取模计算的方式来定义需要显示哪个echarts,拼装optionArr数组。
如果把echartsoption定义在data里，会导致Id重复，只能渲染最后四个

<uni-collapse-item v-for="(item,index) in list" :title="item.name" :key="index">
	<echarts class="temper-history-echarts"  :option="optionArr[index]" style="height:660rpx;"></echarts>
</uni-collapse-item>

<script>
	import Echarts from '@/components/echarts/echarts.vue'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				startTime: currentDate,
				endTime: currentDate,
				autoplay: false,
				tabIndex: 0,
				list: [],
				optionArr: [],
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			this.getTemperHistory()
		},
		methods: {
			
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				// console.log(year - month - day)
				return `${year}-${month}-${day}`;
			},
	
			//获取 历史数据
			getTemperHistory() {
				let _this = this;
			
				this.$ajax.get({
					url: `/public`,
					param: {
						startTime:_this.startTime,
						endTime: _this.endTime
					}
				}).then((res) => {

					if (res.data.code == 200) {
						if (res.data.data.length == 0) {
							_this.listLength = 0
						} else {
							_this.list = res.data.data
							// console.log("_this.list")
							// console.log(_this.list)
							_this.listLength = res.data.data.length
							// optionArr
							// console.log('取余')
							// console.log(_this.listLength % 4)
							_this.optionArr = []
							for (var i = 0; i < _this.listLength; i++) {
								// console.log(i)
								if (i % 4 == 0) {
									_this.optionArr[i] = {
										notMerge: true,
										tooltip: {
											trigger: 'axis',
											"triggerOn": "click"
										},
										grid: {
											top: '15%',
											left: '15%',
											right: '5%',
											bottom: '10%',
											// containLabel: true
										},
										xAxis: [{
											type: 'category',
											boundaryGap: true,
											axisLine: { //坐标轴轴线相关设置。数学上的x轴
												show: true,
												lineStyle: {
													color: '#169CFF'
												},
											},
											axisLabel: { //坐标轴刻度标签的相关设置
												textStyle: {
													color: '#999999',
												},
											},
											axisTick: {
												show: true,
											},
											data: ['0', '4', '8', '12', '16', '20', ],
										}],
										yAxis: [{
											type: 'value',
											name: "（度）",
											nameTextStyle: {
												color: '#333',
												fontSize: 16
											},
											min: 0,
											splitNumber: 5,
											splitLine: {
												lineStyle: {
													type: 'dashed',
													color: '#D4D4D4'
												}
											},
											axisLine: {
												show: false,
											},
											axisLabel: {
												margin: 20,
												textStyle: {
													color: '#999999',

												},
											},
											axisTick: {
												show: false,
											},
										}],
										series: [{
											name: '注册总量',
											type: 'line',
											smooth: true, //是否平滑曲线显示
											// 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
											showAllSymbol: true,
											symbol: 'emptyCircle',
											symbolSize: 12,
											lineStyle: {
												normal: {
													width: 3,
													color: "#309E51", // 线条颜色
												},
												borderColor: '#f0f',
											},
											label: {
												show: true,
												position: 'top',
												textStyle: {
													color: '#707070',
													fontSize: 15
												}
											},
											itemStyle: {
												normal: {
													color: "#fff",
													borderColor: "#309E51",
													borderWidth: 3,
												}
											},
											tooltip: {
												show: false
											},
											data: [150, 200, 270, 300, 240, 250]
										}]
									}
								} else if (i % 4 == 1) {
									console.log(i)
									_this.optionArr[i] = {
										notMerge: true,
										tooltip: {
											trigger: 'axis',
											"triggerOn": "click"
										},
										grid: {
											top: '15%',
											left: '15%',
											right: '5%',
											bottom: '10%',
											// containLabel: true
										},
										xAxis: [{
											type: 'category',
											boundaryGap: true,
											axisLine: { //坐标轴轴线相关设置。数学上的x轴
												show: true,
												lineStyle: {
													color: '#169CFF'
												},
											},
											axisLabel: { //坐标轴刻度标签的相关设置
												textStyle: {
													color: '#999999',
													// margin: 15,
												},
											},
											axisTick: {
												show: true,
											},
											data: ['0', '4', '8', '12', '16', '20', ],
										}],
										yAxis: [{
											type: 'value',
											name: "（度）",
											nameTextStyle: {
												color: '#333',
												fontSize: 16
											},
											min: 0,
											// max: 140,
											splitNumber: 5,
											splitLine: {
												lineStyle: {
													type: 'dashed',
													color: '#D4D4D4'
												}
											},
											axisLine: {
												show: false,
											},
											axisLabel: {
												margin: 20,
												textStyle: {
													color: '#999999',

												},
											},
											axisTick: {
												show: false,
											},
										}],
										series: [{
											type: 'bar',
											barWidth: 6,
											itemStyle: {
												normal: {
													color: "#27BDFF",
													barBorderRadius: [30, 30, 0, 0],
												}
											},
											data: [150, 200, 270, 300, 240, 250]
										}]
									}
								} else if (i % 4 == 2) {
									_this.optionArr[i] = {
										notMerge: true,
										tooltip: {
											trigger: 'axis',
											"triggerOn": "click"
										},
										grid: {
											top: '15%',
											left: '15%',
											right: '5%',
											bottom: '10%',
											// containLabel: true
										},
										xAxis: [{
											type: 'category',
											boundaryGap: true,
											axisLine: { //坐标轴轴线相关设置。数学上的x轴
												show: true,
												lineStyle: {
													color: '#169CFF'
												},
											},
											axisLabel: { //坐标轴刻度标签的相关设置
												textStyle: {
													color: '#999999',
													// margin: 15,
												},
											},
											axisTick: {
												show: true,
											},
											data: ['0', '4', '8', '12', '16', '20', ],
										}],
										yAxis: [{
											type: 'value',
											name: "（度）",
											nameTextStyle: {
												color: '#333',
												fontSize: 16
											},
											min: 0,
											// max: 140,
											splitNumber: 5,
											splitLine: {
												lineStyle: {
													type: 'dashed',
													color: '#D4D4D4'
												}
											},
											axisLine: {
												show: false,
											},
											axisLabel: {
												margin: 20,
												textStyle: {
													color: '#999999',

												},
											},
											axisTick: {
												show: false,
											},
										}],
										series: [{
											type: 'line',
											smooth: true, //是否平滑曲线显示
											// 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
											showAllSymbol: true,
											symbol: 'emptyCircle',
											symbolSize: 12,
											lineStyle: {
												normal: {
													width: 3,
													color: "#FFA114", // 线条颜色
												},
												borderColor: '#f0f',
											},
											areaStyle: {
												normal: {
													color: 'rgba(255, 161, 20, 0.1)',
													shadowColor: 'rgba(0, 0, 0, 0.1)',
													shadowBlur: 10
												},
											},
											label: {
												show: true,
												position: 'top',
												textStyle: {
													color: '#707070',
													fontSize: 15
												}
											},
											itemStyle: {
												normal: {
													color: "#fff",
													borderColor: "#FFA114",
													borderWidth: 3,

												}
											},
											tooltip: {
												show: false
											},
											data: [0, 200, 270, 300, 240, 250]
										}]
									}
								} else if (i % 4 == 3) {
									_this.optionArr[i] = {
										notMerge: true,
										tooltip: {
											trigger: 'axis',
											"triggerOn": "click"
										},
										grid: {
											top: '15%',
											left: '15%',
											right: '5%',
											bottom: '10%',
											// containLabel: true
										},
										xAxis: [{
											type: 'category',
											boundaryGap: true,
											axisLine: { //坐标轴轴线相关设置。数学上的x轴
												show: true,
												lineStyle: {
													color: '#169CFF'
												},
											},
											axisLabel: { //坐标轴刻度标签的相关设置
												textStyle: {
													color: '#999999',
													// margin: 15,
												},
											},
											axisTick: {
												show: true,
											},
											data: ['0', '4', '8', '12', '16', '20', ],
										}],
										yAxis: [{
											type: 'value',
											name: "（度）",
											nameTextStyle: {
												color: '#333',
												fontSize: 16
											},
											min: 0,
											// max: 140,
											splitNumber: 5,
											splitLine: {
												lineStyle: {
													type: 'dashed',
													color: '#D4D4D4'
												}
											},
											axisLine: {
												show: false,
											},
											axisLabel: {
												margin: 20,
												textStyle: {
													color: '#999999',

												},
											},
											axisTick: {
												show: false,
											},
										}],
										series: [{
											type: 'bar',
											barWidth: 12,
											itemStyle: {
												normal: {
													color: "#8F77C9",
													barBorderRadius: [30, 30, 0, 0],
												}
											},
											data: [150, 200, 270, 300, 240, 250]
										}]
									}
								} else {
									console.log('空')
								}
								_this.optionArr[i].xAxis[0].data = res.data.data[i].categories
								_this.optionArr[i].series[0].data = res.data.data[i].data
								_this.optionArr[i].yAxis[0].name = res.data.data[i].unit
							}
						}
					}

				})
			},
			searchClick() {
				this.getTemperHistory()
			},
			
		},
	}
</script>
sherry0731
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp-Echarts.zip
07-25
【标题】: "uniapp-Echarts.zip" 是一个关于在uni-app中集成Echarts的压缩包，用于在uni-app项目中实现数据可视化功能。 【描述】: 描述中提到的"uni-app如何引入Echarts？"是开发者在使用uni-app进行移动应用开发...
Ucharts仪表盘的循环问题
qq_43688809的博客
12-15 767
在使用uni-app中的ucharts时，我们发现该组件确实好用，但是在循环使用时会比较麻烦，官方文档上也没有具体例子。 1.这里要动态修改他的id 2.初始化变量时不需要定义循环体的结构 3.在获取接口数据后循环调用下面的函数 4，注意我们在调用函数过程中根据下标不同来调用，方法名开始为showGauge0.每次调用该方法时都会初始化一个新的canvaGauge。 ...
uni-app获取后台接口使用v-for双重循环渲染数据H5显示，app端不显示
四夕木木夕木木的博客
09-16 1万+
今天我获取后台接口，因为数据是二维数据，所以渲染到页面上我就使用了双重循环： <block v-for="(item, index) in tableList.data.maps" :key="item.staffId"> <view v-for="(itemList, indexList) in item.prod" :key="indexList"> <vi...
uni app 树状结构数据展示
最新发布
yuehua_zhang的博客
06-19 1205
注意 treedata 中 isshow 是翻着的 false 展示 true 隐藏 isopen 是正常 false 关闭 true 展开。name: '僧1-曾1-重1-孙1-子1-节点2',name: '僧1-曾1-重1-孙1-子2-节点2',name: '曾1-重1-孙1-子1-节点2',name: '曾1-重1-孙1-子2-节点2',树状数据展示，可以点击item 将点击数据给父组件 ，满足自己需求。name: '重1-孙1-子1-节点2',uselast 只能使用末级。
v-for遍历 Map 的 value 中存放的是一个 List
菇凉，不骄不躁
03-03 1644
下列代码展现的是一种比较复杂的情况，在 Map 的 value 中存放的是一个 List <view> <uni-collapse v-for="(item,index) in dataList" :key="index"> <uni-collapse-item :show-animation="true" :open="true" :title="item...
uniapp轮播图实例和动态获取实例
wanghongpu9305的博客
05-04 1522
在上面的示例中，我们从数据中动态生成了三个 `uni-swiper-item` 组件，并在 `uni-swiper` 组件中添加了 `change` 和 `tap` 事件监听器。在上面的示例中，我们使用 `uni-swiper` 组件包裹了三个 `uni-swiper-item` 组件，每个 `uni-swiper-item` 组件中包含一个 `image` 组件，用于显示轮播图中的图片。`autoplay` 和 `interval` 属性用于指定轮播图的自动播放和切换时间间隔。
【uni-app】轮播图
Qxn530的博客
09-13 7620
自定义轮播图，点击对应按钮，图片内容显示对应内容；点击左右按钮，实现图片切换；点击图片，实现图片放大预览详情图片；轮播图中有视频和图片
Echarts 多环饼图实现
weixin_53858977的博客
05-11 927
经两个（或以上）的数据种类，通过radius设置图形的半径堆叠出图形，itemStyle隐藏多余图形等方式渲染出图形大致形状，按自身实际业务场景完成配置后，按对应数据结构注入相应的数据即可实现
uniapp 里面echarts的使用
08-30
- `drawChart()`方法中定义你的图表配置项和数据，这可以根据ECharts官方文档来编写。 5. **动态更新数据** - 如果需要动态更新图表数据，可以通过调用`setOption()`方法并传入新的配置项来实现。 6. **自定义...
uview uniapp数据展示图表统计源码.zip
12-09
【标题】"uview uniapp数据展示图表统计源码.zip" 涉及的主要知识点是基于uView UI框架和uniApp开发的数据可视化和统计页面。uView UI是针对uniApp平台设计的一套全面、易用且高度可定制的组件库，而uniApp则是一个...
uniapp微信小程序使用Echarts组件
07-28
uniapp微信小程序使用Echarts组件,使用实例 <echarts class="uni-ec-canvas" ref="echarts2" :option="option" canvasId="echarts1" id='echarts2'></echarts>
uniapp echarts图表通过rander.js 展示折线图项目模板
06-29
在本项目模板中，"uniapp echarts图表通过render.js 展示折线图"，主要涉及了两个关键技术和一个工具。首先，我们要理解的是uni-app，这是一个跨平台的前端框架，它允许开发者使用Vue.js语法编写代码，一次编写，多...
uni-app：循环数据点击事件获取每行指定数据（获取参数）
weixin_46001736的博客
09-27 1470
uni-app：循环数据点击事件获取每行指定数据（获取参数）
uni-app实现联系人右侧索引字母表点击滚动到相应的位置(uni.pageScrollTo(OBJECT))
mini_1251861209的博客
12-19 5146
长话短说，直接用uni-app提供的接口：uni.pageScrollTo(OBJECT)，具体过程详细思路如下： 要实现点击字母滚动到相应的联系人 看到这个需求后的整个思路过程： 一、首先要跟后端沟通传过来的数据结构需要如下： /*friendsLists的数据格式:[ [],[],.....[] //一共27个数组，分别存不同字母开头的名字 ]*/ friendsLists: [...
uniapp实现页面重新加载 滚动到上次点击后的位置
qq_47244439的博客
09-11 688
方法来实现滚动(单独的pageScrollTo设置无效，加了定时器就生效了 目前不知道为什么)2.点击元素后，将其scrollTop存储，下次页面重新渲染时，通过。1.使用uniapp生命周期中的。监听滚动，获取滚动的位置。
uni-app：实现点击位置后进入地图上位置的选择，并将选择后的位置显示在页面上
qq_44429079的博客
04-18 3530
实现点击位置后进入地图上位置的选择，并将选择后的位置显示在页面上 给文本设置一个点击事件 <text @tap="wakeMap">{{positionName}}</text> 因为uni-app本身就有点击后选择位置的功能, uni.chooseLocation后出现的是这样的 完整方法为 wakeMap() { uni.chooseLocation({ success: (res) => { console.log('位置名称：'
uniapp 将元素滚动到指定位置的两种方法总结
热门推荐
铁锤妹妹的博客
09-28 3万+
使用 uni.pageScrollTo 方法，属于页面级别滚动。
vue和uniapp的v-for循环数据更新时，刷新dom节点
qq_38904192的博客
03-18 2966
uniapp或者vue在v-for循环的数据更新的时候，直接赋值是检测不到数据的更新去刷新dom节点的。 在vue官方文档“数组更新检测”https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B 中给出了通过**pop()和push()或者用vm.set(vm.ite...
uni-app,vue循环不同点击事件并传值
hjy170314的博客
12-22 1574
<view class="btnBox"> <view v-for="(item, index) in pageObj.btnList" :key="index"> <view class="page__bd"> <view class="page__bd page__bd_spacing title__bd walltBtnBox"> <image :src="walletImg[index]" clas.
uniapp解析后台返回的html
03-02
关于uniapp解析后台返回的html，我可以回答你一些相关信息。uniapp是一种跨平台的开发框架，可以帮助开发者快速构建移动端应用。如果后台返回的是HTML文本，可以使用uni-app提供的web-view组件进行展示。具体操作可以参考uni-app官方文档中的相关说明。此外，也可以使用第三方的HTML解析库进行解析和展示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值