无人机管理后台前端(已迁走)
张含笑
2025-06-10 e4c7bca105e64c047fbcd6bbb53ff5d32b0c5fd6
src/views/wel/components/flyratio.vue
@@ -9,14 +9,7 @@
      </div>
    </div>
    <div class="nestCenter">
      <div class="chart" ref="echartsRef"  v-if="!isEmptyData"></div>
      <div v-else>
        <el-empty>
          <template #description>
            <span class="custom-text">暂无数据</span>
          </template>
        </el-empty>
      </div>
      <div class="chart" ref="echartsRef"></div>
    </div>
  </div>
</template>
@@ -42,7 +35,7 @@
});
// 空数据计算
const isEmptyData = computed(() => {
  return jcOrder.value.length === 0 ||
  return jcOrder.value.length === 0 ||
         jcOrder.value.every(item => !item.name || item.value === 0)
})
// 图表初始化
@@ -56,12 +49,10 @@
  industryJobNumPieChart(params).then(res => {
    const resList = res?.data?.data || [];
    jcOrder.value = resList;
    if (resList.length > 0) {
      nextTick(() => {
     nextTick(() => {
        initChart()
        pieInit(resList)
      })
    }
  });
};
watch(
@@ -73,7 +64,8 @@
  { immediate: true }
);
const pieInit = resList => {
if (!jcchart.value || !resList?.length) return
// if (!jcchart.value || !resList?.length) return
  const validData = resList?.filter(item => item.name).sort((a, b) => b.value - a.value); // 从大到小排序
  const colors = [
    '#F87E04', // 橙色
@@ -88,7 +80,19 @@
    yAxisData: validData.map(item => item.name),
    seriesData: validData.map(item => item.value),
  };
  const option = {
    title: {
      text: resList.length  ? '' :'暂无数据',
      left: 'center',
      top: 'center',
      textStyle: {
        color: '#999',
        fontSize: '1.6rem',
        fontWeight: 'normal'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
@@ -103,17 +107,18 @@
    xAxis: {
      type: 'value',
      splitLine: { lineStyle: { color: '#E5E5E5' } },
      axisLabel: { color: '#7C8091' },
      axisLabel: { color: '#7C8091',fontSize:'1.2rem' },
      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: 'category',
      data: optionData.yAxisData,
      axisLabel: { color: '#7C8091' },
      axisLabel: { color: '#7C8091' ,fontSize:'1.2rem'},
      axisLine: { lineStyle: { color: '#D1D1D1' } },
      axisTick: { show: false },
      // 确保排序后的数据从上到下显示(最大值在顶部)
      inverse: true,
      show:optionData.seriesData?.length  ? true : false
    },
    series: [
      {