1.仓库管理看板接口接入

loulijun2021

2022-08-16 df83e26ddc09dbc9450d70b8a8e704aebef97720

 src/utils/myEcharts.js

@@ -116,6 +116,7 @@

  return option
}

export function bar01(data) {
  var dataX = data.map(r => r.key)
  var dataY = data.map(r => r.value)
@@ -209,11 +210,11 @@
            colorStops: [
              {
                offset: 0,
                color: `rgba(42,197,137,1)`// 0% 处的颜色
                color: `rgba(42, 197, 137, 1)`// 0% 处的颜色
              },
              {
                offset: 1,
                color: `rgba(187,236,218,1)` // 100% 处的颜色
                color: `rgba(187, 236, 218, 1)` // 100% 处的颜色
              }
            ],
            globalCoord: false // 缺省为 false
@@ -332,13 +333,13 @@
      symbolSize: 8,
      itemStyle: {
        normal: {
          color: `rgba(42,197,137,1)`
          color: `rgba(42, 197, 137, 1)`
        }
      },
      lineStyle: {
        normal: {
          width: 2,
          color: `rgba(42,197,137,1)`
          color: `rgba(42, 197, 137, 1)`
        }
      },
      data: dataY
@@ -347,3 +348,423 @@

  return option
}

// 综合看板图
export function bar02(dataArr,titlenameArr) {
  // console.log(val)
  // const data = [70, 60, 50, 40, 30]
  // const titlename = ['外观划伤', '表面油污', '尺寸', '颜色', '大小']
  // const data = val.map(i => i.cont)
  // const titlename = val.map(i => i.name)
  const data = dataArr

  const titlename = titlenameArr

  const valdata = [683, 500, 400, 300, 200]
  const myColor = ['#FF0000', '#FF5511', '#FF8800', '#FFBB00', '#FFFF00']
  const option = {
    backgroundColor: 'transparent',
    title: {
      show: false,
      text: '一周内Top5不良：',
      x: '2%',
      y: '4%',
      textStyle: {
        color: '#d8d7d9',
        fontSize: '18'
        // fontWeight: 'lighter'
      },
      subtextStyle: {
        color: '#90979c',
        fontSize: '16'

      }
    },
    grid: {
      left: '2%',
      right: '2%',
      bottom: '0%',
      top: '10%',
      containLabel: true
    },
    xAxis: {
      show: false
    },
    yAxis: [
      {
        show: true,
        data: titlename,
        inverse: true,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          // color: '#d8d7d9',
          color: '#fff',
          fontSize: 14,
          formatter: function(value, index) {
            return [
              '{lg|' + (index + 1) + '、   }' + '{title|' + value + '} '
            ].join('\n')
          },
          rich: {
            lg: {
              // backgroundColor: '#339911',
              // color: '#d8d7d9',
              color: '#fff',
              borderRadius: 15,
              // padding: 5,
              align: 'center',
              width: 15,
              height: 15
            }
          }
        }
      },
      {
        show: false,
        inverse: true,
        data: valdata,
        axisLabel: {
          textStyle: {
            fontSize: 12,
            color: '#fff'
          }
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        }

      }
    ],
    series: [
      {
        name: '条',
        type: 'bar',
        yAxisIndex: 0,
        data: data,
        barWidth: 22,
        itemStyle: {
          normal: {
            barBorderRadius: 30,
            color: function(params) {
              // const num = myColor.length
              // return myColor[params.dataIndex % num]
              return myColor[params.dataIndex]
            }
          }
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            formatter: '{c}',
            fontSize: 14,
            color: '#fff'
            // formatter: '{c}%',
          }
        }
      }
    ]
  }

  return option
}

// 仓库管理看板图   （弃用）
export function bar03(titleText) {
  const path = 'path://M214,1079l8-6h16l8,6-8,6H222Z'
  const zzx1 = ['800', '900', '700', '300', '500', '800', '700']
  const wgx1 = ['700', '600', '500', '400', '300', '333', '222']
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      show: false,
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      },
      formatter: function(e) {
        if (e.length > 1) {
          var S = e[1].data - e[0].data
          return e[0].axisValue + ':<br>差额=当前－年初<br>=' + S
        } else if (e.length = 1) {
          return e[0].axisValue + ':<br>' + e[0].seriesName + '=' + e[0].data
        }
      }
    },
    title: {
      text: titleText,
      x: '66%',
      y: '2%',
      textStyle: {
        // color: '#fff',
        color: '#00ffff',
        fontSize: '18',
        fontWeight: 'lighter'
      },
      subtextStyle: {
        color: '#90979c',
        fontSize: '16'
      }
    },
    grid: {
      left: '4%',
      right: '4%',
      bottom: '4%',
      top: '15%',
      containLabel: true
    },
    legend: {
      data: ['title1', 'title2'],
      left: 220,
      top: 10,
      textStyle: {
        color: '#00ffff',
        fontSize: 14
      },
      itemWidth: 12,
      itemHeight: 10,
      itemGap: 35,
      color: '#242424'
    },
    xAxis: {
      type: 'category',
      data: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      axisLine: {
        lineStyle: {
          show: true,
          lineStyle: {
            color: '#6A989E'
          }
        }
      },
      axisLabel: {
        // interval: 0,
        // rotate: 40,
        textStyle: {
          fontFamily: 'Microsoft YaHei',
          color: '#fff', // x轴颜色
          fontWeight: 'normal',
          fontSize: '14',
          lineHeight: 22
        }
      }
      // splitLine:{
      //     show:true,
      //     lineStyle: {
      //         type: 'dashed',
      //         color: 'rgba(135,140,147,0.8)'
      //     }
      // },
    },
    yAxis: {
      type: 'value',
      name: '数量（单位：个）',
      nameTextStyle: {
        color: '#ffffff'
      },
      axisLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(135,140,147,0.8)'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(135,140,147,1)' // 左侧显示线
        }
      },
      axisLabel: {
        formatter: '{value}',
        color: '#fff',
        fontSize: 14
      }
    },
    series: [
      {
        type: 'pictorialBar',
        symbol: path,
        symbolSize: [30, 8],
        symbolOffset: [-18, -4],
        symbolPosition: 'end',
        z: 12,
        color: '#3440FF',
        data: zzx1
      },
      {
        type: 'pictorialBar',
        symbol: path,
        symbolSize: [30, 8],
        symbolOffset: [18, -4],
        // symbolOffset: [20, -5],
        symbolPosition: 'end',
        z: 12,
        color: '#FF1155',
        data: wgx1
      },
      {
        type: 'pictorialBar',
        symbol: path,
        symbolSize: [30, 8],
        symbolOffset: [-18, 4],
        z: 12,
        color: 'rgba(126,192,238,0.6)',
        data: zzx1
      },
      {
        name: '',
        type: 'pictorialBar',
        symbol: path,
        symbolSize: [30, 8],
        // symbolOffset: [20, 4],
        symbolOffset: [18, 4],
        color: '#FFC0CB',
        z: 12,
        data: wgx1
      }, {
        name: 'title1',
        type: 'bar',
        barWidth: '30',
        itemStyle: {
          normal: {
            opacity: 0.7,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'blue'
            }, {
              offset: 1,
              color: '#7EC0EE'
            }]),
            barBorderRadius: 0
          }

        },
        label: {
          show: true,
          // position: ['-18','-18'],
          position: 'top',
          color: '#00f8ff',
          fontSize: 12
        },
        data: zzx1
      },
      {
        name: 'title2',
        type: 'bar',
        barWidth: '30',
        itemStyle: {
          normal: {
            opacity: 0.7,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#FF2246'
            }, {
              offset: 1,
              color: '#FFC0CB'

            }]),
            barBorderRadius: 0
          }

        },
        label: {
          show: true,
          // position: ['18','-18'],
          position: 'top',
          color: '#00f8ff',
          fontSize: 12
        },
        data: wgx1
      }
    ]
  }

  return option
}

// 采购订单图
export function pie01() {
  const option = {
    backgroundColor: 'transparent',
    title: {
      text: '60.21%',
      x: 'center',
      y: 'center',
      textStyle: {
        fontWeight: 'normal',
        color: '#fff',
        fontSize: 18
      }
    },
    color: ['rgba(176, 212, 251, 1)'],
    legend: {
      show: false,
      itemGap: 12,
      data: ['01', '02']
    },

    series: [
      {
        name: 'Line 1',
        type: 'pie',
        clockWise: true,
        radius: ['50%', '66%'],
        itemStyle: {
          normal: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        hoverAnimation: false,
        data: [
          {
            value: 80,
            name: '01',
            itemStyle: {
              normal: {
                color: { // 完成的圆环的颜色
                  colorStops: [{
                    offset: 0,
                    color: '#24d3ff' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#5580fe' // 100% 处的颜色
                  }]
                },
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            }
          },
          {
            name: '02',
            value: 20
          }
        ]
      }]
  }
  return option
}