使用Echarts.js自定义X轴Y轴刻度画网格

使用Echarts.js自定义X轴Y轴刻度画网格

           **自定义x轴y轴也可以画网格线！！！**

xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              onZero: true,
              lineStyle: {
                color: "#F5F5F5"
              }
            },
            //可以用x轴y轴的分割线实现网格
            splitLine: {
              show: true,
              interval: "0",
              lineStyle: {
                color: ["#F5F5F5"]
              }
            },
            axisTick: {
              inside: true,
              show: true
            },
            axisLabel: {
              show: true,
              // 根据data中的数据处理成自己想要的间隔
              interval: function(index, value) {
                if (value % 4 == 0) {
                  return value;
                } else {
                  return false;
                }
              },
              textStyle: {
                fontSize: "10",
                color: "#979797"
              }
            },
            // x轴的数据 可以定死也可以动态获取
            data: [ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12" ]
          }]
  yAxis: [
          {
            type: "value",
            min: 0,
            max: 20,
            splitLine: {
              show: true,
              interval: "0",
              lineStyle: {
                color: ["#F5F5F5"]
              }
            },
            // 设置刻度尺指向内
            axisTick: {
              inside: true,
              show: false
            }
              formatter: function(value, index) {
                var texts = [];
                // 这里可以写逻辑，根据自定义的最大值最小值区间
                return texts;
              }
            }
          }
        ],