Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to get the barWidth after init chart?

I have bar chart prepare with eCharts Apache. eCharts set barWidth to fill whole chart container. I can change barWidth but I want to use auto width. How can I get the barWidth after initialization?

I checked getOption, but I cant find there this information.

Tags:

2

Answers


  1. 0

    You can find the item layouts in the chart object itself.

    Example:

    option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
    }
  ]
};

console.log(Object.values(myChart._chartsMap)[0]._data._itemLayouts)

    In the given example its under _chartsMap["_ec_u0000seriesu00000u00000_series.bar"]._data._itemLayouts.

    Login or Signup to reply.
  2. 0

    You can use barWidth to change the width of the bar. For instance:

    var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
  renderer: 'canvas',
  useDirtyRect: false
});
var app = {};

var option;

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      barWidth:""
    }
  ]
};

if (option && typeof option === 'object') {
  myChart.setOption(option);
  
}

window.addEventListener('resize', myChart.resize);
var domSelect=document.querySelector("select[name='set_bar_width']");
var domDebug=document.querySelector("#debug_bar_width");
// if you want to get width in px you need some hacks 
// i'll show you how to get it because i dont know what is your real goal
// but  in my opinion since you can set the width at your wish
// this is pretty useless 
domDebug.innerText=myChart._chartsViews[0]._data._itemLayouts[0].width;
//============================================
domSelect.addEventListener(
  'change', 
  (e)=>{
    option.series[0].barWidth=domSelect.value;
    myChart.setOption(option);
    //same as above:
    domDebug.innerText=myChart._chartsViews[0]._data._itemLayouts[0].width;
  }
);
    * {
  margin: 0;
  padding: 0;
}
#chart-container {
  position: relative;
  height: 80vh;
  overflow: hidden;
}
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Basic Bar - Apache ECharts Demo</title>
</head>
<body>
  <div id="chart-container"></div>
  <div id="controller">
    <div class="field">
      <label>Set Bar width</label>
      <select name="set_bar_width">
        <option value="0">select one</option>
        <option value="10%">10%</option>
        <option value="20%">20%</option>
        <option value="40%">40%</option>
        <option value="50px">50px</option>
        <option value="200px">200px</option>
      </select>
      
    </div>
    <br>
    <div class="field">
      <label>Get Bar width:</label>
      <span id="debug_bar_width"></span>
      
    </div>
  </div>
  <script src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search