838 lines
27 KiB
Vue
838 lines
27 KiB
Vue
<template>
|
|
<div class="dashboard-editor-container">
|
|
<el-row>
|
|
<el-col :span="16">
|
|
<div style="width: 100%;height: auto;display: flex;justify-content: space-between;margin-bottom: 10px;">
|
|
<div class="group-item">
|
|
<div class="group-sub-item">
|
|
<div style="width: 25%;height: auto;display: flex;align-items: center;justify-content: center;">
|
|
<img src="../assets/index/topIcon1.png" style="width: 48px;height: 48px;" />
|
|
</div>
|
|
<div style="width: 70%;height: auto;">
|
|
<div class="textClass1">应备案人员</div>
|
|
<div class="textClass2">{{topData.registerNum}}人</div>
|
|
</div>
|
|
</div>
|
|
<div class="group-sub-item">
|
|
<div style="width: 40%;" class="text-item">
|
|
<div class="textClass1">有证</div>
|
|
<div class="textClass2">{{topData.ownNum}}人</div>
|
|
</div>
|
|
<div style="width: 45%;" class="text-item">
|
|
<div class="textClass1">已存入</div>
|
|
<div class="textClass2">{{topData.storeNum}}人</div>
|
|
</div>
|
|
</div>
|
|
<div class="group-sub-item">
|
|
<div style="width: 40%;" class="text-item">
|
|
<div class="textClass1">无证</div>
|
|
<div class="textClass2">{{topData.unOwnNum}}人</div>
|
|
</div>
|
|
<div style="width: 45%;" class="text-item">
|
|
<div class="textClass1">未存入</div>
|
|
<div class="textClass2">{{topData.unStoreNum}}人</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="group-item">
|
|
<div class="group-sub-item">
|
|
<div style="width: 25%;height: auto;display: flex;align-items: center;justify-content: center;">
|
|
<img src="../assets/index/topIcon2.png" style="width: 48px;height: 48px;" />
|
|
</div>
|
|
<div style="width: 70%;height: auto;">
|
|
<div class="textClass1">普通护照</div>
|
|
<div class="textClass2">{{topData.passPortNum}}本</div>
|
|
</div>
|
|
</div>
|
|
<div class="group-sub-item">
|
|
<div style="width: 40%;" class="text-item">
|
|
<div class="textClass1">未入库</div>
|
|
<div class="textClass2">{{topData.outPassPortNum}}件</div>
|
|
</div>
|
|
<div style="width: 45%;" class="text-item">
|
|
<div class="textClass1">已入库</div>
|
|
<div class="textClass2">{{topData.inPassPortNum}}件</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="group-item">
|
|
<div class="group-sub-item">
|
|
<div style="width: 25%;height: auto;display: flex;align-items: center;justify-content: center;">
|
|
<img src="../assets/index/topIcon3.png" style="width: 48px;height: 48px;" />
|
|
</div>
|
|
<div style="width: 70%;height: auto;">
|
|
<div class="textClass1">港澳通行证</div>
|
|
<div class="textClass2">{{topData.hmcardNum}}本</div>
|
|
</div>
|
|
</div>
|
|
<div class="group-sub-item">
|
|
<div style="width: 40%;" class="text-item">
|
|
<div class="textClass1">未入库</div>
|
|
<div class="textClass2">{{topData.outHMCardNum}}件</div>
|
|
</div>
|
|
<div style="width: 45%;" class="text-item">
|
|
<div class="textClass1">已入库</div>
|
|
<div class="textClass2">{{topData.inHMCardNum}}件</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="group-item">
|
|
<div class="group-sub-item">
|
|
<div style="width: 25%;height: auto;display: flex;align-items: center;justify-content: center;">
|
|
<img src="../assets/index/topIcon4.png" style="width: 48px;height: 48px;" />
|
|
</div>
|
|
<div style="width: 70%;height: auto;">
|
|
<div class="textClass1">台湾通行证</div>
|
|
<div class="textClass2">{{topData.taiwanNum}}本</div>
|
|
</div>
|
|
</div>
|
|
<div class="group-sub-item">
|
|
<div style="width: 40%;" class="text-item">
|
|
<div class="textClass1">未入库</div>
|
|
<div class="textClass2">{{topData.outTaiwanNum}}件</div>
|
|
</div>
|
|
<div style="width: 45%;" class="text-item">
|
|
<div class="textClass1">已入库</div>
|
|
<div class="textClass2">{{topData.inTaiwanNum}}件</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height: auto;display: flex;justify-content: space-between;">
|
|
<div style="width: 49%;background: #fff;padding: 10px;margin-bottom: 10px;border-radius: 16px;">
|
|
<div style="display: flex;justify-content: space-between;align-items: center;">
|
|
<div style="padding-left: 10px;font-weight: 600">核验任务类型占比</div>
|
|
</div>
|
|
<div id="barChartOne" style="width: 100%;height: 250px;margin-bottom: 10px;"></div>
|
|
</div>
|
|
<div style="width: 49%;background: #fff;padding: 10px;margin-bottom: 10px;border-radius: 16px;">
|
|
<div style="display: flex;justify-content: space-between;align-items: center;">
|
|
<div style="padding-left: 10px;font-weight: 600">护照类型占比</div>
|
|
</div>
|
|
<div id="barChartTwo" style="width: 100%;height: 250px;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height: auto;">
|
|
<div style="width: 100%;background: #fff;padding: 10px; margin-bottom: 10px;border-radius: 16px;">
|
|
<div style="display: flex;justify-content: space-between;align-items: center;height: 32px;">
|
|
<div style="padding-left: 10px;font-weight: 600">存取证排行</div>
|
|
</div>
|
|
<div id="lineChartThree" style="width: 100%;height: 230px;"></div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div style="width: 98%;height: auto;margin-left: 15px;">
|
|
<div style="width: 100%;background: #fff;padding: 10px;margin-bottom: 10px;border-radius: 16px;">
|
|
<div style="display: flex;justify-content: space-between;align-items: center;height: 32px;">
|
|
<div style="padding-left: 10px;font-weight: 600">证件临期统计</div>
|
|
</div>
|
|
<div id="lineChartFour" style="width: 100%;height: 180px;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 98%;height: auto;margin-left: 15px;">
|
|
<div style="width: 100%;background: #fff;padding: 10px;margin-bottom: 10px;border-radius: 16px;">
|
|
<div style="display: flex;justify-content: space-between;align-items: center;height: 32px;">
|
|
<div style="padding-left: 10px;font-weight: 600">证件过期统计</div>
|
|
</div>
|
|
<div id="lineChartFive" style="width: 100%;height: 180px;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="width: 98%;height: auto;margin-left: 15px;">
|
|
<div style="width: 100%;background: #fff;padding: 10px;margin-bottom: 10px;border-radius: 16px;">
|
|
<div style="display: flex;justify-content: space-between;align-items: center;height: 32px;">
|
|
<div style="padding-left: 10px;font-weight: 600">出国原因统计</div>
|
|
</div>
|
|
<div id="barChartSix" style="width: 100%;height: 230px;"></div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
import { getStatisticsApi,verificationTaskProportionApi, typesProportionApi, takeRankingListApi, certificateExpirationingStatisticsApi, certificateExpirationedStatisticsApi, abroadReasonsStatisticsApi } from "@/api/certificateStatistics/index";
|
|
// import { getIndexDataApi,supplierScorePageApi} from "@/api/foodManage/index";
|
|
export default {
|
|
name: 'Index',
|
|
data() {
|
|
return {
|
|
allChartData:{
|
|
typeList1:[{name:"有无证件",count:"15"},{name:"一人多证",count:"20"},{name:"出入境时间",count:"25"}],
|
|
typeList2:[{name:"普通护照",count:"15"},{name:"港澳通行证",count:"20"},{name:"台湾通行证",count:"30"}],
|
|
lineList1:[{name:"张三1",count:"15"},{name:"张三2",count:"18"},{name:"张三3",count:"23"},{name:"张三4",count:"6"},{name:"张三5",count:"7"},{name:"张三6",count:"8"},{name:"张三7",count:"3"}],
|
|
typeList3:[{name:"公事",count:"30"},{name:"私事",count:"30"}]
|
|
},
|
|
topData:{},
|
|
activeName:'1',
|
|
myCharts1:null,
|
|
myCharts2:null,
|
|
myCharts3:null,
|
|
myCharts4:null,
|
|
myCharts5:null,
|
|
myCharts6:null,
|
|
}
|
|
},
|
|
mounted(){
|
|
this.getTopData()
|
|
this.InitEChartsOne()
|
|
this.InitEChartsTwo()
|
|
this.InitEChartsThree()
|
|
this.InitEChartsFour()
|
|
this.InitEChartsFive()
|
|
this.InitEChartsSix()
|
|
window.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
|
},
|
|
methods: {
|
|
$_sidebarResizeHandler(e) {
|
|
if (e.propertyName === 'width') {
|
|
console.log(e)
|
|
setTimeout(() => {
|
|
this.myCharts1.resize();
|
|
this.myCharts2.resize();
|
|
this.myCharts3.resize();
|
|
this.myCharts4.resize();
|
|
this.myCharts5.resize();
|
|
this.myCharts6.resize();
|
|
}, 500);
|
|
}
|
|
},
|
|
handleTabClick(){
|
|
this.getTopData()
|
|
},
|
|
getTopData(){
|
|
let param = {}
|
|
getStatisticsApi(param).then((response) => {
|
|
if(response.code==200){
|
|
this.topData = response.data;
|
|
}else{
|
|
this.$modal.msgError("获取图表数据失败！");
|
|
}
|
|
});
|
|
},
|
|
InitEChartsOne() {
|
|
verificationTaskProportionApi({}).then((response) => {
|
|
var chartData=[{name:"有无证件",count:Number(response.data.isHaveNum)},{name:"一人多证",count:Number(response.data.multipleNum)},{name:"出入境时间",count:Number(response.data.exitEntryNum)}]
|
|
// var chartData=[{name:"有无证件",count:0},{name:"一人多证",count:0},{name:"出入境时间",count:0}]
|
|
console.log(chartData)
|
|
var m2R2Data = []
|
|
var sumNum = 0
|
|
chartData.forEach((item,index)=>{
|
|
let obj = {}
|
|
sumNum=sumNum+item.count
|
|
if(index==0){
|
|
obj = {
|
|
value: item.count,
|
|
legendname: item.name,
|
|
name: item.name,
|
|
itemStyle: { color: "#5470C6" },
|
|
}
|
|
}
|
|
if(index==1){
|
|
obj = {
|
|
value: item.count,
|
|
legendname: item.name,
|
|
name: item.name,
|
|
itemStyle: { color: "#91CC75" },
|
|
}
|
|
}
|
|
if(index==2){
|
|
obj = {
|
|
value: item.count,
|
|
legendname: item.name,
|
|
name: item.name,
|
|
itemStyle: { color: "#FAC858" },
|
|
}
|
|
}
|
|
m2R2Data.push(obj)
|
|
})
|
|
var option = {
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: function (parms) {
|
|
console.log(parms)
|
|
var str =
|
|
parms.seriesName +
|
|
"</br>" +
|
|
parms.marker +
|
|
"" +
|
|
parms.data.legendname +
|
|
"</br>" +
|
|
"数量：" +
|
|
parms.data.value +
|
|
"</br>" +
|
|
"占比：" +
|
|
parms.percent +
|
|
"%";
|
|
return str;
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "类型",
|
|
type: "pie",
|
|
center: ["48%", "50%"],
|
|
radius: ["40%", "78%"],
|
|
clockwise: false, //饼图的扇区是否是顺时针排布
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
normal: {
|
|
formatter: (params) => {
|
|
return '{name|' + params.data.name + '}{value|' + params.percent + '%}';
|
|
},
|
|
padding: [0, -50, 20, -50],
|
|
rich: {
|
|
name: {
|
|
fontSize: 12,
|
|
align: 'left',
|
|
padding: [0, 6, 0, 0],
|
|
color: '#64686E',
|
|
},
|
|
value: {
|
|
fontSize: 14,
|
|
color: '#2A2B2F',
|
|
align: 'left',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
length: 11,
|
|
length2: 70,
|
|
lineStyle: {
|
|
color: '#e6e6e6',
|
|
},
|
|
},
|
|
},
|
|
data: m2R2Data,
|
|
},
|
|
],
|
|
};
|
|
this.myCharts1 = echarts.init(document.querySelector('#barChartOne'));
|
|
this.myCharts1.setOption(option)
|
|
});
|
|
},
|
|
InitEChartsTwo() {
|
|
typesProportionApi({}).then((response) => {
|
|
var chartData=[{name:"普通护照",count:response.data.passNum},{name:"港澳通行证",count:response.data.hkNum},{name:"台湾通行证",count:response.data.taiWanNum}]
|
|
var m2R2Data = []
|
|
var sumNum = 0
|
|
chartData.forEach((item,index)=>{
|
|
let obj = {}
|
|
sumNum=sumNum+item.count
|
|
if(index==0){
|
|
obj = {
|
|
value: item.count,
|
|
legendname: item.name,
|
|
name: item.name,
|
|
itemStyle: { color: "#7A79FF" },
|
|
}
|
|
}
|
|
if(index==1){
|
|
obj = {
|
|
value: item.count,
|
|
legendname: item.name,
|
|
name: item.name,
|
|
itemStyle: { color: "#3148FF" },
|
|
}
|
|
}
|
|
if(index==2){
|
|
obj = {
|
|
value: item.count,
|
|
legendname: item.name,
|
|
name: item.name,
|
|
itemStyle: { color: "#23B899" },
|
|
}
|
|
}
|
|
m2R2Data.push(obj)
|
|
})
|
|
var option = {
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: function (parms) {
|
|
var str =
|
|
parms.seriesName +
|
|
"</br>" +
|
|
parms.marker +
|
|
"" +
|
|
parms.data.legendname +
|
|
"</br>" +
|
|
"数量：" +
|
|
parms.data.value +
|
|
"</br>" +
|
|
"占比：" +
|
|
parms.percent +
|
|
"%";
|
|
return str;
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "类型",
|
|
type: "pie",
|
|
center: ["48%", "50%"],
|
|
radius: ["40%", "78%"],
|
|
clockwise: false, //饼图的扇区是否是顺时针排布
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
normal: {
|
|
formatter: (params) => {
|
|
return '{name|' + params.data.name + '}{value|' + params.percent + '%}';
|
|
},
|
|
padding: [0, -50, 20, -50],
|
|
rich: {
|
|
name: {
|
|
fontSize: 12,
|
|
align: 'left',
|
|
padding: [0, 6, 0, 0],
|
|
color: '#64686E',
|
|
},
|
|
value: {
|
|
fontSize: 14,
|
|
color: '#2A2B2F',
|
|
align: 'left',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
length: 11,
|
|
length2: 70,
|
|
lineStyle: {
|
|
color: '#e6e6e6',
|
|
},
|
|
},
|
|
},
|
|
data: m2R2Data,
|
|
},
|
|
],
|
|
};
|
|
this.myCharts2 = echarts.init(document.querySelector('#barChartTwo'));
|
|
this.myCharts2.setOption(option)
|
|
});
|
|
},
|
|
InitEChartsThree() {
|
|
takeRankingListApi({}).then((response) => {
|
|
var getName = [];
|
|
var getValue = [];
|
|
var chartData=[]
|
|
chartData = response.data.slice(0, 10);
|
|
chartData.forEach((item,index)=>{
|
|
getName.push(item.userName)
|
|
getValue.push(item.takeNum)
|
|
})
|
|
var max = Math.max.apply(null, getValue);
|
|
var getMax = [];
|
|
for (var i = 0; i < getName.length; i++) {
|
|
getMax.push(max+10);
|
|
}
|
|
var option = {
|
|
backgroundColor: "#fff",
|
|
grid: {
|
|
left: "5%",
|
|
right: "5%",
|
|
bottom: "2%",
|
|
top: "2%",
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "none",
|
|
},
|
|
formatter: function (params) {
|
|
return params[0].name + " : " + params[0].value;
|
|
},
|
|
},
|
|
xAxis: {
|
|
show: false,
|
|
type: "value",
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: "category",
|
|
inverse: true,
|
|
offset: 50,
|
|
axisLabel: {
|
|
show: true,
|
|
align: "left",
|
|
textStyle: {
|
|
color: "#64686E",
|
|
},
|
|
formatter: function (value, index) {
|
|
var str = "";
|
|
value = value.length > 3 ? value.slice(0, 3) + '...' : value;
|
|
str = "{title|" + value + "}";
|
|
return str;
|
|
},
|
|
rich: {
|
|
title: {
|
|
fontSize: 14,
|
|
color: "#333333",
|
|
},
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
data: getName,
|
|
},
|
|
{
|
|
type: "category",
|
|
inverse: true,
|
|
offset: 10,
|
|
axisTick: "none",
|
|
axisLine: "none",
|
|
show: true,
|
|
axisLabel: {
|
|
interval: 0,
|
|
color: "#666",
|
|
align: "left",
|
|
margin: 10,
|
|
fontSize: 14,
|
|
formatter: function (value, index) {
|
|
return (
|
|
getValue[index]+"次"
|
|
);
|
|
},
|
|
},
|
|
data: getValue,
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "值",
|
|
type: "bar",
|
|
zlevel: 1,
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: 20,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
{
|
|
offset: 0,
|
|
color: "#0099FF",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#0099FF",
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
barWidth: 10,
|
|
data: getValue,
|
|
},
|
|
{
|
|
name: "背景",
|
|
type: "bar",
|
|
barWidth: 10,
|
|
barGap: "-100%",
|
|
data: getMax,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#F5F5F5",
|
|
barBorderRadius: 20,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
this.myCharts3 = echarts.init(document.querySelector('#lineChartThree'));
|
|
this.myCharts3.setOption(option)
|
|
// // 根据页面大小自动响应图表大小
|
|
// window.addEventListener("resize3", function () {
|
|
// myCharts3.resize();
|
|
// });
|
|
});
|
|
},
|
|
InitEChartsFour() {
|
|
certificateExpirationingStatisticsApi({}).then((response) => {
|
|
let chartData=response.data;
|
|
let xDate = []
|
|
let salesData = []
|
|
chartData.forEach((item,index)=>{
|
|
xDate.unshift(item.expirationName)
|
|
salesData.unshift(item.expirationNum)
|
|
})
|
|
var option = {
|
|
color:["#FAC858"],
|
|
grid: {
|
|
left: '3%',
|
|
right: '10%',
|
|
bottom: '1%',
|
|
top: '1%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
boundaryGap: [0, 0.01],
|
|
minInterval: 1,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#748AA1"
|
|
}
|
|
},
|
|
axisTick: {
|
|
lineStyle: {
|
|
color: "#748AA1"
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: "#748AA1"
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: xDate,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#748AA1"
|
|
}
|
|
},
|
|
axisTick: {
|
|
lineStyle: {
|
|
color: "#748AA1"
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: "#748AA1"
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
data: salesData
|
|
}
|
|
]
|
|
};
|
|
this.myCharts4 = echarts.init(document.querySelector('#lineChartFour'));
|
|
this.myCharts4.setOption(option)
|
|
});
|
|
},
|
|
InitEChartsFive() {
|
|
certificateExpirationedStatisticsApi({}).then((response) => {
|
|
let chartData=response.data;
|
|
let xDate = []
|
|
let salesData = []
|
|
chartData.forEach((item,index)=>{
|
|
xDate.unshift(item.expirationName)
|
|
salesData.unshift(item.expirationNum)
|
|
})
|
|
var option = {
|
|
color:["#FF7676"],
|
|
grid: {
|
|
left: '3%',
|
|
right: '10%',
|
|
bottom: '1%',
|
|
top: '1%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
boundaryGap: [0, 0.01],
|
|
minInterval: 1,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#748AA1"
|
|
}
|
|
},
|
|
axisTick: {
|
|
lineStyle: {
|
|
color: "#748AA1"
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: "#748AA1"
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: xDate,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#748AA1"
|
|
}
|
|
},
|
|
axisTick: {
|
|
lineStyle: {
|
|
color: "#748AA1"
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: "#748AA1"
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
data: salesData
|
|
}
|
|
]
|
|
};
|
|
this.myCharts5 = echarts.init(document.querySelector('#lineChartFive'));
|
|
this.myCharts5.setOption(option)
|
|
// // 根据页面大小自动响应图表大小
|
|
// window.addEventListener("resize3", function () {
|
|
// myCharts3.resize();
|
|
// });
|
|
});
|
|
},
|
|
InitEChartsSix() {
|
|
abroadReasonsStatisticsApi({}).then((response) => {
|
|
var chartData=response.data;
|
|
var m2R2Data = []
|
|
var sumNum = 0
|
|
chartData.forEach((item,index)=>{
|
|
let obj = {}
|
|
sumNum=sumNum+item.reasonNum
|
|
if(index==0){
|
|
obj = {
|
|
value: item.reasonNum,
|
|
legendname: item.reasonName,
|
|
name: item.reasonName,
|
|
itemStyle: { color: "#5470C6" },
|
|
}
|
|
}
|
|
if(index==1){
|
|
obj = {
|
|
value: item.reasonNum,
|
|
legendname: item.reasonName,
|
|
name: item.reasonName,
|
|
itemStyle: { color: "#91CC75" },
|
|
}
|
|
}
|
|
m2R2Data.push(obj)
|
|
})
|
|
var option = {
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: function (parms) {
|
|
var str =
|
|
parms.seriesName +
|
|
"</br>" +
|
|
parms.marker +
|
|
"" +
|
|
parms.data.legendname +
|
|
"</br>" +
|
|
"数量：" +
|
|
parms.data.value +
|
|
"</br>" +
|
|
"占比：" +
|
|
parms.percent +
|
|
"%";
|
|
return str;
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "类型",
|
|
type: "pie",
|
|
center: ["48%", "50%"],
|
|
radius: ["47%", "75%"],
|
|
clockwise: false, //饼图的扇区是否是顺时针排布
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
normal: {
|
|
formatter: (params) => {
|
|
return '{name|' + params.data.name + '}{value|' + params.percent + '%}';
|
|
},
|
|
padding: [0, -50, 20, -50],
|
|
rich: {
|
|
name: {
|
|
fontSize: 12,
|
|
align: 'left',
|
|
padding: [0, 6, 0, 0],
|
|
color: '#64686E',
|
|
},
|
|
value: {
|
|
fontSize: 14,
|
|
color: '#2A2B2F',
|
|
align: 'left',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
length: 11,
|
|
length2: 70,
|
|
lineStyle: {
|
|
color: '#e6e6e6',
|
|
},
|
|
},
|
|
},
|
|
data: m2R2Data,
|
|
},
|
|
],
|
|
};
|
|
this.myCharts6 = echarts.init(document.querySelector('#barChartSix'));
|
|
this.myCharts6.setOption(option)
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep .el-tabs__header{
|
|
margin: 0;
|
|
}
|
|
|
|
.dashboard-editor-container {
|
|
padding: 15px;
|
|
padding-bottom: 5px;
|
|
background-color: rgb(240, 242, 245);
|
|
position: relative;
|
|
|
|
.chart-wrapper {
|
|
background: #fff;
|
|
padding: 16px 16px 0;
|
|
margin-bottom: 32px;
|
|
}
|
|
}
|
|
@media (max-width:1024px) {
|
|
.chart-wrapper {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
|
|
.group-item{
|
|
width: 24%;
|
|
height: auto;
|
|
background: #FFF;
|
|
border-radius: 16px;
|
|
padding: 15px;
|
|
}
|
|
.group-sub-item{
|
|
width: 100%;
|
|
height: auto;
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
|
|
|
|
.text-item{
|
|
height: auto;display: flex;align-items: center;justify-content: space-between;
|
|
}
|
|
.textClass1{
|
|
font-size: 16px;color: #64686E;
|
|
}
|
|
.textClass2{
|
|
font-size: 18px;color: #2A2B2F;
|
|
}
|
|
</style>
|