5

I'm trying to make an horizontal histogram with y labels on top of each bar with the really nice libray echarts. Here is an example:

enter image description here

Here is where I am with this jsfiddle https://jsfiddle.net/795f84o0/6/ :

enter image description here

Echarts documentation is really good but I did not found a way to put these labels (sankey, funnel, gauge....) on top on each bar :/

Do you have any idea how I can do it? Thank you for your help!

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);
mogo
  • 380
  • 3
  • 11

1 Answers1

7

All right, I got it after two hours...

Just posting a screenshot to show the result:

enter image description here

The fiddle and the code :

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);
mogo
  • 380
  • 3
  • 11
  • Just wanna say thank you, clever solution in my opinion. I had been looking for ways of doing this. Strange that is not an option when they offer the option to add background to the empty space. – Gustavo Sanchez Dec 28 '22 at 15:33