echarts绘制缩放折线图，实时刷新

 // 折线数据

var FFTData = [

[1,3],[2,4],[3,5],[4,8],[5,2]

];

var myChart1 = echarts.init(document.getElementById('SpecContainer'));
// 设置图表框架
function SetNullEcharts(){
	    	    myChart1.setOption({
	    		tooltip: {
			        trigger: 'axis',
			        formatter: function(datas){
		                for(var i = 0, length = datas.length; i < length; i++) {
	                        res = MultiL["FrequencyStatus"]+" : "+ datas[i].value[0] + '
'
	                        res += datas[i].seriesName + '：' + datas[i].value[1] + '
';
	                    }
	                    return res;
			        }
			    },
			    title: {
			        left: 'center',
			        text: MultiL["SpectrumAnalyzer"],
			    },
			    toolbox: {
			    	right: "80",
			        feature: {
			            saveAsImage: {
			            	title: MultiL["SaveImages"],
			            },
			            restore: {},
			            dataZoom:{}
			        }
			    },
			    grid:{
			    	top: 90,
			    	show:false,
			    	right: 110, // table right
			    	left: 50
			    },
                //底部缩放控件
			    dataZoom: [{
			        type: 'inside',
			        // startValue: FFTData[0][0],
			        start: 0,//百分比
			        end: 100
			    }, {
			    	start: 0,
			        end: 100,
			        handleSize: '100%',
			        handleStyle: {
			            color: '#fff',
			            shadowBlur: 3,
			            shadowColor: 'rgba(0, 0, 0, 0.6)',
			            shadowOffsetX: 2,
			            shadowOffsetY: 2
			        }
			    }],
			    xAxis: {
			    	name: MultiL["FrequencyStatus"]+"[MHZ]",
			        type: 'value',
			        boundaryGap: false, 
			        splitNumber: 10,
			        scale:true  // 缩放操作时 控制X轴的值
			    },
			    yAxis: {
			    	name: MultiL["PowerStatus"]+'[dB]',
			        type: 'value',
			        splitLine: {
			            lineStyle: {
			                type: 'dashed'
			            }
			        },
        			max: 70
			    },

			    series: [
			        {
			            name: MultiL["PowerStatus"],
			            type:'line',
			           	smooth: true,
			           	showSymbol: false,
			            itemStyle: {
			                color: '#1f7fc9'
			            },
			            data: [],
			        },
			    ]
	    	});
    	}

 

// 给图表填数据

function SetEchartsData(dataObj, colorArr){
     var xAxis = [];
     var yAxis = [];
     for(var xA = 1; xA < FFTData.length; xA++ ) {
             xAxis.push(FFTData[xA][0]);
              yAxis.push(FFTData[xA][1]);
     }

     // 求X轴的最小值
     var min = yAxis[0];
     for(var i = 1; i < yAxis.length; i++) {
         var cur = yAxis[i];
         cur < min ? min = cur : null
     }
     var MinVal = parseInt(min);    

     myChart1.setOption({
           xAxis: {
                    min: FFTData[0][0],
                    max: FFTData[FFTData.length-1][0]
           },
           yAxis: {
                  min: MinVal - 5,
           },
           series: [ {
                  data: FFTData,
           }]
     });

}

 

// 异步加载数据

$.get('data.json').done(function (data) {
    myChart.setOption({
        series: [{
            data: data
        }]
    });
});

 // 实时刷新

setInterval(function(){
    $.get('data.json').done(function (data) {
        myChart.setOption({
            series: [{
                data: data
            }]
        });
    });
},1000)

// 浏览器自适应

window.addEventListener("resize", function () {
    myChart1.resize();
});

效果图：