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'
export default {
  data() {
    return {
      lastIndex: 0,
      currentIndex: 0,
      imgList: [{
        url: require('@/assets/sentimeent/1.png')
      },
      {
        url: require('@/assets/sentimeent/2.png')
      },
      {
        url: require('@/assets/sentimeent/3.png')
      },
      {
        url: require('@/assets/sentimeent/4.png')
      },
      {
        url: require('@/assets/sentimeent/5.png')
      },
      {
        url: require('@/assets/sentimeent/6.png')
      },
      {
        url: require('@/assets/sentimeent/7.png')
      },
      {
        url: require('@/assets/sentimeent/8.png')
      }
      ],
      piedata: [
        {
          name: '治安维稳',
          value: 10
        },
        {
          name: '医疗卫生',
          value: 10
        },
        {
          name: '执政形象',
          value: 20
        },
        {
          name: '市场监督',
          value: 20
        },
        {
          name: '自然灾害',
          value: 10
        },
        {
          name: '安全事故',
          value: 10
        },
        {
          name: '社会保障',
          value: 20
        },
        {
          name: '市政管理',
          value: 20
        }
      ]
    }
  },

  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.pieBox()
  },
  methods: {
    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.data.count}(${params.percent}%)`
          },
          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.data.count}}`
              },
              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>