Echart：如何设置标记区域以填充 xAxis 中的部分

Question

我在标记区域时遇到问题：我需要能够基于 xAxis 选择一个条形区域，例如从 0 到 1、从 1 到 2 等。但是当我尝试为条形提供选项时[{xAxis: 0, itemStyle: {color: red}},{xAxis: 1}]它标记一个区域，从索引为 0 的 xAxis 区域的中间到索引为 1 的 xAxis 区域的中间。有没有办法让它从一个区域的开始标记到结束。目前我设法只使用像素中的 x 选项这样做： https ://codesandbox.io/s/react-echart-markarea-ksj31?file=/src/index.js:714-726有更好的方法吗？

Answer 1

我无法想象有一种方法可以满足您的要求。似乎没有这样的，但没有什么可以阻止我们自己做，见下文。

当调用带有join = true标记区域的函数时，将计算从第一个到最后一个的范围。

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

当调用带有标记区域的函数时，join = false将为每个柱计算。

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,

并使用背景颜色和边框宽度按索引设置条形您可以在此处查看工作示例 https://codesandbox.io/s/react-echart-markarea-m0mgq?file=/src/index.js