echarts - 我想使用 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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187d7b70796a6c6b582c36203628" rel="noreferrer noopener nofollow">[email protected]</a>/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>