田源
2023-11-27 5f75465085edf8060f68ef85995dd00731218888
统计分析饼状 bug
已修改2个文件
102 ■■■■■ 文件已修改
Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue 86 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
Source/UBCS-WEB/src/views/statistic/statisticPage.vue 16 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue
@@ -21,6 +21,52 @@
      default: ""
    }
  },
  watch:{
    pieData:{
      immediate:true,
      handler(newval,oldval){
        if (newval) {
          // console.log(newval)
          const series=[
            {
              name: '',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap:false,
              label: {
                formatter: '{b}\n{d}%',
                fontSize:14
              },
              itemStyle: {
                color: function(params) {
                  // 根据具体需求设置颜色
                  const colorList = ['#5470C6', '#91CC75', '#fac858', '#EE6666', '#3BA272', '#FC8452', '#9A60B4', '#e34d4d', '#b3e9b9', '#eaaaed', '#1bc6e4', '#c6b3e9'];
                  return colorList[params.dataIndex % colorList.length];
                }
              },
              data:newval[0].map((value, index) => {
                return {
                  value: value,
                  name: this.getMonthName(index),
                  newValue: newval[1][index]
                };
              }),
            }
          ]
          this.chartOptions.series = series;
        }
      }
    },
    chartName:{
      handler(newval,oldval){
        if(newval){
          this.chartOptions.title.text = newval + "数据统计"
        }
      },
      immediate:true,
      deep:true
    }
  },
  data() {
    return {
      chartOptions: {
@@ -47,41 +93,15 @@
          top: 'middle',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap:false,
            label: {
              formatter: '{b}\n{d}%',
              fontSize:14
            },
            itemStyle: {
              color: function(params) {
                // 根据具体需求设置颜色
                const colorList = ['#5470C6', '#91CC75', '#fac858', '#EE6666', '#3BA272', '#FC8452', '#9A60B4', '#e34d4d', '#b3e9b9', '#eaaaed', '#1bc6e4', '#c6b3e9'];
                return colorList[params.dataIndex % colorList.length];
              }
            },
            data: [
              { value: 110, name: '一月', newValue: 10, totalValue: 110 },
              { value: 220, name: '二月', newValue: 20, totalValue: 220 },
              { value: 330, name: '三月', newValue: 30, totalValue: 330 },
              { value: 440, name: '四月', newValue: 40, totalValue: 440 },
              { value: 550, name: '五月', newValue: 50, totalValue: 550 },
              { value: 660, name: '六月', newValue: 60, totalValue: 660 },
              { value: 770, name: '七月', newValue: 70, totalValue: 770 },
              { value: 880, name: '八月', newValue: 80, totalValue: 880 },
              { value: 990, name: '九月', newValue: 90, totalValue: 990 },
              { value: 1100, name: '十月', newValue: 100, totalValue: 1100 },
              { value: 1210, name: '十一月', newValue: 110, totalValue: 1210 },
              { value: 1320, name: '十二月', newValue: 120, totalValue: 1320 }
            ]
          }
        ]
        series: []
      },
    }
  },
  methods:{
    getMonthName(index){
      const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
      return monthNames[index];
    }
  }
}
</script>
Source/UBCS-WEB/src/views/statistic/statisticPage.vue
@@ -48,13 +48,10 @@
    </el-dialog>
    <!--    echarts组件-->
    <div>
      <lineChart v-for="(item,index) in lineList" :key="index" :chartName="item.menuName"
                 :lineData="item.menuData"></lineChart>
      <!--      <pieChart :pieData="pieData" :chartName="chartName"></pieChart>-->
      <ColumnarChart v-for="(item,index) in columnarList" :key="index" :chartName="item.menuName"
                     :columnarData="item.menuData"></ColumnarChart>
      <mixCart v-for="(item,index) in mixList" :key="index" :chartName="item.menuName"
               :mixData="item.menuData"></mixCart>
      <lineChart v-for="(item,index) in lineList" :key="index" :chartName="item.menuName" :lineData="item.menuData"></lineChart>
            <pieChart v-for="(item,index) in pieList" :key="index" :pieData="item.menuData" :chartName="item.menuName"></pieChart>
      <ColumnarChart v-for="(item,index) in columnarList" :key="index" :chartName="item.menuName" :columnarData="item.menuData"></ColumnarChart>
      <mixCart v-for="(item,index) in mixList" :key="index" :chartName="item.menuName" :mixData="item.menuData"></mixCart>
    </div>
  </div>
</template>
@@ -93,7 +90,7 @@
        },
        {
          menuName: "测试sc",
          codeType: "2",
          codeType: null,
          menuData: [
            [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
            [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80],
@@ -101,7 +98,7 @@
        },
        {
          menuName: "产品型号",
          codeType: "0",
          codeType: null,
          menuData: [
            [220, 232, 301, 334, 290, 330, 410, 330, 212, 322, 200, 234],
            [120, 132, 101, 134, 90, 230, 210, 130, 10, 122, 100, 80],
@@ -185,7 +182,6 @@
    },
    //保存
    addSaveHandler() {
      debugger
      if (this.selectData.length <= 0) {
        this.$message.warning('请至少选择一条数据!');
        return;