1.优化项目2.综合看板静态页面初步实现

loulijun2021

2022-07-29 32ec691abab0c837f34ce2c4908a40a10b9dbec7

 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,127 @@

  return option
}

// 综合看板图
export function bar02() {
  const data = [70, 60, 50, 40, 30]

  const titlename = ['外观划伤', '表面油污', '尺寸', '颜色', '大小']
  const valdata = [683, 500, 400, 300, 200]
  const myColor = ['#FF0000', '#FF5511', '#FF8800', '#FFBB00', '#FFFF00']
  const option = {
    backgroundColor: 'transparent',
    title: {
      text: 'Top5不良',
      x: 'center',
      y: '4%',
      textStyle: {
        color: '#fff',
        fontSize: '22'
      },
      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: '#fff',
          fontSize: 14,
          formatter: function(value, index) {
            return [
              '{lg|' + (index + 1) + '、   }' + '{title|' + value + '} '
            ].join('\n')
          },
          rich: {
            lg: {
            // backgroundColor: '#339911',
              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
}