220 lines
6.1 KiB
Vue
220 lines
6.1 KiB
Vue
<template>
|
||
<div :class="className" :id="id" :style="{height:height,width:width}"></div>
|
||
</template>
|
||
<script>
|
||
// 引入 ECharts 主模块
|
||
const echarts = require('echarts/lib/echarts');
|
||
|
||
require('echarts/lib/chart/line');
|
||
// 引入提示框和标题组件
|
||
require('echarts/lib/component/tooltip');
|
||
require('echarts/lib/component/title');
|
||
require('echarts/lib/component/legend');
|
||
export default {
|
||
name: 'barPercent',
|
||
props: {
|
||
className: {
|
||
type: String,
|
||
default: 'chart'
|
||
},
|
||
id: {
|
||
type: String,
|
||
default: 'chart'
|
||
},
|
||
width: {
|
||
type: String,
|
||
default: '200px'
|
||
},
|
||
height: {
|
||
type: String,
|
||
default: '200px'
|
||
}
|
||
},
|
||
data() {
|
||
return {};
|
||
},
|
||
mounted() {
|
||
this.initChart();
|
||
},
|
||
methods: {
|
||
initChart() {
|
||
this.chart = echarts.init(document.getElementById(this.id));
|
||
|
||
this.chart.setOption({
|
||
backgroundColor: '#394056',
|
||
title: {
|
||
text: '请求数',
|
||
textStyle: {
|
||
fontWeight: 'normal',
|
||
fontSize: 16,
|
||
color: '#F1F1F3'
|
||
},
|
||
left: '6%'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: '#57617B'
|
||
}
|
||
}
|
||
},
|
||
legend: {
|
||
icon: 'rect',
|
||
itemWidth: 14,
|
||
itemHeight: 5,
|
||
itemGap: 13,
|
||
data: ['移动', '电信', '联通'],
|
||
right: '4%',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
color: '#F1F1F3'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#57617B'
|
||
}
|
||
},
|
||
data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
name: '单位（%）',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#57617B'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
margin: 10,
|
||
textStyle: {
|
||
fontSize: 14
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#57617B'
|
||
}
|
||
}
|
||
}],
|
||
series: [{
|
||
name: '移动',
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'circle',
|
||
symbolSize: 5,
|
||
showSymbol: false,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 1
|
||
}
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: 'rgba(137, 189, 27, 0.3)'
|
||
}, {
|
||
offset: 0.8,
|
||
color: 'rgba(137, 189, 27, 0)'
|
||
}], false),
|
||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||
shadowBlur: 10
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'rgb(137,189,27)',
|
||
borderColor: 'rgba(137,189,2,0.27)',
|
||
borderWidth: 12
|
||
|
||
}
|
||
},
|
||
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
|
||
}, {
|
||
name: '电信',
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'circle',
|
||
symbolSize: 5,
|
||
showSymbol: false,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 1
|
||
}
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: 'rgba(0, 136, 212, 0.3)'
|
||
}, {
|
||
offset: 0.8,
|
||
color: 'rgba(0, 136, 212, 0)'
|
||
}], false),
|
||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||
shadowBlur: 10
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'rgb(0,136,212)',
|
||
borderColor: 'rgba(0,136,212,0.2)',
|
||
borderWidth: 12
|
||
|
||
}
|
||
},
|
||
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
|
||
}, {
|
||
name: '联通',
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'circle',
|
||
symbolSize: 5,
|
||
showSymbol: false,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 1
|
||
}
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: 'rgba(219, 50, 51, 0.3)'
|
||
}, {
|
||
offset: 0.8,
|
||
color: 'rgba(219, 50, 51, 0)'
|
||
}], false),
|
||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||
shadowBlur: 10
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'rgb(219,50,51)',
|
||
borderColor: 'rgba(219,50,51,0.2)',
|
||
borderWidth: 12
|
||
}
|
||
},
|
||
data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
|
||
}]
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|