Echart 柱状图 上下左右值显示

var mychart =  echarts.init(document.getElementById("mychart6"))

      var labelleft = {
        normal: {
          position: 'left'
        }
      };
      var labelRight = {
        normal: {
          position: 'right'
        }
      };
      //负轴样式
      var itemStyle1 = {
        normal: {
          color: new echarts.graphic.LinearGradient(
            1,
            0,
            0,
            0,
            [
              {
                offset: 0,
                color: '#9BE5E5' //  0%  处的颜色
              },
              {
                offset: 1,
                color: '#37CBCB' //  100%  处的颜色
              }
            ],
            false
          ),
          label: {
            show: true, //开启显示
            position: 'top', //在上方显示
            textStyle: {
              //数值样式
              color: '#687284',
              fontSize: 9
            }
          }
        }
      };
      //正轴样式
      var itemStyle2 = {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              {
                offset: 0,
                color: '#9BE5E5' //  0%  处的颜色
              },
              {
                offset: 1,
                color: '#37CBCB' //  100%  处的颜色
              }
            ],
            false
          ),
          label: {
            show: true, //开启显示
            position: 'top', //在上方显示
            textStyle: {
              //数值样式
              color: '#687284',
              fontSize: 9
            }
          }
        }
      };
      var yData = ['优', '良', '中', '差']
      var sData = [
        { value: -0.07, label: labelleft, itemStyle: itemStyle1 },
        {
          value: -0.09,
          label: labelleft,
          itemStyle: itemStyle1
        },
        {
          value: 0.2,
          label: labelRight,
          itemStyle: itemStyle2
        },
        {
          value: 0.44,
          label: labelRight,
          itemStyle: itemStyle2
        }
      ]
      if (sData.length == 0) {
        this.myChartArr[5].mychart.setOption(getNoDataEchart())
        return
      }
      let option = {
        title: {
          text: '环比值：%',
          show: true,
          textStyle: {
            color: '#333',
            fontWeight:'normal',
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            //  坐标轴指示器，坐标轴触发有效
            show: false,
            type: 'shadow' //  默认为直线，可选为：'line'  |  'shadow'
          }
        },
        grid: {
          top: 30,
          left: 20,
          bottom: 30,
          right: 20,
          show: false
        },
        xAxis: {
          type: 'value',
          axisLine: { show: false },
          axisLabel: { show: true, color: 'rgba(153, 153, 153, 1)' },
          axisTick: { show: false },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(220, 223, 230, 1)'
            }
          },
          position: 'left'
        },
        yAxis: {
          type: 'category',
          // name: '环比值：%',
          // nameLocation: 'end',
          show: true,
          position: 'left',
          axisLine: { show: false },
          axisLabel: { show: true, color: 'rgba(153, 153, 153, 1)' },
          axisTick: { show: false },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(220, 223, 230, 1)'
            }
          },
          data: yData
        },
        series: [
          {
            name: '园区评价等级环比分析',
            type: 'bar',
            stack: '总量',
            barWidth: 30,
      
            data: sData
          }
        ]
      };
      mychart.setOption(option)

 

var mychart = echarts.init(document.getElementById("mychart7"))
      var xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      var data = [3, -6, 1, 6, -4, 3, -2];
      var sdd = [];
      var labeltop = {
        normal: {
          position: 'top'
        }
      };
      var labelbottom = {
        normal: {
          position: 'bottom'
        }
      };
      //负轴样式
      var itemStyle1 = {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: '#4ECB73' //  0%  处的颜色
              },
              {
                offset: 1,
                color: '#A7E5B9' //  100%  处的颜色
              }
            ]),
          normal: {
            //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
            barBorderRadius: [0, 0, 4, 4]
          },
          label: {
            show: true, //开启显示
            position: 'top', //在上方显示
            textStyle: {
              //数值样式
              color: '#687284',
              fontSize: 9
            }
          }
        }
      };
      //正轴样式
      var itemStyle2 = {
        normal: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                offset: 0,
                color: '#4ECB73'
              },
              {
                offset: 1,
                color: '#A7E5B9'
              }
            ]),
          label: {
            show: true, //开启显示
            position: 'top', //在上方显示
            textStyle: {
              //数值样式
              color: '#687284',
              fontSize: 9
            }
          }
        }
      };
      data.forEach((v, i) => {
        if (v < 0) {
          sdd.push({
            value: v,
            label: labelbottom,
            itemStyle: itemStyle1
          })
        } else {
          sdd.push({
            value: v,
            label: labeltop,
            itemStyle: itemStyle2
          })
        }
      });
      if(sdd.length == 0) {
        this.myChartArr[6].mychart.setOption(getNoDataEchart())
        return
      }
      var option = {
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisTick: {
            show: false //去除刻度线
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#ccc'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '环比值：%',
          splitLine: {
            lineStyle: {
              type: 'dashed'
            },
            show: true
          },
          axisTick: {
            show: false //去除刻度线
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000'
            }
          }
        },
        grid: {
          top: 30,
          left: 50,
          right: 20,
          bottom: 50
        },
        dataZoom: [
            {
              xAxisIndex: 0, //这里是从X轴的0刻度开始
              show: true, //是否显示滑动条，不影响使用
              type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
              start: 0,
              end: 100,
              height: 16, //组件高度
              bottom: 10,
              zoomLock: false,
              showDataShadow: false, //是否显示数据阴影 默认auto
              realtime: true, //是否实时更新
              showDetail: false,
              brushSelect: false, //刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
            },
        ],
        series: [
          {
            data: sdd,
            type: 'bar',
            barWidth: 30,
            showBackground: false,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)',
              borderWidth: 32,
              borderType: 'solid'
            },
          }
        ]
      };
      mychart.setOption(option)
      window.addEventListener('resize',() => {
        mychart.resize()
      })