1.新增采购订单、生产管理看板

loulijun2021

2023-03-01 1dd74bb741611e3882c781d79539be1600d98431

 src/utils/myEcharts.js

@@ -1516,5 +1516,265 @@
    }]
  }

  return option
}

// 采购订单
export function cgddchart(data1, data2, data3) {
  // 得到最大值  5的倍数

  let max = Math.max(Math.max(data1, data2), data3) + 5
  if (max % 5 !== 0) {
    max = 5 - max % 5 + max
  }
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      formatter: '{a} <br/>{c} {b}'
    },
    series: [
      {
        name: '本月采购订单数',
        type: 'gauge',
        color: ['#f00'],
        min: 0,
        max: max,
        splitNumber: 5,
        radius: '70%',
        center: ['17%', '48%'],
        axisLine: { // 坐标轴线
          lineStyle: { // 属性lineStyle控制线条样式
            width: 10,
            color: [
              [0.4, '#09d8f2'],
              [1, '#00FFFFF']
            ]
          },
          backgroundColor: 'none'
        },
        tooltip: {
          show: false
        },
        axisTick: { // 坐标轴小标记
          length: 10, // 属性length控制线长
          lineStyle: { // 属性lineStyle控制线条样式
            color: 'auto'
          }
        },
        splitLine: { // 分隔线
          length: 10, // 属性length控制线长
          lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
            color: colorY
          }
        },
        axisLabel: {
          borderRadius: 1,
          // color: 'rgba(255,255,255,0.7)',
          color: '#00FFFF',
          padding: 1,
          fontSize: 18
        },
        title: {
          // 其余属性默认使用全局文本样式，详见TEXTSTYLE
          // fontWeight: 'bolder',
          fontSize: 22,
          fontFamily: 'Microsoft YaHei',
          fontColor: '#FFF',
          color: '#FFF',
          paddingTop: 20,
          offsetCenter: [0, '120%']
          // fontStyle: 'italic'
        },
        itemStyle: {
          // color: '#1092ff'
          color: '#09d8f2'
        },
        detail: {
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          fontFamily: 'digital',
          fontSize: 26,
          color: '#fff',
          rich: {},
          offsetCenter: [0, '90%'],

          formatter: function(value) {
            return value
          }
        },
        data: [{
          value: data1,
          name: '本月采购订单数'
        }]
      },
      {
        name: '本月到货单数',
        type: 'gauge',
        color: ['#f00'],
        min: 0,
        max: max,
        splitNumber: 5,
        radius: '70%',
        center: ['50%', '48%'],
        axisLine: { // 坐标轴线
          lineStyle: { // 属性lineStyle控制线条样式
            width: 10,
            color: [
              [0.4, '#09d8f2'],
              [1, '#00FFFFF']
            ]
          },
          backgroundColor: 'none'
        },
        tooltip: {
          show: false
        },
        axisTick: { // 坐标轴小标记
          length: 10, // 属性length控制线长
          lineStyle: { // 属性lineStyle控制线条样式
            color: 'auto'
          }
        },
        splitLine: { // 分隔线
          length: 10, // 属性length控制线长
          lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
            color: colorY
          }
        },
        axisLabel: {
          borderRadius: 1,
          // color: 'rgba(255,255,255,0.7)',
          color: '#00FFFF',
          padding: 1,
          fontSize: 18
        },
        title: {
          // 其余属性默认使用全局文本样式，详见TEXTSTYLE
          // fontWeight: 'bolder',
          fontSize: 22,
          fontColor: '#FFF',
          color: '#FFF',
          fontFamily: 'Microsoft YaHei',
          paddingTop: 20,
          offsetCenter: [0, '120%']
          // fontStyle: 'italic'
        },
        itemStyle: {
          // color: '#1092ff'
          color: '#09d8f2'
        },
        detail: {
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          // borderWidth: 1,
          textBorderColor: '#000',
          textBorderWidth: 1,
          textShadowBlur: 1,
          textShadowColor: colorY,
          textShadowOffsetX: 0,
          textShadowOffsetY: 0,
          paddingTop: 10,
          fontFamily: 'digital',
          fontSize: 20,
          width: 30,
          color: '#fff',
          rich: {},
          offsetCenter: [0, '90%'],
          formatter: function(value) {
            // console.info(value)
            // return (value * 10 + '%')
            return value
          }
        },
        data: [{
          value: data2,
          name: '本月到货单数'
        }]
      },
      {
        name: '本月采购入库单数',
        type: 'gauge',
        color: ['#f00'],
        min: 0,
        max: max,
        splitNumber: 5,
        radius: '70%',
        center: ['83%', '48%'],
        axisLine: { // 坐标轴线
          lineStyle: { // 属性lineStyle控制线条样式
            width: 10,
            color: [
              [0.4, '#09d8f2'],
              [1, '#00FFFFF']
            ]
          },
          backgroundColor: 'none'
        },
        tooltip: {
          show: false
        },
        axisTick: { // 坐标轴小标记
          length: 10, // 属性length控制线长
          lineStyle: { // 属性lineStyle控制线条样式
            color: 'auto'
          }
        },
        splitLine: { // 分隔线
          length: 10, // 属性length控制线长
          lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
            color: colorY
          }
        },
        axisLabel: {
          borderRadius: 1,
          // color: 'rgba(255,255,255,0.7)',
          color: '#00FFFF',
          padding: 1,
          fontSize: 18
        },
        title: {
          // 其余属性默认使用全局文本样式，详见TEXTSTYLE
          // fontWeight: 'bolder',
          fontSize: 22,
          fontColor: '#FFF',
          color: '#FFF',
          fontFamily: 'Microsoft YaHei',
          paddingTop: 20,
          offsetCenter: [0, '120%']
          // fontStyle: 'italic'
        },
        itemStyle: {
          // color: '#1092ff'
          color: '#09d8f2'
        },
        detail: {
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          // borderWidth: 1,
          textBorderColor: '#000',
          textBorderWidth: 1,
          textShadowBlur: 1,
          textShadowColor: colorY,
          textShadowOffsetX: 0,
          textShadowOffsetY: 0,
          paddingTop: 10,
          fontFamily: 'digital',
          fontSize: 20,
          width: 30,
          color: '#fff',
          rich: {},
          offsetCenter: [0, '90%'],
          formatter: function(value) {
            return value
          }
        },
        data: [{
          value: data3,
          name: `本月采购入库单数`
        }]
      }

    ]
  }
  return option
}