Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue

@@ -6,11 +6,11 @@

<script>
import 'echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar' // 导入柱状图组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
export default {
  name: "pieChart",
  name: "polarBarChart",
  props:{
    pieData:{
      type:Array,
@@ -19,77 +19,89 @@
    chartName:{
      type:String,
      default: ""
    },
    monthData:{
      type:Array,
      default: () => ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
    }
  },
  watch:{
    pieData:{
      immediate:true,
      handler(newval, oldval){
        if (newval) {
          const series = [
            {
              type: 'bar',
              name: '新增',
              data: newval[1],
              coordinateSystem: 'polar',
              stack: 'a',
              emphasis: {
                focus: 'series'
              },
              itemStyle: {
                color: '#91cc75' // 新增的颜色
              }
            },
            {
              type: 'bar',
              name: '总量',
              data: newval[0],
              coordinateSystem: 'polar',
              stack: 'a',
              emphasis: {
                focus: 'series'
              },
              itemStyle: {
                color: '#5470c6' // 总量的颜色
              }
            }
          ];
          this.chartOptions.series = series;
        }
      }
    },
    chartName:{
      handler(newval, oldval){
        if(newval){
          this.chartOptions.title.text = newval + "数据统计"
        }
      },
      immediate:true
    }
  },
  data() {
    return {
      chartOptions: {
        title: {
          text: '供应商主数据统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            let result = '';
            if (params.componentType === 'series') {
              result += params.name + '<br/>';
              result += '新增：' + params.data.newValue + '<br/>';
              result += '总量：' + params.data.value + '<br/>';
              result += '百分比：' + params.percent + '%';
            }
            return result;
          }
          text: '',
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'middle',
          data: ['总量', '新增'],
        },
        polar: {},
        angleAxis: {
          type: 'category',
          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 }
            ]
          }
        ]
      },
        radiusAxis: {},
        tooltip: {
          trigger: 'axis'
        },
        series: []
      }
    }
  },
  created(){
    this.chartOptions.color = ['#5470c6', '#91cc75', '#fac858', '#ca8622', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4'];
  }
}
</script>

<style scoped lang="scss">
#chart {
  width: 90%;
  width: 97%;
  height: 530px;
}

</style>