echarts坐标轴的axisLabel可以加padding吗？柱状图的柱间距怎么调整呢？

Question

想通过改造柱状图实现如下效果

目前做到下面这个样子，y轴axisLabel设置inside:false就可以把文字翻转过去了，但是呢，文字跟柱状图重叠在一起的，于是我不知道怎么拉大柱状的距离，然后把文字拉到柱间的缝隙中去。研究了一下文档配置项，barGap 、barCategoryGap 要表达的都不是这个意思，山穷水尽的我只能来劳烦一下各位大佬了。

Answer 1

<template>
  <div style="height: 258px;overflow: auto;">
    <div id="myChart3" :style="{width: width, height:parseInt(height)*1.8+'px'}" style="margin: auto;top: -18px;"></div>
  </div>
</template>

<script>
  export default {
    mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(document.getElementById('myChart3'))
    },
    data() {
      return {
        myChart: null,
        legendData: [],
        seriesData: []
      }
    },
    props: {
      width: {
        type: String,
        default: '0'
      },
      height: {
        type: String,
        default: '0'
      },
      resultData: {
        type: Array,
        default: []
      },
    },
    watch: {
      width(val) {
        this.myChart.resize({
          width: "auto",
          height: "auto"
        });
        // console.log(val, "width");
      },
      height(val) {
        this.myChart.resize({
          width: "auto",
          height: "auto"
        });
        // console.log(val, "height");
      },
      resultData: {
        handler(val) {
          this.seriesData = []
          this.legendData = []
          val.forEach(item => {
            this.seriesData.push({
              name: item.range_name,
              value: item.val
            })
            this.legendData.push(item.range_name)
          })
          console.log(this.legendData, 'legendData', this.seriesData, 'seriesData');
          this.drawLine()
        },
        deep: true //为true，表示深度监听，这时候就能监测到a值变化
      }
    },
    methods: {
      drawLine() {
        var builderJson = {
          "all": 10887,
          "charts": {
            "map": 3237,
            "lines": 2164,
            "bar": 7561,
            "line": 7778,
            "pie": 7355,
            "scatter": 2405,
            "candlestick": 1842,
            "radar": 2090,
          },
          "components": {
            "geo": 2788,
            "title": 9575,
            "legend": 9400,
            "tooltip": 9466,
            "grid": 9266,
            "markPoint": 3419,
            "markLine": 2984,
            "timeline": 2739,
            "dataZoom": 2744,
            "visualMap": 2466,
            "toolbox": 3034,
            "polar": 1945
          },
          "ie": 9743
        };

        // 绘制图表配置
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          // title: [{
          //   text: '在线构建',
          //   textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
          //     fontSize: 18,
          //     fontFamily: "myFontBold",
          //     color: "#fff"
          //   },
          //   // subtext: '总计 ' + builderJson.all,
          //   left: '25%',
          //   textAlign: 'center'
          // }],
          grid: [{
            top: 75,
            width: '91%',
            // bottom: '45%',
            left: 5,
            // containLabel: true,
          }],
          title: {
            text: '服务活跃度排行(近一周)',
            left: 'left',
            top: '34px',
            textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
              fontSize: 15,
              color: "#fff"
            },
            // subtext: '纯属虚构'
          },
          xAxis: [{
            show: false,
            type: 'value',
            max: builderJson.all,
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#59BCFB'
              }
            },
          }],
          yAxis: [{
            type: 'category',
            data: Object.keys(builderJson.charts),
            offset:-8,
            axisLabel: {
              interval: 0,
              show:true,
              rotate: 0,
               // margin:12,
              textStyle: {
                color: '#fff', //坐标值得具体的颜色
                padding : [-35, 0, 0, 0],
                align:'left',
                fontSize: 14
              },
            },
            splitLine: {
              show: false
            },
            axisLine:{
              show:false
            }
          }],
          series: [{
            type: 'bar',
            stack: 'chart',
            barWidth: 10,
            itemStyle: {
              color: function(params) {
                let colors = ['#00FFFF', '#EE7C6E', '#CF68A4', '#F9CA57', '#59BCFB']
                return colors[params.dataIndex % 5]
              },
            },
            z: 3,
            label: {
              // position: 'insideTopLeft',
              position: [parseInt(this.width)*0.85+25, -19],
              align:'right',
              // distance:-10,
              show: true,
              fontSize: 14
            },
            data: Object.keys(builderJson.charts).map(function(key) {
              return builderJson.charts[key];
            })
          }, {
            type: 'bar',
            stack: 'chart',
            silent: true,
            itemStyle: {
              color: '#25496c'
            },
            data: Object.keys(builderJson.charts).map(function(key) {
              return builderJson.all - builderJson.charts[key];
            })
          }]
        };
        this.myChart.resize({
          width: "auto",
          height: "auto"
        });
        this.myChart.setOption(option);
      }
    }
  }
</script>

<style>
</style>
 

Answer 2

你好，我想知道echarts进度条怎么做的，能贴上代码吗

Answer 3

上午发的问题，下午就来打脸了。之前一直想着去改坐标轴的label，看了官网的几个demo，又翻了一下配置项文档，后来发现，可以通过series的label去实现呀。然后柱间距的问题，把div高度拉大就行了，呵呵哒