<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
import { debounce } from '@/utils'
export default {
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '100%'
},
autoResize: {
type: Boolean,
default: true
},
data: {
type: Array,
default: () => {
return []
}
}
},
data() {
return {
chart: null,
sidebarElm: null,
charData: [],
timer: null
}
},
computed: {
xArr() {
const arr = []
this.data.forEach(item => {
arr.push(item.time)
})
return arr
},
yArr() {
const arr = []
this.data.forEach(item => {
arr.push(item.retailerNum)
})
return arr
}
},
watch: {
data: {
handler(val, oldVal) {
this.initChart()
}
}
},
mounted() {
this.initChart()
if (this.autoResize) {
this.__resizeHandler = debounce(() => {
if (this.chart) {
this.chart.resize()
}
}, 10)
window.addEventListener('resize', this.__resizeHandler)
}
this.sidebarElm = document.getElementsByClassName('sidebar-container')[0]
this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
},
beforeDestroy() {
clearInterval(this.timer)
if (!this.chart) {
return
}
window.removeEventListener('resize', this.__resizeHandler)
this.chart.dispose()
this.chart = null
},
methods: {
getData() {
this.initChart()
},
sidebarResizeHandler(e) {
if (e.propertyName === 'width') {
this.__resizeHandler()
}
},
initChart() {
this.chart = echarts.init(this.$el)
this.chart.setOption({
dataZoom: {
type: 'inside',
xAxisIndex: [0],
start: 100 - 650 / (this.xArr.length),
end: 100
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
type: 'dashed',
color: '#bababa'
}
}
},
title: {
text: '当前活跃人数',
left: '1%',
top: '4%',
textStyle: {
color: '#333',
fontSize: 16,
textShadow: '0 0 1px #333'
}
},
grid: {
top: '30%',
left: '3%',
right: 50,
bottom: '5%',
containLabel: true
},
yAxis: [{
name: '人数',
nameTextStyle: {
color: '#333',
fontSize: '14'
},
type: 'value',
min: 0,
max: function(value) {
return value.max + 1
},
axisLine: {
show: true,
lineStyle: {
color: '#c8c8c8'
}
},
axisTick: {
show: true,
lineStyle: {
color: '#c8c8c8'
}
},
splitLine: {
show: false
},
axisLabel: {
color: '#333'
}
}
],
xAxis: [{
type: 'category',
boundaryGap: false,
data: this.xArr,
axisLine: {
show: true,
lineStyle: {
color: '#e9e9e9'
}
},
axisTick: {
show: true,
lineStyle: {
color: '#e9e9e9'
}
},
splitLine: {
show: false,
lineStyle: {
color: '#536284'
}
},
axisLabel: {
color: '#333',
showMaxLabel: true,
showMinLabel: true,
min: 1
}
}],
series: [{
name: '在线人数',
barWidth: '30',
data: this.yArr,
type: 'line',
smooth: true,
symbol: 'none',
label: {
normal: {
show: false,
position: 'top'
}
},
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
],
symbolOffset: [0, -10]
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#0033BE'
}, {
offset: 1,
color: '#D583DF'
}])
},
itemStyle: {
normal: {
color: '#365BC2',
lineStyle: {
width: 1
}
}
},
animationEasing: 'cubicInOut',
animationDuration: 1500
}
]
})
}
}
}
</script>
export function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result
const later = function() {
const last = +new Date() - timestamp
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last)
} else {
timeout = null
if (!immediate) {
result = func.apply(context, args)
if (!timeout) context = args = null
}
}
}
return function(...args) {
context = this
timestamp = +new Date()
const callNow = immediate && !timeout
if (!timeout) timeout = setTimeout(later, wait)
if (callNow) {
result = func.apply(context, args)
context = args = null
}
return result
}
}