1.修改品质异常排行echarts图2.调整收搜栏顶部与按钮对齐

loulijun2021

2022-09-23 699b2c16fe39f8a38f104f29b343bd06d1e53e82

 src/views/bbgl/pzyc.vue

@@ -1,8 +1,11 @@
<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">
      <div style="margin: 30px auto;width: 1600px;" :style="{height:mainHeight+'px'}">
      <div style="margin: 10px auto;width: 1680px;background-color: #fff" :style="{height:mainHeight+'px'}">

        <div style="margin: 20px auto;width: 1600px" :style="{height:(mainHeight-60)+'px'}">
        <div id="Echarts" style="width: 100%;height: 100%" />
        </div>
      </div>
    </div>
  </div>
@@ -50,12 +53,13 @@
          textAlign: 'center',
          textStyle: {
            // color: '#fff',
            color: '#00ffff',
            color: '#000',
            fontSize: '20',
            fontWeight: 'bolder'
          }
        },
        backgroundColor: '#323a5e',
        // backgroundColor: '#323a5e',
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
@@ -69,29 +73,36 @@
          top: '15%',
          containLabel: true
        },
        legend: {
          data: ['1', '2', '3'],
          right: 10,
          top: 12,
          textStyle: {
            color: '#fff'
          },
          itemWidth: 12,
          itemHeight: 10
          // itemGap: 35
        },
        // legend: {
        //   data: ['1', '2', '3'],
        //   right: 10,
        //   top: 12,
        //   textStyle: {
        //     color: '#fff'
        //   },
        //   itemWidth: 12,
        //   itemHeight: 10
        //   // itemGap: 35
        // },
        xAxis: {
          name: '种类',
          nameTextStyle: {
            // color: ,
            color: '#000',
            fontSize: 16,
            lineHeight: 20
          },
          type: 'category',
          data: this.echartsData.map(r => r.name),
          splitLine: {
            show: false
          },
          axisTick: {
            show: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'white'
              color: '#000'
            }
          },
          axisLabel: {
@@ -99,6 +110,7 @@
            rotate: 20,
            textStyle: {
              fontSize: 16,
              color: '#000',
              fontFamily: 'Microsoft YaHei'
            }
          }
@@ -106,25 +118,37 @@
        yAxis: {
          name: '数量',
          nameTextStyle: {
            // color: ,
            color: '#000',
            fontSize: 16,
            lineHeight: 20
          },
          type: 'value',
          // max: '1200',
          axisTick: {
            show: true
          },
          axisLine: {
            show: false,
            show: true,
            lineStyle: {
              color: 'white'
              color: '#000'
            }
          },
          splitLine: {
            show: true,
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
              // color: 'rgba(255,255,255,0.3)'
              color: '#000'
            }
          },
          axisLabel: {}
          axisLabel: {
            // interval: 0,
            // rotate: 20,
            textStyle: {
              fontSize: 16,
              color: '#000',
              fontFamily: 'Microsoft YaHei'
            }
          }
        },
        dataZoom: [{
          show: true,
@@ -138,21 +162,24 @@
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '110%',
          handleStyle: {
            color: '#d3dee5'

            // color: '#d3dee5'
            color: '#000'
          },
          textStyle: {
            color: '#fff'
            color: '#000'
          },
          borderColor: '#90979c'

          // borderColor: '#90979c'
          borderColor: '#000',
          fillerColor: `rgba(42, 197, 137, 0.1)`
        }, {
          type: 'inside',
          show: true,
          height: 15,
          start: 1,
          end: 35
        }],

        }
        ],
        series: [{
          name: '数量',
          type: 'bar',
@@ -161,10 +188,12 @@
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#fccb05'
                // color: '#fccb05'
                color: `rgba(42, 197, 137, 1)`// 0% 处的颜色
              }, {
                offset: 1,
                color: '#f5804d'
                color: `rgba(187, 236, 218, 1)` // 100% 处的颜色
                // color: '#f5804d'
              }]),
              barBorderRadius: 12
            }
@@ -186,7 +215,6 @@
          //         }]),
          //         barBorderRadius: 11,
          //     }

          //   },
          //   data: [400, 500, 500, 500, 500, 400,400, 500, 500]
          // },