更新

zxl

5 小时以前 3d0b8d97cb710dc8659cbe4440629542a8d8b92b

 pages/index/index.vue

@@ -70,7 +70,13 @@
      <text class="chart-title">项目材料进度统计</text>
      <!-- 图表容器 -->
      <view class="chart-box">
        <qiun-data-charts type="bar" :opts="opts" :chartData="chartData" :tooltipShow="false" />
        <qiun-data-charts 
          type="bar" 
          :opts="opts" 
          :chartData="chartData" 
          :tooltipShow="false" 
          @getIndex="handleChartTap"
        />
      </view>
    </view>
    <!-- 项目阶段折线图 -->
@@ -107,7 +113,7 @@
        </view>
        <view class="quick-item" @click="goSchedule">
          <view class="quick-icon quick-purple">
            <uni-icons type="folder" color="#fff" size="36"></uni-icons>
            <uni-icons type="wallet" color="#fff" size="36"></uni-icons>
          </view>
          <text class="quick-label">日程</text>
        </view>
@@ -206,14 +212,34 @@
      chartData: {},
      opts: {
        color: ["#73C0DE", "#91CB74", "#EE6666"],
        padding: [15, 30, 0, 10],
        padding: [15, 45, 0, 10],
        enableScroll: true,
        dataLabel: false,
        legend: {},
        xAxis: { boundaryGap: "justify", disableGrid: false, min: 0, axisLine: false },
        yAxis: { data: [{ type: 'categories', disabled: false, fontSize: 10, formatter: (val) => val.length > 6 ? (val.substring(0, 6) + '...') : val }] },
        xAxis: { 
          boundaryGap: "justify", 
          disableGrid: false, 
          min: 0, 
          axisLine: false,
          format: 'int' 
        },
        yAxis: { 
          data: [{ 
            type: 'categories', 
            disabled: false, 
            fontSize: 12, // 增大轴文字大小
            formatter: (val) => val.length > 8 ? (val.substring(0, 8) + '...') : val // 增加名称显示长度
          }] 
        },
        extra: {
          bar: { type: "stack", width: 32, categoryGap: 2, dataLabel: true, labelPosition: "right", labelWidth: 40 },

          bar: { 
            type: "stack", 
            width: 30, 
            categoryGap: 8, 
            dataLabel: false, // 不在表格图上直接显示数值
            labelPosition: "center", 
            labelWidth: 40 
          },
        }
      },
      // 项目阶段折线图数据与配置
@@ -475,18 +501,53 @@
      const base = this.selectedIds.length ? this.projectList.filter(p => this.selectedIds.includes(Number(p.id))) : this.projectList
      console.log("筛选后:{}", base)
      const categories = base.map(p => p.projectName)
      const completed = base.map(p => p.co)
      const inProgress = base.map(p => p.co2)
      const notStarted = base.map(p => p.co3)
      
      // 处理数据：将 0 转换为 null，避免在图表中显示 "0" 导致标签挤在一起
      const formatData = (val) => (val === 0 || val === '0') ? null : Number(val);
      
      const completed = base.map(p => formatData(p.co))
      const inProgress = base.map(p => formatData(p.co2))
      const notStarted = base.map(p => formatData(p.co3))
      
      this.chartData = {
        categories,
        series: [
          { name: '已处理', data: completed },
          { name: '待处理', data: inProgress },
          { name: '未处理', data: notStarted }
          { name: '已处理', data: completed, dataLabel: false },
          { name: '待处理', data: inProgress, dataLabel: false },
          { name: '未处理', data: notStarted, dataLabel: false }
        ]
      };
    },
    handleChartTap(e) {
      // 兼容不同平台和版本的事件结构，尝试从不同位置获取 currentIndex
      let index = -1;
      if (e && typeof e.currentIndex !== 'undefined') {
        index = e.currentIndex;
      } else if (e && e.detail && typeof e.detail.currentIndex !== 'undefined') {
        index = e.detail.currentIndex;
      }
      // 只有点击到有效的柱状图（索引 >= 0）时才处理
      if (index.index >= 0) {
        const projectName = this.chartData.categories[index.index];
        let content = '';
        if (this.chartData.series) {
          this.chartData.series.forEach(serie => {
      
            if (serie.data && serie.data[index.index] !== null && serie.data[index.index] !== undefined) {
              content += `${serie.name}：${serie.data[index.index]}\r\n`;
            }
          });
        }
        if (content.trim()) {
          uni.showModal({
            title: projectName,
            content: content.trim(),
            showCancel: false,
            confirmText: '确定'
          });
        }
      }
    },
    // 项目阶段折线图：x轴为 在库、前期、实施、竣工，模拟百分比趋势
    async buildPhaseChart() {
      let categories = ['在库', '前期', '实施', '竣工'];