如何在echarts中的每个单杠上方放置label？

Question

我正在尝试使用非常好的 libray echarts 在每个条形图的顶部制作一个带有 y 标签的水平直方图。这是一个例子：

这是我使用这个 jsfiddle 的地方 https://jsfiddle.net/795f84o0/6/ :

Echarts 文档非常好，但我没有找到将这些标签（sankey、funnel、gauge...）放在每个条形图顶部的方法：/

你知道我该怎么做吗？感谢您的帮助！

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

var builderJson = {
  "all": 10887,
  "charts": {
    "map": 3237,
    "lines": 2164,
    "bar": 7561,
    "line": 7778,
    "pie": 7355,
    "scatter": 2405,
    "candlestick": 1842,
    "radar": 2090,
    "heatmap": 1762,
    "treemap": 1593,
    "graph": 2060,
    "boxplot": 1537,
    "parallel": 1908,
    "gauge": 2107,
    "funnel": 1692,
    "sankey": 1568
  },
  "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
};


option = {
    xAxis: [{
        type: 'value',
        max: builderJson.all,
    }],
    yAxis: [{
        data: Object.keys(builderJson.charts),
        axisLabel: {
            show: false,
        },
    },
    {
        data: Object.keys(builderJson.charts),
        axisLabel: {
            show: true,
        },
    },
    ],
    series: [{
        type: 'bar',
        data: Object.keys(builderJson.charts).map(function (key) {
            return builderJson.charts[key];
        })
    }]
};

option && myChart.setOption(option);

Answer 1

好的，两个小时后我搞定了...

只是张贴截图以显示结果：

The fiddle 和代码：

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

var builderJson = {
  "all": 100,
  "charts": {
    "pie": 1,
    "scatter": 1,
    "candlestick": 1,
    "radar": 2,
    "heatmap": 3,
    "treemap": 6,
    "graph": 7,
    "boxplot": 7,
    "parallel": 8,
    "gauge": 9,
    "funnel": 15,
    "sankey": 30
  },
};


option = {
    xAxis: [{
        type: 'value',
        max: builderJson.all,
        axisLabel: {
            show: false,
        },
        splitLine: {
            show: false
        }
    },
     ],
    yAxis: [{
        data: Object.keys(builderJson.charts),
        axisLabel: {
            show: false,
        },
        splitLine: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false,
        }
    },
    ],
    series: [{
        type: 'bar',
        stack: 'chart',
        barCategoryGap: 30,
        barWidth: 20,
        label: {
            position: [0, -14],
          formatter: '{b}',
          show: true
        },
        itemStyle: {
            borderRadius: [0, 2, 2, 0],
        },
        data: Object.keys(builderJson.charts).map(function (key) {
            return builderJson.charts[key];
        })
    },
     {
        type: 'bar',
        stack: 'chart',
        barCategoryGap: 30,
        barWidth: 20,
        itemStyle: {
            color: 'whitesmoke'
        },
        label: {
            position: 'insideRight',
          formatter: function(params) { return 100 - params.value + '%'},
          show: true
        },
        data: Object.keys(builderJson.charts).map(function (key) {
            return builderJson.all - builderJson.charts[key];
        })
    }
    ]
};

option && myChart.setOption(option);

如何在echarts中的每个单杠上方放置label？

How to place label on top of each horizontal bar in echarts?

echarts