人员生产效率对比组件开发

haoxuan

2023-12-01 1274e4da2f175dba16d68bd091be6f23ee9a523a

 src/views/cockpitPage/components/PerSonnelProductivity.vue

@@ -26,11 +26,18 @@
      chartData:{
        datax:['人员1', '人员2', '人员3', '人员4','人员5', '人员6'],
        datay:[120, 200, 150, 380, 470, 150, 230],
      }
      },
    };
  },
  mounted() {
    this.pieChart('chart',this.chartData)
    let chartData2 = [
      { value: 10, name: "一类" },
      { value: 20, name: "二类" },
      { value: 60, name: "三类" },
      { value: 10, name: "四类" },
    ];
    this.getChartRight('chart2', chartData2)
  },
  watch: {},
  methods: {
@@ -187,6 +194,91 @@
            myChart.setOption(option,true);
          }
        },
    getChartRight(chartName, data) {
      let chartDom = this.$refs[chartName];
      let myChart = echarts.init(chartDom);
      let img='/cockpitPage/dotted-circle.png'
      let option;
      if (data) {
        option = {
          color: ["#dcb018", "#735b09", "#ebd68e",'#FF3000'],
          tooltip: {
            trigger: "item",
          },
          graphic:{
            elements:[
              {
                type:'image',
                z:3,
                style:{
                  image:img,
                  width:118,
                  height:118,
                },
                left:'center',
                top:'center',
                position:[10,10]
             }
             
            ]
          },
          series: [
            {
              name: "Access From",
              type: "pie",
              // center: ['80%', '46%'],
              radius: ['52%','65%'],
              // minAngle: 20,
              // startAngle: 60,
              avoidLabelOverlap: false,
             
              label: {
                normal:{
                  position: 'outer',
                  paddding:[-100,70],
                  
                  color: "#01f7fd",
                  fontSize: 12,
                  borderWidth:20,
                  borderRadius:4,
                  formatter: function (params) {
                    let str=
                    params.name+
                          params.value+'%'
                    return str;
                  },
                },
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 12,
                  fontWeight: "bold",
                  color:'#dcb018',
                },
              },
              labelLine: {
                show: true,
                length: 20,
                length2:10,
                lineStyle:{
                  color:'#dcb018',
                }
              },
              data: data,
            },
          ],
        };

        option && myChart.setOption(option);
      } else {
        option = {};
        myChart.setOption(option, true);
      }


      
    },
  },
};
</script>
@@ -196,20 +288,41 @@
  width:100%;
  height:calc(100% - 20px);
  padding:20px 0 0;

  .bar-contents{
    width:100%;
    height:calc(100% - 60px);
   
    .chart-left{
        width: 50%;
      width: calc(60% - 20px);
        height:100%;
      margin-right:20px;
      float:left;
        border:1px solid #00FFFF;
        box-sizing: border-box;
      }

      .chart-right{
        width: 50%;
      width: 40%;
      float:left;
        height:100%;
      position:relative;
      .chart-bg{
        width:100%;
        position:absolute;
        top:0;
        right:0;
        img{
          width:100%;
      }
      }
      .chart{
        position:absolute;
        top:0;
        right:0;
      }
    }

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