echarts X轴内容可滑动Y轴固定的常用配置项(解决echarts数据量太多的显示问题)

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

注:该配置只是折线图的配置,如果是柱状图的配置大同小异,配置项的作用不会又多大变动.我是把这个配置项option做了一个函数的封装

let  myChart = echarts.init(document.getElementById('oneDay'));
let allXdata =['',1,2,3,4,5,6];
let lineRes = ['',2,2,3,4,3,3];
let dayOption= getOption(allXdata,lineRes);
myChart.setOption(dayOption);

function getOption(allXdata,lineRes){
            return{
                animation: false, //控制当前的点击滑动时节点是否放大
                title: {
                    text: '2018-10-16',
                    padding:20,
                    textStyle:{
                        fontSize:14,
                        fontWeight:500
                    }
                },
                tooltip: { // 可以自定义点击时出现的提示框,你可以尝试打印params
                    show:true,
                    // formatter: function (params) {
                    //     console.log(params);
                    // }
                },
                legend: {

                },
                grid: {
                    left: '4%', //设置Y轴name距离左边容器的位置,类似于margin-left
                    right: '4%',
                    bottom: '2%',
                    containLabel: true
                },
                dataZoom: [
                    { //Y轴固定,让内容滚动
                        type: 'slider',
                        show: false,
                        xAxisIndex: [0],
                        start: 1,
                        end: 80,//设置X轴刻度之间的间隔(根据数据量来调整)
                        zoomLock: true, //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
                    },
                    {
                        type: 'inside',
                        xAxisIndex: [0],
                        start: 1,
                        end: 80,
                        zoomLock: true, //锁定区域禁止缩放
                    },

                ],
                xAxis: [{
                    data: allXdata, //X轴数据(该数组的第一个数据为'' 可以让原点数据为0)
                    boundaryGap: false, //两边是否留白
                    axisLabel: {
                        interval: 0, //隔多少点显示一个X轴刻度,0就是全部显示
                        formatter: function (value, index) {//自定义X轴的显示
                            var date = new Date(value);
                            var texts = date.getMonth()+1+"月";
                            if (index === 0) {
                                texts=0;
                            }
                            return texts;
                        }
                    },
                    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: '', //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: false //改变刻度的朝向
                    }
                },
                series: [{
                    data: lineRes,
                    type: 'line',
                    symbol: 'circle', //折线拐点去掉圆点
                    symbolSize: 1,
                    itemStyle: {
                        normal: {
                            color: '#000', //自定义折线点颜色
                            lineStyle: {
                                color: '#000'//自定义折线的颜色
                            }
                        }
                    },
                    smooth: true //折线变曲线
                },

                ]
            }
        }