diff --git a/control.sh b/control.sh
index eb9438e..bd8de40 100755
--- a/control.sh
+++ b/control.sh
@@ -161,8 +161,8 @@ check_uwsgi() {
     tar -zcf uwsgi-2.0.15.tar.gz uwsgi-2.0.15
     rm -rf uwsgi-2.0.15
     pip install uwsgi-2.0.15.tar.gz
-    echo "uwsgi installed."
     rm uwsgi-2.0.15.tar.gz
+    echo "uwsgi installed."
     mv ${G_VENV_DIR}/bin/uwsgi ${G_VENV_DIR}/bin/curve_uwsgi
     echo "uwsgi renamed."
     cutoff
diff --git a/web/package.json b/web/package.json
index 703ac6f..163a497 100644
--- a/web/package.json
+++ b/web/package.json
@@ -15,7 +15,7 @@
     "case-sensitive-paths-webpack-plugin": "2.1.1",
     "chalk": "1.1.3",
     "css-loader": "0.28.4",
-    "d3": "^4.12.2",
+    "d3": "^4.13.0",
     "dotenv": "4.0.0",
     "eslint": "3.19.0",
     "eslint-config-react-app": "^1.0.5",
@@ -27,7 +27,8 @@
     "extract-text-webpack-plugin": "2.1.2",
     "file-loader": "0.11.2",
     "fs-extra": "3.0.1",
-    "highcharts": "^6.0.4",
+    "highcharts": "6.0.7",
+    "highcharts-boost": "^0.1.7",
     "highcharts-no-data-to-display": "^0.1.7",
     "html-webpack-plugin": "2.29.0",
     "jest": "20.0.4",
@@ -104,7 +105,7 @@
     "extends": "react-app"
   },
   "devDependencies": {
-    "babel-plugin-import": "^1.6.3",
+    "babel-plugin-import": "^1.6.5",
     "less": "^2.7.2",
     "less-loader": "^4.0.4"
   },
diff --git a/web/src/common/baseComponent/band.js b/web/src/common/baseComponent/band.js
index f60c6c0..a0b58ef 100755
--- a/web/src/common/baseComponent/band.js
+++ b/web/src/common/baseComponent/band.js
@@ -26,7 +26,17 @@ export default class Band extends Component {
         const self = this;
         self.initBand();
         eventProxy.on('loadBand', obj => {
-            let legend = !self.isEmpty(self.state.legend[obj.name]) ? self.state.legend[obj.name] : {0: 'show'};
+            let trendsBands = obj.trendsBands;
+            let initLegend = {};
+            trendsBands.forEach((item, index) => {
+                if (!index) {
+                    initLegend[item.name] = 'show';
+                }
+                else {
+                    initLegend[item.name] = '';
+                }
+            });
+            let legend = !self.isEmpty(self.state.legend[obj.name]) ? self.state.legend[obj.name] : initLegend;
             self.state.legend[obj.name] = legend;
             cookie.save('bandStatus', self.state.legend);
             self.setState({
@@ -49,18 +59,19 @@ export default class Band extends Component {
     }
 
     initBand() {
+        let self = this;
         let bandSeries = this.props.bandSeries;
         let legend = cookie.load('bandStatus') || this.state.legend || {};
         let list = this.props.list;
         list.forEach(item => {
-            if (this.isEmpty(legend[item.name])) {
+            if (self.isEmpty(legend[item.name])) {
                 legend[item.name] = {};
                 bandSeries.forEach((series, index) => {
                     if (!index) {
-                        legend[item.name][index] = 'show';
+                        legend[item.name][series.name] = 'show';
                     }
                     else {
-                        legend[item.name][index] = '';
+                        legend[item.name][series.name] = '';
                     }
                 });
             }
@@ -119,17 +130,17 @@ export default class Band extends Component {
             }
         });
         bandSeries.forEach((item, index) => {
-            legend[dataName][index] = '';
+            legend[dataName][item.name] = '';
         });
         if (series.visible) {
             series.hide();
             bandSeries.forEach((item, i) => {
                 if (item.name === name) {
-                    if (legend[dataName][i] === 'show') {
-                        legend[dataName][i] = '';
+                    if (legend[dataName][item.name] === 'show') {
+                        legend[dataName][item.name] = '';
                     }
                     else {
-                        legend[dataName][i] = '';
+                        legend[dataName][item.name] = '';
                     }
                 }
             });
@@ -138,11 +149,11 @@ export default class Band extends Component {
             series.show();
             bandSeries.forEach((item, i) => {
                 if (item.name === name) {
-                    if (legend[dataName][i] === '') {
-                        legend[dataName][i] = 'show';
+                    if (legend[dataName][item.name] === '') {
+                        legend[dataName][item.name] = 'show';
                     }
                     else {
-                        legend[dataName][i] = '';
+                        legend[dataName][item.name] = '';
                     }
                 }
             });
@@ -175,15 +186,15 @@ export default class Band extends Component {
                     if (!legend[dataName]) {
                         legend[dataName] = {};
                     }
-                    if (legend[dataName][index] === undefined) {
+                    if (legend[dataName][item.name] === undefined) {
                         if (!index) {
-                            legend[dataName][index] = 'show';
+                            legend[dataName][item.name] = 'show';
                         }
                         else {
-                            legend[dataName][index] = '';
+                            legend[dataName][item.name] = '';
                         }
                     }
-                    let className = legend[dataName][index];
+                    let className = legend[dataName][item.name];
                     classes += className ? className : '';
                     let color = '';
                     chart.series.forEach(item => {
diff --git a/web/src/common/baseComponent/chart.js b/web/src/common/baseComponent/chart.js
index 418e321..a1b14a3 100755
--- a/web/src/common/baseComponent/chart.js
+++ b/web/src/common/baseComponent/chart.js
@@ -8,17 +8,12 @@ import Highcharts from 'highcharts/highstock';
 import {NoDataToDisplay} from 'react-highcharts-no-data-to-display';
 import highchartsMore from 'highcharts/highcharts-more';
 import eventProxy from '../../tools/eventProxy';
-// import Boost  from 'highcharts/modules/boost';
 
 highchartsMore(Highcharts);
 let ReactHighcharts = require('react-highcharts/ReactHighstock');
 NoDataToDisplay(ReactHighcharts.Highcharts);
-// let Boost =  require('highcharts/modules/boost');
-// Boost(ReactHighcharts.Highcharts);
-
-// import HighchartsMore from 'highcharts/highcharts-more';
-// var RHighcharts = require('react-highcharts/ReactHighstock');
-// HighchartsMore(RHighcharts.Highcharts);
+let Boost = require('highcharts/modules/boost');
+Boost(Highcharts);
 
 Highcharts.setOptions({
     global: {
@@ -47,6 +42,7 @@ export default class Chart extends Component {
         config = Object.assign({}, defaultConfig, config);
         let chartConfig = config.chart;
         let chartType = this.props.type || 'chart';
+
         this.chart = new Highcharts[chartType]({
             ...config,
             chart: {
@@ -54,6 +50,7 @@ export default class Chart extends Component {
                 renderTo: this.refs.chart
             }
         }, this.props.callback);
+
         eventProxy.trigger('loadedChart', this.chart);
         if (!this.props.neverReflow) {
             this.chart && this.chart.options && this.chart.reflow();
diff --git a/web/src/common/baseComponent/uploadData.js b/web/src/common/baseComponent/uploadData.js
index f125fc6..f9afb28 100755
--- a/web/src/common/baseComponent/uploadData.js
+++ b/web/src/common/baseComponent/uploadData.js
@@ -105,7 +105,7 @@ export default class UploadData extends Component {
                         num = 0;
                     }
                     num++;
-                }, 800);
+                }, 500);
                 window.timeIds1 = setInterval(function () {
                     let loadingWidth = 398 * step.percent / 100;
                     if (loadingWidth <= 398) {
diff --git a/web/src/index/component/sidebar.js b/web/src/index/component/sidebar.js
index 65e79d0..deb70dd 100755
--- a/web/src/index/component/sidebar.js
+++ b/web/src/index/component/sidebar.js
@@ -165,10 +165,16 @@ export default class Sidebar extends Component {
                 }
                 // If the current name is not in the data list, the default jumps to the first one
                 else {
-                    message.warning('No ' + self.props.params.name + ' Data', 2, function () {
-                        url = '/home/' + name;
+                    let showName = self.props.params.name;
+                    if (showName) {
+                        message.warning('No ' + showName + ' Data', 2, function () {
+                            url = '/home/' + name;
+                            self.redirect(url, data, name);
+                        });
+                    }
+                    else {
                         self.redirect(url, data, name);
-                    });
+                    }
                 }
             }
         });
diff --git a/web/src/index/component/trend.js b/web/src/index/component/trend.js
index 7e50fa8..900b404 100755
--- a/web/src/index/component/trend.js
+++ b/web/src/index/component/trend.js
@@ -6,7 +6,7 @@
 import './trend.less';
 
 import React, {Component} from 'react';
-import {hashHistory} from 'react-router';
+// import {hashHistory} from 'react-router';
 import {axiosInstance} from '../../tools/axiosInstance';
 import eventProxy from '../../tools/eventProxy';
 import Chart from '../../common/baseComponent/chart';
@@ -15,11 +15,13 @@ import img from '../../common/image/background-image.png';
 import moment from 'moment';
 import $ from 'jquery';
 import Band from '../../common/baseComponent/band';
+import cookie from 'react-cookies';
 
 const api = require('../../common/api').default.api;
 
 window.selectedIndex = {};
 window.labelObj = {};
+window.alreadyLoad = {};
 window.thumbExtremes = {};
 
 let key = {
@@ -27,6 +29,7 @@ let key = {
     currentKey: null,
     mouseKey: null
 };
+let boostThreshold = 500000;
 
 export default class Trend extends Component {
     constructor(props) {
@@ -68,8 +71,6 @@ export default class Trend extends Component {
             loading: true,
             neverReflow: false
         };
-        this.abnormalSelectedPoints = [];
-        this.abnormalSelectedIndex = [];
         // The maximum value the x-axis can set when zooming in
         this.enlargeExtremesMax = undefined;
         // The minimum value that the x-axis can set when reducing the operation
@@ -88,7 +89,6 @@ export default class Trend extends Component {
         });
         // Keyboard operation trend graph
         $('body').on('keyup', function (e) {
-            e.preventDefault();
             e = e ? e : window.event;
             let t = e.keyCode || e.which || e.charCode;
             let keyArr = [32, 38, 87, 40, 83, 37, 65, 39, 68];
@@ -200,7 +200,7 @@ export default class Trend extends Component {
             let action = $(this).attr('data-action');
             let startTime = 0;
             let endTime = 0;
-            let currentX = window.currentX;
+            let currentX = parseInt($(this).attr('data-currentx'), 10);
             let name = self.props.params.name;
             let currentIndex = 0;
             // get real startTime and endTime
@@ -212,6 +212,9 @@ export default class Trend extends Component {
                     break;
                 }
             }
+            if (!currentX) {
+                return;
+            }
             let url = api.menuOpera
                 + name
                 + '?startTime=' + startTime
@@ -278,7 +281,7 @@ export default class Trend extends Component {
                     self.refs.loadingContainer.innerHTML = TREND_LOADING + text;
                 }
             }
-        }, 800);
+        }, 500);
 
         // Operation  menu
         $('body').delegate('.label-opera', 'click', function (e) {
@@ -301,17 +304,34 @@ export default class Trend extends Component {
             if (series.points) {
                 let tempEndTime = 0;
                 let tempStartTime = 0;
-                for (let i = 0; i < series.points.length - 1; i++) {
-                    if (!series.points[i].y && series.points[i + 1].y) {
-                        tempStartTime = series.points[i + 1].x;
-                    }
-                    if (series.points[i].y && !series.points[i + 1].y) {
-                        tempEndTime = series.points[i].x;
+                if (self.allSeriesPoints.length > boostThreshold) {
+                    for (let i = 0; i < series.yData.length - 1; i++) {
+                        if (!series.yData[i] && series.yData[i + 1]) {
+                            tempStartTime = series.xData[i + 1];
+                        }
+                        if (series.yData[i] && !series.yData[i + 1]) {
+                            tempEndTime = series.xData[i];
+                        }
+                        if (tempStartTime && tempEndTime) {
+                            window.labelObj[name].push([tempStartTime, tempEndTime]);
+                            tempStartTime = undefined;
+                            tempEndTime = undefined;
+                        }
                     }
-                    if (tempStartTime && tempEndTime) {
-                        window.labelObj[name].push([tempStartTime, tempEndTime]);
-                        tempStartTime = undefined;
-                        tempEndTime = undefined;
+                }
+                else {
+                    for (let j = 0; j < series.points.length - 1; j++) {
+                        if (series.points[j].y === null && series.points[j + 1].y !== null) {
+                            tempStartTime = series.points[j + 1].x;
+                        }
+                        if (series.points[j].y !== null && series.points[j + 1].y === null) {
+                            tempEndTime = series.points[j].x;
+                        }
+                        if (tempStartTime && tempEndTime) {
+                            window.labelObj[name].push([tempStartTime, tempEndTime]);
+                            tempStartTime = undefined;
+                            tempEndTime = undefined;
+                        }
                     }
                 }
             }
@@ -338,7 +358,7 @@ export default class Trend extends Component {
                         if (self.refs.loadingTip) {
                             self.refs.loadingTip.innerHTML = TREND_LOADING + text;
                         }
-                    }, 800);
+                    }, 500);
                 }
             }
         });
@@ -371,18 +391,20 @@ export default class Trend extends Component {
                         if (self.refs.loadingTip) {
                             self.refs.loadingTip.innerHTML = text;
                         }
-                    }, 800);
+                    }, 100);
                 }
             }
         });
 
         eventProxy.on('bandVisible', legend => {
             this.state.bandSeries.forEach((item, index) => {
-                if (!legend[index]) {
-                    item.visible = false;
-                }
-                else if (legend[index] === 'show') {
-                    item.visible = true;
+                for (let bandName in legend) {
+                    if (legend[bandName] === 'show') {
+                        item.visible = true;
+                    }
+                    else {
+                        item.visible = false;
+                    }
                 }
             });
             this.setState({
@@ -393,6 +415,7 @@ export default class Trend extends Component {
 
     // redraw trend
     redrawTrend(min, max) {
+        let self = this;
         let start = min;
         let end = max;
         let name = this.props.params.name;
@@ -474,42 +497,57 @@ export default class Trend extends Component {
         return selectedIndex;
     }
 
+    getTime(start, end, points) {
+        let startTime = 0;
+        let endTime = 0;
+
+        for (let j = 0; j < points.length - 1; j ++) {
+            if (points[j] <= start && points[j + 1] >= start) {
+                if (start - points[j] >= points[j + 1] - start) {
+                    startTime = points[j + 1];
+                }
+                else {
+                    startTime = points[j];
+                }
+            }
+            if (points[j] <= end && points[j + 1] >= end) {
+                if (end - points[j] >= points[j + 1] - end) {
+                    endTime = points[j + 1];
+                }
+                else {
+                    endTime = points[j];
+                }
+            }
+            if (startTime && endTime) {
+                break;
+            }
+        }
+        return {
+            startTime,
+            endTime
+        }
+    }
+
     // label data
     label(start, end, isDealSelectedIndex) {
         const self = this;
         const me = self.chart;
-        let originIndex1 = 0;
+        let originIndex = 0;
         let name = self.props.params.name;
         for (let i = 0; i < me.series.length; i++) {
             if (me.series[i].name === 'base line') {
-                originIndex1 = i;
+                originIndex = i;
                 break;
             }
         }
-        let selectedIndex = [];
-        let points = me.series[originIndex1].points;
-        points.forEach((item, index) => {
-            if (item.x >= Math.round(start) && item.x <= Math.round(end)) {
-                if (item.y) {
-                    selectedIndex.push(index);
-                }
-            }
-        });
-
-        let startTime;
-        let endTime;
-        if (selectedIndex.length) {
-            startTime = points[selectedIndex[0]].x;
-            endTime = points[selectedIndex[selectedIndex.length - 1]].x;
-        }
-        else {
-            return;
-        }
+        let points = me.series[originIndex].xData;
+        let time = self.getTime(start, end, points);
+        let startTime = time.startTime;
+        let endTime = time.endTime;
 
         if (!window.labelObj[name]) {
             window.labelObj[name] = [];
         }
-        window.labelObj[name].push([startTime, endTime]);
 
         let label = 1;
         window.startTime = startTime;
@@ -529,76 +567,21 @@ export default class Trend extends Component {
         const self = this;
         const me = self.chart;
         let name = self.props.params.name;
-        let unselectedIndex = [];
         let originIndex = 0;
-
         for (let i = 0; i < me.series.length; i++) {
             if (me.series[i].name === 'base line') {
                 originIndex = i;
+                break;
             }
         }
+        let points = me.series[originIndex].xData;
+        let time = self.getTime(start, end, points);
+        let startTime = time.startTime;
+        let endTime = time.endTime;
 
-        let points = me.series[originIndex].points;
-        points.forEach((item, index) => {
-            if (item.x >= Math.round(start) && item.x <= Math.round(end)) {
-                if (item.y) {
-                    unselectedIndex.push(index);
-                }
-            }
-        });
-
-        let startTime = 0;
-        let endTime = 0;
-
-        if (unselectedIndex.length) {
-            startTime = points[unselectedIndex[0]].x;
-            endTime = points[unselectedIndex[unselectedIndex.length - 1]].x;
-        }
-        else {
-            return;
-        }
         if (!window.labelObj[name]) {
             window.labelObj[name] = [];
         }
-        let min = startTime;
-        let max = endTime;
-        let tempStart;
-        let tempEnd;
-        for (let i = 0; i < window.labelObj[name].length; i++) {
-            tempStart = window.labelObj[name][i][0];
-            tempEnd = window.labelObj[name][i][1];
-            if (min < tempStart && max > tempEnd) {
-                window.labelObj[name].splice(i, 1);
-            }
-            else if (min < tempStart && max > tempStart && max > tempEnd) {
-                window.labelObj[name].splice(i, 1);
-                window.labelObj[name].push([max, tempEnd]);
-            }
-            else if (min < tempEnd && min > tempStart && max > tempEnd) {
-                window.labelObj[name].splice(i, 1);
-                window.labelObj[name].push([tempStart, min]);
-            }
-            else if (min > tempStart &&  max < tempEnd) {
-                window.labelObj[name].splice(i, 1);
-                window.labelObj[name].push([tempStart, min]);
-                window.labelObj[name].push([max, tempEnd]);
-            }
-            else if (min < tempStart && max === tempStart) {
-
-            }
-            else if (min === tempEnd && max > tempEnd) {
-
-            }
-            else if (min < tempStart && max === tempEnd) {
-                window.labelObj[name].splice(i, 1);
-            }
-            else if (min === tempStart && max > tempEnd) {
-                window.labelObj[name].splice(i, 1);
-            }
-            else if (min === tempStart && max === tempEnd) {
-                window.labelObj[name].splice(i, 1);
-            }
-        }
 
         let label = 0;
         window.startTime = startTime;
@@ -635,8 +618,8 @@ export default class Trend extends Component {
         }
         list.forEach(item => {
             if (item.name === name) {
-                start = item.display.start;
-                end = item.display.end;
+                start = item.time.start;
+                end = item.time.end;
                 return;
             }
         });
@@ -666,7 +649,6 @@ export default class Trend extends Component {
                 chart.series.forEach((item, i) => {
                     if (item.name === 'base line') {
                         self.allSeriesPoints = chart.series[i].points;
-                        self.abnormalSelectedPoints = [];
                         self.min = chart.xAxis[0].min;
                         self.max = chart.xAxis[0].max;
                     }
@@ -708,153 +690,21 @@ export default class Trend extends Component {
             if (!points.length) {
                 return;
             }
+            // return  this.x + ' ' + this.y;
             let tooltip = '';
-            for (let i = 0; i < points.length; i ++) {
-                let name = points[i].series.name;
-                let type = points[i].series.userOptions.type;
+            for (let k = 0; k < points.length; k ++) {
+                let name = points[k].series.name;
+                let type = points[k].series.userOptions.type;
                 if (type === 'area') {
-                    let current;
-                    let total;
-                    let bandName = name;
-                    let band;
-                    let pre;
-                    let next;
-                    let currentTime;
                     for (let i = 0; i < self.state.bands.length; i++) {
-                        band = self.state.bands[i];
-                        if (band.name === bandName) {
+                        let band = self.state.bands[i];
+                        if (band.name === name) {
                             for (let j = 0; j < band.bands.length; j++) {
-                                if (band.bands[j].currentTime.duration.start <= me.x
-                                    && band.bands[j].currentTime.duration.end >= me.x) {
-                                    current = band.bands[j].bandNo;
-                                    total = band.bands[j].bandCount;
-                                    pre = band.bands[j].preTime;
-                                    next = band.bands[j].nextTime;
-                                    currentTime = band.bands[j].currentTime;
-                                    if (current === total && current === 1) {
-                                        tooltip += '<div class="area-tooltip">'
-                                            + '<div class="area-tooltip-content">'
-                                            + '<p class="label-opera label" '
-                                            + 'style="cursor: pointer; color: #388ff7;" '
-                                            + 'data-current-start-time="'
-                                            + currentTime.duration.start + '" '
-                                            + 'data-current-end-time="'
-                                            + currentTime.duration.end
-                                            + '">Label</p>'
-                                            + '<div class="num-tooltip">'
-                                            + '<span class="current-tooltip">'
-                                            + current
-                                            + '</span>'
-                                            + '/'
-                                            + '<span class="total-tooltip">'
-                                            + total
-                                            + '</span>'
-                                            + '</div>'
-                                            + '</div>'
-                                            + '</div>';
-                                    }
-                                    else if (current < total && current === 1) {
-                                        tooltip += '<div class="area-tooltip">'
-                                            + '<div class="area-tooltip-content">'
-                                            + '<p class="label-opera label" '
-                                            + 'style="cursor: pointer; color: #388ff7;" '
-                                            + 'data-current-start-time="'
-                                            + currentTime.duration.start
-                                            + '" data-current-end-time="'
-                                            + currentTime.duration.end
-                                            + '">Label</p>'
-                                            + '<div class="num-tooltip">'
-                                            + '<span class="current-tooltip">'
-                                            + current
-                                            + '</span>'
-                                            + '/'
-                                            + '<span class="total-tooltip">'
-                                            + total
-                                            + '</span>'
-                                            + '<i class="anticon anticon-caret-right load-trend" '
-                                            + 'style="cursor: pointer; color: #388ff7" '
-                                            + 'data-action="right" data-next-start-time="'
-                                            + next.start
-                                            + '" data-next-end-time="'
-                                            + next.end
-                                            + '" data-band-name="'
-                                            + bandName
-                                            + '"></i>'
-                                            + '</div>'
-                                            + '</div>'
-                                            + '</div>';
-                                    }
-                                    else if (current === total && current !== 1) {
-                                        tooltip += '<div class="area-tooltip">'
-                                            + '<div class="area-tooltip-content">'
-                                            + '<p class="label-opera label" '
-                                            + 'style="cursor: pointer; color: #388ff7;" '
-                                            + 'data-current-start-time="'
-                                            + currentTime.duration.start
-                                            + '" data-current-end-time="'
-                                            + currentTime.duration.end
-                                            + '">Label</p>'
-                                            + '<div class="num-tooltip">'
-                                            + '<i class="anticon anticon-caret-left load-trend" '
-                                            + 'style="cursor: pointer; color: #388ff7" '
-                                            + 'data-action="left" data-pre-start-time="'
-                                            + pre.start
-                                            + '" data-pre-end-time="'
-                                            + pre.end
-                                            + '" data-band-name="'
-                                            + bandName
-                                            + '"></i>'
-                                            + '<span class="current-tooltip">'
-                                            + current
-                                            + '</span>'
-                                            + '/'
-                                            + '<span class="total-tooltip">'
-                                            + total
-                                            + '</span>'
-                                            + '</div>'
-                                            + '</div>'
-                                            + '</div>';
-                                    }
-                                    else {
-                                        tooltip += '<div class="area-tooltip">'
-                                            + '<div class="area-tooltip-content">'
-                                            + '<p class="label-opera label" '
-                                            + 'style="cursor: pointer; color: #388ff7;" '
-                                            + 'data-current-start-time="'
-                                            + currentTime.duration.start
-                                            + '" data-current-end-time="'
-                                            + currentTime.duration.end
-                                            + '">Label</p>'
-                                            + '<div class="num-tooltip">'
-                                            + '<i class="anticon anticon-caret-left load-trend"'
-                                            + 'style="cursor: pointer; color: #388ff7" '
-                                            + 'data-action="left" data-pre-start-time="'
-                                            + pre.start
-                                            + '" data-pre-end-time="'
-                                            + pre.end
-                                            + '" data-band-name="'
-                                            + bandName
-                                            + '"></i>'
-                                            + '<span class="current-tooltip">'
-                                            + current
-                                            + '</span>'
-                                            + '/'
-                                            + '<span class="total-tooltip">'
-                                            + total
-                                            + '</span>'
-                                            + '<i class="anticon anticon-caret-right load-trend"'
-                                            + ' style="cursor: pointer; color: #388ff7" '
-                                            + 'data-action="right" data-next-start-time="'
-                                            + next.start
-                                            + '" data-next-end-time="'
-                                            + next.end
-                                            + '" data-band-name="'
-                                            + bandName
-                                            + '"></i>'
-                                            + '</div>'
-                                            + '</div>'
-                                            + '</div>';
-                                    }
+                                let currentBand = band.bands[j];
+                                if (currentBand.currentTime.duration.start <= me.x
+                                    && currentBand.currentTime.duration.end >= me.x) {
+                                    tooltip = self.labelTooltip(currentBand.bandNo, currentBand.bandCount,
+                                        currentBand.preTime, currentBand.nextTime, currentBand.currentTime, name, me.x);
                                     break;
                                 }
                             }
@@ -863,13 +713,16 @@ export default class Trend extends Component {
                 }
                 else {
                     let menuList = '';
-                    if (name === 'label line' && points[i].color === 'red') {
+                    let name = points[k].series.name;
+                    if (name === 'label line' && points[k].color === 'red') {
                         if (self.state.menuList.length) {
                             menuList += '<ul class="selection">';
                             for (let i = 0; i < self.state.menuList.length; i++) {
                                 menuList += ''
                                     + '<li style="cursor: pointer;" data-action="'
                                     + self.state.menuList[i].action
+                                    + '" data-currentx="'
+                                    + me.x
                                     + '">'
                                     + self.state.menuList[i].name
                                     + '</li>';
@@ -881,6 +734,9 @@ export default class Trend extends Component {
                         }
                         tooltip = menuList;
                     }
+                    else if (name === 'base line') {
+                        tooltip = '';
+                    }
                 }
             }
             if (tooltip.length) {
@@ -920,11 +776,8 @@ export default class Trend extends Component {
             },
             boost: {
                 enabled: true,
-                seriesThreshold: 10000,
-                useGPUTranslations: true,
-                debug: {
-                    timeRendering: true
-                }
+                useAlpha: false,
+                allowForce: false
             },
             title: {
                 text: '',
@@ -1133,20 +986,21 @@ export default class Trend extends Component {
                     },
                     tooltip: {
                         hideDelay: 5000
-                    },
-                    turboThreshold: 3000
-                },
+                    }
+                }
+                ,
                 area: {
                     point: {
                         events: {}
                     },
                     animation: false,
-                    trackByArea: true,
-                    connectNulls: false
-                },
+                    trackByArea: true
+                }
+                ,
                 series: {
                     stickyTracking: false,
-                    turboThreshold: 3000,
+                    boostThreshold: boostThreshold,
+                    threshold: 100000,
                     marker: {
                         states: {
                             hover: {
@@ -1159,8 +1013,6 @@ export default class Trend extends Component {
                             enabled: false
                         }
                     },
-                    events: {
-                    },
                     point: {
                         events: {
                             mouseOver: mouseOverFunction
@@ -1261,7 +1113,6 @@ export default class Trend extends Component {
         let listUrl = api.getDataList;
         axiosInstance.get(listUrl).then(function (response) {
             const data = response.data;
-            let name = data.data && data.data.length ? data.data[0].name : '';
             self.setState({
                 list: data.data
             });
@@ -1273,67 +1124,22 @@ export default class Trend extends Component {
             let trendsBands = [];
             let trendsTrends = [];
             let name = self.props.params.name;
-            let zones = [];
             trends.forEach(item => {
                 if (item.type === 'arearange') {
-                    item.lineWidth = 0;
-                    item.color = 'rgba(48,225,40, 0.1)';
-                    item.fillOpacity = 0.1;
-                    item.zIndex = 1;
-                    item.enableMouseTracking = false;
-                    item.showInLegend = true;
-                    item.dataGrouping = {
-                        enabled: false
-                    };
+                    self.optionAreaRange(item);
                     trendsTrends.push(item);
                 }
                 if (item.type === 'line' || !item.type) {
                     if (item.name === 'base line') {
-                        item.zIndex = 99;
-                        item.lineWidth = 2;
-                        item.color = '#388FF7';
-                        item.dataGrouping = {
-                            enabled: false
-                        };
+                        self.optionBaseLine(item);
                     }
                     if (item.name === 'label line') {
-                        item.showInLegend = false;
-                        item.lineWidth = 2;
-                        item.zIndex = 100;
-                        item.enableMouseTracking = true;
-                        item.zoneAxis = 'x';
-                        for (let i = 0; i < item.data.length - 1; i++) {
-                            if (!item.data[i][1] && item.data[i + 1][1]) {
-                                zones.push({
-                                    color: '#388FF7',
-                                    value: item.data[i + 1][0]
-                                });
-                            }
-                            if (item.data[i][1] && !item.data[i + 1][1]) {
-                                zones.push({
-                                    color: 'red',
-                                    value: item.data[i][0]
-                                });
-                            }
-                        }
-                        zones.push({
-                            color: '#388FF7'
-                        });
-                        item.zones = zones;
-                        item.dataGrouping = {
-                            enabled: false
-                        };
+                        self.optionLabelLine(item);
                     }
                     trendsTrends.push(item);
                 }
                 if (item.type === 'area') {
-                    item.lineWidth = 0;
-                    item.fillOpacity = 0.3;
-                    item.zIndex = 0;
-                    item.enableMouseTracking = true;
-                    item.dataGrouping = {
-                        enabled: false
-                    };
+                    self.optionArea(item);
                     item.visible = false;
                     trendsBands.push(item);
                 }
@@ -1342,6 +1148,10 @@ export default class Trend extends Component {
             options.yAxis.max = data.data.yAxis[1];
             options.series = trends;
             options.chart.width = self.getTrendWidth();
+
+            // trends.splice(3)
+            // trends.splice(1, 1)
+
             clearInterval(self.loadingTime);
             clearInterval(self.loadingTipTime);
             clearInterval(self.loadingTrendTipTime);
@@ -1363,9 +1173,11 @@ export default class Trend extends Component {
                 loading: false,
                 neverReflow: reflowThumb
             };
+            // redraw trend
             self.setState(paramsOptions);
             eventProxy.trigger('loadBand', {
-                name
+                name,
+                trendsBands
             });
             self.chart.hideLoading();
             eventProxy.trigger('loadTrend', {
@@ -1392,8 +1204,6 @@ export default class Trend extends Component {
         let option;
         let startTime;
         let endTime;
-        // Set the extreme value to avoid the big picture redrawing before the request
-        self.refs.container.chart.xAxis[0].setExtremes(self.min, self.max);
         if (e.trigger) {
             if (trigger.indexOf(e.trigger) === -1) {
                 return;
@@ -1427,13 +1237,163 @@ export default class Trend extends Component {
             }
             startTime = Math.round(e.userMin);
             endTime = Math.round(e.userMax);
+            self.min = startTime;
+            self.max = endTime;
             let url = api.getTrend
                 + self.props.params.name
                 + '/curves?'
                 + 'startTime=' + startTime
                 + '&endTime=' + endTime;
-            self.getTrendData(url, option, true, false);
+            self.refs.container.chart.xAxis[0].setExtremes(self.min, self.max);
+        }
+    }
+
+    optionAreaRange(item) {
+        let self = this;
+        item.lineWidth = 0;
+        item.color = 'rgb(240,255,240)';
+        item.zIndex = 1;
+        item.enableMouseTracking = false;
+        item.showInLegend = true;
+        item.dataGrouping = {
+            enabled: false
+        };
+    }
+
+    optionBaseLine(item) {
+        item.zIndex = 99;
+        item.lineWidth = 2;
+        item.color = '#388FF7';
+        item.dataGrouping = {
+            enabled: false
+        };
+        this.baseLine = item.data;
+    }
+
+    optionLabelLine(item) {
+        let self = this;
+        let zones = [];
+        item.showInLegend = false;
+        item.lineWidth = 2;
+        item.zIndex = 100;
+        item.enableMouseTracking = true;
+        item.zoneAxis = 'x';
+        item.dataGrouping = {
+            enabled: false
+        };
+        item.color = 'red';
+    }
+
+    optionArea(item) {
+        item.lineWidth = 0;
+        item.fillOpacity = 0.3;
+        item.zIndex = 0;
+        item.enableMouseTracking = true;
+        item.dataGrouping = {
+            enabled: false
+        };
+    }
+
+    labelTooltip(current, total, pre, next, currentTime, bandName, x) {
+        let tooltip = '';
+        let preStartTime = pre ? pre.start : '';
+        let preEndTime = pre ? pre.start : '';
+        let nextStartTime = next ? next.start : '';
+        let nextEndTime = next ? next.end : '';
+        tooltip += '<div class="area-tooltip">'
+            + '<div class="area-tooltip-content">'
+            + '<p class="label-opera label" '
+            + 'style="cursor: pointer; color: #388ff7;" '
+            + 'data-current-start-time="'
+            + currentTime.duration.start
+            + '" data-current-end-time="'
+            + currentTime.duration.end
+            + '">Label</p>';
+        // eg. 1/1
+        if (current === total && current === 1) {
+            tooltip += '<div class="num-tooltip">'
+                + '<span class="current-tooltip">'
+                + current
+                + '</span>'
+                + '/'
+                + '<span class="total-tooltip">'
+                + total
+                + '</span>'
+                + '</div>';
+        }
+        // eg. 1/6
+        else if (current < total && current === 1) {
+            tooltip += '<div class="num-tooltip">'
+                + '<span class="current-tooltip">'
+                + current
+                + '</span>'
+                + '/'
+                + '<span class="total-tooltip">'
+                + total
+                + '</span>'
+                + '<i class="anticon anticon-caret-right load-trend"'
+                + ' style="cursor: pointer; color: #388ff7" '
+                + 'data-action="right" data-next-start-time="'
+                + nextStartTime
+                + '" data-next-end-time="'
+                + nextEndTime
+                + '" data-band-name="'
+                + bandName
+                + '"></i>'
+                + '</div>';
+        }
+        // eg. 6/6
+        else if (current === total && current !== 1) {
+            tooltip += '<div class="num-tooltip">'
+                + '<i class="anticon anticon-caret-left load-trend"'
+                + 'style="cursor: pointer; color: #388ff7" '
+                + 'data-action="left" data-pre-start-time="'
+                + preStartTime
+                + '" data-pre-end-time="'
+                + preEndTime
+                + '" data-band-name="'
+                + bandName
+                + '"></i>'
+                + '<span class="current-tooltip">'
+                + current
+                + '</span>'
+                + '/'
+                + '<span class="total-tooltip">'
+                + total
+                + '</span>'
+                + '</div>';
+        }
+        else {
+            tooltip += '<div class="num-tooltip">'
+            + '<i class="anticon anticon-caret-left load-trend"'
+            + 'style="cursor: pointer; color: #388ff7" '
+            + 'data-action="left" data-pre-start-time="'
+            + preStartTime
+            + '" data-pre-end-time="'
+            + preEndTime
+            + '" data-band-name="'
+            + bandName
+            + '"></i>'
+            + '<span class="current-tooltip">'
+            + current
+            + '</span>'
+            + '/'
+            + '<span class="total-tooltip">'
+            + total
+            + '</span>'
+            + '<i class="anticon anticon-caret-right load-trend"'
+            + ' style="cursor: pointer; color: #388ff7" '
+            + 'data-action="right" data-next-start-time="'
+            + nextStartTime
+            + '" data-next-end-time="'
+            + nextEndTime
+            + '" data-band-name="'
+            + bandName
+            + '"></i>'
+            + '</div>';
         }
+       tooltip += '</div></div>';
+        return tooltip;
     }
 
     returnMenuList(menuList) {