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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
| <template>
| <div style="width: 100%">
| <div id="main2" />
| <p style="text-align: center;font-size: 16px;font-weight: 600">事件等级</p>
| </div>
| </template>
| <script>
| import * as echarts from 'echarts';
| import * as dash from "@/api/dashboard/dash";
|
| export default {
| name: 'SJDJ',
| props: {
| activeId: {
| type: String,
| default: '',
| },
| },
| data() {
| return {
| myChart: null,
| options: {},
| };
| },
| mounted() {
| this.getCenterLine();
| // 监听屏幕宽度变化：当浏览器发生resize事件的时候，触发echart的resize事件，重绘canvas
| window.addEventListener('resize', () => {
| this.changeWidth();
| });
| this.getData();
| },
| methods: {
| getData(){
| //获取项目数据
| dash.getLVNum().then(res => {
| if (res) {
| this.projectInfo = res
| // 事件数量
| this.options.series[0].data = this.projectInfo
| this.myChart.setOption(this.options)
| }
| })
| },
| getCenterLine() {
| // getCenterLine({
| // id: this.activeId,
| // weekFlag: this.weekFlag,
| // monthFlag: this.monthFlag,
| // startDay: this.value2 ? this.value2[0] : null,
| // endDay: this.value2 ? this.value2[1] : null
| // }).then(res => {
| // const data = res.data
| var chartDom = document.getElementById('main2');
| this.myChart = echarts.init(chartDom);
| this.options = {
| color: [ '#1877FF','#5EDEA5','#F7BE12','#55C6E1','#ED653B'],
| tooltip: {
| trigger: 'axis',
| axisPointer: {
| type: 'shadow',
| },
| },
|
| // toolbox: {
| // show: true,
| // orient: 'vertical',
| // left: 'right',
| // top: 'center',
| // feature: {
| // mark: { show: true },
| // dataView: { show: true, readOnly: false },
| // magicType: { show: true, type: ['line', 'bar', 'stack'] },
| // restore: { show: true },
| // saveAsImage: { show: true },
| // },
| // },
|
| series: [
| {
|
| name: 'Access From',
| type: 'pie',
| radius: ['40%','65%'],
| minAngle: 2, // 最小的扇区角度（0~360），用于防止某个值过小导致扇区太小影响交互
| avoidLabelOverlap: true, // 是否启用防止标签重叠策略
| itemStyle: {
| normal: {
| label: {
| show: true,
| formatter(param) {
| // correct the percentage
| return param.name + '\n' + ' ' + param.percent.toFixed(1) + '%';
| }
| },
| labelLine: {
| show: true,
| length: 0.01
| }
| }
| },
| data: [
| { value: 100, name: '等级一' },
| { value: 100, name: '等级二' },
| { value: 100, name: '等级三' },
|
| ]
| }]
| };
| this.options && this.myChart.setOption(this.options);
| },
| changeWidth() {
| this.myChart.resize();
| },
| },
| };
| </script>
| <style lang="scss" scoped>
| #main2 {
| width: 100%;
| height: 300px;
| }
|
| .box-card {
| margin-top: 10px;
| width: 100%;
| border-radius: 10px;
| border: none;
| .card-title-right {
| display: flex;
| align-items: center;
| align-self: flex-end;
| float: right;
| }
| }
| </style>
|
|
