ECharts 修改背景格子线条的颜色

充芷珊

于 2021-10-14 09:34:55 发布

阅读量4.6k

点赞数 1

分类专栏： ECharts 文章标签： echarts

本文链接：https://blog.csdn.net/czz0724/article/details/120757255

版权

ECharts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在ECharts中修改Y轴和X轴的splitLine颜色，通过设置`yAxis.splitLine.lineStyle.color`和`xAxis.splitLine.lineStyle.color`属性，可以分别改变Y轴和X轴的刻度线颜色，从而个性化柱状图的视觉效果。示例代码展示了完整的配置过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刻度条颜色

先上大图

在轴位里加上 splitLine 对象即可

yAxis.splitLine.lineStyle

对象内输入他的线条样式

yAxis: {
    type: 'value',
    splitLine:{
      //设置条纹显示 柱状图默认yAxis(true)
      show:true,
      //设置lineStyle即可写入样式即可
      lineStyle:{
      //这里输入线条的样式
        color:'#000',
      }
    }
  },

全部代码

option = {
  yAxis: {
    type: 'value',
    splitLine:{
      //设置条纹显示 柱状图默认yAxis(true)
      show:true,
      //设置lineStyle即可写入样式即可
      lineStyle:{
        color:'#000',
      }
    }
  },
  // X轴也是如此
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu'],
    splitLine:{
      //柱状图默认xAxis(false)
      show:true,
      lineStyle:{
        color:'#f8f',
      }
    }
  },
  series: [
    {
      data: [120, 200, 150, 80],
      type: 'bar'
    }
  ]
};

官方案例在线编辑

Examples - Apache ECharts

copy我的代码即可查看完整案例