taicangZongzhi/src/views/privateOrder/sentiment/components/sentimentPie.vue

<!--
 * @Author: your name
 * @Date: 2021-12-20 10:02:55
 * @LastEditTime: 2022-03-22 15:39:10
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \tcingiocpro\src\views\privateOrder\sentiment\components\sentimentPie.vue
-->
<template>
  <div>
    <div id="info">
      <div class="countpie">
        <div id="box" />
      </div>
      <div class="moduleCount">
        <!-- <img src="@/assets/sentimeent/1.png" alt="module1" />
        <img src="@/assets/sentimeent/2.png" alt="module1" />
        <img src="@/assets/sentimeent/3.png" alt="module1" />
        <img src="@/assets/sentimeent/4.png" alt="module1" />
        <img src="@/assets/sentimeent/5.png" alt="module1" />
        <img src="@/assets/sentimeent/6.png" alt="module1" />
        <img src="@/assets/sentimeent/7.png" alt="module1" /> -->
        <div v-for="(item, idx) in piedata" :key="idx" class="pieLabel">
          <div>{{ item.name }}</div>
          <div>{{ item.value }}%</div>
          <img :src="imgList[idx].url" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { tagsList } from "@/api/common";
import { echartsJump } from "../../../../../public/static/echartsJump";
import { yuqingTypes } from "@/api/publicOpinion";
export default {
  data() {
    return {
      lastIndex: 0,
      currentIndex: 0,
      imgList: [
        {
          url: require("@/assets/sentimeent/1.png"),
          type: 9,
        },
        {
          url: require("@/assets/sentimeent/2.png"),
          type: 10,
        },
        {
          url: require("@/assets/sentimeent/3.png"),
          type: 11,
        },
        {
          url: require("@/assets/sentimeent/4.png"),
          type: 12,
        },
        {
          url: require("@/assets/sentimeent/5.png"),
          type: 13,
        },
        {
          url: require("@/assets/sentimeent/6.png"),
          type: 14,
        },
        {
          url: require("@/assets/sentimeent/7.png"),
          type: 15,
        },
        {
          url: require("@/assets/sentimeent/8.png"),
          type: 16,
        },
      ],
      piedata: [
        {
          name: "治安维护",
          value: 0,
        },
        {
          name: "医疗卫生",
          value: 0,
        },
        {
          name: "执政形象",
          value: 0,
        },
        {
          name: "市场监督",
          value: 0,
        },
        {
          name: "自然灾害",
          value: 0,
        },
        {
          name: "安全事故",
          value: 0,
        },
        {
          name: "社会保障",
          value: 0,
        },
        {
          name: "市政管理",
          value: 0,
        },
      ],
    };
  },
  mounted() {
    // tagsList().then(res => {
    //   this.piedata = []
    //   res['T_TAGS[]'].forEach(tag => {
    //     this.piedata.push({ name: tag.tag, value: tag.rate, count: tag.count })
    //   })
    //   this.pieBox()
    // })
    this.getData();
  },
  methods: {
    filterUrl(e) {
      const result = this.imgList.filter((item) => item.type == e);
      console.log(result[0]);
      return result[0].url;
    },
    getData() {
      yuqingTypes({ type: "2" }).then((res) => {
        res.data.forEach((value, index) => {
          this.imgList.forEach((value1, index1) => {
            if (value.type == value1.type) {
              this.piedata[index1].value = value.pt;
            }
          });
        });
        this.pieBox();
      });
    },
    pieBox() {
      const myChart = this.$echarts.init(document.getElementById("box"));
      const optionFirst = {
        color: [
          "#316fdc",
          "#ffffff",
          "#96ff00",
          "#ff9314",
          "#08ff95",
          "#f8d748",
          "#4a9ff8",
          "#7efbe6",
        ],
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            return `${params.name}:${params.value}%`;
          },
          textStyle: {
            fontSize: 26,
            fontWight: "bold",
          },
        },
        emphasis: {
          show: true,
          formatter: "{fz41|{a}\n{az24|{b}个}",
          textStyle: {
            rich: {
              fz41: {
                fontSize: 41,
                padding: [0, 5, 0, 0],
              },
              fz24: {
                fontSize: 26,
              },
            },
          },
        },
        series: [
          {
            name: "数量",
            type: "pie",
            radius: ["60%", "80%"],
            avoidLabelOverlap: false,
            center: ["50%", "50%"],
            label: {
              show: false,
              position: "center",
              formatter: function (params) {
                return `{a| ${params.name}} \n {b|${params.value}}%`;
              },
              rich: {
                a: {
                  fontFamily: "SourceHanSansCN-Regular",
                  color: "#06e1ff",
                  fontSize: 28,
                },
                b: {
                  fontFamily: "DIN-Medium",
                  color: "#ffffff",
                  fontSize: 32,
                  lineHeight: 50,
                },
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "28",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.piedata,
          },
        ],
      };
      myChart.setOption(optionFirst, true);
      echartsJump(myChart, optionFirst);
    },
  },
};
</script>

<style lang='scss' scoped>
#info {
  position: relative;
}
#box {
  width: 343px;
  height: 343px;
  margin: 82px 0 0 5px;
  background: url("~@/assets/sentimeent/bg-饼图.png") no-repeat center;
}
.moduleCount {
  width: 329px;
  height: 291px;
  float: left;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  margin-left: 396px;
  margin-top: -36px;
  // img:nth-child(2n-1) {
  //   margin-top: 35px;
  //   margin-left: 15px;
  // }
  // img:nth-child(2n) {
  //   margin-top: 35px;
  //   margin-left: 49px;
  // }
}

.pieLabel {
  width: 158px;
  height: 60px;
  display: flex;
  position: relative;
  justify-content: space-between;
  top: -319px;
  left: 8px;
  padding-bottom: 88px;
  div:nth-child(1) {
    position: absolute;
    top: -10px;
    left: 38px;
    font-family: SourceHanSansCN-Regular;
    font-size: 30px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #ffffff;
  }
  div:nth-child(2) {
    position: absolute;
    top: 25px;
    left: 40px;
    font-family: DIN-Medium;
    font-size: 28px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #ffffff;
  }
  img {
    width: 112px;
    height: 55px;
    margin-top: 1px;
    margin-left: 13px;
  }
}
</style>