Echart: как установить область маркировки для заполнения секций в xAxis

Question

У меня проблема с областью маркировки: мне нужно иметь возможность выбрать область стержня на основе xAxis, например, от 0 до 1, от 1 до 2 и т. Д. c. Но когда я пытаюсь предоставить параметры для бара, например

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

, он отмечает область от середины области xAxis с индексом от 0 до середины области xAxis с индексом 1. Есть ли способ сделать его отметкой от начала области до конца. В настоящее время мне удалось сделать это только с параметром x в пикселях: https://codesandbox.io/s/react-echart-markarea-ksj31?file= / src / index. js: 714-726

Есть ли лучший способ сделать это?

Answer 1

Я не могу представить метод, который бы отвечал вашим требованиям. Кажется, что такого нет, но ничто не мешает сделать это самим, см. Ниже.

Когда функция вызова с join = true отмечена как Area, будет c иметь диапазон от первого до последнего.

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

При вызове функции с join = false отмеченная область будет вызывать c для каждого бара.

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/echarts@4.7.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

Answer 2

Я нашел решение, которое сработало для меня: по сути, вам нужно вручную установить максимальное количество реквизитов yAxis, добавить еще один xAxis, сделать его невидимым, создать собственную серию с типом 'bar' и установить для xAxisIndex значение 1:

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

И стиль панели по индексу с цветом фона и borderWidth Вы можете проверить рабочий пример здесь https://codesandbox.io/s/react-echart-markarea-m0mgq?file= / src / index. js