echarts X轴内容可滑动Y轴固定的常用配置项

在使用echarts插件时,经常遇到X轴数据量过大的问题,这个时候X轴的数据就会层叠到一起.致使页面效果非常难看!之前用来开发的配项目就是如此;所以就将一些常用的配置项放在这里,希望对你们有用!

注:该配置只是折线图的配置,如果是柱状图的配置大同小异,配置项的作用不会又多大变动.我是把这个配置项option做了一个函数的封装,里面有一些是形参希望你能看懂.

 {
        animation: true, //控制当前的点击滑动时节点是否放大
        title: {
            text: ''
        },
        tooltip: { // 可以自定义点击时出现的提示框,你可以尝试打印params
            formatter: function (params) {
                if (params instanceof Array && params[0].value) {
                    if (isNaN(params[0].value)){
                        var res = '<div><p>' + params[1].value + company + '</p></div>';
                        return res
                    } else if (isNaN(params[1].value)){
                        var res = '<div><p>' + params[0].value + company + '</p></div>';
                        return res
                    }else{
                        var res = '<div><p>' + params[0].value+ company + '</p><p>' + params[1].value + company + '</p></div>';
                        return res
                    }
                }
            }
        },
        legend: {},
        grid: {
            left: '4%', //设置Y轴name距离左边容器的位置,类似于margin-left
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        dataZoom: [{ //Y轴固定,让内容滚动
                type: 'slider',
                show: false,
                xAxisIndex: [0],
                start: 1,
                end: enddata,//设置X轴刻度之间的间隔
                zoomLock: true, //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)           
            },
            {
                type: 'inside',
                xAxisIndex: [0],
                start: 1,
                end: enddata,
                zoomLock: true, //锁定区域禁止缩放
            },

        ],
        xAxis: [{
            data: allXdata, //X轴数据
            boundaryGap: false, //两边是否留白
            axisLabel: {
                interval: 0, //X轴刻度全部显示
            },
            axisTick: {
                inside: true,
                lignWithLabel: true //这两行代码可以让刻度正对刻度名
            },
            axisLine: {
                symbol: ['none', 'arrow'], //显示坐标轴上的箭头
                symbolSize: [8, 10], //调整坐标箭头的大小
                symbolOffset: [5, 8], //箭头的偏移位置
                onZero: false
            },
            axisPointer: {
                lineStyle: {
                    width: 0 //隐藏指示线的线条
                },
                show: true,
                snap: true,
                status: 'show'
            }
        }],
        yAxis: {
            name: Yname, //Y轴名字
            nameGap: 20, //刻度与Y轴线名字之间的距离
            nameTextStyle: { //Y轴名字的样式
                color: '#000',
                fontSize: 14
            },
            min: minax2.min, //设置Y轴的最大最小值
            max: minax2.max,
            splitLine: {
                show: false
            }, //去掉网格线
            axisLine: {
                symbol: ['none', 'arrow'], //是否显示箭头
                symbolSize: [8, 10], //调整坐标箭头的大小
                symbolOffset: [5, 7] //调整箭头的偏移位置
            },
            axisTick: {
                // show:true,//是否显示Y轴的刻度
                inside: true //改变刻度的朝向
            }
        },
        series: [{
                data: soilTemperatureS1,
                type: 'line',
                symbol: 'circle', //折线拐点去掉圆点
                symbolSize: 1,
                itemStyle: {
                    normal: {
                        color: lineColor, //自定义折线点颜色
                        lineStyle: {
                            color: lineColor //自定义折线的颜色
                        }
                    }
                },
                smooth: true //折线变曲线
            },
            {
                data: soilTemperatureOldS1,
                type: 'line',
                symbol: 'circle', //折线拐点去掉圆点
                symbolSize: 1,
                itemStyle: {
                    normal: {
                        color: '#999', //自定义折线点颜色
                        lineStyle: {
                            color: '#999' //自定义折线的颜色
                        }
                    }
                },
            }

        ]
    }