必看echarts 柱状图 相关配置详细说明

在开发图表的过程中，如果对表图不怎么熟悉或者不了解图表里面的相关的配置字段的话，那做图表真的太痛苦的了，我把我做过图表的里面的配置详细的说明一下，希望对大家有所帮助，！！！

如果想详细说明的，最后看echarts的api文档， echarts.apache.org/zh/option.h…

title配置

这里一共用到了 x，y参数对齐方式，tetxt参数标题名，textStyle参数设置标题的样式

title: {
      text: ‘测试title’, // 主标题
      textStyle: {
        color: '#333333', // 主标题颜色
        fontSize: '14', // 主标题大小,
        fontWeight: 'bold'
      },
      x: 'center',
      y: '280'
    },

xAxis配置

就是是控制x轴的参数配置，

splitLine

是否显示分隔线。默认数值轴显示，类目轴不显示

axisTick

是否显示坐标轴刻度。

splitArea

是否显示分隔区域

 xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisLine: {
        lineStyle: {
          color: '#666666'
        },
        show: false
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitArea: {
        show: false
      },
  },

series配置

barWidth

柱条的宽度，不设时自适应。

itemStyle

图形样式。(设置柱子的背景颜色)

series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
       barWidth: '22', // 柱子宽度
       itemStyle: {
        normal: {
          color: (params) => {
            // return data.colors[params.dataIndex];
            return '#4DADFF'; 
          }
        }
      },
    }
  ]

总结

上面写的也只是我在项目中用到的一些参数，其时关于柱状图的更多配置还是要看官网的api文档，