张家训
115 lines
2.4 KiB
Vue
115 lines
2.4 KiB
Vue
<template>
|
|
<div ref="dom"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from 'echarts'
|
|
import { on, off } from '@/libs/tools'
|
|
export default {
|
|
name: 'serviceRequests',
|
|
data () {
|
|
return {
|
|
dom: null
|
|
}
|
|
},
|
|
methods: {
|
|
resize () {
|
|
this.dom.resize()
|
|
}
|
|
},
|
|
mounted () {
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
top: '3%',
|
|
left: '1.2%',
|
|
right: '1%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '运营商/网络服务',
|
|
type: 'line',
|
|
stack: '总量',
|
|
areaStyle: { normal: {
|
|
color: '#2d8cf0'
|
|
} },
|
|
data: [120, 132, 101, 134, 90, 230, 210]
|
|
},
|
|
{
|
|
name: '银行/证券',
|
|
type: 'line',
|
|
stack: '总量',
|
|
areaStyle: { normal: {
|
|
color: '#10A6FF'
|
|
} },
|
|
data: [257, 358, 278, 234, 290, 330, 310]
|
|
},
|
|
{
|
|
name: '游戏/视频',
|
|
type: 'line',
|
|
stack: '总量',
|
|
areaStyle: { normal: {
|
|
color: '#0C17A6'
|
|
} },
|
|
data: [379, 268, 354, 269, 310, 478, 358]
|
|
},
|
|
{
|
|
name: '餐饮/外卖',
|
|
type: 'line',
|
|
stack: '总量',
|
|
areaStyle: { normal: {
|
|
color: '#4608A6'
|
|
} },
|
|
data: [320, 332, 301, 334, 390, 330, 320]
|
|
},
|
|
{
|
|
name: '快递/电商',
|
|
type: 'line',
|
|
stack: '总量',
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top'
|
|
}
|
|
},
|
|
areaStyle: { normal: {
|
|
color: '#398DBF'
|
|
} },
|
|
data: [820, 645, 546, 745, 872, 624, 258]
|
|
}
|
|
]
|
|
}
|
|
this.$nextTick(() => {
|
|
this.dom = echarts.init(this.$refs.dom)
|
|
this.dom.setOption(option)
|
|
on(window, 'resize', this.resize)
|
|
})
|
|
},
|
|
beforeDestroy () {
|
|
off(window, 'resize', this.resize)
|
|
}
|
|
}
|
|
</script>
|