柱状图配置项例子

最新推荐文章于 2022-09-17 11:35:43 发布

墨语轩

最新推荐文章于 2022-09-17 11:35:43 发布

阅读量184

点赞数

分类专栏： echarts相关

本文链接：https://blog.csdn.net/MFWSCQ/article/details/119744816

版权

echarts相关专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这个柱状图官方示例里面一大堆，主要拿出来看一下各个组件的配置

配置项：

option = {
  title: {
    text: 'test',
    textStyle: {
      fontSize: 12,
      color: '#666'
    },
    // title 的位置    
    left: 25,
    top: 20
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', 
'9月', '10月', '11月', '12月'],
    // 坐标轴刻度相关设置
    axisTick: {
      // 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
      alignWithLabel: true,
      // 刻度线的样式设置
      lineStyle: {
        color: '#999'
      }
    },
    // 坐标轴轴线相关设置
    axisLine: {
      // 坐标轴轴线的样式设置
      lineStyle: {
        color: '#999'
      }
    },
    // 坐标轴刻度标签的相关设置(如刻度下面的月份就是label)
    axisLabel: {
      color: '#333'
    }
  },
  yAxis: {
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    // 坐标轴在 grid 区域中的分隔线
    splitLine: {
      // 分割线样式
      lineStyle: {
        type: 'dotted',
        color: '#eee'
      }
    }
  },
  series: [{
    type: 'bar',
    barWidth: '35%',
    data: [320, 82, 200, 334, 390, 330, 410, 82, 200, 334, 390, 330]
  }],
  color: ['#3398DB'],
  grid: {
    top: 50,
    left: 60,
    right: 60,
    bottom: 20
  }
}

效果图：