343 lines
9.2 KiB
Vue
343 lines
9.2 KiB
Vue
<template>
|
||
<Card title="总碳排放分析">
|
||
<div class="carbonEmission">
|
||
<!-- <el-date-picker
|
||
v-model="time1"
|
||
type="daterange"
|
||
range-separator="-"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
value-format="yyyy-MM-dd"
|
||
size="mini"
|
||
></el-date-picker> -->
|
||
<el-select
|
||
style="margin-top: 20px"
|
||
v-model="date"
|
||
placeholder="请选择日期"
|
||
@change="credad"
|
||
>
|
||
<el-option
|
||
v-for="(item, index) in yearsList"
|
||
:key="index"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="chart" ref="carbonChart"></div>
|
||
</Card>
|
||
</template>
|
||
|
||
<script>
|
||
import { getdoubleCarbonApi } from "@/assets/js/api/zhongjianFourth";
|
||
import echarts from "echarts4";
|
||
import Card from "../components/Card.vue";
|
||
|
||
export default {
|
||
components: {
|
||
Card,
|
||
},
|
||
data() {
|
||
return {
|
||
yearsList: [
|
||
{
|
||
value: "1",
|
||
label: "最近1年",
|
||
},
|
||
{
|
||
value: "2",
|
||
label: "最近14天",
|
||
},
|
||
{
|
||
value: "3",
|
||
label: "最近7天",
|
||
},
|
||
],
|
||
date: "", //日期
|
||
projectSn: this.$store.state.projectSn, //项目sn
|
||
typeId: "", //日期类型
|
||
carbonListNum: [], //总数据
|
||
carbonList1: [], //碳排放
|
||
carbonList2: [], //减少碳排放
|
||
carbonList3: [], //净碳排放
|
||
};
|
||
},
|
||
created() {
|
||
this.credad();
|
||
},
|
||
mounted() {
|
||
this.createCarbonChart();
|
||
},
|
||
methods: {
|
||
credad(val) {
|
||
this.carbonList1 = []
|
||
this.carbonList2 = []
|
||
this.carbonList3 = []
|
||
|
||
//获取总碳排放分析数据
|
||
getdoubleCarbonApi({
|
||
projectSn: this.projectSn,
|
||
typeId: val == null? 3 : val,
|
||
}).then((res) => {
|
||
console.log('res',res);
|
||
if (res.code == 200) {
|
||
this.carbonListNum = res.result;
|
||
this.carbonListNum.forEach((item) => {
|
||
this.carbonList1.push(item.carbonValue);
|
||
this.carbonList2.push(item.reduceValue);
|
||
this.carbonList3.push(item.cleanValue);
|
||
});
|
||
this.createCarbonChart();
|
||
}
|
||
});
|
||
},
|
||
createCarbonChart() {
|
||
let monitor = echarts.init(this.$refs.carbonChart);
|
||
var colors = ["#3A85D3", "#5AD8A6", "#008000", "#5470c6", "#61a0a8"];
|
||
|
||
var option = {
|
||
color: colors, //下面这种直接配置演示也行
|
||
//color: ['#3A85D3','#5AD8A6','#5470c6', '#008000', '#61a0a8'], //依次选择颜色，默认为第一个颜色，多根柱子多个颜色
|
||
|
||
title: {
|
||
left: "center", //title 组件离容器左侧的距离，也可以是像素，和百分比
|
||
},
|
||
|
||
tooltip: {
|
||
trigger: "axis", //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
|
||
axisPointer: {
|
||
// 坐标轴指示器，坐标轴触发有效
|
||
type: false, // 默认为直线，可选为：'line' | 'shadow' | 'cross' , shadow表示阴影，cross为十字准星
|
||
},
|
||
|
||
formatter: function (params) {
|
||
//params[0].marker,marker参数为提示语前面的小圆点
|
||
let data = "";
|
||
if(params.length >= 1) {
|
||
data = params[0].name + "<br>"
|
||
}
|
||
params.forEach(res =>{
|
||
data = data + res.seriesName +":"+
|
||
res.value +
|
||
"<br>" ;
|
||
})
|
||
return ( data );
|
||
},
|
||
},
|
||
legend: {
|
||
textStyle: {
|
||
//图例文字的样式
|
||
color: "#fff",
|
||
},
|
||
data: ["碳排放", "减少碳排放", "净碳排放"],
|
||
left: "5%", //组件离容器左侧的距离，可以是left,center,right，也可以是像素px和百分比10%
|
||
},
|
||
//backgroundColor: '#00199',//整个绘图背景色
|
||
grid: {
|
||
left: "3%",
|
||
right: "1%",
|
||
bottom: "0%", //网格图（柱状图、折线图、气泡图等）离底部的距离，也可以用像素比如10px
|
||
containLabel: true, //grid 区域是否包含坐标轴的刻度标签。false可能溢出，默认为false
|
||
},
|
||
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: [
|
||
"1月",
|
||
"2月",
|
||
"3月",
|
||
"4月",
|
||
"5月",
|
||
"6月",
|
||
"7月",
|
||
"8月",
|
||
"9月",
|
||
"10月",
|
||
"11月",
|
||
"12月",
|
||
],
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#fff", //坐标值得具体的颜色
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
axisLine: {
|
||
//不显示坐标轴线
|
||
lineStyle: {
|
||
type: "dashed",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
//让x轴左边的数显示为正数
|
||
formatter: function (v) {
|
||
return v > 0 ? v : -v;
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: "dashed",
|
||
},
|
||
},
|
||
axisLine: {
|
||
//这是y轴文字颜色
|
||
lineStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#fff", //坐标值得具体的颜色
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "碳排放",
|
||
type: "bar",
|
||
stack: "总量",
|
||
showSymbol: true, //是否默认展示圆点
|
||
symbol: "circle", //设定为实心点
|
||
barMaxWidth: 30,
|
||
itemStyle: {
|
||
normal: {
|
||
color: {
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(204, 89, 42, 1)", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(204, 89, 42, 0)", // 100% 处的颜色
|
||
},
|
||
],
|
||
global: false, // 缺省为 false
|
||
},
|
||
},
|
||
},
|
||
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
color: "#fff",
|
||
},
|
||
|
||
data: this.carbonList1,
|
||
},
|
||
|
||
{
|
||
name: "减少碳排放",
|
||
type: "bar",
|
||
stack: "总量",
|
||
barMaxWidth: 30,
|
||
itemStyle: {
|
||
normal: {
|
||
color: {
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(81, 166, 178, 0)", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(81, 166, 178, 1)", // 100% 处的颜色
|
||
},
|
||
],
|
||
global: false, // 缺省为 false
|
||
},
|
||
},
|
||
},
|
||
|
||
label: {
|
||
show: true, //控制柱状图是否显示数值
|
||
position: "bottom",
|
||
color: "#fff",
|
||
// formatter: function (params) {
|
||
// //格式化柱状图里的数字
|
||
// return -params.value;
|
||
// },
|
||
},
|
||
data: this.carbonList2,
|
||
},
|
||
{
|
||
name: "净碳排放",
|
||
type: "line",
|
||
symbolSize: 10,
|
||
symbol: "circle",
|
||
smooth: true,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#fff",
|
||
barBorderRadius: 0,
|
||
},
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
width: 4,
|
||
color: {
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(255, 195, 3, 1)", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(255, 195, 3, 1)", // 100% 处的颜色
|
||
},
|
||
],
|
||
global: false, // 缺省为 false
|
||
},
|
||
},
|
||
},
|
||
data: this.carbonList3,
|
||
},
|
||
],
|
||
};
|
||
monitor.setOption(option);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.chart {
|
||
width: 100%;
|
||
height: calc(100% - 37px);
|
||
margin-top: 23px;
|
||
}
|
||
.carbonEmission {
|
||
cursor: pointer;
|
||
margin-left: 81%;
|
||
width: 210;
|
||
height: 17px;
|
||
}
|
||
</style> |