projects/mesxc-zjl #337
@ -1,138 +1,131 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
id="analysischartLine"
|
id="analysischartLine"
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
:style="{ height: chartHeight + 'px' }"
|
:style="{ height: chartHeight + 'px' }"></div>
|
||||||
></div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts';
|
||||||
import resize from '@/utils/chartMixins/resize'
|
import resize from '@/utils/chartMixins/resize';
|
||||||
export default {
|
export default {
|
||||||
name: "LineChart",
|
name: 'LineChart',
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chartDom: '',
|
chartDom: '',
|
||||||
chart: '',
|
chart: '',
|
||||||
chartHeight: this.tableHeight(370)
|
chartHeight: this.tableHeight(370),
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
chartData: {
|
chartData: {
|
||||||
type: Array,
|
type: Array,
|
||||||
required: true,
|
required: true,
|
||||||
default: () => {
|
default: () => {
|
||||||
return []
|
return [];
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
chartData: function () {
|
chartData: function () {
|
||||||
this.getChart()
|
this.getChart();
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
this.chartHeight = this.tableHeight(370)
|
this.chartHeight = this.tableHeight(370);
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getChart() {
|
getChart() {
|
||||||
if (
|
if (
|
||||||
this.chart !== null &&
|
this.chart !== null &&
|
||||||
this.chart !== '' &&
|
this.chart !== '' &&
|
||||||
this.chart !== undefined
|
this.chart !== undefined
|
||||||
) {
|
) {
|
||||||
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
|
this.chart.dispose(); // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
|
||||||
}
|
}
|
||||||
this.chartDom = document.getElementById('analysischartLine')
|
this.chartDom = document.getElementById('analysischartLine');
|
||||||
this.chart = echarts.init(this.chartDom)
|
this.chart = echarts.init(this.chartDom);
|
||||||
if (this.chartData.length === 0) {
|
if (this.chartData.length === 0) {
|
||||||
return false
|
return false;
|
||||||
}
|
}
|
||||||
let arr = this.chartData[0].type // [水，电，煤]
|
let arr = this.chartData[0].type; // [水，电，煤]
|
||||||
let keys = Object.keys(this.chartData[0])
|
let keys = Object.keys(this.chartData[0]);
|
||||||
let yData = [
|
let yData = [
|
||||||
{
|
{
|
||||||
name: '本期',
|
name: '本期',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: [],
|
data: [],
|
||||||
barWidth: 20,
|
barWidth: 20,
|
||||||
label: {
|
},
|
||||||
show: true,
|
{
|
||||||
position: 'top'
|
name: '上期',
|
||||||
}
|
type: 'bar',
|
||||||
},
|
data: [],
|
||||||
{
|
barWidth: 20,
|
||||||
name: '上期',
|
},
|
||||||
type: 'bar',
|
];
|
||||||
data: [],
|
for (let j = 0; j < arr.length; j++) {
|
||||||
barWidth: 20,
|
for (let k = 0; k < keys.length; k++) {
|
||||||
label: {
|
if (keys[k].indexOf(arr[j] + '_上期') > -1) {
|
||||||
show: true,
|
yData[1].data.push(this.chartData[0][keys[k]]);
|
||||||
position: 'top'
|
}
|
||||||
}
|
if (keys[k].indexOf(arr[j] + '_能源消耗') > -1) {
|
||||||
}
|
yData[0].data.push(this.chartData[0][keys[k]]);
|
||||||
]
|
}
|
||||||
for (let j = 0; j < arr.length; j++) {
|
}
|
||||||
for (let k = 0; k < keys.length; k++) {
|
}
|
||||||
if (keys[k].indexOf(arr[j]+'_上期') > -1) {
|
var option = {
|
||||||
yData[1].data.push(this.chartData[0][keys[k]])
|
color: ['#288AFF', '#8EF0AB'],
|
||||||
}
|
tooltip: {
|
||||||
if (keys[k].indexOf(arr[j]+'_能源消耗') > -1) {
|
trigger: 'axis',
|
||||||
yData[0].data.push(this.chartData[0][keys[k]])
|
axisPointer: {
|
||||||
}
|
type: 'shadow',
|
||||||
}
|
},
|
||||||
}
|
formatter: function (params) {
|
||||||
var option = {
|
return (
|
||||||
color:['#288AFF','#8EF0AB'],
|
params[0].axisValue +
|
||||||
tooltip: {
|
`<br>` +
|
||||||
trigger: 'axis',
|
params
|
||||||
axisPointer: {
|
.map((item) => {
|
||||||
type: 'shadow'
|
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>`;
|
||||||
formatter: function(params) {
|
let value = item.value ? item.value : '-';
|
||||||
return (
|
let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>`;
|
||||||
params[0].axisValue +
|
return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
|
||||||
`<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>${str}${seriesNameStr}</span>
|
||||||
<span>${valueStr}</span>
|
<span>${valueStr}</span>
|
||||||
</span>`
|
</span>`;
|
||||||
}).join(``)
|
})
|
||||||
)
|
.join(``)
|
||||||
}
|
);
|
||||||
},
|
},
|
||||||
legend: {
|
},
|
||||||
right: '1%',
|
legend: {
|
||||||
icon: 'rect',
|
right: '1%',
|
||||||
itemHeight: 8,
|
icon: 'rect',
|
||||||
itemWidth: 8
|
itemHeight: 8,
|
||||||
},
|
itemWidth: 8,
|
||||||
grid: {
|
},
|
||||||
left: '1%',
|
grid: {
|
||||||
right: '1%',
|
left: '1%',
|
||||||
bottom: '3%',
|
right: '1%',
|
||||||
containLabel: true
|
bottom: '3%',
|
||||||
},
|
containLabel: true,
|
||||||
yAxis: {
|
},
|
||||||
type: 'value',
|
yAxis: {
|
||||||
boundaryGap: [0, 0.01]
|
type: 'value',
|
||||||
},
|
boundaryGap: [0, 0.01],
|
||||||
xAxis: {
|
},
|
||||||
type: 'category',
|
xAxis: {
|
||||||
data: arr
|
type: 'category',
|
||||||
},
|
data: arr,
|
||||||
series: yData
|
},
|
||||||
}
|
series: yData,
|
||||||
option && this.chart.setOption(option);
|
};
|
||||||
}
|
option && this.chart.setOption(option);
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
@ -74,29 +74,12 @@ export default {
|
|||||||
},
|
},
|
||||||
// 导出excel
|
// 导出excel
|
||||||
exportExl(params) {
|
exportExl(params) {
|
||||||
exportTrend({ ...params }).then((res) => {
|
exportTrend({ ...params })
|
||||||
// let fileName = '';
|
.then((response) => {
|
||||||
// const contentDisposition = res.headers['content-disposition'];
|
this.$download.excel(response, '走势分析.xls');
|
||||||
// if (contentDisposition) {
|
|
||||||
// fileName = decodeURIComponent(
|
|
||||||
// contentDisposition.slice(
|
|
||||||
// contentDisposition.indexOf('filename=') + 9
|
|
||||||
// )
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
const blob = new Blob([res.data]);
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.readAsDataURL(blob);
|
|
||||||
reader.onload = (e) => {
|
|
||||||
const a = document.createElement('a');
|
|
||||||
a.download = '走势分析';
|
|
||||||
a.href = e.target.result;
|
|
||||||
document.body.appendChild(a);
|
|
||||||
a.click();
|
|
||||||
document.body.removeChild(a);
|
|
||||||
this.$message.success('导出成功');
|
this.$message.success('导出成功');
|
||||||
};
|
})
|
||||||
});
|
.catch(() => {});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user