kuangshan-project/src/views/zaoquan/yiqing/yiqing-hesuanjiance.vue

<template>
  <div>
    <div v-if="shows">
      <van-nav-bar
        title="核酸检测统计"
        left-arrow
        left-text="返回"
        @click-left="onClickLeft"
      />
    </div>
    <div
      id="main"
      style="width: 350px; height: 320px; margin: 0 auto; border-radius: 10px"
    ></div>
    <div
      id="main2"
      style="width: 350px; height: 540px; margin: 20px auto"
      v-show="shows1 != infos1"
    ></div>
  </div>
</template>

<script>
import { getAllUrlParams } from "../../../plugins/url-encapsulation.js";
import * as echarts from "echarts";
export default {
  data() {
    return {
      shows: true,
      infos: [],
      infos1: [],
      shows1:""
    };
  },
  methods: {
    getanalysis() {
      let myChart = echarts.init(document.getElementById("main"));
      this.$http
        .post(
          "http://zaoquan.nxjiewei.com:8011/api/workbench/epidemic_situation/nucleic_acid_test_statistics"
        )
        .then((res) => {
          // 指定图表的配置项和数据
          // console.log(res);
          this.infos = res.data.data;
          // console.log(this.infos);
          var option = {
            backgroundColor: "#fff",
            borderRadius: "20px",
            title: {
              text: "核酸检测统计",
              x: "25px",
              y: "15px",
            },
            tooltip: {
              show: true,
              trigger: "item",
              // formatter: "{a} <br/>{b} : {c}",
            },
            legend: {
              //设置小块标记
              y: "bottom",
              x: "center",
            },
            calculable: true,
            series: [
              {
                name: "",
                type: "pie",
                radius: ["40%", "70%"], //饼图的半径大小
                // center: ["60%", "60%"], //饼图的位置
                label: {
                  //饼图图形上的文本颜色设置
                  normal: {
                    show: true,
                    position: "inner", //标签的位置
                    textStyle: {
                      fontWeight: 300,
                      fontSize: 16, //文字的字体大小
                    },
                    formatter: "{d}%", //设置百分比
                  },
                },
                data: [
                  {
                    value: this.infos.nucleic_acid_test,
                    name: "已检测",
                    // 配置映射图显示颜色
                    itemStyle: {
                      // 设置扇形的颜色
                      color: "#39f",
                      shadowBlur: 200,
                      shadowColor: "rgba(0, 0, 0, 0)",
                    },
                  }, //饼图图形颜色
                  {
                    value: this.infos.not_nucleic_acid_test,
                    name: "未检测",
                    itemStyle: {
                      // 设置扇形的颜色
                      color: "red",
                      shadowBlur: 200,
                      shadowColor: "rgba(0, 0, 0, 0)",
                    },
                  },
                ],
              },
            ],
          };
          myChart.setOption(option);
        });
    },

    // getanalysis1() {
    //   let myChart1 = echarts.init(document.getElementById("main2"));
    //   this.$http
    //     .post(
    //       "http://zaoquan.nxjiewei.com:8011/api/workbench/epidemic_situation/nucleic_acid_test_statistics"
    //     )
    //     .then((res) => {
    //       // console.log(res);
    //       // 指定图表的配置项和数据
    //       this.infos1 = res.data.data.not_nat_section_list;
    //       console.log(this.infos1);
    //       let numArr = [];
    //       let section_fullnameArr = [];
    //       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);
    //       }
    //       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);
    //           }
    //         }
    //       }
    //       var option1 = {
    //         backgroundColor: "#fff",
    //         borderRadius: 9,
    //         title: {
    //           text: "核酸未检测人员部门分布",
    //           // left: "left",
    //           x: "25px",
    //           y: "15px",
    //         },
    //         tooltip: {
    //           trigger: "item",
    //           formatter: "{a} <br/>{b} : {c}",
    //         },
    //         textStyle: {
    //           fontSize: 10,
    //           color: "#fff",
    //         },
    //         legend: {
    //           //设置小块标记
    //           y: "bottom",
    //           x: "center",
    //         },
    //         calculable: true,
    //         series: [
    //           {
    //             name: "",
    //             type: "pie",
    //             radius: ["50%", "80%"], //饼图的半径大小
    //             // center: ["60%", "60%"], //饼图的位置
    //             label: {
    //               //饼图图形上的文本颜色设置
    //               normal: {
    //                 show: true,
    //                 position: "inner", //标签的位置
    //                 textStyle: {
    //                   fontWeight: 300,
    //                   fontSize: 16, //文字的字体大小
    //                 },
    //                 formatter: "{d}%", //设置百分比
    //               },
    //             },
    //             data: array,
    //           },
    //         ],
    //       };
    //       myChart1.setOption(option1);
    //     });
    // },
    getanalysis1() {
      let myChart1 = echarts.init(document.getElementById("main2"));
      this.$http
        .post(
          "http://zaoquan.nxjiewei.com:8011/api/workbench/epidemic_situation/nucleic_acid_test_statistics"
        )
        .then((res) => {
          console.log(res.data.data.not_nat_section_list);
          // 指定图表的配置项和数据
          this.infos1 = res.data.data.not_nat_section_list;
          // 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++) {
            for (let j = 0; j < section_fullnameArr.length; j++) {
              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);
          // for (let i = 0; i < numArr.length; i++) {
          //   let obj = {};
          //   for (let j = 0; j < section_fullnameArr.length; j++) {
          //     for (let k = 0; k < section_id.length; k++) {
          //       if (i== j == k) {
          //         obj.name = section_fullnameArr[j];
          //         obj.value = numArr[i];
          //         obj.id = section_id[k];
          //         array.push(obj);
          //       }
          //     }
          //   }
          // }
          var option1 = {
            backgroundColor: "#fff",
            borderRadius: 9,
            title: {
              text: "未接种疫苗部门分布",
              // left: "left",
              x: "25px",
              y: "15px",
            },
            tooltip: {
              show: true,
              trigger: "item",
              // formatter: "{a} <br/>{b} : {c}",
            },
            textStyle: {
              fontSize: 10,
              color: "#fff",
            },
            legend: {
              //设置小块标记
              y: "70%",
              x: "center",
            },
            calculable: true,
            series: [
              {
                name: "",
                type: "pie",
                radius: ["50%", "80%"], //饼图的半径大小
                center: ["50%", "200px"], //饼图的位置
                label: {
                  //饼图图形上的文本颜色设置
                  normal: {
                    show: true,
                    position: "inner", //标签的位置
                    textStyle: {
                      fontWeight: 100,
                      fontSize: 14, //文字的字体大小
                      color: "#fff",
                    },
                    formatter: "{d}%", //设置百分比
                  },
                },
                data: array,
              },
            ],
          };
          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}`;
          // });
        });
    },
    onClickLeft() {
      window.history.back();
    },
  },
  mounted() {
    document.body.style.backgroundColor = "#39f"; //背景色
    this.token = getAllUrlParams(window.location.href).token;
    // console.log(this.token);
    this.getanalysis();
    this.getanalysis1();
  },
};
</script>

<style scoped>
>>> .van-nav-bar {
  background: #39f;
}
>>> .van-nav-bar__title {
  color: #fff;
}
>>> .van-nav-bar .van-icon {
  color: #fff;
}
>>> .van-nav-bar__text {
  color: #fff;
}
[class*="van-hairline"]:after {
  border: none;
}
>>>canvas{
border-radius: 20px!important;
}
</style>