首页优化

linwe

2024-11-04 4ac48c0ce5b724aa9ff89bebe67dce067aa376b1

 src/views/survey/components/box/unitContent.vue

@@ -11,29 +11,75 @@
<script setup>
import publicContent from './publicContent.vue'

import { getEmergencySpaceStatistic } from '../../../../api/indParkInfo'

let $echarts = inject('echarts')
const curEcharts = ref(null)

console.log($echarts)
let myEcharts = reactive(null)


onMounted(() => {
  nextTick(() => {
    let myEcharts = $echarts.init(curEcharts.value)
    myEcharts = $echarts.init(curEcharts.value)
    getEmergencySpace()

  })
})

function getEmergencySpace() {
  getEmergencySpaceStatistic().then(res => {
    // console.log(res)
    let data = res.data.data
    let dataRsult = []
    data.forEach(item => {
      dataRsult.push({
        name: item.type,
        value: item.num
      })
    });

    myEcharts.setOption({
      xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
      legend: {
        orient: "vertical",
        left: "left",
      },
      yAxis: {},
      tooltip: {
        trigger: 'item'
      },

      series: [
        {
          type: 'bar',
          data: [10, 22, 28, 43, 49],
          barWidth: '60%'
          // name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          // avoidLabelOverlap: false,
          // padAngle: 5,
          // itemStyle: {
          //   borderRadius: 10
          // },
          // label: {
          //   show: false,
          //   position: 'left'
          // },
          // emphasis: {
          //   label: {
          //     show: true,
          //     fontSize: 40,
          //     fontWeight: 'bold'
          //   }
          // },
          // labelLine: {
          //   normal: {
          //     show: true
          //   }
          // },
          data: dataRsult
        }
      ]
    })
  })
})
}

</script>

@@ -55,6 +101,6 @@
}

.unit-content-echarts {
  height: 5rem;
  height: 200px;
}
</style>