IOT/SourceCode/ui/fbs-ui_app2/pages/home/components/pollution.vue

<template>
	<view class="container">
		<qiun-title-bar title="近一周排放统计" />
		<view class="charts-box">
			<view class="charts-box">
				<qiun-data-charts
					canvasId="chart31"
					:canvas2d="isCanvas2d"
					type="area"
					:opts="{
						dataLabel: false,
						xAxis: {
							boundaryGap: 'justify',
						},
						extra: { area: { type: 'curve', addLine: true, gradient: true } },
					}"
					:chartData="data1"
				/>
			</view>
		</view>
		<qiun-title-bar title="区域排放统计" />
		<view class="charts-box"><qiun-data-charts type="column" canvasId="chart32" :canvas2d="isCanvas2d" :opts="{ dataLabel: false, xAxis: { boundaryGap: 'center' }, extra: { column: { type: 'group', width: 15, activeBgColor: '#000000', activeBgOpacity: 0.08, linearType: 'custom', seriesGap: 5, linearOpacity: 0.5, barBorderCircle: true } } }" :chartData="data2" /></view>
	</view>
</template>
<script>
import api from "@/common/api.js";
import { log } from "@/utils/base.js";
export default {
	name: "pollution",
	data() {
		return {
			data1: { categories: [], series: [] },
			data2: { categories: [], series: [] },
			//#ifndef MP-WEIXIN
			isCanvas2d: false,
			//#endif
			//#ifdef MP-WEIXIN
			isCanvas2d: true,
			//#endif
		};
	},
	mounted() {
		this.getInfo();
	},
	methods: {
		getInfo() {
			api.getSmokeTendency(0).then(({ data }) => {
				//this.data1 = { categories: [], series: [] };
				data = data.chartData[0];
				this.data1.categories = data.categories.slice(-7).map(v => {
					return v.substr(5);
				});
				this.data1.series = data.series.map(v => {
					return {
						name: v.name.replace("排放总量", ""),
						data: v.data.slice(-7),
					};
				});
				//console.log("=========>>>>", this.data1);
			});
			api.getSmokeTendency(1).then(({ data }) => {
				//this.data1 = { categories: [], series: [] };
				data = data.chartData[0];
				this.data2.categories = data.categories;
				this.data2.series = data.series.map(v => {
					return {
						name: v.name.replace("排放总量", ""),
						data: v.data,
					};
				});
				//console.log("=========>>>>", this.data2);
			});
		},
	},
};
</script>

<style>
.container {
	padding: 10px 0;
	font-size: 14px;
	line-height: 24px;
}
.charts-box {
	width: 100%;
	height: 300px;
}
</style>