<template>
<div class="app-container energyDevelop">
<!-- 数据区域 -->
<div class="numbPannl">
<ul class="ul-numb-ico">
<li v-for="(item,index) in numbLst" :key="index" @click="getData(item)">
<div class="hd">
<h2>{
{item.name}}</h2>
<span>{
{item.year}}</span>
</div>
<div class="bd dflex mb30">
<div class="ico" :class="item.ico"></div>
<div class="numbLst">
<p class="numb f20 mb10">{
{item.numb1}}</p>
<p class="numb f14">{
{item.numb2}}%</p>
</div>
<div class="grey">
<p class="f14" style="margin:4px 0 8px 0">{
{item.Unit1}}</p>
<p class="f14">{
{item.Unit2}}</p>
</div>
</div>
<div class="ft dflex">
<span>近五年趋势</span>
<i class="el-icon-arrow-right"></i>
</div>
</li>
</ul>
</div>
<!-- 近五年趋势弹出层 -->
<el-dialog :title="titleEcharts" :visible.sync="openEcharts" width="760px" destroy-on-close>
<div style="height:360px;width: 100%;">
<Echart ref="barEcharts" />
</div>
</el-dialog>
</div>
</template>
<script>
import {
selectTitleInfo, selectQSNYXFCYFB, selectQSJWNGHYNYXFQKJYDLBHQS, selectQSGHYNYZDXFZBQK, selectQSGHYNYZDXFLYQK, selectQSGDQNYXFQKYDL, } from "@/api/carbonEye/energyConsumption";
import {
yearData } from "@/api/carbonMonitoring/KPEnterprise"; //年份共用接口
export default {
name: "energyConsumption",
data () {
return {
numbLst: [
{
name: '全省能源消费总量', year: '2019', ico: 'ico-energyDevelop1', numb1: '2223.8', numb2: '-5.7', Unit1: '万吨标准煤', Unit2: '增长率', },
{
name: '全省能耗强度', year: '2019', ico: 'ico-energyDevelop2', numb1: '0.36', numb2: '1.9', Unit1: '吨/万元', Unit2: '增长率', },
{
name: '全省用电总量', year: '2019', ico: 'ico-energyDevelop3', numb1: '2223.08', numb2: '6.2', Unit1: '亿千瓦时', Unit2: '增长率', }
],
// 弹出层-------
openEcharts: false,
//echarts---弹出标题
titleEcharts: '',
// echarts---弹出-图表需要字段
barEcharts: null,
//全省能源消费总量
kgce: '',
//全省能耗强度
energyIntensity: '',
//用电总量
summation: '',
};
},
mounted () {
this.getTitleInfo(); //页面顶部展示数接口
this.getQSJWNGHYNYXFQKJYDLBHQS(); //全省近五年各行业能源
},
methods: {
//点击近五年趋势方法
getData (item) {
//console.log(999, item)
this.openEcharts = true;
this.$nextTick(() => {
if (item.name === '全省能源消费总量') {
this.titleEcharts = item.name + '近五年趋势'
this.barEcharts1(this.kgce)
} else if (item.name === '全省能耗强度') {
this.titleEcharts = item.name + '近五年趋势'
this.barEcharts1(this.energyIntensity)
} else {
this.titleEcharts = item.name + '近五年趋势'
this.barEcharts1(this.summation)
}
})
},
//页面顶部展示数接口----请求参数:yearId（年份)
getTitleInfo () {
let params = {
yearId: this.yearModel,
}
selectTitleInfo(params).then(res => {
const result = res[0]
//全省能源消费总量-----
this.kgce = {
barEchartsYear: result.QSNYXFZLJWNQS.map(item => {
return item.YEARID
}),
barEchartsZL: {
name: '总量',
data: result.QSNYXFZLJWNQS.map(item => {
return item.ZL
})
},
barEchartsZZL: {
name: '增长率',
data: result.QSNYXFZLJWNQS.map(item => {
return item.ZZL
})
}
}
//console.log(555, this.kgce);
//全省能耗强度--
this.energyIntensity = {
barEchartsYear: result.QSNHQDJWNQS.map(item => {
return item.YEARID
}),
barEchartsZL: {
name: '总量',
data: result.QSNHQDJWNQS.map(item => {
return item.ZL
})
},
barEchartsZZL: {
name: '增长率',
data: result.QSNHQDJWNQS.map(item => {
return item.ZZL
})
}
}
//用电总量--
this.summation = {
barEchartsYear: result.QSYDZLJWNQS.map(item => {
return item.YEARID
}),
barEchartsZL: {
name: '总量',
data: result.QSYDZLJWNQS.map(item => {
return item.ZL
})
},
barEchartsZZL: {
name: '增长率',
data: result.QSYDZLJWNQS.map(item => {
return item.ZZL
})
}
}
})
},
//弹出Echarts----------
barEcharts1 (echartsData) {
//计算最大值
function calMax (arr) {
let max = 0;
let data = Math.max(...arr);
if (max < data) {
max = data;
}
let maxint = Math.ceil(max / 9.5); // 不让最高的值超过最上面的刻度
let maxval = maxint * 10; // 让显示的刻度是整数
// 为了防止数据为0时，Y轴不显示，给个最大值
if (maxval == 0) {
maxval = 1 }
return maxval;
}
//计算最小值
function calMin (arr) {
let min = 0;
let data = Math.min(...arr);
if (min > data) {
min = data;
}
let minint = Math.floor(min / 10);
let minval = minint * 10;//让显示的刻度是整数
return minval;
}
// echartsData是我的两组数据（柱状图和折线图）
let Max1, Min1, Max2, Min2;
if (echartsData) {
Max1 = calMax(echartsData.barEchartsZL.data);
Min1 = calMin(echartsData.barEchartsZL.data);
Max2 = calMax(echartsData.barEchartsZZL.data);
Min2 = calMin(echartsData.barEchartsZZL.data);
}
this.$refs.barEcharts.init({
color: ['#6571fc', '#08daaa',],
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(73,81,92,.95)', //背景颜色
borderWidth: '0', //边框为0
textStyle: {
color: '#fff' //字体颜色
},
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: [echartsData.barEchartsZL.name, echartsData.barEchartsZZL.name],
right: 20,
top: 0
},
grid: {
left: '2%',
right: '2%',
bottom: '0',
top: '13%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: true, //坐标轴两端留空
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: "#D9D9D9"
}
},
axisLabel: {
show: true,
//formatter: '{value}月',
textStyle: {
padding: [10, 0, 0, 0],
color: "#333"
}
},
axisTick: {
show: false, //隐藏X轴刻度
},
data: echartsData.barEchartsYear,
},
],
yAxis: [
{
name: '单位:亿元',
type: 'value',
min: Min1,
max: Max1,
splitNumber: 5, // 坐标轴的分割段数(预估值)
interval: (Max1 - Min1) / 5,
axisLabel: {
textStyle: {
color: '#666',
},
},
//name的样式设计
nameTextStyle: {
color: '#333',
align: 'left',
lineHeight: '20',
padding: [0, 4, 5, -18],
},
splitLine: {
lineStyle: {
type: 'solid', //设置网格线类型 dotted：虚线 solid:实线
color: '#E9E9E9',
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
{
type: 'value',
min: Min2,
max: Max2,
splitNumber: 5, // 坐标轴的分割段数(预估值)
interval: (Max2 - Min2) / 5,
axisLabel: {
formatter: '{value}%', //轴线加单位
textStyle: {
color: '#666',
},
},
//name的样式设计
splitLine: {
lineStyle: {
type: 'solid', //设置网格线类型 dotted：虚线 solid:实线
color: '#E9E9E9',
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
],
series: [
{
name: echartsData.barEchartsZL.name,
type: 'bar',
barWidth: 20, //柱状图宽度
itemStyle: {
barBorderRadius: [20, 20, 0, 0],
},
emphasis: {
focus: 'series'
},
data: echartsData.barEchartsZL.data
},
{
name: echartsData.barEchartsZZL.name,
type: 'line',
emphasis: {
focus: 'series'
},
yAxisIndex: 1,
data: echartsData.barEchartsZZL.data
},
]
})
},
}
};
</script>
<style lang="scss" scoped>
</style>
Multiple data - the pop-up layer shares an Echats chart and the method of inconsistent left and right scales of Echarts double Y-axis
Guess you like
Origin blog.csdn.net/Amily8512/article/details/122489288
Recommended
Ranking