|
@@ -8,13 +8,17 @@
|
|
|
@click-left="onClickLeft"
|
|
|
/>
|
|
|
</div>
|
|
|
- <div
|
|
|
- id="main"
|
|
|
- style="width: 350px; height: 300px; margin: 0 auto; border-radius: 10px"
|
|
|
- ></div>
|
|
|
+ <div class="contents">
|
|
|
+ <div
|
|
|
+ id="main"
|
|
|
+ style="width: 350px; height: 300px; margin: 0 auto; border-radius: 10px"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div
|
|
|
id="main2"
|
|
|
- style="width: 350px; height: 680px; margin: 20px auto"
|
|
|
+ style="width: 350px; height: 540px; margin: 20px auto"
|
|
|
+ v-show="shows1 != infos1"
|
|
|
></div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -28,6 +32,7 @@ export default {
|
|
|
shows: true,
|
|
|
infos: [],
|
|
|
infos1: [],
|
|
|
+ shows1: "",
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
@@ -38,13 +43,13 @@ export default {
|
|
|
"http://zaoquan.nxjiewei.com:8011/api/workbench/epidemic_situation/vaccination_statistics"
|
|
|
)
|
|
|
.then((res) => {
|
|
|
- // console.log(res);
|
|
|
+ console.log(res);
|
|
|
// 指定图表的配置项和数据
|
|
|
this.infos = res.data.data;
|
|
|
// console.log(this.infos);
|
|
|
var option = {
|
|
|
backgroundColor: "#fff",
|
|
|
- borderRadius: 9,
|
|
|
+ borderRadius: [20,20,20,20],
|
|
|
title: {
|
|
|
text: "疫苗接种统计",
|
|
|
// left: "left",
|
|
@@ -52,42 +57,72 @@ export default {
|
|
|
y: "15px",
|
|
|
},
|
|
|
tooltip: {
|
|
|
+ show: true,
|
|
|
trigger: "item",
|
|
|
- formatter: "{a} <br/>{b} : {c}",
|
|
|
- textStyle: {
|
|
|
- fontSize: 10,
|
|
|
- color:"#fff"
|
|
|
- },
|
|
|
+ // formatter: "{a} <br/>{b} : {c}",
|
|
|
+ // textStyle: {
|
|
|
+ // fontSize: 10,
|
|
|
+ // color: "#fff",
|
|
|
+ // },
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
legend: {
|
|
|
//设置小块标记
|
|
|
y: "bottom",
|
|
|
x: "center",
|
|
|
+ formatter: {},
|
|
|
},
|
|
|
calculable: true,
|
|
|
series: [
|
|
|
{
|
|
|
- name: "访问来源",
|
|
|
+ // name: "",
|
|
|
+ // type: "pie",
|
|
|
+ // radius: ["50%", "80%"], //饼图的半径大小
|
|
|
+ // // center: ["60%", "60%"], //饼图的位置
|
|
|
+ // label: {
|
|
|
+ // //饼图图形上的文本颜色设置
|
|
|
+ // normal: {
|
|
|
+ // show: true,
|
|
|
+ // position: "inner", //标签的位置
|
|
|
+ // textStyle: {
|
|
|
+ // fontWeight: 300,
|
|
|
+ // fontSize: 16, //文字的字体大小
|
|
|
+ // },
|
|
|
+ // formatter: "{d}%", //设置百分比
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ name: "",
|
|
|
type: "pie",
|
|
|
- radius: ["50%", "80%"], //饼图的半径大小
|
|
|
- // center: ["60%", "60%"], //饼图的位置
|
|
|
+ radius: ["40%", "70%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
label: {
|
|
|
- //饼图图形上的文本颜色设置
|
|
|
+ show: false,
|
|
|
+ position: "center",
|
|
|
normal: {
|
|
|
show: true,
|
|
|
position: "inner", //标签的位置
|
|
|
textStyle: {
|
|
|
- fontWeight: 300,
|
|
|
- fontSize: 16, //文字的字体大小
|
|
|
+ fontWeight: 100,
|
|
|
+ fontSize: 14, //文字的字体大小
|
|
|
+ color: "#fff",
|
|
|
},
|
|
|
formatter: "{d}%", //设置百分比
|
|
|
},
|
|
|
},
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontSize: "20",
|
|
|
+ fontWeight: "bold",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
data: [
|
|
|
{
|
|
|
- value: this.infos.vaccination,
|
|
|
- name: "已接种疫苗",
|
|
|
+ value: this.infos.vaccination_first,
|
|
|
+ name: "接种第一剂",
|
|
|
// 配置映射图显示颜色
|
|
|
itemStyle: {
|
|
|
// 设置扇形的颜色
|
|
@@ -97,8 +132,20 @@ export default {
|
|
|
},
|
|
|
}, //饼图图形颜色
|
|
|
{
|
|
|
+ value: this.infos.vaccination_second,
|
|
|
+ name: "接种第二剂",
|
|
|
+ // 配置映射图显示颜色
|
|
|
+ itemStyle: {
|
|
|
+ // 设置扇形的颜色
|
|
|
+ color: "#9ad12e",
|
|
|
+ shadowBlur: 200,
|
|
|
+ shadowColor: "rgba(0, 0, 0, 0)",
|
|
|
+ },
|
|
|
+ }, //饼图图形颜色
|
|
|
+ {
|
|
|
value: this.infos.not_vaccination,
|
|
|
name: "未接种疫苗",
|
|
|
+ Id:"2",
|
|
|
itemStyle: {
|
|
|
// 设置扇形的颜色
|
|
|
color: "red",
|
|
@@ -111,9 +158,11 @@ export default {
|
|
|
],
|
|
|
};
|
|
|
myChart.setOption(option);
|
|
|
- myChart.on("click", function () {
|
|
|
+ myChart.on("click", function (param) {
|
|
|
// console.log("111");
|
|
|
- window.location.href = "#/zaoquan/yiqing/yiqing-weijiezhong";
|
|
|
+ // console.log(param.data);
|
|
|
+ // let id=param.data.Id
|
|
|
+ window.location.href = `#/zaoquan/yiqing/yiqing-weijiezhong`;
|
|
|
});
|
|
|
});
|
|
|
},
|
|
@@ -127,25 +176,31 @@ export default {
|
|
|
// console.log(res);
|
|
|
// 指定图表的配置项和数据
|
|
|
this.infos1 = res.data.data.not_nat_section_list;
|
|
|
- console.log(this.infos1);
|
|
|
+ // console.log(this.infos1);
|
|
|
let numArr = [];
|
|
|
let section_fullnameArr = [];
|
|
|
+ let section_idArr = [];
|
|
|
for (let i in this.infos1) {
|
|
|
// console.log(this.not_nat_section_list[i].section_fullname);
|
|
|
numArr.push(this.infos1[i].num);
|
|
|
section_fullnameArr.push(this.infos1[i].section_fullname);
|
|
|
+ section_idArr.push(this.infos1[i].section_id);
|
|
|
}
|
|
|
let array = [];
|
|
|
for (let i = 0; i < numArr.length; i++) {
|
|
|
- let obj = {};
|
|
|
for (let j = 0; j < section_fullnameArr.length; j++) {
|
|
|
- if (i == j) {
|
|
|
- obj.name = section_fullnameArr[j];
|
|
|
- obj.value = numArr[i];
|
|
|
- array.push(obj);
|
|
|
+ let obj = {};
|
|
|
+ for (let k = 0; k < section_idArr.length; k++) {
|
|
|
+ if (i == j && i == k && j == k) {
|
|
|
+ obj.name = section_fullnameArr[j];
|
|
|
+ obj.value = numArr[i];
|
|
|
+ obj.Id = section_idArr[k];
|
|
|
+ array.push(obj);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ // console.log(array);
|
|
|
var option1 = {
|
|
|
backgroundColor: "#fff",
|
|
|
borderRadius: 9,
|
|
@@ -156,34 +211,35 @@ export default {
|
|
|
y: "15px",
|
|
|
},
|
|
|
tooltip: {
|
|
|
+ show: true,
|
|
|
trigger: "item",
|
|
|
- formatter: "{a} <br/>{b} : {c}",
|
|
|
-
|
|
|
+ // formatter: "{a} <br/>{b} : {c}",
|
|
|
},
|
|
|
textStyle: {
|
|
|
- fontSize: 10,
|
|
|
- color:"#fff"
|
|
|
- },
|
|
|
+ fontSize: 10,
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
legend: {
|
|
|
//设置小块标记
|
|
|
- y: "bottom",
|
|
|
+ y: "70%",
|
|
|
x: "center",
|
|
|
},
|
|
|
calculable: true,
|
|
|
series: [
|
|
|
{
|
|
|
- name: "访问来源",
|
|
|
+ name: "",
|
|
|
type: "pie",
|
|
|
radius: ["50%", "80%"], //饼图的半径大小
|
|
|
- // center: ["60%", "60%"], //饼图的位置
|
|
|
+ center: ["50%", "200px"], //饼图的位置
|
|
|
label: {
|
|
|
//饼图图形上的文本颜色设置
|
|
|
normal: {
|
|
|
show: true,
|
|
|
position: "inner", //标签的位置
|
|
|
textStyle: {
|
|
|
- fontWeight: 300,
|
|
|
- fontSize: 16, //文字的字体大小
|
|
|
+ fontWeight: 100,
|
|
|
+ fontSize: 14, //文字的字体大小
|
|
|
+ color: "#fff",
|
|
|
},
|
|
|
formatter: "{d}%", //设置百分比
|
|
|
},
|
|
@@ -193,94 +249,23 @@ export default {
|
|
|
],
|
|
|
};
|
|
|
myChart1.setOption(option1);
|
|
|
+ myChart1.on("click", function (param) {
|
|
|
+ // console.log("111");
|
|
|
+ // console.log(param.data.Id);
|
|
|
+ let its = param.data.Id;
|
|
|
+ // console.log(its);
|
|
|
+ window.location.href = `#/zaoquan/yiqing/yiqing-weijiezhong?its=${its}`;
|
|
|
+ });
|
|
|
});
|
|
|
},
|
|
|
- // getanalysis1(){
|
|
|
- // let myChart1 = echarts.init(document.getElementById("main2"));
|
|
|
- // this.$http.post(
|
|
|
- // "http://zaoquan.nxjiewei.com:8011/api/workbench/epidemic_situation/vaccination_statistics"
|
|
|
- // ).then(res=>{
|
|
|
- // console.log(res);
|
|
|
- // this.infos1 = res.data.data.not_nat_section_list;
|
|
|
- // console.log(this.infos1);
|
|
|
- // // function f(s){
|
|
|
- // // for(let i in s){
|
|
|
- // // if(typeof s[i]=="object"){
|
|
|
- // // f(s[i])
|
|
|
- // // }else{
|
|
|
- // // console.log(s[i]);
|
|
|
- // // }
|
|
|
- // // }
|
|
|
- // // }
|
|
|
- // // f(this.infos1)
|
|
|
- // let section_fullname=[];
|
|
|
- // for(let items of this.infos1){
|
|
|
- // section_fullname.push(items.section_fullname)
|
|
|
- // }
|
|
|
- // console.log(section_fullname);
|
|
|
- // var option1 = {
|
|
|
- // backgroundColor: "#fff",
|
|
|
- // title: {
|
|
|
- // text: "核酸未检测人员部门分布",
|
|
|
- // left: "left",
|
|
|
- // },
|
|
|
- // tooltip: {
|
|
|
- // trigger: "item",
|
|
|
- // formatter: "{a} <br/>{b} : {c}",
|
|
|
- // },
|
|
|
- // legend: {
|
|
|
- // //设置小块标记
|
|
|
- // y: "bottom",
|
|
|
- // x: "center",
|
|
|
- // // orient: "vertical",
|
|
|
- // // x: "left",
|
|
|
- // // top: 40,
|
|
|
- // // itemWidth: 70,
|
|
|
- // // itemHeight: 30,
|
|
|
- // // formatter: "{name}",
|
|
|
- // // textStyle: {
|
|
|
- // // color: "#FFFFFF",
|
|
|
- // // },
|
|
|
- // // data: [
|
|
|
- // // { name: "高速50KM", icon: "rect" },
|
|
|
- // // { name: "一级150KM", icon: "rect" },
|
|
|
- // // { name: "二级150KM", icon: "rect" },
|
|
|
- // // { name: "三级100KM", icon: "rect" },
|
|
|
- // // { name: "四级50KM", icon: "rect" },
|
|
|
- // // ],
|
|
|
- // },
|
|
|
- // calculable: true,
|
|
|
- // series: [
|
|
|
- // {
|
|
|
- // name: "访问来源",
|
|
|
- // type: "pie",
|
|
|
- // radius: ["50%","70%"], //饼图的半径大小
|
|
|
- // // center: ["60%", "60%"], //饼图的位置
|
|
|
- // label: {
|
|
|
- // //饼图图形上的文本颜色设置
|
|
|
- // normal: {
|
|
|
- // show: true,
|
|
|
- // position: "inner", //标签的位置
|
|
|
- // textStyle: {
|
|
|
- // fontWeight: 300,
|
|
|
- // fontSize: 16, //文字的字体大小
|
|
|
- // },
|
|
|
- // formatter: "{d}%", //设置百分比
|
|
|
- // },
|
|
|
- // },
|
|
|
- // data: this.infos1
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // };
|
|
|
- // myChart1.setOption(option1)
|
|
|
- // })
|
|
|
- // },
|
|
|
+
|
|
|
onClickLeft() {
|
|
|
window.history.back();
|
|
|
},
|
|
|
},
|
|
|
mounted() {
|
|
|
document.body.style.backgroundColor = "#39f"; //背景色
|
|
|
+ document.body.style.borderRadius="20px"
|
|
|
this.token = getAllUrlParams(window.location.href).token;
|
|
|
// console.log(this.token);
|
|
|
this.getanalysis();
|
|
@@ -311,4 +296,7 @@ element.style {
|
|
|
>>> #zr_0 {
|
|
|
border-radius: 20px;
|
|
|
}
|
|
|
+>>>canvas{
|
|
|
+border-radius: 20px!important;
|
|
|
+}
|
|
|
</style>
|