项目看板开发经验分享(二)——事业部能源监控看板（进度条拟柱状图图表、圆柱形柱状图、图表左右滚动进度条、导航轮播按钮）

系列第二篇，话不多说，直接进入正题

事业部能源监控看板展示视频

1、进度条组件

因为整个看板有四处地方用到，结合上一期提到的内容，我们优先考虑将这个模块做成组件

UED给的样式用echarts会很麻烦，我们优先考虑用element-UI的进度条组件el-progress结合v-for来做

进度条组件弄成渐变色样式的方法具体可以参考我的另一篇文章：element实现el-progress线形进度条渐变色

同一个组件最多展示四条数据，若需要罗列的超过四条，则每3秒循环滚动一次，实现方法：

  data() {return {progressTimer: null, // 循环滚动计时器//   sliceData: [//     {//       rank: 1,//       name: '顺德工厂-顺德顺德',//       value: 300000000,//       percent: 100,//       //   color: '#43E97B',//     },//     {//       rank: 2,//       name: '顺德工厂-顺德顺德',//       value: 300000000,//       percent: 80,//       //   color: '#26DAEA',//     },//     {//       rank: 3,//       name: '顺德工厂-顺德顺德',//       value: 300000000,//       percent: 50,//       //   color: '#26DAEA',//     },//     {//       rank: 4,//       name: '顺德工厂-顺德顺德',//       value: 300000000,//       percent: 30,//       //   color: '#26DAEA',//     },//   ],// 开发时，我们先写一些死数据供我们调试，后期再接入请求回来的接口数据sliceData: [], // 遍历的进度条列表scrollIndex: 0, // 当前滚动到第几条数据};},watch: {barData: {deep: true,//   immediate: true,handler: "progressScroll",  // 监听父页面传入的barData数据，当发生变化时重新从第一条开始滚动},},methods: {// 上下滚动progressScroll(isOut) {let self = this;if (this.progressTimer) {clearInterval(this.progressTimer); // 重新执行方法时清除计时器}if (isOut != 'mouseout') {this.scrollIndex = 0; // 为之后的鼠标移入移出功能准备，触发时若不是鼠标移出事件，则索引置0}let arrLength = this.barData.length;if (arrLength <= 4) {  // 数组小于4的滚动逻辑this.sliceData = this.barData;} else {if (this.scrollIndex >= arrLength - 1) {this.sliceData = [this.barData[arrLength - 1], this.barData[0], this.barData[1], this.barData[2]];} else if (this.scrollIndex == arrLength - 2) {this.sliceData = [this.barData[arrLength - 2], this.barData[arrLength - 1], this.barData[0], this.barData[1]];} else if (this.scrollIndex == arrLength - 3) {this.sliceData = [this.barData[arrLength - 3], this.barData[arrLength - 2], this.barData[arrLength - 1], this.barData[0]];} else {  // 数组大于4的滚动逻辑this.sliceData = this.barData.slice(this.scrollIndex, this.scrollIndex + 4);}this.progressTimer = setInterval(() => {if (self.scrollIndex >= arrLength - 1) {self.sliceData = [self.barData[arrLength - 1], self.barData[0], self.barData[1], self.barData[2]];self.scrollIndex = 0;} else if (self.scrollIndex == arrLength - 2) {self.sliceData = [self.barData[arrLength - 2], self.barData[arrLength - 1], self.barData[0], self.barData[1]];self.scrollIndex += 1;} else if (self.scrollIndex == arrLength - 3) {self.sliceData = [self.barData[arrLength - 3], self.barData[arrLength - 2], self.barData[arrLength - 1], self.barData[0]];self.scrollIndex += 1;} else {self.sliceData = self.barData.slice(self.scrollIndex, self.scrollIndex + 4);self.scrollIndex += 1;}}, 3000);}},}

为方便观察数据，用户希望在鼠标移入时暂停该部分的滚动，鼠标移出时继续滚动，则追加鼠标移入移出事件：

    // 鼠标移入handleOver() {if (this.barData.length >= 4 && this.progressTimer) {clearInterval(this.progressTimer);}},// 鼠标移出handleOut() {if (this.barData.length >= 4) {this.progressScroll('mouseout');}}

完整的组件代码：

<template><div class="progress_bar" @mouseenter="handleOver" @mouseleave="handleOut"><div class="row" v-for="(item,index) in sliceData" :key="index"><div :class="`rank_num ${item.rank==1?'best':''}`">{{item.rank}}</div><div class="org_name" :title="item.name">{{item.name}}</div><div class="progress"><div class="progress_box"><el-progress :percentage="item.percent" v-if="!isNaN(parseInt(item.percent))" :class="item.rank==1?'green':'blue'" :show-text="false"></el-progress></div></div><!-- <div class="energy_value" :title="'300000000kwh'"><div class="value">300000000</div><div class="unit">kwh</div></div>--><div class="energy_value" :title="item.value + item.unit">{{item.value}}</div></div></div>
</template><script>export default {props: {barData: {type: Array,default: () => { return []; },},},data() {return {progressTimer: null,//   sliceData: [//     {//       rank: 1,//       name: '顺德工厂-顺德顺德',//       value: 300000000,//       percent: 100,//       //   color: '#43E97B',//     },//     {//       rank: 2,//       name: '顺德工厂-顺德顺德',//       value: 300000000,//       percent: 80,//       //   color: '#26DAEA',//     },//     {//       rank: 3,//       name: '顺德工厂-顺德顺德',//       value: 300000000,//       percent: 50,//       //   color: '#26DAEA',//     },//     {//       rank: 4,//       name: '顺德工厂-顺德顺德',//       value: 300000000,//       percent: 30,//       //   color: '#26DAEA',//     },//   ],sliceData: [],scrollIndex: 0,};},computed: {},watch: {barData: {deep: true,//   immediate: true,handler: "progressScroll",},},methods: {// 上下滚动progressScroll(isOut) {let self = this;if (this.progressTimer) {clearInterval(this.progressTimer);}if (isOut != 'mouseout') {this.scrollIndex = 0;}let arrLength = this.barData.length;if (arrLength <= 4) {this.sliceData = this.barData;} else {if (this.scrollIndex >= arrLength - 1) {this.sliceData = [this.barData[arrLength - 1], this.barData[0], this.barData[1], this.barData[2]];} else if (this.scrollIndex == arrLength - 2) {this.sliceData = [this.barData[arrLength - 2], this.barData[arrLength - 1], this.barData[0], this.barData[1]];} else if (this.scrollIndex == arrLength - 3) {this.sliceData = [this.barData[arrLength - 3], this.barData[arrLength - 2], this.barData[arrLength - 1], this.barData[0]];} else {this.sliceData = this.barData.slice(this.scrollIndex, this.scrollIndex + 4);}this.progressTimer = setInterval(() => {if (self.scrollIndex >= arrLength - 1) {self.sliceData = [self.barData[arrLength - 1], self.barData[0], self.barData[1], self.barData[2]];self.scrollIndex = 0;} else if (self.scrollIndex == arrLength - 2) {self.sliceData = [self.barData[arrLength - 2], self.barData[arrLength - 1], self.barData[0], self.barData[1]];self.scrollIndex += 1;} else if (self.scrollIndex == arrLength - 3) {self.sliceData = [self.barData[arrLength - 3], self.barData[arrLength - 2], self.barData[arrLength - 1], self.barData[0]];self.scrollIndex += 1;} else {self.sliceData = self.barData.slice(self.scrollIndex, self.scrollIndex + 4);self.scrollIndex += 1;}}, 3000);}},// 鼠标移入handleOver() {if (this.barData.length >= 4 && this.progressTimer) {clearInterval(this.progressTimer);}},// 鼠标移出handleOut() {if (this.barData.length >= 4) {this.progressScroll('mouseout');}}},mounted() {this.progressScroll();},beforeDestroy() {clearInterval(this.progressTimer);},
};</script>
<style lang="less">.el-progress-bar__outer {background-color: rgba(0, 126, 250, 0.2) !important;
}
.progress_bar {height: 100%;//   display: flex;//   flex-direction: column;//   justify-content: space-around;padding: 13px 16px 0;.row {height: 30px;margin-bottom: 13px;display: flex;justify-content: space-between;align-items: center;.rank_num {width: 32px;height: 26px;line-height: 23px;text-align: center;background: #011d47;border-top: 1px #0058a4 solid;border-bottom: 1px #0058a4 solid;}.best {background: #0b2518;border-top: 1px #2a904c solid;border-bottom: 1px #2a904c solid;}.org_name {height: 30px;width: 80px;line-height: 30px;font-size: 15px;text-align: center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.progress {width: 215px;display: flex;align-items: center;.progress_box {width: 100%;.green {.el-progress-bar__inner {background-color: unset;background-image: linear-gradient(90deg, #38f9d7 0%, #43e97b 100%);}}.blue {.el-progress-bar__inner {background-color: unset;background-image: linear-gradient(270deg, #26daea 0%, #156ff7 100%);}}}}.energy_value {width: 90px;height: 30px;font-size: 15px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height: 30px;//   display: flex;//   align-items: center;//   .value {//     display: inline-block;//     width: 65px;//     overflow: hidden;//     white-space: nowrap;//     text-overflow: ellipsis;//   }}}
}</style>

2、圆柱形柱状图

最多展示6项，超过6项时出现滚动条供左右滚动查看数据

说实话，这玩意数据很小的时候样式看起来是有点小bug的，我将就先用着了，如果你的项目很规范严谨的话需要自己想想怎么解决或者看看其他圆柱体怎么绘制。

    // 左侧下方折标煤统计coalPower(dimension) {if (this.coal_charts) { // 图表相关的都应该在绘制前先销毁前图表this.coal_charts.clear();this.coal_charts.dispose();}axios.getConvertElectricity({ dimension }).then((res) => {if (res.data && res.data.body && res.data.body.length) {let xdata = [];let ydata = [];res.data.body.forEach((item, index) => {xdata.push(item.orgName.length > 5 ? item.orgName.substring(0, 4) + '...' : item.orgName); // 每一项的名称超长时则省略展示，不然字体重叠了多不好看ydata.push(item.value ? Math.floor((item.value / 1000) * 100) / 100 : 0);});this.setBarCharts(xdata, ydata, 'coal_charts');}})},// 绘制圆柱图setBarCharts(xdata, ydata, ref) {let zoomShow = ydata.length > 6 ? true : false;let option = {grid: {top: '20%',right: '5%',bottom: ydata.length > 6 ? '20%' : '12%',left: '5%',},xAxis: {type: 'category',axisLine: {show: false},axisTick: {show: false},axisLabel: {color: '#BBD7FF',},data: xdata,},yAxis: {type: 'value',show: false,},dataZoom: [ //滚动条，按要求最多展示6条数据，超过6条则给图表增加滚动条供用户左右拖动查看{show: zoomShow,type: 'slider',realtime: true,startValue: 0,endValue: 5,xAxisIndex: [0],bottom: '5',left: '20',height: 5,borderColor: 'rgba(0,0,0,0)',textStyle: {color: 'rgba(0,0,0,0)',},},],series: [{data: ydata,type: 'bar',barWidth: 16,label: {show: true,position: 'top',color: '#fff',formatter: function (params) {return params.value;}},itemStyle: {barBorderRadius: 7,color: function (params) {if (params.dataIndex == 0) {//右，下，左，上return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0, color: '#43E97B'}, {offset: 1, color: '#38F9D7'}])} else {return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0, color: '#007EFA'}, {offset: 1, color: '#04CDE6'}])}}}},{name: 'a',tooltip: {show: false},type: 'pictorialBar',itemStyle: {normal: {color: function (params) {if (params.dataIndex == 0) {return '#6FFFDA'} else {return '#03FDFD'}}}},symbol: 'circle',symbolSize: ['15', '8'],symbolPosition: 'end', // 圆柱上面的小盖子data: ydata,z: 3},{name: 'a',tooltip: {show: false},type: 'pictorialBar',itemStyle: {normal: {color: function (params) {if (params.dataIndex == 0) {return '#2A904C'} else {return '#1A589F'}}}},symbol: 'circle',symbolSize: ['15', '8'],symbolPosition: 'start', // 圆柱底data: ydata,z: 3}]};if (this[ref]) {this[ref].clear();this[ref].dispose();}this[ref] = echarts.init(this.$refs[ref]);this[ref].setOption(option, true);},

3、渐变色折线图与渐变色tooltip

之前有专门写过两篇文章介绍这块，因为我觉得弄得还挺好看的(笑)，就不多赘述了

传送门：echarts折线图与柱状图等绘成渐变色的方法

echarts中tooltip设为渐变色与模糊背景滤镜

4、一些简单的布局

中间这个地方就是在computed里把拿到的碳排放量数据先转化成字符串，再切割后加工成一个字符数组。html里展示用v-for遍历，给每个字符加一个框框样式，再利用flex布局均匀分布就可以了。不管数据有几位数都是能居中对其的。

html：

<div class="main_carbon"><div class="carbon_btn" @click="handleTabs(4)"><div class="carbon_title">事业部碳排放量</div><div class="carbon_value"><div class="carbon_num"><div class="number_box" v-for="(item,index) in carbonTotalArr" :key="index">{{item}}</div></div><div class="carbon_unit">tCO2e</div></div></div>
</div>

css：

                        .main_carbon {height: 162px;display: flex;align-items: center;justify-content: center;.carbon_btn {width: 504px;height: 113px;background-image: url(../../assets/businessMonitoring/main_board.png);background-repeat: no-repeat;background-size: 100% 100%;cursor: pointer;.carbon_title {margin: 10px 0 15px;text-align: center;font-size: 14px;}.carbon_value {display: flex;justify-content: center;align-items: center;.carbon_num {height: 60px;display: flex;justify-content: center;align-items: center;margin-right: 10px;.number_box {width: 48px;height: 60px;line-height: 60px;text-align: center;font-size: 30px;font-weight: 500;background-image: url(../../assets/businessMonitoring/value_border.png);background-repeat: no-repeat;background-size: 100% 100%;}}.carbon_unit {font-size: 22px}}}}

js：

  computed: {carbonTotalArr() {let arr = this.tabs_list[4].value == '--' ? '--' : (Math.floor((this.tabs_list[4].value / 1000) * 100) / 100).toString().split('');return arr;},},

5、循环轮播并可点击切换的导航按钮

算是一个初稿做出来后续被砍掉的方案，个人挺喜欢的，就也一起放出来吧

动态图浏览：

依旧采用flex布局，给当前正在激活的按钮增加类名active，供样式的变化，激活的框框长宽变化后会自动挤开一点位置而不会影响整体居中，这就是flex给我带来的自信，并配合transition过渡动画效果使得变化更平滑。

html：

                <div class="energy_tabs"><divv-for="(item,index) in tabs_list":key="index":class="`tab_btn ${item.isActive?'active':''}`":style="{backgroundImage:`url(${item.isActive?item.acImg:item.img})`}"@click="handleTabs(index)"><div class="value" :title="item.value">{{item.value}}</div><div class="unit">单位：{{item.unit}}</div><div class="name">{{item.name}}</div></div></div>

css：

                        .tab_btn {width: 122px;height: 166px;background-repeat: no-repeat;background-size: 100% 100%;transition: width 0.2s;transition: height 0.2s;cursor: pointer;text-align: center;.value {font-family: 'YouSheBiaoTiHei', sans-serif;color: #0cc8e6;font-size: 18px;margin-top: 16px;padding: 0 5px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}.unit {font-size: 14px;margin-top: 4px;margin-bottom: 68px;}.name {font-size: 14px;}}.active {width: 152px;height: 187px;.value {color: #3cd76e;margin-top: 24px;}.unit {margin-bottom: 76px;}}

js：

    // 点击tabshandleTabs(i) {this.tabs_list.forEach((item, index) => {item.isActive = i == index ? true : false;});this.chartUnit = this.tabs_list[i].chartUnit;this.chartTitle = this.tabs_list[i].title;this.tabChoose = i;this.getElectricLine(this.tabs_list[i].prop); // 切换按钮后重新绘制下面的图表this.tabScroll();},// 中间tabs轮播，具体实现与最开始的进度条组件类似tabScroll() {if (this.tabTimer) {clearInterval(this.tabTimer);}let self = this;this.tabTimer = setInterval(() => {if (self.tabChoose < self.tabs_list.length - 1) {self.tabChoose += 1;} else {self.tabChoose = 0;}this.chartUnit = this.tabs_list[self.tabChoose].chartUnit;this.chartTitle = this.tabs_list[self.tabChoose].title;self.tabs_list.forEach((item, index) => {item.isActive = index == self.tabChoose ? true : false;})this.getElectricLine(self.tabs_list[self.tabChoose].prop);}, 10 * 1000);},

系列第二期也圆满完工了，奈斯

（看板每五分钟重新加载一次数据）

完整代码：

<template><Home :isFullScreen="true"><div class="kanban_business_monitoring"><div class="kanban__body"><!-- 左侧 --><div class="body_left"><div class="total_progress"><plate :title="`各工厂用电量统计(单位：${electricTotal[0].unit||'kwh'})`"><div class="content"><progressBar :barData="electricTotal"></progressBar><div class="dimension_box"><div :class="`btn ${electricDimension == 'DAY'?'active':''}`" @click="chageDimension('DAY','electric')">日</div><div :class="`btn ${electricDimension == 'MONTH'?'active':''}`" @click="chageDimension('MONTH','electric')">月</div><div :class="`btn ${electricDimension == 'YEAR'?'active':''}`" @click="chageDimension('YEAR','electric')">年</div></div></div></plate></div><div class="total_progress"><plate :title="'各工厂天然气用量统计(单位：m3)'"><div class="content"><progressBar :barData="gasTotal"></progressBar><div class="dimension_box"><!-- <div :class="`btn ${gasDimension == 'DAY'?'active':''}`" @click="chageDimension('DAY','gas')">日</div> --><div class="btn"></div><div :class="`btn ${gasDimension == 'MONTH'?'active':''}`" @click="chageDimension('MONTH','gas')">月</div><div :class="`btn ${gasDimension == 'YEAR'?'active':''}`" @click="chageDimension('YEAR','gas')">年</div></div></div></plate></div><div class="total_progress"><plate :title="'各工厂用水量统计(单位：t)'"><div class="content"><progressBar :barData="waterTotal"></progressBar><div class="dimension_box"><!-- <div :class="`btn ${waterDimension == 'DAY'?'active':''}`" @click="chageDimension('DAY','water')">日</div> --><div class="btn"></div><div :class="`btn ${waterDimension == 'MONTH'?'active':''}`" @click="chageDimension('MONTH','water')">月</div><div :class="`btn ${waterDimension == 'YEAR'?'active':''}`" @click="chageDimension('YEAR','water')">年</div></div></div></plate></div><div class="total_bar"><plate :title="'各工厂能耗折标煤统计(单位：tce)'"><div class="content"><div class="coal_charts" ref="coal_charts"></div><div class="dimension_box"><div :class="`btn ${coalDimension == 'DAY'?'active':''}`" @click="chageDimension('DAY','coal')">日</div><div :class="`btn ${coalDimension == 'MONTH'?'active':''}`" @click="chageDimension('MONTH','coal')">月</div><div :class="`btn ${coalDimension == 'YEAR'?'active':''}`" @click="chageDimension('YEAR','coal')">年</div></div></div></plate></div></div><!-- 中间 --><div class="body_center" v-loading="loading" element-loading-text="loading..." element-loading-background="rgba(0, 0, 0, 0.5)"><div class="center_box"><plate :title="'事业部整体总览'"><div class="content"><div class="energy_tabs_new"><div class="main_carbon"><div class="carbon_btn" @click="handleTabs(4)"><div class="carbon_title">事业部碳排放量</div><div class="carbon_value"><div class="carbon_num"><div class="number_box" v-for="(item,index) in carbonTotalArr" :key="index">{{item}}</div></div><div class="carbon_unit">tCO2e</div></div></div></div><div class="main_other"><div class="other_btn" v-for="(item,index) in tabs_list.slice(0,-1)" :key="index" @click="handleTabs(index)"><img :src="item.img" /><div class="btn_content"><div class="value">{{item.value}}</div><div class="hikari"></div><div class="name">{{item.name}}({{item.unit}})</div></div></div></div></div><div class="day_line"><panel :title="`${tabChoose == 4 ? '本年' : '本日'}${chartTitle}实时监控`"></panel><div class="day_charts" ref="day_charts"></div></div><div class="month_year"><div class="line" v-if="(tabChoose !== 4)"><panel :title="`本年${chartTitle}实时监控`"></panel><div class="year_charts" ref="year_charts"></div></div><div class="line" :style="`width:${tabChoose == 4?'100%':'49%'}`"><panel :title="`本月${chartTitle}实时监控`"></panel><div class="month_charts" ref="month_charts"></div></div></div></div></plate></div></div><!-- 右侧 --><div class="body_right"><carbonTotal ref="carbonTotal"></carbonTotal><div class="total_progress"><plate :title="'事业部各工厂碳排放统计(单位：tCO2e)'"><div class="content"><progressBar :barData="carbonTotalTotal"></progressBar><div class="dimension_box"><!-- <div :class="`btn ${carbonTotalDimension == 'DAY'?'active':''}`" @click="chageDimension('DAY','carbonTotal')">日</div> --><div class="btn"></div><div :class="`btn ${carbonTotalDimension == 'MONTH'?'active':''}`" @click="chageDimension('MONTH','carbonTotal')">月</div><div :class="`btn ${carbonTotalDimension == 'YEAR'?'active':''}`" @click="chageDimension('YEAR','carbonTotal')">年</div></div></div></plate></div><div class="total_bar"><plate :title="'各工厂活跃度考核(%)'"><div class="content"><div class="activity_charts" ref="activity_charts"></div></div></plate></div></div></div></div></Home>
</template><script>import ResizeObserver from "resize-observer-polyfill";
import * as echarts from "echarts";
import 'echarts-gl';
import axios from "../../api/index";
import panel from './components/panel';
import progressBar from './components/progress_bar';
import carbonTotal from './components/carbon_total';
import "moment/locale/zh-cn";
export default {name: "kanban_business_monitoring",components: {panel,progressBar,carbonTotal},data() {return {loading: false,searchTime: null,buName: '', // 事业部名称// 左侧electricTotal: [{rank: 1,name: '无工厂数据',value: 0,percent: 0,unit: 'kwh',}], // 左侧工厂电能耗排名gasTotal: [], // 左侧工厂气能耗排名waterTotal: [], // 左侧工厂水能耗排名carbonTotalTotal: [], // 右侧下方工厂碳排放统计排名electricDimension: 'YEAR',waterDimension: 'YEAR',gasDimension: 'YEAR',coalDimension: 'YEAR',carbonTotalDimension: 'YEAR',coal_charts: null,// 中间tabs_list: [{prop: 'accumulated',name: '年耗能',value: '--',unit: 'tce',chartUnit: 'tce',title: '能耗',img: require('./../../assets/businessMonitoring/accumulated_btn.png'),}, {prop: 'electricity',name: '年用电',value: '--',unit: '万kwh',chartUnit: 'kwh',title: '用电量',img: require('./../../assets/businessMonitoring/elec_btn.png'),}, {prop: 'water',name: '年用水',value: '--',unit: '万吨',chartUnit: 't',title: '用水量',img: require('./../../assets/businessMonitoring/water_btn.png'),}, {prop: 'natGas',name: '天然气',value: '--',unit: 'm3',chartUnit: 'm3',title: '天然气用量',img: require('./../../assets/businessMonitoring/gas_btn.png'),},{prop: 'carbon',name: '事业部碳排放量',value: '--',unit: '万tco2e',chartUnit: 'tCO2e',title: '碳排放量',},],tabChoose: 4,day_charts: null,month_charts: null,year_charts: null,chartUnit: '万吨',chartTitle: '碳排放量',// 右侧activity_charts: null,dictionaryData: {}};},computed: {carbonTotalArr() {let arr = this.tabs_list[4].value == '--' ? '--' : (Math.floor((this.tabs_list[4].value / 1000) * 100) / 100).toString().split('');return arr;},},methods: {// 每5分钟自动更新searchAuto() {clearTimeout(this.searchTime);this.loading = false;this.search();let self = this;this.searchTime = setTimeout(function () {self.searchAuto();}, 1000 * 60 * 5);},search() {this.getOverviewOfDepartmental();this.$refs.carbonTotal.getCarbonTotal();['electric', 'gas', 'water', 'carbonTotal', 'coal'].forEach(type => {this[`${type}Power`](this[`${type}Dimension`]); // 初始值都为day})this.getRankingActivity();},// 各统计模块切换维度chageDimension(dimension, type) {this[`${type}Dimension`] = dimension;this[`${type}Power`](dimension);},// 左侧工厂电能耗排名electricPower(dimension) {axios.getPowerElectricity({ dimension }).then((res) => {if (res.data && res.data.body && res.data.body.length) {let arr = [];let max = res.data.body[0].value;res.data.body.forEach((item, index) => {arr.push({rank: index + 1,name: item.orgName,value: dimension == 'YEAR' ? (item.value / 10000).toFixed(2) : item.value.toFixed(2),percent: item.value && max ? (item.value / max) * 100 : 0,unit: dimension == 'YEAR' ? '万kwh' : 'kwh',});})this.electricTotal = arr;} else {this.electricTotal = [];}})},// 左侧工厂气能耗排名gasPower(dimension) {axios.getGasOrWaterElectricity({ dimension, energyType: 3 }).then((res) => {if (res.data && res.data.body && res.data.body.length) {let arr = [];let max = res.data.body[0].value;res.data.body.forEach((item, index) => {if (item.orgId != 37) {let obj = {rank: index + 1,name: item.orgName,value: item.value ? item.value.toFixed(2) : 0,percent: item.value && max ? (item.value / max) * 100 : 0,unit: 'm3',}if (this.dictionaryData['d_' + item.orgId + '_' + dimension.toLowerCase() + 'gas']) {obj.value = this.dictionaryData['d_' + item.orgId + '_' + dimension.toLowerCase() + 'gas']// obj.percent = obj.value && this.dictionaryData.d_6_yeargas ? (obj.value / (this.dictionaryData.yeargas - 0)) * 100 : 0;}arr.push(obj);}})this.gasTotal = arr;} else {this.gasTotal = [];}})},// 左侧工厂水能耗排名waterPower(dimension) {axios.getGasOrWaterElectricity({ dimension, energyType: 2 }).then((res) => {if (res.data && res.data.body && res.data.body.length) {let arr = [];let max = res.data.body[0].value;let weiMax = 0Object.keys(this.dictionaryData).forEach(it => {if (it.includes(dimension.toLowerCase() + 'water') && weiMax < this.dictionaryData[it]) {weiMax = this.dictionaryData[it]}})// console.log(weiMax);res.data.body.forEach((item, index) => {let obj = {rank: index + 1,name: item.orgName,value: item.value ? item.value.toFixed(2) : 0,percent: item.value && max ? (item.value / max) * 100 : 0,unit: 't',}if (this.dictionaryData['d_' + item.orgId + '_' + dimension.toLowerCase() + 'water']) {obj.value = this.dictionaryData['d_' + item.orgId + '_' + dimension.toLowerCase() + 'water'] - 0obj.percent = obj.value && weiMax ? (obj.value / weiMax) * 100 : 0;}arr.push(obj);})this.waterTotal = arr;} else {this.waterTotal = [];}})},// 左侧下方折标煤统计coalPower(dimension) {if (this.coal_charts) {this.coal_charts.clear();this.coal_charts.dispose();}// 取前六个工厂axios.getConvertElectricity({ dimension }).then((res) => {if (res.data && res.data.body && res.data.body.length) {let xdata = [];let ydata = [];res.data.body.forEach((item, index) => {xdata.push(item.orgName.length > 5 ? item.orgName.substring(0, 4) + '...' : item.orgName);ydata.push(item.value ? Math.floor((item.value / 1000) * 100) / 100 : 0);});this.setBarCharts(xdata, ydata, 'coal_charts');}})},// 绘制柱状图setBarCharts(xdata, ydata, ref) {let zoomShow = ydata.length > 6 ? true : false;let option = {grid: {top: '20%',right: '5%',bottom: ydata.length > 6 ? '20%' : '12%',left: '5%',},xAxis: {type: 'category',axisLine: {show: false},axisTick: {show: false},axisLabel: {color: '#BBD7FF',},data: xdata,},yAxis: {type: 'value',show: false,},dataZoom: [//滚动条{show: zoomShow,type: 'slider',realtime: true,startValue: 0,endValue: 5,xAxisIndex: [0],bottom: '5',left: '20',height: 5,borderColor: 'rgba(0,0,0,0)',textStyle: {color: 'rgba(0,0,0,0)',},},],series: [{data: ydata,type: 'bar',barWidth: 16,label: {show: true,position: 'top',color: '#fff',formatter: function (params) {return params.value;}},itemStyle: {barBorderRadius: 7,color: function (params) {if (params.dataIndex == 0) {//右，下，左，上return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0, color: '#43E97B'}, {offset: 1, color: '#38F9D7'}])} else {return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0, color: '#007EFA'}, {offset: 1, color: '#04CDE6'}])}}}},{name: 'a',tooltip: {show: false},type: 'pictorialBar',itemStyle: {normal: {color: function (params) {if (params.dataIndex == 0) {return '#6FFFDA'} else {return '#03FDFD'}}}},symbol: 'circle',symbolSize: ['15', '8'],symbolPosition: 'end', // 圆柱上面的小盖子data: ydata,z: 3},{name: 'a',tooltip: {show: false},type: 'pictorialBar',itemStyle: {normal: {color: function (params) {if (params.dataIndex == 0) {return '#2A904C'} else {return '#1A589F'}}}},symbol: 'circle',symbolSize: ['15', '8'],symbolPosition: 'start', // 圆柱底data: ydata,z: 3}]};if (this[ref]) {this[ref].clear();this[ref].dispose();}this[ref] = echarts.init(this.$refs[ref]);this[ref].setOption(option, true);},// 右侧 获取部门下相关的碳排放统计排名carbonTotalPower(dimension) {axios.getRankingCarbonOfBusiness({ dimension }).then((res) => {if (res.data && res.data.body && res.data.body.length) {let arr = [];let max = res.data.body[0].value;res.data.body.forEach((item, index) => {arr.push({rank: index + 1,name: item.orgName,value: item.value ? (item.value / 1000).toFixed(2) : 0,percent: item.value && max ? (item.value / max) * 100 : 0,unit: 'tCO2e',});})this.carbonTotalTotal = arr;} else {this.carbonTotalTotal = [];}})},// 右侧下方-各工厂活跃度考核getRankingActivity() {// 取前六个工厂axios.getRankingActivity().then((res) => {if (res.data && res.data.body && res.data.body.length) {let xdata = [];let ydata = [];res.data.body.forEach((item, index) => {xdata.push(item.orgName.length > 5 ? item.orgName.substring(0, 4) + '...' : item.orgName);ydata.push(item.value ? Math.floor(item.value * 100) / 100 : 0);});this.setBarCharts(xdata, ydata, 'activity_charts');}})},// 中间整一块发电总览getOverviewOfDepartmental() {this.loading = true;axios.getOverviewOfDepartmental().then((res) => {if (res.data && res.data.body) {this.buName = res.data.body.buName;this.overviewData = res.data.body;this.handleTabs(this.tabChoose);this.$store.state.femsStore.kanban_name = this.buName + "能源监控";this.tabs_list.forEach((item, index) => {let value = res.data.body[item.prop] && res.data.body[item.prop].value ? res.data.body[item.prop].value : '--';if (item.prop == 'accumulated') {item.value = (value / 1000).toFixed(2);} else if (item.prop == 'electricity') {item.value = (value / 10000).toFixed(2);} else if (item.prop == 'carbon') {item.value = value;} else {item.value = value;};})if (this.buName == '微波和清洁事业部') {let watervalue = 0let gasvalue = 0Object.keys(this.dictionaryData).forEach(it => {if (it.includes('water') && it.includes('year')) {watervalue += this.dictionaryData[it] - 0} if (it.includes('gas') && it.includes('year')) {gasvalue += this.dictionaryData[it] - 0}})this.tabs_list[2].value = (watervalue / 10000).toFixed(2)this.tabs_list[3].value = gasvalue}this.loading = false;} else {this.$message({message: "返回数据有误或为空。",type: "error",});this.loading = false;}})},getDictionary() {//获取字典配置数值let yearGasTotal = 0let yearWaterTotal = 0axios.searchDictionary({ dictionaryType: 'SHIYEBUKANBAN' }).then(res => {res.forEach(item => {this.dictionaryData['d_' + item.index] = item.value - 0})})},// 获取年月日电用能折线图数据getElectricLine(prop) {['day', 'year', 'month'].forEach(dimension => {if (this[`${dimension}_charts`]) {this[`${dimension}_charts`].clear();this[`${dimension}_charts`].dispose();}})if (this.overviewData[prop]) {if (prop == 'carbon') {// let ydataOfLastDay = this.overviewData[prop].ydataOfLastDay ? this.overviewData[prop].ydataOfLastDay.map(x => x == null ? null : Math.floor((x / 1000) * 100) / 100) : [];// let ydataOfDay = this.overviewData[prop].ydataOfDay ? this.overviewData[prop].ydataOfDay.map(x => x == null ? null : Math.floor((x / 1000) * 100) / 100) : [];let ydataOfLastYear = this.overviewData[prop].ydataOfLastYear ? this.overviewData[prop].ydataOfLastYear.map(x => x == null ? null : Math.floor((x / 1000) * 100) / 100) : [];let ydataOfYear = this.overviewData[prop].ydataOfYear ? this.overviewData[prop].ydataOfYear.map(x => x == null ? null : Math.floor((x / 1000) * 100) / 100) : [];let ydataOfLastMonth = this.overviewData[prop].ydataOfLastMonth ? this.overviewData[prop].ydataOfLastMonth.map(x => x == null ? null : Math.floor((x / 1000) * 100) / 100) : [];let ydataOfMonth = this.overviewData[prop].ydataOfMonth ? this.overviewData[prop].ydataOfMonth.map(x => x == null ? null : Math.floor((x / 1000) * 100) / 100) : [];setTimeout(() => {// this.setElectricLine(this.overviewData.xDataOfDay || [], [ydataOfLastDay || [], ydataOfDay || [],], 'day_charts', ['昨日', '本日']);this.setElectricLine(this.overviewData.xDataOfYear || [], [ydataOfYear || [],], 'day_charts', ['今年']);this.setElectricLine(this.overviewData.xDataOfMonth || [], [ydataOfLastMonth || [], ydataOfMonth || [],], 'month_charts', ['上月', '本月']);}, 50);} else {setTimeout(() => {this.setElectricLine(this.overviewData.xDataOfDay || [], [this.overviewData[prop].ydataOfLastDay || [], this.overviewData[prop].ydataOfDay || [],], 'day_charts', ['昨日', '本日']);this.setElectricLine(this.overviewData.xDataOfYear || [], [this.overviewData[prop].ydataOfLastYear || [], this.overviewData[prop].ydataOfYear || [],], 'year_charts', ['去年', '今年']);this.setElectricLine(this.overviewData.xDataOfMonth || [], [this.overviewData[prop].ydataOfLastMonth || [], this.overviewData[prop].ydataOfMonth || [],], 'month_charts', ['上月', '本月']);}, 50);}}},// 绘制电用能折线图setElectricLine(xdata, ydata, ref, name) {let unit = this.chartUnit;let option = {grid: {top: '15%',right: '3%',bottom: '15%',left: this.tabChoose !== 4 && ref !== 'day_charts' ? '18%' : '10%',},legend: {textStyle: {color: '#C0D7FE'},padding: [10, 0, 0, 0]},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow',shadowStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{ offset: 0, color: 'rgba(255, 255, 255, 0)' },{ offset: 1, color: 'rgba(37, 107, 230, 0.18)' }]),}},backgroundColor: 'rgba(50,50,50,0)',borderWidth: 0,formatter: function (params) {let html = '';if (params.length == 2) {html += `<div style="color: #fff;font-size: 16px;height: 125px;padding: 16px;background: linear-gradient(180deg, rgba(37,108,233,0.44) 0%, rgba(23,80,169,0.1) 22%, rgba(20,64,137,0) 46%, rgba(16,51,111,0.28) 77%, rgba(30,101,213,0.4) 100%);border-radius: 2px;border: 1px solid;border-image: radial-gradient(circle, rgba(111, 185, 242, 0.86), rgba(0, 0, 0, 0.2)) 1 1;backdrop-filter: blur(10px);"><div><div style="margin-bottom: 16px">${params[0].name}${ref == 'year_charts' ? '月' : ref == 'month_charts' ? '日' : ''}</div><div style="margin-bottom: 12px;color: #0CC8E6;"><span style="display:inline-block;margin-right:4px;border:1px solid #fff;border-radius:10px;width:10px;height:10px;background-color:#0CC8E6;"></span><span style="font-size: 14px;">${params[0].seriesName}</span><span style="margin-left: 16px;font-weight: bold;color: #fff;">${params[0].value}</span><span style="margin-left: 6px;">${unit}</span></div><div style="color: #08BA57;"><span style="display:inline-block;margin-right:4px;border:1px solid #fff;border-radius:10px;width:10px;height:10px;background-color:#08BA57;"></span><span style="font-size: 14px;">${params[1].seriesName}</span><span style="margin-left: 16px;font-weight: bold;color: #fff;">${params[1].value}</span><span style="margin-left: 6px;">${unit}</span></div></div></div>`;} else if (params.length == 1) {html += `<div style="color: #fff;font-size: 16px;height: 125px;padding: 16px;background: linear-gradient(180deg, rgba(37,108,233,0.44) 0%, rgba(23,80,169,0.1) 22%, rgba(20,64,137,0) 46%, rgba(16,51,111,0.28) 77%, rgba(30,101,213,0.4) 100%);border-radius: 2px;border: 1px solid;border-image: radial-gradient(circle, rgba(111, 185, 242, 0.86), rgba(0, 0, 0, 0.2)) 1 1;backdrop-filter: blur(10px);"><div><div style="margin-bottom: 16px">${params[0].name}${ref == 'year_charts' ? '月' : ref == 'month_charts' ? '日' : ''}</div><div style="margin-bottom: 12px;color: #0CC8E6;"><span style="display:inline-block;margin-right:4px;border:1px solid #fff;border-radius:10px;width:10px;height:10px;background-color:#0CC8E6;"></span><span style="font-size: 14px;">${params[0].seriesName}</span><span style="margin-left: 16px;color: #fff;">${params[0].value}</span><span style="margin-left: 6px;">${unit}</span></div></div></div>`;}return html},},xAxis: {type: 'category',boundaryGap: ['2%', '2%'],axisTick: {alignWithLabel: true},axisLine: {onZero: false,lineStyle: { color: '#2D4866' }},axisLabel: {color: '#A8BADA',},data: xdata},yAxis: {type: 'value',name: `单位：${this.chartUnit}`,nameTextStyle: {padding: [0, 0, 0, -50],color: '#A8BADA',},axisLabel: {color: '#A8BADA'},splitLine: {lineStyle: { color: '#061e3f', type: 'solid' }},},series: [{name: name[0],data: ydata[0] || [],type: 'line',symbolSize: 6,smooth: true,itemStyle: {normal: {color: "#0CC8E6",},},lineStyle: {normal: {width: 2,color: '#0CC8E6'},},areaStyle: {normal: {//右，下，左，上color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#043953'},{offset: 1,color: 'rgba(7, 17, 38, 0)'}])}},},{name: name[1],data: ydata[1] || [],type: 'line',symbolSize: 6,smooth: true,itemStyle: {normal: {color: "#08BA57",},},lineStyle: {normal: {width: 2,color: '#08BA57'},},areaStyle: {normal: {//右，下，左，上color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#04392f'},{offset: 1,color: 'rgba(7, 17, 38, 0)'}])}},}]};if (this[ref]) {this[ref].clear();this[ref].dispose();}this[ref] = echarts.init(this.$refs[ref]);this[ref].setOption(option, true);},// 点击tabshandleTabs(index) {let i = this.buName == '微波和清洁事业部' ? 4 : indexthis.chartUnit = this.tabs_list[i].chartUnit;this.chartTitle = this.tabs_list[i].title;this.tabChoose = i;this.getElectricLine(this.tabs_list[i].prop);},},mounted() {let self = this;this.$handleSize();this.getDictionary()this.$store.state.femsStore.kanban_name = this.buName + "事业部能源监控";this.$eventbus.$on("fems_up_orgid", () => {this.$nextTick(() => {self.searchAuto();});});const viewElem = document.body;const resizeObserver = new ResizeObserver(() => {this.$handleSize();});resizeObserver.observe(viewElem);},beforeDestroy() {this.$eventbus.$off("fems_up_orgid");clearTimeout(this.searchTime);},
};</script><style lang="less">@import './index.less';</style>

全体样式index.less

.kanban_business_monitoring {height: 1080px;width: 1920px;.newplate {margin-bottom: 16px;margin-top: 0;.newplate_title {height: 40px;line-height: 40px;font-size: 14px;}}.plate {margin-top: 0;}.kanban__body {width: 100%;height: 100%;display: flex;justify-content: space-between;padding: 105px 24px 0;.body_left {width: 494px;height: 100%;}.body_center {width: 852px;height: 100%;.center_box {.content {height: 917px;padding: 0 16px;.energy_tabs {height: 244px;display: flex;justify-content: space-between;align-items: center;.tab_btn {width: 122px;height: 166px;background-repeat: no-repeat;background-size: 100% 100%;transition: width 0.2s;transition: height 0.2s;cursor: pointer;text-align: center;.value {font-family: 'YouSheBiaoTiHei', sans-serif;color: #0cc8e6;font-size: 18px;margin-top: 16px;padding: 0 5px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}.unit {font-size: 14px;margin-top: 4px;margin-bottom: 68px;}.name {font-size: 14px;}}.active {width: 152px;height: 187px;.value {color: #3cd76e;margin-top: 24px;}.unit {margin-bottom: 76px;}}}.energy_tabs_new {height: 244px;.main_carbon {height: 162px;display: flex;align-items: center;justify-content: center;.carbon_btn {width: 504px;height: 113px;background-image: url(../../assets/businessMonitoring/main_board.png);background-repeat: no-repeat;background-size: 100% 100%;cursor: pointer;.carbon_title {margin: 10px 0 15px;text-align: center;font-size: 14px;}.carbon_value {display: flex;justify-content: center;align-items: center;.carbon_num {height: 60px;display: flex;justify-content: center;align-items: center;margin-right: 10px;.number_box {width: 48px;height: 60px;line-height: 60px;text-align: center;font-size: 30px;font-weight: 500;background-image: url(../../assets/businessMonitoring/value_border.png);background-repeat: no-repeat;background-size: 100% 100%;}}.carbon_unit {font-size: 22px}}}}.main_other {display: flex;justify-content: space-around;.other_btn {width: 193px;height: 68px;padding: 8px 11px;display: flex;cursor: pointer;img {width: 50px;height: 52px;margin-right: 5px;}.btn_content {position: relative;.value {font-size: 18px;}.hikari {position: absolute;top: 11px;width: 90px;height: 17px;background-image: url(../../assets/businessMonitoring/hikari.png);background-repeat: no-repeat;background-size: 100% 100%;}.name {margin-top: 14px;font-size: 15px;color: #0CC8E6;font-family: 'RuiZiZhenYan', sans-serif;}}}}}.day_line {height: 393px;width: 100%;.day_charts {height: 90%;width: 100%;}}.month_year {height: 280px;width: 100%;display: flex;justify-content: space-between;.line {width: 49%;height: 100%;.month_charts {height: 85%;width: 100%;}.year_charts {height: 85%;width: 100%;}}}}}}.body_right {width: 494px;height: 100%;.carbon_total {.carbon_box {height: 426px;.carbon_state {display: flex;justify-content: space-between;overflow: hidden;box-sizing: border-box;padding: 16px 16px 0 16px;>div {height: 165px;width: 31%;background-color: rgba(0, 126, 250, 0.1);border-radius: 2px;.border_top {width: 100%;height: 2px;background: linear-gradient(349deg,rgba(0, 126, 250, 0) 0%,rgba(0, 171, 241, 0.55) 49%,rgba(0, 195, 236, 0) 100%);}.carbon_content {padding: 16px;font-size: 16px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;.value {color: #0cc8e6;font-size: 20px;margin: 16px 0 20px 0;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;span {font-size: 14px;}}.radio {font-size: 12px;margin-bottom: 14px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;display: flex;align-items: center;img {width: 16px;height: 16px;margin: 0 4px;}}.increase {color: #E76746;}.decrease {color: #3cd76e;}}}}.charts_box {height: 50%;margin-top: 24px;.title_box {height: 10%;display: flex;justify-content: space-between;align-items: center;color: #81e0ff;font-size: 14px;padding: 0 16px;.btn_box {display: flex;.btn {width: 50px;height: 32px;line-height: 32px;margin-left: 5px;text-align: center;cursor: pointer;}.active {box-shadow: inset 0px 0px 8px 0px #3191cf;border-radius: 2px;}}}.line_charts {height: 90%;width: 100%;}}}}}.content {position: relative;.dimension_box {position: absolute;height: 40px;width: 160px;top: -40px;right: 0px;display: flex;justify-content: space-around;align-items: center;.btn {width: 40px;height: 28px;line-height: 28px;text-align: center;color: #81e0ff;cursor: pointer;}.active {box-shadow: inset 0px 0px 8px 0px #3191cf;border-radius: 2px;}}}.total_progress {.content {height: 184px;}}.total_bar {.content {height: 190px;.coal_charts {width: 100%;height: 90%;}.activity_charts {width: 100%;height: 90%;}}}}
}

右上组件：

<template><div class="carbon_total"><plate :title="'碳排放总览'"><div class="carbon_box"><div class="carbon_state"><div v-for="(item, index) in carbon_state" :key="index"><div class="border_top"></div><div class="carbon_content"><div>{{ item.name }}</div><div class="value" :title="item.value+item.unit">{{item.value}}<span>{{item.unit}}</span></div><div :class="`radio ${item.yoY < 0 ? 'decrease' : 'increase'}`">环比<!-- <i :class="`${item.yoY < 0?'el-icon-caret-bottom':'el-icon-caret-top'}`"></i> --><img :src="item.yoY < 0 ? arrow_down:arrow_up" alt />{{item.yoY || '--'}}%</div><div v-if="item.prop!='year'" :class="`radio ${item.moM < 0 ? 'decrease' : 'increase'}`">同比<!-- <i :class="`${item.moM < 0?'el-icon-caret-bottom':'el-icon-caret-top'}`"></i> --><img :src="item.moM < 0 ? arrow_down : arrow_up" alt />{{item.moM || '--'}}%</div></div></div></div><div class="charts_box"><div class="title_box"><div class="text">碳排放趋势图(tCO2e)</div><div class="btn_box"><div :class="`btn ${carbonDimension == 'day'?'active':''}`" @click="handleCarbonBtn('day')">日</div><div :class="`btn ${carbonDimension == 'month'?'active':''}`" @click="handleCarbonBtn('month')">月</div></div></div><div class="line_charts" ref="line_charts"></div></div></div></plate></div>
</template>
<script>import * as echarts from "echarts";
import axios from "../../../api/index";
export default {props: {},data() {return {carbon_state: [{ prop: 'day', name: "本日碳排放量", value: '--', moM: '--', yoY: '--', unit: '吨' }, { prop: 'month', name: "本月碳排放量", value: '--', moM: '--', yoY: '--', unit: '吨' }, { prop: 'year', name: "本年碳排放量", value: '--', moM: '--', yoY: '--', unit: '吨' },],carbonDimension: 'month',arrow_up: require('./../../../assets/businessMonitoring/arrow_up.png'),arrow_down: require('./../../../assets/businessMonitoring/arrow_down.png'),dayData: {xdata: [],ydata: []},monthData: {xdata: [],ydata: []}};},computed: {},watch: {barData: {deep: true,//   immediate: true,handler: "progressScroll",},},methods: {// 碳排放总览切换维度handleCarbonBtn(dimension) {this.carbonDimension = dimension;this.getCarbonData(dimension);},// 获取折线图最大最小值getDataSymbol(arr) {let maxNum = Math.max(...arr);let minNum = Math.min(...arr);let [maxIndex, minIndex] = [arr.indexOf(maxNum), arr.indexOf(minNum)];let newArr = arr;newArr[maxIndex] = { value: arr[maxIndex], symbol: 'circle', symbolSize: 5 };if (maxIndex !== minIndex) {newArr[minIndex] = { value: arr[minIndex], symbol: 'circle', symbolSize: 5 };}return newArr;},// 获取碳排放总览趋势图数据getCarbonData(dimension) {if (this.line_charts) {this.line_charts.clear();this.line_charts.dispose();}this.setLineCharts(this[`${dimension}Data`], "line_charts");},// 获取碳排放总览排放量数据getCarbonTotal() {this.carbon_state = [{prop: 'day',name: "本日碳排放量",value: '--',moM: '--',yoY: '--',unit: '吨'},{prop: 'month',name: "本月碳排放量",value: '--',moM: '--',yoY: '--',unit: '吨'},{prop: 'year',name: "本年碳排放量",value: '--',moM: '--',yoY: '--',unit: '吨'},],axios.getCarbonOfBusiness().then((res) => {if (res.data.body) {if (res.data.body.carbonOfDay) {this.carbon_state[0].value = res.data.body.carbonOfDay > 10000000 ? (res.data.body.carbonOfDay / 10000000).toFixed(2) : (res.data.body.carbonOfDay / 1000).toFixed(2);} else {this.carbon_state[0].value = '--';}this.carbon_state[0].unit = res.data.body.carbonOfDay > 10000000 ? '万tCO2e' : 'tCO2e';this.carbon_state[0].moM = res.data.body.momCarbonOfDay;this.carbon_state[0].yoY = res.data.body.yoyCarbonOfDay;if (res.data.body.carbonOfMonth) {this.carbon_state[1].value = res.data.body.carbonOfMonth > 10000000 ? (res.data.body.carbonOfMonth / 10000000).toFixed(2) : (res.data.body.carbonOfMonth / 1000).toFixed(2);} else {this.carbon_state[1].value = '--';}this.carbon_state[1].unit = res.data.body.carbonOfMonth > 10000000 ? '万tCO2e' : 'tCO2e';this.carbon_state[1].moM = res.data.body.momCarbonOfMonth;this.carbon_state[1].yoY = res.data.body.yoyCarbonOfMonth;if (res.data.body.carbonOfYear) {this.carbon_state[2].value = res.data.body.carbonOfYear > 10000000 ? (res.data.body.carbonOfYear / 10000000).toFixed(2) : (res.data.body.carbonOfYear / 1000).toFixed(2);} else {this.carbon_state[2].value = '--';}this.carbon_state[2].unit = res.data.body.carbonOfYear > 10000000 ? '万tCO2e' : 'tCO2e';this.carbon_state[2].moM = res.data.body.momCarbonOfYear;this.dayData = {xdata: res.data.body.xday,ydata: res.data.body.day.map(item => {return Math.floor((item / 1000) * 100) / 100;}),}this.monthData = {xdata: res.data.body.xyear,ydata: res.data.body.year.map(item => {return Math.floor((item / 1000) * 100) / 100;}),}this.getCarbonData(this.carbonDimension);}})},// 绘制碳排放总览趋势图setLineCharts(data, ref) {let option = {grid: {top: '16%',right: '8%',bottom: '15%',left: '18%',},tooltip: {trigger: 'axis',axisPointer: {type: 'line',label: {backgroundColor: '#6a7985'}},formatter: function (params) {return params[0].name + '<br>' + params[0].marker + '碳排放量：' + params[0].value + ' tCO2e';}},xAxis: {type: 'category',boundaryGap: ['2%', '2%'],axisTick: {alignWithLabel: true},axisLine: {onZero: false,lineStyle: { color: '#2D4866' }},axisLabel: {color: '#A8BADA',},data: data.xdata},yAxis: {axisLabel: {color: '#A8BADA'},splitLine: {lineStyle: { color: '#061e3f', type: 'solid' }},type: 'value'},series: [{symbol: 'none',data: this.getDataSymbol(data.ydata),// data: [820, 932, 901, 934, 1290, { value: 1330, symbol: 'circle', symbolSize: 5 }, 1320],markPoint: {symbolSize: 20,itemStyle: {normal: {color: 'rgba(0,0,0,0)'}},label: {show: true,color: '#fff'},data: [{ type: 'max', name: 'Max' },{ type: 'min', name: 'Min' }]},type: 'line',smooth: true,// showSymbol: false,itemStyle: {normal: {color: "#0CC8E6", //改变折线点的颜色},},lineStyle: {normal: {width: 2,color: '#0CC8E6'},},}]};if (this[ref]) {this[ref].clear();this[ref].dispose();}this[ref] = echarts.init(this.$refs[ref]);this[ref].setOption(option, true);},},mounted() {},beforeDestroy() {},
};</script>
<style lang="less"></style>

下期完结篇，分享电子车间能源监控看板，敬请期待~