CODEWITHSUNDEEP
javascriptecharts
user1929437
user1929437

Reputation: 473

Echart: How to set mark area to fill sections in xAxis

I have a problem with marking area: i need to be able to select a bar area based on xAxis, for example from 0 to 1, from 1 to 2, etc. But when i try to provide options for bar like

[{xAxis: 0, itemStyle: {color: red}},{xAxis: 1}]

it marks an area from a middle of xAxis area with an index of 0 to a middle of xAxis area with an index of 1. Is there a way to make it mark from start of an area to an end. Currently i managed to do so only with x option in pixels: https://codesandbox.io/s/react-echart-markarea-ksj31?file=/src/index.js:714-726

Is there a better way to do it?

Upvotes: 1

Views: 6692

Answers (2)

user1929437
user1929437

Reputation: 473

I found a solution, that worked for me: Basically, you need to manually set yAxis's max props, add another xAxis, make it invisible, create a custom series with type 'bar' and set xAxisIndex to 1:

data: [maxYaxisValue,maxYaxisValue...], //length === xAxis.data.length
type: 'bar',
barWidth: '100%',
color: transparent,
xAxisIndex: 1,

And style a bar by index with background color and borderWidth You can check the working example here https://codesandbox.io/s/react-echart-markarea-m0mgq?file=/src/index.js

Upvotes: 0

Sergey Fedorov
Sergey Fedorov

Reputation: 4430

I can't imagine a method that would cover your requirements. It seems there is no such but nothing prevents to do it ourselves, see below.

When call function with join = true markedArea will calc as range from first to last.

calcMarkAreaByBarIndex(myChart, join = true, [4, 9])

When call function with join = false markedArea will calc for each bar.

calcMarkAreaByBarIndex(myChart, join = true, [4, 5, 6, 9])


  var myChart = echarts.init(document.getElementById('main'));
 
  var option = {
      tooltip: {},
      xAxis: {
    		data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
		  },
      yAxis: {},
      series: [
      	{
        	id: 'myBar',
        	name: 'Series',
        	type: 'bar',
        	data: [11, 11, 11, 11, 12, 13, 110, 123, 113, 134, 93, 109],
          markArea: {
          	data: [
            	[{x: 184},{x: 216}],
            	[{x: 224},{x: 256}],
             ]
      	},
      },
  	]
  };
     
  myChart.setOption(option);
  
  function calcMarkAreaByBarIndex(chartInstance, join = false, barIdx){
 	var series = chartInstance.getModel().getSeriesByType('bar');
 	var seriesData = series.map((s, idx) => s.getData())[0];
    var barNum = seriesData.count();
    var barCoors = [];
    var layout = idx => seriesData.getItemLayout(idx);
    
		for(var i = 0; i < barNum; i++){
    	if(!barIdx.includes(i)) continue;
    	barCoors.push([
      	{ x: layout(i).x },
        { x: layout(i).x + layout(i).width },
      ])
    }
    
    if(join){
    	return [
      	[
        	{ x: barCoors[0][0].x },
        	{ x: barCoors[barCoors.length - 1][1].x }
        ]
      ]
    } else {
    	return barCoors
    }
 	}
  
  var markedAreas = {
  	series: {
    	id: 'myBar',
      markArea: {
      	data: calcMarkAreaByBarIndex(myChart, join = true, [4,9])
      }
     }
   };
  
  myChart.setOption(markedAreas);
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

Upvotes: 4

Related Questions