echarts: 修改y轴网格线样式

image.png

如上图,如果要修改 Y 轴网格线样式,需在 yAxis里进行 splitLine 设置, 如果要设置 X 轴网格线,需在 xAxis 进行 splitLine 设置, 这里我们以 Y 轴为例。

image.png

  yAxis: [
    {
      type: 'value',
      name: '数量',
      axisLabel: {
        formatter: '{value} ',
        show: true,
        textStyle: {
          color: '#909399',
          fontSize: 12
        }
      },
      //  y轴刻度线
      axisLine: { show: false },
      // 是否显示坐标轴刻度
      axisTick: {
        show: false
      },
      splitArea: {
        show: false
      },
      // 设置Y轴网格线样式
      splitLine: {
        show: true,
        lineStyle: {
          color: ['blue'],
          width: 1,
          type: 'solid'
        }
      }
    },
]

这样就行啦。这里的 blue 仅为例子所用,实际不会有哪个产品会用这种耀眼的颜色~

你可能感兴趣的:(echarts: 修改y轴网格线样式)