|
|
@@ -1,16 +1,10 @@
|
|
|
<template>
|
|
|
<div class="_running">
|
|
|
<HeadlineTag value="运行统计"></HeadlineTag>
|
|
|
- <div class="_running_mains">
|
|
|
+ <div class="_running_mains">
|
|
|
<div class="flex_person">
|
|
|
<div ref="chartAccessLeft" style="width: 100%;height: 100%;"></div>
|
|
|
</div>
|
|
|
- <!-- <div class="flex_person">
|
|
|
- <div ref="chartAccessCenter" style="width: 100%;height: 100%;"></div>
|
|
|
- </div> -->
|
|
|
- <!-- <div class="flex_person">
|
|
|
- <div ref="chartAccessRight" style="width: 100%;height: 100%;"></div>
|
|
|
- </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -20,9 +14,9 @@ import { ref } from "vue";
|
|
|
import HeadlineTag from '@/components/HeadlineTag'
|
|
|
import * as echarts from 'echarts'
|
|
|
const runningList = ref([
|
|
|
- { name:'开启数量', state:'61', color:'#15acaa'},
|
|
|
+ { name: '开启数量', state: '61', color: '#15acaa' },
|
|
|
// { name:'关闭数量', state:'14', color:'#FFC107'},
|
|
|
- { name:'故障数量', state:'34', color:'#F44336'}
|
|
|
+ { name: '故障数量', state: '34', color: '#F44336' }
|
|
|
])
|
|
|
|
|
|
// 计算比例的函数
|
|
|
@@ -35,206 +29,228 @@ const calculateRatios = () => {
|
|
|
};
|
|
|
|
|
|
const chartAccessLeft = ref(null);
|
|
|
-const chartAccessRight = ref(null);
|
|
|
|
|
|
let chartLeft = null;
|
|
|
let chartRight = null;
|
|
|
const initAccess = () => {
|
|
|
- var data = [
|
|
|
+ let data = [
|
|
|
{
|
|
|
- value: 200,
|
|
|
- name: '业务车辆',
|
|
|
+ name: '设备总数',
|
|
|
+ value: 13211,
|
|
|
},
|
|
|
{
|
|
|
- value: 110,
|
|
|
- name: '施工车辆',
|
|
|
+ name: '开启数量',
|
|
|
+ value: 4211,
|
|
|
},
|
|
|
{
|
|
|
- value: 150,
|
|
|
- name: '参观车辆',
|
|
|
+ name: '关闭数量',
|
|
|
+ value: 8171,
|
|
|
},
|
|
|
{
|
|
|
- value: 180,
|
|
|
- name: '其他车辆',
|
|
|
+ name: '故障数量',
|
|
|
+ value: 1211,
|
|
|
},
|
|
|
];
|
|
|
- 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,
|
|
|
+ let arrName = getArrayValue(data, 'name');
|
|
|
+ let arrValue = getArrayValue(data, 'value');
|
|
|
+ let sumValue = eval(arrValue.join('+'));
|
|
|
+ let objData = array2obj(data, 'name');
|
|
|
+ let optionData = getData(data);
|
|
|
+ function getArrayValue(array, key) {
|
|
|
+ var key = key || 'value';
|
|
|
+ var res = [];
|
|
|
+ if (array) {
|
|
|
+ array.forEach(function (t) {
|
|
|
+ res.push(t[key]);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return res;
|
|
|
+ }
|
|
|
+
|
|
|
+ function array2obj(array, key) {
|
|
|
+ var resObj = {};
|
|
|
+ for (var i = 0; i < array.length; i++) {
|
|
|
+ resObj[array[i][key]] = array[i];
|
|
|
+ }
|
|
|
+ return resObj;
|
|
|
+ }
|
|
|
+
|
|
|
+ function getData(data) {
|
|
|
+ var res = {
|
|
|
+ series: [],
|
|
|
+ yAxis: [],
|
|
|
+ };
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ res.series.push({
|
|
|
+ // name: '职员1',
|
|
|
+ type: 'pie',
|
|
|
+ clockWise: false, //顺时加载
|
|
|
+ hoverAnimation: false, //鼠标移入变大
|
|
|
+ radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
|
|
|
+ center: ['30%', '55%'],
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
},
|
|
|
- },
|
|
|
- });
|
|
|
+ itemStyle: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ borderWidth: 5,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: data[i].value,
|
|
|
+ name: data[i].name,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: sumValue - data[i].value,
|
|
|
+ name: '',
|
|
|
+ itemStyle: {
|
|
|
+ color: 'rgba(0,0,0,0)',
|
|
|
+ borderWidth: 0,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ hoverAnimation: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ res.series.push({
|
|
|
+ name: '',
|
|
|
+ type: 'pie',
|
|
|
+ silent: true,
|
|
|
+ z: 1,
|
|
|
+ clockWise: false, //顺时加载
|
|
|
+ hoverAnimation: false, //鼠标移入变大
|
|
|
+ radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
|
|
|
+ center: ['30%', '55%'],
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ borderWidth: 5,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: 7.5,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#E3F0FF',
|
|
|
+ borderWidth: 0,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ hoverAnimation: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2.5,
|
|
|
+ name: '',
|
|
|
+ itemStyle: {
|
|
|
+ color: 'rgba(0,0,0,0)',
|
|
|
+ borderWidth: 0,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ hoverAnimation: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + '%');
|
|
|
+ }
|
|
|
+ return res;
|
|
|
}
|
|
|
+
|
|
|
chartLeft = echarts.init(chartAccessLeft.value);
|
|
|
let option = {
|
|
|
- title: {
|
|
|
- text: `{a|外来车辆分类统计} {b|2021-12-23}`,
|
|
|
+ // backgroundColor: '#fff',
|
|
|
+ legend: {//图例设置
|
|
|
+ show: true,
|
|
|
+ top: '35%',
|
|
|
+ left: '60%',
|
|
|
+ data: arrName,
|
|
|
+ itemWidth: 15,
|
|
|
+ itemHeight: 15,
|
|
|
+ width: 70,
|
|
|
+ padding: [0, 5],
|
|
|
+ itemGap: 20,
|
|
|
+ formatter: function (name) {
|
|
|
+ return '{title|' + name + '}-{value|' + objData[name].value + '}';
|
|
|
+ },
|
|
|
textStyle: {
|
|
|
rich: {
|
|
|
- a: {
|
|
|
- fontSize: 16,
|
|
|
- fontWeight: 600,
|
|
|
+ title: {
|
|
|
+ fontSize: 12,
|
|
|
+ lineHeight: 10,
|
|
|
+ color: '#fff',
|
|
|
},
|
|
|
- b: {
|
|
|
+ value: {
|
|
|
fontSize: 12,
|
|
|
- color: 'gray',
|
|
|
+ lineHeight: 10,
|
|
|
+ color: '#fff',
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
- 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],
|
|
|
- },
|
|
|
- };
|
|
|
- })(),
|
|
|
- },
|
|
|
+ formatter: '{a}<br>{b}:{c}({d}%)',
|
|
|
},
|
|
|
+ color: ['#409eff', '#15acaa', '#FFC107', 'rgb(244, 67, 54)'],
|
|
|
grid: {
|
|
|
- top: 'bottom',
|
|
|
- left: 10,
|
|
|
- bottom: 10,
|
|
|
- width: '80%',
|
|
|
- height: '80%',
|
|
|
+ top: '20%',
|
|
|
+ bottom: '48%',
|
|
|
+ left: '30%',
|
|
|
+ containLabel: false,
|
|
|
},
|
|
|
- series: [
|
|
|
+ yAxis: [
|
|
|
{
|
|
|
- zlevel: 1,
|
|
|
- name: '外来车辆分类统计',
|
|
|
- type: 'pie',
|
|
|
- selectedMode: 'single',
|
|
|
- radius: [120, 160],
|
|
|
- center: ['35%', '50%'],
|
|
|
- startAngle: 60,
|
|
|
- // hoverAnimation: false,
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- position: 'inside',
|
|
|
- show: true,
|
|
|
- color: '#fff',
|
|
|
- formatter: function (params) {
|
|
|
- return params.percent.toFixed() + '%';
|
|
|
- },
|
|
|
- rich: {
|
|
|
- b: {
|
|
|
- fontSize: 16,
|
|
|
- lineHeight: 30,
|
|
|
- color: '#fff',
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
+ type: 'category',
|
|
|
+ inverse: true,
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
},
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.2)',
|
|
|
- shadowBlur: 10,
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ inside: true,
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 10,
|
|
|
},
|
|
|
+ show: true,
|
|
|
},
|
|
|
- data: baseData,
|
|
|
+ data: optionData.yAxis,
|
|
|
},
|
|
|
+ ],
|
|
|
+ xAxis: [
|
|
|
{
|
|
|
- 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],
|
|
|
- },
|
|
|
- },
|
|
|
- position: 'center',
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
+ show: true,
|
|
|
},
|
|
|
],
|
|
|
+ series: optionData.series,
|
|
|
};
|
|
|
|
|
|
|
|
|
chartLeft.setOption(option)
|
|
|
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
};
|
|
|
// 生命周期
|
|
|
onMounted(() => {
|
|
|
@@ -250,15 +266,18 @@ window.addEventListener('resize', () => {
|
|
|
._running {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+
|
|
|
&_mains {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
+
|
|
|
&_left {
|
|
|
width: 150px;
|
|
|
height: 150px;
|
|
|
position: relative;
|
|
|
flex-shrink: 0;
|
|
|
- &_tuan{
|
|
|
+
|
|
|
+ &_tuan {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: url("@/assets/images/content_circle.png");
|
|
|
@@ -267,11 +286,12 @@ window.addEventListener('resize', () => {
|
|
|
background-repeat: no-repeat;
|
|
|
animation: scanning 4s linear infinite;
|
|
|
}
|
|
|
+
|
|
|
&_conter {
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
- flex-shrink: 0;
|
|
|
+ flex-shrink: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
@@ -279,27 +299,33 @@ window.addEventListener('resize', () => {
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
color: #fff;
|
|
|
+
|
|
|
&_num {
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
+
|
|
|
&_text {
|
|
|
font-size: 12px;
|
|
|
- }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
&_right {
|
|
|
- margin-left:10px;
|
|
|
- flex: 1;
|
|
|
- color: #fff;
|
|
|
- &_item{
|
|
|
+ margin-left: 10px;
|
|
|
+ flex: 1;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ &_item {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
+ align-items: center;
|
|
|
gap: 40px;
|
|
|
padding: 5px 0;
|
|
|
+
|
|
|
&_tuan {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- &_flag{
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ &_flag {
|
|
|
display: block;
|
|
|
width: 7px;
|
|
|
height: 7px;
|
|
|
@@ -307,21 +333,24 @@ window.addEventListener('resize', () => {
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
}
|
|
|
- &__txt{
|
|
|
- font-size:24px;
|
|
|
+
|
|
|
+ &__txt {
|
|
|
+ font-size: 24px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.flex_person {
|
|
|
flex: 1;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
+
|
|
|
@keyframes scanning {
|
|
|
- to {
|
|
|
- transform: rotate(1turn);
|
|
|
- }
|
|
|
- }
|
|
|
+ to {
|
|
|
+ transform: rotate(1turn);
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
YangJian0701