|
|
@@ -8,9 +8,9 @@
|
|
|
<!-- <div class="flex_person">
|
|
|
<div ref="chartAccessCenter" style="width: 100%;height: 100%;"></div>
|
|
|
</div> -->
|
|
|
- <div class="flex_person">
|
|
|
+ <!-- <div class="flex_person">
|
|
|
<div ref="chartAccessRight" style="width: 100%;height: 100%;"></div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -40,144 +40,199 @@ const chartAccessRight = ref(null);
|
|
|
let chartLeft = null;
|
|
|
let chartRight = null;
|
|
|
const initAccess = () => {
|
|
|
- const ratios = calculateRatios();
|
|
|
- ratios.forEach((item,index)=>{
|
|
|
- console.log('比列',ratios)
|
|
|
- const datas = {
|
|
|
- value: item.ratio,
|
|
|
- text: item.name
|
|
|
- }
|
|
|
- chartLeft = echarts.init(chartAccessLeft.value);
|
|
|
- chartRight = echarts.init(chartAccessRight.value);
|
|
|
- let option = {
|
|
|
- series: [
|
|
|
- /*仪表盘图，做中间刻度线*/
|
|
|
- {
|
|
|
- type: 'gauge',
|
|
|
- name: '',
|
|
|
- radius: '86%',
|
|
|
- startAngle: '0',
|
|
|
- endAngle: '-359.99',
|
|
|
- center: ['50%', '50%'],
|
|
|
- splitNumber: '80',
|
|
|
- pointer: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- title: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- detail: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- width: 20,
|
|
|
- opacity: 0
|
|
|
- }
|
|
|
+ var data = [
|
|
|
+ {
|
|
|
+ value: 200,
|
|
|
+ name: '业务车辆',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 110,
|
|
|
+ name: '施工车辆',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 150,
|
|
|
+ name: '参观车辆',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 180,
|
|
|
+ name: '其他车辆',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ let datum = data.map((v) => v.value);
|
|
|
+ let color = ['#27D099', '#B458F5', '#FCD54B', '#5684F4'];
|
|
|
+ let data1 = data[0].value + data[1].value + data[2].value + data[3].value;
|
|
|
+ let baseData = [];
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ baseData.push({
|
|
|
+ value: data[i].value,
|
|
|
+ name: data[i].name,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ borderWidth: 30,
|
|
|
+ shadowBlur: 20,
|
|
|
+ borderColor: color[i],
|
|
|
+ borderRadius: 20,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ chartLeft = echarts.init(chartAccessLeft.value);
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: `{a|外来车辆分类统计} {b|2021-12-23}`,
|
|
|
+ textStyle: {
|
|
|
+ rich: {
|
|
|
+ a: {
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: 600,
|
|
|
},
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
+ b: {
|
|
|
+ fontSize: 12,
|
|
|
+ color: 'gray',
|
|
|
},
|
|
|
- splitLine: {
|
|
|
+ },
|
|
|
+ },
|
|
|
+ top: '4%',
|
|
|
+ left: '4%',
|
|
|
+ },
|
|
|
+ color: color,
|
|
|
+ tooltip: {
|
|
|
+ show: true,
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: '{b} <br/>占比：{d}%',
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'vertical',
|
|
|
+ right: '20%',
|
|
|
+ top: '36%',
|
|
|
+ itemGap: 50,
|
|
|
+ itemWidth: 14,
|
|
|
+ formatter: function (name) {
|
|
|
+ for (var i = 0; arguments.length; i++) {
|
|
|
+ if (name == '施工车辆') {
|
|
|
+ i = 1;
|
|
|
+ } else if (name == '参观车辆') {
|
|
|
+ i = 2;
|
|
|
+ } else if (name == '其他车辆') {
|
|
|
+ i = 3;
|
|
|
+ }
|
|
|
+ return `{a|${name}} {b${i}|${datum[i]}} {c|辆}`;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ rich: (function () {
|
|
|
+ return {
|
|
|
+ b0: {
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: 'bold',
|
|
|
+ color: color[0],
|
|
|
+ },
|
|
|
+ b1: {
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: 'bold',
|
|
|
+ color: color[1],
|
|
|
+ },
|
|
|
+ b2: {
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: 'bold',
|
|
|
+ color: color[2],
|
|
|
+ },
|
|
|
+ b3: {
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: 'bold',
|
|
|
+ color: color[3],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ })(),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 'bottom',
|
|
|
+ left: 10,
|
|
|
+ bottom: 10,
|
|
|
+ width: '80%',
|
|
|
+ height: '80%',
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ zlevel: 1,
|
|
|
+ name: '外来车辆分类统计',
|
|
|
+ type: 'pie',
|
|
|
+ selectedMode: 'single',
|
|
|
+ radius: [120, 160],
|
|
|
+ center: ['35%', '50%'],
|
|
|
+ startAngle: 60,
|
|
|
+ // hoverAnimation: false,
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ position: 'inside',
|
|
|
show: true,
|
|
|
- length: 7,
|
|
|
- lineStyle: {
|
|
|
- color: {
|
|
|
- type: 'linear',
|
|
|
- colorStops: [{//内圆颜色
|
|
|
- offset: 0, color: 'rgba(21, 172, 170, 0.32)' // 0% 处的颜色
|
|
|
- }, {
|
|
|
- offset: 1, color: 'rgba(21, 172, 170, 1)' // 100% 处的颜色
|
|
|
- }],
|
|
|
+ color: '#fff',
|
|
|
+ formatter: function (params) {
|
|
|
+ return params.percent.toFixed() + '%';
|
|
|
+ },
|
|
|
+ rich: {
|
|
|
+ b: {
|
|
|
+ fontSize: 16,
|
|
|
+ lineHeight: 30,
|
|
|
+ color: '#fff',
|
|
|
},
|
|
|
- width: 2,
|
|
|
- type: 'solid',
|
|
|
},
|
|
|
},
|
|
|
- axisLabel: {
|
|
|
- show: false
|
|
|
- }
|
|
|
},
|
|
|
- /*内心原型图，展示整体数据概览*/
|
|
|
- {
|
|
|
- name: 'pie',
|
|
|
- type: 'pie',
|
|
|
- roundCap: true,
|
|
|
- clockWise: true,
|
|
|
- startAngle: 260,
|
|
|
- labelLine: {
|
|
|
- show: false
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.2)',
|
|
|
+ shadowBlur: 10,
|
|
|
},
|
|
|
- radius: ['60%', '63%'],
|
|
|
- hoverAnimation: false,
|
|
|
- center: ['50%', '50%'],
|
|
|
- data: [
|
|
|
- {
|
|
|
- value: datas.value,
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- formatter: '{d}{cell|%}\n{text| ' + datas.text + '}',
|
|
|
- // formatter: item.state+ '\n{text|' + datas.text + '}',
|
|
|
-
|
|
|
- position: 'center',
|
|
|
- show: true,
|
|
|
- textStyle: {//心内文字颜色
|
|
|
- fontSize: '20',
|
|
|
- fontWeight: 'normal',
|
|
|
- color: '#15acaa',
|
|
|
- lineHeight: 14,
|
|
|
- rich: {
|
|
|
- cell: {
|
|
|
- fontSize: '14',
|
|
|
- fontWeight: 'normal',
|
|
|
- color: '#15acaa',
|
|
|
- padding: [0, 0, 0, 5]
|
|
|
- },
|
|
|
- text: {//里面文字的颜色
|
|
|
- fontSize: 12,
|
|
|
- fontFamily: 'FZLanTingHeiS-L-GB',
|
|
|
- color: '#15acaa',
|
|
|
- padding: [5, 35, 0, 10]
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
|
|
|
- offset: 0,
|
|
|
- color: 'rgba(21, 172, 170,0.1)'
|
|
|
- }]),
|
|
|
- shadowColor: 'rgba(244, 67, 54,0.5)',
|
|
|
- shadowBlur: 1
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- value: 100 - datas.value,
|
|
|
- name: '',
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: 'RGBA(5, 44, 78, 1)', // 已完成的圆环的颜色
|
|
|
- label: {
|
|
|
- show: false
|
|
|
+ },
|
|
|
+ data: baseData,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'pie',
|
|
|
+ selectedMode: 'single',
|
|
|
+ radius: [120, 160],
|
|
|
+ center: ['35%', '50%'],
|
|
|
+ startAngle: 60,
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: data1,
|
|
|
+ name: '',
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ show: true,
|
|
|
+ formatter: '{c|{c}辆} \n {a|本日外来\n车辆总数}',
|
|
|
+ rich: {
|
|
|
+ c: {
|
|
|
+ color: '#000',
|
|
|
+ fontSize: 20,
|
|
|
+ fontWeight: 'bold',
|
|
|
+ lineHeight: 2,
|
|
|
+ align: 'center',
|
|
|
+ padding: [30, 0, 30, 0],
|
|
|
+ },
|
|
|
+ a: {
|
|
|
+ align: 'center',
|
|
|
+ color: 'rgb(98,137,169)',
|
|
|
+ fontSize: 12,
|
|
|
+ padding: [16, 0, -10, -10],
|
|
|
},
|
|
|
- labelLine: {
|
|
|
- show: false
|
|
|
- }
|
|
|
},
|
|
|
- emphasis: {
|
|
|
- color: 'RGBA(21, 172, 170, 1)' // 未完成的圆环的颜色
|
|
|
- }
|
|
|
- }
|
|
|
- }]
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- if(index==0)chartLeft.setOption(option)
|
|
|
- if(index==1)chartRight.setOption(option)
|
|
|
- })
|
|
|
+ position: 'center',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ chartLeft.setOption(option)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
|
|
|
|
|
|
};
|
YangJian0701