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)' },
            ],
          }}},

标签： echarts

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