更改Echarts中标记区域内烛台的颜色

Question

我使用 Echarts 5.4.3 版本创建了一个烛台图。我创建了 0-10 和 30-40 之间的 2 个标记区域。我想将标记区域内的烛台设为红色，如下所示： 这是我的代码：

option = {
  xAxis: {
    data: ['A', 'B', 'C']
  },
  yAxis: {},
  visualMap: [
      {
        show: true,
        type: 'piecewise',
        seriesIndex: 0,
        pieces: [
          {
            gt: 40,
            color: '#c37976',
            color0: "#c37976",
            borderColor: undefined,
            borderColor0: undefined
          },
          {
            gt: 10,
            lte: 30,
            color: '#808080',
            color0: "#808080",
            borderColor: undefined,
            borderColor0: undefined
          },
          {
            lte: 10,
            color: '#c37976',
               color0: "#c37976",
            borderColor: undefined,
            borderColor0: undefined
          }
        ]
      }
    ],
  series: [{
      type: 'candlestick',
      data: [
        [38, 15, 38, 15],
        [40, 20, 40, 30],
        [0, 15, 0, 15],
      ],
       itemStyle: {
            color: "#808080",
            color0: "#808080",
            borderColor: undefined,
            borderColor0: undefined
          },
       markArea: {
        itemStyle: {
          color: 'rgba(255, 173, 177, 0.4)'
        },
        data: [
          [
            {
              yAxis: 40
            },
            {
              yAxis: 30
            }
          ],
          [
            {
              yAxis: 0,
            },
            {
              yAxis: 10
            }
          ]
        ]
      }
  }
      ],
        graph: {
    color : "rgb(128,128,128)",
  }
  
};

你能帮我吗？ 提前非常感谢您。

我尝试使用可视化地图，但它不起作用。

Answer 1

VisualMaps 并不像你想象的那样工作。如果满足条件，则视觉映射将应用于整个系列项目，而不仅仅是满足条件的部分。

我认为实现您想要做的事情的最佳方法是以下：

• 使用多个堆叠条系列
• 第一个系列代表 0 和数据项开头之间的空格
• 第二个系列代表下层markedArea内数据项的空间（如果有的话）
• 第三个系列表示标记区域之间数据项的空间
• 第四个系列代表数据项在上markedArea（如果有）内的空间

每个系列都可以通过这种方式单独设计。这是一个示例：

const lowerBound = 10;
const upperBound = 30;
const dataRanges = [[15, 38], [20, 40], [0, 15]];

// compute data array for each series
// 1. invisable utility bar such that visable bars start at their respective start value
// 2. part of the bar which is under lowerBound
// 3. part of the bar which is inbetween lowerBound and upperBound
// 4. part of the bar which is above upperBound
function computeData(dataRanges) {
  const data = [[], [], [], []];
  
  for (const range of dataRanges) {
    const data1 = range[0];
    data[0].push(data1);
    
    let data2 = 0;
    if (range[0] < lowerBound) {
      data2 = lowerBound - range[0];
    }
    data[1].push(data2);
    
    let data3 = Math.min(upperBound, range[1]) - Math.max(lowerBound, range[0]);
    data[2].push(data3);
    
    let data4 = 0;
    if (range[1] > upperBound) {
      data4 = range[1] - upperBound;
    }
    data[3].push(data4);
  }
  
  return data;
}

const data = computeData(dataRanges);

option = {
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C']
  },
  yAxis: {
    type: 'value'
  },

  series: [
    {
      name: 'starting point',
      type: 'bar',
      stack: 'stack',
      itemStyle: {
        borderColor: 'transparent',
        color: 'transparent'
      },
      silent: true,
      data: data[0],
      markArea: {
        itemStyle: {
          color: 'rgba(255, 173, 177, 0.4)'
        },
        data: [
          [{yAxis: 40}, {yAxis: upperBound}],
          [{yAxis: 0}, {yAxis: lowerBound}]
        ]
      }
    },
    {
      name: 'lower bound',
      type: 'bar',
      stack: 'stack',
      data: data[1],
      itemStyle: {color: '#c37976'}
    },
    {
      name: 'inbetween',
      type: 'bar',
      stack: 'stack',
      data: data[2],
      itemStyle: {color: '#808080'}
    },
    {
      name: 'upper bound',
      type: 'bar',
      stack: 'stack',
      data: data[3],
      itemStyle: {color: '#c37976'}
    }
  ]
};

请注意，当前的实现仅适用于> = 0的数据项，如果您想使用tooltip，您可能会遇到困难（这可以通过添加更多实用程序系列来解决）。