1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
| import echarts from 'echarts'
|
| function drawSafetyBar (carDataArray, shipDataArray, plateDataArray) {
| const myChart = echarts.init(document.getElementById('safetyBarIndex'))
| myChart.setOption({
| color: ['#3398DB'],
| tooltip: {
| trigger: 'axis',
| axisPointer: { // 坐标轴指示器，坐标轴触发有效
| type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
| },
| textStyle: {
| color: '#33FF90'
| },
| extraCssText: 'background-color: rgba(73,177,231, 0.1);'
| },
| legend: {
| data: ['船舶', '车辆'],
| top: '6%',
| right: '4%',
| textStyle: {
| color: '#33FFF8'
| }
| },
| grid: {
| left: '3%',
| right: '4%',
| bottom: '3%',
| containLabel: true
| },
| xAxis: [
| {
| type: 'category',
| data: plateDataArray,
| axisTick: {
| alignWithLabel: true
| },
| axisLabel: {
| color: '#33FFF8'
| },
| splitLine: {
| show: false
| }
| }
| ],
| yAxis: [
| {
| type: 'value',
| axisLabel: {
| color: '#33FFF8'
| },
| splitLine: {
| show: true,
| lineStyle: {
| color: ['#315070'],
| width: 1,
| type: 'dashed'
| }
| }
| }
| ],
| series: [
| {
| name: '船舶',
| type: 'bar',
| barWidth: '12%',
| color: 'rgb(88,228,239)',
| itemStyle: {
| normal: {
| label: {
| show: true, // 开启显示
| position: 'top', // 在上方显示
| textStyle: { // 数值样式
| color: '#ffffff',
| fontSize: 12
| }
| },
| barBorderRadius: [15, 15, 0, 0],
| color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
| { offset: 0, color: '#00ACFE' },
| { offset: 0.5, color: '#034B88' },
| { offset: 1, color: '#051A4C' }
| ])
| }
| },
| data: shipDataArray
| },
| {
| name: '车辆',
| type: 'bar',
| barWidth: '12%',
| color: 'rgb(73,117,231)',
| itemStyle: {
| normal: {
| label: {
| show: true, // 开启显示
| position: 'top', // 在上方显示
| textStyle: { // 数值样式
| color: '#ffffff',
| fontSize: 12
| }
| },
| color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
| { offset: 0, color: '#FED700' },
| { offset: 0.5, color: '#846B03' },
| { offset: 1, color: '#423105' }
| ]),
| barBorderRadius: [15, 15, 0, 0]
| }
| },
| data: carDataArray
| }
| ]
| })
| window.addEventListener('resize', () => {
| myChart.resize()
| })
| }
|
| export default {
| drawSafetyBar
| }
|
|
