135 lines
3.1 KiB
Vue
135 lines
3.1 KiB
Vue
<template>
|
|
<div :class="className" :id="chartId" :style="{height:height,width:width}"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from 'echarts'
|
|
require('echarts/theme/macarons') // echarts theme
|
|
|
|
export default {
|
|
props: {
|
|
chartId: {
|
|
type: String,
|
|
default: 'daily-traffic-div'
|
|
},
|
|
className: {
|
|
type: String,
|
|
default: 'chart'
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '100%'
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: '220px'
|
|
},
|
|
data: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
upFlowBytes: 0, // 上行
|
|
downFlowBytes: 0, // 下行
|
|
text: '今日流量'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chartDom: null
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initChart()
|
|
},
|
|
beforeDestroy() {
|
|
if (!this.chart) {
|
|
return
|
|
}
|
|
this.chartDom.dispose()
|
|
this.chartDom = null
|
|
},
|
|
methods: {
|
|
initChart() {
|
|
this.chartDom = document.getElementById(this.chartId)
|
|
this.myChart = echarts.init(this.chartDom)
|
|
const option = {
|
|
title: {
|
|
text: this.data.text,
|
|
subtext: '上行：' + this.data.upFlowDesc + '\n\n' + '下行：' + this.data.downFlowDesc + '\n\n' + '汇总：' + this.data.totalFlowDesc,
|
|
textStyle: {
|
|
fontSize: 18,
|
|
fontWeight: 800,
|
|
align: 'center'
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: (value) => {
|
|
return `${value.seriesName} <br/>${value.marker} : ${value.name} ${value.name === '上行' ? this.data.upFlowDesc : this.data.downFlowDesc}`
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['上行', '下行'],
|
|
orient: 'vertical',
|
|
left: 'right'
|
|
},
|
|
series: [
|
|
{
|
|
name: this.data.text,
|
|
type: 'pie',
|
|
radius: [45, 65],
|
|
center: ['60%', '60%'],
|
|
// 隐藏指示线
|
|
labelLine: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
// 隐藏圆环上文字
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
position: 'center'
|
|
}
|
|
},
|
|
data: [
|
|
{
|
|
value: this.data.upFlowBytes,
|
|
name: '上行',
|
|
lineStyle: {
|
|
normal: {
|
|
color: '#63b2ee'
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#63b2ee'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
value: this.data.downFlowBytes,
|
|
name: '下行',
|
|
lineStyle: {
|
|
normal: {
|
|
color: '#76da91'
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#76da91'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
option && this.myChart.setOption(option)
|
|
}
|
|
}
|
|
}
|
|
</script>
|