feat:图表优化

张含笑

2025-07-28 51059678465df177a24052557a599836d7c83fe5

feat:图表优化

 src/views/wel/components/calendarBox.vue

@@ -331,11 +331,9 @@
      font-size: 14px;
      color: #363636;
    }
    // .el-calendar-table .el-calendar-day {
    //   height: pxToVh(88) !important;
    // }
   
 &.five-rows .el-calendar-table .el-calendar-day {
    height: pxToVh(88) !important;
    height: pxToVh(92) !important;
  }
  
  &.six-rows .el-calendar-table .el-calendar-day {

 src/views/wel/components/flightStatistics.vue

@@ -59,14 +59,14 @@
});
const chartRef = ref(null);
let { chart: lineChart } = useEchartsResize(chartRef);
const keyMapping = {
  飞行时长: 'total_flight_time',
  飞行里程: 'total_flight_distance',
  //   任务成果: 'event_num',
};
// const keyMapping = {
//   '飞行时长': 'total_flight_time',
//   '飞行里程': 'total_flight_distance',
//   //   任务成果: 'event_num',
// };
const unitMap = {
  飞行时长: '小时',
  飞行里程: '公里',
  '飞行时长': '小时',
  '飞行里程': '公里',

};
const flyTypeList = ref([
@@ -145,23 +145,25 @@
  });
  var option = {
    tooltip: {
      trigger: 'item',
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        type: 'shadow'
      },
      // position: 'top'

    },
    grid: {
      left: '2%',
      right: '4%',
      bottom: '14%',
      top: '16%',
      top: '9%', 
      containLabel: true,
    },
    legend: {
      data: ['飞行时长', '飞行里程'],
      left: 'center',
      top: '5%',
      color: '#383838', // 直接配置颜色
      // top: '5%',
      color: '#383838',
      itemWidth: 15,
      itemHeight: 10,
      itemGap: 25,
@@ -187,6 +189,8 @@
    nameTextStyle: {
      color: '#383838',
      fontSize: '1.2rem',
      // padding: [0, 0, 14, 0]

    },
    axisLine: {
      show: false,
@@ -213,6 +217,7 @@
        nameTextStyle: {
          color: '#383838',
          fontSize: '1.2rem',
          // padding: [0, 0, 14, 0]
        },
     
    
@@ -267,8 +272,7 @@
            type: 'bar',
             barWidth: '8px',
            itemStyle: {
                // shadowOffsetX: 200,
                // shadowOffsetY: 200,

                    "normal": {
                        "color": {
                            "x": 0,
@@ -288,12 +292,13 @@
                    }
                },
           data: flight_time,
        }, 
        
        },

        //柱顶圆片
        {
           name: '飞行时长',
           name: '',
            type: "pictorialBar",
          tooltip: { show: false },
            symbolSize: [8, 8],//调整截面形状
            symbolOffset: [0, -3],
            z: 12,
@@ -327,11 +332,21 @@
        lineStyle: {
          width: 2,
          type: 'solid',
          color: '#01D0A7',
        },
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          color: '#01D0A7',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(1,208,167,0.4) '
            },
            {
              offset: 1,
              color: 'rgba(1,208,167,0) '
            }
          ])
        },
        data: flight_distance,
      },
@@ -402,7 +417,7 @@
  }

  .flycenter {
    margin-top: 13px;
    margin-top: 8px;

    .centerBox {
      display: flex;
@@ -413,13 +428,15 @@
        padding: 7px 7px 0 15px;
        width: 196px;
        flex: 1;
        // height: 80px;
        height: pxToVh(80);
       height: 41px;
        //height: pxToVh(41);
        background: #f6f8fe;
        box-shadow: 0px 5px 4px 0px #ebf1ff;
        border-radius: 8px 8px 8px 8px;
        border: 1px solid #ffffff;
        margin-right: 16px;
        display: flex;
        align-items: center;

        img {
          width: 15px;
@@ -436,7 +453,7 @@
        }

        .flydata {
          margin-top: 10px;
      margin-left: 11px;
          text-align: right;
          font-size: 14px;
          color: #7c8091;
@@ -452,9 +469,8 @@
    }

    .lineChart {
     height: pxToVh(314) ;
     height: pxToVh(374) ;
      width: 100%;

      .lineBox {
        width: 100%;
        height: 100%;

 src/views/wel/components/taskOutcome.vue

@@ -40,9 +40,7 @@
const totalNum = ref(0)
const dateSelect = ref('CURRENT_YEAR');
const refresh = () => {
  // params.value.dateEnum = 'CURRENT_YEAR';
  // checked.value = 'CURRENT_YEAR';
  // dateSelect.value = 'CURRENT_YEAR';

  getBarChartData(params.value);
};
let timeClick = (item, index) => {
@@ -72,7 +70,7 @@
  legend: {
    itemWidth: 14,
    itemHeight: 8,
    data: ['照片总数', '视频总数', 'AI识别', '全景', '三维', '正射'], // 确保包含所有系列名称
    data: ['照片总数', '视频总数', 'AI识别', '全景', '三维', '正射'], 
    top: '-1%',
    textStyle: {
      color: '#383838',
@@ -80,7 +78,7 @@
    },
  },
  grid: {
    // top: '5%',
    top: '9%', 
    left: 0,
    right: 0,
    bottom: 0,
@@ -224,7 +222,7 @@
  height: pxToVh(473);
  .card-title {
    display: flex;
    margin-bottom: 10px;
    // margin-bottom: 10px;
    align-items: center;
    justify-content: space-between;
    .cardtotal {
@@ -306,9 +304,8 @@
}
.chart {
  width: 98%;
  // height: 265px;
  height: pxToVh(355);
  height: pxToVh(380);
  padding-left: 10px;
  margin-top: 27px;
  margin-top: 10px;
}
</style>