BJ_web_developers / dyitoc

Commit be79dd15ee1a1c65055231698f0897efdef95da8

Authored by liuqimichale
1 parent d87c98f9

道闸

Inline Side-by-side
Showing 3 changed files with 213 additions and 18 deletions
src/components/allPieChart.vue
  View file @be79dd1
... ... @@ -26,7 +26,7 @@ export default {
26 26 default: true
27 27 },
28 28 chartData: {
29   - type: Object,
  29 + type: Array,
30 30 required: true
31 31 }
32 32 },
... ... @@ -62,14 +62,217 @@ export default {
62 62 this.chart = null
63 63 },
64 64 methods: {
65   - setOptions({xData, yData} = {}) {
  65 + setOptions(data) {
66 66 this.chart.setOption({
67   - backgroundColor:'#ffffff',
68 67 tooltip: {
69 68 trigger: 'item',
70 69 formatter: "{b} : {c} ({d}%)"
71 70 },
72 71 series: [
  72 + {
  73 + type: 'pie',
  74 + radius: ['30%', '31%'],
  75 + center: ['50%', '50%'],
  76 + hoverAnimation:false,
  77 + tooltip: {
  78 + show:false
  79 + },
  80 + label: {
  81 + show: false
  82 + },
  83 + lableLine: {
  84 + show: false
  85 + },
  86 + data: [
  87 + {
  88 + value: 0,
  89 + },
  90 + {
  91 + value: 55,
  92 + itemStyle: {
  93 + normal: {
  94 + color: 'rgba(89,170,247,.3)'
  95 + }
  96 + }
  97 + },
  98 +
  99 + ]
  100 + },
  101 + {
  102 + type: 'pie',
  103 + radius: ['40%', '41%'],
  104 + center: ['50%', '50%'],
  105 + hoverAnimation:false,
  106 + tooltip: {
  107 + show:false
  108 + },
  109 + label: {
  110 + show: false
  111 + },
  112 + lableLine: {
  113 + show: false
  114 + },
  115 + data: [
  116 + {
  117 + value: 0,
  118 + },
  119 + {
  120 + value: 55,
  121 + itemStyle: {
  122 + normal: {
  123 + color: 'rgba(89,170,247,.3)'
  124 + }
  125 + }
  126 + },
  127 +
  128 + ]
  129 + },
  130 + {
  131 + type: 'pie',
  132 + radius: ['50%', '51%'],
  133 + center: ['50%', '50%'],
  134 + hoverAnimation:false,
  135 + tooltip: {
  136 + show:false
  137 + },
  138 + label: {
  139 + show: false
  140 + },
  141 + lableLine: {
  142 + show: false
  143 + },
  144 + data: [
  145 + {
  146 + value: 0,
  147 + },
  148 + {
  149 + value: 55,
  150 + itemStyle: {
  151 + normal: {
  152 + color: 'rgba(89,170,247,.3)'
  153 + }
  154 + }
  155 + },
  156 +
  157 + ]
  158 + },
  159 + {
  160 + type: 'pie',
  161 + radius: ['60%', '61%'],
  162 + center: ['50%', '50%'],
  163 + hoverAnimation:false,
  164 + tooltip: {
  165 + show:false
  166 + },
  167 + label: {
  168 + show: false
  169 + },
  170 + lableLine: {
  171 + show: false
  172 + },
  173 + data: [
  174 + {
  175 + value: 0,
  176 + },
  177 + {
  178 + value: 55,
  179 + itemStyle: {
  180 + normal: {
  181 + color: 'rgba(89,170,247,.3)'
  182 + }
  183 + }
  184 + },
  185 +
  186 + ]
  187 + },
  188 + {
  189 + type: 'pie',
  190 + radius: ['70%', '71%'],
  191 + center: ['50%', '50%'],
  192 + hoverAnimation:false,
  193 + tooltip: {
  194 + show:false
  195 + },
  196 + label: {
  197 + show: false
  198 + },
  199 + lableLine: {
  200 + show: false
  201 + },
  202 + data: [
  203 + {
  204 + value: 0,
  205 + },
  206 + {
  207 + value: 55,
  208 + itemStyle: {
  209 + normal: {
  210 + color: 'rgba(89,170,247,.3)'
  211 + }
  212 + }
  213 + },
  214 +
  215 + ]
  216 + },
  217 + {
  218 + type: 'pie',
  219 + radius: ['80%', '81%'],
  220 + center: ['50%', '50%'],
  221 + hoverAnimation:false,
  222 + tooltip: {
  223 + show:false
  224 + },
  225 + label: {
  226 + show: false
  227 + },
  228 + lableLine: {
  229 + show: false
  230 + },
  231 + data: [
  232 + {
  233 + value: 0,
  234 + },
  235 + {
  236 + value: 55,
  237 + itemStyle: {
  238 + normal: {
  239 + color: 'rgba(89,170,247,.3)'
  240 + }
  241 + }
  242 + },
  243 +
  244 + ]
  245 + },
  246 + {
  247 + type: 'pie',
  248 + radius: ['90%', '91%'],
  249 + center: ['50%', '50%'],
  250 + hoverAnimation:false,
  251 + tooltip: {
  252 + show:false
  253 + },
  254 + label: {
  255 + show: false
  256 + },
  257 + lableLine: {
  258 + show: false
  259 + },
  260 + data: [
  261 + {
  262 + value: 0,
  263 + },
  264 + {
  265 + value: 55,
  266 + itemStyle: {
  267 + normal: {
  268 + color: 'rgba(89,170,247,.3)'
  269 + }
  270 + }
  271 + },
  272 +
  273 + ]
  274 + },
  275 +
73 276  
74 277 {
75 278 name: '内环',
... ... @@ -106,7 +309,7 @@ export default {
106 309 {
107 310 name: '半径模式',
108 311 type: 'pie',
109   - radius: ['20%', '90%'],
  312 + radius: ['20%', '80%'],
110 313 center: ['50%', '50%'],
111 314 hoverAnimation:false,
112 315 roseType: 'radius',
... ... @@ -118,7 +321,7 @@ export default {
118 321 },
119 322 data: [
120 323 {
121   - value: 35,
  324 + value: data[0],
122 325 name: '诱导屏',
123 326 itemStyle: {
124 327 normal: {
... ... @@ -135,7 +338,7 @@ export default {
135 338 }
136 339 },
137 340 {
138   - value: 55,
  341 + value: data[1],
139 342 name: '道闸',
140 343 itemStyle: {
141 344 normal: {
... ...
src/components/halfPieChart.vue
  View file @be79dd1
... ... @@ -74,7 +74,6 @@ export default {
74 74 series: [
75 75  
76 76 {
77   - name: '半径模式',
78 77 type: 'pie',
79 78 radius: ['60%', '75%'],
80 79 center: ['50%', '50%'],
... ... @@ -88,7 +87,7 @@ export default {
88 87 data: [
89 88 {
90 89 value: 35,
91   - name: '诱导屏',
  90 + name: '空闲',
92 91 itemStyle: {
93 92 normal: {
94 93 color: {
... ... @@ -105,7 +104,7 @@ export default {
105 104 },
106 105 {
107 106 value: 55,
108   - name: '道闸',
  107 + name: '占有',
109 108 itemStyle: {
110 109 normal: {
111 110 color: {
... ...
src/views/youdaopingsection.vue
  View file @be79dd1
... ... @@ -17,7 +17,7 @@
17 17 </div>
18 18 </li>
19 19 <li>
20   - <allPieChart :chart-data="lineChartData"/>
  20 + <allPieChart :chart-data="pieChartData"/>
21 21 </li>
22 22 </ul>
23 23 </div>
... ... @@ -28,13 +28,6 @@ import titlesection from &#39;../components/titlesection&#39;
28 28 import allPieChart from '../components/allPieChart'
29 29 import {fetchList} from '../api/api'
30 30  
31   -const lineChartData = {
32   - newVisitis: {
33   - yData: [100, 120, 161],
34   - xData: ['正常', '异常', '故障']
35   - }
36   -}
37   -
38 31  
39 32 export default {
40 33 name: 'youdaopingsection',
... ... @@ -44,7 +37,7 @@ export default {
44 37 },
45 38 data() {
46 39 return {
47   - lineChartData: lineChartData.newVisitis,
  40 + pieChartData: [35, 55],
48 41 dzNum: '23454',
49 42 ydpNum: '4454'
50 43 }
... ...