Skip to content

F
founder_vue
Commit b8ff9f93 by 刘玉帅
Options

xq

parent 4b212da1
Showing with 476 additions and 328 deletions
src/utils/http.js
......@@ -8,8 +8,13 @@ import qs from "qs";
axios.defaults.timeout = 0;
axios.defaults.headers = {
"X-Requested-With": "XMLHttpRequest"
"X-Requested-With": "XMLHttpRequest",
'Authorization':'Basic c2FiZXI6c2FiZXJfc2VjcmV0'
};
// axios.auth= 'Basic c2FiZXI6c2FiZXJfc2VjcmV0',
// axios.defaults.headers['Authorization'] = "Basic c2FiZXI6c2FiZXJfc2VjcmV0";
// axios.defaults.headers.common['Authorization'] = 'Basic c2FiZXI6c2FiZXJfc2VjcmV0';
axios.defaults.responseType = "json";
// axios.defaults.withCredentials = true;
......
src/views/Login/login2.vue
<!--
* @Author: your name
* @Date: 2021-09-08 10:36:43
* @LastEditTime: 2021-09-08 15:45:16
* @LastEditTime: 2021-09-14 18:56:53
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\views\Login\login2.vue
......@@ -59,6 +59,8 @@
<script>
import Vue from 'vue'
import zoom from '@/utils/autosize'
import { get, postJson, post } from "@/utils/http.js";
import axios from 'axios';
export default {
data() {
return {
......@@ -68,6 +70,7 @@ export default {
pass: require("../../assets/login/password.png"),
username: "",
password: "",
dlList:{},
};
},
methods: {
......@@ -88,14 +91,28 @@ export default {
},
denglu() {
this.self =this;
console.log('0');
var self = this;
self.info = ''
//假登录
if ((self.username == "admin" && self.password == "admin") || (self.username == "000006" && self.password == "000006")) {
console.log('信息验证成功');
self.dengLuData();
}
self.$set(self.dlList,'account',self.username)
self.$set(self.dlList,'password',self.password)
self.$set(self.dlList,'grantType','password')
self.$set(self.dlList,'tenantId','000000')
self.$set(self.dlList,'refreshToken','')
console.log(self.dlList);
postJson("/xqapi/blade-auth/token", self.dlList).then(res=>{
console.log(res);
})
// axios.post('/xqapi/blade-auth/token',self.dlList).then(res=>{
// console.log(res);
// })
// 假登录
// if ((self.username == "admin" && self.password == "123456") || (self.username == "000006" && self.password == "000006")) {
// console.log('信息验证成功');
// self.dengLuData();
// }
},
/*解析登陆数据*/
dengLuData() {
......
src/views/rwgl/rwglindex.vue
<!--
* @Author: your name
* @Date: 2021-08-28 21:28:08
* @LastEditTime: 2021-09-13 16:22:29
* @LastEditTime: 2021-09-14 15:23:30
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\views\rwgl\rwglindex.vue
-->
<template>
<div class="rwgl">
<div class="rwgl" id="rwglindex">
<el-form ref="form" :model="selectPage" label-width="80px" :inline="true">
<div class="rybdsearch">
<el-form-item label="">
......@@ -249,6 +249,7 @@ import Table from "@/components/Table.vue";
import { get, postJson, post } from "@/utils/http.js";
import axios from "axios";
import utils from "@/utils/util.js";
export default {
components: {
Table,
......@@ -324,78 +325,7 @@ export default {
width: "auto",
},
], //表头的数据
tableData: [
{
RWMC: "任务一",
RYMPZS: "2000",
YPP: "236",
time: "262",
FKZT: "222",
FKZT: "333",
XT_ZXBZ: "32",
wcjd: "50%",
},
{
RWMC: "任务二",
RYMPZS: "2000",
YPP: "236",
time: "262",
FKZT: "222",
FKZT: "333",
XT_ZXBZ: "32",
wcjd: "50%",
},
{
RWMC: "任务三",
RYMPZS: "2000",
YPP: "236",
time: "262",
FKZT: "222",
FKZT: "333",
XT_ZXBZ: "32",
wcjd: "50%",
},
{
RWMC: "任务一",
RYMPZS: "2000",
YPP: "236",
time: "262",
FKZT: "222",
FKZT: "333",
XT_ZXBZ: "32",
wcjd: "50%",
},
{
RWMC: "任务一",
RYMPZS: "2000",
YPP: "236",
time: "262",
FKZT: "222",
FKZT: "333",
XT_ZXBZ: "32",
wcjd: "50%",
},
{
RWMC: "任务一",
RYMPZS: "2000",
YPP: "236",
time: "262",
FKZT: "222",
FKZT: "333",
XT_ZXBZ: "32",
wcjd: "50%",
},
{
RWMC: "任务一",
RYMPZS: "2000",
YPP: "236",
time: "262",
FKZT: "222",
FKZT: "333",
XT_ZXBZ: "32",
wcjd: "50%",
},
], //表格的内容
tableData: [], //表格的内容
form: {
name: "",
userId: "",
......
src/views/rwgl/rymplb.vue
<!--
* @Author: your name
* @Date: 2021-08-27 15:52:57
* @LastEditTime: 2021-09-13 16:10:29
* @LastEditTime: 2021-09-14 15:10:03
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\views\rymp.vue
......@@ -50,13 +50,13 @@
<div v-if="isSearch">
<el-form-item label="年龄:" prop="age">
<el-input
v-model="form.age"
v-model="rympForm.age"
placeholder="请输入人员年龄"
></el-input>
</el-form-item>
<el-form-item label="住址:" prop="address">
<el-input
v-model="form.address"
v-model="rympForm.address"
placeholder="请输入人员姓名"
></el-input>
</el-form-item>
......@@ -88,7 +88,7 @@
element-loading-text="拼命加载中"
ref="itsmDataTable"
tooltip-effect="dark"
max-height="550"
max-height="300"
style="width: 99%; margin: 0 auto"
width="100%"
size="small"
......@@ -145,13 +145,35 @@
</Table> -->
<!-- 详情 和 退回的diolog弹框 -->
<div class="rymplbDialog">
<el-dialog title="详情信息" :visible.sync="rymplbdialogVisible" width="30%">
<el-dialog
title="详情信息"
:visible.sync="rymplbdialogVisible"
width="30%"
>
<div class="xqdiolog">
<div>姓名：<el-tag type="success">{{ xqinfo.xm }}</el-tag></div>
<div>身份证号：<el-tag type="success" v-if="xqinfo.sfzh">{{ xqinfo.sfzh }}</el-tag></div>
<div>归属地：<el-tag type="success" v-if="xqinfo.gsd">{{ xqinfo.gsd }}</el-tag></div>
<div>手机号：<el-tag type="success" v-if="xqinfo.sjh">{{ xqinfo.sjh }}</el-tag></div>
<div>反馈状态 ：<el-tag type="success" v-if="xqinfo.fkzt">{{ xqinfo.fkzt }}</el-tag></div>
<div>
姓名：<el-tag type="success">{{ xqinfo.xm }}</el-tag>
</div>
<div>
身份证号：<el-tag type="success" v-if="xqinfo.sfzh">{{
xqinfo.sfzh
}}</el-tag>
</div>
<div>
归属地：<el-tag type="success" v-if="xqinfo.gsd">{{
xqinfo.gsd
}}</el-tag>
</div>
<div>
手机号：<el-tag type="success" v-if="xqinfo.sjh">{{
xqinfo.sjh
}}</el-tag>
</div>
<div>
反馈状态 ：<el-tag type="success" v-if="xqinfo.fkzt">{{
xqinfo.fkzt
}}</el-tag>
</div>
</div>
<span slot="footer" class="dialog-footer">
......@@ -161,7 +183,12 @@
>
</span>
</el-dialog>
<el-dialog title="退回" :visible.sync="dialogFormVisible">
<!-- 退回的diolog -->
<el-dialog
title="退回"
:visible.sync="dialogFormVisible"
@closed="closed"
>
<el-form :model="thform" label-position="top">
<el-form-item
label="退回地址:"
......@@ -192,6 +219,7 @@ import Table from "@/components/Table.vue";
import { get, postJson } from "@/utils/http.js";
import utils from "@/utils/util.js";
import { mapMutations, mapState } from "vuex";
import zoom from '@/utils/autosize'
export default {
name: "rymplb",
components: {
......@@ -253,10 +281,8 @@ export default {
dataRyid: "", //人员 id
selectRythb: "", //人员退回返回的信息
showList: {
rwid: "2",
page: 1,
limit: 10,
ppzt: "0",
},
};
},
......@@ -291,6 +317,8 @@ export default {
handleSizeChange(val) {
this.curpage = val;
console.log(`每页 ${val} 条`);
this.$set(this.showList, "limit", val);
this.getList(this.showList);
},
/**
* @description: 当前页数
......@@ -300,6 +328,8 @@ export default {
handleCurrentChange(val) {
this.atPage = val;
console.log(`当前页: ${val}`);
this.$set(this.showList, "page", val);
this.getList(this.showList);
},
/**
* @description: 重置按钮
......@@ -337,12 +367,17 @@ export default {
} else if (type == "th") {
this.dialogFormVisible = true;
this.dataRyid = row.ryid;
console.log("一行的信息", row);
console.log("人员的id", this.dataRyid);
// console.log("一行的信息", row);
// console.log("人员的id", this.dataRyid);
postJson("/xqapi/rythb/selectRythb", { ryglid: this.dataRyid }).then(
(res) => {
console.log("退回的数据", res);
if (res.code == "200") {
this.selectRythb = res.data.rows;
if (res.data.rows) {
this.selectRythb = res.data.rows;
this.thform = res.data.rows;
}
console.log(res.data.rows);
}
}
);
......@@ -366,6 +401,7 @@ export default {
message: "退回成功",
type: "success",
});
this.dialogFormVisible = false;
}
});
} else {
......@@ -377,6 +413,7 @@ export default {
message: "退回成功",
type: "success",
});
this.dialogFormVisible = false;
}
});
}
......@@ -398,6 +435,15 @@ export default {
}
});
},
/**
* @description: 关闭diolog清空列表
* @param {*}
* @return {*}
*/
closed() {
console.log("00.00");
this.thform = {};
},
},
watch: {
tableData: function (val, oldVal) {
......@@ -425,6 +471,8 @@ export default {
limit: 10,
ppzt: "0",
};
this.showList = formList;
console.log(this.showList);
this.getList(formList);
} else if (this.$route.params.type == "th") {
let formList = {
......@@ -433,15 +481,17 @@ export default {
limit: 10,
thzt: "0",
};
this.showList = formList;
this.getList(formList);
} else if (this.$route.params.type == "ypp") {
var thformList = {
var formList = {
rwid: this.$route.params.id,
page: 1,
limit: 10,
ppzt: "1",
};
this.getList(thformList);
this.showList = formList;
this.getList(formList);
} else if (this.$route.params.type == "yfk") {
let formList = {
rwid: this.$route.params.id,
......@@ -449,6 +499,7 @@ export default {
limit: 10,
fkzt: "1",
};
this.showList = formList;
this.getList(formList);
} else if (this.$route.params.type == "wfk") {
let formList = {
......@@ -457,8 +508,13 @@ export default {
limit: 10,
fkzt: "0",
};
this.showList = formList;
this.getList(formList);
}
zoom("loginBox");
window.addEventListener("resize", function () {
zoom("loginBox");
});
},
};
</script>
......@@ -474,10 +530,10 @@ export default {
.col {
width: 30%;
}
.xqdiolog{
.xqdiolog {
display: flex;
flex-wrap: wrap;
div{
div {
width: 33.3%;
margin-bottom: 20px;
}
......@@ -560,7 +616,8 @@ export default {
}
}
.pagin {
// position: fixed;
position: absolute;
top: calc(100vh - 180px);
// bottom: 40px;
margin-top: 10px;
margin-bottom: 10px;
......@@ -583,9 +640,6 @@ export default {
.el-pagination__sizes {
order: 1;
}
.el-pagination .el-select .el-input {
height: 28.993px;
}
}
}
.More {
......
src/views/tjbb/tb.vue
<!--
* @Author: your name
* @Date: 2021-08-31 15:24:48
* @LastEditTime: 2021-09-13 18:41:28
* @LastEditTime: 2021-09-14 15:04:29
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\views\tjbb\tb.vue
-->
<template>
<div class="tb">
<div class="tb" id="tb">
<div class="left">
<div class="header">
<div class="title">人员摸排排名</div>
......@@ -19,8 +19,7 @@
</el-radio-group>
</div>
<!-- echarts图 -->
<div class="content" id="content">
</div>
<div class="content" id="content"></div>
</div>
<div class="right">
<div class="pie" id="rympfkl"></div>
......@@ -32,118 +31,232 @@
</template>
<script>
import * as echarts from 'echarts';
import * as echarts from "echarts";
import { get, postJson, post } from "@/utils/http.js";
import zoom from '@/utils/autosize'
export default {
data () {
data() {
return {
radio: 1,
rympfkl:[],
}
rympfkl: [],
rympPpl: [],
Gxqmprs: [],
Rymppm: [],
Rymppmname: [],
Rymppmth: [],
Rymppmyfk: [],
Rymppmwfk: [],
Rymppmxf: [],
};
},
mounted () {
this.searchrympfkl()
this.initEcharts();
mounted() {
this.searchrympfkl();
this.searchRympppl();
this.searchGxqmprs();
this.searchRymppm();
// this.initEcharts();
// this.initPieFirst(this.rympfkl)
this.initPieSecond()
this.initPieThird()
this.initPieFourth()
// this.initPieSecond();
// this.initPieThird()
this.initPieFourth();
},
methods: {
searchrympfkl(){
post("/xqapi/rymptj/selectRympfkl").then(res=>{
console.log(res);
if(res.code=='200'){
res.data.rows.map(item=>{
this.rympfkl.push({value:item.count,name:item.name})
})
this.initPieFirst(this.rympfkl)
console.log(this.rympfkl);
// res.data.rows.
}
})
/**
* @description: 人员摸排反馈率
* @param {*}
* @return {*}
*/
searchrympfkl() {
post("/xqapi/rymptj/selectRympfkl").then((res) => {
console.log(res);
if (res.code == "200") {
res.data.rows.map((item) => {
this.rympfkl.push({ value: item.count, name: item.name });
});
this.initPieFirst(this.rympfkl);
console.log(this.rympfkl);
// res.data.rows.
}
});
},
/**
* @description: 人员摸排匹配率
* @param {*}
* @return {*}
*/
searchRympppl() {
post("/xqapi/rymptj/selectRympPpl").then((res) => {
console.log(res);
if (res.code == "200") {
res.data.rows.map((item) => {
this.rympPpl.push({ value: item.count, name: item.name });
});
this.initPieThird(this.rympPpl);
console.log(this.rympPpl);
// res.data.rows.
}
});
},
/**
* @description: 各辖区摸排人数
* @param {*}
* @return {*}
*/
searchGxqmprs() {
post("/xqapi/rymptj/selectRympRstj").then((res) => {
console.log(res);
if (res.code == "200") {
res.data.rows.map((item) => {
this.Gxqmprs.push({ value: item.count, name: item.name });
});
this.initPieSecond(this.Gxqmprs);
console.log(this.Gxqmprs);
// res.data.rows.
}
});
},
/**
* @description: 人员摸排排名
* @param {*}
* @return {*}
*/
searchRymppm() {
post("/xqapi/rymptj/selectRympPmtj").then((res) => {
console.log(res);
if(res.code == '200'){
res.data.rows.reverse().map(item=>{
this.Rymppmname.push(item.name);
this.Rymppmth.push(item.th);
this.Rymppmwfk.push(item.wfk);
this.Rymppmxf.push(item.xf);
this.Rymppmyfk.push(item.yfk);
})
this.initEcharts();
console.log(this.Rymppmname);
console.log(this.Rymppmth);
console.log(this.Rymppmwfk);
console.log(this.Rymppmxf);
console.log(this.Rymppmyfk);
}
// if (res.code == "200") {
// res.data.rows.map((item) => {
// this.Rymppm.push({ value: item.count, name: item.name });
// });
// this.initEcharts(this.Rymppm);
// console.log(this.Rymppm);
// // res.data.rows.
// }
});
},
/**
* @description: 初始化柱状图
* @param {*}
* @return {*}
*/
initEcharts () {
let LeftchartDom = document.getElementById('content');
initEcharts() {
let LeftchartDom = document.getElementById("content");
let LeftmyChart = echarts.init(LeftchartDom);
let Leftoption;
Leftoption = {
tooltip: {
trigger: 'axis',
trigger: "axis",
axisPointer: {
type: 'shadow'
}
type: "shadow",
},
},
grid: {
left: '0%',
right: '4%',
bottom: '0%',
top: '2%',
containLabel: true
left: "0%",
right: "4%",
bottom: "0%",
top: "2%",
containLabel: true,
},
xAxis: {
type: 'value',
type: "value",
boundaryGap: [0, 0.01],
axisLine: {
show: false
show: false,
},
axisTick: {
show: false
show: false,
},
splitLine: {
lineStyle: {
type: 'dashed',
color: ['#eee']
}
}
type: "dashed",
color: ["#eee"],
},
},
},
yAxis: {
type: 'category',
data: ['辛口', '辛口', '辛口', '辛口', '辛口', '辛口', '李七庄街', '精武镇', '精武镇'],
type: "category",
// data: [
// "辛00口",
// "辛口",
// "辛口",
// "辛口",
// "辛口",
// "辛口",
// "李七庄街",
// "精武镇",
// "精武镇",
// ],
data:this.Rymppmname,
axisLine: {
show: false
show: false,
},
axisTick: {
show: false
}
show: false,
},
},
textStyle: {
fontSize: '14',
color: '#666666'
fontSize: "14",
color: "#666666",
},
series: [
{
name: '下发',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230, 104970, 131744, 630230],
color: '#4D97FF'
name: "下发",
type: "bar",
// data: [
// 18203, 23489, 29034, 104970, 131744, 630230, 104970, 131744,
// 630230,
// ],
data:this.Rymppmxf,
color: "#4D97FF",
},
{
name: '反馈',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807, 104970, 131744, 630230],
color: '#5AE2DE'
name: "反馈",
type: "bar",
// data: [
// 19325, 23438, 31000, 121594, 134141, 681807, 104970, 131744,
// 630230,
// ],
data:this.Rymppmyfk,
color: "#5AE2DE",
},
{
name: '未反馈',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807, 104970, 131744, 630230],
color: '#FF946A'
name: "未反馈",
type: "bar",
// data: [
// 19325, 23438, 31000, 121594, 134141, 681807, 104970, 131744,
// 630230,
// ],
data:this.Rymppmwfk,
color: "#FF946A",
},
{
name: '退回',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807, 104970, 131744, 630230],
color: '#FC6864'
}
]
name: "退回",
type: "bar",
// data: [
// 19325, 23438, 31000, 121594, 134141, 681807, 104970, 131744,
// 630230,
// ],
data:this.Rymppmth,
color: "#FC6864",
},
],
};
Leftoption && LeftmyChart.setOption(Leftoption);
......@@ -153,61 +266,61 @@ export default {
* @param {*}
* @return {*}
*/
initPieFirst (data) {
initPieFirst(data) {
console.log(data);
var firstchartDom = document.getElementById('rympfkl');
var firstchartDom = document.getElementById("rympfkl");
var firstmyChart = echarts.init(firstchartDom);
var firstoption;
let self = this;
firstoption = {
title: {
text: '人员摸排反馈率',
text: "人员摸排反馈率",
textStyle: {
color: '#333',
fontWeight: 'bolder',
fontSize: '16',
lineHeight: '48'
}
color: "#333",
fontWeight: "bolder",
fontSize: "16",
lineHeight: "48",
},
},
tooltip: {
trigger: 'item'
trigger: "item",
},
legend: {
bottom: '0%',
left: 'center',
bottom: "0%",
left: "center",
icon: "circle",
itemGap: 150, // 设置legend的间距
},
color: ['#7F86FF', '#45D7D1'],
color: ["#7F86FF", "#45D7D1"],
series: [
{
type: 'pie',
radius: ['40%', '70%'],
type: "pie",
radius: ["40%", "70%"],
center: ["55%", "55%"],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
formatter: "{d}%"
position: "center",
formatter: "{d}%",
},
emphasis: {
label: {
show: true,
fontSize: '16',
fontWeight: 'bold',
color: '#333'
}
fontSize: "16",
fontWeight: "bold",
color: "#333",
},
},
labelLine: {
show: false
show: false,
},
data:data
data: data,
// data: [
// { value: 735, name: '未反馈' },
// { value: 1048, name: '已反馈' },
// ]
}
]
},
],
};
firstoption && firstmyChart.setOption(firstoption);
......@@ -217,67 +330,81 @@ export default {
* @param {*}
* @return {*}
*/
initPieSecond () {
var secondchartDom = document.getElementById('gxqmprs');
initPieSecond(data) {
var secondchartDom = document.getElementById("gxqmprs");
var secondmyChart = echarts.init(secondchartDom);
var secondoption;
secondoption = {
title: {
text: '各辖区摸排人数',
text: "各辖区摸排人数",
textStyle: {
color: '#333',
fontWeight: 'bolder',
fontSize: '16',
lineHeight: '48'
}
color: "#333",
fontWeight: "bolder",
fontSize: "16",
lineHeight: "48",
},
},
tooltip: {
trigger: 'item',
trigger: "item",
},
legend: {
show: false,
bottom: '0%',
left: 'center',
data: ['张家窝1', '张家窝2', '张家窝3', '张家窝4', '张家窝5', '张家窝6']
bottom: "0%",
left: "center",
// data: [
// "张家窝1",
// "张家窝2",
// "张家窝3",
// "张家窝4",
// "张家窝5",
// "张家窝6",
// ],
},
color: ['#0D72FF', '#3388FF', '#4D97FF', '#66A6FF', '#80B5FF', '#99C3FF'],
color: [
"#0D72FF",
"#3388FF",
"#4D97FF",
"#66A6FF",
"#80B5FF",
"#99C3FF",
],
series: [
{
type: 'pie',
radius: ['40%', '70%'],
type: "pie",
radius: ["40%", "70%"],
center: ["55%", "55%"],
avoidLabelOverlap: false,
emphasis: {
label: {
show: true,
fontSize: '12',
fontWeight: 'bold',
color: '#666666'
}
fontSize: "12",
fontWeight: "bold",
color: "#666666",
},
},
label: {
color: '#666666'
color: "#666666",
},
labelLine: {
normal: {
length: 5,
lineStyle: {
color: '#DDEBFF'
}
}
color: "#DDEBFF",
},
},
},
data: [
{ value: 735, name: '张家窝1' },
{ value: 104, name: '张家窝2' },
{ value: 148, name: '张家窝3' },
{ value: 108, name: '张家窝4' },
{ value: 48, name: '张家窝5' },
{ value: 189, name: '张家窝6' },
]
}
]
// data: [
// { value: 735, name: "张家窝1" },
// { value: 104, name: "张家窝2" },
// { value: 148, name: "张家窝3" },
// { value: 108, name: "张家窝4" },
// { value: 48, name: "张家窝5" },
// { value: 189, name: "张家窝6" },
// ],
data:data
},
],
};
secondoption && secondmyChart.setOption(secondoption);
......@@ -287,171 +414,185 @@ export default {
* @param {*}
* @return {*}
*/
initPieThird () {
var thirdchartDom = document.getElementById('rympppl');
initPieThird(data) {
var thirdchartDom = document.getElementById("rympppl");
var thirdmyChart = echarts.init(thirdchartDom);
var thirdoption;
thirdoption = {
title: {
text: '人员摸匹配率',
text: "人员摸匹配率",
textStyle: {
color: '#333',
fontWeight: 'bolder',
fontSize: '16',
lineHeight: '48'
}
color: "#333",
fontWeight: "bolder",
fontSize: "16",
lineHeight: "48",
},
},
tooltip: {
trigger: 'item'
trigger: "item",
},
legend: {
bottom: '0%',
left: 'center',
bottom: "0%",
left: "center",
icon: "circle",
itemGap: 150, // 设置legend的间距
},
color: ['#49C7F1', '#FB9A1C'],
color: ["#49C7F1", "#FB9A1C"],
series: [
{
type: 'pie',
radius: ['40%', '70%'],
type: "pie",
radius: ["40%", "70%"],
center: ["55%", "55%"],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
formatter: "{d}%"
position: "center",
formatter: "{d}%",
},
emphasis: {
label: {
show: true,
fontSize: '16',
fontWeight: 'bold',
color: '#333'
}
fontSize: "16",
fontWeight: "bold",
color: "#333",
},
},
labelLine: {
show: false
show: false,
},
data: [
{ value: 735, name: '未匹配' },
{ value: 1048, name: '已匹配' },
]
}
]
// data: [
// { value: 735, name: '未匹配' },
// { value: 1048, name: '已匹配' },
// ]
data: data,
},
],
};
thirdoption && thirdmyChart.setOption(thirdoption);
},
/**
/**
* @description: 初始化饼状图
* @param {*}
* @return {*}
*/
initPieFourth () {
var fourthchartDom = document.getElementById('lyd');
initPieFourth() {
var fourthchartDom = document.getElementById("lyd");
var fourthmyChart = echarts.init(fourthchartDom);
var fourthoption;
fourthoption = {
title: {
text: '来源地TOP10',
text: "来源地TOP10",
textStyle: {
color: '#333',
fontWeight: 'bolder',
fontSize: '16',
lineHeight: '48'
}
color: "#333",
fontWeight: "bolder",
fontSize: "16",
lineHeight: "48",
},
},
tooltip: {
trigger: 'item',
trigger: "item",
},
legend: {
show: false,
bottom: '0%',
left: 'center',
data: ['张家窝1', '张家窝2', '张家窝3', '张家窝4', '张家窝5', '张家窝6']
bottom: "0%",
left: "center",
data: [
"张家窝1",
"张家窝2",
"张家窝3",
"张家窝4",
"张家窝5",
"张家窝6",
],
},
color: ['#0D72FF', '#3388FF', '#4D97FF', '#66A6FF', '#80B5FF', '#99C3FF'],
color: [
"#0D72FF",
"#3388FF",
"#4D97FF",
"#66A6FF",
"#80B5FF",
"#99C3FF",
],
series: [
{
type: 'pie',
radius: ['40%', '70%'],
type: "pie",
radius: ["40%", "70%"],
center: ["55%", "55%"],
avoidLabelOverlap: false,
emphasis: {
label: {
show: true,
fontSize: '12',
fontWeight: 'bold',
color: '#666666'
}
fontSize: "12",
fontWeight: "bold",
color: "#666666",
},
},
label: {
color: '#666666'
color: "#666666",
},
labelLine: {
normal: {
length: 5,
lineStyle: {
color: '#DDEBFF'
}
}
color: "#DDEBFF",
},
},
},
data: [
{ value: 735, name: '张家窝1' },
{ value: 104, name: '张家窝2' },
{ value: 148, name: '张家窝3' },
{ value: 108, name: '张家窝4' },
{ value: 48, name: '张家窝5' },
{ value: 189, name: '张家窝6' },
]
}
]
{ value: 735, name: "张家窝1" },
{ value: 104, name: "张家窝2" },
{ value: 148, name: "张家窝3" },
{ value: 108, name: "张家窝4" },
{ value: 48, name: "张家窝5" },
{ value: 189, name: "张家窝6" },
],
},
],
};
fourthoption && fourthmyChart.setOption(fourthoption);
},
},
}
};
</script>
<style lang="scss" scoped>
.tb {
display: flex;
justify-content: space-between;
box-sizing: border-box;
.left {
width: 40%;
.header {
display: flex;
align-items: center;
justify-content: space-between;
.title {
font-size: 16px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #333333;
}
}
.content {
height: 480px;
}
}
.right {
margin-left: 90px;
width: 60%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.pie {
width: 48%;
height: 240px;
margin-bottom: 25px;
border-radius: 6px;
border: 1px solid #999999;
}
}
display: flex;
justify-content: space-between;
box-sizing: border-box;
.left {
width: 40%;
.header {
display: flex;
align-items: center;
justify-content: space-between;
.title {
font-size: 16px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #333333;
}
}
.content {
height: 480px;
}
}
.right {
margin-left: 90px;
width: 60%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.pie {
width: 48%;
height: 240px;
margin-bottom: 25px;
border-radius: 6px;
border: 1px solid #999999;
}
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment