132 lines
3.0 KiB
Vue
132 lines
3.0 KiB
Vue
<template>
|
||
<div
|
||
id="analysischartLine"
|
||
style="width: 100%"
|
||
:style="{ height: chartHeight + 'px' }"></div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from 'echarts';
|
||
import resize from '@/utils/chartMixins/resize';
|
||
export default {
|
||
name: 'LineChart',
|
||
mixins: [resize],
|
||
data() {
|
||
return {
|
||
chartDom: '',
|
||
chart: '',
|
||
chartHeight: this.tableHeight(370),
|
||
};
|
||
},
|
||
props: {
|
||
chartData: {
|
||
type: Array,
|
||
required: true,
|
||
default: () => {
|
||
return [];
|
||
},
|
||
},
|
||
},
|
||
watch: {
|
||
chartData: function () {
|
||
this.getChart();
|
||
},
|
||
},
|
||
mounted() {
|
||
window.addEventListener('resize', () => {
|
||
this.chartHeight = this.tableHeight(370);
|
||
});
|
||
},
|
||
methods: {
|
||
getChart() {
|
||
if (
|
||
this.chart !== null &&
|
||
this.chart !== '' &&
|
||
this.chart !== undefined
|
||
) {
|
||
this.chart.dispose(); // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
|
||
}
|
||
this.chartDom = document.getElementById('analysischartLine');
|
||
this.chart = echarts.init(this.chartDom);
|
||
if (this.chartData.length === 0) {
|
||
return false;
|
||
}
|
||
let arr = this.chartData[0].type; // [水，电，煤]
|
||
let keys = Object.keys(this.chartData[0]);
|
||
let yData = [
|
||
{
|
||
name: '本期',
|
||
type: 'bar',
|
||
data: [],
|
||
barWidth: 20,
|
||
},
|
||
{
|
||
name: '上期',
|
||
type: 'bar',
|
||
data: [],
|
||
barWidth: 20,
|
||
},
|
||
];
|
||
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]]);
|
||
}
|
||
if (keys[k].indexOf(arr[j] + '_能源消耗') > -1) {
|
||
yData[0].data.push(this.chartData[0][keys[k]]);
|
||
}
|
||
}
|
||
}
|
||
var option = {
|
||
color: ['#288AFF', '#8EF0AB'],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
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>`;
|
||
return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
|
||
<span>${str}${seriesNameStr}</span>
|
||
<span>${valueStr}</span>
|
||
</span>`;
|
||
})
|
||
.join(``)
|
||
);
|
||
},
|
||
},
|
||
legend: {
|
||
right: '1%',
|
||
icon: 'rect',
|
||
itemHeight: 8,
|
||
itemWidth: 8,
|
||
},
|
||
grid: {
|
||
left: '1%',
|
||
right: '1%',
|
||
bottom: '3%',
|
||
containLabel: true,
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
boundaryGap: [0, 0.01],
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: arr,
|
||
},
|
||
series: yData,
|
||
};
|
||
option && this.chart.setOption(option);
|
||
},
|
||
},
|
||
};
|
||
</script>
|