修改大屏

马宇豪

2025-04-22 91f2640c8919e7cbe41c8c437e4f7fd60345e062

 src/views/hazardousChemicals/bigScreen/components/rightTop.vue

@@ -6,12 +6,33 @@
<script setup>
import * as echarts from 'echarts';
import {onMounted} from "vue";
import {ElMessage} from "element-plus";
import {getBasicCount} from "@/api/monitor/screenCharts";

onMounted(()=>{
  initChart()
  getPieData()
})

const initChart =()=>{
const getPieData = async ()=>{
  const res = await getBasicCount()
  if (res.code == 200) {
    if(res.data && Array.isArray(res.data) && res.data.length>0){
      let data = res.data.map(i=>{
        return {
          name: i.hazmatCharacter,
          value: i.count,
        }
      })
      initChart(data)
    }else{
      initChart([])
    }
  } else {
    ElMessage.warning(res.message)
  }
}

const initChart =(data)=>{
  var chartDom = document.getElementById('typePie');
  var myChart = echarts.init(chartDom);
  var option;
@@ -35,7 +56,7 @@
      {
        type: 'pie',
        radius: [20, 100],
        center: ['50%', '45%'],
        center: ['50%', '40%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 5
@@ -45,16 +66,7 @@
          textBorderWidth: 0,
          formatter: '{d}%'
        },
        data: [
          { value: 30, name: 'rose 1' },
          { value: 28, name: 'rose 2' },
          { value: 26, name: 'rose 3' },
          { value: 24, name: 'rose 4' },
          { value: 22, name: 'rose 5' },
          { value: 20, name: 'rose 6' },
          { value: 18, name: 'rose 7' },
          { value: 16, name: 'rose 8' }
        ]
        data: data
      }
    ]
  };