我想使用echarts在栏顶部显示蓝色

Question

如何仅在栏顶部显示边框，如图所示。下面的代码可以工作，但它的所有边都显示边框。我正在使用echarts

   type: 'bar',
      itemStyle: {
        normal: {
          barBorderRadius: 0,
          borderColor: "rgba(0,170,255,0.8)",   
          borderWidth: [1],
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              // dark blue dbf3ff (light) 00acff (dark)
              { offset: 0, color: '#dbf3ff' },
              // light blue
              { offset: 1, color: 'rgba(0, 172, 255, 0)' },
            ],
          }}},

Answer 1

Echarts 没有样式来控制栏的每个边框。为了实现所需的效果，您可以制作下面的第二个系列，并将其与堆栈连接到第一个系列，并且不要忘记隐藏工具提示。看例子：

  var myChart = echarts.init(document.getElementById('main'));
  var option = {
    tooltip: {},
    animation: false,
    xAxis: {
      data: ["Category1", "Category2", "Category3", "Category4", "Category5", "Category6"]
    },
    yAxis: {},
    series: [{
        name: 'Series',
        stack: 'yes',
        type: 'bar',
        color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#dbf3ff' },
              { offset: 1, color: 'rgba(0, 172, 255, 0)' },
            ],
          },
        data: [5, 20, 36, 10, 10, 20]
      },
      {
        name: 'topBorder',
        stack: 'yes',
        type: 'bar',
        color: '#00acff',
        data: [0.5, 0.5, 0.5, 0.5, 0.5, 0.5],
        tooltip: { show: false }
      }
    ]
  };

  myChart.setOption(option);

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

Answer 2

我用echarts找到了另一个解决方案！使用 react-native-echarts

进行测试

图像预览

关键代码是 renderItem 和 custom type

const getSeriesConfigTopBorder = (name: string, datasetIndex: number) => {
  return {
    name: name,
    yAxisIndex: 0,
    type: 'custom',
    renderItem: (params: any, api: any) => {
      const typeValue = api.value(3);
      const yValue = api.value(2);
      const start = api.coord([api.value(0), yValue]);
      const size = api.size([api.value(1) - api.value(0), yValue]);
      let style: any = {}; // api.style() // https://github.com/apache/echarts/issues/16514#issuecomment-1041032731
      switch (typeValue) {
        case PriceType.SHARP:
          style.fill = '#3bce76';
          break;
        case PriceType.PEAK:
          style.fill = '#ffc225';
          break;
        case PriceType.OFF_PEAK:
          style.fill = '#e50113';
          break;
        case PriceType.VALLEY:
          style.fill = '#2f6ce0';
          break;
      }
      style = {
        ...style,
        lineWidth: 0,
        stroke: 'transparent',
      };
      return {
        type: 'rect',
        shape: {
          x: start[0],
          y: start[1],
          width: size[0],
          height: 1,
        },
        style: style,
      };
    },
    // data: data,
    datasetIndex: datasetIndex,
    encode: {
      x: ['TIME_START', 'TIME_END'],
      y: 'VALUE',
      itemId: 'STATUS',
      tooltip: [],
      itemName: 'STATUS',
    },
  };
};