167 lines
3.3 KiB
Vue
167 lines
3.3 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: 'AirRateCharts',
|
|
props: {
|
|
rateNum: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
color: {
|
|
type: Array,
|
|
default: () => [
|
|
'#FDBD00',
|
|
'#00D5FF',
|
|
'#1978E5'
|
|
]
|
|
}
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
watch: {
|
|
rateNum: {
|
|
deep: true,
|
|
immediate: true,
|
|
handler(value) {
|
|
if (value) {
|
|
this.$nextTick(() => {
|
|
this.init()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
|
|
methods: {
|
|
init() {
|
|
let myCharts = echarts.init(this.$refs.charts)
|
|
let barCharts = this.$refs.charts
|
|
let sexdata = [{
|
|
value: this.rateNum,
|
|
symbol: 'rect',
|
|
symbolClip: true,
|
|
symbolRepeat: true,
|
|
symbolSize: [
|
|
'40%', // 50% of the width of reference bar.
|
|
"80%" // 100% of the height of reference bar.
|
|
]
|
|
}]
|
|
let option = {
|
|
legend: {},
|
|
//在坐标系内绘制
|
|
grid: [{
|
|
left: 10,
|
|
bottom: 10,
|
|
top: 10,
|
|
right: 60
|
|
}],
|
|
//x 轴
|
|
xAxis: {
|
|
max: 100,
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
},
|
|
//y 轴
|
|
yAxis: {
|
|
data: ['a'],
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
}
|
|
},
|
|
//展示层
|
|
series: [
|
|
//目标数据
|
|
{
|
|
type: 'pictorialBar',
|
|
symbolBoundingData: 100,
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(76,184,255,1)'
|
|
}
|
|
},
|
|
z: 20,
|
|
data: sexdata
|
|
},
|
|
//背景数据
|
|
{
|
|
type: 'pictorialBar',
|
|
symbolBoundingData: 100,
|
|
z: 15,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#1B2940'
|
|
}
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'right',
|
|
distance: 16,
|
|
color: '#fff',
|
|
fontSize: 16,
|
|
formatter(params) {
|
|
return sexdata[0].value + " % "
|
|
}
|
|
},
|
|
data: [{
|
|
symbol: 'rect',
|
|
value: 100,
|
|
symbolClip: true,
|
|
symbolRepeat: true,
|
|
symbolSize: [
|
|
'40%', // 50% of the width of reference bar.
|
|
"80%" // 100% of the height of reference bar.
|
|
]
|
|
}]
|
|
}
|
|
]
|
|
};
|
|
|
|
myCharts.setOption(option)
|
|
let listener = function () {
|
|
myCharts.resize()
|
|
}
|
|
EleResize.on(barCharts, listener)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
#charts {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
</style>
|