echarts背景分割区域填充不同颜色(x轴为time)，实时刷新

先来看下图片吧，这是实现效果；

思路：

　　因为要实时刷新，可以使用setInterval(),但是要控制好定时器的起与停，否则容易错乱以及页面卡死；

      主要就是利用定时器五秒刷新，重绘echarts图；=》setOption

这是代码：

代码我已经放到echarts社区，在社区可以看到效果，或者粘贴到你自己的编辑器上；

option = {
backgroundColor: '#000',
tooltip: {
trigger: 'axis',
formatter: function (params) {
return params[0].value[1];
},
axisPointer: {
type: 'line',
axis: 'x',
animation: false,
snap: true,
lineStyle: {
color: '#fff',
type: 'dashed'
}
},
},
color: [
'#db4d4c',
'#ffcf49',
'#27ccc8',
'#d3df62',
'#07479d',
'rgba(7, 71, 157, 0.46)',
],
grid: {
left: '10%',
top: '13%',
right: '10%',
bottom: '18%',
},
xAxis: {
type: 'time',
splitLine: {
show: false
},
nameTextStyle: {
color: '#fff',
fontSize: 12,
},
axisLabel: {
color: '#fff',
fontSize: 12,
interval: 0,
formatter:function(val) {
var date = new Date(val);
var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
var m = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
var s = (date.getSeconds() <10 ? '0' + date.getSeconds() : date.getSeconds());
return h+m+s;
}
},
axisTick: {
inside: true,
alignWithLabel: true,
interval: 0,
lineStyle: {
color: ['rgba(255,255,255,.5)'],
}
},
axisLine: {
lineStyle: {
color: ['rgba(255,255,255,0.25)'],
type: 'dashed',
}
}
},
yAxis: [
{
type: 'value',
splitNumber: 10,
min: 40,
max: 195,
name: 'bpm',
nameTextStyle: {
color: '#fff',
fontSize: 12,
},
axisLabel: {
color: '#fff',
fontSize: 12,
},
axisTick: {
show: false,
lineStyle: {
color: ['rgba(255,255,255,0.25)'],
}
},
axisLine: {
lineStyle: {
color: ['rgba(255,255,255,0.25)'],
}
},
splitLine: {
show: false,
}
},
{
type: 'category',
splitNumber: 10,
data: [40,50,60,70,80,90,117,136,156,175,195],
name: 'bpm',
nameTextStyle: {
color: '#fff',
fontSize: 12,
},
axisLabel: {
show: false
},
axisTick: {
lineStyle: {
color: ['rgba(255,255,255,0.25)'],
}
},
axisLine: {
lineStyle: {
color: ['rgba(255,255,255,0.25)'],
}
},
splitLine: {
show: true,
interval: 0,
lineStyle: {
color: ['rgba(255,255,255,0.25)'],
type: 'dashed',
1,
}
},
splitArea: {
show: true,
areaStyle: {
color: [
'rgba(7, 71, 157, 0.46)',
'rgba(7, 71, 157, 0.46)',
'rgba(7, 71, 157, 0.46)',
'rgba(7, 71, 157, 0.46)',
'rgba(7, 71, 157, 0.46)',
'rgba(7, 71, 157, 0.46)',
'#07479d',
'#d3df62',
'#27ccc8',
'#ffcf49',
'#db4d4c',
]
}
},
},
{
name: '%',
nameTextStyle: {
color: '#fff',
fontSize: 12,
},
axisLabel: {
color: '#fff',
fontSize: 12,
},
axisTick: {
lineStyle: {
color: ['rgba(255,255,255,0.25)'],
}
},
axisLine: {
lineStyle: {
color: ['rgba(255,255,255,0.25)'],
}
},
type: 'category',
data: [0,10,20,30,40,50,60,70,80,90,100]
},
{
type: 'category',
offset: -600,
data: ['','','','','','安静心率区间','热身区间','燃烧脂肪区间','有氧运动区间','无氧运动区间','最大强度'],
axisLabel: {
color: '#fff',
fontSize: 12,
align: 'top',
},
axisTick: {
show: false
},
axisLine: {
show: false,
}
},
],
series: [
{
type: 'line',
symbol: 'circle',
smooth: true,
showSymbol: false,
label: {
normal: {
show: false,
},
},
labelLine: {
normal: {
show: false
}
},
itemStyle : {
normal : {
color:'#c205c0',
lineStyle: {
color: '#c205c0',
shadowColor: 'rgba(188,138,187,0.8)',
shadowBlur: 10,
}
},
},
zlevel: 100,
data: [[1527476583000,100],[1527476584000,195],[1527476585000,100],[1527476593000,90]]
}
],
dataZoom: [
{
type: 'slider',
show: true,
xAxisIndex: [0],
height: 20,//组件高度
bottom: 10,
start: 0,
end: 100,
backgroundColor: '#0355c3',
fillerColor: 'rgba(43, 187, 239, 0.2)',
borderColor: '#2bbbef',
showDataShadow: false,
showDetail: false,
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: '20',
handleStyle: {
color: '#2bbbef',
},
axisTick: {
inside: true,
alignWithLabel: true,
lineStyle: {
color: ['rgba(255,255,255,.5)'],
}
},
},
{
type: 'inside',
}
],
};

let chart = new echarts.init(document.getElementById('myChart'));

let timer = null；

timer = setInterval(() => {

　　chart.setOption(option);

},5000)

注意：离开当前页面时别忘记清除定时器；

发现x轴为time，series数据类型为二维数组，类似于[[1527476583000,100],[1527476584000,195],[1527476585000,100],[1527476593000,90]]，第一位为毫秒数，第二为y轴value值；