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 myChartexport 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 = indexthis.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 = indexthis.btnHourValue = item.valuethis.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);}