|
|
@@ -2,40 +2,39 @@ |
|
|
|
<div |
|
|
|
id="analysischartLine" |
|
|
|
style="width: 100%" |
|
|
|
:style="{ height: chartHeight + 'px' }" |
|
|
|
></div> |
|
|
|
:style="{ height: chartHeight + 'px' }"></div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import * as echarts from 'echarts' |
|
|
|
import resize from '@/utils/chartMixins/resize' |
|
|
|
import * as echarts from 'echarts'; |
|
|
|
import resize from '@/utils/chartMixins/resize'; |
|
|
|
export default { |
|
|
|
name: "LineChart", |
|
|
|
name: 'LineChart', |
|
|
|
mixins: [resize], |
|
|
|
data() { |
|
|
|
return { |
|
|
|
chartDom: '', |
|
|
|
chart: '', |
|
|
|
chartHeight: this.tableHeight(370) |
|
|
|
} |
|
|
|
chartHeight: this.tableHeight(370), |
|
|
|
}; |
|
|
|
}, |
|
|
|
props: { |
|
|
|
chartData: { |
|
|
|
type: Array, |
|
|
|
required: true, |
|
|
|
default: () => { |
|
|
|
return [] |
|
|
|
} |
|
|
|
} |
|
|
|
return []; |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
chartData: function () { |
|
|
|
this.getChart() |
|
|
|
} |
|
|
|
this.getChart(); |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
window.addEventListener('resize', () => { |
|
|
|
this.chartHeight = this.tableHeight(370) |
|
|
|
}) |
|
|
|
this.chartHeight = this.tableHeight(370); |
|
|
|
}); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getChart() { |
|
|
@@ -44,44 +43,36 @@ export default { |
|
|
|
this.chart !== '' && |
|
|
|
this.chart !== undefined |
|
|
|
) { |
|
|
|
this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例 |
|
|
|
this.chart.dispose(); // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例 |
|
|
|
} |
|
|
|
this.chartDom = document.getElementById('analysischartLine') |
|
|
|
this.chart = echarts.init(this.chartDom) |
|
|
|
this.chartDom = document.getElementById('analysischartLine'); |
|
|
|
this.chart = echarts.init(this.chartDom); |
|
|
|
if (this.chartData.length === 0) { |
|
|
|
return false |
|
|
|
return false; |
|
|
|
} |
|
|
|
let arr = this.chartData[0].type // [水,电,煤] |
|
|
|
let keys = Object.keys(this.chartData[0]) |
|
|
|
let arr = this.chartData[0].type; // [水,电,煤] |
|
|
|
let keys = Object.keys(this.chartData[0]); |
|
|
|
let yData = [ |
|
|
|
{ |
|
|
|
name: '本期', |
|
|
|
type: 'bar', |
|
|
|
data: [], |
|
|
|
barWidth: 20, |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
position: 'top' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '上期', |
|
|
|
type: 'bar', |
|
|
|
data: [], |
|
|
|
barWidth: 20, |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
position: 'top' |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
}, |
|
|
|
]; |
|
|
|
for (let j = 0; j < arr.length; j++) { |
|
|
|
for (let k = 0; k < keys.length; k++) { |
|
|
|
if (keys[k].indexOf(arr[j] + '_上期') > -1) { |
|
|
|
yData[1].data.push(this.chartData[0][keys[k]]) |
|
|
|
yData[1].data.push(this.chartData[0][keys[k]]); |
|
|
|
} |
|
|
|
if (keys[k].indexOf(arr[j] + '_能源消耗') > -1) { |
|
|
|
yData[0].data.push(this.chartData[0][keys[k]]) |
|
|
|
yData[0].data.push(this.chartData[0][keys[k]]); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
@@ -90,49 +81,51 @@ export default { |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis', |
|
|
|
axisPointer: { |
|
|
|
type: 'shadow' |
|
|
|
type: 'shadow', |
|
|
|
}, |
|
|
|
formatter: function (params) { |
|
|
|
return ( |
|
|
|
params[0].axisValue + |
|
|
|
`<br>` + |
|
|
|
params.map((item) => { |
|
|
|
let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>` |
|
|
|
let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>` |
|
|
|
let value = item.value ? item.value : '-' |
|
|
|
let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>` |
|
|
|
params |
|
|
|
.map((item) => { |
|
|
|
let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>`; |
|
|
|
let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`; |
|
|
|
let value = item.value ? item.value : '-'; |
|
|
|
let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>`; |
|
|
|
return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px"> |
|
|
|
<span>${str}${seriesNameStr}</span> |
|
|
|
<span>${valueStr}</span> |
|
|
|
</span>` |
|
|
|
}).join(``) |
|
|
|
) |
|
|
|
} |
|
|
|
</span>`; |
|
|
|
}) |
|
|
|
.join(``) |
|
|
|
); |
|
|
|
}, |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
right: '1%', |
|
|
|
icon: 'rect', |
|
|
|
itemHeight: 8, |
|
|
|
itemWidth: 8 |
|
|
|
itemWidth: 8, |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
left: '1%', |
|
|
|
right: '1%', |
|
|
|
bottom: '3%', |
|
|
|
containLabel: true |
|
|
|
containLabel: true, |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: 'value', |
|
|
|
boundaryGap: [0, 0.01] |
|
|
|
boundaryGap: [0, 0.01], |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: 'category', |
|
|
|
data: arr |
|
|
|
data: arr, |
|
|
|
}, |
|
|
|
series: yData |
|
|
|
} |
|
|
|
series: yData, |
|
|
|
}; |
|
|
|
option && this.chart.setOption(option); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |