echarts折线图怎么从y轴开始_基于echarts的双y轴实时更新折线图

一款基于echarts的双y轴实时更新折线图效果，页面加载后开始自动更新数据并绘制对应的折线图，可以点击右上角的按钮：显示数据视图、刷新数据和将数据存储为png的图片。

查看演示

下载资源：

46

次 下载资源

下载积分：

20

积分

页面的head部分，需引入echarts插件，代码如下：

页面的body部分，需设置一个指定宽高的div容器，代码如下：

页面的底部，对指定元素开启折线图实例闭关设置好相应的参数，代码如下： // 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据

var option = {

title: {

text: 'Topic'

// 副标题 ,subtext: '随机数'

},

tooltip: {

trigger: 'axis'

},

legend: {

data: ['内存使用情况', '当前数量']

},

toolbox: {

show: true,

feature: {

dataView: {

readOnly: false

},

restore: {},

saveAsImage: {}

}

},

dataZoom: {

show: false,

start: 0,

end: 100

},

xAxis: [{

type: 'category',

boundaryGap: false,

data: (function() {

var now = new Date();

var res = [];

var len = 10;

while (len--) {

res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));

now = new Date(now - 2000);

}

return res;

})()

}],

yAxis: [{

type: 'value',

scale: true,

name: '内存使用情况',

max: 20,

min: 0,

boundaryGap: [0.2, 0.2]

}, {

type: 'value',

scale: true,

name: '当前数量',

min: 0,

boundaryGap: [0.2, 0.2]

}],

series: [{

name: '当前数量',

type: 'line',

yAxisIndex: 1,

itemStyle: {normal: {

color:'#ffd700',

lineStyle:{color:'#ffd700'}

}},

data: (function() {

var res = [];

var len = 10;

while (len--) {

res.push(null);

}

return res;

})()

}, {

name: '内存使用情况',

type: 'line',

smooth:true,

// itemStyle areaStyle 成为面积图的关键。

itemStyle: {normal: {

color:'#0099ff',

areaStyle: {type: 'default'},

lineStyle:{color:'#0099ff'}

}},

areaStyle: {// 实现蓝白渐变色

normal: {

color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

offset: 0,

color: 'rgb(0, 153, 255)'

}, {

offset: 1,

color: 'rgb(255,255,255)'

}])

}

},

data: (function() {

var res = [];

var len = 0;

while (len < 10) {

res.push(null);

len++;

}

return res;

})()

}]

};

setInterval(function() {

axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

var data0 = option.series[0].data;

var data1 = option.series[1].data;

data0.shift();

data0.push(Math.round(Math.random() * 10000));

data1.shift();

data1.push(Math.round(Math.random() * 20));

option.xAxis[0].data.shift();

option.xAxis[0].data.push(axisData);

myChart.setOption(option);

}, 1000);