109 lines
2.4 KiB
Vue
109 lines
2.4 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(350)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
chartData: {
|
|||
|
|
type: Array,
|
|||
|
|
required: true,
|
|||
|
|
default: () => {
|
|||
|
|
return []
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
chartData: function () {
|
|||
|
|
this.getChart()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
window.addEventListener('resize', () => {
|
|||
|
|
this.chartHeight = this.tableHeight(350)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
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: []
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '上期',
|
|||
|
|
type: 'bar',
|
|||
|
|
data: []
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
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 = {
|
|||
|
|
// title: {
|
|||
|
|
// text: 'World Population'
|
|||
|
|
// },
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
legend: {},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '4%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
boundaryGap: [0, 0.01]
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: arr
|
|||
|
|
},
|
|||
|
|
series: yData
|
|||
|
|
}
|
|||
|
|
option && this.chart.setOption(option);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|