echarts常用样式

最近和echarts打交道比较多，不得不说这个工具真的强大。特别是针对图表类的前端展示，各种样式都是可以实现的，但是对于刚上手的程序猿们，去改一些默认样式还是很费时间的，就像是在学一门新的语言，需要不停地问度娘，逛贴吧博客。近期就把在项目上使用的一些比较常用的样式列一列~

坐标轴相关

xAxis:{
    name: '已办数量', // 坐标轴名称
    nameTextStyle: {
        color: '#3F85FF', // 坐标轴名称颜色
    },
    splitLine:{
        lineStyle:{
            type:'dashed', // 坐标轴刻度线虚线
            color: '#DADADA', // 坐标轴刻度颜色
        }
    },
    axisTick: {
        show: false, // 坐标轴刻度线隐藏
    },
    axisLine: {
        show: true,
        lineStyle: {
            color: "#BABFC9", // x轴线的颜色
            width: 0, // x轴线的宽度
        },
    },
    axisLabel: { 
        color: '#000000' // 坐标轴字体颜色
    }, 
}

柱状图中柱子的宽度

series: [
  {
    type: 'bar',
    barWidth: 30, // 柱图宽度
  },
]

柱状图中柱子的颜色

series: [
  {
    type: 'bar',
    itemStyle: {
      normal: {
        color: '#3F85FF',
      },
    },
  },
]

折线图中折线的颜色

series: [
  {
    type: 'line',
    itemStyle: {
      normal: {
        color: '#FFB72F',
      },
    },
  },
]

折线图中折线的宽度

series: [
  {
    type: 'line',
    itemStyle: {
      normal: {
         lineStyle: {
             width: 4, // 折线宽度
         },
      },
    },
  },
]

最终效果如下

柱状图中柱子之间的间距

series: [
  {
    type: 'line',
    barGap:"0",//柱图间距
  },
]

这条属性前后的差异

没加:

加后: