1.金华智研院看板开发100%

小小儁爺

2024-07-02 56ba7c96dd7054e5d544a9ffbe80593107ecb855

 src/utils/myEcharts.js

@@ -4501,3 +4501,761 @@

  return option
}

export function echart06() {
  var fontColor = '#30eee9'
  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '5%',
      right: '10%',
      top: '20%',
      bottom: '15%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          color: fontColor
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#397cbc'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#195384'
          }
        },
        data: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00']
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: ' ',
        // min: 0,
        // max: 1000,
        splitNumber: 4,
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#2ad1d2'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#27b4c2'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#11366e'
          }
        }
      }

    ],
    series: [

      {
        name: ' ',
        type: 'line',
        // stack: '总量',
        // symbol: 'circle',
        // symbolSize: 8,

        itemStyle: {
          normal: {
            color: '#00d4c7',
            lineStyle: {
              color: '#00d4c7',
              width: 1
            },
            areaStyle: {
              // color: '#94C9EC'
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: 'rgba(7,44,90,0.3)'
              }, {
                offset: 1,
                color: 'rgba(0,212,199,0.9)'
              }])
            }
          }
        },
        data: [500, 800, 100, 900, 1000, 800]
      }

    ]
  }

  return option
}

export function echart07() {
  var fontColor = '#30eee9'
  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '5%',
      right: '5%',
      top: '35%',
      bottom: '0%',
      containLabel: true
    },
    title: {
      text: '整厂终检率',
      x: '40%',
      y: '18%',
      textStyle: {
        // color: '#fff',
        color: '#00ffff',
        fontSize: '14',
        fontWeight: 'bolder'
      }

    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          rotate: 45, // 旋转 45 度
          color: fontColor
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#397cbc'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#195384'
          }
        },
        data: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00']
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: ' ',
        // min: 0,
        max: 100,
        splitNumber: 2,
        axisLabel: {
          formatter: '{value} %',
          textStyle: {
            color: '#2ad1d2'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#27b4c2'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#11366e'
          }
        }
      }

    ],
    series: [

      {
        name: ' ',
        type: 'line',
        // stack: '总量',
        // symbol: 'circle',
        // symbolSize: 8,

        itemStyle: {
          normal: {
            color: '#00d4c7',
            lineStyle: {
              color: '#00d4c7',
              width: 1
            },
            areaStyle: {
              // color: '#94C9EC'
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: 'rgba(7,44,90,0.3)'
              }, {
                offset: 1,
                color: 'rgba(0,212,199,0.9)'
              }])
            }
          }
        },
        data: [99, 98, 100, 96, 100, 97]
      }

    ]
  }

  return option
}

export function echart08() {
  var fontColor = '#30eee9'
  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '5%',
      right: '5%',
      top: '35%',
      bottom: '0%',
      containLabel: true
    },
    title: {
      text: '缺陷分类比例',
      x: '40%',
      y: '18%',
      textStyle: {
        // color: '#fff',
        color: '#00ffff',
        fontSize: '14',
        fontWeight: 'bolder'
      }

    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          rotate: 45, // 旋转 45 度
          color: fontColor
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#397cbc'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#195384'
          }
        },
        data: ['压铸', '成型', '抛光', '点焊', '烤漆', '电镀']
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: ' ',
        // min: 0,
        max: 100,
        splitNumber: 2,
        axisLabel: {
          formatter: '{value} %',
          textStyle: {
            color: '#2ad1d2'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#27b4c2'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#11366e'
          }
        }
      }

    ],
    series: [
      {
        name: ' ',
        type: 'bar',
        // stack: '总量',
        // symbol: 'circle',
        // symbolSize: 8,
        barWidth: 10,
        itemStyle: {
          normal: {
            color: '#00d4c7',
            lineStyle: {
              color: '#00d4c7',
              width: 1
            },
            areaStyle: {
              // color: '#94C9EC'
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: 'rgba(7,44,90,0.3)'
              }, {
                offset: 1,
                color: 'rgba(0,212,199,0.9)'
              }])
            }
          }
        },
        data: [55, 68, 60, 86, 40, 37]
      }

    ]
  }

  return option
}

export function echart09() {
  var fontColor = '#30eee9'
  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '5%',
      right: '5%',
      top: '35%',
      bottom: '0%',
      containLabel: true
    },
    title: {
      text: '虚拟测量',
      x: '45%',
      y: '18%',
      textStyle: {
        // color: '#fff',
        color: '#00ffff',
        fontSize: '14',
        fontWeight: 'bolder'
      }

    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          rotate: 45, // 旋转 45 度
          color: fontColor
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#397cbc'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#195384'
          }
        },
        data: ['Pro01', 'Pro02', 'Pro03', 'Pro04', 'Pro05', 'Pro06']
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: ' ',
        // min: 0,
        max: 3000,
        splitNumber: 2,
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#2ad1d2'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#27b4c2'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#11366e'
          }
        }
      }

    ],
    series: [

      {
        name: ' ',
        type: 'line',
        // stack: '总量',
        // symbol: 'circle',
        // symbolSize: 8,

        itemStyle: {
          normal: {
            color: '#00d4c7',
            lineStyle: {
              color: '#00d4c7',
              width: 1
            },
            areaStyle: {
              // color: '#94C9EC'
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: 'rgba(7,44,90,0.3)'
              }, {
                offset: 1,
                color: 'rgba(0,212,199,0.9)'
              }])
            }
          }
        },
        data: [2000, 2298, 2800, 0, 2200, 1600]
      }

    ]
  }

  return option
}

export function echart10() {
  var fontColor = '#30eee9'
  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '5%',
      right: '5%',
      top: '30%',
      bottom: '5%',
      containLabel: true
    },
    title: {
      text: '压力监控',
      x: '46%',
      y: '12%',
      textStyle: {
        // color: '#fff',
        color: '#00ffff',
        fontSize: '14',
        fontWeight: 'bolder'
      }

    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          rotate: 90, // 旋转 45 度
          color: fontColor
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#397cbc'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#195384'
          }
        },
        data: ['13:35', '13:40', '13:45', '13:50', '13:55', '14:00', '14:05', '14:10', '14:15', '14:20', '14:25', '14:30', '14:35', '14:40']
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: ' ',
        min: -20,
        max: 20,
        splitNumber: 2,
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#2ad1d2'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#27b4c2'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#11366e'
          }
        }
      }

    ],
    series: [
      {
        name: ' ',
        type: 'bar',
        // stack: '总量',
        // symbol: 'circle',
        // symbolSize: 8,
        barWidth: 10,
        itemStyle: {
          normal: {
            color: '#00d4c7',
            lineStyle: {
              color: '#00d4c7',
              width: 1
            },
            areaStyle: {
              // color: '#94C9EC'
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: 'rgba(7,44,90,0.3)'
              }, {
                offset: 1,
                color: 'rgba(0,212,199,0.9)'
              }])
            }
          }
        },
        data: [-10, -20, 5, 10, -5, 20, 10, -10, -20, -10, 5, 10, 20, 10]
      }

    ]
  }

  return option
}

export function echart11() {
  const _legendColor = '#8FD8FF'
  const _fontSize = 16
  const _fontColor = '#8FD8FF'
  // const data1 = [70, 90, 100, 70, 90, 100]
  // const data2 = [80, 60, 80, 50, 90, 60]
  const data1 = [70 + Math.random() * 20, 90 - Math.random() * 20, 100 - Math.random() * 20, 70 + Math.random() * 20, 90 - Math.random() * 20, 80 - Math.random() * 20]
  const data2 = [80 + Math.random() * 20, 60 + Math.random() * 20, 80 - Math.random() * 20, 50 + Math.random() * 20, 90 - Math.random() * 20, 60 + Math.random() * 20]
  const option = {
    backgroundColor: 'transparent',
    legend: {
      x: '55%',
      y: '10%',
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        fontSize: 16,
        color: 'rgba(255,255,255,.7)'
      }
    },
    grid: {
      left: '2%',
      top: '30%',
      right: '2%',
      bottom: '0%',
      containLabel: true
    },
    yAxis: {
      // max: Math.ceil(Math.max(...data1) * 1.2),
      // max: 100,
      type: 'value',
      position: 'left',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#4E84AC'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        formatter: '{value}',
        color: '#00FFFF',
        fontSize: 14
      },
      splitLine: {
        show: false
      }
    },
    xAxis: {
      type: 'category',
      nameTextStyle: {
        fontSize: 16,
        color: '#7dd6ea'
      },
      axisLabel: {
        show: true,
        interval: 0,
        // margin: 20,
        textStyle: {
          color: colorX,
          fontSize: 16
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#4E84AC'
          // width: 3
        }
      },
      data: ['钢材改制', '冷墩', '热墩', '热处理', '达克罗', '镀锌']
    },
    series: [
      {
        name: '计划产量',
        type: 'bar',
        barWidth: 15,
        barGap: '30%',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(0,234,255, 1)'
              },
              {
                offset: 1,
                color: 'rgba(0,234,255, .1)'
              }
            ])
          }
        },
        // label: {
        //   show: true,
        //   position: 'top',
        //   textStyle: {
        //     fontSize: 36,
        //     color: '#00EAFF'
        //   },
        //   formatter: function(params) {
        //     return params.value + '%'
        //   }
        // },
        data: data1,
        z: 10,
        zlevel: 0
      },
      {
        // 分隔
        type: 'pictorialBar',
        itemStyle: {
          normal: {
            color: '#0F375F'
          }
        },
        symbolRepeat: 'fixed',
        symbolMargin: 15,
        symbol: 'rect',
        symbolClip: true,
        symbolSize: [15, 2],
        symbolPosition: 'start',
        symbolOffset: [-10, 0],
        data: data1,
        width: 2,
        z: 0,
        zlevel: 1
      },
      {
        name: '实际产量',
        type: 'bar',
        barWidth: 15,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(252,160,0, 1)'
              },
              {
                offset: 1,
                color: 'rgba(252,160,0, .1)'
              }
            ])
          }
        },
        // label: {
        //   show: true,
        //   position: 'top',
        //   textStyle: {
        //     fontSize: 16,
        //     color: '#FFA200'
        //   },
        //   formatter: function(params) {
        //     return params.value + '%'
        //   }
        // },
        data: data2,
        z: 10,
        zlevel: 0
      },
      {
        // 分隔
        type: 'pictorialBar',
        itemStyle: {
          normal: {
            color: '#0F375F'
          }
        },
        symbolRepeat: 'fixed',
        symbolMargin: 15,
        symbol: 'rect',
        symbolClip: true,
        symbolSize: [15, 2],
        symbolPosition: 'start',
        symbolOffset: [10, 0],
        data: data2,
        width: 2,
        z: 0,
        zlevel: 1
      }
    ]
  }
  return option
}