echart 大量数据面积图

 

var base = +new Date(1968, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];

var data = [Math.random() * 300];

for (var i = 1; i < 20000; i++) {
    var now = new Date(base += oneDay);
    date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
    data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
}

option = {
    tooltip: {
        trigger: 'axis',
        position: function (pt) {
            return [pt[0], '10%'];
        }
    },
    title: {
        left: 'center',
        text: '大数据量面积图',
    },
    toolbox: {
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: date
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%']
    },
    dataZoom: [{
        type: 'inside',
        start: 0,
        end: 10
    }, {
        start: 0,
        end: 10,
        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        handleSize: '80%',
        handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
        }
    }],
    series: [
        {
            name:'模拟数据',
            type:'line',
            smooth:true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
                normal: {
                    color: 'rgb(255, 70, 131)'
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgb(255, 158, 68)'
                    }, {
                        offset: 1,
                        color: 'rgb(255, 70, 131)'
                    }])
                }
            },
            data: data
        }
    ]
};

data=[275.82938,276.7872,281.4533,285.6257,287.25137,295.00085,295.0354,0,295.18607,295.1489,295.30994,295.2314,295.36307,295.44678,295.29535,295.30948,294.7274,294.56467,294.33005,294.4276,294.7748,294.90955,295.0347,295.04486,295.1882,295.17795,295.3601,295.42017,295.52347,295.43094,295.2112,295.2014,295.18542,295.13895,295.16278,295.17487,295.14627,295.0832,294.5814,294.52512,294.63156,294.74774,294.79388,294.81644,294.96906,294.95377,295.0029,295.11963,295.15588,295.20825,0,281.455,282.35928,283.38757,284.92313,295.8691,295.75827,295.8473,295.82233,295.7608,295.5989,0,288.0544,286.587,285.96973,285.48587,285.15018,285.26443,285.7113,286.31168,287.0916,288.15424,289.19287,290.47012,291.3485,292.17432,293.02438,293.54993,294.0772,294.4688,294.69864,294.796,294.97256,295.10004,295.33078,295.4948,295.25854,295.36148,295.17972,294.99377,295.101,295.0431,295.09973,295.1568,295.3181,295.18127,295.26556,295.10883,295.0333,295.06802,295.1109,295.15463,295.1757,295.08725,295.26407,295.11676,295.2105,295.07495,295.10934,295.05432,294.86093,294.90576,294.86035,294.9973,295.0869,294.90414,295.01874,295.00143,294.95007,294.95007,294.98218,295.02118,295.14066,295.18057,295.2263,295.26013,295.30444,295.22232,295.2419,295.24835,295.18753,295.22342,295.15445,295.15662,295.10086,295.153,295.12598,295.076,295.05896,295.08963,295.09314,295.0592,295.02087,295.0185,295.021,294.99353,295.02005,295.02716,294.94067,294.96002,294.94235,294.9915,295.02023,294.99146,295.0216,294.9809,294.97708,294.90335,294.9261,294.92578,294.97333,294.89438,294.79993,294.84933,294.90054,294.99097,294.99997,295.0222,295.02893,295.0714,295.0725,295.02356,295.02036,295.06638,295.05786,295.02707,295.10873,295.12234,295.13196,295.1268,295.07758,295.0745,295.06808,295.05594,295.00183,294.90802,294.84515,294.89822,294.90677,294.9932,294.93652,294.90625,294.95755,294.9495,294.9726,295.0234,295.0154,294.9578,295.02185,295.0224,295.082,295.06516,295.09497,295.13165,295.13177,295.0282,295,294.97632,294.9999,295.0048,295.01572,295.00397,295.0282,295.02692,294.97577,295.02216,295.00256,295.07404,295.03223,295.09192,295.00986,294.9841,295.02682,295.04214,295.0761,295.0629,295.0001,295.0132,294.9822,294.91132,294.99323,295.0247,295.02957,294.97327,294.97922,294.997,294.97424,294.9172,294.94736,294.9984,294.9508,295.00253,295.04718,295.02414,295.05966,295.0707,295.02728,294.9768,295.02045,295.03418,295.01697,295.02292,295.0864,295.03732,295.0217,294.94873,294.93655,294.95584,294.9996,295.06842,295.03955,295.0299,295.05096,294.98462,294.83978,295.03824,294.9785,294.8686,294.98282,294.88937,294.91464,295.0649,294.92737,295.06238,295.03156,294.9027,295.07434,295.1219,295.1367,294.94968,295.0883,295.03723,294.95642,295.0443,295.03528,295.00223,294.98047,294.99728,295.08527,295.0093,295.20926,295.08365,294.95374,294.97977,295.09543,295.03,294.9133,294.93933,294.96716,295.1499,294.9879,295.09363,295.11462,294.9784,295.08896,295.225,295.0007,295.13113,295.14706,295.02014,295.08673,295.07037,295.19257,295.20822,295.0944,294.92786,294.8865,295.03027,295.13593,295.05984,294.94168,294.93445,295.01053,295.13876,295.1724,295.1242,295.0548,295.05927,295.21558,295.36203,295.30106,295.20825,295.0614,294.9618,294.83563,294.65546,294.50717,294.48297,294.47794,294.40863,294.46814,294.5189,294.51825,294.52014,294.53918,294.4796,294.4983,294.44998,294.40018,294.3424,294.48145,294.47327,294.5483,294.4787,294.4738,294.55203,294.80078,295.0458,295.30515,295.52737,295.63635,295.7448,295.67987,295.63208,295.48395,295.38574,295.278,295.33917,295.51398,295.573,295.7458,295.84427,295.7188,295.5781,295.47913,295.4475,295.3116,295.02673,294.9797]