echart.jpg
最近遇到一個(gè)需求腥光，如上圖。數(shù)據(jù)存在實(shí)際數(shù)據(jù)和預(yù)測數(shù)據(jù)糊秆，需求希望預(yù)測區(qū)的數(shù)據(jù)是固定的武福，不會(huì)隨著datazoom的滾動(dòng)條縮放或者移走。
通過其API中的action和events事件都無法達(dá)到需求想要的效果痘番。各方百度捉片，google都無果的時(shí)候。看到官網(wǎng)的一個(gè)demo
echarts-demo.jpg
一個(gè)圖層放下了4個(gè)echarts界睁，那我放2個(gè)拼接一下是不是也可以觉增，就進(jìn)行了嘗試兵拢，效果如下
grid.jpg
可以看到datazoom的縮放滾動(dòng)條只在實(shí)際數(shù)據(jù)區(qū)出現(xiàn)翻斟，預(yù)測區(qū)因?yàn)槭枪潭ǎ酝耆恍枰s放滾動(dòng)條说铃。
話不多說上代碼：
option = {
grid: [
{x: '5%', y: '5%', width: '50%'},
{x2: '-5%', y: '5%', width: '50%'}
],
tooltip: {
formatter: 'Group {a}: ({c})'
},
xAxis: [
{
gridIndex: 0,
data: ['2019-10-01', '2019-10-02', '2019-10-03', '2019-10-04', '2019-10-05', '2019-10-06', '2019-10-07'],
boundaryGap:false
},
{
gridIndex: 1,
data: ['', '2019-10-08', '2019-10-09', '2019-10-10', '2019-10-11', '2019-10-12', '2019-10-13'],
boundaryGap:false
}
],
yAxis: [
{gridIndex: 0, min: 0, max: 100},
{gridIndex: 1, min: 0, max: 100,
axisLine:{
show:false
},
axisLabel:{
show:false
},
axisTick:{
show:false
}
}
],
series: [{
data: [40, 44, 56, 60, 70, 75, 80],
type: 'line',
xAxisIndex: 0,
yAxisIndex: 0,
smooth: false
},
{
data: [80, 83, 88, 95, 100, 100, 100],
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
smooth: false
}],
dataZoom:[{
}]
};
