16.echarts X轴像直尺一样设置刻度

在做老师的项目的时候，老师让我们实现X轴的直尺刻度显示，网上查了查相关代码，大家都没有明确介绍，因此我在这里记录一下，自己的学习。
先看实现效果：

对echarts的xAxis，yAxis这两个属性进行修改即可实现。

xAxis: [
        {   //第一个{}是原X轴配置参数
        type: 'category',
        axisTick: {undefined
            alignWithLabel: false
        },
        "axisLabel": {undefined
            "interval": 0,
            "show": true,
            "textStyle": {undefined
                "fontFamily": "微软雅黑",
                "fontSize": 12
            }
        },
        data: ["-10", "-9", "-8", "-7", "-6", "-5", "-4", "-3", "-2", "-1", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
    }, {

//第二个{}是为了 生成数字0.5 倍数的刻度
        position: 'bottom',
        axisLine: {undefined
            onZero: false,
            show: false
        },
        axisTick: {undefined
            length: 10,//刻度线的长度
            interval: 0,  //该{}中的data全部显示
            lineStyle: {undefined
                color: 'black',
                fontSize: '14px'
            }
        },
        data: ["", "", "", "", "", "", "", "", ""]//第二个data中的""个数是第一个data个数的2倍，这里我没有写完
    },
    {//第三个{}是为了 生成数字0.1 倍数的刻度
        position: 'bottom',
        axisLine: {
            onZero: false,
            show: false
        },
        axisTick: {
            length: 4,
            interval: 0,
            lineStyle: {
                color: 'black',
                fontSize: '14px'
            }
        },
        data: ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "",  "", "", "", "", "", "", "", "", "", "", "",  "", "", "", "", "", "", "", "", "", "", "",  "", "", "", "", "", "", "", "", "", "", "",  "", "", "", "", "", "", "", "", "", "", "",  "", "", "", "", "", "", "", "", "", "", "",  "", "", "", "", "", "", "", "", "", "", "",  "", "", "", "", "", "", "", "", "", "", "",  "", "", "", "", "", "", "", "", "", "", "",  "", "", "", "", "", "", "", "", "", "", "",  "", "", "", "", "", "", "", "", "", "", "",  "", "", "", "", "", "", "", "", "", "", "",  "", "", "", "", "", "", "", "", "", "", "",  "", "", "", "", "", "", "", "", "", "", "", ]
        第三个data中的""个数是第二个data个数的5倍，同样没有写完
    },
    ],

对于Y轴，同理进行配置就可以实现了

参考文章： https://segmentfault.com/q/1010000022081141?_ea=34841915 .