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

haoxuan

2023-12-01 1274e4da2f175dba16d68bd091be6f23ee9a523a

 src/views/cockpitPage/components/PerSonnelProductivity.vue

@@ -23,197 +23,310 @@
  props: {},
  data() {
    return {
      chartData:{
        datax:['人员1', '人员2', '人员3', '人员4','人员5', '人员6'],
        datay:[120, 200, 150, 380, 470, 150, 230],
      }
      chartData: {
        datax: ['人员1', '人员2', '人员3', '人员4', '人员5', '人员6'],
        datay: [120, 200, 150, 380, 470, 150, 230],
      },
    };
  },
  mounted() {
    this.pieChart('chart',this.chartData)
    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: {
    //在职
    pieChart(chartName,data){
          let chartDom = this.$refs[chartName]
          let myChart = echarts.init(chartDom);
          let option;
          let lineColor='#35ddc74d'
          if(data){
            option = {
              color:['#00FFFF','#dcb018'],
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'none'
                },
    pieChart(chartName, data) {
      let chartDom = this.$refs[chartName]
      let myChart = echarts.init(chartDom);
      let option;
      let lineColor = '#35ddc74d'
      if (data) {
        option = {
          color: ['#00FFFF', '#dcb018'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'none'
            },
          },
          grid: {
            right: "80px",
            bottom: '60px',
            left: '60px',
            top: '30px',
          },
          dataZoom: [
            {
              type: 'inside',
              // show: true, //显示滚动条
              start: 0,
              end: 100,
              yAxisIndex: 0,
              minSpan: 20,
              maxSpan: 100,
              // handleSize: 8
            },
            {
              //   type: 'slider', //两个一个是slider，一个是inside，slider是增加滚动条以及鼠标拖动滚动条功能，inside则是鼠标滚轮滚动滚动条。
              type: 'inside',
              // show: true,
              // realtime : true,
              yAxisIndex: 0,
              minSpan: 20,
              maxSpan: 100,
              start: 0,
              end: 100
            },
          ],
          legend: {
            itemWidth: 8,
            itemHeight: 8,
            itemGap: 35,//间距
            bottom: '5px',
            left: 'center',
          },
          yAxis: [
            {
              type: 'category',
              axisTick: {
                show: false
              },
              grid: {
                right: "80px",
                bottom:'60px',
                left:'60px',
                top:'30px',
              },
              dataZoom: [
                {
                  type: 'inside',
                  // show: true, //显示滚动条
                  start:0,
                  end: 100,
                  yAxisIndex: 0,
                  minSpan:20,
                  maxSpan:100,
                  // handleSize: 8
                },
                {
                  //   type: 'slider', //两个一个是slider，一个是inside，slider是增加滚动条以及鼠标拖动滚动条功能，inside则是鼠标滚轮滚动滚动条。
                  type: 'inside',
                  // show: true,
                  // realtime : true,
                  yAxisIndex: 0,
                  minSpan:20,
                  maxSpan:100,
                  start: 0,
                  end: 100
                },
              ],
              legend: {
                itemWidth: 8,
                itemHeight: 8,
                itemGap: 35,//间距
                bottom:'5px',
                left:'center',
              },
              yAxis: [
                {
                  type: 'category',
                  axisTick: {
                    show: false
                  },
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color:lineColor,
                    }
                  },
                  axisLabel:{
                    // rotate:45,
                    margin: 10,
                    show: true,
                    textStyle: {
                      color:function(params,index){
                        let colorList=['#dcb018','#00FFFF']
                        if(index % 2 == 0){
                          return colorList[0]
                        }else{
                          return colorList[1]
                        }
                      }
                    },
                  },
                  data: data.datax?data.datax:[],
              axisLine: {
                show: true,
                lineStyle: {
                  color: lineColor,
                }
              ],
              xAxis: [
                {
                  type: '',
                  name: '单位：件',
                  // min: data.yAxis[0].min?data.yAxis.min:0,
                  minInterval: 1,//坐标轴是整数
                  max:Math.ceil(eval(`Math.max(${data.datay})`)/5)*5,//数据最大值加3
                  interval: Math.ceil(eval( `Math.max(${data.datay})`)/7)*7 / 7,
                  position: 'left',
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color:'#0a112B',
              },
              axisLabel: {
                // rotate:45,
                margin: 10,
                show: true,
                textStyle: {
                  color: function (params, index) {
                    let colorList = ['#dcb018', '#00FFFF']
                    if (index % 2 == 0) {
                      return colorList[0]
                    } else {
                      return colorList[1]
                    }
                  },
                  nameTextStyle:{
                    color:"#00FFFF",
                  },
                  splitLine: {
                    show: true,
                    lineStyle: {
                      // 使用深浅的间隔色
                      color: lineColor,
                    }
                  },
                  axisTick: {
                    show: false
                  },
                
                  axisLabel: {
                    textStyle: {
                      color: '#00FFFF'
                    },
                    
                  }
                },
              ],
              series:[
                {
                  type: 'bar',
                  name: '',
                  barWidth: '15',
                  label:{
                    show:true,
                    position:'right',
                    color: '#00FFFF'
                  },
                  itemStyle: {
                    normal: {
                      //柱形图圆角，初始化效果
                      barBorderRadius:[4, 4, 0, 0],
                      color:function(params){
                        let colorList=['#dcb018','#00FFFF']
                        if(params.dataIndex % 2 == 0){
                          return colorList[0]
                        }else{
                          return colorList[1]
                        }
                      }
                    },
                  },
                  data: data.datay,
                },
              ]
            };
              },
              data: data.datax ? data.datax : [],
            }
          ],
          xAxis: [
            {
              type: '',
              name: '单位：件',
              // min: data.yAxis[0].min?data.yAxis.min:0,
              minInterval: 1,//坐标轴是整数
              max: Math.ceil(eval(`Math.max(${data.datay})`) / 5) * 5,//数据最大值加3
              interval: Math.ceil(eval(`Math.max(${data.datay})`) / 7) * 7 / 7,
              position: 'left',
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#0a112B',
                }
              },
              nameTextStyle: {
                color: "#00FFFF",
              },
              splitLine: {
                show: true,
                lineStyle: {
                  // 使用深浅的间隔色
                  color: lineColor,
                }
              },
              axisTick: {
                show: false
              },

            option && myChart.setOption(option);
          }else{
            option={};
            myChart.setOption(option,true);
          }
        },
              axisLabel: {
                textStyle: {
                  color: '#00FFFF'
                },

              }
            },
          ],
          series: [
            {
              type: 'bar',
              name: '',
              barWidth: '15',
              label: {
                show: true,
                position: 'right',
                color: '#00FFFF'
              },
              itemStyle: {
                normal: {
                  //柱形图圆角，初始化效果
                  barBorderRadius: [4, 4, 0, 0],
                  color: function (params) {
                    let colorList = ['#dcb018', '#00FFFF']
                    if (params.dataIndex % 2 == 0) {
                      return colorList[0]
                    } else {
                      return colorList[1]
                    }
                  }
                },
              },
              data: data.datay,
            },
          ]
        };

        option && myChart.setOption(option);
      } else {
        option = {};
        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>

<style scoped lang="scss">
.bar-chart{
  width:100%;
  height:calc(100% - 20px);
  padding:20px 0 0;
  .bar-contents{
    width:100%;
    height:calc(100% - 60px);
   
    .chart-left{
        width: 50%;
        height:100%;
        border:1px solid #00FFFF;
        box-sizing: border-box;
      }
      .chart-right{
        width: 50%;
        height:100%;
.bar-chart {
  width: 100%;
  height: calc(100% - 20px);
  padding: 20px 0 0;

  .bar-contents {
    width: 100%;
    height: calc(100% - 60px);

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

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

    .chart {
      width: 100%;
      height: 100%;
    }
  }
}
</style>