You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
162 lines
3.4 KiB
162 lines
3.4 KiB
<template>
|
|
<div class="electricityInfo">
|
|
<div ref="electricityRef" class="electricityLine" />
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import * as echarts from 'echarts';
|
|
import { Ref } from 'vue';
|
|
import { powerLostRate } from '@/api/data/index';
|
|
import useCounter from '@/store/modules/date';
|
|
const counterStore = useCounter();
|
|
const yearMonthDay = ref();
|
|
const electricityRef: Ref<HTMLElement | any> = ref(null);
|
|
|
|
const options = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross'
|
|
}
|
|
},
|
|
legend: {
|
|
top: 10,
|
|
right: 10,
|
|
itemWidth: 11,
|
|
itemHeight: 11,
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 14
|
|
}
|
|
},
|
|
grid: {
|
|
top: '20%',
|
|
left: '0',
|
|
right: '0',
|
|
bottom: '0',
|
|
containLabel: true
|
|
},
|
|
dataset: {
|
|
source: [
|
|
['name', '合力供热站', '浑南热力', '国润低碳', '新环保', '节能环保'],
|
|
['计划数', 41.1, 30.4, 65.1, 53.3, 69],
|
|
['实际数', 35.5, 92.1, 85.7, 83.1, 72]
|
|
]
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
axisLabel: {
|
|
show: true,
|
|
color: '#99CFFF'
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#546778'
|
|
}
|
|
}
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '单位',
|
|
nameTextStyle: {
|
|
color: '#546778',
|
|
fontSize: 12,
|
|
padding: [0, 0, 0, 0] //name文字位置 对应 上右下左
|
|
},
|
|
axisTick: {
|
|
// 轴刻度
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
color: '#546778'
|
|
},
|
|
splitLine: {
|
|
// 网格线
|
|
show: true,
|
|
lineStyle: {
|
|
//分割线
|
|
color: '#306269',
|
|
width: 1,
|
|
opacity: 0.2
|
|
}
|
|
},
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
seriesLayoutBy: 'row',
|
|
barWidth: 15, //设置宽度
|
|
itemStyle: {
|
|
//渐变背景
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#61B9FF' },
|
|
{ offset: 0.5, color: '#4263DF' },
|
|
{ offset: 1, color: '#2106BD' }
|
|
])
|
|
}
|
|
},
|
|
{
|
|
type: 'bar',
|
|
seriesLayoutBy: 'row',
|
|
barWidth: 15, //柱宽
|
|
itemStyle: {
|
|
//渐变背景
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#F2DE28' },
|
|
{ offset: 0.5, color: '#F5A113' },
|
|
{ offset: 1, color: '#F96800' }
|
|
])
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
onMounted(() => {
|
|
// 图表初始化
|
|
const chart = echarts.init(electricityRef.value);
|
|
chart.setOption(options);
|
|
// getElect();
|
|
|
|
// 大小自适应
|
|
window.addEventListener('resize', () => {
|
|
chart.resize();
|
|
});
|
|
});
|
|
watchEffect(() => {
|
|
const dataStr = counterStore.dateStr;
|
|
if (dataStr != '') {
|
|
yearMonthDay.value = counterStore.dateStr.split('-');
|
|
// getElect();
|
|
}
|
|
});
|
|
function getElect() {
|
|
//获取图表数据
|
|
const params = {
|
|
orgId: 206,
|
|
dateYear: yearMonthDay.value[0],
|
|
dateMonth: yearMonthDay.value[1],
|
|
dateDay: yearMonthDay.value[2]
|
|
};
|
|
powerLostRate(params).then((res: any) => {
|
|
if (res.code === 200 && Object.keys(res.data).length != 0) {
|
|
options.dataset.source = res.data.source;
|
|
options.yAxis[0].name = `单位(${res.data.unit})`;
|
|
const chart = echarts.init(electricityRef.value);
|
|
chart.setOption(options);
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.electricityInfo {
|
|
width: 100%;
|
|
height: 318px;
|
|
.electricityLine {
|
|
width: 100%;
|
|
height: 318px;
|
|
}
|
|
}
|
|
</style>
|
|
|