185 lines
4.2 KiB
Vue
185 lines
4.2 KiB
Vue
<!--空气质量变化趋势-->
|
|
<template>
|
|
<div id="charts" ref="charts">
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
import {EleResize} from '@/utils/esresize';
|
|
|
|
const lodash = require('lodash')
|
|
export default {
|
|
name: 'AirQualityTrendCharts',
|
|
props: {
|
|
dataSource: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
color: {
|
|
type: Array,
|
|
default: () => [
|
|
'#FDBD00',
|
|
'#00D5FF',
|
|
'#1978E5'
|
|
]
|
|
}
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
watch: {
|
|
dataSource: {
|
|
deep: true,
|
|
immediate: true,
|
|
handler(value) {
|
|
if (value.length) {
|
|
this.$nextTick(() => {
|
|
this.init()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
|
|
methods: {
|
|
init() {
|
|
let myCharts = echarts.init(this.$refs.charts)
|
|
let barCharts = this.$refs.charts
|
|
// 复制代码
|
|
let color = this.color;
|
|
let chartData = this.dataSource;
|
|
//将数据根据attr进行分组
|
|
let dataSourceByAttrObj = lodash.groupBy(chartData, 'attr')
|
|
//将不同对象的值转换成不同的数组
|
|
let dataSource = Object.values(dataSourceByAttrObj)
|
|
//过滤x轴名称
|
|
let xAxisName = []
|
|
let nameLengthMaxIndex = 0
|
|
let nameLength = 0
|
|
//找出name最多的数据
|
|
for (const index in dataSource) {
|
|
let xAxisNameList = dataSource[index].map(item => item.name) || []
|
|
if (xAxisNameList.length > nameLength) {
|
|
nameLength = xAxisNameList.length
|
|
nameLengthMaxIndex = index
|
|
}
|
|
}
|
|
//将挑选的name作为x轴数据
|
|
xAxisName = dataSource[nameLengthMaxIndex].map(item => item.name) || []
|
|
//获取y周值
|
|
let attrNames = Object.keys(dataSourceByAttrObj)
|
|
let seriesList = []
|
|
for (const index in dataSource) {
|
|
let yAxisDataSource = dataSource[index].map(item => item.value)
|
|
let series = {
|
|
name: attrNames[index],
|
|
type: 'line',
|
|
smooth: false,
|
|
zlevel: 3,
|
|
symbol: 'none', //数据交叉点样式
|
|
data: yAxisDataSource,
|
|
yAxisIndex: 0, // 通过这个判断左右
|
|
lineStyle: {
|
|
width: 3,
|
|
}
|
|
}
|
|
seriesList.push(series)
|
|
}
|
|
let option = {
|
|
color: color,
|
|
legend: {
|
|
top: 10,
|
|
left: 'center',
|
|
itemWidth: 11,
|
|
itemHeight: 11,
|
|
icon: 'circle',
|
|
textStyle: {
|
|
color: 'rgba(106,196,255,0.60)',
|
|
fontSize: 15,
|
|
padding: [0, 0, 0, 10]
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
appendToBody: true
|
|
},
|
|
grid: {
|
|
left: 10,
|
|
right: 5,
|
|
top: 50,
|
|
bottom: 5,
|
|
containLabel: true,
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: true,
|
|
axisLabel: {
|
|
fontSize: 15,
|
|
color: 'rgba(106,196,255,0.60)'
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'rgba(176,215,255,0.40)',
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
data: xAxisName,
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
splitNumber: 5,
|
|
axisLabel: {
|
|
fontSize: 15,
|
|
color: 'rgba(106,196,255,0.60)'
|
|
},
|
|
nameTextStyle: {
|
|
color: 'rgba(106,196,255,0.60)',
|
|
fontSize: 15,
|
|
lineHeight: 20,
|
|
},
|
|
// 分割线
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: 'rgba(176,215,255,0.40)',
|
|
type: 'dashed'
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
}
|
|
],
|
|
series: seriesList,
|
|
};
|
|
|
|
|
|
myCharts.setOption(option)
|
|
let listener = function () {
|
|
myCharts.resize()
|
|
}
|
|
EleResize.on(barCharts, listener)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
#charts {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
</style>
|