uniApp实战六：Echart图表集成

文章目录

1.最终效果预览

2.顶部时间选择，中间echart图，底部监测项

复制代码

<view class="button-group-top">
			<button v-for="(item, index) in buttonList" :key="index"
				:class="['time-btn', { 'active': currentBtnIndex === index }]" @click="handleClick(index,item)">
				{{ item.name }}
			</button>
		</view>

		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts">
		</view>

		<view class="btn-group">
			<view v-for="(item, index) in project" :key="index"
				:class="['btn-item', { active: currentIndex === index }]" @click="switchIndicator(index,item)">
				{{ item.structName }}
			</view>
		</view>

3.Echart集成

在uni插件市场找到插件renderjs-echarts-demo，我们运行demo就可以出现一个柱状图，我们基于这个demo改造下我们的项目即可。

复制代码

<script module="echarts" lang="renderjs">
	let myChart
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {

				const script = document.createElement('script')

				script.src = 'static/echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('echarts'))

				myChart.setOption(this.option)
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {

				myChart.setOption(newValue)
			},
			onClick(event, ownerInstance) {

				ownerInstance.callMethod('onViewClick', {
					test: 'test'
				})
			}
		}
	}
</script>

4.集成网络请求

复制代码

uni.request({
					url: 'xxxx', 
					data: obj,
					success: (res) => {
						this.initData(res.data.data)
					}
				});

在页面中直接用这个网络请求就能拿到数据，不知道为啥将网络请求封装后发反而拿不到数据了，返回的参数多了好几层

5.底部按钮切换调用方法

复制代码

switchIndicator(index, item) {
				this.currentIndex = index
				this.getSluiceMoniDataPicitemId(item.siteItemId)
			}
            
            getSluiceMoniDataPicitemId(siteItemId) {
				let arr = this.project.filter(item => {
					return siteItemId == item.siteItemId
				})
				if (arr && arr.length > 0) {
					this.structName = arr[0].structName
				}
				this.siteItemId = siteItemId;
				this.getDataByTime()
			}

6.调用接口获取echart数据

复制代码

getEchartData(obj) {
				this.yArr = []
				this.xArr = []
				uni.request({
					url: 'xxxxx', 
					data: obj,
					success: (res) => {
						let arr = res.data.data;
						for (let i in arr) {
							if (arr[i].DATA_TIME) {
								this.yArr.push(arr[i].DATA_VALUE)
								this.xArr.push(arr[i].DATA_TIME)
							}
						}
						if (this.yArr) {
							this.addOption();
						}

					}
				});


			}

7.设置echart图的option

复制代码

addOption() {
				this.option = {
					grid: {
						left: '7%',
						right: '5%',
						bottom: '11%',
						top: '7%',
						containLabel: true
					},
					xAxis: [{
						splitLine: {
							show: false
						},
						type: 'category',
						boundaryGap: true,
						data: this.xArr
					}],
					yAxis: [{
						type: 'value',
						splitLine: {
							show: true
						},
					}],
					series: [{
						name: '',
						type: 'line',
						stack: '总量',
						smooth: true,
						symbol: 'none',
						areaStyle: {
							normal: {
								color: 'rgba(255,255,255,0.4)'
							}
						},
						itemStyle: {
							normal: {
								color: 'rgba(3,169,244,1)'
							}
						},
						lineStyle: {
							normal: {
								color: 'blue'
							}
						},
						data: this.yArr
					}]
				}
			}

8.顶部时间点击方法

复制代码

handleClick(index, item) {
				this.currentBtnIndex = index
				this.btnHourValue = item.value
				this.getDataByTime()
			}
            
            getDataByTime(){
				let tTime = new Date()
				let endTimeValue = timeFormat(tTime, 'yyyy-MM-dd HH:mm:ss')
				let sValue = tTime.setHours(tTime.getHours() - parseInt(this.btnHourValue)) // value小时前
				let startTimeValue = timeFormat(sValue, 'yyyy-MM-dd HH:mm:ss')
				
				let obj = {
					'itemMoniId': this.siteItemId,
					'startTime': startTimeValue,
					'endTime': endTimeValue,
				}
				this.getEchartData(obj);
			}