如何让柱状图的柱子不紧挨坐标轴

最新推荐文章于 2024-06-11 20:50:27 发布

陈十一i

最新推荐文章于 2024-06-11 20:50:27 发布

阅读量2k

点赞数 2

分类专栏： echarts 文章标签： javascript 前端开发语言 echarts

本文链接：https://blog.csdn.net/xu20166424/article/details/125373109

版权

echarts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

如何让柱状图的柱子不紧挨坐标轴，如图所示

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisTick: {
        alignWithLabel: true
      },
       margin:10
     
    }
  ],
  yAxis: [
    {
      type: 'value',
       margin:10
    }
  ],
  series: [
    // 看这里，加一项数据，颜色设置透明
    {
      name: 'Direct',
      stack:"one",
      type: 'bar',
      barWidth: '60%',
      data: [20, 20, 20, 20, 20, 20, 20],
        itemStyle: {
            normal: {
              //这里是重点
              color: function (params) {
              // 颜色设置透明
                var colorList = ['rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)']
                return colorList[params.dataIndex]
              }
            }
          }
    },
     {
       stack:"one",
      name: 'Direct',
      type: 'bar',
      barWidth: '60%',
      data: [10, 52, 200, 334, 390, 330, 220]
    }
  ]
};