ECharts 中给每根柱子加上边框

21 min read

要给ECharts中的每根柱子加上边框,可以使用itemStyle和emphasis来设置样式。

首先,通过itemStyle设置柱子的边框颜色和线宽。例如,可以将每根柱子的边框颜色设置为红色,线宽设置为2像素。

itemStyle: {
  borderColor: 'red',
  borderWidth: 2
}

然后,通过emphasis来设置鼠标悬停时柱子的样式。同样,可以设置其边框的颜色和线宽。

emphasis: {
  itemStyle: {
    borderColor: 'blue',
    borderWidth: 2
  }
}

下面是一个完整的示例:

option = {
  // ... 其他配置项

  series: [{
    type: 'bar',
    data: [10, 20, 30, 40, 50, 60],
    itemStyle: {
      borderColor: 'red',
      borderWidth: 2
    },
    emphasis: {
      itemStyle: {
        borderColor: 'blue',
        borderWidth: 2
      }
    }
  }]
};

通过以上设置,每根柱子都会有一个红色的边框,鼠标悬停时会变为蓝色的边框。