|
@@ -5,20 +5,18 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
option: {
|
|
|
- color: ['#6DA6F5','#A29DF8'],
|
|
|
+ color: ["#6DA6F5", "#A29DF8"],
|
|
|
legend: {
|
|
|
- data: [
|
|
|
- '车辆排放',
|
|
|
- ]
|
|
|
+ data: ["车辆排放"],
|
|
|
},
|
|
|
grid: {
|
|
|
- left: '2%', //默认10%
|
|
|
- right: '8%', //默认10%
|
|
|
- bottom: '30px', //默认60
|
|
|
- top: '40px',
|
|
|
- containLabel: true
|
|
|
+ left: "2%", //默认10%
|
|
|
+ right: "8%", //默认10%
|
|
|
+ bottom: "30px", //默认60
|
|
|
+ top: "40px",
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
- title:[
|
|
|
+ title: [
|
|
|
{
|
|
|
subtext: "单位: tCO₂e", //主标题
|
|
|
right: "0%", //标题的位置 默认是left,其余还有center、right属性
|
|
@@ -31,118 +29,117 @@ export default {
|
|
|
},
|
|
|
],
|
|
|
xAxis: {
|
|
|
- type: 'value',
|
|
|
+ type: "value",
|
|
|
nameTextStyle: {
|
|
|
- padding: [10, 0, 10, -20]
|
|
|
+ padding: [10, 0, 10, -20],
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ rotate: "45",
|
|
|
},
|
|
|
- axisLabel : {
|
|
|
- rotate:"45"
|
|
|
- }
|
|
|
},
|
|
|
yAxis: {
|
|
|
- type: 'category',
|
|
|
+ type: "category",
|
|
|
data: [],
|
|
|
axisTick: {
|
|
|
- show: false
|
|
|
+ show: true,
|
|
|
},
|
|
|
axisLine: {
|
|
|
- show: false
|
|
|
+ show: true,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
margin: 8,
|
|
|
formatter: function (params) {
|
|
|
var val = "";
|
|
|
if (params.length > 4) {
|
|
|
- val = params.substr(0, 4) + '...';
|
|
|
+ val = params.substr(0, 4) + "...";
|
|
|
return val;
|
|
|
} else {
|
|
|
return params;
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
},
|
|
|
tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
+ trigger: "axis",
|
|
|
axisPointer: {
|
|
|
- type: 'shadow'
|
|
|
+ type: "shadow",
|
|
|
},
|
|
|
textStyle: {
|
|
|
- color: '#fff',
|
|
|
- align: 'left',
|
|
|
- fontSize: 14
|
|
|
+ color: "#fff",
|
|
|
+ align: "left",
|
|
|
+ fontSize: 14,
|
|
|
},
|
|
|
- axisLine: {//x坐标轴轴线
|
|
|
+ axisLine: {
|
|
|
+ //x坐标轴轴线
|
|
|
show: true,
|
|
|
- lineStyle: {//x坐标轴轴线样式
|
|
|
- color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)',设置标签颜色
|
|
|
- }
|
|
|
+ lineStyle: {
|
|
|
+ //x坐标轴轴线样式
|
|
|
+ color: "#000", //'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)',设置标签颜色
|
|
|
+ },
|
|
|
},
|
|
|
- backgroundColor: 'rgba(0,0,0,0.8)',
|
|
|
+ backgroundColor: "rgba(0,0,0,0.8)",
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- name: '车辆排放',
|
|
|
+ name: "车辆排放",
|
|
|
data: [],
|
|
|
- type: 'bar',
|
|
|
- barWidth: '30%',
|
|
|
+ type: "bar",
|
|
|
+ barWidth: "30%",
|
|
|
backgroundStyle: {
|
|
|
- color: 'rgba(180, 180, 180, 0.2)'
|
|
|
- }
|
|
|
+ color: "rgba(180, 180, 180, 0.2)",
|
|
|
+ },
|
|
|
},
|
|
|
- ]
|
|
|
+ ],
|
|
|
},
|
|
|
- }
|
|
|
+ };
|
|
|
},
|
|
|
props: {
|
|
|
height: Number,
|
|
|
- queryData: Object
|
|
|
+ queryData: Object,
|
|
|
},
|
|
|
components: {
|
|
|
- Card
|
|
|
+ Card,
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.init()
|
|
|
+ this.init();
|
|
|
},
|
|
|
methods: {
|
|
|
init() {
|
|
|
- let chart = this.$echarts.init(this.$refs.myChart)
|
|
|
+ let chart = this.$echarts.init(this.$refs.myChart);
|
|
|
this.chart = chart;
|
|
|
this.$util.chartsResize(this.chart);
|
|
|
- chart.setOption(this.option)
|
|
|
- this.getData()
|
|
|
+ chart.setOption(this.option);
|
|
|
+ this.getData();
|
|
|
},
|
|
|
getData() {
|
|
|
- return apiCarbonCar.getVehicleInfoOrder(this.queryData).then(res=>{
|
|
|
+ return apiCarbonCar.getVehicleInfoOrder(this.queryData).then((res) => {
|
|
|
if (res) {
|
|
|
- res.sort((a,b)=>{
|
|
|
- if (a.jsonObject.Vehicle>b.jsonObject.Vehicle) {
|
|
|
+ res.sort((a, b) => {
|
|
|
+ if (a.jsonObject.Vehicle > b.jsonObject.Vehicle) {
|
|
|
return 1;
|
|
|
}
|
|
|
return -1;
|
|
|
- })
|
|
|
+ });
|
|
|
}
|
|
|
- let data = this.$util.dataUtil.covertDataToEcharts(res, ['Vehicle'])
|
|
|
+ let data = this.$util.dataUtil.covertDataToEcharts(res, ["Vehicle"]);
|
|
|
this.option.yAxis.data = data.label;
|
|
|
let arr = [];
|
|
|
for (const key in data) {
|
|
|
- if (key == 'label'){
|
|
|
+ if (key == "label") {
|
|
|
continue;
|
|
|
}
|
|
|
- arr.push(data[key])
|
|
|
+ arr.push(data[key]);
|
|
|
}
|
|
|
for (let i = 0; i < this.option.series.length; i++) {
|
|
|
- this.option.series[i].data = arr[i]
|
|
|
+ this.option.series[i].data = arr[i];
|
|
|
}
|
|
|
- this.chart.setOption(this.option)
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ this.chart.setOption(this.option);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div class="myChart" ref="myChart" :style="{height: height+'px'}">
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
+ <div class="myChart" ref="myChart" :style="{ height: height + 'px' }"></div>
|
|
|
</template>
|