图表实现分页效果

代码

     var valueBar = [],
         max, min;
     switch (type) {
         case 'v':
             max = 1450;
             min = 1000;
             break;

     }
     for (var i = 1; i < 24 + 1; i++) {
         var value = Math.floor(Math.random() * (max - min + 1) + min) / 100;
         var color = "#85f585";
         if (type == "v") {
             if (value <= 12 || value >= 13.5) {
                 color = '#ff9900';
             }
             valueBar.push({
                 value: value,
                 itemStyle: {
                     color: color,
                 },
             })
         } else {
             valueBar.push({
                 value: value,
             })
         }


     }
     return valueBar;
 }

 function xData(index) {
     var names = []
     for (var i = 1; i < 24 + 1; i++) {
         names.push("v" + (i + index * 24))
     }
     return names;
 }
 console.log(xData(3),'111')
 option = {
     "timeline": {
         "axisType": "category",
         "data": [1, 2, 3,4],
         "label": {
             "color": "#3dbaff",
             formatter: function(s) {
                 return "第" + s + "页";
             }
         },
         "lineStyle": {
             "color": "#3dbaff"
         },
         "itemStyle": {
             "color": "#3dbaff"
         },
         "controlStyle": {
             "color": "#3dbaff",
             "borderColor": "#3dbaff"
         },
         "autoPlay": false,
         "playInterval": 3000,
         tooltip: {
             formatter: function(s) {
                 return "第" + (s.value - 1) + "页";
             }
         }
     },
     "options": [
         {
         "tooltip": {
             "trigger": "axis",
             "axisPointer": {
                 "type": "shadow"
             },
         },
         "legend": {
             "data": ["电压"],
         },
         "calculable": true,
         "grid": {
             "y2": 80,
             "left": "40",
             "right": "30",
             "top": "30"
         },
         "xAxis": [{
             "data": xData(0),
             "axisLine": {
                 "show": false
             },
             "axisTick": {
                 "show": false
             },
             "splitLine": {
                 "show": false
             },
             "axisLabel": {
                 "interval": 0,
                 "rotate": 45,
                 "padding": [20, 0, 5, 0],
                 "color": "#3dbaff"
             }
         }],
         "yAxis": [{
             "type": "value",
             "axisTick": {
                 "show": false
             },
             "splitLine": {
                 "show": false
             },
             "axisLine": {
                 "onZero": false,
                 "lineStyle": {
                     "color": "#3dbaff"
                 }
             },
             //  "scale": true
             // 数值最小值-1
             min: function(value) {
                 return value.min - 1;
             },
         }],
         /*visualMap: {
             show: false,
             pieces: [{
                 gte: 20,
                 lt: 35,
                 color: '#85f585'
             }, {
                 gte: 35,
                 color: '#ffff00'
             }]
         },*/
         "series": [{
                 "name": "电压",
                 "type": "bar",
                 "barGap": "10%",
                 "itemStyle": {
                     "normal": {
                         "color": "rgba(255,144,128,1)",
                     }
                 },
                 label: {
                     normal: {
                         show: true,
                         position: 'top',
                         padding: [0, 0, -5, 40],
                         rotate: 60,
                         color: '#3dbaff'
                     }
                 },
                 "data": rankData("v"),
             },
         ]
     },
     {
         series: [{
                 'data': rankData("v")
             },
         ],
         xAxis: [{
             'data': xData(1)
         }]
     },
     {
         series: [{
                 'data': rankData("v")
             },
         ],
         xAxis: [{
             'data': xData(2)
         }]
     },
     {
         series: [{
                 'data': rankData("v")
             },
         ],
         xAxis: [{
             'data': xData(3)
         }]
     }
     ]
 }

options属性每一项对应每一页的数据

timeline 对应下面分页 其中data数组的长度对应有多少页