|
|
@@ -0,0 +1,703 @@
|
|
|
+<style scoped lang="scss">
|
|
|
+.system-container {
|
|
|
+
|
|
|
+ :deep(.el-card__body) {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ .el-table {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.page-content {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.page-pager {
|
|
|
+ background-color: #fff;
|
|
|
+ height: 24px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<template>
|
|
|
+ <div class="system-container1 layout-padding">
|
|
|
+
|
|
|
+ <el-form
|
|
|
+ inline
|
|
|
+ :model="state.formQuery"
|
|
|
+ ref="queryRef"
|
|
|
+ size="default" label-width="0px" class="mt5 mb5">
|
|
|
+ <el-form-item>
|
|
|
+ <ext-select
|
|
|
+ v-model="state.formQuery.stationIdList"
|
|
|
+ placeholder="站点"
|
|
|
+ value-key="stationId"
|
|
|
+ label-key="stationName"
|
|
|
+ clearable
|
|
|
+ multiple
|
|
|
+ @on-change="loadData"
|
|
|
+ :data-list="state.stationList"
|
|
|
+ style="min-width: 150px;"
|
|
|
+ class=" mr10">
|
|
|
+ </ext-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-radio-group v-model="state.formQuery.type" size="default" @change="handleQueryTypeChange">
|
|
|
+ <el-radio-button label="day">天</el-radio-button>
|
|
|
+ <el-radio-button label="month">月</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ <el-date-picker
|
|
|
+ :value-format="state.dateFormat"
|
|
|
+ v-model="state.formQuery.dateRange"
|
|
|
+ :type="state.dateType"
|
|
|
+ @change="loadData"
|
|
|
+ unlink-panels
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ :shortcuts="shortcuts"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button class="ml10" plain size="default" type="success" @click="loadData()">
|
|
|
+ <SvgIcon name="ele-Search"/>
|
|
|
+ 查询
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-scrollbar>
|
|
|
+ <el-card>
|
|
|
+ <el-card shadow="hover" class="layout-padding-auto">
|
|
|
+ <template #header>充电用户及有效订单数</template>
|
|
|
+ <template #default>
|
|
|
+ <div style="min-height: 500px;padding: 20px;" ref="chartOneRef"></div>
|
|
|
+ </template>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card shadow="hover" class="layout-padding-auto mt10">
|
|
|
+ <template #header>电费/服务费</template>
|
|
|
+ <template #default>
|
|
|
+ <div style="min-height: 500px;padding: 20px;" ref="chartTwoRef"></div>
|
|
|
+ </template>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card shadow="hover" class="layout-padding-auto mt10">
|
|
|
+ <template #header>电量/平均电量</template>
|
|
|
+ <template #default>
|
|
|
+ <div style="min-height: 500px;padding: 20px;" ref="chartThreeRef"></div>
|
|
|
+ </template>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts" name="KanbanList">
|
|
|
+import {defineAsyncComponent, reactive, onMounted, onBeforeMount, ref, getCurrentInstance, nextTick, onUnmounted, markRaw} from 'vue';
|
|
|
+import {$body, $get} from "/@/utils/request";
|
|
|
+import {Msg} from "/@/utils/message";
|
|
|
+import * as echarts from 'echarts';
|
|
|
+
|
|
|
+import mittBus from '/@/utils/mitt';
|
|
|
+import ExtSelect from "/@/components/form/ExtSelect.vue";
|
|
|
+import u from "/@/utils/u";
|
|
|
+
|
|
|
+//定义引用
|
|
|
+const queryRef = ref();
|
|
|
+const chartOneRef = ref();
|
|
|
+const chartTwoRef = ref();
|
|
|
+const chartThreeRef = ref();
|
|
|
+
|
|
|
+const end = new Date()
|
|
|
+const start = new Date()
|
|
|
+start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
|
|
+
|
|
|
+
|
|
|
+//定义变量
|
|
|
+const state = reactive({
|
|
|
+ formQuery: {
|
|
|
+ stationIdList: [],
|
|
|
+ dateRange: [u.date.format(start, "YYYY-MM-DD"), u.date.format(end, "YYYY-MM-DD")],
|
|
|
+ type: 'day'
|
|
|
+ },
|
|
|
+ stationList: [],
|
|
|
+ chartOne: null as any,
|
|
|
+ chartTwo: null as any,
|
|
|
+ chartThree: null as any,
|
|
|
+ chartData: {},
|
|
|
+ theme: '',
|
|
|
+ dateType: 'daterange',
|
|
|
+ dateFormat: 'YYYY-MM-DD'
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+const shortcuts = [
|
|
|
+ {
|
|
|
+ text: '近7天',
|
|
|
+ value: () => {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
|
|
+ return [start, end]
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '近30天',
|
|
|
+ value: () => {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
|
|
+ return [start, end]
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '近90天',
|
|
|
+ value: () => {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
|
|
+ return [start, end]
|
|
|
+ },
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+
|
|
|
+// 监听双向绑定 modelValue 的变化
|
|
|
+// watch(
|
|
|
+// () => state.pageIndex,
|
|
|
+// () => {
|
|
|
+//
|
|
|
+// }
|
|
|
+// );
|
|
|
+
|
|
|
+//生命周期钩子
|
|
|
+onBeforeMount(() => {
|
|
|
+ loadStationList()
|
|
|
+})
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ loadData();
|
|
|
+});
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ state.chartOne?.dispose();
|
|
|
+ state.chartTwo?.dispose();
|
|
|
+ state.chartThree?.dispose();
|
|
|
+})
|
|
|
+
|
|
|
+window.onresize = function () {
|
|
|
+ //自适应大小
|
|
|
+ state.chartOne.resize();
|
|
|
+ state.chartTwo.resize();
|
|
|
+ state.chartThree.resize();
|
|
|
+};
|
|
|
+
|
|
|
+//region 方法区
|
|
|
+
|
|
|
+const handleQueryTypeChange = (type: string) => {
|
|
|
+ console.log(type)
|
|
|
+ if (type === 'day') {
|
|
|
+ state.dateType = 'daterange'
|
|
|
+ state.dateFormat = 'YYYY-MM-DD'
|
|
|
+ } else {
|
|
|
+ state.dateType = 'monthrange'
|
|
|
+ state.dateFormat = 'YYYY-MM-DD'
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const loadStationList = () => {
|
|
|
+ $get(`/station/listStation`, {pageNum: 1024}).then((res: any) => {
|
|
|
+ state.stationList = res;
|
|
|
+ state.formQuery.stationIdList = res.map(k=>k.stationId);
|
|
|
+ console.log(res)
|
|
|
+ setTimeout(()=>{
|
|
|
+ loadData();
|
|
|
+ },200)
|
|
|
+ }).catch(e => {
|
|
|
+ console.error(e)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// 初始化表格数据
|
|
|
+const loadData = () => {
|
|
|
+ console.log(state.formQuery)
|
|
|
+ let params = {
|
|
|
+ stationIds: state.formQuery.stationIdList,
|
|
|
+ startTime: state.formQuery.dateRange[0],
|
|
|
+ endTime: state.formQuery.dateRange[1],
|
|
|
+ type: state.formQuery.type
|
|
|
+ }
|
|
|
+ for (let i = 0; i < Object.keys(params).length; i++) {
|
|
|
+ if (u.isEmptyOrNull(params[Object.keys(params)[i]])) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ $get(`/stat/stationStatDetail`, params).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ state.chartData = res;
|
|
|
+ buildOrderChart()
|
|
|
+ buildMoneyChart()
|
|
|
+ buildElectricChart()
|
|
|
+ })
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * 充电人数、有限订单数散点图
|
|
|
+ */
|
|
|
+const buildOrderChart = () => {
|
|
|
+
|
|
|
+ if (state.chartOne) {
|
|
|
+ state.chartOne.dispose();
|
|
|
+ }
|
|
|
+ state.chartOne = markRaw(echarts.init(chartOneRef.value, state.theme));
|
|
|
+ let {type} = state.formQuery
|
|
|
+ let stationIdList = Object.keys(state.chartData);
|
|
|
+ if (u.isEmptyOrNull(stationIdList)) {
|
|
|
+ Msg.message('未查询到统计数据', 'error')
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let xAxis = state.chartData[`${stationIdList[0]}`].map((k: any) => type==='day'?k.statDay:k.statMonth);
|
|
|
+ let legends:Array<string> =[];
|
|
|
+ state.stationList.filter((k: any) => stationIdList.includes(k.stationId)).forEach(item=>{
|
|
|
+ legends.push(item.stationName)
|
|
|
+ // legends.push(item.stationName+'-平均订单电量')
|
|
|
+ // legends.push(item.stationName+'-平均充电电量')
|
|
|
+ })
|
|
|
+
|
|
|
+ const itemStyle = {
|
|
|
+ opacity: 0.8,
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowOffsetY: 0,
|
|
|
+ shadowColor: 'rgba(0,0,0,0.3)'
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ let y1Max = 0,y2Max=0;
|
|
|
+ let series: Array<any> = [];
|
|
|
+ stationIdList.forEach((stationId: string) => {
|
|
|
+ let tmpUserMax = Math.max(...state.chartData[`${stationId}`].map((k: any) => k.chargeUsers))
|
|
|
+ y1Max = Math.max(y1Max, tmpUserMax)
|
|
|
+
|
|
|
+ let tmpOrderMax = Math.max(...state.chartData[`${stationId}`].map((k: any) => k.validOrders))
|
|
|
+ y2Max = Math.max(y2Max, tmpOrderMax)
|
|
|
+
|
|
|
+ let station = state.stationList.find((k: any) => k.stationId == stationId);
|
|
|
+ let {stationName} = station;
|
|
|
+
|
|
|
+ series.push({
|
|
|
+ name: stationName,
|
|
|
+ type: 'scatter',
|
|
|
+ itemStyle:itemStyle,
|
|
|
+ data: state.chartData[stationId].map((k: any) => {
|
|
|
+ return [type==='day'?k.statDay:k.statMonth,k.chargeUsers,k.validOrders]
|
|
|
+ })
|
|
|
+ })
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ const schema = [
|
|
|
+ { name: 'date', index: 0, text: '日' },
|
|
|
+ { name: '充电人次', index: 1, text: '充电人次' },
|
|
|
+ { name: '有效订单', index: 2, text: '有效订单' },
|
|
|
+ ];
|
|
|
+
|
|
|
+ let option = {
|
|
|
+ color: ['#dd4444', '#fec42c', '#80F1BE','#353EE9'],
|
|
|
+ legend: {
|
|
|
+ top: 10,
|
|
|
+ data: legends,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '10%',
|
|
|
+ right: 150,
|
|
|
+ top: '18%',
|
|
|
+ bottom: '10%'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ backgroundColor: 'rgba(255,255,255,0.7)',
|
|
|
+ formatter: function (param) {
|
|
|
+ var value = param.value;
|
|
|
+ // prettier-ignore
|
|
|
+ return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
|
|
|
+ + value[0] + '</br> ' + param.seriesName + ''
|
|
|
+ + '</div>'
|
|
|
+ + schema[1].text + ':' + value[1] + '人<br>'
|
|
|
+ + schema[2].text + ':' + value[2] + '笔<br>'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: xAxis,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ name: '数量',
|
|
|
+ nameLocation: 'end',
|
|
|
+ nameGap: 20,
|
|
|
+ nameTextStyle: {
|
|
|
+ fontSize: 16
|
|
|
+ },
|
|
|
+ },
|
|
|
+ visualMap: [
|
|
|
+ {
|
|
|
+ left: 'right',
|
|
|
+ top: '10%',
|
|
|
+ dimension: 1,
|
|
|
+ min: 0,
|
|
|
+ max: y1Max,
|
|
|
+ itemWidth: 30,
|
|
|
+ itemHeight: 120,
|
|
|
+ calculable: true,
|
|
|
+ precision: 0.1,
|
|
|
+ text: ['圆形大小:充电人次'],
|
|
|
+ textGap: 30,
|
|
|
+ inRange: {
|
|
|
+ symbolSize: [10, 70]
|
|
|
+ },
|
|
|
+ outOfRange: {
|
|
|
+ symbolSize: [10, 70],
|
|
|
+ color: ['rgba(255,255,255,0.4)']
|
|
|
+ },
|
|
|
+ controller: {
|
|
|
+ inRange: {
|
|
|
+ color: ['#c23531']
|
|
|
+ },
|
|
|
+ outOfRange: {
|
|
|
+ color: ['#999']
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ left: 'right',
|
|
|
+ bottom: '5%',
|
|
|
+ dimension: 2,
|
|
|
+ min: 0,
|
|
|
+ max: y2Max,
|
|
|
+ itemHeight: 120,
|
|
|
+ text: ['明暗:有效订单数'],
|
|
|
+ textGap: 30,
|
|
|
+ inRange: {
|
|
|
+ colorLightness: [0.9, 0.5]
|
|
|
+ },
|
|
|
+ outOfRange: {
|
|
|
+ color: ['rgba(255,255,255,0.4)']
|
|
|
+ },
|
|
|
+ controller: {
|
|
|
+ inRange: {
|
|
|
+ color: ['#c23531']
|
|
|
+ },
|
|
|
+ outOfRange: {
|
|
|
+ color: ['#999']
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: series
|
|
|
+ };
|
|
|
+
|
|
|
+ console.log(option)
|
|
|
+ state.chartOne.setOption(option)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/**
|
|
|
+ * 充电量,柱状、折线图
|
|
|
+ */
|
|
|
+const buildElectricChart = () => {
|
|
|
+
|
|
|
+ if (state.chartThree) {
|
|
|
+ state.chartThree.dispose();
|
|
|
+ }
|
|
|
+ state.chartThree = markRaw(echarts.init(chartThreeRef.value, state.theme));
|
|
|
+ let {type} = state.formQuery
|
|
|
+ let stationIdList = Object.keys(state.chartData);
|
|
|
+ if (u.isEmptyOrNull(stationIdList)) {
|
|
|
+ Msg.message('未查询到统计数据', 'error')
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let xAxis = state.chartData[`${stationIdList[0]}`].map((k: any) => type==='day'?k.statDay:k.statMonth);
|
|
|
+ let legends:Array<string> =[];
|
|
|
+ state.stationList.filter((k: any) => stationIdList.includes(k.stationId)).forEach(item=>{
|
|
|
+ legends.push(item.stationName+'-总电量')
|
|
|
+ legends.push(item.stationName+'-平均充电电量')
|
|
|
+ legends.push(item.stationName+'-平均订单电量')
|
|
|
+ })
|
|
|
+
|
|
|
+ let y1Max = 0, y2Max = 0;
|
|
|
+ let series: Array<any> = [];
|
|
|
+ stationIdList.forEach((stationId: string) => {
|
|
|
+ let tmpUserMax = Math.max(...state.chartData[`${stationId}`].map((k: any) => k.totalPower))
|
|
|
+ y1Max = Math.max(y1Max, tmpUserMax)
|
|
|
+
|
|
|
+ let tmpOrderMax = Math.max(...state.chartData[`${stationId}`].map((k: any) => k.avgOrderElec))
|
|
|
+ y2Max = Math.max(y2Max, tmpOrderMax)
|
|
|
+
|
|
|
+ let station = state.stationList.find((k: any) => k.stationId == stationId);
|
|
|
+ let {stationName} = station;
|
|
|
+ series.push({
|
|
|
+ name: stationName+'-总电量',
|
|
|
+ type: 'bar',
|
|
|
+ barMaxWidth:20,
|
|
|
+ symbolSize: 6,
|
|
|
+ symbol: 'circle',
|
|
|
+ smooth: true,
|
|
|
+ itemStyle: { barBorderRadius: 5},
|
|
|
+ // tooltip: {
|
|
|
+ // trigger:'axis',
|
|
|
+ // formatter: ' {a0} {b}<br />{a} : {c}人 '
|
|
|
+ // },
|
|
|
+ data: state.chartData[stationId].map((k: any) => k.totalPower)
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ series.push({
|
|
|
+ name: stationName+'-平均充电电量',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ data: state.chartData[stationId].map((k: any) => k.avgConnectorElec)
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ series.push({
|
|
|
+ name: stationName+'-平均订单电量',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ yAxisIndex: 1,
|
|
|
+ data: state.chartData[stationId].map((k: any) => k.avgOrderElec)
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ y1Max = Math.max(y1Max, 80)
|
|
|
+ y2Max =Math.ceil(y2Max +10)
|
|
|
+
|
|
|
+ let y1Interval = Math.ceil(y1Max / 5)
|
|
|
+ let y2Interval = Math.ceil(y2Max / 5)
|
|
|
+
|
|
|
+
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ show:true,
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ crossStyle: {
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ // dataView: {show: true, readOnly: false},
|
|
|
+ // magicType: {show: true, type: ['line', 'bar']},
|
|
|
+ // restore: {show: true},
|
|
|
+ // saveAsImage: {show: true}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: legends
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ data: xAxis,
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '电量',
|
|
|
+ min: 0,
|
|
|
+ max: y1Max,
|
|
|
+ interval: y1Interval,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} 度'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '平均电量',
|
|
|
+ min: 0,
|
|
|
+ max: y2Max,
|
|
|
+ interval: y2Interval,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} 度'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: series
|
|
|
+ };
|
|
|
+ // console.log(option)
|
|
|
+ state.chartThree.setOption(option)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/**
|
|
|
+ * 充电金额 电费+服务费=总费用
|
|
|
+ */
|
|
|
+const buildMoneyChart = () => {
|
|
|
+ if (state.chartTwo) {
|
|
|
+ state.chartTwo.dispose();
|
|
|
+ }
|
|
|
+ state.chartTwo = markRaw(echarts.init(chartTwoRef.value, state.theme));
|
|
|
+ let {type} = state.formQuery
|
|
|
+ let stationIdList = Object.keys(state.chartData);
|
|
|
+ if (u.isEmptyOrNull(stationIdList)) {
|
|
|
+ Msg.message('未查询到统计数据', 'error')
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let xAxis = state.chartData[`${stationIdList[0]}`].map((k: any) => type==='day'?k.statDay:k.statMonth);
|
|
|
+ let legends:Array<string> =[];
|
|
|
+ state.stationList.filter((k: any) => stationIdList.includes(k.stationId)).forEach(item=>{
|
|
|
+ legends.push(item.stationName+'-总费用')
|
|
|
+ legends.push(item.stationName+'-电费')
|
|
|
+ legends.push(item.stationName+'-服务费')
|
|
|
+ })
|
|
|
+
|
|
|
+ let y1Max = 0;
|
|
|
+ let series: Array<any> = [];
|
|
|
+ stationIdList.forEach((stationId: string) => {
|
|
|
+ let tmpUserMax = Math.max(...state.chartData[`${stationId}`].map((k: any) => Math.ceil((k.totalMoney/100))))
|
|
|
+ y1Max = Math.max(y1Max, tmpUserMax)
|
|
|
+
|
|
|
+ let station = state.stationList.find((k: any) => k.stationId == stationId);
|
|
|
+ let {stationName} = station;
|
|
|
+
|
|
|
+ series.push({
|
|
|
+ name: stationName+'-总费用',
|
|
|
+ type: 'bar',
|
|
|
+ barMaxWidth:20,
|
|
|
+ symbolSize: 10,
|
|
|
+ symbol: 'circle',
|
|
|
+ smooth: true,
|
|
|
+ itemStyle: { barBorderRadius: 5},
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ formatter: ' {a0} {b}<br />{a} : {c}元 '
|
|
|
+ },
|
|
|
+ markPoint: {
|
|
|
+ data: [
|
|
|
+ { type: 'max', name: 'Max' },
|
|
|
+ { type: 'min', name: 'Min' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ markLine: {
|
|
|
+ data: [{ type: 'average', name: 'Avg' }]
|
|
|
+ },
|
|
|
+ data: state.chartData[stationId].map((k: any) => (k.totalMoney/100).toFixed(2))
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ series.push({
|
|
|
+ name: stationName+'-电费',
|
|
|
+ type: 'bar',
|
|
|
+ barMaxWidth:20,
|
|
|
+ smooth: true,
|
|
|
+ stack: 'Fee'+stationId,
|
|
|
+ markPoint: {
|
|
|
+ data: [
|
|
|
+ { type: 'max', name: 'Max' },
|
|
|
+ { type: 'min', name: 'Min' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ data: state.chartData[stationId].map((k: any) => (k.elecMoney/100).toFixed(2))
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ series.push({
|
|
|
+ name: stationName+'-服务费',
|
|
|
+ type: 'bar',
|
|
|
+ barMaxWidth:20,
|
|
|
+ smooth: true,
|
|
|
+ stack:'Fee'+stationId,
|
|
|
+ markPoint: {
|
|
|
+ data: [
|
|
|
+ { type: 'max', name: 'Max' },
|
|
|
+ { type: 'min', name: 'Min' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ data: state.chartData[stationId].map((k: any) => (k.serviceMoney/100).toFixed(2))
|
|
|
+ })
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ y1Max = Math.max(y1Max, 1000)+100
|
|
|
+
|
|
|
+ let y1Interval = Math.ceil(y1Max / 5)
|
|
|
+
|
|
|
+
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ show:true,
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ crossStyle: {
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: legends,
|
|
|
+ top:-5
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ data: xAxis,
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '金额(元)',
|
|
|
+ min: 0,
|
|
|
+ max: y1Max,
|
|
|
+ interval: y1Interval,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} '
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: series
|
|
|
+ };
|
|
|
+ // console.log(option)
|
|
|
+ state.chartTwo.setOption(option)
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+//endregion
|
|
|
+
|
|
|
+</script>
|