123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228 |
- <template>
- <div :class="className" :id="id" :style="{height:height,width:width}"></div>
- </template>
-
- <script>
- import echarts from 'echarts'
- import resize from './mixins/resize'
-
- export default {
- mixins: [resize],
- props: {
- className: {
- type: String,
- default: 'chart'
- },
- id: {
- type: String,
- default: 'chart'
- },
- width: {
- type: String,
- default: '200px'
- },
- height: {
- type: String,
- default: '200px'
- }
- },
- data() {
- return {
- chart: null
- }
- },
- mounted() {
- this.initChart()
- },
- beforeDestroy() {
- if (!this.chart) {
- return
- }
- this.chart.dispose()
- this.chart = null
- },
- methods: {
- initChart() {
- this.chart = echarts.init(document.getElementById(this.id))
-
- this.chart.setOption({
- backgroundColor: '#394056',
- title: {
- top: 20,
- text: 'Requests',
- textStyle: {
- fontWeight: 'normal',
- fontSize: 16,
- color: '#F1F1F3'
- },
- left: '1%'
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- lineStyle: {
- color: '#57617B'
- }
- }
- },
- legend: {
- top: 20,
- icon: 'rect',
- itemWidth: 14,
- itemHeight: 5,
- itemGap: 13,
- data: ['CMCC', 'CTCC', 'CUCC'],
- right: '4%',
- textStyle: {
- fontSize: 12,
- color: '#F1F1F3'
- }
- },
- grid: {
- top: 100,
- left: '3%',
- right: '4%',
- bottom: '2%',
- 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: 'CMCC',
- 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: 'CTCC',
- 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: 'CUCC',
- 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>
|