diff --git a/gicc/Scripts/canvas-report.js b/gicc/Scripts/canvas-report.js
new file mode 100644
index 0000000000000000000000000000000000000000..bf38f83e8d30605933c2ce9eae341324106dea08
--- /dev/null
+++ b/gicc/Scripts/canvas-report.js
@@ -0,0 +1,339 @@
+
+
+
+function RiskLoad() {
+    let endThickDom = document.getElementById('progress-thick');
+    let endThinDom = document.getElementById('progress-thin');
+    let arrayColor = ['#ff107f', '#ff8010', '#10ffef', '#2bff10'] //çº¢ï¼Œé»„ï¼Œè“ï¼Œç»¿
+    let num = [65.0, 30.3, 4.7]; //ä½Žä¸é«˜çŠ¶æ€å€¼å¾—æ•°ç»„
+
+    // ä½¿ç”¨åŽå°è¿”å›žæ•°æ®å¡«å……
+    $.getJSON("http://172.30.2.105:2019/data-plat/risk/statistics", function(data) {
+        const risk = data.data;
+        const lowRisk = risk.lowRisk ? risk.lowRisk : 0;
+        const mediumRisk = risk.mediumRisk ? risk.mediumRisk : 0;
+        const highRisk = risk.highRisk ? risk.highRisk : 0;
+        const totalRisk = lowRisk + mediumRisk + highRisk;
+        num[0] = totalRisk ? ((lowRisk / totalRisk) * 100) : 0;
+        num[1] = totalRisk ? ((mediumRisk / totalRisk) * 100) : 0;
+        // num[2] = totalRisk ? ((highRisk / totalRisk) * 100) : 0;
+        num[2] = 100 - num[0].toFixed(1) - num[1].toFixed(1);
+    });
+
+
+    // // è°ƒç”¨å®šæ—¶å™¨å®žçŽ°åŠ¨æ€æ•ˆæžœ
+    let timer = null;
+    let n1 = 0;
+    let timer2 = null;
+    let n2 = 0;
+    setTimeout(() => {
+        setTimeout(() => {
+            init(num[0])
+            n1 = 0;
+            n2 = 0;
+        }, 0)
+        setTimeout(() => {
+            init(num[1])
+            n1 = 0;
+            n2 = 0;
+        }, 3500)
+        setTimeout(() => {
+            init(num[2])
+            n1 = 0;
+            n2 = 0;
+            setTimeout(() => {
+                $(endThickDom).animate({
+                    opacity: 0
+                }, 1000)
+                $(endThinDom).animate({
+                    opacity: 0
+                }, 1000)
+            }, 1000)
+        }, 6000)
+        setTimeout(() => {
+            end('progress-thick')
+            $(endThickDom).animate({
+                opacity: 1
+            }, 1000)
+            $(endThinDom).animate({
+                opacity: 1
+            }, 1000)
+        }, 8000)
+    }, 1500)
+
+    /**
+     *æ‰§è¡ŒåŠ¨ç”»ä¸»æ–¹æ³•
+     *
+     * @param {Number} param æ•°æ®å€¼
+     */
+    function init(param) {
+        loadCanvasThin(param / 100, param);
+        loadCanvasTchik(param / 100, param);
+    }
+
+    function loadCanvasTchik(nowT, value) {
+        timer2 = setInterval(() => {
+            if (n2 >= nowT.toFixed(3)) {
+                clearInterval(timer2);
+            } else {
+                n2 += 0.001;
+                if (value >= 33 && value < 50) {
+                    circleProgressThick(n2, 'progress-thick', arrayColor[2])
+                } else if (value >= 50 && value < 100) {
+                    circleProgressThick(n2, 'progress-thick', arrayColor[3]) //ä½Ž
+                } else if (value >= 6 && value < 33) {
+                    circleProgressThick(n2, 'progress-thick', arrayColor[1]) //ä¸
+                } else if (value >= 0 && value < 6) {
+                    circleProgressThick(n2, 'progress-thick', arrayColor[0], 5) //é«˜
+                }
+            }
+        }, 1);
+    }
+
+    function loadCanvasThin(nowT) {
+        timer = setInterval(() => {
+            if (n1 >= nowT.toFixed(3)) {
+                clearInterval(timer);
+            } else {
+                n1 += 0.001;
+                circleProgressThin(n1, 'progress-thin')
+            }
+        }, 1);
+    }
+    /**
+     *
+     *ç»˜åˆ¶èƒŒæ™¯ç²—çº¿
+     * @param {Number} cur   ç”¨æ¥è®¡ç®—å¼§åº¦çš„å°æ•°
+     * @param {String} id    idé€‰æ‹©å™¨çš„åç§°
+     * @param {String} color çº¿çš„è‰²å€¼
+     */
+    function circleProgressThick(cur, id, color, step = 4) {
+        let canvas = document.getElementById(id);
+        let context = canvas.getContext('2d');
+        let c_width = canvas.width
+        // console.log('c_width: ', c_width);
+        let c_height = canvas.height
+        // console.log('c_height: ', c_height);
+        context.clearRect(0, 0, c_width, c_height);
+        context.beginPath();
+        context.arc(c_width / 2, c_height / 2, 80, Math.PI * 1 + Math.PI * 0.5 * cur, Math.PI * 1 + Math.PI * 0.5 * cur * step,
+            false);
+        let grad = context.createLinearGradient(0, 0, 300, 0);
+        grad.addColorStop(0, '#4D5AFF'); // è“
+        grad.addColorStop(1, color);
+        context.strokeStyle = grad;
+        context.lineWidth = 18;
+        context.lineCap = "round";
+        context.stroke();
+        context.closePath();
+    }
+
+    /**
+     *ç»˜åˆ¶èƒŒæ™¯ç»†çº¿
+     *
+     * @param {Number} cur ç”¨æ¥è®¡ç®—å¼§åº¦
+     * @param {String} id  idé€‰æ‹©å™¨çš„åç§°
+     */
+    function circleProgressThin(cur, id) {
+        let canvas = document.getElementById(id);
+        let context = canvas.getContext('2d');
+        let c_width = canvas.width
+        let c_height = canvas.height
+        // // æ¸…ç©ºç”»å¸ƒ
+        context.clearRect(0, 0, c_width, c_height);
+        context.beginPath();
+        context.arc(c_width / 2, c_height / 2, 80, Math.PI * 0.5 * (1 + cur), Math.PI * 1 + (Math.PI * 1 * cur), false);
+        context.strokeStyle = '#4D5AFF';
+        context.lineWidth = 3
+        context.lineCap = "round";
+        context.stroke();
+        context.closePath();
+        //æ–‡å—
+        text(context, cur, c_width, c_height)
+
+    };
+    /**
+     *ç»˜åˆ¶æ–‡å—
+     *
+     * @param {Object} context   canvaså¯¹è±¡
+     * @param {Number} n         ç”¨æ¥æ˜¾ç¤ºç™¾åˆ†æ¯”çš„æ•°å€¼
+     * @param {Number} c_width   canvasçš„å®½åº¦
+     * @param {Number} c_height  canvasçš„é«˜åº¦
+     */
+    function text(context, n, c_width, c_height) {
+        context.font = "bold 19pt myThirdFont"; // å—ä½“å¤§å°ï¼Œæ ·å¼
+        context.fillStyle = '#fff'; // é¢œè‰²
+        context.textAlign = 'center'; // ä½ç½®
+        context.textBaseline = 'middle';
+        context.moveTo(100, 75); // æ–‡å—å¡«å……ä½ç½®
+        let num = (n * 100).toFixed(1)//ï¼ï¼ï¼ä¿®æ”¹å°æ•°ç²¾åº¦ä½æ•°
+        let status = ''
+        if (num >= 33 && num < 50) {
+            status = 'ä½Ž'
+        } else if (num >= 50 && num < 100) {
+            status = 'ä½Ž'
+        } else if (num >= 6 && num < 33) {
+            status = 'ä¸'
+        } else if (num >= 0 && num < 6) {
+            status = 'é«˜'
+        }
+        context.fillText(num + "%", c_width / 2, (c_height / 2) - 30);
+        context.font = "bold 25pt myFourthFont"
+        context.fillStyle = '#fff'; // é¢œè‰²
+        context.textAlign = 'center'; // ä½ç½®
+        context.textBaseline = 'middle';
+        context.moveTo(100, 75); // æ–‡å—å¡«å……ä½ç½®
+        context.fillText(status, c_width / 2, (c_height / 2 + 5));
+        context.font = "bold 12pt myThirdFont"
+        context.fillStyle = '#fff'; // é¢œè‰²
+        context.textAlign = 'center'; // ä½ç½®
+        context.textBaseline = 'middle';
+        context.moveTo(100, 75); // æ–‡å—å¡«å……ä½ç½®
+        context.fillText("é£Žé™©ç‰çº§", c_width / 2, (c_height / 2) + 40);
+    }
+
+    /**
+     *ç»˜åˆ¶åº•å›¾åˆ»åº¦ç›˜
+     *
+     * @param {String} id idé€‰æ‹©å™¨çš„åç§°
+     */
+    function drawMark(id) {
+        let canvas = document.getElementById(id);
+        let context = canvas.getContext('2d');
+        let c_width = canvas.width
+        let c_height = canvas.height
+        context.save();
+        context.clearRect(0, 0, c_width, c_height);
+        context.beginPath();
+        context.arc(c_width / 2, c_height / 2, 100, 0, 2 * Math.PI);
+        context.fillStyle = 'rgba(0, 0, 0, 0.2)';
+        context.fill();
+        context.lineWidth = "2";
+        context.strokeStyle = "rgba(255, 255, 255, 0.2)";
+        context.translate(canvas.width / 2, canvas.height / 2);
+        for (let i = 0; i < 120; i++) {
+            context.rotate(3 / 180 * Math.PI);
+            context.beginPath();
+            context.moveTo(0, -75);
+            context.lineTo(0, -85);
+            context.stroke();
+        }
+        context.restore();
+    }
+
+    // æœ€åŽçš„åœ†ç›˜
+    function end(id, color) {
+        let canvas1 = document.getElementById('progress-thin');
+        let context1 = canvas1.getContext('2d');
+        let c_width1 = canvas1.width
+        let c_height1 = canvas1.height
+        context1.clearRect(0, 0, c_width1, c_height1);
+
+
+        let canvas = document.getElementById(id);
+        let context = canvas.getContext('2d');
+        let c_width = canvas.width
+        let c_height = canvas.height
+        context.clearRect(0, 0, c_width, c_height);
+        context.beginPath();
+        context.arc(c_width / 2, c_height / 2, 80, Math.PI * 0, Math.PI * 1,
+            false);
+        let grad2 = context.createLinearGradient(70, 0, 300, 0);
+        grad2.addColorStop(0, '#4D5AFF'); // è“
+        grad2.addColorStop(1, '#2bff10'); //ç»¿
+        context.strokeStyle = grad2;
+        context.lineWidth = 20
+        context.lineCap = "round";
+        context.stroke();
+
+        context.beginPath();
+        context.arc(c_width / 2, c_height / 2, 80, Math.PI * 1.1, Math.PI * 1.2,
+            false);
+        let grad = context.createLinearGradient(116, 0, 150, 0);
+        grad.addColorStop(0, '#9808a9'); // è“
+        grad.addColorStop(1, '#ff107f'); //çº¢
+
+        // let grad = context.createLinearGradient(0, 0, 150, 0);
+        // grad.addColorStop(0, '#4D5AFF'); // è“
+        // grad.addColorStop(1, '#ff107f'); //çº¢
+        context.strokeStyle = grad;
+        context.lineWidth = 20
+        context.lineCap = "round";
+        context.stroke();
+
+
+        context.beginPath();
+        context.arc(c_width / 2, c_height / 2, 80, Math.PI * 1.3, Math.PI * 1.9,
+            false);
+        let grad1 = context.createLinearGradient(70, 0, 300, 0);
+        grad1.addColorStop(0, '#4D5AFF'); // è“
+        grad1.addColorStop(1, '#ff8010'); //é»„
+        context.strokeStyle = grad1;
+        context.lineWidth = 20
+        context.lineCap = "round";
+        context.stroke();
+
+        context.font = "bold 20pt Arial"; // å—ä½“å¤§å°ï¼Œæ ·å¼
+        context.fillStyle = 'white'; // é¢œè‰²
+        context.textAlign = 'center'; // ä½ç½®
+        context.textBaseline = 'middle';
+        context.moveTo(100, 75); // æ–‡å—å¡«å……ä½ç½®
+        context.fillText('é£Žé™©', c_width / 2, (c_height / 2 - 20));
+        context.fillText("ç‰çº§", c_width / 2, (c_height / 2) + 20);
+        // é«˜line
+        context.beginPath();
+        context.moveTo(120, 150);
+        context.lineTo(80, 150);
+        context.lineTo(70, 140);
+        context.lineWidth = 1
+        context.strokeStyle = "#fff";
+        context.stroke();
+        // é«˜text
+        context.font = " 12pt Arial"; // å—ä½“å¤§å°ï¼Œæ ·å¼
+        context.fillStyle = 'white'; // é¢œè‰²
+        context.textAlign = 'center'; // ä½ç½®
+        context.textBaseline = 'middle';
+        context.moveTo(0, 0); // æ–‡å—å¡«å……ä½ç½®
+        context.fillText('é«˜', 100, 120);
+        context.fillText(num[2].toFixed(1) + '%', 100, 140);
+        // ä¸line
+
+        context.beginPath();
+        context.moveTo(280, 150);
+        context.lineTo(320, 150);
+        context.lineTo(330, 140);
+        context.lineWidth = 1
+        context.strokeStyle = "#fff";
+        context.stroke();
+        // ä¸text
+        context.font = " 12pt Arial"; // å—ä½“å¤§å°ï¼Œæ ·å¼
+        context.fillStyle = 'white'; // é¢œè‰²
+        context.textAlign = 'center'; // ä½ç½®
+        context.textBaseline = 'middle';
+        context.moveTo(100, 75); // æ–‡å—å¡«å……ä½ç½®
+        context.fillText('ä¸', 300, 120);
+        context.fillText(num[1].toFixed(1) + '%', 300, 140);
+
+        // ä½Žline
+
+        context.beginPath();
+        context.moveTo(200, 290);
+        context.lineTo(200, 330);
+        context.lineTo(180, 340);
+        context.lineWidth = 1
+        context.strokeStyle = "#fff";
+        context.stroke();
+        // ä½Ž text
+        context.font = " 12pt Arial"; // å—ä½“å¤§å°ï¼Œæ ·å¼
+        context.fillStyle = 'white'; // é¢œè‰²
+        context.textAlign = 'center'; // ä½ç½®
+        context.textBaseline = 'middle';
+        context.moveTo(100, 75); // æ–‡å—å¡«å……ä½ç½®
+        context.fillText('ä½Ž', 170, 300);
+        context.fillText(num[0].toFixed(1) + '%', 170, 320);
+
+    }
+    drawMark('bg')
+    circleProgressThick(0.34, 'progress-thick', arrayColor[2])
+    circleProgressThin(0.34, 'progress-thin')
+}
diff --git a/gicc/Scripts/china.js b/gicc/Scripts/china.js
new file mode 100644
index 0000000000000000000000000000000000000000..c58d516fcbd50d4867b976aa4afd6ad28205d5ab
--- /dev/null
+++ b/gicc/Scripts/china.js
@@ -0,0 +1,46 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['exports', 'echarts'], factory);
+    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
+        // CommonJS
+        factory(exports, require('echarts'));
+    } else {
+        // Browser globals
+        factory({}, root.echarts);
+    }
+}(this, function (exports, echarts) {
+    var log = function (msg) {
+        if (typeof console !== 'undefined') {
+            console && console.error && console.error(msg);
+        }
+    }
+    if (!echarts) {
+        log('ECharts is not Loaded');
+        return;
+    }
+    if (!echarts.registerMap) {
+        log('ECharts Map is not loaded')
+        return;
+    }
+    echarts.registerMap('china', {"type":"FeatureCollection","features":[{"id":"710000","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@Â°ÃœÂ¯Ã›"],["@@Æ›Ä´Ã•ÆŠÃ‰É¼Ä£ÂºÃ°Ê€\\ÆŽsÃ†NÅŒÃ”ÄšÃ¤ÂœnÃœÆ¤ÉŠÄ‚Ç€Ä†Ä´ÂžÄ¤ÇŠÅ¨xÄšÄ®Ç‚ÆºÃ²ÆŒÂ‚Â–Ã¢Ã”Â®Ä®XÅ¦Å£Æ¸ZÃ»ÃÂ‹Æ•Æ‘GÄ‘Â¨ÄMÃ³Â·Ä™cÃ«ÆÉ‰lÃÆ¯Ö¹Ã…Åƒ^Ã“Â·ÂÂÅ›ÅƒÇ‹ÆÄÂÃÃ¥É›GÉ‰Â™Â¿@ÄƒÆ‘ÂŽÂ¥Ä˜WÇ¬ÃÄ¶ÅÃ¢"],["@@\\p|WoYGÂ¿Â¥IÂ†j@Â¢"],["@@Â…Â¡Â‰@ÂÂˆV^RqÂˆBÂbAÂŒnTXeRzÂ¤LÂžÂ«Â³I"],["@@Ã†EEÂ—Â„kWqÃ«Â @Âœ"],["@@fced"]],"encodeOffsets":[[[122886,24033]],[[123335,22980]],[[122375,24193]],[[122518,24117]],[[124427,22618]],[[124862,26043]]]},"properties":{"cp":[121.509062,25.044332],"name":"å°æ¹¾","childNum":6}},{"id":"130000","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@o~Â†Z]Â‚ÂªrÂ‰Âºc_Ä§Â²GÂ¼s`jÃŽÅ¸nÃ¼sÃ‚ÂœÅ‚NX_Â“M`Ã‡Â½Ã“nUKÂ…ÄœÂÄ“sÂ¤ÂÂ©yrÃ½Â§uÄ£ÂŒÂcÂ†JÂŠÂ›e"],["@@U`TsÂ¿mÃ‚Â‚"],["@@oÂºÆ‹Ã„dÂ–eVÂŽDJjÂ£Â€J|Ã…dzÃ‚Â•Ft~ÂžKÅ¨Â¸IÃ†v|Â”Â‡Â¢r}Ã¨Â†ÂŽonbÂ˜}`RÃŽÃ„nÂ°Ã’dÃžÂ²Â„^Â®Â’lnÃÃ¨Ä„lÃ°Ã“ÂœÃ—]ÂªÃ†}ÂÂLiÄ‚Â±Ã–Â`^Â°Ã‡Â¶pÂ®Ä‘DcÂœÅ‹`ÂÂ–ZÃ”Â’Â¶ÃªqvFÃ†ÂšÂ†NÂ®Ä†THÂ®Â¦OÂ’Â¾ÂŠIbÃÃ£Â´BÄÉ¢Å´Ã†ÃÈ¦pÂ–ÄÃžXRÂ€Â·nndOÂžÂ¤Â’OÃ€ÄˆÆ’ÂQgÂ˜ÂµFo|gÈ’Ä™SWbÂ©osx|hYhÂ•gÅƒfmÃ–Ä©nÂºÂ€TÃŒÂ’SpÂ›Â¢dYÄ¤Â¶UÄˆjlÂ’ÇpÃ¤Ã¬Ã«|Â³kÃ›fwÂ²Xjz~Ã‚qbTÂŠÃ‘Â„Ä›Å¨@|oMÂ‡Â’zvÂ¢ZrÃƒVwÂ¬Å§Ä–Â¸fÂŒÂ°ÃTÂ€ÂªqÂŽs{SÂžÂ¯rÂ Ã¦ÃlNdÂ®Â²ÄžÂ Ç†iGÄ˜Â‚JÂ™Â¼lr}~KÂ¨Å¸ÆÃŒWÃ¶Â€Â™Ã†ÂŠzRÂšÂ¤lÃªmÄžLÃŽÂ„Â’Â@Â¡|q]SvKÂ€Ã‘cwpÃÃÂÂ†Ä¿ÂÄ‡Ã¨nÄªWÂlÄ„kT}ÂˆJÂ”Â¤~ÂƒÃˆTÂÂ„dÂ„Â™pddÊ¾Ä¬ÂŠÂ”ÂŽBVtÂ„EÃ€Â¢Ã´PÄŽÆ—Ã¨@~Â‚kÂ–Ã¼\\rÃŠÄ”Ã–Ã¦W_Â§Â¼FÂ˜Â†Â´Â©Ã²DÃ²jÂÂ’ÂˆYÃˆrbÄžÄÃ¸Å€G{Æ€|Â¦Ã°rb|Ã€H`pÊžkvÂ‚GpuARhÃžÃ†Ç¶gÄ˜ÂŠTÂÇ¼Æ¹SÂ£Â¨Â¡Ã¹Â³Å˜Ã]Â¿Ã‚yÂÂ™Ã´EPÂ xXÂ¶ÂÂ¹ÃœÂ‡OÂ¡Â“gÃšÂ¡IwÃƒÃ©Â‘Â¦Ã…BÂ‡Ã|Ã‡Â°Â…NÂ«ÃºmHÂ¯ÂÂ‹Ã¢ÂŸDÃ¹ÂŽyÅœÂžÅ²IÃ„uÄÂ¨DÂÂžÂ•Â¸dÉ‚Â‡ÂÂ‚FÂŸÂƒÂ•Â›OhÂ‡Ä‘Â©OÂŸÂ›iÃƒ`ww^ÂƒÃŒkÂŸÂ‘Ã‘HÂ«Æ‡Ç¤Å—ÄºtFuÂ…{Z}Ã–@UÂ‡Â´Â…ÊšLgÂ®Â¯OÄ±Â°ÃƒwÂŸÂ ^Â˜Â—Â€VbÃ‰sÂ‡ÂˆmAÂ…Ãª]]wÂ„Â§Â›RRlÂ£Â‡ÈÂµuÂ¯b{ÃDÄ›Ã¯Ã¿È§ÂŽuTÂ£Ä¡ÂƒÄ›Å—ÆƒÄÂ“QÂ¨fVÂ†Æ‹Â•Æ…nÂa@Â‘Â³@ÂšÄÂ„yÃƒÂ½ÂIÄ¹ÃŠKÂšÅfÄ‹Å°Ã³ÂŒxV@tÂÂˆÆ¯ÂŒJÂ”]eÂƒRÂ¾fe|rHAÂ˜|h~Ä–ÆlÂ§ÃÂŠlTÃbÂ Ã˜oÂˆÃ…bbxÂ³^zÂÃƒÄ¶ÂšÂ¶SjÂ®AÂ”yÃ‚hÃ°k`ÂšÂ«PÂ€Â”Ã‹ÂˆÂµEFÂ†Ã›Â¬YÂ¨Ä»rÃµqiÂ¼Â‰WiÂ°Â§ÂÂ’ÃÂ±Â´Â°^[ÂˆÃ€|Ä O@Ã†xO\\tÂŽa\\tÄ•tÃ»{Ä¡ÂŒÈ§XÃ½ÄªÃ“jÃ¹ÃŽRbÂ›Âš^ÃŽÂ›fK[ÃÂdÄ›YfÃÃ™TyÂŽuUSyÅŒÅÅ¯@OiÂ½Â’Ã©Å…ÂaVcÅ™Â§axÂ¹XÅ»Ã¡cÂ‡ÂžWUÂ£Ã´Ã£ÂºQÂ¨Ã·Ã‘wsÂ¥qEHÂ‰Ã™|Â‰Â›Å¡YQoÅ•Ã‡yÃ¡Ä‚Â£MÃƒÂ°oÅ¥ÂÃŠÂ‰PÂ¡mÂÂšWOÂ¡Â€vÂ†{Ã´vÃ®Ä“ÃœISpÃŒhpÂ¨Â Â‘jÂ†deÅ”QÃ–jÂ˜XÂ³Ã Â™Äˆ[n`Yp@UÂžÂ–cM`Â’RKhÂŒEbÂœÂ”pÅžlNutÂ®EtqÂ‚nsÃÂŠgAÂÂ‹iÃºÂÂ‹oHÂ‡qCXÂ‡Â”hfguÂ“~ÃÂ‹WPÂ½Â¢G^}Â¯Ã…Ä«GCÂŸÂÃ‘^Ã£ziMÃ¡Ä¼MTÃƒÆ˜rMc|O_ÂÂžÂ¯ÅŽÂ´|Â‡morDkO\\mÄ†Jfl@cÄ¢Â¬Â¢aÄ¦tRÄ±Ã’Â™Â¾Ã¹Æ€^juÅ³Å“KÂÂƒUFyÂ™Â—ÆÂ…Â›Ä«Ã›Ã·Ä…VÃ—qÆ¥VÂ¿aÈ‰dÂ³ÂBÂ›qPBmÂ›aÃ‹Ä‘Å»Ä£mÂ“Ã…Â®VÂŠÂ¹d^KÂ‡KoÂŸnYgÂ“Â¯XhqaÂ”LduÂ¥Â•ÃpÇ…Â¡KÄ…Ã…ÂƒkÄÄ™Ä›hqÂ‡}HyÃƒÂ“]Â¹Ç§Â£Â…ÃÃ·Â¿qÃ¡ÂµÂ§ÂšÂ™gÂ‘Â¤o^Ã¡Â¾ZEÂ‡Â¤i`Ä³{nÂ•ÂƒOlÂÂ»ÂŸWÃÄ”Ä¯hgÂÂ›F[Â¿Â¡Â—ÃŸkOÃ¼Å¡_Â‰Â€Å«Â‹iÂ„Ç±Ã UtÄ—GylÂƒ}ÂÂŒÃ“M}Â€jpEC~Â¡FtoQiÂ‘ÂšHkÂk{ÂÃƒmÃ¯Â‚"]],"encodeOffsets":[[[119712,40641]],[[121616,39981]],[[116462,37237]]]},"properties":{"cp":[114.502461,38.045474],"name":"æ²³åŒ—","childNum":3}},{"id":"140000","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@ÃžÄ©Ã’ÂƒSÂ‰ra}ÃÂ€yWixÂ±ÃœeÂ´lÃ¨Â“ÃŸÃ“ÇokÂ‘Ä‡iÂµVZÄ£Â¡coÂœÂ‘TSÃ‹Â¹ÄªmnÃ•Å„eÂ–hZg{gtwÂªpXaÄšThÈ‘p{Â¶EhÂ—Â®RÄ‡Æ‘PÂ¿Â£Â‘PÂmcÂ¸mQÃWÂ•ÄÈ¥oÃ…Ã®É¡Å³AÄÃ¤Â³aÃÂ‰JÂ‘Â½Â¥PGÂÄ…SMÂÂ™Â…EÃ…ruÂµÃ©Â€Â‘YÃ“ÂŽÂ•ÅŒ_dÂ›Ä’CoÂÃˆÂµ]Â¯Â_Â²Ã•jÄÂŽK~ÂÂ©Ã…Ã˜^Ã”Â›kÃ¯Ã§ÄƒmÃÂ‘k]ÂÂ±ÂƒcÃÂ¯Ã‘ÃƒmQÃ~_aÂ—pmÂ…Â~Ã§Â¡qÂ“Âˆu{JÃ…Å§Â·ÂLs}Â–EyÃÃ†cI{Â¤IiÂCfUcÂ•ÆŒÃƒpÂ§]Ä›Â›Â«vD@Â¡SÃ€Â‘ÂµMÂ‚Ã…wuÂŽYYÂ‡Â¡DbÃ‘cÂ¡hÂƒÃ—]nkoQdaMÃ§~eDÂ•Ã›tTÂ‰Â©Â±@Â¥Ã¹@Ã‰Â¡Â‰ZcW|WqOJmÄ©lÂ«Ä§ÅŸvOÃ“Â«IqÂÄƒVÂ—Â¥ÂŸD[mI~Ã“Â¢cehiÃ]Æ“~Ä¥qXÂŠÂ·eÆ·ÂœnÂ±Â“}vÂ•[Ä›ÄÂŽÅ•]_Â‘Å“Â•`Â‰Â¹ÂƒÂ§Ã•ÅIÂ™oÂ©bÂs^}Ã‰tÂÂ±Å«Â«Â³pÂ£Ã¿Â·WÂµ|Â¡Â¥ÄƒFÃsÃ—ÂŒÂ¥Å…xÂŸÃŠdÃ’{ÂºvÄ´ÃŽÃªÃŒÉŠÂ²Â¶Â€Ã¼Â¨|ÃžÆ¸ÂµÈ²Â‘LLÃºÃ‰ÆŽÂ¤ÏŠÄ™Ä”V`Â„_bÂªÂ‹S^|ÂŸdÂŠzY|dzÂ¥pÂ†ZbÃ†Â£Â¶Ã’K}tÄ¦Ã”Å†Æ Â‚PYznÂ€ÃvXÂ¶ÄšnÂ Ä ÂÃ”Â„zÃ½Â¦ÂªÂ˜Ã·ÂžÃ‘Ä¸Ã™ÂŽUÈŒÂ¸Â‚dÃ²ÃœJÃ°Â´Â’Ã¬ÃºNMÂ¬ÂŒXZÂ´Â‘Â¤ÅŠÇ¸_tldIÂš{Â¦Æ€Ã°Ä È¤Â¥NehXnÂYGÂ‚Â‡RÂ°Â Æ¬DjÂ¬Â¸|CÄžÂ„KqÂ‚ÂºfÆiÄºÂ©Âª~Ä†OQÂªÂ Â¤@Ã¬Ç¦ÉŒÂ²Ã¦BÂŒÃŠÂ”TÂœÅ¸Â˜Ê‚ÅÄ–Â’ÂšÄ´ÅžÂ–È€ÂœÃ†Ã¿È„lÅ¤Ä’Ã¶Â„tÂ”ÃŽÂ½Ã®Â¼Ä¨XhÂŒÂ‘Â˜|ÂªMÂ¤Ãz"],"encodeOffsets":[[116874,41716]]},"properties":{"cp":[112.549248,37.857014],"name":"å±±è¥¿","childNum":1}},{"id":"150000","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@ÄŒ^Ã¢Â£Ä‚hÂ–ÂšÄ–MÃˆÃ„wÂ‚\\fÅ¦Â°WÂ Â¢Â¾luÅ¸DÂ„wÂŠ\\Ì€Ê‰ÃŒÃ›MÂ…Ä€[bÃ“ÂžEn}Â¶VcÂ…ÃªÂ“sÂƒÂ–Â›Â¯ÂPqÂƒFBÂ…Â‰|SÂ•Â³C|kÃ±Â•HÂ‹ÂdÂ‘iÃ„Â¥ÂsÂˆÅ‰Ã…Â‘Â…PÃ³Ã‘Ã‘E^Â‘Ã…Ppy_YtSÂ™ÂhQÂ·aHwsOnÅ‰ÃƒÂšsÂ©iqjÂ›Â‰Â€USiÂº]Ã¯WÂšÂ‰Â«gWÂÂ¡AÂ–ÂRÃ«Å›Â›Ä³Ä˜Â•Â…ÂŒÂÅ¯`Ã§Ãµh]yÂ»ÇƒÂŸÇ›Ò¤xÃ’m~zf}pf|ÃœroÃˆzrKÃˆÄµSÆ§Â„Å¼ØœÄ uÂ¦Ã¶"],["@@sKCÂšÂ…GS|ÃºÃ¾XÂ”gpÂ›{ÃXÂ¿ÂŸÄ‡{Æ±ÈÃ±ZÃ¡Ä”yoÃhAÂÂ™}Å…Ä†fdÅ‰Â„_Â¹Â„YÂ°Ä—Ç©Ã‘Â¡HÂ¯Â¶oMQqÃ°Â¡Ã‹Â™|Â‘Ã‘`ÆÅXÂ½Â·Ã³Ã›Â“ÂxÄŸÄ¯Ã…cQÂ‡ÂˆÂ“ÂƒsÂ«tÈ‹Ç…FÂ“ÂŸÂÂÃ¹^iÂÂ‘tÂ«ÄŒÂ¯[Â›hÂÂAiÂ©Ã¡Â¥Ã‡ÄšÃ—l|Â¹yÂ¯YÈµÆ“Â‹Ã±ÂÇ™ÂµÃ¯Â‚Ä‹Â™Ä»|DÂœÂ™Ã¼ÈÂ¶Â¡Â˜Â›oÅ½Ã¤Ã•G\\Ã„ÂTÂ¿Ã’ÃµrÂ¯ÂœÂŸLguÃYÄ™RÆ©ÂšÉ·ÅŒO\\Ä°ÃÂ¢Ã¦^ÅŠÂ Ä²È¶È†bÃœGÂŽÄÂ¬Â¿ÄšVÄŽgÂªÂ^ÃuÂ½jÃ¿Ä•Ä™jÄ±k@Ä½Âƒ]Ä—lÂ¥Ã‹Â‡ÄÃ»ÃÂ„ÂƒÄ—Ã©VÂ©Â±Ä‡nÂ©ÂÈ‡ÂžÃqÂ¯Â½Â•YÃƒÃ”Å‰Â“Ã‰NÃ‘ÂÃ…ÃyÂ¹NqÃ¡Ê…DÇ¡Ã‹Ã±ÂÆYÃ…yÌ±osÂ§È‹ÂµÊ½Ç˜ÇÆ¬É±Ã Â‘Æ°NÂ¢Æ”ÃŠuÄ¾Ã½Ä¾ÏŽÈªÆºÉ‚Ä¼ÂžxÂœZÄˆ}ÃŒÅ‰ÅªÂ˜ÄºÅ“ÂŽÄFÐ›Ä½Ì…È£Í½Ã’ÅµÃ¬Æ©Ã‡Ï‹Ã¿È®Ç¡ÅÃ§Æ‘Å¯Ä•~Ã‡ÂÂ›Â¼È³ÃUfÂ†dIxÃ¿\\GÂ ÂÂˆzÃ¢ÉÃ™OÂºÂ·pqyÂ£Â†@ÂÂŒÂŠqÃ¾@ÇžË½IBÃ¤Æ£zsÃ‚ZÂ†ÃÃ Ä»dÃ±Â°Å•zÃ©Ã˜Å±zÈ™CÃ¬DÈÄ´ÄºfÂ®ÂŽÃ€Ä¾Æ°Ã¸@ÉœÃ–ÃžKÄŠÅ‡Æ„Â§Â‚Í‘tÄ›Ã¯Í¡VAÄ¡Ã‘Ã‘Â»dÂ³Ã¶ÇÃXÄ‰Ä•Ã–{Ã¾Ä‰uÂ¸Ã‹Ê…ÄŸUÌŽÃ©hÉ¹Æ†Ì—Ì®È˜ÇŠÖ¥à¥œà¡°Å£àª¾ÃÏ²Ã¤Ê®WÂ¬Â®ÒŒe×¨Å«È kÉ¬É»Ì¼Ã£Ã¼fÆ S×¦É©Ï‚Ã¥ÈˆHÏšÃŽKÇ³Í²OÃ°ÃÈ†Æ˜Â¼CÏšÇšà¢šË¼Ð¤Ã”Â‚Â¤ÆŒÂžÄžÂÌªQÊ¤Â´Â¼mÈ JË€ÂŸÆ²Ã€É mÇnÇ”ÄŽÈ†ÃžÇ N~Â€Ê¢ÄœÂ‚Â¶ÆŒÄ†Ä˜ÅºÊ†È¬ËªÄšÄ’Â¸ÄžGÈ–Æ´Æ€j`Ä¢Ã§Ä¶ÄÃ ÅƒÂºÄ“Ä¢ÂƒÄ–Ä‡ÂšYÂŒÃ€ÅŽÃ¼Ã´QÃÃ‚ÅŽÅžÇ†ÅžÃªÆ–ÂšÂ˜oË†DÄ¤Ã•ÂºÃ‘Ç˜Ã›Ë¤Â³Í€gÅ„ÂÆ˜Ä”Ã€^ÂžÂªÆ‚`ÂªtÂ¾Ã¤ÆšÃªÄ¦Ä€Â¼ÃÂ€Ä”ÇŽÂ¨È”Â»Í ^Ë®ÃŠÈ¦Æ¤Ã¸xRrÅœHÂ¤Â¸Ã‚xDÃ„ÂÂŒ|Ã¸Ë‚ËœÆ®ÂÃÂ¬ÉšwÉ²FjÄ”Â²Ã„wÂ°Ç†dÃ€Ã‰Âž_Ä¸dÃ®Ã ÅŽjÃŠÂœÃªTÄžÂªÅŒÂ‡ÅœWÃˆ|tqÄ¢UB~Â´Â°ÃŽFCÂ•ÂŽUÂ¼pÄ€Ä“Æ„NÂ¦ÂÂ¾OÂ¶ÂŠÅ‚KÄŠOjÂ“ÄšÂ”jÂ´ÄœYpÂ˜{Â¦Â„ÂˆSÄšÃ\\TÂšÃ—ÂªVÂ–Ã·Å ÃÂ¨Ã…DKÂ°ÃŸtÅ‡Ä”KÂšÂ¨ÇµÃ‚cÄ¾Ì£ÄšÇ£È„Ä½FÂ‡lÄ¡UÄµÂœÅ‡Â‹È£FÊ‰ÉÂƒMÄŸÄ¯ÊÆ¶É·Ã˜ÅOÇ½Â«Æ½ÂÅ«Â¹Æ±Å‘ÌÈ¨Â§ÈžÊ˜Ä–iÉœÉ¶Ê¦}Â¨Öªà œÌ€Æ‡Ç¬Â¹Ç¨EË¦Ä¥ÂªÃ”ÃªFÂŽxÃºQÂÂ„ErÂ´WÂ„rhÂ¤ÆÂ \\talÄˆDJÂ˜Ãœ|[PllÌšÂ¸ÆŽGÃºÂ´PÂžÂ¬WÂ¦Â†^Â¦Â–H]prRÂ“n|ÂorÂ¾ÂwLVnÃ‡IujkmonÂ£cX^ÂBh`Â¥VÂ”Â„Â¦UÂ¤Â¸}Â€xRjÂ–[^xN[~ÂªÂŠxQÂ„Â‚[`ÂªHÃ†Ã‚Exx^wÂšNÂ¶ÃŠÂ˜|Â¨Ã¬Â†Â˜Â€MrÂœdYpÂ‚ÂoRzNyÂ˜Ã€Ds~Â€bcfÃŒ`LÂ–Â¾nÂ‹|Â¾TÂ‚Â°cÂ¨ÃˆÂ¢aÂ‚rÂ¤Â–`[|Ã²DÅžÄ”Ã¶xElÃ–dHÂ„Ã€I`Â„ÄŽ\\Ã€Ã¬Â~Ã†ÂŽRÂ¼tfÂ•Â¦^Â¢Ä·Â¶eÂ”ÃÃšMÂŒptgjÂ–Â„É¡ÄŒÃ…yÄ¡LÃ»Â™Å‡VÂ®ÂŠÃ„ÂÃˆÆ€Â†ÄŽÂ°P|ÂªVVÂ†ÂªjÂ–Â¬ÄšÃ’ÃªpÂ¬Â–E|Å¬Ã‚c|Ã€tÆKÂ fÂˆ{Ä˜FÄ’ÂœÆŒXÆ²Ä…oÂ½Ä˜Â‘\\Â¥Â–o}Â›Ã›uÂ£Ã§ÂkXÂ‘{uÄ©Â«ÄÃÃ“UÅ…ÃŸÅ¢qÂ€ÂÅ¤Â¥lyÅˆ[Â€oi{Â¦Â‹LÂ‡Å„Â‡Ã°FÈªÈ–Â”ÂÄ’LÂ„Â¿ÃŒÂ‹ÂˆfÂŒÂ£KÂ£ÊºÂ™oqNÂŸÂƒwÄŸc`ueÂ—tOjÃ—Â°KJÂ±qÂƒÃ†Ä¡mÂ‰ÄšÅ—osÂ¬Â…qehqsuÂœÂƒH{Â¸kHÂ¡ÂŠÂ…ÃŠRÇªÃ‡ÆŒbÈ†Â¢Â´Ã¤ÃœÂÂ¢NÃ¬Ã‰Ê–Â¦Ã¢Â©Å»Ø›Ã‡@VuÂ»AÂ—ylÃŸÃÂ¹ÄµÃªÂ…ÃlISÃ²Â³CÂ¹ÃŒÂÃ¢Â„Â²iÂ¶Â’ÃŒoÃº^HÂ“Â²CÇœÒ£Ç„Â zÂ¼g^Ã¨Ã¶Å°_Â‹Â‚Â–Â†Ä²Ä•ÃªÂ„Âœ}gÃnUIÂ«mÂ‰Â…Â„Â‹]jÂ‡vVÂ¼ÂeuhwqAÂ„ÂaWÂ˜Âƒ_ÂµjÂ…Â»Ã§jioQRÂ¹Ä“ÃƒÃŸt@rÂ³[Ã›lÄ‡Ã‹^ÃÃ‰Ã¡GÂ“Â›OUÃ›Â—OBÂ±Â•XÂŸkÃ…Â‡Â¹Â£k|e]olÂ™ÂŸkVÃÂ¼Ã•qtaÃÃµjgÃÂ£Â§U^ÂŒÂ”RLÂˆÃ‹nXÂ°Ã‡Â’BzÂÂ†^~wfvÂˆypVÂ Â¯Â„Æ«Ä‰ËÈ«Æ—Å·É¿Ã¿Ä¿Æ‘ËƒÄÃ¿ÃƒÇƒÃŸÃ‹Å‘Ã³Â©ÇÈÅ’ÂÄ–MÃ—ÃEyxÂ‹Ã¾p]Ã‰vÃ¯Ã¨Â‘vÂÆ€nÃ‚Ä´Ã–@Â‚Â‰Â†V~ÄˆÂ™ÂŠÂ³MEÂˆÄ¸Ã…Ä–tÂ—Ä“jyÃ„DXÃ„xGQuv_Â›iÂ¦aBÃ§wÂ‘Ë›wDÂ™Â©{ÂŸtÄmQÂ€{EJÂÂ§KPÅ›Æ˜Æ¿Â¥Â@Â‰sCTÂ•Ã‰}ÉƒwÂˆÆ‡yÂ±ÂŸgÂÃ‘Â“}T[Ã·kÃÃ§Â¦Â«Â…SÃ’Â¥Â¸Ã«BXÂ½Â‰HÃ¡Ã…ÂµÃ€ÄŸtSÂÃÃ‚a[Æ£Â°Â¯ÂÂ¦ÂPÃ¯Â¡Â]Â£Ä¡Â“Â–Â“Ã’kÂ®GÂ²Â„Ã¨QÂ°Ã³Mq}EÂŠÃ³ÆÃ‡\\ÂÂƒÂ‡@Ã¡Ã¼gQÃÂ‹uÂ¥FÂƒÂ“TÃ•Â›Â¿JÃ»Â‡]|mvÄÃŽYuaÂ^WoÃ€aÂ·ÂzÄ…Ã’otÃ—Â¶CLÆ—iÂ¯Â¤mÆŽHÇŠÂ¤Ã®Ã¬É¾ÅŠÃ¬TdÃ¥wsRÂÃ–gÄ’Å³ÃºÂÃÄ¡Ã¤Ã•}QÂ¶Â—ÂˆÂ¿AÂ•Â†Â‹[Â¡ÂŒ{dÃ—uQAÂƒÂ›MÂ•xVÂ‹vMOmÄƒlÂ«ct[wÂº_ÂšÃ‡ÃŠÂŠÂŽÂŸjbÃ‚Â£Ä¦S_Ã©Â“QZÂ“_lwgOiÃ½e`YYLqÂ§IÃÂˆÇ³Â£Ã™Ã‹[Ã•ÂªuÆÂ³ÃTÂ—sÂ·bÂÃÄ½Ã¤Ä—[Â›b[ÂˆÅ—fÃ£cnÂ¥Ã®CÂ¿Ã·Âµ[ÅÃ€QÂÅÂšÄ‰mÂ¿Ã^Â£mJVmÂ‡Â—ÂL[{Ã_ÂÂ£Â›FÂ¥Ã–Â{Å¹A}Â…Ã—WuÂ©Ã…aÅ³Ä³Æ³hB{Â·TQqÃ™IÄ·Ã‹Â‘ZÄ‘Â©Yc|MÂ¡Â…LÂ•ÂeVUÃ³K_ÂÂQWkÂ’_Ä¥Â‘Â¿Ã£ZÂÂ•ÂÂ»X\\Ä´uUÂƒÃ¨Â‡lGÂ®Ä›Å‚TÄ ÄŸDÅƒÂ”OrÃdÂ‚Ã†Ãz]Â‹Â±Â…ÅÂ©ÂŸÃ…Â’]ÂŒÃ…Ã}UÃ‹Â¥Â©TÄ‹Â™Ã¯xgckfWgi\\ÃÄ’Â¥HkÂµEÂ˜Ã«{Â»ÃetcGÂ±ahUiÃ±iWsÉÂˆÂ·cÂÂ–CÂ‚Ã•k]wÈ‘|Ä‡a}wÂ…VaÄšÃ¡Â ÂžÂŒGÂ°Ã¹nMÂ¬Â¯Â†{ÃˆÂˆÃÃ†AÂ’Â¥Ã„ÃªJxÃ™Â¢Â”hPÂ¢Ã›ÂˆÂºÂ€ÂµÂwWOÂŸÃ³FÂŽÂšÃz^Ã€Å—ÃŽÃºÂ´Â§Â¢TÂ¤Ç»ÆºSÂÄ—Â‰ÇµhÃÃ…QgvBHouÂÊl_oÂ¿Ga{Ã¯q{Â¥|Å¿Ä¿HÄ‚Ã·aÄÃ‡qÂ‡ZÂÂ‘Ã±iÃ±CÂ³ÂªÂ—Â…Â»E`Â¨Ã¥XÄ“Ã•qÃ‰Ã»[lÂ•}ÂÃ§@ÄÆ˜Ã³OÂ¿Â¡ÂƒFUsÂAÂ‰Â“Ê½Ä«ccÂšocÂƒÂ‚ÂƒÃ‡S}Â„Â“Â£Â‡IS~ÄƒlÂkÄ©XÃ§mÂÄˆÂ…Å€ÃÂ‚oÃdxÃ’uL^T{r@Â¢Â‘ÂžÃÂƒÄKÃ©nÂ£kQÂ™Â‰yÂšÃ…ÃµÃ‹XÅ·ÆLÂ§~}kqÂšÂ»ÂIHÄ—Ç…jÄÂŸÂ»Ã‘ÃžoÂŸÃ¥Â°qTÂt|rÂÂ©ÃSÂ‹Â¯Â·eÅ¨Ä•xÂ«Ãˆ[eMÂˆÂ¿yuÂˆÂ‘pN~Â¹ÃyNÂ£{Â©Â’Â—gÂ‹Ä§WÃÂ»ÃÂ¾sÂ“É™Å¡Ç…_ÃƒÄ€É—Â±Ä…Â™Ä³Ä‰ÂÊÅŒÅ·Â—SÂ›Ã‰Â“AÂ‹Â±Ã¥Ç¥É‹@Ã«ÂŸÂ£RÂ©Ä…PÂ©}Ä¹ÂªÆjÂ¹erÂÂƒLDÄÂ·{iÂ«Æ«CÂ£Âµ"]],"encodeOffsets":[[[127444,52594]],[[113793,40312]]]},"properties":{"cp":[111.670801,40.818311],"name":"å†…è’™å¤","childNum":2}},{"id":"210000","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@LÂ–ÂŽ@@sÂ™a"],["@@MnNm"],["@@ÂdÂ‚c"],["@@eÃ€Â‚C@bÂ‚Â“ÂÂ‰"],["@@fÂ‡Â…XwkbrÂ–Ã„`qg"],["@@^jtWÂ‘Q"],["@@Â~Â Y]c"],["@@G`Ä”N^_Â¿ÂZÂ‚ÃƒM"],["@@iXÂ¶BÂ‹Y"],["@@Â„YÂƒZ"],["@@L_{Epf"],["@@^WqCT\\"],["@@\\[Â“Â‹Â§t|Â”Â¤_"],["@@m`n_"],["@@ÃxÇŒ{q_Ã—^Giip"],["@@@ÂœÃ©^BÂ†Â‡ntÂˆaÃŠUÂ—Â˜ÂŸ]xÂ Â¯Ã„PÄ²ÂÂ°hÂ€Ê™KÂ³Â†VÂˆÃ•@Y~Â†|EvÄ¹sÃ‡Â„ÂÂ¦ÂL^pÃƒÂ‚Â²Å¸Ã’GÂ Â’Ã‹l]Â„xxÃ„_Â˜fTÂ¤ÄŽÂ¤cÂŽÂœPÂ„Â–CÂ¨Â¸TVjbgHÂ²sdÃŽdHÂt`BÂˆÂ—Â²Â¬GJjÄ™Â¶[ÃhjeXdlwhÂšÃ°SÄŒÂ¦ÂªVÃŠÃÂ€Â‹Ã†Â‘ZÂ˜Ã†Å¶Â®Â²Â†^ÂŒÃŽyÂÃ…ÃŽcPqÅ„Â“ÄšDMÄ§ÄœÅHÂÂˆkÂ„Ã§vV[Ä³Â¼WÂ–Â‚YÂÃ€Ã¤Ä¦Â’Â‘`XlÂžR`ÂžÃ´LUVÂžfKÂ–Â¢Â†{NZdÄ’ÂªÂ’YÄ¸ÃŒÃšJRrÂ¸SA|Æ´gÅ´Ä´Ã†bvÂªÃ˜X~Â†ÅºBÂŽ|Â¦Ã•ÂœEÂžÂ¤Ã`\\|ÂKÂˆÂ˜UnnI]Â¤Ã€Ã‚ÄŠnÅŽÂ™RÂ®ÅÂ¿Â¶\\Ã€Ã¸ÃDmÂ¦ÃŽbÅ¨abÂ‰ÂœaÄ˜\\Ä¾Ã£Â‚Ã‚Â¸aÂ˜tÃŽSÆÂ´Â©v\\Ã–ÃšÃŒÇ´Â¤Ã‚Â‡Â¨JKrÂ€Z_ZÂ€fjÃ¾hPkxÂ€`YÂ”Â’RIÂŒjJcVf~sCNÂ¤Â ÂˆEÂ‚ÂœhÃ¦ÂmÂ‰Â–sHyÂ¨SÃ°Ã‘ÃŒ\\\\ÂŸÄRZkÂ°ISÂ§fqÅ’ÃŸÃ½Ã¡ÄžÂÃ™Ã‰Ã–[^Â¯Ç¤Å²Â„ÃªÂ´\\Â¦Â¬Ä†PMÂ¯Â£ÂŸÂˆÂ»uÃ¯pÃ¹zExÂ€ÂžanÂµyoluqeÂ¦W^Â£ÃŠL}Ã±rkqWÅˆÃ»PÂ™Â‰UPÂ¡Ã´JÂŠooÂ·ÂŒU}Â£ÂŒÂ„[Â·Â¨@XÂŒÄ¸ÂŸÂ“Â‹Â‹DXmÂÃ›ÃÂÂºÂ‡Â›GUÂ‹CÃÂªÂ½{ÃÄ‚^ÂcjÂ‡kÂ“Â¶Ãƒ[qÂ¤Â“LÃ‰Ã¶Â³cuxÂ«zZfÂƒÂ²BWÃ‡Â®YÃŸÂ½veÂ±ÃƒCÂ•Ã½Â£W{Ãš^Â’q^sÃ‘Â·Â¨Â‹ÃOÂtÂ“Â¹Â·CÂÂ¥Â‡GDÂÂ›rÃ@wÂÃ•KÅ£ÃƒÂÂ‹Â˜ÂŸÂ«VÂ·i}xÃ‹ÃÃ·Â‘iÂ©ÄÂ‡ÉÇ¡]ÂƒÂˆ{cÂ™Â±OWÂ‹Â³YaÂ±ÂŸÂ‰_Ã§Â©Â‚HÂžÄ•oÆ«Â€Å‡qÂƒrÂÂ³Â‰Lys[Â„Ã±Â³Â¯OSÂ–ÄOMisZÂ†Â±Ã…FCÂ¥Pq{ÂÂ‚Ãƒ[Pg}\\Â—Â¿ghÄ‡OÂ…Â•k^Ä£ÃÂFÄ±Ä‰Ä¥MÂoEqqZÃ»Ä›Å‰Â³FÂ‘Â¦oÄµÂ—hÂŸÃ•P{ÂÂ¯~TÂÃlÂªÂ‰NÂ‰ÃŸYÂ“Ã{Ps{ÃƒVUÂ™Â™eÄŽwkÂ±Å‰VÃ“Â½Å½JÃ£ÂÃ‡Ã‡Â»JmÂ°dhcÃ€ffÂ‘dF~ÂˆÂ€Ä€eÄ–Â€d`sxÂ²Â ÂšÂƒÂ®EÅ¼Ä€dQÂÂ‹Ã‚d^~ÄƒÃ”HÂˆÂ¦\\Â›LKpÄ„VezÂ¤NPÂ Ç¹Ã“Â—RÂ™Ã†Ä…JShÂa[Â¦Â´Ã‚ghwmÂ€BÂÃÂ¨ÅºhI|ÂžVVÂŽÂ—ÂŽ|p]Â Ã‚Â¼Ã¨NÃ¤Â¶ÃœBÃ–Â¼Â“L`Â‚Â¼bÃ˜Ã¦ÂŒKVÂ”ÂŸpoÂœÃºNZÃžÃ’Kxpw|ÃŠEMnzEQÂšÂŽIZÂ”ÂŽZÂ‡NBÂˆÄÃšFÃœÃ§mÄ©Â‚WÄªÃ±tÂ‘ÃžÄµÃ‡Ã±ZÂ«uDÂ‚Â±|ÆlÄ³Â¥Ã£nÂ·Â±PmÃaÂ‰Â–dÂaÂ‡Â CLÂ‡Ç‘kÃ¹Ã³Â¡Â³ÃÂ«QaÄ‹ÃÂ‘OÃƒÂ¥Ã•Ä‘QÈ¥Ä‹ÆyÂ‹Â³ÃƒA"]],"encodeOffsets":[[[123686,41445]],[[126019,40435]],[[124393,40128]],[[126117,39963]],[[125322,40140]],[[126686,40700]],[[126041,40374]],[[125584,40168]],[[125453,40165]],[[125362,40214]],[[125280,40291]],[[125774,39997]],[[125976,40496]],[[125822,39993]],[[125509,40217]],[[122731,40949]]]},"properties":{"cp":[123.429096,41.796767],"name":"è¾½å®","childNum":16}},{"id":"220000","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@Â‘pÃ¤Â”Â³PClÂƒFbbÃzÂšÂ€wBGÂ’ÄÂ€ZÂ„Ã…iÂ“Â»ÂƒlYÂÄ‹Â²SgÂŽkÃ‡Â£Â—^SÂ‰Â“qdÂ¯Â•Â‹RÂ…Â©Ã©ÂŽÂ£Â¯SÂ†\\cZÂ¹iÅ±ÆCuÆÃ“XÂ‡oR}Â“M^oÂ•Â£Â…R}oÂªUÂFÂ…uuXHlÂEÃ…Â•Â‡Â€ÃÂ©Â¤Ã›mTÂŽÃ¾Â¤DÂ–Â²Ã„ufÃ Ã€ÂXXÃˆÂ±AeÂ„yYwÂ¬dvÃµÂ´KÃŠÂ£Â”\\rÂµÃ„lÂ”iÂˆÂdÄ]|Ã®Â©Â¾DÃ‚VÂŒÂœHÂ¹ÂˆÃžÂÂ®ÃœWnÂŒCÂ”ÂŒÄ·Â WÂ‹Â§@\\Â¸Â‹Âƒ~Â¤Â‹VpÂ¸Â‰pÃ³IOÂ¢ÂŠVOÂšÅ‡Ã¼rXql~Ã²Ã‰K]Â¤Â¥XrfkvzpmÂ¶ÂbwyFoÃºvÃ°Â‡Â¼Â¤Â NÂ°Ä…OÂ¥Â«Â³[ÂƒÃ©Ç¡Å±_Â°Ã•\\ÃšÃŠÄÂŽÃ¾Ã¢Å‘Ã erRÂ¨ÂJYlÄQ[Â ÃYÃ«ÃÂ§TGzÂ•tnÂŠÃŸÂÂ¡gFÂÂkMÂŸÄGÃÂ¤iaÂÂ Ã‰Â‰Â™ÃˆÂ¹`\\xsÂ€Â¬dÄ†kNnuNUÂŠÂ–uÂžP@Â‚vRYÂ¾Â•Â–\\Â¢Â…ÂŒGÂªÃ³Ä„~RÃ£Ã–ÃŽÄ¢Ã¹Â‚Ä‘Å´Ã•hQÂŽxtcÃ¦Ã«SÉ½Å‰ÃÃ«Ç‰Â£ÆGÂ£njÂ°KÆ˜ÂµDsÃ˜Ã‘pyÄ†Â¸Â®Â¿bXpÂ‚]vbÃZuÄ‚{nÂˆ^IÃ¼ÂœÃ€SÃ–Â„Â”Â¦EÂŒvRÃŽÃ»h@Ã¢Â„Âˆ[Â‚ÆÃˆÂ‰Ã´~FNrÂ¯Ã´Ã§RÂ±ÂƒÂHÃ‘lÂ•Â’Ä¢Â–^Â¤Â¢Â‚OÃ°ÂŸÂŒÃ¦vxsÅ’]ÃžÃTÂÄ sÂ¶Â¿Ã¢Ã†ÂŠGWÂ¾Ã¬AÂ¦Â·TÃ‘Â¬Â†Ã¨Â¥Â€ÃÃJÂ¨Â¼ÂÃ’Ã–Â¼ÂƒÆ¦É„xÃŠ~SÂ–tD@ÂŠÄ‚Â¼Å´Â¡jlÂºWÂžvÃÂ‰ÂˆzÆ¦ZÃÂŽÂ²CHÂ—Â Â„AÂxiukdÂ‹ÂŒGgetqmcÂžÃ›Â£OzyÂ¥cE}|Â…Â¾cZÂ…ÂkÂ‚Â‰Â¿uÅÃ£[oxGikfeÃ¤T@Â…ÂšSUwpiÃšFMÂ©Â’Â£Ã¨^ÃšÂŸÂ‚`@vÂ¶eÅˆÂ†fÂÂ hÂ˜ePÂ¶ÂÂžtÂ“Ã¤OlÃƒÂ”UgÂƒÃžzÅ¸U`lÂœ}Ã”Ã†UvÃ˜_ÅŒÂ¬Ã–i^Ä‰iÂ§Â²ÃƒÂŠB~Â¡ÄˆÂ™ÃšEgc|DC_È¦mÂ²rBxÂ¼MÃ”Â¦Å®dÄ¨ÃƒÃ¢YxÂ‘Æ˜DVÃ‡ÄºÄ¿gÂÂ¿cwÃ…\\Â¹Â˜Â¥YÄlÂÂœÂ¤ÂžOvÂ†ÂšLjM_aÂ W`zÄ¼MÅ¾Â·\\swqÃSAÂ‡ÂšÂ—qÂ‰ÅšÄ³Â¯ÂŠÂ‘Â°kÂÂŠRÄ“Â°wx^ÄkÇ‚Ã’Â“Â„ÂœÂžÂ“ÂœÂŽÂ„Â‹\\]Â˜nrÄ‚}Â²ÄŠÅ²Ã’Ã¸Ã£hÂ·M{yMzysÄ›nÂÄ’Ä¡VÂ·Â°Â“GÂ³Â¼XÃ€Â“Â“Â™Â¤Â¹ÂiÂ´oÂ¤ÅƒÂšÂŸÃˆ`ÃŒÂƒÇ²Ã„UÄžd\\iÃ–ÂšÂŒÂˆmÃˆBÄ¤ÃœÉ²DEhÂ LGÂ¾Æ€Ã„Â¾{WaÂŒÂYÃÃˆÂÄ¢Ä˜Ã”RÃ®ÄjÂ‹}Ã‡ÂžÂ“ccjÂ‡oUbÂ½ÂšÂ{Â“hÂ§Ç¾{KÂ‹Æ–ÂµÃŽÃ·ÂžGÄ€Ã–Å Ã¥Æ°ÃŽsÂlÂ›Â•yiÄ“Â«Â‹`Ã¥Â§ÂHÂ¥AeÂ^Â§Â„GKÂ}iÃ£\\c]vÂ©Ä£ZÂ“mÃƒ|Â“[M}Ä£TÉŸÄµÃ‚Â‘Ã‚`Ã€Â–Ã§mÂ‰Â‘FKÂ¥ÃšÃÃbXÂšÂ³ÃŒQÃ’Â‘HoÂf{Â‰]eÂ€ptÂ·GÅ‹ÄœYÃ¼nÄŽÅ³VY^Â’Â˜ydÃµkÃ…ZWÂ„Â«WUa~UÂ·SbÂ•wGÃ§Ç‘Â‚Â“iW^qÂ‹FÂ‚Â“Â›uNÄÂÂ—Â·EwÂ„Â‹UtWÂ·ÃÄÃ¦Â©PuqEzwAVÂ•Â—XRÂ‰Ã£Q`ÂÂ©GÂŒMÂ‡ehcÂ›cÂ”ÂÄÃÂdÂ‡Â©Ã‘W_ÃÂ—YÆ…ÂŒÂ»Â…Ã©\\ÂÂƒÉ¹~Ç™GÂ³mÃ˜Â©BÅ¡ÂuTÂ§Ä¤Â½Â¢Ãƒ_ÃƒÂ½Â‘LÂ¡ÂÂ‘Ã½ÂŸqT^rmeÂ™\\PpÂ•ZZbÂƒyÂŸÂ’uyÂbQÂ—efÂµ]UhÄ¿DCmÃ»vaÂšÃ™NSkÂCwnÂ‰cÄ‡fv~Â…YÂ‹Â„Ã‡G"],"encodeOffsets":[[130196,42528]]},"properties":{"cp":[125.3245,43.886841],"name":"å‰æž—","childNum":1}},{"id":"230000","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@Æ¨ÂƒÄ¶TLÃ‡yqpÃ‡Ã›qe{~oyen}sÂ‰`qÂ‡iÂXGÂ”Ã¹]Ã‹pÂ½Â“Â©lÃ‰Â‡Ãp]ÃžÃ±Â´FÄ‚Â”^fÂ‘Ã¤ÂÃ®ÂºkÃ Â˜zÂ¼BUvÃˆ@"],["@@UÂƒÂµNÃ¿Â¥Ä«Ã¨Ã§ÂÂ‹Â•ÂHÃÃ¸Æ•Â¶LÂŒÇ½|gÂ¨|Â”Â™ÂŽaÂ¾pViÂˆddÂÂ”~ÃˆiÂŒÃÄÃ“QÄ¡Ä—Ã‡ÂZÃŽÂ‹ÂŽXbÂ½|Å¿ÃƒHÂ½ÂŸKFgÉ±CÄ£Ã›Ã‡AÂ‡nÂ™Â‹jÃ•c[VÄÇ±ÃƒÃ‹Â„Ã‡_Â™Â Â£Å„Â³pÂŽjÂ£ÂºÂ”ÂšÂ¿Â”Â»WHÂ´Â¯Â”UÂ¸Ä‘Ä¢mÂžtÄœyzzNN|gÂ¸Ã·Ã¤Å±Ã‘Â±Ä‰Ä~mq^Â—ÂŒ[ÂÂƒÂ”Â›Â›ÂÂ”ÂƒÇÃ‘Älw]Â¯xQÄ”ÂÂ‰Â¯lÂ‰Â’Â€Â°Å™Ä´rÂŠÂ™Â˜BÂˆÃžTxr[tÅ½Â¸Ä»N_yÂŸX`biNÂ™KuÂ…ÂPÂ›Â£kÂ‚ZÄ®Â—Â¦[ÂºxÃ†Ã€dhÂŽÄ¹Å€UÃˆÆ—CwÂ’Ã¡ZÄ§Ã„ÅcÃ“Â¥Â»NAwÂ±qÈ¥nD`{ChdÃ™FÄ‡Âš}Â¢Â‰AÂ±Ã„jÂ¨]ÄŠÃ•jÅ‹Â«Ã—`VuÃ“Ã…Â›~_kÅ·VÃyhÂ„Â“VkÃ„Ã£PsÂ”ÂÂOÂµÂ—fÂŸgeÂ‚Å‡Â…Âµf@uÂ_Ã™Â Ã™cÂŸÂªNÂªÃ™EojVxÂ™T@Â†Ã£SefjlwH\\pÅÃ¤Ã€vÂÂŠÂŽlYÂ†Â½d{Â†F~Â¦dyzÂ¤PÂÃœndsrhfÂ‹HcÂŒvlwjFÂœÂ£ÂGÂ˜Â±DÃÂÆ¥YÂ‡yÃÂŠÂuÂ¹XikÄ¿Â¦ÃqÆ—Ç€OÅœÂ¨LIÂ|FRÄ‚nÂ sÂª|CÂšËœzxÂAÃ¨Â¥bÂœfudTrFWÃÂ¹Am|Â˜Ä”Ä•sÄ·Ã†FÂ‡Â´NÂšÂ‰}Ä‡Â…UÂÂŠÃ•@ÃÄ³Å¿muÂžÃ§Â’uÃ°^ÃŠÃ½owÂŒFzÃ˜ÃŽÄ•NÅ‘ÂžÇÈŽÃ´ÂªÃŒÅ’Ç„Ã Ä€Ã„Ë„ÄžÅ€Æ’Ê€Ä€Æ˜Å¸Ë®È¬Æ¬ÄŠÂ°ÂƒUÂŸzouÂ‡xe]}ÂŽÂ…AyÃˆÂ‘WÂ¯ÃŒmKÂ‡Â“Q]Â‹ÄªÂºifÂ¸Ã„X|sZt|Â½ÃšUÃŽÂ lkÂš^p{fÂ¤lÂˆÂºlÃ†WÂ Â–Â€AÂ²Â˜PVÃœÂœPHÂ”ÃŠÃ¢]ÃŽÄˆÃŒÃœkÂ´\\@qÃ sÄ”Ã„QÂºpRijÂ¼Ã¨iÂ†`Â¶Â—Â„bXÂƒÂrBgxfvÂ»ÂŽuUiÂˆÂŒ^vÂ~Â”JÂ¬mVpÂ´Â£ÂŒÂ´VWrnPÂ½Ã¬Â¢BXÂ‚Â¬hÂ™ÂŠÃ°XÂ¹^TjVÂœÂŠriÂªjÂ™tÅŠÃ„mÂ€tPGxÂ¸bgRÂšÂŽsT`ZozÃ†O]Â’Ã’FÃ´Ã’Â†OÃ†Â’Â‡ÅŠÂŒvÃ…ÂžÂ”pÂ’cGÂŒÃªÂŠsxÂ´DRÂ–ÂŒ{AÂ†Â„EOrÂ°ÂŒÂ•Âžx|ÃÂœbÂˆÂ³Wm~ÂDVjÂÂºÃ©NNÂ†Ã‹ÃœË›É¶ÂGÂƒxÅ·CStÂŸ}]Ã»ÅÂ•SmtuÃ‡ÃƒÄ•NÂ•Â™ÄgÂ»ÂšÃTÂ«u}Ã§Â½BÄµÃžÊ£Â¥Ã«ÃŠÂ¡MÃ›ÂŽÂ³Ã£È…Â¡Æ‹aÇ©ÃˆÃ‰QÂ‰Â†GÂ¢Â·lG|Â›Â„tvgrrfÂ«Â†ptÄ™Å˜nÂŠÃ…Ä¢rÂ„IÂ²Â¯LiÃ˜sPfÂ˜_vÄ dÂ„xMÂ prÊ¹ÂšLÂ¤Â‹Â¤Â‡eÃ‹ÂŒÂƒÃ€Ä‘KÂ“ÂžÃ¯Ã™VYÂ§]IÂ‡Ã³Ã¡Ä¥]Ä·Â†KÂˆÂ¥ÂŒj|pÅ‡\\kzÅ£Â¦ÂÅ¡nÅ†Ã¤Ã”VÄ‚Ã®ÄªÂ¬|vWÂ’Â®lÂ¤Ã¨Ã˜rÂ‚Â˜Â•xmÂ¶Äƒ~lÃ„Æ¯Ä„Í„Ã¶È„EÃ”Â¤Ã˜QÄ„Â–Ä„Â»Æ¢jÈ¦OÇºÂ¨Ã¬SÅ–Ã†Æ¬yÂ”ÂQÂœv`Â–cwÂƒZSÃŒÂ®Ã¼Â±Ç„]Å€Ã§Â¬BÂ¬Â©Å„zÆºÅ·É„eÂeOÂÄ¨SÂ’ÂÂŒfmÂ ÄŠÂ‚Æ€PÌŽÄ“zÂ©ÄŠÂ‚Ã„Ã•ÃŠmgÂŸÃ‡sJÂ¥Æ”ÂˆÅŠÅ›Ã¦Â’ÃŽÂÃ‘qvÂ¿ÃUOÂµÂªÂ‰Ã‚nÄ¦Ã_Â½Ã¤@ÃªÃÂ…Â£P}Ä [@gÄ¡}gÂ“ÉŠÃ—Â“Ã»ÃWXÃ¡Â¢uÅ¾Æ»ÃŒsNÃÂ½ÂÆŽÃÂ§ÄÅÂ›AÂÄ“eLÂ³Ã ydlÂ›Â¦Ä˜VÃ§ÅpÅ›Ç†Ä½ÄºÅ¿ÃŠÂƒQÃÃœÃ§Ã›Ä¡Ã”ÂsÄ•Â¬Â—Ç¸Â¯YÃŸÄ‹Ä¡HÂµÂ Â¡eÃ¥`ÂÄ¼ÂƒrÄ‰Å˜Ã³Æ¢FÃ¬Â“ÄŽWÃ¸xÃŠkÂ†Â”ÆˆdÆ¬Âv|Â–I|Â·Â©NqÅ„RÅ€ÂƒÂ¤Ã©Â”eÅŠÂœÅ€Â›ÂˆÃ Å€UÂ²Å•Æ€BÂ‚QÂ£ÄŽ}LÂ¹ÃŽk@Â©ÄˆuÇ°Å³Ç¨Â”ÃšÂ§ÆˆnTÃ‹Ã‡Ã©ÆŸÃŠcfÄÅ¤^XmÂ‡Â—HÂÄŠÄ•Ã‹Â«WÂ·Ä‹Ã«xÂ³Ç”Ä·ÃÄ‹JÄÂ‚wÄ°_Ä¸Â˜È€^Ã´WrÂÂ°oÃºÂ¬Ä¦Â…Å¨K~Â”È°CÄÂ´Ç¶Â£Â’fNÃŽÃ¨Ã¢wÂ¢XnÅ®eÃ‚Ã†Ä¶ÂŽÂÂ¾Â¾xÃ¤LÄ´ÂÄ˜lÄ¼OÂ¤Ã’Ä¨AÂ¢ÃŠÉšÂ¨Â®Â‚Ã˜CÃ”Â Å¬GÆ Â”Æ¦YÄœÂ‡Ä˜ÃœÆ¬DJÂ—g_Í¥Å“@ÄÅ…Ä»AÂ“Â¶Â¯@wÃŽqCÂ½ÄˆÂ»NÂŸÄƒÃ«KÂ™ÄÃQÂ“Ã™Æ«[Â«ÃƒÃÂ•gÃŸÃ”Ã‡OÃÃ¡WÂ‘Ã±ÂuZÂ“Â¯Ä¥Â€ÂŸÂÅ•ÄÂ¡Ã‘Ä·JuÂ¤EÂ ÂŸÃ¥Â¯Â°WKÃ‰Â±_d_}}ÂvyÂŸÃµuÂ¬Ã¯Â¹Ã“UÂ±Â½@gÃÂ¿rÃƒÂ½DÂ‰Â†gÂ…CdÂ‰ÂµÂ—Â°MFÂÂYxwÂ¿CGÂ£Â‹RÆ›Â½Ã•{]LÂ§{qqÄ…ÂšÂ¿BÃ‡Æ»ÄŸÃ«ÂšÜÇŠÃ‹|cÂ²}FÂµ}Â›Ã™RsÃ“pÂgÂ±ÂŠQNqÇ«Å‹RwÅ•nÃ©Ã‘Ã‰KÂŸÂ†Â«SeYRÂ…Å‹Â‹@{Â¤SJ}ÂšDÂ Ã›Ç–ÖÂŸ]gÂrÂ¡ÂµÅ·jqWÃ›hamÂ³~SÂ«Â“Â„Â›Ãž]"]],"encodeOffsets":[[[127123,51780]],[[134456,44547]]]},"properties":{"cp":[126.642464,45.756967],"name":"é»‘é¾™æ±Ÿ","childNum":2}},{"id":"320000","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@cÃ¾Ã…PiÂŠ`ZÂŸRuÂ¥Ã‰\\]~Â°ÂŽY`ÂµÂ†Ã“Âƒ^phÃbnÃ€ÅŸÃºÂŽÃ²aÂ–Ä¬ÂºTÃ–Å’bÂ‚Â˜eÂ¦Â¦Â€{Â¸ZÃ¢Ä‡NpÂŒÂ©ÂžHr|^ÂˆmjhÂŠSEb\\afv`sz^lkÂŽljÂ‹Ã„tgÂ‹Â¤DÂ˜ÂÂ¾XÂšÂ¿Ã€Â’|ÄÂ”iZÂ„ÂÈ€Ã¥BÂ·Ã®}GLÂ¢ÃµcÃŸjaÂŸyBFÂµÃC^ÄÂ•cÃ™tÂ¿sÄŸH]j{sÂ©HMÂ¢ÂƒQnDÃ€Â©DaÃœÃžÂŒÂ·jgÃ iDbPufjDk`dPOÃ®ÂƒhwÂ¡Ä¥Â‡Â¥ÂšGÂ˜ÂŸPÂ²ÄobÂºrYÂ†Â„Ã®Â¶aHÅ¢Â´Â ]Â´Â‚rÄ±lÂwÂ³r_{Â£DB_Ã›dÃ¥uk|ÂˆÅ¨Â¯FÂ CÂºyr{XFyÂ™eÂ³ÃžÄ‹Â‡Â¿Ã‚Â™kÄBÂ¿Â„MvÃ›pm`rÃšÃ£Â”@Ä˜Â¹hÃ¥gÃ‹Ã–Æ¿xnlÄÂ¶Ã…Ã¬Â½OtÂ¾dJlÂŠVJÄ‚ÂŠÂœÇ€ÂœÅžqvnOÂŠ^ÂŸJÂ”ZÂ‘Å¼Â·Q}ÃªÃÂŽÃ…mÂµÃ’]ÂŽÆÂ¦Dq}Â¬R^Ã¨Ä‚Â´Å€Ä»ÄŠIÃ”Â’tÂžÄ²yQÅÄ MNtÂœRÂ®Ã²LhÂÂ‰Â›ÄšsÂ©Â»Âœ}OÃ“ÂŒGZzÂ¶A\\jÄ¨FÂˆÃ¤OÄ¤Â˜HYÂšÂ†JvÂÃžHNiÃœaÄŽÂšÃ‰Â–nFQlÂšNMÂ¤ÂˆBÂ´Ä„NÃ¶É‚tpÂ–Å¬dfÃ¥Â…ÂˆÂ‹qmÂ¿QÃ»ÂŠÃ¹ÅžÂ‡ÃšbÂ¤uÅƒJÅ´uÂ»Â¹Ä„Â•lÂÈ–Ä§Å´wÌŒÅµÂ²Ç¹Ç Í›hÄÅ‚Æ•rÃ§Ã¼Â±YÂ™xciÂ‡tÄŸÂ®ÂjÅ±Â¢KOÄ·Â•Coy`Ã¥Â®VTaÂ_Ä€]ÅÃÉžÃ¯Â²Ê¯ÃŠ^]afYÇ¸ÃƒÄ†Ä“ÄªÈ£JÄ‘ÍÃ´Æ‹Ã„ÂÃ„ÃÂŽÄ«Â‰Ã§Ã›ÉˆÇ¥Â£ÂÃ›mY`Ã³Â£ZÂÂ«Â§Â°Ã“Â³QafusNÄ±Ç…_k}Â¢m[ÃÃ³DÂµÂ—Â¡RLÄiXyÂ‡Ã…NÃ¯ÄƒÂ¡Â¸iÄ”ÃÂ‘NÃŒÅ•oÄ“dÅÃ®Ã¥Å¤Ã»Hcs}~Ã›wbÃ¹Â¹Â£Â¦Ã“CÂtÂ‹OPrÂƒE^Ã’oÂŠgÂ™Ä‰IÂµÂžÃ›Ã…Ê¹KÂ…Â¤Â½phMÂŠÃ¼`oÃ¦Â€Â†Å€"],"encodeOffsets":[[121740,32276]]},"properties":{"cp":[118.767413,32.041544],"name":"æ±Ÿè‹","childNum":1}},{"id":"330000","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@E^dQ]K"],["@@ÂjX^jÂ‡"],["@@sfÂŠbUÂ‡"],["@@qP\\xz[ck"],["@@Â‘RÂƒÂ¢Â‚FX}Â°[s_"],["@@CbÂœ\\Â—}"],["@@e|v\\la{u"],["@@v~u}"],["@@QxÃ‚FÂ¯}"],["@@Â¹nÂŒvÃžsÂ¯o"],["@@rSkUEj"],["@@biÂZÂŒP"],["@@p[}INf"],["@@Ã€Â¿Â€"],["@@Â¹dnbÂŒÂ…"],["@@rSÂŸBnR"],["@@g~h}"],["@@FlEk"],["@@OdPc"],["@@v[u\\"],["@@FjÃ¢L~wyoo~Â›sÂµLÂ–\\"],["@@Â¬eÂ¹aNÂˆ"],["@@\\nÃ”Â¡q]LÂ³Ã«\\Ã¿Â®ÂŒQÃ–ÂŽ"],["@@ÃŠAÂÂ©[Â¬"],["@@KxÂŒvÂ"],["@@@hlIk]"],["@@pW{Âo||j"],["@@Md|_mC"],["@@Â¢Â…XÂ£ÃÂylDÂ¼XÂˆtH"],["@@hlÃœ[LykAvyÂÂfwÂ^EÂžÂ›Â¤"],["@@fpÂ¤MusÂ“R"],["@@Â®_ma~ÂÂ•LÃÂ¬ÂšZ"],["@@iÂMÂ„xZ"],["@@ZcYd"],["@@Z~dOSo|AÂ¿qZv"],["@@@`Â”ENÂÂ¡v"],["@@|Â–TYÂ{"],["@@@n@m"],["@@XWkCT\\"],["@@ÂºwÂšZRkÄ•WOÂ¢"],["@@Â™XÂ®Â±GrÃ†Âª\\Ã”Ã¡Xq{Â‹"],["@@Å¯TGÂ°Ä„LHmÂ°UCÂ‹"],["@@Â¤ÂŽÂ€aÃœx~}dtÃ¼GÃ¦Å£ÅŽÃÄ”cÅ–pMÃ‹ÃÂ’jÄ“Â¢Â·Ã°Ä„Ã†MzÂˆjWKÄŽÂ¢QÂ¶Â˜Ã€_ÃªÂ’Â”_BÄ±Â€iÂ«pZÂ€gfÂ€Â¤Nrq]Â§Ä‚NÂ®Â«HÂ±Â‡yÆ³ÃÂ¾Ã—Å¸Ä«Ã LÅ‚ÄÅ´ÇÄ‚ÃÃ€BÅ–Ã•ÂªÂˆÂŠÃÅ–HÅ—Å‰Ã¥qÃ»ÃµÂiÂ¨hÃœÂ·ÂƒÃ±tÂ»Â¹Ã½v_[Â«Â¸mÂ‰YLÂ¯Â‰QÂªÂ…mÄ‰Ã…dMÂˆÂ•gÃ‡jcÂºÂ«Â•Ä™ÂœÂ¬ÂKÂÂ´ÂƒBÂ«Ã‚Ä…coÄ‹\\xKdÂ¡gÄ›Å§Â«Â®Ã¡Â’[~Ä±xuÂ·Ã…Â”KsÃ‹Ã‰ÂcÂ¢Ã™\\ÄÆ›Ã«bfÂ¹ÂÂÄ£SÂƒÄœÂkÃ¡Æ‰Ã”ÂÄˆZB{ÂŠaMÂ‘ÂµÂ‰fzÅ‰fÃ¥Ã‚Å§Ä¯Æ‹ÇÃŠÄ•ÂÄ¡Ä‡Â£gÂ³neÂÄ…Â»@ÂÂ¦SÂ®Â‚\\ÃŸÃ°CÂšhÂ™iqÂªÄiAuÂ‡AÂÂÂµÂ”Â_WÂ¥Æ£O\\lÄ‹Ä¢ttCÂ¨Â£t`ÂˆÂ™PZÃ¤uXÃŸBÂsÂ‡Ä»yekÂ€ÂOÄ‘Ä¡ÄµHuXBÂšÂµ]Ã—ÂŒÂ‡ÂÂ\\Â›Â°Â®Â¬FÂ¢ÂÂ¾pÂÂµÂ¼kÅ˜Ã³Â¬WÃ¤tÂ’Â¸|@ÂžÂ•LÂ¨Â¸ÂµrÂ“ÂºÃ¹Â³Ã™~Â§WIÂ‹ÂŸZWÂŽÂ®Â’Â±ÃÂ¨Ã’Ã‰xÂ€`Â‰Â²pÄœÂ•rOÃ²gtÃZ}Ã¾Ã™]Â„Â’Â¡ÂŒÂŸFKÂ‚wsPlU[}Â¦RvÂn`hqÂ¬\\Â”ÂnQÂ´Ä˜RWbÂ”Â‚_Â rtÄŒFIÃ–ÂŠkÂŠÂŠÄ¦PJÂ¶Ã–Ã€Ã–JÄˆÄ„TÄšÃ²ÂžCÂ Â²@PÃºÂ…Ã˜zÂœÂ©PÃ®Â¢Â£ÂœCÃˆÃšÂœÄ’Â±Â„hÅ–Â‡lÂ¬Ã¢~nmÂ¨fÂ©Â–iÄ¼Â«mÂ‡ntÂ–uÂ†Ã–ZÃœÃ„jÂ“ÂŠLÂŽÂ®EÃŒÂœFÂªÂ²iÃŠxÃ˜Â¨ÂžIÃˆhhst"],["@@o\\VÂ’zRZ}yÂ"],["@@Â†@Â°Â¡mÃ›Â›GÄ•Â¨Â§IanÃ¡[Ã½Æ¤jfÃ¦Â‡Ã˜LÂ–Â•Ã¤GrÂ™"]],"encodeOffsets":[[[125592,31553]],[[125785,31436]],[[125729,31431]],[[125513,31380]],[[125223,30438]],[[125115,30114]],[[124815,29155]],[[124419,28746]],[[124095,28635]],[[124005,28609]],[[125000,30713]],[[125111,30698]],[[125078,30682]],[[125150,30684]],[[124014,28103]],[[125008,31331]],[[125411,31468]],[[125329,31479]],[[125626,30916]],[[125417,30956]],[[125254,30976]],[[125199,30997]],[[125095,31058]],[[125083,30915]],[[124885,31015]],[[125218,30798]],[[124867,30838]],[[124755,30788]],[[124802,30809]],[[125267,30657]],[[125218,30578]],[[125200,30562]],[[124968,30474]],[[125167,30396]],[[124955,29879]],[[124714,29781]],[[124762,29462]],[[124325,28754]],[[123990,28459]],[[125366,31477]],[[125115,30363]],[[125369,31139]],[[122495,31878]],[[125329,30690]],[[125192,30787]]]},"properties":{"cp":[120.153576,30.287459],"name":"æµ™æ±Ÿ","childNum":45}},{"id":"340000","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@^iuLX^"],["@@Â‚eÂ©Ehl"],["@@Â°ZÃ†Ã«ÄŽÂµmkÇ€wÃŒÃ•Ã¦hÂºgBÄÃ¢ÂqÃ™ÄŠÂzÂ›Ã–gÅ†tÃ€ÃÄ‚ÂŠÃ†Ã¡Â’hEz|WzqDÂ¹Â€ÂŸÂ°EÂ‡Å§l{Ã¦vÃœcA`Â¤C`|Â´qÂžxÄ²kÂq^Â³Â³ÂŸGÅ¡ÂµbÂƒÃZÂ…Â¹qpaÂ±ÄÂ OHÂ—Â¦Â™Ä¦ÂˆxÂ¢Â„gPÃcOl_iCveaOjChÃŸÂ¸iÃÂ‹bÃ›ÂªCCÂ¿Â€mÂ„RVÂ§Â¢A|t^iÄ GÃ€tÃšsÂ–d]Ä®ÃDEÂ¶zAbÂ Ã iÃ¶dKÂ¡~HÂ¸ÃÃ¦AÂžÇ¿YÂƒÂ“j{ÄÂ¿Â‘Â™Ã€Â½WÂ—Â®Â£ChÂŒÃƒsiÂŒÂkkly]_teu[bFaÂ‰TigÂ‡n{]GqÂªÂoÂ‹ÄˆMYÃ¡|Â·Â¥fÂ¥ÂÂ—Å‘aSÃ•Ä—Â™NÂµÂÃ±ÄžÂ«ImÂŒ_mÂ¿Ã‚a]uÄœpÂ Â…Z_Â§{CÂƒÃ¤gÂ¤Â°r[_YjÂ‰Ã†OdÃ½Â“[ÂŽI[Ã¡Â·Â¥Â“Q_nÂ‡Ã¹gLÂ¾mvÂ™ËŠBÃœÃ†Â¶ÂÄŠJhÂšpÂ“cÂ¹Â˜O]iÅ ]ÂœÂ¥Â jtsggJÃ‡Â§ÂwÃ—jÃ‰Â©Â±Â›EFÃ‹ÂÂÂ‰KiÂ”Ã›ÃƒÃ•YvÂ…sÂ•ÂˆmÂ¬njÄ»ÂªÂ•Â§emnÃ¡}kÂ«Å•ÂˆÂƒgÄ‘Â²Ã™Â›DÃ‡Â¤Â›ÃÂ¡ÂªOyÂ›Â†Ã—OÃ¹Â±@DÂŸÃ±ÂSÄ™Ä‡ÄƒÃ•IÃ•Â¿IÂµÄ¥OÂ‰Â‰ÂjNÃ•Ã‹TÂ¡ÂÂ¿tNÃ¦Å‡Ã Ã¥yÄ·rÄ•qÂ§Ã„Ä©sWÃ†ÃŸÂŽFÂ¶ÂÂžXÂ®Â¿Â‰mÂŒÂ™wÂ…RIÃžÂ“fÃŸoGÂ‘Â³Â¾Â©uyHÂ‘Ä¯{ÆÄ§Â¯AFnuPÂÂ…ÃÃ”zÂšÂŒVÂ—dÃ Ã´Âº^ÃÃ¦dÂ´Â€Â‡oGÂ¤{SÂ‰Â¬Ä‡xÃ£}Â›Å§Ã—KÇ¥Ä©Â«ÂžÃ•OEÃÂ·Ã–dÃ–sÆ˜Ã‘Â¨[Â’Ã›^XrÂ¢Â¼Â˜Â§xvÃ„Â›Ã†Âµ`KÂ”Â§Â tÃ’Â´CvloÂ¸fzÅ¨Ã°Â¾NYÂ´Ä±~Ã‰Ä”Ä“Â…ÃŸÃºÂLÃƒÃƒÂÂ–_ÃˆÃ|]Ã‚ÃFlÂ”g`bÂšeÂžÂžÂ€nÂ¾Â¢pUÂ‚h~Æ´Ä–Â¶_Â‚rÂ sÄ„~cÂžÂ”Æˆ]|rÂ c~`Â¼{Ã€{È’iJjzÂ`Ã®Ã€ÂTÂ¥Ã›Â³Â…]Â’u}Â›fÂ…Ã¯Ql{sklÂ“oNdÂŸjÂŸÃ¤Ã‹zDvÄoQÂŠÄHIÂ¦rbÂ“tHÄ”~BmlRÂšÂ—V_Â„Ä§TLnÃ±HÂ±Â’DÂžÂœLÂ‘Â¼LÂ˜ÂªlÂÂ§Å¤aÂ¸ÂŒÄšlKÂ²Â€\\RÃ²vDcÃŽJbt[Â¤Â€D@Â®hh~ktÂ°Ç¾zÂÃ–@Â¾ÂÂªdbÂ„YhÃ¼Ã³ZÂ ÅˆÂ¶vHrÄ¾\\ÃŠÂ—JuxAT|dmÃ€OÂ„Â‹[ÃƒÃ”Â‹GÂ·ÄšÄ…ÄlÅªÃšpSJÂ¨Ä¸ÂˆLvÃžcPÃ¦Ä·Å¨ÂŽÂ®mÃÂÂˆÃ¡lÂŸwKhÃ¯gAÂ¢Å³Ã†Â©ÃžÂ–Â¤OÃˆÂœmÂ’Â°ÂŒKÂ´Â"]],"encodeOffsets":[[[121722,32278]],[[119475,30423]],[[119168,35472]]]},"properties":{"cp":[117.283042,31.86119],"name":"å®‰å¾½","childNum":3}},{"id":"350000","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@Â“zhtÂ´ÂÂ‡]"],["@@aj^~Ä†GÂ—ÂÂ©O"],["@@edÂ¨Â„C}}i"],["@@@vÂˆPGsQ"],["@@Â‰sBzÂ‚ddW]Q"],["@@SÂŽÂ¨QÂ“{"],["@@NÂŽVucW"],["@@qptBAq"],["@@Â‰Â’Â¸[mu"],["@@Q\\pD]_"],["@@jSwUadpF"],["@@eXÂª~ÂƒÂ•"],["@@AjvFso"],["@@fTÂ–Â›_Ã‡Ã\\ÂŸÂ™Â—v|baÂ¦jZÃ†yÂ€Â°"],["@@IjJi"],["@@wJIÂ€ÂˆxÂšÂ«Â¼AoNe{MÂÂ"],["@@KÂ‰Â±Â¡Ã“ÂˆÂ”ÄŒÃ¤eZÂ"],["@@kÂ¡Â¹Eh~cÂ®wBkÂ‹UplÃ€Â¡IÂ•~MÄÂeÂ£bNÂ¨gZÃ½Â¡aÂ±Ã–cpÂ©PhÂžIÂ”ÂŸÂ¢QqÂ…Ã‡GjÂÂÂ‹|Â¥UÂ™Â g[KyÂ¬ÂÂÅÂÂ–v@OpÂˆtÃ‰EÂŸÂFÂ„Â\\@Â Ã¥AÂ¬ÂˆV{XÄ£Â‰ÄÂByÂ…cpÂÄ›Â…Â¼Â³Ä‚pÂÂ·Â¤ÂƒÂ¥oÂ“hqqÃšÂ¡Å…LsÂÂƒ^ÃƒÂ¡Â—ÂžÂ§qlÂŸÃ€hHÂÂ¨MCeÂ»Ã¥Ã‡GDÂ¥zPOÂ£ÄÃ™kJAÂ¼ÃŸÂ–Ä—ÂuÂ›Ä•eÃ»Ã’ÂiÃÅ§ÂSWÂ¥Â˜QÂŠÃ»Å—Â½Ã¹Ä›cÃÂ§SÃ¹Ä©Ä…SWÃ³Â«ÃÄ™ACÂµÂ›eRÂ—Ã¥ÂÇƒRCÃ’Ã‡ZÃÂ¢Â‹ÅºÂ±^dlsÂŒtjDÂ¸Â•Â‚ZpuÂžÃ”Ã¢ÃƒÂ’HÂ¾oLUÃªÃƒÃ”jjÄ“Ã²Â´Ä„WÂ‚Æ›ÂÂ…^Ã‘Â¥Â‹Ä¦ÂŸ@Ã‡Ã²Â–ÂŠmÂŒÂƒOwÂ¡ÃµyJÂ†yD}Â¢ÄÂÃ‘ÃˆÄ¡fÂÂŠZdÂ–aÂ©ÂºÂ²zÂ£ÂšNÂ–ÂƒjDÂ°Ã–tjÂ¶Â¬ZSÃŽ~Â¾cÂ°Â¶ÃmÂ˜xÂ‚OÂ¸Â¢PlÂ´ÂžSL|Â¥ÂžAÂ†ÈªÄ–MÂ’Å†Ä²gÂ®Ã¡IJÄŒÄ’Ã¼`Â ÂŽQFÂ‡Â¬h|Ä‚Â“J@zÂµÂ |ÃªÂ³ÃˆÂ Â¸UÃ–Å¬Å¬Ã€EttÄ¸rÂ‚]Â€Â˜Ã°ÂŽMÂ¤Ä¶Ä²HtÃÂ AÂ’Â†ÂžÄ¬kvsqÂ‡^aÃŽbvÂŒdÂ–Â™fÃŠÃ²SDÂ€Â´Z^Â’xPsÄ‚ÂžrvÂ‹ÆžÅ€Â˜ÂjJdÃ—Å˜Ã‰Â Â®AÂ–ÃŽÂ¦Ä¤dÂ€xÄ†qAÂŒÂ†ZRÂ”Ã€MÅºÂŒnÄŠÂ»ÂŒÄ°ÃZÂ—Â YXÂ–Ã¦JÂŠyÄŠÂ²ÂˆÂ·Â¶qÂ§Â·Â–K@ÂÂ·{sÂ‘XÃ£Ã´Â«lÅ—Â¶Â»oÂÂÂ½EÂ¡ÂÂ«Â¢Â±Â¨YÂˆÂ®Ã˜Â‹Â¶^AÂ™vWÄ¶GÄ’Ä¢ÂžPlzfÂˆÄ¼ÂŽtÃ AvWYÃ£ÂšO_Â‡Â¤sDÂ§ssÄŒÄ¡[kÆ¤PXÂ¦ÂŽ`Â¶Â“ÂžÂ®ÂˆBBvÄªjvÂ©Âšjx[LÂ¥Ã Ã¯Â[FÂ…Â¼ÃÃ‹Â»ÄŸV`Â«Â•IpÂ™}ccÃ…Ä¥ZEÂ‹Ã£oPÂ…Â´B@ÂŠDÂ—Â¸mÂ±Â“zÂ«Æ³Â—Â¿Ã¥Â³BRÃ˜Â¶ÂˆÂœWlÃ¢Ã¾Ã¤Ä…`Â“]ZÂÂ£TÂcÂ—Â Ä¹GÂµÂ¶HÂ™m@_Â©Â—kÂŒÂ‰Â¾xÄ¨Â‡Ã´È‰Ã°XÂ«Â½Ä‘CIÂbÄ‡qKÂ³ÃÂ‹Ã„Å¡Â¬OAÂwÃ£Â»aLÅ‰Â‡Ã‹Ä¥W[Â“Ã‚GIÂ—Ã‚NxÄ³Â¤DÂ¢ÂŽÂÃ®ÄŽÃŽBÂ§Â°_JÂœGsÂƒÂ¥E@Â…Â¤uÄ‡Â…PÂ‘Ã¥Â†cÂuMuwÂ¢BIÂ¿Â‡]zGÂ¹guÄ®ck\\_"]],"encodeOffsets":[[[123250,27563]],[[122541,27268]],[[123020,27189]],[[122916,27125]],[[122887,26845]],[[122808,26762]],[[122568,25912]],[[122778,26197]],[[122515,26757]],[[122816,26587]],[[123388,27005]],[[122450,26243]],[[122578,25962]],[[121255,25103]],[[120987,24903]],[[122339,25802]],[[121042,25093]],[[122439,26024]]]},"properties":{"cp":[119.306239,26.075302],"name":"ç¦å»º","childNum":18}},{"id":"360000","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@ÂÄ¢Ä¨ÆgÄ¼ÂˆÂ¼Ã‚MD~Å†Âªe^\\^Â§Â„Ã½ÂÂ©jÃ—ÂcZÂ†Ã˜Â¨zdÃ’aÂÂ¶ÂˆlÃ’ÂJÂŒÃ¬Ãµ`ozÃ·@ÂÂ¤uÅžÂ¸Â´Â†Ã´Ä™Ã¶YÂ¼Â‰HÄŒÆ¶ajlÃžÆ©Â¥Ã©Z[Â”|h}^UÂ ÂŒÂ Â¥pÂ„Ä„Å¾Æ¦OÂ ltÂ¸Ã†Â Â€Q\\Â€ÂŠaÃ†|CnÃ‚OjtÂÄšÄ¤dÂ’ÃˆÂŒF`Â’Â¶Â„@ÃÃ«Â”Â Â¦ÅÃ’ÂžÂ¨SÃªvÂ†HÄ¢Ã»XDÂ®Â…QgÃ„Â—WiÃ˜PÃžÃ¬ÂºrÂ¤Ç†Â€NÄ Â¢lÂ–Â•Ä„tZoÂœCÆžÃ”ÂºCxrpÄ VÂ®ÃŠ{f_Y`_ÂƒeqÂ’Â’Â®Aot`@oÂ‚DXfkpÂ¨|ÂŠsÂ¬\\DÂ‘Ã„SfÃ¨Â©HnÂ¬Â…^DhÃ†yÃ¸JhÂ“Ã˜xÄ¢Ä€LÃŠÂˆÂ„Æ PÅ¼Ä‹Ä„wÈ ÄšÂ¦GÂ®ÂÇ’Ä¤Ã¤TÂÅ Ã†~Ä¦wÂŠÂ«|TFÂ¡ÂŠnÂ€cÂ³ÃÃ¥Â¹]Ä‰Ä‘xe{ÂÃŽÃ“ÂÂ†vOEmÂ°BÆ‚Ä¨Ä°|GÂ’vzÂ½ÂªÂ´Â€HÂ’Ã pÂ”eJÃÂ†QÂšxnÂ‹Ã€ÂŠWÂÂžÂEÂµÃ ÂXÃ…ÄªtÂ¨ÃƒÄ–rÃ„wÃ€FÃŽ|ÅˆÃ“MÃ¥Â¼ibÂµÂ¯Â»Ã¥DTÂ±Âm[Â“rÂ«_gÂŽmQu~Â¥V\\OkxtLÂÂ EÂ¢Â‹ÂƒÂ‘Ãš^~Ã½ÃªÂ‹PÃ³Â–qoÄ›ÂŠÂ±_ÃŠwÂ§Ã‘ÂªÃ¥Æ—ÄÂ¼Â‹mÄ‰Å¹Â‹Â¿NQÂ“Â…YBÂ‹Ä…rwÄ£cÃÂ¥BÂ•ÂŸÂÅ—ÃŠcÃ˜iIÂ—ÂžÆÄ¿uÂŒÂqtÄwO]Â‘Â³YCÃ±TeÃ‰Â•ÂšÂ‹caubÃÂˆ]trluÂ€Ä«Â…ÂBÂ‘ÃÂŸGsÄµÄ±NÂ£Ã¯ÂÂ—Â^Ä·qssÂ¿FÅ«Å«VÃ•ÂŸÂ·Â´Ã‡{Ã©ÄˆÃ½Â‰Ã¿Â›OEÂˆÂR_ÂŸÄ‘Ã»IÄ‹Ã¢JhÂÅ…Ä±NÂ‘È©Ä•BÂ…Â¦ÂK{ÂTkÂ³Â¡OPÂ·wÂnÂ—ÂµÃdÂ¯}Â½TÃÂ«YiÂµÃ•sCÂ¯Â„iMÂ•Â¤Â™ÂÂ•Â¦ÂÂ¯P|Ã¿ÂUHvÂ“heÂ¥oFTuÂ‰Ãµ\\ÂÂŽOSsÂ‹MÃ²Ä‘Æ‡iaÂºÄ‡XÂŸÄŠÄµÃ ÂÂ·Ã§hÆƒÃ·Ã‡Âœ{Â‘Ãgu^Â›Ä‘gÂ’m[Ã—zkKNÂÂÂÂ‘Â¶Ã•ÂÂ»lÄÃ“{XSÃ†Â‰vÂ©_ÂÃˆÃ«JbVkÂ„Ä”VÃ€Â¤PÂ¾ÂºÃˆMÃ–xlÃ²~ÂªÃšÃ GÄ‚Â¢BÂ„Â±Â’ÃŒÂŒKÂ˜yÂ’Ã¡VÂ‡Â¼Ãƒ~ÂÂÂ…`gÂ›ÂŸsÃ™fIÂ›Æ‹lÄ™Â¹e|Â–~udjÂˆuTlXÂµf`ÂÂ¿JdÂŠ[\\Â˜Â„LÂ‚Â‘Â²"],"encodeOffsets":[[116689,26234]]},"properties":{"cp":[115.892151,28.676493],"name":"æ±Ÿè¥¿","childNum":1}},{"id":"370000","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@Xjd]{K"],["@@itbFHy"],["@@HlGk"],["@@TÂ‚ÂŒGÂŸy"],["@@KÂ¬Â˜Â•Â‹U"],["@@WdXc"],["@@PtOs"],["@@Â•LnXhc"],["@@ppVÂƒu]Or"],["@@cdzAUa"],["@@udRhnCIÂ‡"],["@@ÂˆoIÂƒÂpRÂ„"],["@@Ä½Ä{fzÆ¤Ã®Â’KÂšÂ–ÃŽMÄ®]Â†Â—ZFÂˆÂ½Y]Ã¢Â£phÂ’Â™ÂšÂ¶Â¨rÃ¢Ã¸Ã€Â†ÃŽÇ¨Â¤^ÂºÃ„Â”GzÂˆ~grÄšÄœlÄžÃ†Â„LÄ†Ç†Â¢ÃŽoÂ¦Â–cvÂ“KbÂ€grÂ°WhÂ”mZpÂ ÂˆL]LÂºcUÂ‰Ã†ÂnÂ”Å¼Ä¤ÃŒÄ’ÂœbAnrOAÂœÂ´ÂžÈŠcÃ€bÆ¦UÃ˜rÄ†UÃœÃ¸ÂœÄ¬ÆžÂ†ÂšÂ˜EzÂ„VLÂ®Ã¶Ã˜BkÅ–ÃÄÄ–Â¹Å§Ì„Â±Ã€bÃŽÃ‰ÂœnbÂ²Ä¦hÅ†BÄ–Â›ÂžÄ¯Ä¦Ã¥XÄ‡Ã¬@LÂ¯Â´ywÂÆ•CÃ©ÃƒÂµÄ—Â Æ¿Â¸Â‘lÂµÂ¾Z|Â†ZWyFYÂŸÂ¨Mf~CÂ¿`Â€Ã _RÃ‡zwÆŒfQnnyÂ´INoÆ¬ÂˆÃ¨Ã´Âº|sTÂ„JUÂšÂ›Â‚LÂ„Ã®VjÂ„ÇŽÂ¾Ä’Ã˜ÂÂ‚DzÂ²XPnÂ±ÂÅ´PÃ¨Â¸Å”LÆ”ÃœÆº_TÂ‘Ã¼ÃƒÄ¤BBÄ‹ÃˆÂ‰Ã¶AÂ´faÂ„Â˜MÂ¨{Â«M`Â‡Â¶ÂdÂ¡Ã´Â‰Ã–Â°ÂšmÈ°BÃ”jjÂŒÂ´PM|Â”c^dÂ¤uÂ•ÂƒÂ¤Ã›Â´ÂŒÃ¤Â«Æ¢fPkÂ¶MÃ´lÂˆ]LbÂ„}suÂ^Âke{lCÂ‘Â…MÂ•rDÂŠÃ‡Â]NÂÃ‘FsmoÃµÄ¾HÂ‰yGÄƒ{{Ã§rnÂÃ“EÂ‰Â‹Æ•ZGÂªÂ¹FjÂ¢Ã¯ÂWÂ…uÃ¸CÇ·Ã«ÂÂ¡Ä…uhÃ›Â¡^KxÂ•C`ÂC\\bÃ…xÃ¬Â²ÄÃÂ¿_NÂ‰Ä«CÈ½Ä¿Ã¥BÂ¥Â¢Â·IÅ–Ã•yÂ\\Â‡Â¹kxÂ‡ÃƒÂ£ÂÄŒÃ—GDyÃƒÂ•Â¤ÃÃ§FQÂ¡Â„KtÅµÆ‹]CgÃAÂÂÃ¹SedÂ‡cÃšÅºÂ—ÂŠuYfÂƒyMmhÂUWpÂSÂyGÂwMPqÅ€Â—Â›ÃÂ¼zKÂ›Â¶Â†GÂ•ÂYÂ§Ã‹Âƒ@Â–Â´Å›Ã‡ÂµÆ•ÂBmÂœÂ@IoÂ‚gÂ—Â—ZÂÂ¯uÂ‹TMxÂ}CÂ‘Â‰VKÂ‚Ã¯{Ã©ÆµPÂ—Â™_KÂ«Â™pÃ›Ã™qÄ‹tkkÃ¹]gÂŽÂ‹TÄŸwoÂ•ÉsMÃµÂ³ÄƒÂ‡ANÂ£Â™MRkmEÃŠÂ•ÄÂ™Ã›bMjÃGuÂÂ…IZÂ™Â—GPÄ£Â‡Ã£Ä§E[iÂµBEuÂŸDPÃ”Â›~ÂªÂ¼Ä™tÂŠÂœ]ÂŒÃ»GÂ§Â€Â¡QMsÄŸNPÅÄ¯zsÂÂ£Ug{Ä‘JÄ¿Ä¼ÄÂ³]Ã§Â«Qr~Â¥CÂÆŽÃ‘^nÂ¶ÂÃ†Ã©ÃŽR~Å»Â¸YÂ’IÂ“]Â PÂ‰umÅrÆ¿Â›Â‰Â›IÄÂ‹[xÂ‰eÃ‡Â³ÂÂ‹LÂ‘Â¯ÂvÂ¯sÂÂ¬ÃYÂ…~}Â…Å¥uÅÂŒgÂ›Æ‹pÃÄ„_Å†Ä«Â¶ÃSRÂ´ÃP~ÂžÂ¿CyÂžÄ‹ÂÃŸdwkÂÂ´SsÂ•X|tÂ‰`Ã„Â ÂÃˆÃ°Â€AÂªÃ¬ÃŽTÂ°Â¦DdÂ–Â€a^lÄŽDÄ¶ÃšYÂ°ÂŽ`ÄªÅ´Ç’ÂˆÂ”Ã Å v\\ÂebÂŒZHÂ„Å–RÂ¬Å¢Æ±Ã¹Ä™OÂ•ÂÃ‘MÂÂÂ³FÃ›ÂƒWp[Âƒ"]],"encodeOffsets":[[[123806,39303]],[[123821,39266]],[[123742,39256]],[[123702,39203]],[[123649,39066]],[[123847,38933]],[[123580,38839]],[[123894,37288]],[[123043,36624]],[[123344,38676]],[[123522,38857]],[[123628,38858]],[[118260,36742]]]},"properties":{"cp":[117.000923,36.675807],"name":"å±±ä¸œ","childNum":13}},{"id":"410000","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@Â•Ã½LÂ™Ã¹ÂµPÂ³swIÃ“xcÅ¢ÄžÃ°Â†Â´EÂ®ÂžÃšPtÂ†Ä´XÃ˜xÃ‚Â¶Â˜@Â«Å•Å•QGÂƒÂ‹Yfa[ÂÅŸuÂ“ÃŸÇ©Â™Ä‘Å¡Â_XÂ³Ä³Ã•ÄC]kbcÂ•Â¥CSÂ¯Ã«ÃBÂ©Ã·Â‹Â–Â³ÂÂSiÂˆ_}mÂ˜YTtÂžÂ³xlÃ cÄŒÂ‚zÂÃ€D}ÂÃ‚OQÂ³ÃTÄ¨Â¯Â†Æ—Ã²Ã‹Å–[hÂœÅ‚Â‹Å¦v~Â†Â†}Ã‚ZÂžÂ«Â¤lPÃ‡Â•Â£ÂªÃÅ´Ã…RÂ§Ã˜nhcÂŒtÃ¢kÂÂ‡nÃÂÂÄ¾Å¹UÃ“ÃdKuÄ·Â‡IÂ§oTÅ©Ã™ÄkÄ™Ä†HÂ¸Ã“ÂŒ\\Ã„ÂƒÂŒÂ¿PcnS{wBIvÃ‰Â˜Ä½[GqÂµuÂŸÅ‡Ã´YgÃ»ÂƒZcaÂŽÂ©@Â½ÂÃ•Ç½ysÂ¯}lgg@ÂC\\Â£asÂ€IdÃuCQÃ±[LÂ±Ä™kÂ·Â‹Å£bÂÂ¨Â©kKÂ—Â’Â»Â›KCÂÂ²Â‘Ã²GKmÄ¨S`ÂƒÂ˜UQÂ™nk}AGÄ“Â”sqaJÂ¥ÄGRÂ‰ÄŽpCuÃŒyÂ Ã£Â iMcÂ”plk|tRkÂ†Ã°Âœev~^Â‘Â´Â†Â¦ÃœÂŽSÃÂ¿Â_iyjI|È‘|Â¿_Â»d}qÂŸ^{Â“Æ‡dÂÄƒ}ÂŸtÂqÂµ`Æ³Ä•g}VÂÂ¡omÂ½ÂfÂaÂ™Ã‡oÂ³TTjÂ¥Â„tÄ Â—RyÂ”ÂK{Ã¹Ã“juÂµ{t}uÃ‹RÂ‘iÂŸvGÂŠÃ§JFjÂµÂŠÃyqÃŽÂ˜Ã QÃ‚FewixGwÂ½YÅ·pÂµÃºÂ³XÂUÂ›Â½Ä¡yÂ™Å‚Ã¥Â‰kÃšwZXÂˆÂ·lÂ„Â¢ÃÂ¢KÂ”zOÂ„ÃŽÂ›ÃŽÂ€jcÂ¼htoDHrÂ…|ÂJÂ“Â½}JZ_Â¯iPq{tÄ™Â½Ä•Â¦ZpÄµÃ¸Â«kQÂ…Ä¹Â¤Âƒ]MÂÃ›fÂaQpÄ›Â±Ç½Â¾]uÂFuÂ‹Ã·nÂƒÂ™ÄÃ„Â¯ADp}AjmcEÃ‡Â’aÂªÂ³oÂ³Ã†ÃSÆ‡ÄˆÃ™DIzÃ‹Â‘ÄÄ¾ÂŸ^ÂˆKLÂœÂ—iÂ—ÃžÃ±Â€[ÂœÂƒaAÂ²zzÂ‰ÃŒÃ·DÂœ|[ÂšÃÃ„Â³gfÂ‚Ã•ÃždÂ®|`ÂƒÄ†~Â„oÄ Æ‘Ã´Â³ÅŠÂ‘DÃ—Â°Â¯CsÂŠÃ¸Ã€Â«Ã¬Â‰UMhTÂºÂ¨Â¸Ç¡Ã®SÂ–Ã”Â„DruÃ‚Ã‡ZÂ•Ã–EÂŽÂ’vÂPZÂ„ÂžWÂ”~Ã˜Â‹ÃtÄ„EÂ¢Â¦ÃyÂ¸bÂŠÃ´Â´oÅ¬Â¬ÂŽÂ²ÃŠs~Â€Â€]Â®tÂªaÂšpÅŽJÂ¨Ã–ÂºÂ„_ÂŠÅ”Â–`Â’Å–^ÄÂ\\ÄœuÂ–Â”~mÂ²Æ¸Â›Â¸fWÂ‰Ä¦rÆ”}ÃŽ^gjdfÃ”Â¡J}\\nÂ CÂ˜Â¦Ã¾WxÂÂªJRÃ”Å uÂ¬Ä¨Ä¨mFÂ†dM{\\d\\ÂŠYÃŠÂ¢Ãº@@Â¦ÂªÂ²SÂŠÃœsCÂ–}fNÃ¨cbpRmlÃ˜^gÂ„dÂ¢aÃ’Â¢CZÂˆÂZxvÂÃ†Â¶NÂ¿Â’Â¢T@Â€uCÂœÂ¬^ÄŠÃ°ÂÃ„n|ÂÂžlGlÂ’Â™RjspÂ¢ED}Â€Fio~Ã”NÂŽÂ‹Â„~zkÄ˜HVsÇ²ÃŸjÂƒÅ¬ÂŒÂŠÅ¢`PÃ»Ã lÂ¢Â˜\\Ã€ÂœEhÂŽÄ°gÃžÄ“Â XÂÂ¼PkÂ–Â„|m"],"encodeOffsets":[[118256,37017]]},"properties":{"cp":[113.665412,34.757975],"name":"æ²³å—","childNum":1}},{"id":"420000","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@AÂBÂ‚"],["@@lskt"],["@@Â¾Â«}{raÂ®pÃ®Ãƒ\\Â™Â›{Ã¸CÂŠÃ‹yyBÂ±Â„b\\Â›Ã²Â˜ÃÂ˜jKÂ›Â‡LÂ ]ÄŽÄ½ÃŒÂ’JyÃšCÆˆÄ‡ÃŽTÂ´Ã…Â´pbÂ©ÃˆÂ‘dFin~BCoÂ°BÄŽÃƒÂ„ÂšÃ¸mvÂŒÂ®E^vÇ¾Â½ÄœÂ²RoÂ‚bÃœeNÂŽÂ„^ÄºÂ£RÂ†Â¬lÄ¶Ã·YoÄ–Â¥ÄšÂ¾|sOrÂ°jY`~IÂ”Â¾Â®IÂ†{GqpCgyl{Â‡Â£ÂœÃÂƒÃyPLÂ“Ã‚Â¡ÂƒÂ¡Â¸kWÂ‡xYlÃ™Ã¦ÂŠÂšÅÄ¢zÂœÂ¾ÂžVÂ´WÂ¶Ã¹Å¸oÂ¾ZHxjwfxÂ„GNÃÂ•Â³XÃ©Ã¦lÂ¶Â‰EiÃ¨IHÂ‰Â uÂ’jÃŒQ~v|svÂ¶Ã”i|ÃºÂ¢FhÂÂ˜QsÄŸÂ¦ÂƒSiÅ BgÂ™ÃE^ÃÃ{Â–ÄnOÃ‚ÃˆÂžUÃŽÃ³Ä”Â†ÃŠÄ“Ä²}ZÂ³Â½MÅ§Ã¯eypÂ·ukÂ³DsÃ‘Â¨ÂŸLÂ“Â¶_ÂœÃ…uÃƒÂ¨wÂ»Â—Â€Â¡WqÃœ]\\Â‘Ã’Â§tÆ—cÃ•Â¸Ã•FÃÇÄ‰ÄƒxÅ»ÄŒÆŸOÂ‡ÂƒKÃ‰Ä¡Ã¿Ã—wgÂ”Ã·IÃ…zCgÂ†]mÂ«ÂªGeÃ§ÃƒTCÂ’Â«[Â‰tÂ§{loWeÂC@ps_BpÂ‘ÂrÂ‘Â„f_``Z|eiÂ¡Â—oÄ‹MqowÂ€Â¹DÆÃ“Â›DYpÃ»sÂ•Â–Â‹YkÄ±Çƒ}sÂ¥Ã§Â³[Â§ÂŸcYÂŠÂ§HKÂ„Â«QyÂ‰]Â¢Â“wwÃ¶Â€Â¸Ã¯xÂ¼Å†Â¾XvÂ®Ã‡Ã€ÂµRÄ ÃÂ‹ÂžÂHMÂžÂ±cÃdÂ„Æ’ÇÅ©È…È·Â±DSyÂÃºÄÂ£ÂÅ¤Ä€Ã tÃ–Ã¿Ã¯[Ã®b\\}pÄÃ‰IÂ±Ã‘yÂ…Â¿Â³xÂ¯NÂ‰oÂ‰|Â¹HÂ™ÃÃ›mÂ‹ÂjÃºÃ‹~TÂšÂÂ•uÂ˜Ä™jCÃ¶AwÄ›Â¬RÂ’Ä‘lÂ¯Â Ã‘bÂÂ‰Å‡TÂ†Ä¿_[ÂŒÂ‘IÄÄ„Ê¿nMÂ¦ÄŸ\\Ã‰[TÂ·Â™kÂ¹ÂœÂ©oÄ•@AÂÂ¾wÂ•yaÂ¥ÂY\\Â¥Ã‚azÂ¯Ã£ÃÂ¡kÂ¥neÂ£Ã›wÂ†ÂEÂ©ÃŠÅÂ¶Ë“uÂoj_UÂƒÂ¡cFÂ¹Â[WvÂ“PÂ©wÂ—huÃ•yBFÂ“Âƒ`RÂ‹qJUw\\iÂ¡{jÂŸÂŸEPÃ¯Ã¿Â½fÄ‡Â…QÃ‘Ã€ÂQ{ÂžÂ‚Â°Â‡fLÃ”Â~wXgÂ—Ä«ÂtÃªÃÂ¾Â–ÄºÂ‘HdÂˆÂ³fJd]Â‹ÂHJÂ²Â…EÂ€ÂƒoUÂ¥Â†HhwQsÆÂ»XmgÂ±Ã§veÂ›]DmÃÂ‚PÂˆoCcÂ¾Â‹_hÂ”Â–hÃ¸YrÅŠUÂ¶eDÂ°ÄŒ_N~Ã¸Ä¹ÄšÂ·`zÂ’]Ã„Ã¾pÂ¼Â…Ã¤ÃŒQÂŒv\\rCÂŒÃ©Â¾TnkÅ¾ÅÃšÂ€ÃœaÂ‡Â“Â¼ÃÆ†Ä¢Â¶Ã›oÂ…dÂ…Ä”ÅˆÃÂ¢JqÂ’PbÂ Â¾|JÂŒÂ¾fXÂŠÆÃ®Ä¨_ZÂ¯Ã€}ÃºÆ²Â‹N_Ä’Ã„ÂŠ^Â„Â‘ÄˆaÅypÂ»CÃ‡Ã„Â•KÂŠÂšÃ±LÂ³ÂŠÄ¡MÂŒÂ²wrIÃ’Åxjb[ÂœÂžnÂ«Ã¸ÂœÂ˜Â—Ã¦ÂˆÃ ÂƒÂ ^Â²ÂhÂ¯ÃšÂ€ÅÂªÃžÂ¸Â€YÂ²Ä’VÃ¸}Ä€^Ä°Â™Â´Â‚LÂŠÃšmÂÂ„Â¥Ã€JÃž{JVÂŒÅ³ÃžÅƒxÃ—sxxÆˆÄ“Â Ä£MÅ™Â–ÃšÃ°Ã²IfÂ–ÄŠÂ“Å’\\Æ®Â±Å’dÃŠÂ§Ä˜DÂ†vÄŒ_Ã€Ã¦~DÂŒÄ‹Â´AÂ®ÂµÂ†Â¨Ã˜LVÂ¦ÃªHÃ’Â¤"]],"encodeOffsets":[[[113712,34000]],[[115612,30507]],[[113649,34054]]]},"properties":{"cp":[114.298572,30.584355],"name":"æ¹–åŒ—","childNum":3}},{"id":"430000","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@Â—nÂ„FTs"],["@@ÃŸÃ…Ã†Ã¡Â‰Â½Ã”XrÂ—Â†COÂ™ÂÂ“Â…Ã‹RÂ‘Ã¯Ã¿ÂÄ©ÂTooQyÂšÃ“[Â‹Å…BEÂ¬Â–ÃŽÃ“XaÂ„Ä¯Â§ÃƒÂ¸GÂ Â°ITxÂpÂ‰ÃºxÃšÄ³Â¥ÃÂšÂ–Ä¢Â¾ÂŠedÂžÃ„Â©Ä¸ÂGÂ…ÂœÃ GhÂ‚Â€MÂ¤Â–Ã‚_U}ÄŠ}Â¢pczfÂŠÃ¾gÂ¤Â€Â”Ã‡Ã²AVÂ‘Â‹M"],["@@ÂÂ©KÂÂ—ÂƒAÂ·Â³CQÂ±ÃÂ«Â³BUÂŠÆ‘Â¹AÂŠÂtÄ‡OwÂÂ™D]ÂŒÂJiÃ˜SmÂ¯bÂ£Â‘ylÂƒÂ›XÂ…ÂHÃ‹Ã‘Â±HÂ•Â«ÂÂ–Â‘C^ÃµÄ¾AÂ–ÂÃ…Â§Â¤Ã‰ÂÂ¥Â„Ã¯yuÇ™uAÂ¢Â^{ÃŒCÂ´ÂÂ¦Å·JÂ£^[Â†ÂÂÂ“ÂªÂ¿Â‡Ä•~Â•Æ‡Â…Â•NÂ…Â skÃ³ÄÂÂ‡Â¹Â¿Â€Ã¯]Äƒ~Ã·OÂ§Â@Â—ÂVmÂ¡Â‹QÄ‘Â¦Â¢Ä¤{ÂºjÃ”ÂÂŽÂŒÂªÂ¥nfÂ´Â•~Ã•oÂŸÂžÃ—Ã›Ä…Â‹MÄ…Ä±uZÂœmZcÃ’Â Ä²ÄªÂ²SÃŠÇ„Å¶Â¨ÆšÂƒÂ’CÃ–ÅŽÂªQÃ˜Â¼rÅÂŽÂÂ«}NÃÃ¼rÃŠÂ¬ÂŒmjrÂ€@Ä˜rTWÂ ÂSsdHzÆ“^Ã‡Ã‚yUiÂ¯DÃ…YlÅ¹u{hTÂœ}mÄ‰Â–Â¹Â¥ÂÄ›Â‰DÃ¿Ã«Â©Ä±Ã“[OÂºÂ£ÂžÂ“Â¥Ã³tÂ€Å‚Â¹MÃ•Â„ÂžÆªÂƒ`PÂšÂ…DiÂ–Ã›UÂŠÂ¾Ã…Ã¢Â€ÂŒÃ¬ÂˆUÂ’Ã±BÂ“ÃˆÂ£Ã½heÂ‰dyÂ¡oÄ‹Â€`pfmjP~Â‚kZaÂ…ÂZsÃdÂ°wjÂ§Âƒ@Â€Ä´Â®w~^Â‚kÃ€Ã…KvNmX\\Â¨ÂaÂ“Â”ÅƒÂqvÃÃ³Â¿FÂ„Â¤Â¡@Å©Ã‘Vw}S@jÂ}ÂÂ¾Â«pÄ‚rÂ–ÂªgÂ Ã Ã€Â²NJÂ¶Â¶DÂÃ´Â…KÂ‚|^ÂªÂ†ÂŽÂÂ°LXÂ¾Å´Ã¤PÄªÂ±ÂœÂ£EXdÂ›Â”^Â¶Â›Ä²ÃžÃœÂ“~Â‘uÂ¸Ç”Â˜ÂŽÂ›MRhsRÂ…eÂ†`Ã„ofIÃ”\\Ã˜Â Â iÂ”Ä‡ymnÃºÂ¨cjÂ Â¢Â»Â–GÄŒÃ¬ÆŠÃ¿ÃÂ¨XeÄˆÄ€Â¾OÃ°Â FiÂ Â¢|[jVxrIQÂŒÂ„_EÂ”zANÂ¦zLU`ÂœcÂªxÂ”OTuÂ RLÃ„Â¢dVÂ„i`ÂpË”vÅŽÂµÂªÃ‰ÂžF~ÂƒÃ˜Â€dÂ¢ÂºgÄ°Ã wÂ¸Ãb[Â¦ÂZbÂ¦Â–zÂ½xBÂÄ–@ÂªpÂºÂ›ÂšlSÂ¸Ã–\\Ä”[NÂ¥Ë€mÄŽÄƒÂ’J\\Â‹Å€`Â€Â…ÅˆSÃšÂŠÄ–ÃÄiOÂ“ÄœÂ«BxDÃµÄšivÂ—ÂžÂ–SÂ™ÃŒ}iÃ¹ÂŒÂžÃœnÂšÃÂºGÂŠ{ÂŠpÂ°MÂ´wÂ†Ã€Ã’zJÂ²Ã²Â¨Â oTÃ§Ã¼Ã¶oÃ›Ã¿Ã±ÂŽÅ‘ÄžÂ¤Â‚Ã¹TzÂ²CÈ†È¸ÇŽÅªÂƒÆ‘ÃcÂ°dPÂÃŽÂŸÄŸÃ‹Â¶[ÃˆÂ½uÂ¯Â½WMÂ¡ÂÃ‰ÂžÂ“Â’BÂ·rÃÂžnZÂŸÃ’Â `Â‡Â¨GAÂÂ¾\\pÄ“Â˜XhÃƒÂ†RCÂÃ¼WGÄ¡uÂ…TÃ©ÂÂ§ÅŽÃ‘ÂÂ©Ã²Â³IÂ±Â³}_Â‘Â‹EÂÃƒÄ§gÂ®Ä™isÃPDmÃ…{Â‰b[RÃ…ÂŸsÂ·Â€kPÂŸÅ½Æ¥ÂƒÃ³RoÂ”OÂ‹ÂŸVÂŸ~]{g\\Â“ÃªYÆªÂ¦kÃbiÄ‹ÆµÂŠGZÂ»ÄšÃµÂ…Ã³Â·Â³vÅÂžÂ£Ã¸@pyÃ¶_Â‹Ã«ÂŽIkÃ‘ÂµÂ‡bÂcÃ‘Â§yÂ…Ã—dYÃ˜ÂŽÂªiÃ¾ÂžÂ¨Âƒ[]f]Å…Â©C}ÃNÂ‡Â»hÄ»Ä§ÆÂ’Ä©"]],"encodeOffsets":[[[115640,30489]],[[112543,27312]],[[116690,26230]]]},"properties":{"cp":[112.982279,28.19409],"name":"æ¹–å—","childNum":3}},{"id":"440000","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@QdÂˆAua"],["@@ÂƒlxDLo"],["@@sbhNLo"],["@@Ä‚Â ÄÂŸ"],["@@WltO[["],["@@KrÂœ]ÂS"],["@@eÂ„Â„I]y"],["@@I|Â„Mym"],["@@ÂƒÃ›Â³LSÂŒÂÂžÂ¼Y"],["@@nvÂºBÂ–Ã«uiÂ©`ÂÂ¾"],["@@zdÂšÃ›Â›JwÂ®"],["@@Â†Â°Â…Â¯"],["@@aÂ yAÂªÂ¸Ã‹JIxÃ˜ÂŒ@Â€Ä€HAmÃƒÂŸVÂ¡oÂ•fuÂ•o"],["@@ÂšsÂ‰Å—ÃƒÃ”Ä—AÆÂ›ZÂšÃ„Â ~Â°ÄŒPÂ‚Â‹Ã¤h"],["@@Â‹Â¶ÃÂ’ÃŒÂ‚vmÄžhÂÄ±Â‡Q"],["@@HÂœÂŠdSjÄ’Â¢D}warÂ…Â“uÂ«ZqadYM"],["@@elÂŒ\\LqqU"],["@@~rMÂo\\"],["@@fÂ„^ÂƒC"],["@@Ã¸PÂªojÃ·ÃÃÄ§XÄŒxÂ”Â°QÂ¨Ä±XNv"],["@@gÃ‡Æ³ÂˆÂŽÂˆÂ”oÂˆÂŠÂˆ[~tly"],["@@EÂ–Ã†CÂ¿Â‘"],["@@OÂŽPÂ"],["@@wÂ‹Â†Ä‘Ã³gÂ‰Â™ÄÂ—[Â³Â‹ÂÂ¡VÃ™Ã¦Ã…Ã¶MÃŒÂ³Â¹pÃaÃ‹Ã½Ã½Â©DÂ©ÃœÂ“JÅ¹Æ•Ä£GÄ…Â¤{Ã™Å«Â…Ã‡Â˜OÂ²Â«BÆ±Ã©AÂ—Ã’Â‰Ä¥Â‡Â¡ÂÂ«BhlmtÃƒPÂµyUÂ¯ucÂ“dÂ·w_bÅcÄ«ÃmGOÂŽ|KPÂ’ÈÂ‡Å¹Ã£ÅIÅ•ÅÅ•@Ã“ooÂ¿Ä“Â‹Â±ÃŸ}ÂŽÂ…ÅÂ‚ÂŸÄ²WÃˆCÅ‘Ã¢UÃ¢Ç™IÂ›ÄŸÅ‰Â©IÂ›ÂÄ³EÃ—Â…ÃÂ”Â³AÃ³Â›wXJÃ¾Â±ÃŒÂŒÃœÃ“Â”Ä¨Â£L]ÄˆÃ™ÆºZÇ¾Ä†Ä–MÄ¸Ä¤fÂŒÃŽÄµlÂ•Å¨nÃˆÂˆÂ‘ÄtFÂ”ÂŠÂ–FÄ¤Â–Â‚ÃªkÂ¶Âœ^kÂ°fÂ¶gÂŠÂŽÂœ}Â®FaÂ˜f`ÂvXÅ²ÂxlÂ˜Â„Â¦Â–Ã”ÃÂ²Â¬ÃÂŸÂ¦pqÃŠÃŒÂ²ÂˆiÂ€XÂŸÃ˜RDÃŽ}Â†Ã„@ZÄ Â’sÂ„xÂ®AR~Â®ETtÄ„ZÂ†Â–ÂÆˆfÅ Å HÃ¢Ã’ÃAÂ†Âµ\\SÂ¸Â„^wÄ–kRzÂŠalÂŽÅœ|EÂ¨ÃˆNÄ€ÅˆZTÂŒÂ’pBhÂ£\\ÂŒÄŽÆ€uXÄ–tKLÂ–Â¶G|ÂŽÂ»ÄºEÄ¼Äž~ÃœÄ¢Ã›ÄŠrÂˆOÂ˜Ã™Ã®vd]ÂnÂˆÂ¬VÂœÃŠÄœÂ°RÃ–ÂŸpMÂ†Â†Â–Â‚Æ‚ÂªFbwÂžEÃ€ÂˆÂ˜Â©ÂŒÂž\\Â…Â¤]Å¸IÂ®Â¥DÂ³|Ã‹ÂŽ]CÂÃ¶AÅ¤Â¦Â…Ã¦Â’Â´Â¥Â¸LvÂ¼Â€Â•Â¢Ä½BaÃ´Â–F~Â—ÂšÂ®Â²GÃŒÃ’ÂEYÂ„Â„ÂœzkÂ¤Â’Â°ahlVÃ•ÂžI^Â‹ÂšCxÂÄˆPÂŽsBÂ‰Æ’ÂºVÂ‰Â¸@Â¾ÂªRÂ²Ä¨N]ÂÂ´_eavSiÂ‡vcÂ•}p}ÄÂ¼ÆŒkJÂœÃšeÂ thÂœÂ†_Â¸Â ÂºxÂ±Ã²_xÂNÂ›Ã‹Â‹Â²Â‘@ÂƒÄƒÂ¡ÃŸHÂ©Ã™Ã±}wkNÃ•Â¹Ã‡OÂ½Â¿Â£Ä•]ly_WÃ¬IÂžÃ‡Âª`ÂŠuTÃ…xYÄ’Ã–Â¼kÃ–ÂžÂ’ÂµÂ‚ÂMÂžjJÃšwn\\hÂ‘ÂœÄ’v]Ã®h|Â’ÃˆÂ›Æ„Ã¸Ã¨gÂžÂ¸Ä¶ÃŸÂ Ä‰ÄˆWbÂ¹Æ€dÃ©Ä˜ÂŒNTtÂP[ÂÂŠÃ¶SvrCZÂžÂžaGuÂœboÂ´Å–ÂÃ’Ã‡ÄÂ~Â¡zCIÂ…Ã¶zxÂ¢Â„PnÂ‹Â•Â‰ÃˆÃ±Â @ÂŒÄ¥Ã’Â¦Â†]ÆžÂŠV}Â³ÄƒÄ”Ã±iiÃ„Ã“VÃ©pKGÂ½Ã„Â‘Ã“Ã¡vÂYoÂ–ÂCÂ·sitÂ‹iaÃ€yÂ„Å§ÃŽÂ¡ÃˆYDÃ‘Å¯m}Â‰Ã½|m[wÄ™ÃµÄ‰ZÃ…xUO}Ã·NÂ¹Â³Ä‰o_qtÄƒÂ“qwÂµÅYÃ™Â„ÇÅ•Â¹tÃ¯ÂÃ›UÃƒÂ¯mRCÂºÂ…ÂˆÄ|ÂµÂÂ›Ã•ÃŠKÂ™Â½RÂ‘Ä“Â Ã³]Â‘Â–GÂªÄ™AxÂ–Â»HOÂ£Â|ÄmÂ‡Â¡diÄÃ—YÃ¯ÂYWÂªÅ‰OeÃštÄÂ«zÄ‘Â¹TÂ…ÄÂ‡ÃºEÂ™Ã¡Â²\\Â‹Ä·Ã}jYÃ Ã™Ã†Å¿Â¿Ã‡dÄŸÂ·Ã¹TÃŸÃ‡Å£Ê„Â¡XgWÃ€Ç‡ÄŸÂ·Â¿ÃƒÂˆOjÂÂ YÃ‡Ã·QÄ›Â‹i"]],"encodeOffsets":[[[117381,22988]],[[116552,22934]],[[116790,22617]],[[116973,22545]],[[116444,22536]],[[116931,22515]],[[116496,22490]],[[116453,22449]],[[113301,21439]],[[118726,21604]],[[118709,21486]],[[113210,20816]],[[115482,22082]],[[113171,21585]],[[113199,21590]],[[115232,22102]],[[115739,22373]],[[115134,22184]],[[113056,21175]],[[119573,21271]],[[119957,24020]],[[115859,22356]],[[116561,22649]],[[116285,22746]]]},"properties":{"cp":[113.280637,23.125178],"name":"å¹¿ä¸œ","childNum":24}},{"id":"450000","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@HÂ–Â TQÂ§Â•A"],["@@Ä¨ÃŠÂªÂƒLÂƒÆŠDÃŽÄ¹ÄCÇ¦Ä—Â¸zÃšGnÂ£Â¾Â›rÂªÅ€ÃœtÂ¬@Ã–Â›ÃšÂˆSx~Ã¸OÅ’Â˜Å¶ÃÃ‚Ã¦È \\Â„ÃˆÃœObÄ–w^oÃžÂ„LfÂ¬Â°bIÂ lTÃ˜BÃŒÂˆFÂ£Ä†Â¹gÃ±Ä¤aYÂ“tÂ¿Â¤VSÃ±ÂœKÂ¸Â¤nMÂ†Â¼Â‚JEÂ±Â„Â½Â¸ÂšÂŠÃ±oÂ‹ÃœCÆ†Ã¦Äª^ÂŠÄšQÃ–Â¦^Â‡ÂˆÂˆfÂ´ÂQÂ†Ã¼ÃœÃŠÂzÂ¯ÂšlzUÄºÅ¡@Ã¬Â‡Â€pÂ¶n]sxtxÂ¶@ÂÂ„~Ã’Ä‚JbÂ©gkÂ‚{Â°Â‚~cÂ°`Ã”Â™Â¬rV\\Â“laÂ¼Â¤Ã´Ã¡`Â¯Â¹ÂLCÂ†Ã†bÂŒxErÃ¦OÂÂ‚v[HÂÂ˜Â„[~|aBÂ£Ã–sÂºdAÄzNÃ‚Ã°sÂŽÃžÃ†Â”Â…Ä¤ÂªbÂƒÂ–ab`hoÂ¡Â³FÂ«Ã¨VloÂŽÂ¤Â™Ã”RzppÂ®SÂŽÄªÂºÂ¨Ã–ÂƒÂºNÂ…Ä³Â„d`Â’aÂ”Â¦Â¤ÂFÂ³ÂºDÃŽÅ„Ä€Ã¬ÂŠCÂžÄœÂºÂ¦ÄŠÂ•~nSÂ›|gÅºvZkCÃ†jÂ°zVÃˆÃÆ”]LÂÃŠFZgÂ…ÄPÂkiniÂ«Â‹qÃ‡Â€czÃÂ”YÂ®Â¬Å®ÂÂ»qRÃ—ÅÂ©DÃ•Â„Â‘Â§Æ™ÇƒÅµTÃ‰Ä©Â±ÂŸÄ±dÃ‘nYYÂ›Ä²vNÄ†Ä†ÂŒÃ˜ÃœÂ ÂÃ–pÂ–}eÂ³Â¦mÂ‹Â©ÂÂiÃ“|Â¹ÂŸÄ§Å†Â›|ÂªÂ¦QFÂ¢Ã‚Â¬Ê–ovgÂ¿emÂ‡^ÂucÃ Ã·gÃ•ÂŽuÂŒÃÃ™Ä‡Ä}FÄ»Â¼Ä¹{ÂÂµHKÂ•sLSÄ‘ÆƒrÂ‹ÄÂ¤[AgÂ‘oSÂ‹Å‡YMÃ¿Â§Ã‡{FÂÅ›bkyÂ‰lQxÄ•Âƒ]TÂ·Â¶[BÂ…Ã‘ÃGÃ¡ÅŸÅŸÆ‡eÂ€ÂÂ…Â•ÄƒYSsÂFQ}ÂBÂƒwÂ‘tYÄŸÃƒ@~Â…CÃÂ€QÂ Ã—WÂ‡jÃ‹Â±rÃ‰Â¥oÃÂ Â±Â«Ã“Ã‚Â¥Â•ÂƒÂ€kÂ—ÂŽwWÅ±ÂŒmcihÂÂ³KÂ›~Â‰ÂÂµhÂ¯e]lÂµÂ›Ã©lÂ•ÂEÄ£Â‰Â•EÂ“ÄsÂ‡Â’mÃ‡Â–Å§Ä“`Ã£Ã²gK_Ã›sUÊÂ“Ä‡ÂÄŸÂ¶hÂŒÃ¶ÂŒOÂ¤Ç›nÂ³ÂŽÂcÂ‘`Â¡yÂ‹Â¦CÂ‘ÂezÂ€YÂŠwaÂ™Â–Â‘[ÄÄµÅ±MÄ™Â§]XÂ˜ÃŽ_Â‚ÃÂ›Â˜ÂÃ›]Ã©Â’Ã›UÄ‡Ä°Ã•BÆ£Â±Â…dÂƒyÂ¹T^dÂÂžÃ»Ã…Ã‘Å¦Â·Â‡PÄ»Ã¾Ã™`KÂ€Â¦Â˜Â…Â¢ÃeÂÂœÄ¥RÂ¿ÂŒÂ³Â£[~ÂŒÃ¤uÂ¼dlÂ‰tÂ‚Â†WÂ¸oRMÂ¢Ä\\zÂœ}Ã†zdvÅˆÂ–{ÃŽXFÂ¶Â°Ã‚_Â„Ã’Ã‚ÃLÂ©Ã–Â•TmuÂŸÂ¼Ã£lÂ‰Â›Ä«kiqÃ©fAÂ„Â·ÃŠÂµ\\Å‘DcÂ¥ÃFÂ“yÂ›Ã”Ä‡Â˜cÂ€Å±H_hLÃœÂ‹ÃªÄºÄÂ¨c}rn`Â½Â„ÃŒ@Â¸Â¶ÂªVLÂŒÂŠhÅ’Â‹\\Â•Å¢Äºk~ÂŽÄ iÃ°Â°|gÂŒtTÄÄ¸^xÂ‘vKÂ˜ÂVGrÃ©AÂÃ©Â‘bUuÂ›MJÂÂ‰VÃƒOÂ¡Â…qÄ‚XÃ‹SÂ‰Ä£Ã£lÃ½Ã ÂŸ_juÂ‡YÃ›Ã’BÂ†ÂœG^Â˜Ã©Ã–ÂŠÂ¶Â§ÂŽÂƒEGÂ”Ã…zÄ›ÂƒÆ¯Â¤EkÂ‡N[kdÃ¥ucÃ©Â¬dnYpÂAyÄŒ{`]Ã¾Â¯TÂ’bÂÃœÃˆkÂ‚Â¡Ä Â•vÂŒÃ hÂ„Ã‚Æ„Â¢JÃ®Â¶Â²"]],"encodeOffsets":[[[111707,21520]],[[107619,25527]]]},"properties":{"cp":[108.320004,22.82402],"name":"å¹¿è¥¿","childNum":2}},{"id":"460000","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@ÂšÂ¦ÅœilÂ¢Â”XÆ¦Â‘ÆžÃ²Â–Ã¯Ã¨Â§ÅžCÃªÉ•rÅ§Å¯Ã‡Ä…Ä»ÃµÂ™Â·Ä‰Â³Å“ÂÌ…kÃ‡m@Ä‹È§ÂƒÅ§Ä¥Â‰Ä½Ê‰ÂÂÆ…Å¿Â“È“Ã’Ã‹Â¦ÅE}ÂºÆ‘[ÃÄœÈ‹Â gÃŽfÇÃÄ¤Â¨ÃªÂÆº\\Æ†Â¸Ä ÄŽvÊ„È€ÂœÃÂ¾jNÃ°Ä€Ã’RÂŒÂšZÇ†Â™zÃÅ˜ÃŽÂ°HÂ¨ÂÆ¢bÂ²_Ä Â "],"encodeOffsets":[[112750,20508]]},"properties":{"cp":[110.33119,20.031971],"name":"æµ·å—","childNum":1}},{"id":"510000","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@LqKr"],["@@ÂŠ[Ä»Ã©VÂ£Âž_Å£Ä¡Ã±pGÂ Â•rÃ©ÃÂ·~Ä…SfyÃ—ÃÂ‚Â·ÂºÂÅ¿Æ½iÃÄ±Æ£Ä±Ä»mHH}siaX@iÃ‡Â°ÃÃƒÃ—tÂ«ÂƒÂTÂƒÂ¤JÂ–JJÂŒyJÂ•ÃˆÂŠ`OhÃŸÂ¦Â¡uÃ‹hIyCjmÃ¿wÂ…ZGÂ…Â…TiÂ‹SÂˆsOÂ‰ÂžBÂ²ÂŸfNmsPaÂˆ{M{ÂŠÃµEÂ‘^Hj}gYpaeuÂžÂ¯Â‘oÃ¡wHjÃÂ½MÂ¡pMÂ“Â–uÃ¥Â‡mni{fkÂ”\\oÂƒÃŽqCwÂ†EZÂÂ¼KÂ›ÄÂŠÂƒAy{mÃ·LÂ‡wOÃ—SimRIÂÂ¯rKÂ™ÃµBSÂ«sFeÂ‡]fÂµÂ¢Ã³Y_Ã†PRcueÂ°CbÂoÃ—ÂŒbdÂ£ÅŒIHgtrnyPtÂ¦foaXÄxÂ›lBowzÂ‹_{ÃŠÃ©WiÃªEÂ„ÂGhÃœÂ¸ÂºuFÂÄˆIxfÂ®ÂŽÂ•YÂ½Ä€Ç™]ÂÂ¤ÂEyÂŸFÂÂ²Ä‹Â’wÂ¸Â¿@gÂ¢Â§RGvÂ»Â–ÂÃ¡ÂŸW`ÃƒÄµJwi]tÂ¥wOÂÂ½a[Ã—Âˆ]`ÃƒiÂÃ¼ÂLÂ€Â¦LabbTÃ€Ã¥Â’c}ÃhÂ™Ã†hÂˆÂ‹Â®BHÂ€Ã®|Ã®ÂƒÂºÃ‰kÂÂ¤SÂ†ÂyÂ£Â„iaÂ©taÄ¯Â·Æ‰`ÅÂ¥UhÂ“OÂ…ÂƒÄLk}Â©FosÂ‰Â´Â›JmÂ„ÂµlÅuÂÂ—Â…Ã¸Â–nÃ‘JWÃŽÂªÂ–YÃ€Ã¯AetTÂžÅ…Â‚Ã“ÂGÂ™Ã‹Â«boÂ‰{Ä±wodÆŸÂ½ÂƒÂžÂOÄ¡ÃœÂ‘Ã‚ÂµxÃ NÃ–Â¾PÂ²Â§HKvÂ¾Â–]|Â•BÂ‡Ã†Ã¥oZ`Â¡Ã˜`Ã€mÂºÄ ~ÃŒÃÂ§nÃ‡Â…Â¿Â¤]wÄŸ@sÂƒÂ‰rÄŸuÂ‰~Â‘IoÂ”[Ã©Â±Â¹Â Â¿ÂžÅ¿Ä‘Ã“Â‰@qÂ‹gÂˆÂ¹zÆ±Å™aÃÂ°KtÃ‡Â¤VÂ»Ãƒ[Ä©ÇÆ‘^Ã‡Ã“@Ã¡Å¥Â—sÂ›ZÃÂ•Â‹ÂœÃ…ÄÂ€Æ‹Â•Ä›pwDÃ³Ã–Ã¡ÂˆÅ»neQÃ‹ÂŒÂqÂ·Â•GCÅ“Ã½S]xÂŸÂ·Ã½Â‹qÂ³Â•OÃ•ÂœÂŒÂ¶QzÃŸti{Å™Â‰Ã¡ÃÃ‡WÅÅÃ±zÃ‡WÂ‹pÃ§Â¿JÂŒÂ™Â‚XÂœÄ©Ã¨Â½cÂÂŒFÂ–Ã‚LiVjx}\\NÂ†Å‡Ä–Â¥GeÂ–Â“JAÂ¼Ã„HfÃˆu~Â¸Ã†Â«dEÂ³Ã‰MA|ÂbÂ˜Ã’Â…Â˜Ä‡hGÂ¬CMÂ‚ÃµÂŠÂ„Æ¤Ä…AvÂƒÃ¼VÂ€Ã©Å€Â‰_VÃŒÂ³ÄwQjÂ´Â·ZeÃˆÃÂ¨XÂ´ÂÃ†Â¡QuÂ·Â»ÂŸÂ“Â˜Ã•ZÂ³Ä¡qDoÂ‰y`LÂ¬gdpÂ°ÅŸÂŠpÂ¦Ä—Ã¬Ã…Ä®ZÂŽÂ°IÃ¤Â”hÂ‚Â‘ÂˆzÂŠÄµÂœfÂ²Ã¥Â Â›ÄšÃ‘Â€KpÂ‹IN|Â‹Â„Ã‘z]Å„Â…Â…Â·FUÃ—Ã©Â»RÂ³Â™MÂƒÃ‰Â»GMÂ«Â€ÂkiÂ€Â™Ã©rÂ™}Ãƒ`Â¹ÄƒÃžmÃˆÂnÃÃ®RÇ€Â³ÄœoÄ°zÅ”wÇ¶VÃšÂ£Ã€]ÉœÂ»Ä†lÆ‚Â²Ä Â…Ã¾TÂºÂ·Ã UÈžÃÊ¦Â¶Â†IÂ’Â«dÄ½Ä¢dÄ¬Â¿Â–Â»Ä”Ã—ÂŠh\\cÂ¬Â†Ã¤Â²GÃªÃ«Ä¤Å‚Â¥Ã€Ç¿Å¼ÃƒÃ†MÂº}BÃ•Ä¢yFVvwÂ–ÂˆxBÃ¨Ä»Ä’Â©ÄˆÂ“tCÄ¢É½Å È£Â¦ÄÃ¦Â·HÄ½Ã®Â“Ã´NÃ”Â“~^Â¤ÆŠÂœuÂ„Âœ^sÂ¼{TAÂ¼Ã¸Â°Â¢Ä°ÂªDÃ¨Â¾Å‡Â¶ÃJÂ‘Â®ZÂ´ÄŸ~Sn|ÂªWÃšÂ©Ã²zPOÂÈ¸Â‚bÃ°Â¢|Â‹Ã¸ÄžÂŠÂŒÂœÅ’QÃ¬Ã›Ã@ÄžÂ™ÇŽRSÂ¤ÃÂ§dÂ…iÂ“Â´ezÃÃºÂÃ˜Ã£Â]HqÂ„kIÂŸÃ¾Ã‹QÃ‡Â¦ÃƒsÃ‡Â¤[EÂÂ¬Ã‰ÅªÃxXÆ’Â·Ã–ÆÄ°lÆžÂ¹ÂªÂ¹|XÃŠwnÂ‘Ã†Æ„mÃ€ÃªErÄ’tDÂ®Ä‹Ã¦cQÂƒÂ”EÂ®Â³^ÄÂ¥Â©l}Ã¤QtoÂ˜Å–ÃœqÃ†ÂŽkÂµÂ–Â„ÂªÂÃ”Ä»Ä´Â¡@ÄŠÂ°BÂ²Ãˆw^^RsÂºTÄ€Â£ÅšÃ¦ÂœQPÂ‘JvÃ„zÂ„Â^ÄÂ¹Ã†Â¯fLÃ Â´GCÂ²Â‘dtÂ˜ÂÄ€RtÂ¼Â¤Ä¦OÃ°ÄŸfÃ”Ã°DÅ¨ÅÄžÆ˜Ã¯ÂžPÃˆÂ†Â®Ã¢bMÃ¼Ã€XZÂ Â¸Â£@Ã…ÂšÂ›Â»Â»QÃ‰ÂÂ™]dÂ“sÃ–Ã—_ÃÂ–_ÃŒÃªÅ®PrÄ”ÄÃ•GÄ‚eZÃœÃ®Ä˜qBhtOÂ Â¤tE[h|YÂ‹Ã”Â‚ZÅ›ÃŽsÂ´xÂºÂ±UÂŒÂ’Ã±Âˆt|OÂ’Ä©Ä ÂºNbgÃ¾ÂŠJy^dÃ‚YÂ Ä®Â„]Å˜zÂ¦gCÂ‚Â³Â€R`Ä€ÂŠzÂ’Â¢AjÂŒÂ¸CLÂ„Â¤RÃ†Â»@ÂÅŽk\\Ã‡Â´Â£YW}z@Z}Â‰ÃƒÂ¶Â“oÃ»Â¶]Â´^NÂ‡Ã’}Ã¨NÂ‚ÂªÂ–PÂ˜ÃyÂ¹`SÂ°Â´Â†ATeÂ€VamdUÄwÊ„vÄ®Ã•\\ÂƒuÂ‹Ã†Å—Â¨YpÂ¹Ã ZÃ‚mÂ™Wh{Ã¡Â„}WÃ˜ÇÂ•Ã‰Ã¼wÂ™gaÂ§Ã¡CNÄ™ÃŽ[Ä€Ã•ÄªgÃ–Ã‰ÂªXÂ˜ÂÃ¸xÂ¬Â½Å®Â¦Â¦[Â€Â—Â„NÃŽÂ†LÂ€ÃœUÃ–Â´Ã²rÃ™Å xR^Â–Â†JÂ˜kÂ„Ä³nDX{UÂƒ~ET{Ä¼ÂºÂ¦PZcÂ”jFÂ²Ä–@ÂŽpÂ˜gÂ€ÂˆÂ¨Â“B{ÂƒuÂ¨ÂÅ¦yhoÃšDÂ®Â¯Â¢Â˜Â WÃ²ÂÃ FÃŽÂ¤Â¨GDÂÃ¤zÂ¦kÅ®PÂœÄ¡qÃ‹ÂšÂ¥Ã€]Â€ÂŸÂ˜eÂŽÃ¢ÃšÂ´ÂªKxÄ«Â„PÂˆÂ—Ã–|Ã¦[xÃƒÂ¤JÃžÄ¥Â‚sÂ’NÃ–Â½ÂžÂ€IÂ†Â¬nÄ¨YÂ´Â®ÃÂ—ÆÂŠÂ€mDÂ™ÅuÃ¤Ä‘Ä‘EbÂÂ…eÂ’Âe_Â™vÂ¡}Ã¬Ä™ÇŠÄ“}qÂ”Ã‰Ã¥ÂŸÂTÂ¯ÂµRsÂ¡M@}Å¯aÂ†ÂaÂÂ¯wvÂÆ‰Ã¥ZwÂž\\Z{Ã¥Ã»^Â›"]],"encodeOffsets":[[[108815,30935]],[[110617,31811]]]},"properties":{"cp":[104.065735,30.659462],"name":"å››å·","childNum":2}},{"id":"520000","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@Â†G\\Â†lYÂ£Â‘in"],["@@qÂ‚|ÂˆÂ‚mcÂ¯tÃÂ‡VSÃŽ"],["@@hÃ‘Â£IsÂ‡NgÂÃŸHÂ†Â›ÂHÂªÄ·ÂÃƒh_Â¹ÂƒÂ¡ÄÃ„Â§Å„Â¦uÃ™ÂŠÃ¹ÂŽgSÂ¯JHÂŸ|sÃÃ…tÂÃÃ¯yMDÄÂ»eÃ•tAÂ¤{b\\}Â—ÂƒGÂ®u\\ÂÂÃ¥PFqÂ‹wÃ…aDÂ…ÂžKÂ°ÂºÃ¢_Â£Ã¹bÂµÂ”mÃÂ‹Ã›ÂœÄ¹M[qÂ|hlaÂªÄI}Ã‘Â‚ÂƒÂµ@swtwm^oÂµÂˆDÃ©Ä½Å yVÂ™kyÂ°Ã‰ÂžÃ»Ã›RÂ…Â³Â‚Â‡eÂˆÂ‡Â¥]RÃ•Â‹Ä›Ä§[Æ…Ã¥Ã›DpÂŒÂÂ”JÂ„iVÂ™Â™Â‰Ã‚FÂ²ÂIÂ…Â»mNÂ·Â£Â›LbÃ’YbÂ—WsÃ€bÂŽÂ™pkiÂ™TZÄ„ÄƒÂ¶HÂŒq`Â…Â…Ä¥_JÂŸÂ¯aeÂ«ÂƒKpÃx]aÄ•Ã›PÂƒÃ‡ÈŸ[ÃÃ¥ÅµÃÅ‘Â—Ã·Pw}Â‡TÂœÃ™@Ã•sÂ«Ä¿Ã›qÂ©Â½ÂœmÂ¤Ã™HÂ·yÇ¥Ä˜Ä‰BÂµÄ¨Ã•nÄ‘]KÂ„Â©Â„Å“Ã¡Â‹ÂŸGÃ§ÅŸÂÂ§Ã•ÃŸgÂ‡ÂÇ—Ä¦TÃ¨Æ¤Æº{Â¶Ã‰HÃŽdÂ¾ÅšÃŠÂ·OÃjXWrÃ£LyzÃ‰ALÂ¾Ä™Â¢bÄ¶Ä—y_qMÄ”Ä…roÂ¼hÄŠÂžwÂ¶Ã¸VÂ¤wÂ”Â²Äˆ]ÃŠÂšKx|`ÅºÂ¦Ã‚ÃˆdrÂ„cÃˆÂbeÂ¸Â›`IÂ¼ÄTFÂ´ÂÂ¼Ã“Ã½ÈƒrÂ¹ÃJÂ©k_È™lÂ³Â´_ÂpÄÂ`oÃ’hÂŽÂ¶paÂ‚^ÂÃ“Ä”}DÂ»Â^XyÂœ`dÂ˜[KvÂ…JPhÃ¨hCrÄ‚ÄšÃ‚^ÃŠÆŒÂ wÂˆZLÂÄ Â£ÂšÃbrzOIlÂ’MMÂ”ÄªÅÅ¾Ã‹rÃ—ÃŽeÅ¦ÂŽtw|ÂŒÂ¢mKÂjSÇ˜ÅˆÄ‚StÂÃŽÅ¦EtqFTÂ†Â¾Â†EÃ¬Â¬Â¬Ã´xÃŒOÂ¢ÂŸÂ KÂŠÂ³Å€ÂºÃ¤YÂ†Â„Â”PVgÅŽÂ¦ÅŠmÅžÂ¼VZwVlÂŒÂÂ„zÂ¤Â…ÂžÂ£TlÂ®ctÄ½ÃšÃ³{GÂAÂ‡ÂŒÃ‡geÂš~ÃŽÂ‘dÂ¿Ã¦aSbaÂ¥KKÃ»ÂjÂ®_Ã„Â‡^\\Ã˜Â¾bPÂ®Â¦x^sxjÄ¶I_Ã„Â XÂ‚Ã¢Â¼Â•HuÂ¨QhÂ¡Ã€@ÂÃ‹Ã´}ÂŽÂ±ÂžGNÃ¬ÄŽlTÂ¸ÂˆÂ…`V~RÂ°tbÃ•ÄŠ`Â¸ÃºÃ›tÃÂ€FDuÂ€[ÂƒMfÂqGHÂ·Â¥yAÂ‰ztÂMFe|RÂ‚_GkÂ†ChZeÃšÂ°toÂ˜v`xÂ‹bÂ„ÂŒDnÃ{E}ÂšZÂ˜Ã¨Â€xÂ—Â†NEÃžÂŠREnÂ˜[Pv@{~rÄ†ABÂ§Â‚EOÂ¿|UZ~Ã¬Â„UfÂ¨JÂ²Ä‚ÃÃ†Â€Â‚sÂªÂ–B`Â„sÂ¶ÂœfvÂÃ¶Â¦ÂŠÃ•~dÃ”qÂ¨Â¸ÂºÂ»uÃ¹Â[[Â§Â´sbÂ¤Â¢zÃ¾FÂœÂ¢Ã†Â…Ã€hÂˆÂ™ÂÃ‚ÂˆW\\Ä±ÂŽÃ‹IÃÂŠoÂ±ÄÅ Â£Ã¾ÂˆÃŠs}Â¡RÂÂ]ÂŒÄ›ÂƒDÂÂ‚gÂ´VGÂ¢Â‚jÂ±Â®Ã¨Â†ÂºÃƒmÂpU[ÃÂ›Â‘ÂŒÃ«ÂºÂ°rÂ›ÃœbNuÂ¸}ÂŽÂºÂ¼Â‡`niÂ”ÂºÃ”XÄ„Â¤Â¼Ã”daÂµÂ€Ã_ÃƒÂ€Â…Â†ftQQgÂœRÂ—Â‘Â·Ç“Â’vÂ”}ÃÃ—ÂœÄµ]ÂµÂœÂ“WcÂ¤FÂ²Â›OÄ©Å³Ã£WÂ½Â¯KÂÂ‚Â©Â…]Â€Â{Â†LÂÃ³ÂµCIÂµÂ±MÃŸÂ¿hÂŸÂ•Â©ÄqÂ¬oÂ‚Â½Âž~@i~TUxÅªÃ’Â¢@ÂƒÂ£Ã€EÃ®Ã´ruÅ„Â‚Â”Â“Â‚b[Â§nWuMÃ†LlÂ¿]Âx}Ä³ÂÂ€Â½"]],"encodeOffsets":[[[112158,27383]],[[112105,27474]],[[112095,27476]]]},"properties":{"cp":[106.713478,26.578343],"name":"è´µå·ž","childNum":3}},{"id":"530000","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@ÂÂ[Â„Ã¹xÂ½}Ã‘RHÂ‘ÂYÄ«ÄºÃ»sÃnÂ‘iEoÃ£Â½YaÂÂ²Ä—{cÂ¬ÄgÂ•Ä‚sAÂ•Ã˜Ã…wÄÂ‚ÃµzFjw}Â—Â«DxÂ¿Â}UÅ©lÂŸÃªÂ™@Â•ÂHÂÃ…ÂFÂ‰Â¨Ã‡oJÂ´Ã“nÅ©uÄ…Â¡ÃƒÂ¢pÃ’Ã…ÂŒÂ“Ã˜Â TFÂ²Â‚xaÂ²Ã‹XÂ€Â‚cÃŠÂ‹lHÃ®AÃŸÃ‹ÅkÅ»Æ‘Å·Ã‰Â©hÂ™WÂÃ¦ÃŸUÂ‡Â“Ã‹sÂ¡Â¦}Â•teÃ¨Ã†Â¶StÃ‡Â€Ã‡}FdÂ£jÂ‹ÄˆZÄ†ÂÃ†Â‹Â¤TÂ‚Ä\\DÂƒ}OÃ·ÂšÂ£ÂUÂˆÂ§~ÅƒGÂ™Â‚Ã¥ÂÅƒDÄÂ¸ÂœTsdÂ¶Â¶BÂªÂšÂ¤uÂ¢ÅŒÄŽo~tÂ¾ÃÅ¶Ã’tDÂ¦ÃšÂ„iÃ´Ã¶Â‰Â€zÂ›Ã˜XÂ²ghÄ¯hÂ½ÂÃ›Â±Â¯Â€Ã¿mÂ·zRÂ¦ÆŸ`ÂªÅŠÃƒhÂ¢rOÃ”ÂÂ´Â£YmÂ¼Ã¨ÃªÂfÂ¯ÅªÄ½nÂ„Â†cÃšbÂŒw\\zlvWÂžÂªÃ¢ÂˆÂ Â¦gÂ–ÂmÄ¿BÄ¹ÂŸÂ£Â¢Æ¹Å™bÄ¥kÇ«ÃŸeeZkÃ™IKueTÂÂÂ»sVesbÂ‘ÂaÂÄ•Â Â Â¶Â®dNÂœÄ„Ã„pÂªyÂŽÂÂ¼Â—Â„Â³BEÂ˜Â®lÂ‡ÂŽGÂœÅCÂœÇ¶wÃªÅ¼Ä”Ã‚eÂ„pÃÃ€QÆžpCÂ„Â–Â¼Å²ÃˆÂÂAÃŽÃ´Â¶RÂ„Ã¤Â’Q^Ã˜uÂ¬Â°Âš_ÃˆÃ´cÂ´Â¹Ã²Â¨PÃŽÂ¢hlÄŽÂ¦Â´Ä¦Â“Ã†Â´sÃ¢Ã‡Â„ÂÅ²PnÃŠD^Â¯Â°Â’UpvÂ†}Â®ÂBPÃŒÂªÂ–jÇ¬xÂ–SÃ¶wlfÃ²ÂªvÂ€qÄ¸|`HÂ€ÂviÄ¼Â€ndÄœÂÄ†hÅˆÂ•Â‚emÂ·FyÃžÂqÃ³ÂžSÄ¯Â¯Â‘Â³X_ÄžÃ§ÃªtryvLÂ¤Â§zÂ„Â¦cÂ¦Â¥jnÅžkÂ˜ÂˆlDÂ¤Ã¸zÂ½ÄœÃ ÂžÄ‚Å§MÃ…|Ã¡Æ†Ã ÃŠcÃ°Ã‚FÃœÂŽÂ‚Ã¡Å¢Â¥\\\\ÂºÂ™Ä°Ã¸Ã’ÃJÄ´Â‡Â„Ã®DÂ¦ÂzKÂ²ÇÃŽEh~Â’CDÂÂhMn^ÃŒÃ¶Ã„Â©ÄŒZÃ€ÂžaÃ¼Â„fÉyÅ“pÄ¯Â´Ä›FÅ±k]Ã”Ä›Â¢qlÃ…Ä†Ã™aÂ¶~Ã„qÂšÂšÃªÂ€ljÂNÂ¬Â¼HÂ„ÃŠÂšNQÂ´ÃªÂ¼VÃ˜Â¸EÂ†Â†^ÅƒÃ’yÂŒÂƒM{ÂŒJLoÃ’ÂœÄ™Ã¦ÂŸeÂ±Ä¶Â›yÂ‰Â’Â‡gÂÃ£Â“Â¯JYÂÃ†ÄÄ˜Ã«oÂ¥Å Â‰oÂ¯hcKÂ«z_pÂŠrCÂ´Ä¢Ã–YÂ”Â—Â¼Â vÂ¸Â¢RÂŽÃ…WÂ³Ã‚Â§fÃ‡Â¸YiÂ³xRÂ´ÄUÃ‹ÂŠ`ÃªÄ¿UÂ„Ã»Â€uÄ†BÂƒÆ£Ã¶Â‰NÂÂ€DHÂ«ÄˆgÂ†Â—Â—Ã‘Â‚aB{ÃŠNFÂ´Â¬cÂ·Ã…v}eÃ‡ÃƒGBÂ»Â”IfÂ•Â¦HÅˆÄ•MÂ…~[iwjUÃKEÂ•ÂŽÂ‹Â¾dÄªÃ§WÂ›ÂšÂIÂ‹Ã¨Ã€ÂŒoÃˆXÃ²yÅžÅ®ÃˆXÃ¢ÃŽÅšÂŠj|Ã sRyÂ‹ÂµÃ–Â›Â–PrÂ´Ã¾ÂŒÂ Â¸^wÃ¾TDÅ”Â–HrÂ¸Â‹ÂžRÃŒmfÂ‡Å¼Ã•Ã¢CÃ´oxÂ–ÄœÆŒÃ†Ä®ÂŒÂ›ÃÂ–ÂœYÂ˜tÃ¢Å¦Ã”@]ÃˆÇ®Æ’\\ÄªÂ¼Ã„Â£UsÃˆÂ¯LbÃ®Æ²ÅšÂºyhÂ‡rÂŒÂŠ@Ä’Ã”ÂÆ€ÂŸÃ€Â²Âº\\ÃªpÂ“Â’JÂŠ}Ä vÂŠqtÂ„Ä @^xÃ€Â£ÃˆÂ†Â¨mÃ‹ÃÄŸ}nÂ¹_Â¿Â¢Ã—Y_Ã¦pÂˆÃ…Â–A^{Â½Â•LuÂ¨GOÂ±Ã•Â½ÃŸMÂ¶wÂ’ÃÄ¢Ã›Â‚PÂ‚Â›Æ¢Â¼pcÄ²xÂŠ|apÃŒÂ¬HÂšÃÂŒÅŠSÂfsÃ°BZÂ¿Â©Â“XÃÃ’KÂ•kÂ†Ã·EÃ»Â¿Â‰SÂ…rEFsÃ•Å«kÂ”Ã³VÇ¥Å‰iTLÂ‚Â¡n{Â‹uxÅ£ÂÃhÂ™Ã´ÅÂ¬ÄŸÅNÂ“Â‘NJkyPaqÂ™Ã‚ÄŸÂ¤KÂ®Â‡YÂŸxÃ‰Æ‹Ã]ÄÄ™DqÃ§gOgÂ†ILuÂ—\\_gzÂ—]WÂ¼Âž~CÃ”Ä“]ÂbÂÂµogÂpÃ‘Âž_oÄ`ÂÂ´Â³Èškl`IÂªÂºÃŽÈ„qÃ”Ã¾ÂžÂ»EÂ³ÄŽSJÂ»Âœ_fÂ·Â‚adÃ‡qÂƒÃ‡cÂ¥Ã_Å¹w{Â™L^Ã‰Â±Ä‡xÂ“UÂ£ÂµÃ·ÂxgÄ‰pÂ»Ä†qNÄ“`rÄ˜zaÄµÄšÂ¡KÂ½ÃŠBzyÃ¤KXqiWPÃÃ‰Â¸Â½Å™ÃcÃŠG|ÂµÆ•Æ£GÃ‹Â›Ã·ÂŸkÂ°_^Ã½|_zÄ‹ÂBZocmÃ¸Â¯hhcÃ¦\\lÂˆMFlÆ°Â£ÄœÂ„Ã†yHÂ“Â„FÂ¨ÂÂ‰ÂµÃªÃ•]Â—Â›HAÂ…Ã Ã“Â„^itÂ `Ã¾ÃŸÃ¤kÂŠÄ¤ÃŽT~WlÃ¿Â¨Â„Ã”PzUCÂÂ–NVvÂ [jÃ¢Ã´DÃ´Ä[}ÂžÂ‰zÂ¿Â–msShÂ‹Â¯{jÃ¯ÂÄŸl}Å¡Ä¹[Â–Å‘ÂŒÂ‰gKÂ‹Â©UÂ·ÂµÃ‹@Â¾Âƒm_~qÂ¡fÂ¹Â…Ã…Ã‹^Â»Â‘fÂ³Ã¸}QÂ•Â„Â¡Ã–Ã‹Â³gÃÂ±^Ã‡ÂÂ…\\Ã«ÃƒÂƒA_Â—Â¿bWÂ›Ã[Â¶Æ›Ã©ÂÂÂ£F{Ä«Zgm@|kHÇÆÄ‡Â¦UÄ”Å¥ÂƒÃ—Ã«}ÇÂƒeÄÂºÈ¡È˜ÃÃBÃ‰Â™Â£ÄÄ˜PÂªÄ³Â¶Â“Å‰Ã¿Â‡yÂ©nÂ‰ÄÂ£GÂ¹Â¡IÂ›ÂŠÂ±LÃ‰ÄºÃ‘dÄ‰ÃœÂ‡WÂ¥Â˜Â‰}gÂ˜ÃÂ†{aqÃƒÂ¥aÂŠÂÄ±Ä™ÂÃZÂ—Ã¯`"],"encodeOffsets":[[104636,22969]]},"properties":{"cp":[102.712251,25.040609],"name":"äº‘å—","childNum":1}},{"id":"540000","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@Ã‚ÂhÂžÄ¾xÂŽÂÅ–Â‰xÂƒÃ’VÂŽÂ†ÂºÃ…Ã¢AÄªÃÈ†ÂµÄ™Â¯Å‡aÂ±r_w~uSÃ•ÅˆÂ‘qOj]É„QÂ…Â£ZÂ…Â…UDÃ»oYÂ’Â»Â©M[Â‹LÂÂ¼qÃ£Ã‹{VÃÂ•Ã§WVÂiÂÂŽ]Ã«Â©Ã„Ã·Ã yÂÆ›hÂ›ÃšUÂ°ÂŒÂŒaÂ”dÂ„cQÂƒ~MxÂ¥Â™ccÂ¡Ã™aSyFÂ—Ã–ÂkÂÂŒuRÃ½qÂ¿Ã”ÂµÂÂ•QÄ½Â³aG{Â¿FÂµÃ«ÂªÃ©ÄœÃ¿Âª@Â¬Â·Â–KÂ‰Â·Ã arÂiÄ•Ä€Â«VÂ»Å¶Â™Ä´Å«Â˜gÃ¨LÇ´Å‡Æ¶afÂ‹tÂŒÃ¨BÅšÂ£^ÂŠÃ¢Â†ÇÃÂ®Â–ÂšMÂ¦ÃÇžÃ¿Â¬LhÂŸÂŽJÂ¾Ã³Æ¾Ã†ÂºcxwÂÂ‹f]YÂ…Â´ÂƒÂ¦|ÂœQLnÂ°aÂœdÄŠÂ…Âœ\\Â¨oÂ’ÂœÇ€ÃÅŽÂœÂ´Ä©Ä€d`tÃŠQÅžÅ•|Â‚Â¨C^Â©ÂœÄˆÂ¦Â„Â¦ÃŽJÄŠ{ÂŽÃ«ÄŽjÂªÂÂ²rÃÂ‰Âšl`Â¼Ä„[t|Â¦StÃ¨Â¾Â‰PÂŒÃœKÂ¸Â€dÂ˜Æ„Ä±]sÂ¤Â—Ã®_vÂ¹ÃŽVÃ²ÂÅ¦jÂ˜Â£ÆscÂ—Â¬_ÄžÂ´|ÅÂ˜ÂÂ¦AvÂŽÂ¦w`ÄƒÂaÂÂÃaaÂÂ¢eÂ¤Ä±Â²Â©ÂªSÂªÂšÃˆMÄ„wÂžÃ‰Ã˜Å”Ã¬@TÂ‘Â¤Â—Ä˜Â™\\ÃµÂª@Â”Ã¾oÂ´ÂxAÂ ÂÂsÂ”Ã‚tÅŽKzÃ³Â´Ã‡ÄŠÂµÂ¢rÂž^nÄŠÂÃ†Â¬Ã—Ã¼GÂžÂ¢Â‚Â³Â {Ã¢ÄŠ]ÂšÂ™GÂ‚~bÃ€gVjÂzlhÇ¶ÂfÂ€ÂžOÂÂšfdÂŠÂ‰ÂªB]pjÂ„Â•TOÂ–tÄŠÂ‚nÂ¤}Â®Â¦ÂƒÄŒÂ¥dÂ¢Â¼Â»ddÂšÂ”YÂ¼ÂŽtÂ—Â¢eÈ¤JÂ¤}Ç¾Â¡Â°Â§Â¤AÃÂ“lc@ÄÂ”sÂªÄ‡Ä¼Ä‘AÃ§Â‡wxÂ•UuzEÃ–Ä¡~ANÂ¹Ã„Ã…È€Å»Â¦Â¿Ä£ÅÃ©Ã¬Â±HÂ…Ã£dÂ«g[Ã˜Â‰Â¼Ä“Ã€Â•cÄ«Ä¾Ä¡Â¬cJÂ‘ÂµÂ…ÃÊ¥VÈÂ¸ÃŸSÂ¹Â†Ã½Â±ÄŸkÆÂ¼Ä…^É›Â¤Ã›Ã¿Â‰Âb[}Â¬ÅÃµÃƒ]Ã‹NmÂ®g@ÂÂ•Bg}ÃFÂ±ÇyLÂ¥ÂÃCÂˆÂƒIÄ³Â€ÃÃ·Ã‘ÂšÄ¯[Â¹Â¦[Ã¢Å¡ÂÂEÃ›Ã¯ÃÃ‰dÆ…ÃŸ{Ã¢NÃ†ÄÅ¨ÃŸÂÂ¾Ä›Ã·yCÂ£Â‡kÂÂ´Ã“H@Ã‚Â¹Â†TZÂ¥Â¢Ä¯ÂƒÂ·ÃŒAÃÂ§Â®Â—ZÂcÂ…vÂ½ÂŸZÂÂÂ¹|Ã…Â•WZqgWÂ“|ieZÃ…YVÃ“ÂqdqÂÂ•bcÂ²R@ÂÂ†cÂ‡Â¥RÃ£Â»GeÂ†ÂŸeÆƒÄ«QÂ•}J[Ã’Â“KÂ…Â¬Æ|oÂ’Ä—jÄ¡Ä Ã‘NÂ¡Ã°Â¯EBÄnwÃ´ÉÂÄ—ÂªÂƒÂ²Â•CÎ»Å¹Ä¡ÇÊ…Ä¯ÄÃ£Ì£Å«È¹]Î“Í§gÅ¡sgÈ½Ã³Ï§ÂµÇ›Â†Ä™gÅ¿Â¶ÒÄ‡`Ä˜Ä…ÅŒJÃžÂšÃ¤Â¤rÃ…ÅˆÂ¥Ã–ÃUÄ›tÄ™uÅ¯ÃžiÄŠÃ„Ã€\\Ã†sÂ¦Ã“Rb|Ã‚^Å™ÃŒkÃ„Å·Â¶Â½Ã·Â‡fÂ±iMÃÂ‘Â›Â‰@Ä¥Â°GÂ¬ÃƒMÂ¥nÂ£Ã˜Ä…Â‚ÄŸÂ¯ÃŸÂ”Â§aÃ«bÃ©Ã¼Ã‘OÄÂœkÂ£{\\Â‘eÂµÂªÃ—MÂ‘ÂšÃ‰fmÂ«Æ‘{Ã…Ã—ÂƒGÅÇ©Ã£yÂ³Â©WÃ‘ÄƒÃ»Â‚Â·Â·Â‘QÂ—Ã²Ä±}Â¯Ã£Â‰IÂ•Ã©Ã•Ã‚ZÂ¨Ä«Ã¨sÂ¶ZÃˆsÂŽÃ¦Ä”TÅ˜vÂŽgÃŒsN@Ã®Ã¡Â¾Ã³@Â‰Â˜Ã™wUÂ±Ã‰TÃ¥Â»Â£TÄ‘ÂŸWxÂqÂ¹ZoÂ‘bÂ‹s[Ã—ÂŒÂ¯cÄ©vÂ‡ÂŒÄ—Å§Â³BM|Â¹kÂ‰ÂªÄ§Â—Â¥TzNYnÃÂÃŸpÂÂÄ™rÃ±Ä Ä‰RS~Â½ÂŠÄ›VVÂŠÂµÂ‚ÃµÂ‡Â«ÂŒMÂ£Â£ÂµBÂ•Ä‰Â¥Ã¡ÂºaeÂ~Â³AuÄh`ÂÃœÂ³Ã§Â@BÃ›Â˜Ã¯Ä¿aÂ©|zÂ²ÃÂ¼DÂ”Â£Ã ÄÂ²Â‹Å¸ÂƒIÂƒÃ»Â›ÂIÂ ÄÂ€Ã³KÂÂ¥}rÃ_ÃÂ´Ã©MaÅˆÂ¨Â€~ÂªSÄˆÂ½ÂŽÂ½KÃ™Ã³Ä¿eÆƒÃ†BÂŽÂ·Â¬Ã«nÃ—WÂ|UÂº}LJrÆ³Â˜lÅ’Âµ`bÃ”`QÂˆÂˆÃÃ“@sÂ¬Ã±IÂŒÃ@Ã»wsÂ¡Ã¥QÃ‘ÃŸÃ`Å‹Ä´{ÄªÂ“TÂ•ÃšÃ…TSÃ„Â³Â‚Â‹Yo|Ã‡[Ã‡Â¾ÂµMWÂ¢ÄiÃ•Ã˜Â¿@Â˜ÂšMhÂ…pÃ•]jÂ†Ã©Ã²Â¿OÆ‡Ä†Æ‡pÂ€ÃªÄ‰Ã¢lÃ˜wÂ–Ä›sÂÂˆÇ©Â‚ÄµÂ¸cÂ…ÂbUÂ¹Å™Â¨WavquSMÂzeo_^gsÃÂ·Â¥Ã“@~Â¯ÂÂ¿RiÄ«BÂ™ÂŠ\\Â”qTGÂªÃ‡ÄœÃ§PoÂŠÃ¿fÃ±Ã²Ä…Â¦Ã³QÄ«ÃˆÃ¡PÂ•ÂœÄbÃŸ{ÂƒZÅ—Ä¸IÃ¦Ã…Â„hnszÃCÃ‹Ã¬Ã±ÂšÃÂ·Ä…ÄšÃUmÂ®Ã³ÂLÂ·ÄƒUÂ›ÃˆÃoÃ¹Â´ÂÃŠjÂ°ÅÅ¤_uÂµ^Â‘Â°ÂŒÃ¬Ã‡Â–@tÄ¶Ä’Â¡Ã†Â‡MÂ³Ä¢Â«Â˜Ä°Ä¨Ã…Â®ÄŸÂ†RÂŽÄÃ°Â“ggheÃ†Â¢zÂ‚ÃŠÂ©Ã”\\Â°ÃÄŽz~ÅºÂ¤PnÂ–MÄªÃ–BÂ£ÂÂŸkÂ™nÃ©Â„Â§Å¼Ä‡ÂŠÂ˜Ä†KÂ„Ä’Â°ÂÂ¼LÂ¶Ã¨Â‰Ã¢zÂ¨uÂ¦Â¥LDÄ˜zÂ¬Ã½ÃŽmÄ˜dÂ¾ÃŸÂ”FzÂ“hgÂ²Â™FyÂ¦ÄÂ¤Ä‹Å†bÃŽÂ›@yÂ‚Ä„Ã¦mÂ°NÄ®ÂZRÃ–ÃÂŽJÂ²Ã¶LÄ¸Ã’Â¨YÂ®ÆŒÃVÂ‰Ã Â˜tt_ÃšÂ€Ã‚yÄ zÂž]Å¢hÂ€zÄŽ{Ã‚Â†Ä¢XÂ”Âˆc|ÂšÃqÂŽÂšfOÂ¢Â¤Ã¶gÂ‚ÃŒHNÂŽÂ„PKÅ–ÂœÂŽÂ˜UÃºÂ´xx[xÂˆvÄCÃ»Ä€ÂŠÃ¬Ã–TÂ¬Â¸^}ÃŒsÃ²dÂ´_ÂŽÂ‡KgÅ¾LÄ´Â…Ã€Bon|H@Â–ÃŠxÂ˜Â—Â¦BpÂÅ°ÂˆÅŒÂ¿fÂµÆŒAÂ¾zÇˆRxÂŠÂ¶FÂ”ÂœkÄ„ÅºÂRzÅ€Âˆ~Â¶[Â”Â´HnÂªÂ–VÆžuÄ’ÂÃˆÂ¨ÆŽcÂÆ½ÃŒmÂ¸ÃÃˆMÂ¦xÍŠÃ«Ã€xÇ†BÂ’ÂšÃº^Â´WÂ†Â£Â–dÂ„kÉ¾Ä¬pÂœwÂ‚Ë‚Ã˜É¦Ä¼Ä¬IÅšÂœÃŠÂ•nÂ›Å”aÂ¸Â™~JÂ°Ã®Â”lÉŒxÄ¤ÃŠÃˆÃ°hÃŒÂ®Â‚gÂ˜TÂ´Ã¸ÂŽÃ CÂˆÂŽÃ€^ÂªerrÆ˜dÂžÂ¢Ä°P|ÂÄ–Â Å¸WÂœÂªÄ¦^Â¶Â´Ã‚LÂ„aTÂ±Ã¼WÆœÂ˜Ç€RÃ‚ÂšÅ¶UÅ„ÂšÄ–[QhlLÃ¼AÂ†Â‹Ãœ\\Â†qRÂ›Ä„Â©"],"encodeOffsets":[[90849,37210]]},"properties":{"cp":[91.132212,29.660361],"name":"è¥¿è—","childNum":1}},{"id":"610000","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@Â˜pÂ¢Â—È®ÂµÂšÃ»GÂ™Ä¦}Ä¦ÂšÃ°ÂÇšÂ¶Ã²ÂÆ„Â€jÉ‚zÂ°{ÂºÃ˜kÃˆÄ™Ã¢Â¦jÂªÂ‚BgÂ‚\\ÂœÄ‹Â°sÂ¬ÂŽÂ’]jÂžÃºÂ Â‚EÂ”ÈŒÇ†Â¬sÂ„tÂ‡Â”RÂˆÃ†dÄ Ä°ÂŽwÃœÂ”Â¸Ã´WÂ¾Æ®Å‚Ã’_{Â’ÃŒÂšÃ»Â¼Â„jÂºÂ¹Â¢GÇªÃ’Â¯Ä˜ÂƒZ`ÂºÅŠÂƒecÅ†Ä…Âš~BÂÃ‚gzpÃ¢Ä“Ã²YÇ È°ÃŒTÃŽÂ¨Ã‚WÂœ|fcÂŸÄƒÂ§uFÂ—ÂŒ@NÂŸÂ¢XLÂƒÂŠRMÂº[ÄŸÈ£Å¿Ã¯|Â¥JÂ™kc`sÅ‰Ç·Â’ÂYÂ¹Â‹W@ÂµÃ·KÂ…Ã£Ã¯Â³Ã›IcÃ±Â·ÂVÈ‹ÃšÂÃ’Ä·Ã¸ÂÂ©Â—Ã¾Â¥ÂƒyÂ‚Ã“ÂŸÄŸÄ™mWÂµÃŽumZyÂOÅ…ÆŸÄ¥Ã“~sÃ‘LÂ¤ÂµaÃ…Â…YÂ¦ocyZ{Â‰yÂ c]{ÂŒTaÂ©Âƒ`U_ÄšÄ“Â£Ï‰ÃŠÆKÃ¹Â’KÂ¶È±ÃÆ·Â§{Ã»Â»Ã…ÃÈ¹ÃÃ©uÄ³|Â¹cÃ‘dÂ‘ÂŠÃ¬UYÂƒÂŽOÂ‘uFÂÂ–Ã•ÃˆYvÃCqÃ“ÂƒTÂ•Ç¢ÃÂ§Â·SÂ¹NgÂŠVÂ¬Ã«Ã·ÃtÂ‡Â°DÃ˜Â¯Â’CÂ´Å‰Æ’Ã³pÄ£}Â„Ä‹ÂcEÃ‹Â…FÂŸÂŸÃ©GUÂ¥Ã—KÂ…Â§ÂÂ¶Â³BÂ‹ÄŒ}CÂ¿Ã¥Ä‹`ÂwÄ¡BÂ·Â¤Å‘cÆÂ²Å‘[Ã…^axwQOÂ…Ã¿EÃ‹ÃŸÅšÂ•Ä¤NÄ”ÂŸwÆ‡ÂˆÂÃ„ÂŠÅ„wÄªÂÂŠo[Â„_KÃ“ÂªÂ³Â“ÂÃ™nKÂ‰Ã‡ÂƒÄ›ÂœÃ¿]ÄÂ€Äƒ_dÂ©Â·Â©ÃÅÂ°Ã™Â®g]Â±Â„ÂŸÂ‡ÃŸÂ˜Ã¥Â›Â—Â¬Ã·Âm\\Â›iaÇ‘kÄ›X{Â¢|ZKlÃ§hLtÂÂ€Å‡Ã®ÅµÂ€Å“Ã¨[Â€Ã‰@Æ‰Ä„EÂœÂ‡tÆ‡ÂÃÂ˜Â³ÂÄ§ZÂ«mJÂ…Â›Ã—Â¾Â‘MÂtÃÄ¦Â£IwÃ„Ã¥\\Ã•{Â‡Â˜ÂƒOwÄ¬Â©LÃ™Â³ÂÃ™gBÆ•Å€rÃŒÂ›Ä¢ÅOÂ¥lÃ£yCÂÂ§HÃÂ£ÃŸEÃ±ÂÂŸXÂ¡Â—ÂÂ°Ã™CgpÅ¥zÂ‘Âˆb`wIÂ„vA|Â§Â”Â‡Â—hÂoÄ•@EÂ±Â“iYdÂ¥OÄ»Â¹S|}F@Â¾oAOÂ²{tfÂžÃœÂ—Â¢FÇ‚Ã’ÂˆWÂ²Â°BÄ¤h^Wx{@Â„Â¬Â‚ÂFÂ¸Â¡Â„Ä·nÂ£ÂP|ÂŸÂªÄ´@^Ä ÄˆÃ¦bÂ–Ã”cÂ¶lÂ˜YiÂ…Â–^MiÂ˜cÄŽÂ°Ã‚[Ã¤Â€vÃ¯Â¶gv@ÂÃ€Â“Ä¬Â·lJÂ¸sn|Â¼u~Âa]Â’Ã†ÃˆtÅŒÂºJpÂ’ÂƒÃ¾Â£KKf~ÂŠÂ¦UbyÃ¤IÂšÄºÃ£nÂ‡Ã”Â¿^ÂÂžÅµMTÂ–hÄ ÃœÂ¤koÂ¼ÅŽÃ¬Ä…Çœh`[tÂŒRdÂ²Ä²_ÂœXPrÉ²Â‰lÂ‘Â‚XÂžiLÂ§Ã ÂƒÂ–Â¹ÂŽHÂ˜Â°È¦qÂÂºÂ®QCÂ—bAÂ†Â„ÅŒJÂ¸ÂÄ•ÃšÂ³ÄºÂ§Â `dÂ¨YjÂžiZvRÄºÂ±Ã¶VKkjGÈŠÃ„ÂePÄžÂžZmÄ¼KÃ€Â€Â‚[ÂŠÂŽ`Ã¶sÃ¬hÂ†Ã¯ÃŽoÄ¬dtKÃž{Â¬Ã¨Ã’Ã’BÂŒÃ”pÄ²Ã‡Ä¬JÅŠÂÂ¦Â±JÂ«ÂˆYÂ§Â‹@Â·pHÂ€ÂµÃ Ã¥VKeÂ›pWÂ†ftsAÂÃ…qCÂ·Â¬koÂ«pHÃ†uK@oÂŸHÂÄ†Ã›Â„Ä·hÂxÂ“eÂ‘nÂ›SÂ³Ã ÇrqÆ¶RbzyÂ€Â¸Ã‹ÃÂlÂ›Â¼EÂºpÄ¤Â¼ÂŒxÂ¼Â½~ÄžÂ’ÂÂ”Ã @Â†ÃšÃ¼dK^ÂˆmÂÃŒSj"],"encodeOffsets":[[110234,38774]]},"properties":{"cp":[108.948024,34.263161],"name":"é™•è¥¿","childNum":1}},{"id":"620000","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@VuUv"],["@@Å©Â‹EÂÄ tt~nkh`QÂ‰Â¦Ã…Ã„ÃœdwÂ˜AbÃ—Ä Ä…JÂˆÂ¤DÃ¼Ã¨gÄºqBqÂœjÂ°lIÂ¡Ä¨Ã’Â¤ÃºSHbÂšÂ‡ÂŠjÃŽÂ‘BÂŠÂ°aZÂˆÂ¢KJÂŽÂ’O[Â|AÂ£ÂžDx}NÄ‚Â¬Â•HUnrkÂ„Â kpÂ€Â¼YÂ kMJn[aGÂ‚Ã¡ÃšÃ[Â½rcÂ†}aQxOgsPMnUsÂ‡ncÂÂ‹ZÂ…ÂžÂ–sKÃºvAÂ›tÂ„ÃžÄ¡Â’Â£Â®Ä€YKdnFwÂšÂ¢JEÂ°Â”Latf`Â¼hÂ¬we|Â€Ã†Â‡Âšbj}GAÂ€Â·~WÂŽÂ”Â—`Â†Â¢MCÂ¤tLÂ©Ä²Â°qdfÂ”OÂ‚Â“bÃžÄ¬Â¹ttu`^ZÃºÂE`ÂŒ[@Â„Ã†sÃ®zÂ®Â¡Â’CÂ„Æ³ÆœGÂ²Â“RÂ‘Â¢RÂ’mÂ”fÂŽwÄ¸gÃœÂƒÂ‚Ä…Â G@pzJMÂ½ÂmÂŠhVyÂ¸uÃˆÃ”OÂ±Â¨{LfÃ¦UÂ¶ÃŸGÄ‚q\\ÂªÂ¬Â‡Â²IÂ‚Â¥IÅ‰ÃˆÄ«oÄ±Â‹Ã“Ã‘AÃ§Ã‘|Â«LÃcspÄ«Ã°ÃgÂ…tÃ«_ÃµÂ‰ÂÂ\\Ä‰Ã±LYnÄÂgÂ’ÂŸRÇ¡ÃiHLlÃµUÄ¹Â²uQjYiÂÂ§Z_cÂ¨ÂŸÂ´Ä¹Ä–Ã™Â·ÂÅ‹IÂ…ÂƒaBDÂ˜ÂRÂÂ¹È¥rÂ—Â¯ÂGÂ•ÂºÃŸÂ„KÂ¨ÂjÂWkÂ’É±ÂŠOqÂ›WÄ³\\aÂÂ‹Q\\sg_Ä†Ç›ÅÃ«pÂ»Â£lÄŸÃ›Â€gSÂ•Å¶NÂ®ÂÃ€]ÂˆÃ“Ã¤mÂ™Ä¹Ã£JazÂ¥V}Â‰LeÂ¤LÂ„Ã½oÂ‘Â¹IsÅ‹Ã…Ã‡^Â‘ÂŽbzÂ…Â³tmEÃÂ´aÂŠÂ¹cÄecÃ‡NÂ•ÄŠÃ£Ã\\ÄÂ¯Â—dNjÂ•]jÂ†Â—ZÂµkÃ“daÂ•Ä‡Ã¥]ÄŸÄ³@Â Â©O{Â¤ÂÄ¸mÂ¢ÂƒEÂ·ÂÂ®ÂƒÂ«|@Xwg]AÄ£Â±Â¯Â‡XÇÃ‘Ç³ÂªcÂ›wQÃšÅÃ±sÃ•Â³Ã›V_ÂÃ½ÂƒÂ˜Â¥\\Å¯Â¥Â©Â¾Ã·wÂ—ÂŽÂ©WÃ•ÃŠÄ©hÃ¿Ã–ÃRoÂ¸VÂ¬Ã¢DbÂ¨ÂšhÃ»xÂ–ÃŠÃ—ÇŒ~ZÃ¢Âƒg|ÂšXÃnÃŸYoÂºÂ§ZÃ…Å˜vÂŒ[Â„ÄÃ–ÊƒuÄxcVbnUSfÂ…BÂ¯Â³_TzÂºÂ—ÃŽÂ•OÂÂ©Ã§MÃ‘~MÂˆÂ³]Âµ^pÃ¼ÂµÂ”ÂŠÃ„Y~y@X~Â¤ZÂ³Â€[ÃˆÅl@Â®Ã…Â¼Â£QKÂƒÂ·DiÂ‹Â¡ByÂ‘Ã¿Â‰Q_Â´DÂÂ¥hÅ—yÂƒ^ÂŸÄÃZ]cIzÃ½Â‰ahÂ¹MÄªÄŸPÂ‘s{Ã²Â‡Â‹Â‘Â²VwÂ¹tÂ³ÅœÃ‹Â[ÂŽÃ‘}X\\gsFÂŸÂ£sPAgÄ›pÃ—Ã«fYHÄÄÃ–qÄ“ÅOÃÃ«Â“dLÃ¼Â•\\iÂŒÂ”t^cÂ®ÂšRÃŠÂºÂ¶Â—Â¢HÂ°mÂˆÂ‘rYÂŸÂ£BÂŸÂ¹ÄIoÄ¾uÂ¶uI]vÄ£SQ{ÂƒUÅ»Â”Ã…}QÃ‚|ÃŒÂ‹Â°Æ…Â¤Ä©ÅªUÂ Ä™Ä„ÂžÃŒZÃ’Âž\\vÂ˜Â²PÄ”Â»Æ¢NHÂƒÄ‚yAmÆ‚wVmÂž`Â”]ÃˆÂbÂ•Â”H`Â‰ÃŒÂ¢Â²ILvÄœÂ—HÂ®Â¤Dlt_Â„Â¢JJÃ„Ã¤mÂÃ¨Ã”DÃ«Ã¾gÂºÆ«ÂÂ™Â”aÊŽÃŒrÃªYi~Â ÃŽÄ°Â¤NpÃ€AÂ¾Ä”Â¼bÂ…Ã°Ã·Â’ÂŽÂˆÂ‡Â®Â‚Â”Ã¼sÂ”zMzÃ–Ä–QdÈ¨Ã½Â†vÂ§TÃ¨|ÂÂªHÂ’ÃƒÂ¾aÂ¸|ÂšÃÂ Æ’wKÄ¢xÂ¦ivr^Ã¿Â Â¸lÂ Ã¶Ã¦fÆŸÄ´Â·PJv}n\\hÂ¹Â¶vÂ†Â·Ã€|\\ÆÄšNÂ´ÄœÂ€Ã§Ã¨Ãz]ÂÄ¡Â¤Â²Â¨QÃ’Å¨TIlÂ‡ÂªÅ¥Ã˜}Â¼Ë—Æ¦vÃ„Ã¹Ã˜EÃ‚Â‹Â’Â«FÃ¯Ã‹Â›IqÂ”ÅÂŒTvÄÃœÅÂ‚ÃÃ›ÃŸÂœÃ›VÂ—jÂ³Ã¢wGÄƒÃ‚ÃNOÂŠÂˆÂŠPÃ¬yVÂ³Å‰Ä–Ã½ZsoÂ§HÃ‘Â–ÂiYÂw[ÃŸÂ†\\XÂ¦Â¥c]Ã”Æ©ÃœÂ·Â«jÂ‡ÃqvÃÂ¦m^Ä‹Â±RÂ™Â¦Î‹ÆˆÅ¥ÄšgÃ€Â»IÃ¯Ä¨Ê—Æ®ÂŽÂ°ÆÂ˜Ä»Ã¾ÃAÆ‰Å¿Â±tÃEÃ•ÃžÄNUÃÂ—Â¡\\ÂÅ¿ÄÃ¥Ã’Ê»Ä˜mÂ ÆÃŒÅ¹Ã¶Ê¥Â’Ã«QÂ¤ÂµÂÃ‡cÆ•ÂªoIÃ½ÂˆÂ‰IÃ‰Â_mklÂ³ÄƒÂ‰Æ“Â¦jÂ—Â¡YzÂ•Å‡iÂ–}MsÃŸÃµÂ–Ä«Ê‹Â Â—}ÂƒÃVmÂŸ_[n}eÄ±ÂÂUÄ¥Â¼Â‘ÂªÂ•I{ÃŽÂ§DÃ“ÂœÆ»Ä—ojÂ‘qYhÄ¹TÂ©oÅ«Ä¶Â£]ÄxÄ©Â‹Ç‘MÄÂ‰q`BÂ´ÆƒËºÐ§Â—Ã§~Â™Â²Å†j@Â”Â¥@Ä‘Â´Î¯}Ä¥tPÅ„Ã‡Â¾VÂ¬ufÃ“ÂƒÃ‰CÂ‹tÃ“Ì»Â‰Â…Â¹Â£GÂ³Â€]Æ–Æ¾ÅŽÄªÅªÄ˜Ì–Â¨ÊˆÄ¢Æ‚lÉ˜ÛªÃ¼ÂºÅˆUÃ°ÇœÈ¢Æ¢Å¼ÌŒÈ¦Ç¼Â‚Ä¤ÅŠÉ²Ä–Ã‚ÂKqÂ´Ã¯Â¦Â—ÂºÄ’Ç²Å†É¾ÂªÇ€ÃžÄˆÄ‚DÂ†Â½Ä„ÄŽÃŒÅ—ÄžrÃ´Ã±nÂŽÂœNÂ¼Ã¢Â¾Ê„Ä¾Ô†|Ç„ÂŽÖ¦à¥›È—Ç‰Ì˜ÌÉºÆ…ÃªgVÌÊ†Ä Â·ÃŒÄŠv|Ã½Ä–Ã•WÄŠÇŽÃžÂ´ÃµÂ¼cÃ’Ã’BÄ¢Í¢UÄœÃ°Í’sÂ¨ÂÅˆÆƒLÄ‰Ã•Ã@É›Æ¯Ã·Â¿Ä½ÂÂÄ¹eÈÄ³Ã«CÈšDÅ²yÃªÃ—Å–yÃ²Â¯Ä¼cÃ‚ÃŸYÂ…tÃÆ¤yAÃ£Ë¾J@ÇrÃ½Â‹Â‰@ÂÂ¤Â…rzÂ¸oPÂ¹ÉÃšyÃ¡ÂÂ‡HÂŸÄ€[JwÂ…cVeÈ´ÃÂœÂ»ÃˆÂŽÄ–}Æ’Å°ÅÃ¨ÈÇ¢ÏŒÄ€ÆªÃˆÅ¶Ã«Í¾Ã‘Ì†È¤ÐœÄ¾Ä®EÅ”ÂÂ—Ä¹ÅŠÅ©~Ã‹UÄƒ{ÂŸÄ»ÂÆ¹ÉÏÈ©Ã¾Ä½vÄ½Æ“Ã‰@Ä“Â„Ä½É²ÃŸÇÆ«Ê¾Ç—Ä’pÃ¤WÃxnsÃ€^Æ†wWÂ©Â¦cÃ…Â¡ÂJiÂ§vÂÃºFÂ¶ÂŽÂ¨c~cÂ¼Ä«ÂŒeXÂÇšÂ‹\\Ä‘Â¾JÂŽwÃ€ÄksÃ£AÂÂ‹fÃ•Â¦ÂL}waÂ‚oÂ”ZÂ’Â‹DÂ½Â†MlÂ«]eÃ’Ã…aÃ‰Â²Ã¡oÂÂ½FÃµÃ›]Ä»Ã’Â¡wYRÂ£Â¢rvÃ“Â®yÂ®LFÂ‹LzÄˆÂ„Ã´e]Âgx}Â•|KK}xklL]cÂ¦Â£fRtÃvÂ¦Â†PÄ¤oH{tK"]],"encodeOffsets":[[[108619,36299]],[[108589,36341]]]},"properties":{"cp":[103.823557,36.058039],"name":"ç”˜è‚ƒ","childNum":2}},{"id":"630000","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@InJm"],["@@CÂƒÃ†Â½OÅƒÄ¦sÎ°~Ä’Â³Â¦@@Â“Å…iÂšÂ±Ã¨}Ð¨Â˜Æ„Ë¹AÂ³r_ÄžÂŠÇ’NÄªÂŒÄwÂ¤^Å¬ÄµÂªpÄºSZgÂ’rpiÆ¼Ä˜Ã”Â›Â¨C|ÃÂ–JÂ’Â©Ä¦Â»Â®VÄ²Â~f\\mÂ `UnÂ„Ã‚Â˜~ÊŒÂŸÂ•Ä¬Ã Ã¶NtÂ•~ÅˆjyÂ–Â¢ZiÂ˜Æ”Â¥Ä„ÂŠkÂ´nlÂ`JÃŠÂ‡ÂŠJÃ¾Â©pdÆ–Â®ÃˆÂ£Â¶Ã¬RÊ¦Â‘ÅºÃµÆ®Ã‹nÂŸÊ¼Ä—Ã¦Ã‘Æ€ÄŽ[Â‚Â˜Â¢VÃŽÄ‚MÃ–ÃÃŽFÂ²sÆŠÆ€ÃŽBÄ¼Ã½ÆžÂ—ÂÂ¯Ê˜ÆÃ°Ä§Â¼JhÂ¿Å¦Ä™ÎŒÆ‡ÂšÂ¥Â²Q]ÄŒÂ¥nuÃ‚ÃriÂˆÂ¸Â¬ÆªÃ›^Ã“Â¦dÂ€Â¥[WÃ Â…x\\ZÂÂŽjÃ’Â•Â¨GtpÃ¾YÅŠÄ•Â´Â€zUOÃ«Â‡Â‰PÂ‰Ã®MÄ„ÃxHÂ´Ã¡Â˜iÃœUÃ Â›Ã®ÃœÅÂÄ‚Ã›SuÅŽÂ‹rÂ“ÂœJÃ°ÃŒÂ¬EÂŒÂ‘FÃÃºÃ—uÃƒÃŽkrÂ“Ä’{V}Ä°Â«O_ÃŒÃ‹Ä¬Â©ÂŽÃ“Å§SRÃ‘Â±Â§Ä¢Â£^ÂÃ‚yÃ¨Ã§Ä›MÂ³Æ‚Ä™{[Â¸Â¿uÂ…ÂºÂµ[gtÂ£Â¸OÆ¤Ä¿Ã©YÂŸÃµÂ·kÄ€ÂŸq]juwÂ¥DÄ©ÆÂ€ÃµÃ‡PÃ©Ã„Â½GÂ‘ÂžÂ©Ã£Â‡Â¤GÂ…uÈ§Ã¾RcÃ•Ä•NyÂ“yÃ»tÂÂ“ÂˆÂÂÂ‡Ã¸Â‘Â†Ã¯Â»aÂ½Ä“Â¿BMoÄ¯Â£ÂŸÃj}Ã©ZÃ‹qbÊÂšÂ“Æ¬ÂhÂ¹Ã¬Ã¿Ã“AÂÃ§Ã£nIÃƒÂ¡I`ÂƒksÂ£CGÂÄ›Â˜UyÃ—CyÂ•Â…Â’ÂŸ@ÂÂ¶Ê¡ÃŠBnÄzGÂ„Æ¡MÄ“Â¼Â±OÃ·ÃµJÂÂÃ‹ÄšÄƒVÂŸÄªÅ©Æ†Â£ÂŒÂ¯{Ã‹LÂ½ÃŒzÅ¼Â“Â„VR|Ä TbuvJvÂµhÄ»Ä–HÂ”ÂAÃ«Ã¡aÂ…ÂOÃ‡Ã°ÂÃ±Ä™NwÂ‡Â…Å“Ä¾Â·LÂ›mIÂ±ÃÄ Ä©PÃ‰Ã—Â®Ã¿sÂ—Â’cBÂ³Â±JKÃŸÄŠÂ«`Â…aÄ‘Â»Â·ÂQAmOÂ’Â‘VÅ£Ã©Ã¿Â¤Â¹SQt]]Ã‡xÂ€Â±Â¯A@Ä‰Ä³Â¢Ã“Ä¼Â©ÂÂ•ÂƒlÂ¶Ã…ÂÃ›rÂ—Å•spÃ£Rk~Â¦Âª]Ä®ÂÂ´Â“FRÂ„Ã¥dÂÄŒsCqÄ‘Ã©FnÂ¿Ã…ÆƒmÂ’Ã‰x{WÂ©ÂºÆÂºÄ¯kÃ•Æ‚Æ‘Â¸wWÅ«ÃÂ©ÃˆFÂžÂ£\\tÃˆÂ¥Ã„RÃˆÃ½ÃŒJÂ ÂƒlGrÂ^Ã—Ã¤Ã¹ÂyÃžÂ³fjÂ”cÂ†Â€Â¨Â£Ã‚Z|Ç“MÄÂšÃ@Ã«ÃœÅ‘RÂ‹Â›ÄÂ‰ÂŒÃ·Â¡{aÃ¯È·ÂPÂuÂ°Ã‹XÃ™{Â©TmÄ }YÂ³Â’ÂÃžIÅˆÂµÃ§Â½Â©CÂ¡Ä¯Ã·Â¯BÂ»|StÂ»Â›]vÂƒÅ³ÂƒsÂ»Â”}MÃ“Â Ã¿ÊªÆŸÇAÂ¡fsÂ˜Â»ÂÂPYÂÂ¼cÂ¡Â»Â¦cÂ„Ä‹ÂÂ¥Â£~ÂmsÄ‰PÂ•Â–SiÂƒ^oÂ©AÂ‰ÂŠecÂ‚Â™ÂPeÇµÂŽkgÂ‚yUiÂ¿h}aHÂÂ™ÂšÄ‰^|Ã¡Â´ÂŸÂ¡ÂHÂÃ˜Ã»Ã…Â«Ä‰Â®]mÂÂ€Â¡qÄ‰Â¶Â³ÃˆyÃ´ÅLÃstÂ“ÂÂBÂŸÂ®wnÂ±ÂÄƒÂ¥HSÃ²Ä—ÂšÂ£Â˜SÂ’Ã«@Ã—Å“ÂÃŠÄƒxÃ‡NÂ©Â™Â©TÂ±ÂªÂ£Ä²Â¡fbÂ®ÃžbÂÂŽÂb_Ä„Â¥xuÂÂ¥BÂ—Âž{Å‚ÄÂ³Â«`dÂ˜ÆtÂ—Â¤Å¥iÃ±ÂžÃUuÂºÃ`Â£Â˜^tÆƒÄ²cÂ—Â·Ã›LOÂ‹Â½ÂŠsÃ§Â¥Ts{Äƒ\\_Â»Â™kÃÂŠÂ±qÂ©ÂÄiÂÃ¬Ä‰|ÃIÂƒÂ¥Ä‡Â¥Â›Â€]ÂªÂ§D{ÂÅÅ–Ã‰R_sÃ¿cÂ³ÄªÅÂ›Æ¿ÃŽÂ‘Â›Â§pÂ›[Ä‰Â†Â›cÂ¯bKmÂ›RÂ¥{Â³Â„ZÂ†e^ÂŽÂŒwxÂ¹dÆ½Ã…Â½Ã´ÂIgÂ Â§MÄ•Â Æ¹Ä´Â¿Â—Ç£ÃœÃÂƒ]Â‹ÃÂ–Â]snÃ¥A{Â‹eÂŒÆ`Ç»ÅŠÄ¿\\Ä³Å¬Å±Â”YÃ‚Ã¿Â¬jÄ–qÂŽÃŸbÂŠÂ¸Â•LÂ«Â¸Â©@Ä›Ä€Â©ÃªÂ¶Ã¬Ã€EH|Â´bRÄ¾ÂžÂ–Ã“Â¶rÃ€QÃ¾Â‹vlÂ®Ã•Â‚EÂ˜TzÃœdbÂ Â˜hwÂ¤{LRÂ„ÂƒdÂ“cÂ‹bÂ¯Â‹Ã™VgÂœÂ‚ÆœÃŸzÃƒÃ´Ã¬Â®Â^jÂUÂÃ¨XÃŽÂ–|UÃ¤ÃŒÂ»rKÂŽ\\ÂŒÂªNÂ‘Â¼pZCÃ¼Â†VYÂ†Â†Â¤ÉƒRi^rPÅ‡Â’TÃ–}|brÂ°qÅˆbÄšÂ°ÂªiÆ¶GQÂ¾Â²Â„xÂ¦PÂœmlÅœÂ‘[ÂÄ¤Â¡ÎžsÄ¦ÂŸÃ”ÃÃ¢\\ÂªÃšÅ’U\\fÂ…Â¢NÂ²Â§x|Â¤Â§Â„xÄ”sZPÃ²Ê›Â²SÃqF`ÂªÂ„VÂƒÃžÅœÄ¶Æ¨VZÂŒÃŒL`ÂˆÂ¢dÅIqr\\ÂoÃ¤ÃµÂ–FÃŽÂ·Â¤Â»Å¶Ã—hÂ¹]ClÃ™Â€\\Â¦ÄÃŒÄ¯Â¬Å™tTÓºÆ™gQÃ‡Ã“HÅ£Ä’Â”Â´ÃƒbEÃ„lbÊ”CÂ”|CÂˆÅ®ÂÂˆÂkÂ„Æ®[Ê¼Â¬ÅˆÂœÂ´KÅ®ÃˆÎ°ÃŒÄªÂ¶Æ¶lÃ°Â”Ä¼AÂ†TUvdTÂŠGÂ†ÂºÌ¼ÂŠÃ”Â€ÂŒsÃŠDÃ”Â„veOg"]],"encodeOffsets":[[[105308,37219]],[[95370,40081]]]},"properties":{"cp":[101.778916,36.623178],"name":"é’æµ·","childNum":2}},{"id":"640000","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@KÃ«Ã€Ä™ÄžÂ«OÄ™È¿È•ÂŸÄ±]Å‰Â¡Ã¥Ä¯Ã•Ã”Â«Ç´ÃµÆªÂ™ÄšQÃZhvÂ KÂ°Â›Ã¶qÃ€Ã‘ÂS[ÃƒÃ–HÆ–ÄÂÃ‹Â‡nL]Ã»cÂ…Ã™ÃŸ@Â‚Â“ÄÂ‘Â¾}wÂ»Â»Â‹oÄ£FÂ¹ÂœÂ»ÂkÃŒÃÂ·{zPÂƒÂ§BÂÂ¢ÃyÃ…t@ÂƒÂ@Ã¡Âš]Yv_ssÄ£Â¼iÃŸÂÂ”Ä»LÂ¾Ä¡sKDÂ£Â¡N_Â…Â“Â˜XÂÂ¸}B~HaiÂˆÂ™Ã…f{Â«xÂ»ge_bsÂ“KFÂ¯Â¡IxÂ™mELcÃ¿ZÂ¤ÂÄ¢Â‘ÂƒÃÂœsuBLÃ¹Â•tÂ†ÂÂŒYdÂÂˆmVtNmtOPhRw~bdÂ…Â¾qÃ\\Ã¢Ã™HÂ\\bImlNZÂŸÂ»loÂƒÂŸqlVmÂ–GÄÂ§~QCwÂ¤Â™{A\\ÂÂ‘PKÂÂŸNYÂ‡Â¯bFÂ‡kCÂ¥Â’skÂ‹ÂŠs_Ãƒ\\ÄƒÂ«Â¢Ä§kJiÂ¯rÂ›rAhÄ¹Ã»Ã§Â£CUÂ‡Ä•ÄŠ_Ã”Â—BixÃ…Ã™ÂÄ„nÂªÃ‘aM~Ä§pÂOuÂ¥sÃ®eQÂ¥Â¤^dkKwlL~{L~Â–hw^Â‚Ã³fÄ‡ÂƒKyEÂŒÂKÂzuÃ”Â¡qQÂ¤xZÃ‘Â¢^Ä¼Ã¶ÃœÂ¾EpÂžÂ±Ã¢bÃŠÃ‘Ã†^fkÂ¬Â…NCÂ¾Â‘ÂŒÂ“YÂpxbK~Â¥ÂŽeÃ–ÂŽÂŒÃ¤BltÂ¿ÄÂxÂ½I[Ä’Ç™ÂŒWÂžÂ‹fÂ»Ä¬}dÂ§dÂµÂÃ¹EuÂjÂ¨Â‚IÃ†Â¢Â¥dXÂªÆ…xÂ¿]mtÃwÃŸRÄ¶ÂŒXÂ¢ÍŽvÃ†zÆ‚ZÃ²Â®Ç¢ÃŒÊ†CrÃ¢ÂºMÃžzÂžÃ†MÃ’Â”ÃŠÃ“ÅŠZÃ„Â¾Â–rÂ°ÂÃŽÂ®ÈˆmÂªÂ²ÄˆUÂªÄšÃ®ÂÂˆÃ¸ÂºÂˆÄ®Â¦ÃŒÄ˜kÂ„^FÅ‚Ä¬hÄšiÄ€Ä–Â¾iÄ°bjÃ•"],["@@mfwÄ›wMrÅ¢Âªv@GÂ‰"]],"encodeOffsets":[[[109366,40242]],[[108600,36303]]]},"properties":{"cp":[106.278179,38.46637],"name":"å®å¤","childNum":2}},{"id":"650000","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@QÃ˜Ä”Â²XÂ¨Â”~Ç˜BÂºjÊÃŸÃ˜vKÂ”Æ”XÂ¨vÄŠOÂžÃƒÂƒÂ·Â¢i@Â~cÂ—Â‡Äe_Â«Â”EÂšÂ“}QxgÉªÃ«ÃÃƒ@sÃ…yXoÅ–{Ã´Â«Å¸uXÂ…ÃªÂ•ÃŽf`ÂÂœCÂ‚ÂÂ¹Ã‚Ã¿ÃGÄ®Ã•ÄžXÅªÅÅ¸MÅºÃˆÆºQÃ¨Ä½Ã´e|Â¿Æ¸JRÂ¤Ä˜EjcUÃ³ÂºÂ¯Ä¨_Å˜ÃÂMÂªÃ·ÃÂ¥OÃ©ÃˆÂ‡ÂÂ¿Ã–ÄŸÇ¤Ç·Ã‚FÃ’Â‡zÃ‰x[]ÂÄ¤ÄÂ‰Å“Â¦EP}Ã»Æ¥Ã©Â¿Ä°Æ·TÄ—Æ«Å“Å•Æ…Â™Æ±BÂ»ÄÂ±Â’Ä“OÂ…Â¦EÂ–Â•}Â‘`cÈºrÄ¦Ã¡Å–uÃ’ÂžÂªÂ«Ä²Â‡Ï€dÆºÃÃ˜ZÆ´wÊ„Â¤Ä–GÄÂ™Ç‚ZÄ¶ÂƒÃ¨HÂ¶}ÃšZ×¦Ê¥ÄªÃ¯|Ã‡Ä¦MÅ”Â»Ä°ÄÇˆÂ‹Ã¬Â¥Î’ÂœbaÂÂ¯Â¥Ç•ÇškÄ†ÅµÄ¦É‘ÄºÆ¯xÅ«Ð”ÌµnÆ¡ÊƒÄ½Ã¡Â½MÂ»ÂÂ›Ã²mqÃ³Å˜ÄÄÃ‹Â¾ÄƒCÂ…Ä‡ÄÆ¿ÃÉ½Â©Ç±Å…Â¹Ä‘Â¥Â˜Â³Ã°LrÃÂ®É±Ä•Ä£Å‰Ç»ÂÌ‹È¥Æ¡Å»Ç›È¡VÃ¯Â¹Å‡Û©Ã»kÉ—Ä¡ÆÂ§Ê‡Ä—Ì•Ä©Å©Æ½Å^Æ•ÂŠUvÂ£ÆQÃ¯Â“ÆµkÅÂ½Î‰ÃƒÅÃ‡Â³LÅ‡Â›Ê»Â«Æ\\lÂƒÂ‡ÂÅÂDÂ‡Â“{Ê“DkaFÃƒÃ„aÂ“Â³Å¤Ä‘Ã”GRÃˆÆšhSÓ¹ÅšsÄ°Â«ÄÃ‹[Â¥ÃšDkÂº^Ã˜gÂ¼ÅµÂ¸Â£EÃÃ¶Â•Â€Å¯Å‰TÂ¡c_Â‡Ã‹KYÂ‹Æ§UÅ›ÄµÂ„ÃÂƒU_Â©rETÃÊœÂ±OÃ±tYwÄ“Â¨Âƒ{Â£Â¨uMÂ³xÂ½ÅŸLÂ©Ã™Ã¡[Ã“ÃÄ¥Â ÎtÄ£Â¢\\Â‚Å›Â’nkOÂ›wÂ¥Â±ÂƒTÂ»Æ·FÉ¯Ã Ä©ÃžÃ¡BÂ¹Ã†ÂÂ…Ã‘UwÂ„Å•ÂŠÂÂžÄ½w[Â“mGÂ½ÃˆÃ¥~Â‡Ã†Ã·QyÂŠÄ›CFmÄZÄ«Â—ÅµVÃÂ™Æ¿QÆ›Â—Ã»XSÂ²Â‰bÂ½KÃÂ½Ä‰SÂ›Â©Å·XÄ•ÂŸ{ÂŽÄ•KÂ·Â¥Æ—cqqÂ©fÂ¿]Â‡ÂÃŸDÃµÂUÂ³hÂ—ÂÂgÃ‹Ã‡Ã¯Ä£Ã‰É‹wÂ“kÂ¯Ã}IÂ·ÂšÅ“bmÂœÃ‰Â–Å™Â›Ä«JÉ¥Ä»ËÃ—xÂoÂ›É¹Ä«Â‡lÂ•cÂ…Â¤Â³XÃ¹]Â‘Â™Ç…AÂ¿wÍ‰Ã¬Â¥wÃ‡NÂ·Ã‚Ã‹nÂÆ¾ÆdÃ‡Â§Ä‘Â®ÆvÂ•UmÂ©Â³G\\Â“}ÂµÄ¿Â‡QyÅ¹ÂlÄƒÂ“Â›ÂµEwÂ‰Ç‡QÂ½yÆ‹BeÂ¶Å‹Ã€Å¯Â‡oÂžÂ¥AÂ—Â˜Ã‰w@Â•{GpmÂ¿AÄ³Â†Å½KLhÂÂˆÂ³`Ã±cÃ‹tWÂ‚Â±Â»Ã•SÂ‰Ã«Ã¼Ã¿ÄDÂ‡u\\wwwÃ¹Â³Â—VÂ›ÂLÅ•ÂƒOMÂÃ‹GhÂÂ£ÃµPÂ¡Â™erÂÂ™Ãd{Â“Â‡Ä¡WÃÂ…Ä|yÅ¡gÂ^ÄŸyÃzÃ™s`Â—s|Ã‰Ã¥ÂªÃ‡}mÂ¢ÅƒÂ¨`xÂ¥Â’Ã¹^Â•}ÂƒÃŒÂ¥HÂ«Â‰YÂªÆ…Â”AÃÂ¹n~ÅºÂ¯ÂšfÂ¤Ã¡Ã€zÂ„gÂŠÃ‡DIÃ”ÂÂ´AÅˆÄ€Ã’Â„Â¶Ã»EYospÃµD[{Ã¹Â°]uÂ›JqÂÂ•UÂ•|SoÄ‹xÅ£[ÃµÃ”Ä¥kÅ‹ÃžÅZÃ‹ÂºÃ³YÃ‹Ã¼Ä‹rwÂ Â€ÃžkrÅ¥Ã‹Â¿XGÂÃ‰bÅ™aDÃ¼Â·Ä’Ã·AÃƒÂª[Ã„Ã¤Â€IÃ‚Â®BÃ•ÄÂ˜Ãž_Â¢ÄÄ pÂŠÃ›Ã„È‰Ä–Ä¡DKÂwbÂmÂ‡Ã„NÃ´Â‡ÂŠfÂœÆ«VÃ‰viÂ†Ç³Â—HÂ‘Â‹QÂµÃ¢FÂšÃ¹ÂÃ‚Å“Â³ÂÂ¦{YGÂžÂƒdÂ¢ÄšÃœOÂ Â„Â€{Ã–Â¦ÃžÃÃ€PÂŒ^bÂ–Æ¾ÂŠlÂŽ[Â„vtÃ—ÄˆÃEÃ‹Â¨Â¡Ä~Â´Ã®Â¸Ã¹ÃŽhÂ€uÃ¨`Â¸ÂŸHÃ•Å”VÂºwÄ Ã¢Ã¢WÃ²Â‡@{ÂœÃ™NÃÂ´É™Â²È•n{Â¿Â¥{lÂ—Ã·eÃ©^eÂ’ÄÂˆXjÂ©Ã®\\ÂªÃ‘Ã²Â˜ÃœÃ¬c\\Ã¼qÂˆÃ•[ÂÄŒÂ¡xoÃ‚Ä‹ÂªbÃ˜ÂÂŒÃ¸|Â€Â¶È´ZdÃ†Ã‚ÂšoÅ„Ã©ÂŒGÂš\\Â”Â¼ÂCÂ°ÃŒÃ†ÂnÂ´nxÂšÃŠOÄ¨Â’ÅªÂÆ´Ä¸Â¢Â¸Ã²TxÃŠÇªMÄ«ÄžÂ˜Ã–Å²ÃƒÉŽOvÂˆÊ¦Æ¢~FÂŽÂ‡RÄ›Ã²Â—Â¿Ä¡~Ã¥ÅŠÂœÃºÂ‰NÂšÂžÂšÂ¸qÂŽÂ’Ä˜[Ä”Â¶Ã‚Ä‡nÂÃ’PÄ’ÃœvÃºÄ€ÃŠbÃ–{Ã„Ã®Â¸~Å”Ã¼npÂ¤Ã‚HÂ¾ÂœÄ„YÃ’Â©ÃŠfÂºmÃ”ÂˆÄ˜cDoÄ¬MÅ¬Â’Â˜SÂ¤Â„sÂ²Â‚Â”Ê˜ÃšÂ†Å¾È‚VÅ¦Â Â–ÂŽÃ¨WÂ°ÂªB|Ä²XÅ”Ã¾ÃˆJÄ¦Ã†Ã¦FÄšÃªÂŠYÄ‚ÂªÄ‚]Ã¸ÂªÅ–NÃžÃ¼AÂ€Â’fÉ¨JÂ€Â˜Â¯ÃŽrDDÂšÄ¤Â€`Â€mz\\Â„Â§~DÂ¬{vJÂÃ‚Â˜Â«lÂµÄ‚bÂ–Â¤pÂ€ÅŒÅ°NÄ„Â¨ÄŠXW|Å³Â Â¿Â¾É„Ä¦ÆMTÂ”Â‡Ã²PÂ˜Ã·fÃ˜Ä¶KÂ¢ÈË”SÃ´Â¹Ã²EÃ°ÂÂ”`Æ–Â½Ç’Ã‚ÅˆÃ—Ã¤Ä±Â–Â§Ä¤ÆÂ§C~Â¡Â‚hlÃ¥Â‚ÇºÅ¦ÅžkÃ¢Â’~}ÂŽFÃ¸Ã Ä²aÄžÂ‚fÂÆ Â¥ÂŽÂ„Å”dÂžÂ˜Â®UÂ¸ÂˆÅºXÂœvÂ¢aÆ†ÃºÅªtÅ Å³Æ jdÂ•ÆºÂŠÆºÃ…Ã¬nrh\\ÄºÂ¯Ã¤ÉÄ¦]Ã¨pÄ„Â¦Â´LÆžÄ¬ÂŠÂ´Æ¤Ç¬Ë¼Ä’É¸Â¤rÂºÇ¼Â²Â¨zÃŒPÃ°Å€bÃ¾Â¹Ä¼DÂ¢Â¹Âœ\\ÄœÃ‘ÅšÂŸÂ¶ZÆ„Â³Ã jÄ¨oÃ¢ÂŠÈ´LÃŠÂ‰È®ÂŒÄÂÄšÄƒÂŽÃ€ÃªZÇšÅÂ¤qÈ‚\\LÂ¢ÅŒÄ°fÃ†s|zÂºeÂªÃ™Ã¦Â§Î¢{Ä€Â´ÆÃšÂ¬Â¨Ä´Ã Â²Å‚hÊºKÃžÂºÃ–TÂŠiÆ¢Â¾ÂªÃ¬Â°`Ã¶Ã¸uÂ®ÃŠÂ¾Ã£Ã˜"],"encodeOffsets":[[88824,50096]]},"properties":{"cp":[87.617733,43.792818],"name":"æ–°ç–†","childNum":1}},{"id":"110000","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@Ä½OÃÂ›Ã»tÅ·miÃt_HÂ»Ä¨Â±d`ÂŠÂ¹Â{bwÂ…YrÂ“Â³S]Â§Â§oÂ¹Â€qGtm_SÅ§Â€Â“oaÂ›Â‹FLgÂ‘QN_Â•dVÂÂ€@Zom_Ä‡\\ÃŸÂšcÃ‚Â±xÂ¯oÅ“RcfeÂ…Â£Â’oÂ§Ã‹gToÃ›JÃÄ”Ã³uÂ…|wPÂ¤Â™XnÂOÂ¢Ã‰ÂˆÅ¦ÂÂ¯rNÃ„ÄÂ¤zÃ¢Å–ÃˆRpÅ¢ZÂŠÂœÃš{GÂŠrFtÂ¦Ã’xÂ§Ã¸Â¹RÃ³Ã¤VÂ¤ÂXdÂˆÅ¼Ã¢ÂºWbwÅšÂ¨UdÂ®bÃªÅ†Â¾Â‘jnÅŽGÅƒÅ¶ÂŠnzÂÃšSeÃ®ÄœZÂczÃ®Â¾i]ÃÂœÂ™QaÃºÃÃ”iÃ¾Ä©È¨WÄ¢Â‹Ã¼|Ä–u[qÂb[swP@Ã…ÄŸPÂ¿{\\Â‡Â¥AÂ¨ÃÂ‘Ã‘Â¨ÂjÂ¯ÂŠX\\Â¯ÂœMKÂ‘pAÂ³[HÂ…Ä«u}}"],"encodeOffsets":[[120023,41045]]},"properties":{"cp":[116.405285,39.904989],"name":"åŒ—äº¬","childNum":1}},{"id":"120000","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@Å¬gXÂ§ÃœÂ«EÂ…Â¶FÃŒÂ‡Â“Â¬O_Â™Ã¯lÃgÂ“zÂ±AXeÂ™ÂµÃ„Äµ{ÂÂ¶]gitgÂšIjÂ·Â›Â¥Ã®akSÂ€Â‰Â¨ÃÆŽk}Ä•{gBÂ—qGf{Â¿aÂ†U^fIÂ“Æ°Â‹ÂÂ³Ãµ{YÂƒÄ±Ã«NÄ¿ÂžkÂ©Ã¯Ã‹ZÅÂ‘RÂ§Ã²oYÃ—Ã“gcÂ…Ä¥sÂ¡bÄ¡Â«@dekÄ…I[nlPqCnp{ÂˆÅÂ³ÂÂ°`Â{PNdÆ—qSÃ„Ä»NNÃ¢yj]Ã¤ÂžÃ’DÂ Ä¬HÂ°Ã†]~Â¡HOÂ¾ÂŒX}ÃxÂŒgpÂ“gWÂˆrDGÂˆÂŒpÃ¹Â‚ÂŠ^LÂ‚ÂÂˆrzWxÂˆZ^Â¨Â´T\\|~@IÂ‰zÂƒÂ–bÄ¤Â‹ÂœjeÄŠÂªzÂ£Â®Ä”vÄ›Â€LÂ†mVÂ¾Ã”_ÃˆÂ”NW~zbÄ¬vGÂ†Â²ZmDM~Â”~"],"encodeOffsets":[[120237,41215]]},"properties":{"cp":[117.190182,39.125596],"name":"å¤©æ´¥","childNum":1}},{"id":"310000","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@É§Æ°Â¬EpÂÆ¸ÃxÂcÂ‡"],["@@Â©Â„ÂªÂƒ"],["@@Â”MAÂ‹Â‘Âš"],["@@QpÄ°ÂEÂ§Ã‰CÂÂ¾"],["@@bÅÃ•Â•Ã•EÈ£ÃšÆ¥ÃªÂImÂÉ‡Ç¦Ã¨ÃœÄ ÂŒÃšÂÂžÃƒÆŒÃƒÍŽÃ³"],["@@ÇœÃ»È¬É‹ÂŠÅÂ™Ã—^Â‰sYÂÂŒÉDÅ‹Â‘Å½Ä…Ã±CGÂ²Â«ÂªÄ@hÂ–_pÂ¯A{Â‡oloYÂ€Â¬j@Ä²Â`Â•gQÃšÂ›hr|Ç€^MÄ²vtbeÂ´RÂ¯Ã”Â¬Â¨YÂŽÃ´Â¤r]Ã¬Â†Æ¬Ä¯"]],"encodeOffsets":[[[124702,32062]],[[124547,32200]],[[124808,31991]],[[124726,32110]],[[124903,32376]],[[124438,32149]]]},"properties":{"cp":[121.472644,31.231706],"name":"ä¸Šæµ·","childNum":6}},{"id":"500000","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@vjG~nGÅ˜Å¬Ä¶È‚Æ€Æ¾Â¹ÂÂÂ¸Ã˜ÃŽezÄ†TÂ¸}ÃªÃÂ–qHÂŸÃ°qÄ–Ã¤Â’ÂŠÂ¥^CÃ†Â’IjÂ–Â²pÂ…\\_Â Ã¦Ã¼Y|Â[YxÆŠÃ¦uÂžÂ°xbÂ®Â…ÂÅ°b@~Â¢NQtÂ°Â¶Â‚SÃ¦Â Â“ÃŠ~rÇ‰Ä”Ã«ÄšÂ¢~Âšuf`Â‘Â‚Â†faÂ‚Ä”JÃ¥ÄŠÂ„nÃ–]Â„jÆŽÄ‡ÃŠ@ÂŠÂ£Â¾aÂ®Â£Å°{Å¶Ä•FÂ‹Ã¨gLk{Y|Â¡ÄœWÆ”tÆ¬JÃ‘xqÂ‹Â±Ä¢NÂ´Â‰Ã²KÂ‰Â™Â–LÃˆÃƒÂ¼D|s`Å‹Â’Ä‡]ÂƒÃƒÂ‰`Ä‘ÂŒMÃ»Æ±Â½~YÂ°Ä§`ÆÃWÂ‰Â½eIÂ‹Â½{aÂŸÂ‘OIrÃÂ¡Ä•Å‡aÂ†pÂ†ÂµÃœÆ…Ä¡Â‘Âœ^Ã–Ã›bÃ™Å½ÅmlÂ½SÂ‹ÃªqDu[RÂ‹Ã£Ã‹Â»Â†Ã¿w`Â»yÂ‘Â¸_ÄºÄ™}Ã·`MÂ¯Ä‹fCVÂµqÅ‰Ã·ZÂ•ggÂ“ÂŒ`dÂ½pDOÂ‡ÃŽÂCnÂœ^ufÂ²Ã¨nhÂ¼WtÆxRGgÂ¦Â…pVÂ„Â†FIÂ±ÂŽG^ÂŒIcÂ´ecÂ‡Â’GÂ•Ä¹ÃžÂ½sÃ«Ä¬Â„hÂ˜xWÂ‚}KÃ“ÂˆeÂXsbkÂ”FÂ¦Â›LÂ‘Ã˜gTkÃ¯ÆµNÃ¯Â¶}GyÂ“w\\oÃ±Â¡nmÄˆzjÂÂŸÂ•@Â™Ã“cÂ£Â»WÄƒÂ¹Ã“jÂ“_mÂ»ÂˆÂÂ¹Â·~MvÃ›aqÂœÂ»ÂÂ‰ÃªÂœÂ’\\Ã‚oVnÂŽÃ“Ã˜ÃÂ™Â²Â«ÂÂ‹bqÂ¿eÂfEÂ Â„Â€Â‹ÄœÂ^QÂž~Â Ã‰vÃ½Â‡ÅŸÂ¤Â²Ä®Â‰pEÄ°}zcÄºÂƒLÂ‹Â½Â‡ÂšÂ¿gÃ…Â†Â›Â¡Ã½EÂ¡yaÂ£Â³t\\Â¨Â\\vÃºÂ»Â¼Â§Â·Ã‘rÂ_oÃ’Ã½Â¥uÂ‚Â•_nÂ»_ÂƒÂ•AtÂ©ÂÃžÃ…Â±ÄÂ§IVeÃ«ÂƒY}{VPÃ€ÂFAÂ¨Ä…B}q@|OuÂ—\\FmÂ‰QFÃÂ…MwÂ˜Ã¥}]Â•Â€Â|FmÃÂ‹CaÂƒwÂŒu_pÂ—Â¯sfÃ™gYÂ…DHlÂ`{QEfÂNysBÂŠÂ¦zGÂ¸rHeÂ‚Â„N\\CvEsÃÃ¹Ãœ_Â·Ã–Ä‰saQÂ¯Â€}_UÂ‡Â†xÃƒÄ‘ÂŠqÂ›ÂNHÂ¬Â•Ã„d^ÃÅ°RÂ¬Ã£Â°weÄ‡JEÂžÂ·vÃÂ·HgÂƒÂ‚Ã©FXjÃ‰Ãª`|yÂŒpxkAwÂœWÄpbÂ¥eOsmzwqChÃ³UQlÂ¥F^lafÂ‹anÃ²srÂ›EvfQdÃUVfÂ—ÃŽvÃœ^efÂˆtETÂ¬Ã´A\\ÂœÂ¢sJÂŽnQTjPÃ˜ÂˆxÃ¸K|nBzÂ‰Â„ÂœÄžÂ»LYÂ‚Â…FDxÃ“Â„vrÂ“[ehÄ¾ÂšÂ•vNÂ”Â¢oÂ¾NiÃ‚xGpÃ¢Â¬ÂzÂ›bfZo~hGiÂ’]Ã¶F|Â‰|NbÂ‡tOMnÂ eAÂ±ÂŠÂtPTÂ‡LjpYQ|Â†SHÂ†Â†YÄ€xinzDJÂ€ÃŒgÂ¢vÃ Â¥PgÂ‰_Â–Ã‡zIIÂ‹Â€IIÂ•Â„Â£Â®SÂ¬Â„Ã˜sÃŽÂ¼ÂÂ£ÂŒN"],["@@ifjN@s"]],"encodeOffsets":[[[109628,30765]],[[111725,31320]]]},"properties":{"cp":[106.504962,29.533155],"name":"é‡åº†","childNum":2}},{"id":"810000","type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[["@@AlBk"],["@@mÂŽnÂ"],["@@EpFo"],["@@eaÂ¢plÂÂ¸EÃµÂ¹Â‡hj[Âƒ]Ã”CÃŽÂ–@ÂljÂ˜Â¡uBXÂŸÂ…ÂÂ•Â´Â‹AIÂ¹ÂÂ…[Â‹yDUÂˆ]W`Ã§wZkmcÂ–Â…MÂ›ÂžpÂ€Ã…vÂ›}IÂ‹oJlÂcaÂƒfÅƒÂ‘KÂŽÂ°Ã¤Â¬XJmÃÂ Ä‘hIÂ®Ã¦Ã”tSHnÂ€EÂˆÂ„Ã’rÃˆc"],["@@rMUwÂ‡ASÂ®Â€e"]],"encodeOffsets":[[[117111,23002]],[[117072,22876]],[[117045,22887]],[[116975,23082]],[[116882,22747]]]},"properties":{"cp":[114.173355,22.320048],"name":"é¦™æ¸¯","childNum":5}},{"id":"820000","type":"Feature","geometry":{"type":"Polygon","coordinates":["@@kÃŠdÂÂ°Ã¥Â§s"],"encodeOffsets":[[116279,22639]]},"properties":{"cp":[113.54909,22.198951],"name":"æ¾³é—¨","childNum":1}}],"UTF8Encoding":true});
+}));
\ No newline at end of file
diff --git a/gicc/Scripts/chinaData.js b/gicc/Scripts/chinaData.js
new file mode 100644
index 0000000000000000000000000000000000000000..77e0b024c8a6908cdaa1dbc19519d6ca7d6c3b29
--- /dev/null
+++ b/gicc/Scripts/chinaData.js
@@ -0,0 +1,11840 @@
+var map1 = {
+    // æ±Ÿè‹çœ
+    num1: 24,//æ—©ç™Œæ•°,
+    num2: 13619,//è¡€æ£€æ•°
+    bi: 0.4
+};
+var map2 = {
+    // ä¸Šæµ·çœ
+    num1: 20,//æ—©ç™Œæ•°
+    num2: 2474,//è¡€æ£€æ•°
+    bi: 0.4
+};
+var map3 = {
+    // å¹¿ä¸œçœ
+    num1: 12,//æ—©ç™Œæ•°
+    num2: 6973,//è¡€æ£€æ•°
+    bi: 0.2
+};
+var map4 = {
+    // é‡åº†çœ
+    num1: 0,//æ—©ç™Œæ•°
+    num2: 30,//è¡€æ£€æ•°
+    bi: 0
+};
+var map5 = {
+    // å®å¤
+    num1: 10,//æ—©ç™Œæ•°
+    num2: 6654,//è¡€æ£€æ•°
+    bi: 0.2
+};
+var map6 = {
+    // ç¦å»º
+    num1: 0,//æ—©ç™Œæ•°
+    num2: 356,//è¡€æ£€æ•°
+    bi: 0
+};
+var map7 = {
+    // æ²³å—
+    num1: 0,//æ—©ç™Œæ•°
+    num2: 143,//è¡€æ£€æ•°
+    bi: 0
+};
+var map8 = {
+    // å››å·
+    num1: 10,//æ—©ç™Œæ•°
+    num2: 427,//è¡€æ£€æ•°
+    bi: 0.2
+};
+var map9 = {
+    // åŒ—äº¬
+    num1: 3,//æ—©ç™Œæ•°
+    num2: 48,//è¡€æ£€æ•°
+    bi: 0.1
+};
+var map10 = {
+    //æ¹–åŒ—
+    num1: 3,
+    num2: 210,
+    bi: 0.1
+};
+var map11 = {
+    //å±±ä¸œ
+    num1: 5,
+    num2: 17,
+    bi: 0.1
+};
+var map12 = {
+    //å¹¿è¥¿
+    num1: 0,
+    num2: 141,
+    bi: 0
+};
+var map13 = {
+    //å†…è’™å¤
+    num1: 5,
+    num2: 1431,
+    bi: 0.1
+};
+var map14 = {
+    //å®‰å¾½
+    num1: 6,
+    num2: 273,
+    bi: 0.1
+};
+var map15 = {
+    //è¥¿è—
+    num1: 0,
+    num2: 1,
+    bi: 0
+};
+var map16 = {
+    //ç”˜è‚ƒ
+    num1: 0,
+    num2: 21,
+    bi: 0
+};
+var map17 = {
+    //é»‘é¾™æ±Ÿçœ
+    num1: 1,
+    num2: 5,
+    bi: 0.1
+};
+var map18 = {
+    //æµ™æ±Ÿ
+    num1: 2,
+    num2: 259,
+    bi: 0
+};
+var map19 = {
+    //æ±Ÿè¥¿
+    num1: 1,
+    num2: 101,
+    bi: 0.1
+};
+var map20 = {
+    //é™•è¥¿
+    num1: 0,
+    num2: 22,
+    bi: 0
+};
+var map21 = {
+    //æ²³åŒ—
+    num1: 1,
+    num2: 285,
+    bi: 0.1
+};
+var map22 = {
+    //å±±è¥¿
+    num1: 0,
+    num2: 2,
+    bi: 0
+};
+var map23 = {
+    //äº‘å—
+    num1: 0,
+    num2: 377,
+    bi: 0
+};
+var map24 = {
+    //é’æµ·
+    num1: 1,
+    num2: 1,
+    bi: 0.1
+};
+
+var map = [map1, map2, map3, map4, map5, map6,
+    map7, map8, map9, map10, map11, map12,
+    map13, map14, map15, map16, map17, map18,
+    map19, map20, map21, map22, map23, map24];
+
+// ä½¿ç”¨åŽå°è¿”å›žæ•°æ®å¡«å……
+$.getJSON("http://172.30.2.105:2019/data-plat/serum/statistics", function (data) {
+    let serum = data.data;
+    $.each(pointData, function (idx, item) {
+        let n = idx % 6;
+        let obj = serum.dtoList.filter(dto => dto.provinceName.includes(item.province));
+        map[idx].num1 = obj[0] ? obj[0].earlyCancer : 0;
+        map[idx].num2 = obj[0] ? obj[0].serumTestActual : 0;
+        map[idx].bi = map[idx].num2 !== 0 ? Number((map[idx].num1 / map[idx].num2) * 100).toFixed(1) : 0;
+        for (let i = 0; i < 6 - n; i++) {
+            var str = series[idx + i].markLine.data[n * 2][0].label.normal.formatter;
+            var mark = series[idx + i].markLine.data[n * 2][0].label.normal.mark;
+            switch (mark) {
+                case 'mark1':
+                    str = [
+                        '{Province|'+item.province+'}' +
+                        '\n{l1|' + map[idx].num1 + '}   {l2|' + map[idx].num2 + '}																																								' +
+                        '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}																																								' +
+                        '\n{l5|' + map[idx].bi + '%}																																								' +
+                        ' \n'
+                    ].join('\n');
+                    break;
+                case 'mark2':
+                    str = [
+                        '{Province|'+item.province+'}\n{l1|' + map[idx].num1 + '}   {l2|' + map[idx].num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map[idx].bi + '%}\n'
+                    ].join('\n');
+                    break;
+                case 'mark3':
+                    str = [
+                        '{Province|'+item.province+'}' + '\n{l1|' + map[idx].num1 + '}   {l2|' + map[idx].num2 + '}' + '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}' + '\n{l5|' + map[idx].bi + '%}' + ' \n'
+                    ].join('\n');
+                    break;
+                case 'mark4':
+                    str = [
+                        '{Province|'+item.province+'}' +
+                        '\n{l1|' + map[idx].num1 + '}   {l2|' + map[idx].num2 + '}                                                                                                                                                              ' +
+                        '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}                                                                                                                                                              ' +
+                        '\n{l5|'+map[idx].bi+'%}                                                                                                                                                                ' +
+                        ' \n'
+                    ].join('\n');
+                    break;
+                case 'mark5':
+                    str = [
+                        '\n{Province|                                                                '+item.province+'}' +
+                        '\n                                                                                                                         {l1|' + map[idx].num1 + '}   {l2|' + map[idx].num2 + '}                                                                                                                                                              ' +
+                        '\n                                                                                                                         {l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}                                                                                                                                                              ' +
+                        '\n                                                                                                              {l5|' + map[idx].bi + '%}                                                                                                                                                                ' +
+                        ' \n'
+                    ].join('\n');
+                    break;
+                case 'mark6':
+                    str = [
+                        '{Province|'+item.province+'}' +
+                        '\n{l1|' + map[idx].num1 + '}   {l2|' + map[idx].num2 + '}                                                                                                                                                              ' +
+                        '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}                                                                                                                                                              ' +
+                        '\n{l5|' + map[idx].bi + '%}                                                                                                                                                                ' +
+                        ' \n'
+                    ].join('\n');
+                    break;
+                default:
+                    break;
+            }
+            series[idx + i].markLine.data[n * 2][0].label.normal.formatter = str;
+        }
+    });
+});
+
+
+var series1 = {
+    name: 'æ±Ÿè‹çœ',
+    type: 'map',
+    zoom: 0.7,
+    top: '15%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [{
+        name: 'æ±Ÿè‹',
+        selected: true
+
+    }],
+
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [{
+                value: [4, 5734],
+                name: "æ±Ÿè‹çœ",
+                padding: [8, 0, 30, 10],
+                label: {
+
+                    normal: {
+                        mark: 'mark1',
+                        formatter: [
+                            '{Province|æ±Ÿè‹}' +
+                            '\n{l1|' + map1.num1 + '}   {l2|' + map1.num2 + '}																																								' +
+                            '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}																																								' +
+                            '\n{l5|' + map1.bi + '%}																																								' +
+                            ' \n'
+                        ].join('\n'),
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            block: {
+                                height: 50,
+                            },
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 85,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 85,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [53, 0, 18, 10],
+                                // padding: 5 ,
+                                //lineHeight:1,
+                                fontSize: 50, //height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [118.767413, 32.041544]
+            },
+
+                {
+                    name: "æ±Ÿè‹çœ",
+                    coord: [95.984722, 49.756539]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [95.984722, 49.756539]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [77.984722, 49.756539]
+                }
+            ]
+
+
+        ],
+        animation: false
+    }
+};
+var series2 = {
+    name: 'ä¸Šæµ·',
+    type: 'map',
+    zoom: 0.7,
+    top: '15%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [{
+        name: 'ä¸Šæµ·',
+        selected: true
+
+    },
+        {
+            name: 'æ±Ÿè‹',
+            selected: true
+
+        }
+    ],
+
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [{
+                value: [4, 5734],
+                name: "æ±Ÿè‹çœ",
+                label: {
+
+                    normal: {
+                        mark: 'mark1',
+                        formatter: [
+                            '{Province|æ±Ÿè‹}' +
+                            '\n{l1|' + map1.num1 + '}   {l2|' + map1.num2 + '}																																								' +
+                            '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}																																								' +
+                            '\n{l5|' + map1.bi + '%}																																								' +
+                            ' \n'
+                        ].join('\n'),
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 85,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 85,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [53, 0, 18, 10],
+                                // padding: 5 ,
+                                //lineHeight:1,
+                                fontSize: 50, //height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [118.767413, 32.041544]
+            },
+
+                {
+                    name: "æ±Ÿè‹çœ",
+                    coord: [95.984722, 49.756539]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [95.984722, 49.756539]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [77.984722, 49.756539]
+                }
+            ],
+            [{
+                value: [0, 309],
+                name: "ä¸Šæµ·",
+                label: {
+
+                    normal: {
+                        mark: 'mark1',
+                        formatter: [
+                            '{Province|ä¸Šæµ·}' +
+                            '\n{l1|' + map2.num1 + '}   {l2|' + map2.num2 + '}																																								' +
+                            '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}																																								' +
+                            '\n{l5|' + map2.bi + '%}																																								' +
+                            ' \n'
+                        ].join('\n'),
+                        padding: [0, 10, -130, 280],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [59, 0, 18, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [121.472644, 31.231706]
+            },
+
+                {
+                    name: "ä¸Šæµ·",
+                    coord: [126.472644, 50.231706]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [126.472644, 50.231706]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [141.472644, 50.231706]
+                }
+            ]
+
+
+        ],
+        animation: false
+    }
+};
+var series3 = {
+    name: 'å¹¿ä¸œ',
+    type: 'map',
+    zoom: 0.7,
+    top: '15%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [{
+        name: 'æ±Ÿè‹',
+        selected: true
+
+    },
+        {
+            name: 'ä¸Šæµ·',
+            selected: true
+
+        },
+        {
+            name: 'å¹¿ä¸œ',
+            selected: true
+
+        }
+    ],
+
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        silent: true,
+        symbolSize: 20,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+
+            [{
+                value: [4, 5734],
+                name: "æ±Ÿè‹çœ",
+                label: {
+
+                    normal: {
+                        mark: 'mark1',
+                        formatter: [
+                            '{Province|æ±Ÿè‹}' +
+                            '\n{l1|' + map1.num1 + '}   {l2|' + map1.num2 + '}																																								' +
+                            '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}																																								' +
+                            '\n{l5|' + map1.bi + '%}																																								' +
+                            ' \n'
+                        ].join('\n'),
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            block: {
+                                height: 50,
+                            },
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 85,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 85,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [53, 0, 18, 10],
+                                // padding: 5 ,
+                                //lineHeight:1,
+                                fontSize: 50, //height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [118.767413, 32.041544]
+            },
+
+                {
+                    name: "æ±Ÿè‹çœ",
+                    coord: [95.984722, 49.756539]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [95.984722, 49.756539]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [77.984722, 49.756539]
+                }
+            ],
+            [{
+                value: [0, 309],
+                name: "ä¸Šæµ·",
+                label: {
+
+                    normal: {
+                        mark: 'mark1',
+                        formatter: [
+                            '{Province|ä¸Šæµ·}' +
+                            '\n{l1|' + map2.num1 + '}   {l2|' + map2.num2 + '}																																								' +
+                            '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}																																								' +
+                            '\n{l5|' + map2.bi + '%}																																								' +
+                            ' \n'
+                        ].join('\n'),
+                        padding: [0, 10, -130, 280],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [59, 0, 18, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [121.472644, 31.231706]
+            },
+
+                {
+                    name: "ä¸Šæµ·",
+                    coord: [126.472644, 50.231706]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [126.472644, 50.231706]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [141.472644, 50.231706]
+                }
+            ],
+            [{
+                value: [0, 309],
+                name: "å¹¿ä¸œçœ",
+                label: {
+
+                    normal: {
+                        mark: 'mark1',
+                        formatter: [
+                            '{Province|å¹¿ä¸œ}' +
+                            '\n{l1|' + map3.num1 + '}   {l2|' + map3.num2 + '}																																								' +
+                            '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}																																								' +
+                            '\n{l5|' + map3.bi + '%}																																								' +
+                            ' \n'
+                        ].join('\n'),
+
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [113.280637, 23.125178]
+            },
+
+                {
+                    name: "å¹¿ä¸œçœ",
+                    coord: [130.280637, 17.125178]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [130.280637, 17.125178]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [145.280637, 17.125178]
+                }
+            ]
+
+
+        ],
+        animation: false
+    }
+};
+var series4 = {
+    name: 'é‡åº†',
+    type: 'map',
+    zoom: 0.7,
+    top: '15%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [{
+        name: 'æ±Ÿè‹',
+        selected: true
+
+    },
+        {
+            name: 'ä¸Šæµ·',
+            selected: true
+
+        },
+        {
+            name: 'å¹¿ä¸œ',
+            selected: true
+
+        },
+        {
+            name: 'é‡åº†',
+            selected: true
+
+        }
+    ],
+
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        silent: true,
+        symbolSize: 20,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+
+            [{
+                value: [4, 5734],
+                name: "æ±Ÿè‹çœ",
+                label: {
+
+                    normal: {
+                        mark: 'mark1',
+                        formatter: [
+                            '{Province|æ±Ÿè‹}' +
+                            '\n{l1|' + map1.num1 + '}   {l2|' + map1.num2 + '}																																								' +
+                            '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}																																								' +
+                            '\n{l5|' + map1.bi + '%}																																								' +
+                            ' \n'
+                        ].join('\n'),
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            block: {
+                                height: 50,
+                            },
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 85,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 85,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [53, 0, 18, 10],
+                                // padding: 5 ,
+                                //lineHeight:1,
+                                fontSize: 50, //height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [118.767413, 32.041544]
+            },
+
+                {
+                    name: "æ±Ÿè‹çœ",
+                    coord: [95.984722, 49.756539]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [95.984722, 49.756539]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [77.984722, 49.756539]
+                }
+            ],
+            [{
+                value: [0, 309],
+                name: "ä¸Šæµ·",
+                label: {
+
+                    normal: {
+                        mark: 'mark1',
+                        formatter: [
+                            '{Province|ä¸Šæµ·}' +
+                            '\n{l1|' + map2.num1 + '}   {l2|' + map2.num2 + '}																																								' +
+                            '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}																																								' +
+                            '\n{l5|' + map2.bi + '%}																																								' +
+                            ' \n'
+                        ].join('\n'),
+                        padding: [0, 10, -130, 280],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [59, 0, 18, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [121.472644, 31.231706]
+            },
+
+                {
+                    name: "ä¸Šæµ·",
+                    coord: [126.472644, 50.231706]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [126.472644, 50.231706]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [141.472644, 50.231706]
+                }
+            ],
+            [{
+                value: [0, 309],
+                name: "å¹¿ä¸œçœ",
+                label: {
+
+                    normal: {
+                        mark: 'mark1',
+                        formatter: [
+                            '{Province|å¹¿ä¸œ}' +
+                            '\n{l1|' + map3.num1 + '}   {l2|' + map3.num2 + '}																																								' +
+                            '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}																																								' +
+                            '\n{l5|' + map3.bi + '%}																																								' +
+                            ' \n'
+                        ].join('\n'),
+
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [113.280637, 23.125178]
+            },
+
+                {
+                    name: "å¹¿ä¸œçœ",
+                    coord: [130.280637, 17.125178]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [130.280637, 17.125178]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [145.280637, 17.125178]
+                }
+            ],
+            [{
+                value: [0, 15],
+                name: "é‡åº†",
+                label: {
+
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|é‡åº†}\n{l1|' + map4.num1 + '}   {l2|' + map4.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map4.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [-130, 0, 0, -130],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [106.545042, 29.656263]
+            },
+
+                {
+                    name: "é‡åº†",
+                    coord: [97.71434, 19.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [97.71434, 19.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [82.71434, 19.304255]
+                }
+            ]
+        ],
+        animation: false
+    }
+};
+var series5 = {
+    name: 'å®å¤',
+    type: 'map',
+    zoom: 0.7,
+    top: '15%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [{
+        name: 'æ±Ÿè‹',
+        selected: true
+
+    },
+        {
+            name: 'ä¸Šæµ·',
+            selected: true
+
+        },
+        {
+            name: 'å¹¿ä¸œ',
+            selected: true
+
+        },
+        {
+            name: 'é‡åº†',
+            selected: true
+
+        },
+        {
+            name: 'å®å¤',
+            selected: true
+
+        }
+    ],
+
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        silent: true,
+        symbolSize: 20,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+
+            [{
+                value: [4, 5734],
+                name: "æ±Ÿè‹çœ",
+                label: {
+
+                    normal: {
+                        mark: 'mark1',
+                        formatter: [
+                            '{Province|æ±Ÿè‹}' +
+                            '\n{l1|' + map1.num1 + '}   {l2|' + map1.num2 + '}																																								' +
+                            '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}																																								' +
+                            '\n{l5|' + map1.bi + '%}																																								' +
+                            ' \n'
+                        ].join('\n'),
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            block: {
+                                height: 50,
+                            },
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 85,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 85,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [53, 0, 18, 10],
+                                // padding: 5 ,
+                                //lineHeight:1,
+                                fontSize: 50, //height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [118.767413, 32.041544]
+            },
+
+                {
+                    name: "æ±Ÿè‹çœ",
+                    coord: [95.984722, 49.756539]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [95.984722, 49.756539]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [77.984722, 49.756539]
+                }
+            ],
+            [{
+                value: [0, 309],
+                name: "ä¸Šæµ·",
+                label: {
+
+                    normal: {
+                        mark: 'mark1',
+                        formatter: [
+                            '{Province|ä¸Šæµ·}' +
+                            '\n{l1|' + map2.num1 + '}   {l2|' + map2.num2 + '}																																								' +
+                            '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}																																								' +
+                            '\n{l5|' + map2.bi + '%}																																								' +
+                            ' \n'
+                        ].join('\n'),
+                        padding: [0, 10, -130, 280],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [59, 0, 18, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [121.472644, 31.231706]
+            },
+
+                {
+                    name: "ä¸Šæµ·",
+                    coord: [126.472644, 50.231706]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [126.472644, 50.231706]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [141.472644, 50.231706]
+                }
+            ],
+            [{
+                value: [0, 309],
+                name: "å¹¿ä¸œçœ",
+                label: {
+
+                    normal: {
+                        mark: 'mark1',
+                        formatter: [
+                            '{Province|å¹¿ä¸œ}' +
+                            '\n{l1|' + map3.num1 + '}   {l2|' + map3.num2 + '}																																								' +
+                            '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}																																								' +
+                            '\n{l5|' + map3.bi + '%}																																								' +
+                            ' \n'
+                        ].join('\n'),
+
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [113.280637, 23.125178]
+            },
+
+                {
+                    name: "å¹¿ä¸œçœ",
+                    coord: [130.280637, 17.125178]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [130.280637, 17.125178]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [145.280637, 17.125178]
+                }
+            ],
+            [{
+                value: [0, 15],
+                name: "é‡åº†",
+                label: {
+
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|é‡åº†}\n{l1|' + map4.num1 + '}   {l2|' + map4.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map4.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [-130, 0, 0, -130],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [106.545042, 29.656263]
+            },
+
+                {
+                    name: "é‡åº†",
+                    coord: [97.71434, 19.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [97.71434, 19.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [82.71434, 19.304255]
+                }
+            ],
+            //@
+            [{
+                value: [0, 200],
+                name: "å®å¤",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|å®å¤}\n{l1|' + map5.num1 + '}   {l2|' + map5.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map5.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [106.545042, 37.656263]
+            },
+
+                {
+                    name: "å®å¤",
+                    coord: [80.71434, 33.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 33.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 33.304255]
+                }
+            ],
+        ],
+        animation: false
+    }
+};
+var series6 = {
+    name: 'ç¦å»º',
+    type: 'map',
+    zoom: 0.7,
+    top: '15%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [{
+        name: 'æ±Ÿè‹',
+        selected: true
+
+    },
+        {
+            name: 'ä¸Šæµ·',
+            selected: true
+
+        },
+        {
+            name: 'å¹¿ä¸œ',
+            selected: true
+
+        },
+        {
+            name: 'é‡åº†',
+            selected: true
+
+        },
+        {
+            name: 'å®å¤',
+            selected: true
+
+        },
+        {
+            name: 'ç¦å»º',
+            selected: true
+
+        }
+    ],
+
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        silent: true,
+        symbolSize: 20,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+
+            [{
+                value: [4, 5734],
+                name: "æ±Ÿè‹çœ",
+                label: {
+
+                    normal: {
+                        mark: 'mark1',
+                        formatter: [
+                            '{Province|æ±Ÿè‹}' +
+                            '\n{l1|' + map1.num1 + '}   {l2|' + map1.num2 + '}																																								' +
+                            '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}																																								' +
+                            '\n{l5|' + map1.bi + '%}																																								' +
+                            ' \n'
+                        ].join('\n'),
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            block: {
+                                height: 50,
+                            },
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 85,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 85,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [53, 0, 18, 10],
+                                // padding: 5 ,
+                                //lineHeight:1,
+                                fontSize: 50, //height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [118.767413, 32.041544]
+            },
+
+                {
+                    name: "æ±Ÿè‹çœ",
+                    coord: [95.984722, 49.756539]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [95.984722, 49.756539]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [77.984722, 49.756539]
+                }
+            ],
+            [{
+                value: [0, 309],
+                name: "ä¸Šæµ·",
+                label: {
+
+                    normal: {
+                        mark: 'mark1',
+                        formatter: [
+                            '{Province|ä¸Šæµ·}' +
+                            '\n{l1|' + map2.num1 + '}   {l2|' + map2.num2 + '}																																								' +
+                            '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}																																								' +
+                            '\n{l5|' + map2.bi + '%}																																								' +
+                            ' \n'
+                        ].join('\n'),
+                        padding: [0, 10, -130, 280],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [59, 0, 18, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [121.472644, 31.231706]
+            },
+
+                {
+                    name: "ä¸Šæµ·",
+                    coord: [126.472644, 50.231706]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [126.472644, 50.231706]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [141.472644, 50.231706]
+                }
+            ],
+            [{
+                value: [0, 309],
+                name: "å¹¿ä¸œçœ",
+                label: {
+
+                    normal: {
+                        mark: 'mark1',
+                        formatter: [
+                            '{Province|å¹¿ä¸œ}' +
+                            '\n{l1|' + map3.num1 + '}   {l2|' + map3.num2 + '}																																								' +
+                            '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}																																								' +
+                            '\n{l5|' + map3.bi + '%}																																								' +
+                            ' \n'
+                        ].join('\n'),
+
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [113.280637, 23.125178]
+            },
+
+                {
+                    name: "å¹¿ä¸œçœ",
+                    coord: [130.280637, 17.125178]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [130.280637, 17.125178]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [145.280637, 17.125178]
+                }
+            ],
+            [{
+                value: [0, 15],
+                name: "é‡åº†",
+                label: {
+
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|é‡åº†}\n{l1|' + map4.num1 + '}   {l2|' + map4.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map4.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [-130, 0, 0, -130],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [106.545042, 29.656263]
+            },
+
+                {
+                    name: "é‡åº†",
+                    coord: [97.71434, 19.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [97.71434, 19.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [82.71434, 19.304255]
+                }
+            ],
+            //@
+            [{
+                value: [0, 200],
+                name: "å®å¤",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|å®å¤}\n{l1|' + map5.num1 + '}   {l2|' + map5.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map5.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [106.545042, 37.656263]
+            },
+
+                {
+                    name: "å®å¤",
+                    coord: [80.71434, 33.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 33.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 33.304255]
+                }
+            ],
+            //ç¦å»º
+            [{
+                value: [0, 240],
+                name: "ç¦å»º",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|ç¦å»º}\n{l1|' + map6.num1 + '}   {l2|' + map6.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map6.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 10, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [117.472644, 26.231706]
+            },
+
+                {
+                    name: "ç¦å»º",
+                    coord: [140.472644, 33.231706]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [140.472644, 33.231706]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [155.472644, 33.231706]
+                }
+            ],
+        ],
+        animation: false
+    }
+};
+var series7 = {
+    name: 'æ²³å—çœ',
+    type: 'map',
+    zoom: 0.7,
+    top: '15%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [{
+        name: 'æ²³å—',
+        selected: true
+
+    }],
+
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [{
+                value: [4, 5734],
+                name: "æ²³å—çœ",
+                padding: [8, 0, 30, 10],
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|æ²³å—}\n{l1|' + map7.num1 + '}   {l2|' + map7.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map7.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+
+                coord: [114.767413, 34.041544]
+            },
+
+                {
+                    name: "æ²³å—",
+                    coord: [80.71434, 49.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 49.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 49.304255]
+                }
+            ]
+
+
+        ],
+        animation: false
+    }
+};
+var series8 = {
+    name: 'å››å·',
+    type: 'map',
+    zoom: 0.7,
+    top: '15%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [{
+        name: 'æ²³å—',
+        selected: true
+
+    },
+        {
+            name: 'å››å·',
+            selected: true
+
+        }
+    ],
+
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [{
+                value: [4, 5734],
+                name: "æ²³å—çœ",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|æ²³å—}\n{l1|' + map7.num1 + '}   {l2|' + map7.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map7.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+
+                coord: [114.767413, 34.041544]
+            },
+
+                {
+                    name: "æ²³å—",
+                    coord: [80.71434, 49.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 49.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 49.304255]
+                }
+            ],
+            [{
+                value: [0, 200],
+                name: "å››å·",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|å››å·}\n{l1|' + map8.num1 + '}   {l2|' + map8.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map8.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [104.065735, 30.659462]
+            },
+
+                {
+                    name: "å››å·",
+                    coord: [80.71434, 33.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 33.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 33.304255]
+                }
+            ]
+
+
+        ],
+        animation: false
+    }
+};
+var series9 = {
+    name: 'åŒ—äº¬',
+    type: 'map',
+    zoom: 0.7,
+    top: '15%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [{
+        name: 'æ²³å—',
+        selected: true
+
+    },
+        {
+            name: 'å››å·',
+            selected: true
+
+        },
+        {
+            name: 'åŒ—äº¬',
+            selected: true
+
+        }
+    ],
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [{
+                value: [4, 5734],
+                name: "æ²³å—çœ",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|æ²³å—}\n{l1|' + map7.num1 + '}   {l2|' + map7.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map7.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+
+                coord: [114.767413, 34.041544]
+            },
+
+                {
+                    name: "æ²³å—",
+                    coord: [80.71434, 49.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 49.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 49.304255]
+                }
+            ],
+            [{
+                value: [0, 200],
+                name: "å››å·",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|å››å·}\n{l1|' + map8.num1 + '}   {l2|' + map8.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map8.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [104.065735, 30.659462]
+            },
+
+                {
+                    name: "å››å·",
+                    coord: [80.71434, 33.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 33.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 33.304255]
+                }
+            ],
+            [{
+                value: [0, 240],
+                name: "åŒ—äº¬",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|åŒ—äº¬}\n{l1|' + map9.num1 + '}   {l2|' + map9.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map9.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 10, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [116.405285, 39.904989]
+            },
+
+                {
+                    name: "åŒ—äº¬",
+                    coord: [135.472644, 49.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [135.472644, 49.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [148.472644, 49.304255]
+                }
+            ]
+        ],
+        animation: false
+    }
+};
+var series10 = {
+    name: 'åŒ—äº¬',
+    type: 'map',
+    zoom: 0.7,
+    top: '15%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [{
+        name: 'æ²³å—',
+        selected: true
+
+    },
+        {
+            name: 'å››å·',
+            selected: true
+
+        },
+        {
+            name: 'åŒ—äº¬',
+            selected: true
+
+        },
+        {
+            name: 'æ¹–åŒ—',
+            selected: true
+
+        }
+    ],
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [{
+                value: [4, 5734],
+                name: "æ²³å—çœ",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|æ²³å—}\n{l1|' + map7.num1 + '}   {l2|' + map7.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map7.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+
+                coord: [114.767413, 34.041544]
+            },
+
+                {
+                    name: "æ²³å—",
+                    coord: [80.71434, 49.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 49.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 49.304255]
+                }
+            ],
+            [{
+                value: [0, 200],
+                name: "å››å·",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|å››å·}\n{l1|' + map8.num1 + '}   {l2|' + map8.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map8.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [104.065735, 30.659462]
+            },
+
+                {
+                    name: "å››å·",
+                    coord: [80.71434, 33.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 33.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 33.304255]
+                }
+            ],
+            [{
+                value: [0, 240],
+                name: "åŒ—äº¬",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|åŒ—äº¬}\n{l1|' + map9.num1 + '}   {l2|' + map9.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map9.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 10, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [116.405285, 39.904989]
+            },
+
+                {
+                    name: "åŒ—äº¬",
+                    coord: [135.472644, 49.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [135.472644, 49.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [148.472644, 49.304255]
+                }
+            ],
+            [{
+                value: [0, 309],
+                name: "æ¹–åŒ—",
+                label: {
+
+                    normal: {
+                        mark: 'mark3',
+                        formatter: [
+                            '{Province|æ¹–åŒ—}' + '\n{l1|' + map10.num1 + '}   {l2|' + map10.num2 + '}' + '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}' + '\n{l5|' + map10.bi + '%}' + ' \n'
+                        ].join('\n'),
+
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [114.298572, 30.584355]
+            },
+
+                {
+                    name: "æ¹–åŒ—",
+                    coord: [135.280637, 19.125178]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [135.280637, 19.125178]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [150.280637, 19.125178]
+                }
+            ]
+        ],
+        animation: false
+    }
+};
+var series11 = {
+    name: 'åŒ—äº¬',
+    type: 'map',
+    zoom: 0.7,
+    top: '15%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [{
+        name: 'æ²³å—',
+        selected: true
+
+    },
+        {
+            name: 'å››å·',
+            selected: true
+
+        },
+        {
+            name: 'åŒ—äº¬',
+            selected: true
+
+        },
+        {
+            name: 'æ¹–åŒ—',
+            selected: true
+
+        },
+        {
+            name: 'å±±ä¸œ',
+            selected: true
+
+        }
+    ],
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [{
+                value: [4, 5734],
+                name: "æ²³å—çœ",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|æ²³å—}\n{l1|' + map7.num1 + '}   {l2|' + map7.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map7.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+
+                coord: [114.767413, 34.041544]
+            },
+
+                {
+                    name: "æ²³å—",
+                    coord: [80.71434, 49.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 49.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 49.304255]
+                }
+            ],
+            [{
+                value: [0, 200],
+                name: "å››å·",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|å››å·}\n{l1|' + map8.num1 + '}   {l2|' + map8.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map8.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [104.065735, 30.659462]
+            },
+
+                {
+                    name: "å››å·",
+                    coord: [80.71434, 33.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 33.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 33.304255]
+                }
+            ],
+            [{
+                value: [0, 240],
+                name: "åŒ—äº¬",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|åŒ—äº¬}\n{l1|' + map9.num1 + '}   {l2|' + map9.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map9.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 10, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [116.405285, 39.904989]
+            },
+
+                {
+                    name: "åŒ—äº¬",
+                    coord: [135.472644, 49.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [135.472644, 49.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [148.472644, 49.304255]
+                }
+            ],
+            [{
+                value: [0, 309],
+                name: "æ¹–åŒ—",
+                label: {
+
+                    normal: {
+                        mark: 'mark3',
+                        formatter: [
+                            '{Province|æ¹–åŒ—}' + '\n{l1|' + map10.num1 + '}   {l2|' + map10.num2 + '}' + '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}' + '\n{l5|' + map10.bi + '%}' + ' \n'
+                        ].join('\n'),
+
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [114.298572, 30.584355]
+            },
+
+                {
+                    name: "æ¹–åŒ—",
+                    coord: [135.280637, 19.125178]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [135.280637, 19.125178]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [150.280637, 19.125178]
+                }
+            ],
+            [{
+                value: [0, 240],
+                name: "å±±ä¸œ",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|å±±ä¸œ}\n{l1|' + map11.num1 + '}   {l2|' + map11.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map11.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 10, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [117.000923, 36.675807]
+            },
+
+                {
+                    name: "å±±ä¸œ",
+                    coord: [140.472644, 33.231706]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [140.472644, 33.231706]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [155.472644, 33.231706]
+                }
+            ]
+
+        ],
+        animation: false
+    }
+};
+var series12 = {
+    name: 'åŒ—äº¬',
+    type: 'map',
+    zoom: 0.7,
+    top: '15%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [{
+        name: 'æ²³å—',
+        selected: true
+    },
+        {
+            name: 'å››å·',
+            selected: true
+        },
+        {
+            name: 'åŒ—äº¬',
+            selected: true
+        },
+        {
+            name: 'æ¹–åŒ—',
+            selected: true
+        },
+        {
+            name: 'å±±ä¸œ',
+            selected: true
+        },
+        {
+            name: 'å¹¿è¥¿',
+            selected: true
+        }
+    ],
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [{
+                value: [4, 5734],
+                name: "æ²³å—çœ",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|æ²³å—}\n{l1|' + map7.num1 + '}   {l2|' + map7.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map7.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+
+                coord: [114.767413, 34.041544]
+            },
+
+                {
+                    name: "æ²³å—",
+                    coord: [80.71434, 49.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 49.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 49.304255]
+                }
+            ],
+            [{
+                value: [0, 200],
+                name: "å››å·",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|å››å·}\n{l1|' + map8.num1 + '}   {l2|' + map8.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map8.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [104.065735, 30.659462]
+            },
+
+                {
+                    name: "å››å·",
+                    coord: [80.71434, 33.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 33.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 33.304255]
+                }
+            ],
+            [{
+                value: [0, 240],
+                name: "åŒ—äº¬",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|åŒ—äº¬}\n{l1|' + map9.num1 + '}   {l2|' + map9.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map9.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 10, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [116.405285, 39.904989]
+            },
+
+                {
+                    name: "åŒ—äº¬",
+                    coord: [135.472644, 49.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [135.472644, 49.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [148.472644, 49.304255]
+                }
+            ],
+            [{
+                value: [0, 309],
+                name: "æ¹–åŒ—",
+                label: {
+
+                    normal: {
+                        mark: 'mark3',
+                        formatter: [
+                            '{Province|æ¹–åŒ—}' + '\n{l1|' + map10.num1 + '}   {l2|' + map10.num2 + '}' + '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}' + '\n{l5|' + map10.bi + '%}' + ' \n'
+                        ].join('\n'),
+
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [114.298572, 30.584355]
+            },
+
+                {
+                    name: "æ¹–åŒ—",
+                    coord: [135.280637, 19.125178]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [135.280637, 19.125178]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [150.280637, 19.125178]
+                }
+            ],
+            [{
+                value: [0, 240],
+                name: "å±±ä¸œ",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|å±±ä¸œ}\n{l1|' + map11.num1 + '}   {l2|' + map11.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map11.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 10, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [117.000923, 36.675807]
+            },
+
+                {
+                    name: "å±±ä¸œ",
+                    coord: [140.472644, 33.231706]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [140.472644, 33.231706]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [155.472644, 33.231706]
+                }
+            ],
+            [{
+                value: [0, 15],
+                name: "å¹¿è¥¿",
+                label: {
+
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|å¹¿è¥¿}\n{l1|' + map12.num1 + '}   {l2|' + map12.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map12.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [-130, 0, 0, -130],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [111.320004, 24.82402]
+            },
+
+                {
+                    name: "å¹¿è¥¿",
+                    coord: [102.71434, 15.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [102.71434, 15.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [87.71434, 15.304255]
+                }
+            ]
+
+        ],
+        animation: false
+    }
+};
+var series13 = {
+    name: 'å†…è’™å¤',
+    type: 'map',
+    zoom: 0.7,
+    top: '15%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [{
+        name: 'å†…è’™å¤',
+        selected: true
+
+    }],
+
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [{
+                value: [4, 5734],
+                name: "å†…è’™å¤",
+                padding: [8, 0, 30, 10],
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|å†…è’™å¤}\n{l1|' + map13.num1 + '}   {l2|' + map13.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map7.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+
+                coord: [111.670801, 40.818311]
+            },
+
+                {
+                    name: "å†…è’™å¤",
+                    coord: [80.71434, 49.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 49.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 49.304255]
+                }
+            ]
+
+
+        ],
+        animation: false
+    }
+};
+var series14 = {
+    name: 'è¥¿è—',
+    type: 'map',
+    zoom: 0.7,
+    top: '15%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [{
+        name: 'å†…è’™å¤',
+        selected: true
+
+    },
+        {
+            name: 'è¥¿è—',
+            selected: true
+
+        }
+    ],
+
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [{
+                value: [4, 5734],
+                name: "å†…è’™å¤",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|å†…è’™å¤}\n{l1|' + map13.num1 + '}   {l2|' + map13.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map7.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+
+                coord: [111.670801, 40.818311]
+            },
+
+                {
+                    name: "å†…è’™å¤",
+                    coord: [80.71434, 49.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 49.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 49.304255]
+                }
+            ],
+            [{
+                value: [0, 200],
+                name: "è¥¿è—",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|è¥¿è—}\n{l1|' + map15.num1 + '}   {l2|' + map15.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map15.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [91.132212, 29.660361]
+            },
+
+                {
+                    name: "è¥¿è—",
+                    coord: [80.71434, 33.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 33.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 33.304255]
+                }
+            ]
+
+
+        ],
+        animation: false
+    }
+};
+var series15 = {
+    name: 'å®‰å¾½',
+    type: 'map',
+    zoom: 0.7,
+    top: '15%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [{
+        name: 'å†…è’™å¤',
+        selected: true
+    },
+        {
+            name: 'è¥¿è—',
+            selected: true
+        },
+        {
+            name: 'å®‰å¾½',
+            selected: true
+        }
+    ],
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [{
+                value: [4, 5734],
+                name: "å†…è’™å¤",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|å†…è’™å¤}\n{l1|' + map13.num1 + '}   {l2|' + map13.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map7.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+
+                coord: [111.670801, 40.818311]
+            },
+
+                {
+                    name: "å†…è’™å¤",
+                    coord: [80.71434, 49.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 49.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 49.304255]
+                }
+            ],
+            [{
+                value: [0, 200],
+                name: "è¥¿è—",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|è¥¿è—}\n{l1|' + map15.num1 + '}   {l2|' + map15.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map15.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [91.132212, 29.660361]
+            },
+
+                {
+                    name: "è¥¿è—",
+                    coord: [80.71434, 33.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 33.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 33.304255]
+                }
+            ],
+            [{
+                value: [0, 309],
+                name: "å®‰å¾½",
+                label: {
+
+                    normal: {
+                        mark: 'mark4',
+                        formatter: [
+                            '{Province|å®‰å¾½}' +
+                            '\n{l1|' + map14.num1 + '}   {l2|' + map14.num2 + '}                                                                                                                                                              ' +
+                            '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}                                                                                                                                                              ' +
+                            '\n{l5|0%}                                                                                                                                                                ' +
+                            ' \n'
+                        ].join('\n'),
+
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [117.283042, 31.86119]
+            },
+
+                {
+                    name: "å®‰å¾½çœ",
+                    coord: [135.280637, 35.125178]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [135.280637, 35.125178]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [145.280637, 35.125178]
+                }
+            ]
+        ],
+        animation: false
+    }
+};
+var series16 = {
+    name: 'ç”˜è‚ƒ',
+    type: 'map',
+    zoom: 0.7,
+    top: '15%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [{
+        name: 'å†…è’™å¤',
+        selected: true
+    },
+        {
+            name: 'è¥¿è—',
+            selected: true
+        },
+        {
+            name: 'å®‰å¾½',
+            selected: true
+        },
+        {
+            name: 'ç”˜è‚ƒ',
+            selected: true
+
+        }
+    ],
+
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        silent: true,
+        symbolSize: 20,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [{
+                value: [4, 5734],
+                name: "å†…è’™å¤",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|å†…è’™å¤}\n{l1|' + map13.num1 + '}   {l2|' + map13.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map7.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+
+                coord: [111.670801, 40.818311]
+            },
+
+                {
+                    name: "å†…è’™å¤",
+                    coord: [80.71434, 49.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 49.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 49.304255]
+                }
+            ],
+            [{
+                value: [0, 200],
+                name: "è¥¿è—",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|è¥¿è—}\n{l1|' + map15.num1 + '}   {l2|' + map15.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map15.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [91.132212, 29.660361]
+            },
+
+                {
+                    name: "è¥¿è—",
+                    coord: [80.71434, 33.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 33.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 33.304255]
+                }
+            ],
+            [{
+                value: [0, 309],
+                name: "å®‰å¾½",
+                label: {
+
+                    normal: {
+                        mark: 'mark4',
+                        formatter: [
+                            '{Province|å®‰å¾½}' +
+                            '\n{l1|' + map14.num1 + '}   {l2|' + map14.num2 + '}                                                                                                                                                              ' +
+                            '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}                                                                                                                                                              ' +
+                            '\n{l5|0%}                                                                                                                                                                ' +
+                            ' \n'
+                        ].join('\n'),
+
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [117.283042, 31.86119]
+            },
+
+                {
+                    name: "å®‰å¾½çœ",
+                    coord: [135.280637, 35.125178]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [135.280637, 35.125178]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [145.280637, 35.125178]
+                }
+            ],
+            [{
+                value: [0, 15],
+                name: "ç”˜è‚ƒ",
+                label: {
+
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|ç”˜è‚ƒ}\n{l1|' + map16.num1 + '}   {l2|' + map16.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map4.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [-130, 0, 0, -130],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [103.823557, 36.058039]
+            },
+
+                {
+                    name: "ç”˜è‚ƒ",
+                    coord: [97.71434, 19.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [97.71434, 19.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [82.71434, 19.304255]
+                }
+            ]
+        ],
+        animation: false
+    }
+};
+var series17 = {
+    name: 'é»‘é¾™æ±Ÿ',
+    type: 'map',
+    zoom: 0.7,
+    top: '15%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [{
+        name: 'å†…è’™å¤',
+        selected: true
+    },
+        {
+            name: 'è¥¿è—',
+            selected: true
+        },
+        {
+            name: 'å®‰å¾½',
+            selected: true
+        },
+        {
+            name: 'ç”˜è‚ƒ',
+            selected: true
+        },
+        {
+            name: 'é»‘é¾™æ±Ÿ',
+            selected: true
+        }
+    ],
+
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        silent: true,
+        symbolSize: 20,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [{
+                value: [4, 5734],
+                name: "å†…è’™å¤",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|å†…è’™å¤}\n{l1|' + map13.num1 + '}   {l2|' + map13.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map7.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+
+                coord: [111.670801, 40.818311]
+            },
+
+                {
+                    name: "å†…è’™å¤",
+                    coord: [80.71434, 49.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 49.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 49.304255]
+                }
+            ],
+            [{
+                value: [0, 200],
+                name: "è¥¿è—",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|è¥¿è—}\n{l1|' + map15.num1 + '}   {l2|' + map15.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map15.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [91.132212, 29.660361]
+            },
+
+                {
+                    name: "è¥¿è—",
+                    coord: [80.71434, 33.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 33.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 33.304255]
+                }
+            ],
+            [{
+                value: [0, 309],
+                name: "å®‰å¾½",
+                label: {
+
+                    normal: {
+                        mark: 'mark4',
+                        formatter: [
+                            '{Province|å®‰å¾½}' +
+                            '\n{l1|' + map14.num1 + '}   {l2|' + map14.num2 + '}                                                                                                                                                              ' +
+                            '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}                                                                                                                                                              ' +
+                            '\n{l5|0%}                                                                                                                                                                ' +
+                            ' \n'
+                        ].join('\n'),
+
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [117.283042, 31.86119]
+            },
+
+                {
+                    name: "å®‰å¾½çœ",
+                    coord: [135.280637, 35.125178]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [135.280637, 35.125178]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [145.280637, 35.125178]
+                }
+            ],
+            [{
+                value: [0, 15],
+                name: "ç”˜è‚ƒ",
+                label: {
+
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|ç”˜è‚ƒ}\n{l1|' + map16.num1 + '}   {l2|' + map16.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map4.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [-130, 0, 0, -130],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [103.823557, 36.058039]
+            },
+
+                {
+                    name: "ç”˜è‚ƒ",
+                    coord: [97.71434, 19.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [97.71434, 19.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [82.71434, 19.304255]
+                }
+            ],
+            [{
+                value: [0, 309],
+                name: "é»‘é¾™æ±Ÿ",
+                label: {
+
+                    normal: {
+                        mark: 'mark5',
+                        formatter: [
+                            '\n{Province|                                                                é»‘é¾™æ±Ÿ}' +
+                            '\n                                                                                                                         {l1|' + map17.num1 + '}   {l2|' + map17.num2 + '}                                                                                                                                                              ' +
+                            '\n                                                                                                                         {l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}                                                                                                                                                              ' +
+                            '\n                                                                                                              {l5|' + map17.bi + '%}                                                                                                                                                                ' +
+                            ' \n'
+                        ].join('\n'),
+                        padding: [0, 10, -130, 280],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [59, 0, 18, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [126.642464, 45.756967]
+            },
+
+                {
+                    name: "é»‘é¾™æ±Ÿ",
+                    coord: [130.642464, 55.756967]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [130.642464, 55.756967]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [145.472644, 55.756967]
+                }
+            ]
+        ],
+        animation: false
+    }
+};
+var series18 = {
+    name: 'æµ™æ±Ÿ',
+    type: 'map',
+    zoom: 0.7,
+    top: '15%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [{
+        name: 'å†…è’™å¤',
+        selected: true
+    },
+        {
+            name: 'è¥¿è—',
+            selected: true
+        },
+        {
+            name: 'å®‰å¾½',
+            selected: true
+        },
+        {
+            name: 'ç”˜è‚ƒ',
+            selected: true
+        },
+        {
+            name: 'é»‘é¾™æ±Ÿ',
+            selected: true
+        },
+        {
+            name: 'æµ™æ±Ÿ',
+            selected: true
+        }
+    ],
+
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        silent: true,
+        symbolSize: 20,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [{
+                value: [4, 5734],
+                name: "å†…è’™å¤",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|å†…è’™å¤}\n{l1|' + map13.num1 + '}   {l2|' + map13.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map7.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+
+                coord: [111.670801, 40.818311]
+            },
+
+                {
+                    name: "å†…è’™å¤",
+                    coord: [80.71434, 49.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 49.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 49.304255]
+                }
+            ],
+            [{
+                value: [0, 200],
+                name: "è¥¿è—",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|è¥¿è—}\n{l1|' + map15.num1 + '}   {l2|' + map15.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map15.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [91.132212, 29.660361]
+            },
+
+                {
+                    name: "è¥¿è—",
+                    coord: [80.71434, 33.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 33.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 33.304255]
+                }
+            ],
+            [{
+                value: [0, 309],
+                name: "å®‰å¾½",
+                label: {
+
+                    normal: {
+                        mark: 'mark4',
+                        formatter: [
+                            '{Province|å®‰å¾½}' +
+                            '\n{l1|' + map14.num1 + '}   {l2|' + map14.num2 + '}                                                                                                                                                              ' +
+                            '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}                                                                                                                                                              ' +
+                            '\n{l5|0%}                                                                                                                                                                ' +
+                            ' \n'
+                        ].join('\n'),
+
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [117.283042, 31.86119]
+            },
+
+                {
+                    name: "å®‰å¾½çœ",
+                    coord: [135.280637, 35.125178]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [135.280637, 35.125178]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [145.280637, 35.125178]
+                }
+            ],
+            [{
+                value: [0, 15],
+                name: "ç”˜è‚ƒ",
+                label: {
+
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|ç”˜è‚ƒ}\n{l1|' + map16.num1 + '}   {l2|' + map16.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map4.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [-130, 0, 0, -130],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [103.823557, 36.058039]
+            },
+
+                {
+                    name: "ç”˜è‚ƒ",
+                    coord: [97.71434, 19.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [97.71434, 19.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [82.71434, 19.304255]
+                }
+            ],
+            [{
+                value: [0, 309],
+                name: "é»‘é¾™æ±Ÿ",
+                label: {
+
+                    normal: {
+                        mark: 'mark5',
+                        formatter: [
+                            '\n{Province|                                                                é»‘é¾™æ±Ÿ}' +
+                            '\n                                                                                                                         {l1|' + map17.num1 + '}   {l2|' + map17.num2 + '}                                                                                                                                                              ' +
+                            '\n                                                                                                                         {l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}                                                                                                                                                              ' +
+                            '\n                                                                                                              {l5|' + map17.bi + '%}                                                                                                                                                                ' +
+                            ' \n'
+                        ].join('\n'),
+                        padding: [0, 10, -130, 280],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [59, 0, 18, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [126.642464, 45.756967]
+            },
+
+                {
+                    name: "é»‘é¾™æ±Ÿ",
+                    coord: [130.642464, 55.756967]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [130.642464, 55.756967]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [145.472644, 55.756967]
+                }
+            ],
+            [{
+                value: [0, 309],
+                name: "æµ™æ±Ÿ",
+                label: {
+
+                    normal: {
+                        mark: 'mark6',
+                        formatter: [
+                            '{Province|æµ™æ±Ÿ}' +
+                            '\n{l1|' + map18.num1 + '}   {l2|' + map18.num2 + '}                                                                                                                                                              ' +
+                            '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}                                                                                                                                                              ' +
+                            '\n{l5|' + map18.bi + '%}                                                                                                                                                                ' +
+                            ' \n'
+                        ].join('\n'),
+                        padding: [-130, 10, -130, 700],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [120.153576, 30.287459]
+            },
+
+                {
+                    name: "æµ™æ±Ÿ",
+                    coord: [130.642464, 18.756967]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [130.642464, 18.756967]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [145.472644, 18.756967]
+                }
+            ]
+        ],
+        animation: false
+    }
+};
+var series19 = {
+    name: 'æ±Ÿè¥¿',
+    type: 'map',
+    zoom: 0.7,
+    top: '15%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [{
+        name: 'æ±Ÿè¥¿',
+        selected: true
+
+    }],
+
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [{
+                value: [0, 309],
+                name: "æ±Ÿè¥¿",
+                label: {
+
+                    normal: {
+                        mark: 'mark3',
+                        formatter: [
+                            '{Province|æ±Ÿè¥¿}' + '\n{l1|' + map19.num1 + '}   {l2|' + map19.num2 + '}' + '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}' + '\n{l5|' + map19.bi + '%}' + ' \n'
+                        ].join('\n'),
+
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [115.892151, 28.676493]
+            },
+
+                {
+                    name: "æ±Ÿè¥¿",
+                    coord: [135.280637, 19.125178]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [135.280637, 19.125178]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [150.280637, 19.125178]
+                }
+            ],
+
+
+        ],
+        animation: false
+    }
+};
+var series20 = {
+    name: 'æ±Ÿè¥¿',
+    type: 'map',
+    zoom: 0.7,
+    top: '15%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [{
+        name: 'æ±Ÿè¥¿',
+        selected: true
+
+    }, {
+        name: 'é™•è¥¿',
+        selected: true
+
+    }],
+
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [{
+                value: [0, 309],
+                name: "æ±Ÿè¥¿",
+                label: {
+
+                    normal: {
+                        mark: 'mark3',
+                        formatter: [
+                            '{Province|æ±Ÿè¥¿}' + '\n{l1|' + map19.num1 + '}   {l2|' + map19.num2 + '}' + '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}' + '\n{l5|' + map19.bi + '%}' + ' \n'
+                        ].join('\n'),
+
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [115.892151, 28.676493]
+            },
+
+                {
+                    name: "æ±Ÿè¥¿",
+                    coord: [135.280637, 19.125178]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [135.280637, 19.125178]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [150.280637, 19.125178]
+                }
+            ],
+            [{
+                value: [4, 5734],
+                name: "é™•è¥¿",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|é™•è¥¿}\n{l1|' + map20.num1 + '}   {l2|' + map20.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map20.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+
+                coord: [108.948024, 34.263161]
+            },
+
+                {
+                    name: "é™•è¥¿",
+                    coord: [80.71434, 49.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 49.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 49.304255]
+                }
+            ],
+
+
+        ],
+        animation: false
+    }
+};
+var series21 = {
+    name: 'æ²³åŒ—',
+    type: 'map',
+    zoom: 0.7,
+    top: '15%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [{
+        name: 'æ±Ÿè¥¿',
+        selected: true
+
+    }, {
+        name: 'é™•è¥¿',
+        selected: true
+
+    }, {
+        name: 'æ²³åŒ—',
+        selected: true
+
+    }],
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [{
+                value: [0, 309],
+                name: "æ±Ÿè¥¿",
+                label: {
+
+                    normal: {
+                        mark: 'mark3',
+                        formatter: [
+                            '{Province|æ±Ÿè¥¿}' + '\n{l1|' + map19.num1 + '}   {l2|' + map19.num2 + '}' + '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}' + '\n{l5|' + map19.bi + '%}' + ' \n'
+                        ].join('\n'),
+
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [115.892151, 28.676493]
+            },
+
+                {
+                    name: "æ±Ÿè¥¿",
+                    coord: [135.280637, 19.125178]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [135.280637, 19.125178]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [150.280637, 19.125178]
+                }
+            ],
+            [{
+                value: [4, 5734],
+                name: "é™•è¥¿",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|é™•è¥¿}\n{l1|' + map20.num1 + '}   {l2|' + map20.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map20.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [108.948024, 34.263161]
+            },
+                {
+                    name: "é™•è¥¿",
+                    coord: [80.71434, 49.304255]
+                }
+            ],
+            [
+                {
+                    symbol: 'none',
+                    coord: [80.71434, 49.304255]
+                },
+                {
+                    symbol: 'none',
+                    coord: [65.71434, 49.304255]
+                }
+            ],
+            [{
+                value: [0, 240],
+                name: "æ²³åŒ—",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|æ²³åŒ—}\n{l1|' + map21.num1 + '}   {l2|' + map21.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map21.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 10, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [114.502461, 38.045474]
+            },
+                {
+                    name: "æ²³åŒ—",
+                    coord: [135.472644, 49.304255]
+                }
+
+            ],
+            [
+                {
+                    symbol: 'none',
+                    coord: [135.472644, 49.304255]
+                },
+                {
+                    symbol: 'none',
+                    coord: [148.472644, 49.304255]
+                }
+            ]
+        ],
+        animation: false
+    }
+};
+var series22 = {
+    name: 'å±±è¥¿',
+    type: 'map',
+    zoom: 0.7,
+    top: '15%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [{
+        name: 'æ±Ÿè¥¿',
+        selected: true
+
+    }, {
+        name: 'é™•è¥¿',
+        selected: true
+
+    }, {
+        name: 'æ²³åŒ—',
+        selected: true
+
+    }, {
+        name: 'å±±è¥¿',
+        selected: true
+
+    }],
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [{
+                value: [0, 309],
+                name: "æ±Ÿè¥¿",
+                label: {
+
+                    normal: {
+                        mark: 'mark3',
+                        formatter: [
+                            '{Province|æ±Ÿè¥¿}' + '\n{l1|' + map19.num1 + '}   {l2|' + map19.num2 + '}' + '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}' + '\n{l5|' + map19.bi + '%}' + ' \n'
+                        ].join('\n'),
+
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [115.892151, 28.676493]
+            },
+
+                {
+                    name: "æ±Ÿè¥¿",
+                    coord: [135.280637, 19.125178]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [135.280637, 19.125178]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [150.280637, 19.125178]
+                }
+            ],
+            [{
+                value: [4, 5734],
+                name: "é™•è¥¿",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|é™•è¥¿}\n{l1|' + map20.num1 + '}   {l2|' + map20.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map20.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [108.948024, 34.263161]
+            },
+                {
+                    name: "é™•è¥¿",
+                    coord: [80.71434, 49.304255]
+                }
+            ],
+            [
+                {
+                    symbol: 'none',
+                    coord: [80.71434, 49.304255]
+                },
+                {
+                    symbol: 'none',
+                    coord: [65.71434, 49.304255]
+                }
+            ],
+            [{
+                value: [0, 240],
+                name: "æ²³åŒ—",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|æ²³åŒ—}\n{l1|' + map21.num1 + '}   {l2|' + map21.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map21.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 10, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [114.502461, 38.045474]
+            },
+                {
+                    name: "æ²³åŒ—",
+                    coord: [135.472644, 49.304255]
+                }
+
+            ],
+            [
+                {
+                    symbol: 'none',
+                    coord: [135.472644, 49.304255]
+                },
+                {
+                    symbol: 'none',
+                    coord: [148.472644, 49.304255]
+                }
+            ],
+            [{
+                value: [0, 240],
+                name: "å±±è¥¿",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|å±±è¥¿}\n{l1|' + map22.num1 + '}   {l2|' + map22.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map22.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 10, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [112.549248, 36.666014]
+            },
+
+                {
+                    name: "å±±è¥¿",
+                    coord: [140.472644, 33.231706]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [140.472644, 33.231706]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [155.472644, 33.231706]
+                }
+            ]
+
+        ],
+        animation: false
+    }
+};
+var series23 = {
+    name: 'äº‘å—',
+    type: 'map',
+    zoom: 0.7,
+    top: '15%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [{
+        name: 'æ±Ÿè¥¿',
+        selected: true
+
+    }, {
+        name: 'é™•è¥¿',
+        selected: true
+
+    }, {
+        name: 'æ²³åŒ—',
+        selected: true
+
+    }, {
+        name: 'å±±è¥¿',
+        selected: true
+
+    }, {
+        name: 'äº‘å—',
+        selected: true
+
+    }],
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [{
+                value: [0, 309],
+                name: "æ±Ÿè¥¿",
+                label: {
+
+                    normal: {
+                        mark: 'mark3',
+                        formatter: [
+                            '{Province|æ±Ÿè¥¿}' + '\n{l1|' + map19.num1 + '}   {l2|' + map19.num2 + '}' + '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}' + '\n{l5|' + map19.bi + '%}' + ' \n'
+                        ].join('\n'),
+
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [115.892151, 28.676493]
+            },
+
+                {
+                    name: "æ±Ÿè¥¿",
+                    coord: [135.280637, 19.125178]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [135.280637, 19.125178]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [150.280637, 19.125178]
+                }
+            ],
+            [{
+                value: [4, 5734],
+                name: "é™•è¥¿",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|é™•è¥¿}\n{l1|' + map20.num1 + '}   {l2|' + map20.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map20.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [108.948024, 34.263161]
+            },
+                {
+                    name: "é™•è¥¿",
+                    coord: [80.71434, 49.304255]
+                }
+            ],
+            [{
+                symbol: 'none',
+                coord: [80.71434, 49.304255]
+            },
+                {
+                    symbol: 'none',
+                    coord: [65.71434, 49.304255]
+                }
+            ],
+            [{
+                value: [0, 240],
+                name: "æ²³åŒ—",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|æ²³åŒ—}\n{l1|' + map21.num1 + '}   {l2|' + map21.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map21.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 10, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [114.502461, 38.045474]
+            },
+                {
+                    name: "æ²³åŒ—",
+                    coord: [135.472644, 49.304255]
+                }
+
+            ],
+            [{
+                symbol: 'none',
+                coord: [135.472644, 49.304255]
+            },
+                {
+                    symbol: 'none',
+                    coord: [148.472644, 49.304255]
+                }
+            ],
+            [{
+                value: [0, 240],
+                name: "å±±è¥¿",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|å±±è¥¿}\n{l1|' + map22.num1 + '}   {l2|' + map22.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map22.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 10, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [112.549248, 36.666014]
+            },
+
+                {
+                    name: "å±±è¥¿",
+                    coord: [140.472644, 33.231706]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [140.472644, 33.231706]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [155.472644, 33.231706]
+                }
+            ],
+            [{
+                value: [0, 15],
+                name: "äº‘å—",
+                label: {
+
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|äº‘å—}\n{l1|' + map23.num1 + '}   {l2|' + map23.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map23.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [-130, 0, 0, -130],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [102.712251, 25.040609]
+            },
+
+                {
+                    name: "äº‘å—",
+                    coord: [97.71434, 19.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [97.71434, 19.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [82.71434, 19.304255]
+                }
+            ]
+
+        ],
+        animation: false
+    }
+};
+var series24 = {
+    name: 'é’æµ·',
+    type: 'map',
+    zoom: 0.7,
+    top: '15%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [{
+        name: 'æ±Ÿè¥¿',
+        selected: true
+
+    }, {
+        name: 'é™•è¥¿',
+        selected: true
+
+    }, {
+        name: 'æ²³åŒ—',
+        selected: true
+
+    }, {
+        name: 'å±±è¥¿',
+        selected: true
+
+    }, {
+        name: 'äº‘å—',
+        selected: true
+
+    },
+        {
+            name: 'é’æµ·',
+            selected: true
+        }
+    ],
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [{
+                value: [0, 309],
+                name: "æ±Ÿè¥¿",
+                label: {
+
+                    normal: {
+                        mark: 'mark3',
+                        formatter: [
+                            '{Province|æ±Ÿè¥¿}' + '\n{l1|' + map19.num1 + '}   {l2|' + map19.num2 + '}' + '\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}' + '\n{l5|' + map19.bi + '%}' + ' \n'
+                        ].join('\n'),
+
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [115.892151, 28.676493]
+            },
+
+                {
+                    name: "æ±Ÿè¥¿",
+                    coord: [135.280637, 19.125178]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [135.280637, 19.125178]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [150.280637, 19.125178]
+                }
+            ],
+            [{
+                value: [4, 5734],
+                name: "é™•è¥¿",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|é™•è¥¿}\n{l1|' + map20.num1 + '}   {l2|' + map20.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map20.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [108.948024, 34.263161]
+            },
+                {
+                    name: "é™•è¥¿",
+                    coord: [80.71434, 49.304255]
+                }
+            ],
+            [{
+                symbol: 'none',
+                coord: [80.71434, 49.304255]
+            },
+                {
+                    symbol: 'none',
+                    coord: [65.71434, 49.304255]
+                }
+            ],
+            [{
+                value: [0, 240],
+                name: "æ²³åŒ—",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|æ²³åŒ—}\n{l1|' + map21.num1 + '}   {l2|' + map21.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map21.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 10, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [114.502461, 38.045474]
+            },
+                {
+                    name: "æ²³åŒ—",
+                    coord: [135.472644, 49.304255]
+                }
+
+            ],
+            [{
+                symbol: 'none',
+                coord: [135.472644, 49.304255]
+            },
+                {
+                    symbol: 'none',
+                    coord: [148.472644, 49.304255]
+                }
+            ],
+            [{
+                value: [0, 240],
+                name: "å±±è¥¿",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|å±±è¥¿}\n{l1|' + map22.num1 + '}   {l2|' + map22.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map22.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 10, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [112.549248, 36.666014]
+            },
+
+                {
+                    name: "å±±è¥¿",
+                    coord: [140.472644, 33.231706]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [140.472644, 33.231706]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [155.472644, 33.231706]
+                }
+            ],
+            [{
+                value: [0, 15],
+                name: "äº‘å—",
+                label: {
+
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|äº‘å—}\n{l1|' + map23.num1 + '}   {l2|' + map23.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map23.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [-130, 0, 0, -130],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [102.712251, 25.040609]
+            },
+
+                {
+                    name: "äº‘å—",
+                    coord: [97.71434, 19.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [97.71434, 19.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [82.71434, 19.304255]
+                }
+            ],
+            [{
+                value: [0, 200],
+                name: "é’æµ·",
+                label: {
+                    normal: {
+                        mark: 'mark2',
+                        formatter: [
+                            '{Province|é’æµ·}\n{l1|' + map24.num1 + '}   {l2|' + map24.num2 + '}\n{l3|æ—©ç™Œæ•°}   {l4|è¡€æ£€æ•°}\n{l5|' + map24.bi + '%}\n'
+                        ].join('\n'),
+                        padding: [0, 0, 0, 0],
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 0],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 75,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                lineHeight: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderRadius: 15,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 75,
+                                height: 16,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                            },
+                            l5: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [55, 0, 8, 0],
+                                // padding: 5 ,
+                                fontSize: 50,
+                                height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                        }
+                    }
+                },
+                coord: [101.778916, 36.623178]
+            },
+
+                {
+                    name: "é’æµ·",
+                    coord: [80.71434, 33.304255]
+                }
+
+            ],
+            [
+
+                {
+
+                    symbol: 'none',
+                    coord: [80.71434, 33.304255]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [65.71434, 33.304255]
+                }
+            ]
+        ],
+        animation: false
+    }
+};
+
+var sequence = {};
+sequence['æ±Ÿè‹'] = series1;
+sequence['ä¸Šæµ·'] = series2;
+sequence['å¹¿ä¸œ'] = series3;
+sequence['é‡åº†'] = series4;
+sequence['å®å¤'] = series5;
+sequence['ç¦å»º'] = series6;
+sequence['æ²³å—'] = series7;
+sequence['å››å·'] = series8;
+sequence['åŒ—äº¬'] = series9;
+sequence['æ¹–åŒ—'] = series10;
+sequence['å±±ä¸œ'] = series11;
+sequence['å¹¿è¥¿'] = series12;
+sequence['å†…è’™å¤'] = series13;
+sequence['è¥¿è—'] = series14;
+sequence['å®‰å¾½'] = series15;
+sequence['ç”˜è‚ƒ'] = series16;
+sequence['é»‘é¾™æ±Ÿ'] = series17;
+sequence['æµ™æ±Ÿ'] = series18;
+sequence['æ±Ÿè¥¿'] = series19;
+sequence['é™•è¥¿'] = series20;
+sequence['æ²³åŒ—'] = series21;
+sequence['å±±è¥¿'] = series22;
+sequence['äº‘å—'] = series23;
+sequence['é’æµ·'] = series24;
+
+
+var pointData = [
+    {
+        province: 'æ±Ÿè‹'
+    },
+    {
+        province: 'ä¸Šæµ·'
+    },
+    {
+        province: 'å¹¿ä¸œ'
+    },
+    {
+        province: 'é‡åº†'
+    },
+    {
+        province: 'å®å¤'
+    },
+    {
+        province: 'ç¦å»º'
+    },
+    {
+        province: 'æ²³å—'
+    },
+    {
+        province: 'å››å·'
+    },
+    {
+        province: 'åŒ—äº¬'
+    },
+    {
+        province: 'æ¹–åŒ—'
+    },
+    {
+        province: 'å±±ä¸œ'
+    },
+    {
+        province: 'å¹¿è¥¿'
+    },
+    {
+        province: 'å†…è’™å¤'
+    },
+    {
+        province: 'è¥¿è—'
+    },
+    {
+        province: 'å®‰å¾½'
+    },
+    {
+        province: 'ç”˜è‚ƒ'
+    },
+    {
+        province: 'é»‘é¾™æ±Ÿ'
+    },
+    {
+        province: 'æµ™æ±Ÿ'
+    },
+    {
+        province: 'æ±Ÿè¥¿'
+    },
+    {
+        province: 'é™•è¥¿'
+    },
+    {
+        province: 'æ²³åŒ—'
+    },
+    {
+        province: 'å±±è¥¿'
+    },
+    {
+        province: 'äº‘å—'
+    },
+    {
+        province: 'é’æµ·'
+    }
+];
+
+var series = [series1, series2, series3, series4, series5, series6,
+    series7, series8, series9, series10, series11, series12,
+    series13, series14, series15, series16, series17, series18,
+    series19, series20, series21, series22, series23, series24];
+
+
+function handle() {
+    let pramAry = Array.prototype.slice.apply(arguments);
+    for (let i = 0, len = pramAry.length; i < len; i++) {
+        everyHandle(pramAry[i])
+    }
+
+}
+
+function everyHandle(obj) {
+    let len = obj.markLine.data.length;
+    for (let i = 0; i < len; i++) {
+        if (i % 2 === 1) {
+            let sublen = obj.markLine.data[i].length
+            // obj.markLine.data[i][sublen - 1].coord-=10
+        }
+    }
+}
+
+handle(series1, series2, series3, series4, series5, series6, series7, series8, series9, series10, series11, series12, series13, series14, series15, series16, series17, series18, series19, series20, series21, series22, series23, series24);
diff --git a/gicc/Scripts/chinaData2.js b/gicc/Scripts/chinaData2.js
new file mode 100644
index 0000000000000000000000000000000000000000..25de6c406cf02519dd1cf9f9925bb7014f7021d0
--- /dev/null
+++ b/gicc/Scripts/chinaData2.js
@@ -0,0 +1,4940 @@
+let mapp1 = {
+    // æ±Ÿè‹
+    sqnum: 24,
+    allnum: 10
+};
+//å¹¿ä¸œ
+let mapp2 = {
+    sqnum: 31,
+    allnum: 2
+};
+//æ¹–åŒ—çœ
+let mapp3 = {
+    sqnum: 17,
+    allnum: 0
+};
+// å±±ä¸œçœ
+let mapp4 = {
+    sqnum: 8,
+    allnum: 0
+};
+// åŒ—äº¬å¸‚
+let mapp5 = {
+    sqnum: 10,
+    allnum: 0
+};
+// é‡åº†å¸‚
+let mapp6 = {
+    sqnum: 8,
+    allnum: 1
+};
+// ä¸Šæµ·å¸‚
+let mapp7 = {
+    sqnum: 6,
+    allnum: 1
+};
+
+// ä½¿ç”¨åŽå°è¿”å›žæ•°æ®å¡«å……
+$.getJSON("http://172.30.2.105:2019/data-plat/screening/statistics", function (data) {
+    let screening = data.data;
+    $.each(pointData2, function (idx, item) {
+        var len = seriesArr[idx].data.length;
+        for (let i = 0; i < len; i++) {
+            let obj = screening.dtoList.filter(dto => dto.provinceName.includes(seriesArr[idx].markLine.data[i * 2][1].name));
+            var hospApply = obj[0] ? obj[0].hospApply : 0;
+            var screeningTotal = obj[0] ? obj[0].provinceScreeningTotal : 0;
+            var provinceName = seriesArr[idx].markLine.data[i * 2][1].name;
+            var mark = seriesArr[idx].markLine.data[i * 2][0].label.normal.mark;
+            var str = seriesArr[idx].markLine.data[i * 2][0].label.normal.formatter;
+            switch (mark) {
+                case 'mark1':
+                    str = [
+                        '{Province|'+provinceName+'}'
+                        + '\n{block10|}{l1|'+hospApply+'}   {l2|'+screeningTotal+'}																																								'
+                        + '\n{block10|}{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}																																								'
+                        + '\n{l6|}																																								'
+                        + ' \n'].join('\n');
+                    break;
+                case 'mark2':
+                    str = [
+                        '{block50|}{Province|'+provinceName+'}'
+                        + '\n{block100|}{l1|'+hospApply+'}   {l2|'+screeningTotal+'}'
+                        + '\n{block100|}{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}'
+                        + '\n{l6|}'
+                        + ' \n'].join('\n');
+                    break;
+                case 'mark3':
+                    str = ['{Province|'+provinceName+'}\n                                   {l1|'+hospApply+'}   {l2|'+screeningTotal+'}\n                                   {l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n\n\n{l6|}'].join('\n');
+                    break;
+                case 'mark4':
+                    str = ['{Province|'+provinceName+'}\n{l1|'+hospApply+'}   {l2|'+screeningTotal+'}                                  \n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}                                  \n\n\n{l6|}'].join('\n');
+                    break;
+                case 'mark5':
+                    str = [
+                        '{block100|}{Province|'+provinceName+'}'
+                        + '\n{block200|}{l1|'+hospApply+'}   {l2|'+screeningTotal+'}'
+                        + '\n{block200|}{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}'
+                        + '\n{block10|}'].join('\n');
+                    break;
+                case 'mark6':
+                    str = ['{Province|'+provinceName+'}\n{l1|'+hospApply+'}   {l2|'+screeningTotal+'}\n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n\n\n{l6|}'].join('\n');
+                    break;
+                case 'mark7':
+                    str = ['{Province|'+provinceName+'}\n                                 {l1|'+hospApply+'}   {l2|'+screeningTotal+'}\n                                 {l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n\n\n{l6|}'].join('\n');
+                    break;
+                case 'mark8':
+                    str = [
+                        '{block50|}{Province|'+provinceName+'}'
+                        + '\n{block100|}{l1|'+hospApply+'}   {l2|'+screeningTotal+'}'
+                        + '\n{block100|}{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}'
+                        + '\n{l6|}'].join('\n');
+                    break;
+                case 'mark9':
+                    str = ['{Province|'+provinceName+'}\n{l1|'+hospApply+'}   {l2|'+screeningTotal+'}                                   \n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}                                   \n\n\n{l6|}'].join('\n');
+                    break;
+                default:
+                    break;
+            }
+            seriesArr[idx].markLine.data[i * 2][0].label.normal.formatter = str;
+
+
+
+
+
+
+
+
+
+
+
+            // if (mark === 'mark1') {
+            //     str = [
+            //         '{Province|' + provinceName + '}'
+            //         + '\n{block10|}{l1|' + hospApply + '}   {l2|' + screeningTotal + '}																																								'
+            //         + '\n{block10|}{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}																																								'
+            //         + '\n{l6|}																																								'
+            //         + ' \n'].join('\n');
+            // } else if (mark === 'mark2') {
+            //     str = [
+            //         '{block100|}{Province|' + provinceName + '}'
+            //         + '\n{block200|}{l1|' + hospApply + '}   {l2|' + screeningTotal + '}'
+            //         + '\n{block200|}{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}'
+            //         + '\n{block10|}'].join('\n');
+            // } else if (mark === 'mark3') {
+            //     str = [
+            //         '{block50|}{Province|' + provinceName + '}'
+            //         + '\n{block100|}{l1|' + hospApply + '}   {l2|' + screeningTotal + '}'
+            //         + '\n{block100|}{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}'
+            //         + '\n{l6|}'
+            //         + ' \n'].join('\n');
+            // } else if (mark === 'mark4') {
+            //     str = ['{Province|' + provinceName + '}\n{l1|' + hospApply + '}   {l2|' + screeningTotal + '}\n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n\n\n{l6|}'].join('\n');
+            // } else if (mark === 'mark5') {
+            //     str = ['{Province|' + provinceName + '}\n                                 {l1|' + hospApply + '}   {l2|' + screeningTotal + '}\n                                 {l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n\n\n{l6|}'].join('\n');
+            // } else if (mark === 'mark6') {
+            //     str = [
+            //         '{block50|}{Province|' + provinceName + '}'
+            //         + '\n{block100|}{l1|' + hospApply + '}   {l2|' + screeningTotal + '}'
+            //         + '\n{block100|}{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}'
+            //         + '\n{l6|}'].join('\n');
+            // } else if (mark === 'mark7') {
+            //     str = ['{Province|' + provinceName + '}\n{l1|' + hospApply + '}   {l2|' + screeningTotal + '}                                   \n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}                                   \n\n\n{l6|}'].join('\n');
+            // } else if (mark === 'mark8') {
+            //     str = ['{block100|}{Province|' + provinceName + '}\n{block200|}{l1|' + hospApply + '}   {l2|' + screeningTotal + '}\n{block200|}{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n{l6|}'].join('\n');
+            // } else {
+            //     str = seriesArr[idx].markLine.data[i * 2][0].label.normal.formatter;
+            // }
+            // seriesArr[idx].markLine.data[i * 2][0].label.normal.formatter = str;
+        }
+    });
+});
+
+
+var series11 = {
+    name: '1',
+    type: 'map',
+    zoom: 0.7,
+    top: '13%',
+    left: '30%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [
+        {
+            name: 'æ±Ÿè‹',
+            selected: true
+
+        },
+        {
+            name: 'å¹¿ä¸œ',
+            selected: true
+
+        },
+        {
+            name: 'æ¹–åŒ—',
+            selected: true
+
+        },
+        {
+            name: 'å±±ä¸œ',
+            selected: true
+
+        }
+
+    ],
+
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [
+                {
+                    value: [17, 10],
+                    name: "æ±Ÿè‹çœ",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            mark: 'mark1',
+                            formatter: [
+                                '{Province|æ±Ÿè‹}'
+                                + '\n{block10|}{l1|32}   {l2|23}																																								'
+                                + '\n{block10|}{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}																																								'
+                                + '\n{l6|}																																								'
+                                + ' \n'].join('\n'),
+                            // '{Province|æ±Ÿè‹}\n{l1|17}   {l2|11}\n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 0],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                block10: {padding: [0, 0, 0, 0],},
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [52, 0, 20, 0],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    //borderRadius: 15,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderRadius: 15,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [118.767413, 32.041544]
+                },
+
+                {
+                    name: "æ±Ÿè‹çœ",
+                    coord: [135.767413, 36.041544]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [135.767413, 36.041544]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [150.767413, 36.041544]
+                }
+            ],
+            //-------------------------------------------
+            [
+                {
+                    value: [13, 2],
+                    name: "å¹¿ä¸œçœ",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            mark: 'mark1',
+                            formatter: [
+                                '{Province|å¹¿ä¸œ}'
+                                + '\n{block10|}{l1|61}   {l2|43}																																								'
+                                + '\n{block10|}{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}																																								'
+                                + '\n{l6|}																																								'
+                                + ' \n'].join('\n'),
+                            //'{Province|å¹¿ä¸œ}\n{l1|11}   {l2|1}\n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 0],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [57, 0, 23, 10],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                            }
+                        }
+                    },
+                    coord: [113.280637, 23.125178]
+                },
+
+                {
+                    name: "å¹¿ä¸œçœ",
+                    coord: [130.280637, 17.125178]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [130.280637, 17.125178]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [145.280637, 17.125178]
+                }
+            ],
+
+            //-------------------------------------------
+            [
+                {
+                    value: [11, 0],
+                    name: "æ¹–åŒ—çœ",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            mark: 'mark1',
+                            formatter: [
+                                '{Province|æ¹–åŒ—}'
+                                + '\n{block10|}{l1|22}   {l2|15}																																								'
+                                + '\n{block10|}{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}																																								'
+                                + '\n{l6|}																																								'
+                                + ' \n'].join('\n'),
+
+                            //'{Province|æ¹–åŒ—}\n{l1|11}   {l2|0}\n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 18],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                block10: {padding: [0, 0, 0, 18],},
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [53, 0, 28, 0],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    //borderRadius: 15,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderRadius: 15,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [114.298572, 30.584355]
+                },
+
+                {
+                    name: "æ¹–åŒ—çœ",
+                    coord: [98.773556, 20.682906]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [98.773556, 20.682906]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [83.62199, 20.682906]
+                }
+            ],
+
+            //-------------------------------------------
+            [
+                {
+                    value: [8, 0],
+                    name: "å±±ä¸œçœ",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            mark: 'mark1',
+                            formatter: [
+                                '{Province|å±±ä¸œ}'
+                                + '\n{block10|}{l1|30}   {l2|15}																																								'
+                                + '\n{block10|}{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}																																								'
+                                + '\n{l6|}																																								'
+                                + ' \n'].join('\n'),
+
+//							   '{Province|å±±ä¸œ}\n{l1|8}   {l2|0}                                  \n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}                                  \n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 18],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                block10: {padding: [0, 0, 0, 18],},
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [49, 0, 18, 0],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    //borderRadius: 15,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderRadius: 15,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [117.000923, 36.675807]
+                },
+
+                {
+                    name: "å±±ä¸œçœ",
+                    coord: [101.158659, 50.249382]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [101.158659, 50.249382]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [86.158659, 50.249382]
+                }
+            ]
+
+
+        ],
+        animation: false
+    }
+};
+var series21 = {
+    name: '1',
+    type: 'map',
+    zoom: 0.7,
+    top: '13%',
+    left: '30%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [
+        {
+            name: 'åŒ—äº¬',
+            selected: true
+
+        },
+        {
+            name: 'ä¸Šæµ·',
+            selected: true
+
+        },
+        {
+            name: 'é‡åº†',
+            selected: true
+
+        },
+        {
+            name: 'æ–°ç–†',
+            selected: true
+
+        },
+
+    ],
+
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [
+                {
+                    value: [7, 0],
+                    name: "åŒ—äº¬å¸‚",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            mark: 'mark5',
+                            formatter: [
+                                '{block100|}{Province|åŒ—äº¬}'
+                                + '\n{block200|}{l1|11}   {l2|4}'
+                                + '\n{block200|}{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}'
+                                + '\n{block10|}'].join('\n'),
+
+//							   '{Province|åŒ—äº¬}\n                                        {l1|6}   {l2|0}\n                                        {l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 50, 30, 0],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                block100: {padding: [0, 80, 0, 0],},
+                                block200: {padding: [0, 110, 0, 0],},
+                                block10: {padding: [-5, 0, 0, 0],},
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    //borderRadius: 15,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16, lineHeight: 16,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                },
+
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderRadius: 15,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 54,
+                                    height: 16,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [55, 0, 8, 0],
+                                    // padding: 5 ,
+                                    fontSize: 50, height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                            }
+                        }
+                    },
+                    coord: [116.405285, 39.904989]
+                },
+
+                {
+                    name: "åŒ—äº¬å¸‚",
+                    coord: [120.854377, 45.965333]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [120.854377, 45.965333]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [136.854377, 45.965333]
+                }
+            ],
+            //-------------------------------------------
+            [
+                {
+                    value: [5, 1],
+                    name: "ä¸Šæµ·å¸‚",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            mark: 'mark5',
+                            formatter: [
+                                '{block100|}{Province|ä¸Šæµ·}'
+                                + '\n{block200|}{l1|17}   {l2|10}'
+                                + '\n{block200|}{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}'
+                                + '\n{block10|}'].join('\n'),
+
+//							   '{Province|ä¸Šæµ·}\n{l1|5}   {l2|1}\n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 50, 30, 0],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                block100: {padding: [0, 0, 0, 0],},
+                                block200: {padding: [0, 0, 0, 0],},
+                                block10: {padding: [123, 0, 0, 0],},
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    //borderRadius: 15,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16, lineHeight: 16,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                },
+
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderRadius: 15,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 54,
+                                    height: 16,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [55, 0, 8, 0],
+                                    // padding: 5 ,
+                                    fontSize: 50, height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                            }
+                        }
+                    },
+                    coord: [121.472644, 31.231706]
+                },
+
+                {
+                    name: "ä¸Šæµ·å¸‚",
+                    coord: [136.472644, 31.231706]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [136.472644, 31.231706]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [151.472644, 31.231706]
+                }
+            ],
+
+            //-------------------------------------------
+            [
+                {
+                    value: [6, 1],
+                    name: "é‡åº†å¸‚",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            mark: 'mark2',
+                            formatter: [
+                                '{block50|}{Province|é‡åº†}'
+                                + '\n{block100|}{l1|8}   {l2|3}'
+                                + '\n{block100|}{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}'
+                                + '\n{l6|}'
+                                + ' \n'].join('\n'),
+//							   '{Province|é‡åº†}\n{l1|5}   {l2|0}\n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 0],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                block50: {padding: [0, 0, 0, 320],},
+                                block100: {padding: [0, 0, 0, 400],},
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [61, 0, 18, 10],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [106.504962, 29.533155]
+                },
+
+                {
+                    name: "é‡åº†å¸‚",
+                    coord: [86.596129, 22.73058]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [86.596129, 22.73058]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [71.596129, 22.73058]
+                }
+            ],
+
+            //-------------------------------------------
+            [
+                {
+                    value: [4, 0],
+                    name: "æ–°ç–†",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            mark: 'mark2',
+                            formatter: [
+                                '{block50|}{Province|æ–°ç–†}'
+                                + '\n{block100|}{l1|4}   {l2|0}'
+                                + '\n{block100|}{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}'
+                                + '\n{l6|}'
+                                + ' \n'].join('\n'),
+
+//							   '{Province|æ–°ç–†}\n{l1|4}   {l2|0}\n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 0],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                block50: {padding: [0, 0, 0, 320],},
+                                block100: {padding: [0, 0, 0, 400],},
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [53, 0, 18, 10],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [87.617733, 43.792818]
+                },
+
+                {
+                    name: "æ–°ç–†",
+                    coord: [76.285513, 47.390485]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [76.285513, 47.390485]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [61.285513, 47.390485]
+                }
+            ]
+
+
+        ],
+        animation: false
+    }
+};
+var series31 = {
+    name: '1',
+    type: 'map',
+    zoom: 0.7,
+    top: '13%',
+    left: '30%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [
+        {
+            name: 'äº‘å—',
+            selected: true
+
+        },
+        {
+            name: 'å®‰å¾½',
+            selected: true
+
+        },
+        {
+            name: 'ç¦å»º',
+            selected: true
+
+        },
+        {
+            name: 'æ¹–å—',
+            selected: true
+
+        },
+
+    ],
+
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [
+                {
+                    value: [4, 0],
+                    name: "äº‘å—çœ",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            mark: 'mark6',
+                            formatter: ['{Province|äº‘å—}\n{l1|12}   {l2|6}\n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 0],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [50, 0, 18, 10],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [102.712251, 25.040609]
+                },
+
+                {
+                    name: "äº‘å—çœ",
+                    coord: [94.773556, 20.682906]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [94.773556, 20.682906]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [79.773556, 20.682906]
+                }
+            ],
+            //-------------------------------------------
+            [
+                {
+                    value: [4, 0],
+                    name: "å®‰å¾½çœ",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            mark: 'mark6',
+                            formatter: ['{Province|å®‰å¾½}\n{l1|12}   {l2|9}\n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 0],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [41, 0, 18, 10],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [117.283042, 31.86119]
+                },
+
+                {
+                    name: "å®‰å¾½çœ",
+                    coord: [135.767413, 38.041544]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [135.767413, 38.041544]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [150.767413, 38.041544]
+                }
+            ],
+
+            //-------------------------------------------
+            [
+                {
+                    value: [4, 0],
+                    name: "ç¦å»ºçœ",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            mark: 'mark7',
+                            formatter: ['{Province|ç¦å»º}\n                                 {l1|12}   {l2|7}\n                                 {l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 118],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [53, 0, 18, 10],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [119.306239, 26.075302]
+                },
+
+                {
+                    name: "ç¦å»ºçœ",
+                    coord: [130.280637, 17.125178]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [130.280637, 17.125178]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [146.280637, 17.125178]
+                }
+            ],
+
+            //-------------------------------------------
+            [
+                {
+                    value: [3, 0],
+                    name: "æ¹–å—çœ",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            mark: 'mark8',
+                            formatter: [
+                                '{block50|}{Province|æ¹–å—}'
+                                + '\n{block100|}{l1|13}   {l2|3}'
+                                + '\n{block100|}{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}'
+                                + '\n{l6|}'].join('\n'),
+//							   '{Province|æ¹–å—}\n{l1|3}   {l2|0}                                 \n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}                                 \n'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 0],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                block50: {padding: [0, 0, 0, -192],},
+                                block100: {padding: [0, 0, 0, -115],},
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [0, 0, -43, 0],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [112.982279, 28.19409]
+                },
+
+                {
+                    name: "æ¹–å—çœ",
+                    coord: [101.158659, 45.249382]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [101.158659, 45.249382]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [86.158659, 45.249382]
+                }
+            ]
+
+
+        ],
+        animation: false
+    }
+};
+var series41 = {
+    name: '1',
+    type: 'map',
+    zoom: 0.7,
+    top: '13%',
+    left: '30%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [
+        {
+            name: 'å››å·',
+            selected: true
+
+        },
+        {
+            name: 'æµ™æ±Ÿ',
+            selected: true
+
+        },
+        {
+            name: 'ç”˜è‚ƒ',
+            selected: true
+
+        },
+        {
+            name: 'æ²³å—',
+            selected: true
+
+        },
+
+    ],
+
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [
+                {
+                    value: [4, 0],
+                    name: "å››å·çœ",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            mark: 'mark9',
+                            formatter: ['{Province|å››å·}\n{l1|36}   {l2|25}                                   \n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}                                   \n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 0],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [53, 0, 18, 10],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [104.065735, 30.659462]
+                },
+
+                {
+                    name: "å››å·çœ",
+                    coord: [91.886421, 18.645686]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [91.886421, 18.645686]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [76.886421, 18.645686]
+                }
+            ],
+            //-------------------------------------------
+            [
+                {
+                    value: [3, 0],
+                    name: "æµ™æ±Ÿçœ",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            mark: 'mark6',
+                            formatter: ['{Province|æµ™æ±Ÿ}\n{l1|23}   {l2|11}\n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 0],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [50, 0, 18, 10],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [120.153576, 30.287459]
+                },
+
+                {
+                    name: "æµ™æ±Ÿçœ",
+                    coord: [127.650766, 26.695733]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [127.650766, 26.695733]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [142.650766, 26.695733]
+                }
+            ],
+
+            //-------------------------------------------
+            [
+                {
+                    value: [2, 0],
+                    name: "ç”˜è‚ƒçœ",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            mark: 'mark9',
+                            formatter: ['{Province|ç”˜è‚ƒ}\n{l1|3}   {l2|1}                                   \n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}                                   \n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 0],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [39, 0, 18, 10],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [103.823557, 36.058039]
+                },
+
+                {
+                    name: "ç”˜è‚ƒçœ",
+                    coord: [89.678746, 45.353253]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [89.678746, 45.353253]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [74.678746, 45.353253]
+                }
+            ],
+
+            //-------------------------------------------
+            [
+                {
+                    value: [2, 0],
+                    name: "æ²³å—çœ",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            formatter: ['{block100|}{Province|æ²³å—}\n{block200|}{l1|17}   {l2|9}\n{block200|}{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n{l6|}'].join('\n'),
+//							   '{Province|æ²³å—}\n                                   {l1|3}   {l2|0}\n                                   {l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 0],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                block100: {padding: [0, 35, 0, 0]},
+                                block200: {padding: [0, 120, 0, 0]},
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [0, 0, -43, 0],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [113.665412, 34.757975]
+                },
+
+                {
+                    name: "æ²³å—çœ",
+                    coord: [119.261599, 44.562738]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [119.261599, 44.562738]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [134.261599, 44.562738]
+                }
+            ]
+
+
+        ],
+        animation: false
+    }
+};
+var series51 = {
+    name: '1',
+    type: 'map',
+    zoom: 0.7,
+    top: '13%',
+    left: '30%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [
+        {
+            name: 'é»‘é¾™æ±Ÿ',
+            selected: true
+
+        },
+        {
+            name: 'å‰æž—',
+            selected: true
+
+        },
+        {
+            name: 'å®å¤',
+            selected: true
+
+        },
+        {
+            name: 'é™•è¥¿',
+            selected: true
+
+        },
+
+    ],
+
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [
+                {
+                    value: [3, 0],
+                    name: "é»‘é¾™æ±Ÿçœ",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            mark: 'mark3',
+                            formatter: ['{Province|é»‘é¾™æ±Ÿ}\n                                   {l1|17}   {l2|13}\n                                   {l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 125],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [38, 0, 18, 10],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [126.642464, 45.756967]
+                },
+
+                {
+                    name: "é»‘é¾™æ±Ÿçœ",
+                    coord: [134.347382, 52.736071]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [134.347382, 52.736071]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [149.347382, 52.736071]
+                }
+            ],
+            //-------------------------------------------
+            [
+                {
+                    value: [2, 0],
+                    name: "å‰æž—çœ",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            mark: 'mark3',
+                            formatter: ['{Province|å‰æž—}\n                                   {l1|6}   {l2|0}\n                                   {l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 125],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [53, 0, 18, 10],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [125.3245, 43.886841]
+                },
+
+                {
+                    name: "å‰æž—çœ",
+                    coord: [134.788917, 37.913398]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [134.788917, 37.913398]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [149.788917, 37.913398]
+                }
+            ],
+
+            //-------------------------------------------
+            [
+                {
+                    value: [2, 0],
+                    name: "å®å¤",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            mark: 'mark9',
+                            formatter: ['{Province|å®å¤}\n{l1|3}   {l2|2}                                   \n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}                                   \n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 0],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [37, 0, 18, 10],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [106.278179, 38.46637]
+                },
+
+                {
+                    name: "å®å¤",
+                    coord: [94.895529, 46.848916]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [94.895529, 46.848916]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [79.895529, 46.848916]
+                }
+            ],
+
+            //-------------------------------------------
+            [
+                {
+                    value: [2, 0],
+                    name: "é™•è¥¿çœ",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            mark: 'mark9',
+                            formatter: ['{Province|é™•è¥¿}\n{l1|11}   {l2|5}                                   \n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}                                   \n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 0],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [53, 0, 18, 10],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [108.948024, 34.263161]
+                },
+
+                {
+                    name: "é™•è¥¿çœ",
+                    coord: [89.721864, 19.043659]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [89.721864, 19.043659]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [74.721864, 19.043659]
+                }
+            ]
+
+
+        ],
+        animation: false
+    }
+};
+var series61 = {
+    name: '1',
+    type: 'map',
+    zoom: 0.7,
+    top: '13%',
+    left: '30%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [
+        {
+            name: 'å¹¿è¥¿',
+            selected: true
+
+        },
+        {
+            name: 'è´µå·ž',
+            selected: true
+
+        },
+        {
+            name: 'æ²³åŒ—',
+            selected: true
+
+        },
+        {
+            name: 'æ±Ÿè¥¿',
+            selected: true
+
+        }
+
+    ],
+
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [
+                {
+                    value: [1, 0],
+                    name: "å¹¿è¥¿",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            formatter: ['{Province|å¹¿è¥¿}\n{l1|11}   {l2|6}                                  \n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}                                  \n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 0],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [53, 0, 18, 10],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [108.320004, 22.82402]
+                },
+
+                {
+                    name: "å¹¿è¥¿",
+                    coord: [98.864302, 17.095381]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [98.864302, 17.095381]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [83.864302, 17.095381]
+                }
+            ],
+            //-------------------------------------------
+            [
+                {
+                    value: [1, 0],
+                    name: "è´µå·žçœ",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            mark: 'mark4',
+                            formatter: ['{Province|è´µå·ž}\n{l1|5}   {l2|3}                                  \n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}                                  \n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 0],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [38, 0, 18, 10],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [106.713478, 26.578343]
+                },
+
+                {
+                    name: "è´µå·žçœ",
+                    coord: [87.749248, 38.927463]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [87.749248, 38.927463]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [72.749248, 38.927463]
+                }
+            ],
+
+            //-------------------------------------------
+            [
+                {
+                    value: [1, 0],
+                    name: "æ²³åŒ—çœ",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            formatter: ['{Province|æ²³åŒ—}\n                                  {l1|12}   {l2|7}\n                                  {l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 120],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [38, 0, 18, 10],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [114.502461, 38.045474]
+                },
+
+                {
+                    name: "æ²³åŒ—çœ",
+                    coord: [133.529852, 52.025402]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [133.529852, 52.025402]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [148.529852, 52.025402]
+                }
+            ],
+
+            //-------------------------------------------
+            [
+                {
+                    value: [1, 0],
+                    name: "æ±Ÿè¥¿çœ",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            mark: 'mark6',
+                            formatter: ['{Province|æ±Ÿè¥¿}\n{l1|16}   {l2|15}\n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 0],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [43, 0, 18, 10],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [115.892151, 28.676493]
+                },
+
+                {
+                    name: "æ±Ÿè¥¿çœ",
+                    coord: [124.265664, 28.676493]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [124.265664, 28.676493]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [139.265664, 28.676493]
+                }
+            ]
+
+
+        ],
+        animation: false
+    }
+};
+var series71 = {
+    name: '1',
+    type: 'map',
+    zoom: 0.7,
+    top: '13%',
+    left: '30%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [
+        {
+            name: 'è¾½å®',
+            selected: true
+
+        },
+        {
+            name: 'å±±è¥¿',
+            selected: true
+
+        },
+        {
+            name: 'é’æµ·',
+            selected: true
+
+        },
+        {
+            name: 'å†…è’™å¤',
+            selected: true
+
+        }
+
+    ],
+
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [
+                {
+                    value: [1, 0],
+                    name: "è¾½å®çœ",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            formatter: ['{Province|è¾½å®}\n                                  {l1|12}   {l2|2}\n                                  {l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 120],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [38, 0, 18, 10],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [123.429096, 41.796767]
+                },
+
+                {
+                    name: "è¾½å®çœ",
+                    coord: [133.979436, 49.351453]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [133.979436, 49.351453]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [148.979436, 49.351453]
+                }
+            ],
+            //-------------------------------------------
+            [
+                {
+                    value: [1, 0],
+                    name: "å†…è’™å¤",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            formatter: ['{block50|}{Province|å†…è’™å¤}\n{block100|}{l1|21}   {l2|15}\n{block100|}{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                block50: {padding: [0, 0, 0, -200]},
+                                block100: {padding: [0, 0, 0, -120]},
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 0],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l6: {padding: [-5, 0, 0, 0]},
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [111.670801, 40.818311]
+                },
+
+                {
+                    name: "å†…è’™å¤",
+                    coord: [106.309902, 49.829852]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [106.309902, 49.829852]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [91.309902, 49.829852]
+                }
+            ],
+
+            [
+                {
+                    value: [1, 0],
+                    name: "é’æµ·çœ",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            formatter: ['{Province|é’æµ·}\n{l1|3}   {l2|3}                                  \n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}                                  \n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 0],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [53, 0, 18, 10],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [98.778916, 36.623178]
+                },
+
+                {
+                    name: "é’æµ·çœ",
+                    coord: [81.289578, 24.964161]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [81.289578, 24.964161]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [66.289578, 24.964161]
+                }
+            ],
+            [
+                {
+                    value: [1, 0],
+                    name: "å±±è¥¿",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            mark: 'mark6',
+                            formatter: ['{Province|å±±è¥¿}\n{l1|18}   {l2|10}\n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 0],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [43, 0, 18, 10],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+                            }
+                        }
+                    },
+                    coord: [112.549248, 37.857014]
+                },
+
+                {
+                    name: "å±±è¥¿",
+                    coord: [130.265664, 28.676493]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [130.265664, 28.676493]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [145.265664, 28.676493]
+                }
+            ]
+
+
+        ],
+        animation: false
+    }
+};
+var series81 = {
+    name: '1',
+    type: 'map',
+    zoom: 0.7,
+    top: '13%',
+    left: '30%',
+    mapType: 'china',
+    clickable: false,
+    label: {
+        normal: {
+            show: false
+        },
+        emphasis: {
+            show: false
+        }
+    },
+    itemStyle: {
+
+        normal: {
+            areaColor: '#5f3776',
+            borderColor: '#643d7a',
+            borderWidth: 1,
+            //shadowColor:'rgba(121, 59, 136, 0.3)',          //é˜´å½±é¢œè‰²
+            // shadowOffsetX:10,            //é˜´å½±æ°´å¹³æ–¹å‘ä¸Šçš„åç§»è·ç¦»ã€‚
+            // shadowOffsetY:8,            //é˜´å½±åž‚ç›´æ–¹å‘ä¸Šçš„åç§»è·ç¦»
+            // shadowBlur:2,
+
+        },
+        emphasis: {
+            areaColor: '#c19fd2'
+        }
+    },
+    data: [
+        {
+            name: 'æµ·å—',
+            selected: true
+        },
+        {
+            name: 'å‰æž—',
+            selected: true
+        },
+        {
+            name: 'å¤©æ´¥',
+            selected: true
+        }
+    ],
+
+    markLine: {
+        symbol: ['image://spot.png', 'none'],
+        symbolSize: 20,
+        silent: true,
+        itemStyle: {
+            normal: {
+                color: 'black',
+                lineStyle: {
+                    type: 'solid',
+                    width: 1,
+                    color: '#fff',
+                    //shadowColor: 'rgba(255,255,255,1.0)',
+                    //shadowBlur: 5,
+                    //shadowOffsetX: 30,
+                    //shadowOffsetY: 30,
+                },
+            }
+        },
+        data: [
+            [
+                {
+                    value: [1, 0],
+                    name: "æµ·å—çœ",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            mark: 'mark6',
+                            formatter: ['{Province|æµ·å—}\n{l1|1}   {l2|1}\n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 0, 0],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [38, 0, 18, 10],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [110.33119, 20.031971]
+                },
+
+                {
+                    name: "æµ·å—çœ",
+                    coord: [123.979436, 15.351453]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [123.979436, 15.351453]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [143.979436, 15.351453]
+                }
+            ],
+            [{
+                value: [1, 0],
+                name: "å‰æž—",
+                label: {
+                    textStyle: {
+                        align: 'left',
+                        verticalAlign: 'bottom',
+                        baseline: 'bottom',
+                        fontSize: 60,
+                        fontFamily: 'sl'
+                    },
+                    normal: {
+                        formatter: ['{Province|å‰æž—}\n                                  {l1|6}   {l2|0}\n                                  {l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n\n\n{l6|}'].join('\n'),
+
+                        position: 'end',
+                        distance: 20,
+                        rich: {
+                            Province: {
+                                align: 'left',
+                                padding: [8, 0, 30, 120],
+                                fontSize: 20,
+                                fontFamily: 'myFourthFont',
+                            },
+                            l6: {
+                                align: 'left',
+
+                                color: '#fff',
+                                padding: [38, 0, 18, 10],
+                                // padding: 5 ,
+                                //lineHeight:1,
+                                fontSize: 50, //height: 66,
+                                fontFamily: 'myFirstFont',
+                            },
+                            l1: {
+                                align: 'center',
+                                //verticalAlign:'middle',
+                                // backgroundColor: '#F86A3E',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 50,
+                                height: 30,
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l2: {
+                                align: 'center',
+                                //verticalAlign:'bottom',
+                                //backgroundColor: '#F41485',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 58,
+                                height: 30,
+
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFirstFont',
+                            },
+                            l3: {
+
+                                align: 'center',
+                                backgroundColor: 'rgba(145,192,192,0.6)',
+                                color: '#fff',
+                                //borderWidth: 1,
+                                padding: [0, 0, 5, 0],
+                                fontSize: 32,
+                                width: 54,
+                                height: 30,
+                                borderWidth: 1,
+                                borderColor: 'rgba(145,192,192,0.1)',
+                                fontFamily: 'myFirstFont',
+                                // padding: [5, 13, 5, 13],
+                            },
+                            l4: {
+                                align: 'center',
+                                backgroundColor: 'rgba(248,106,62,0.6)',
+                                color: '#fff',
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 50,
+                                height: 16,
+                                borderWidth: 1,
+                                borderColor: 'rgba(248,106,62,0.1)',
+                                fontFamily: 'myFourthFont',
+                                // padding: [5, 13, 5, 13],
+                            },
+                            l5: {
+                                align: 'center',
+                                backgroundColor: 'rgba(244,20,133,0.6)',
+                                color: '#fff',
+                                borderRadius: 0,
+                                padding: [5, 0, 0, 0],
+                                fontSize: 12,
+                                width: 58,
+                                height: 16,
+                                borderWidth: 1,
+                                borderColor: 'rgba(244,20,133,0.1)',
+                                fontFamily: 'myFourthFont',
+                                //padding: [5, 13, 5, 13],
+                            },
+
+                        }
+                    }
+                },
+                coord: [125.3245, 43.886841]
+            },
+
+                {
+                    name: "å‰æž—",
+                    coord: [133.529852, 52.025402]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [133.529852, 52.025402]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [148.529852, 52.025402]
+                }
+            ],
+            [
+                {
+                    value: [4, 0],
+                    name: "å¤©æ´¥",
+                    label: {
+                        textStyle: {
+                            align: 'left',
+                            verticalAlign: 'bottom',
+                            baseline: 'bottom',
+                            fontSize: 60,
+                            fontFamily: 'sl'
+                        },
+                        normal: {
+                            mark: 'mark2',
+                            formatter: [
+                                '{block50|}{Province|å¤©æ´¥}'
+                                + '\n{block100|}{l1|1}   {l2|0}'
+                                + '\n{block100|}{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}'
+                                + '\n{l6|}'
+                                + ' \n'].join('\n'),
+
+//							   '{Province|æ–°ç–†}\n{l1|4}   {l2|0}\n{l4|ç”³è¯·æ•°}   {l5|ç›æŸ¥æ•°}\n\n\n{l6|}'].join('\n'),
+
+                            position: 'end',
+                            distance: 20,
+                            rich: {
+                                Province: {
+                                    align: 'left',
+                                    padding: [8, 0, 30, 0],
+                                    fontSize: 20,
+                                    fontFamily: 'myFourthFont',
+                                },
+                                block50: {padding: [0, 0, 0, 320],},
+                                block100: {padding: [0, 0, 0, 400],},
+                                l6: {
+                                    align: 'left',
+
+                                    color: '#fff',
+                                    padding: [53, 0, 18, 10],
+                                    // padding: 5 ,
+                                    //lineHeight:1,
+                                    fontSize: 50, //height: 66,
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l1: {
+                                    align: 'center',
+                                    //verticalAlign:'middle',
+                                    // backgroundColor: '#F86A3E',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 50,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l2: {
+                                    align: 'center',
+                                    //verticalAlign:'bottom',
+                                    //backgroundColor: '#F41485',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 58,
+                                    height: 30,
+
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                },
+                                l3: {
+
+                                    align: 'center',
+                                    backgroundColor: 'rgba(145,192,192,0.6)',
+                                    color: '#fff',
+                                    //borderWidth: 1,
+                                    padding: [0, 0, 5, 0],
+                                    fontSize: 32,
+                                    width: 54,
+                                    height: 30,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(145,192,192,0.1)',
+                                    fontFamily: 'myFirstFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l4: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(248,106,62,0.6)',
+                                    color: '#fff',
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 50,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(248,106,62,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    // padding: [5, 13, 5, 13],
+                                },
+                                l5: {
+                                    align: 'center',
+                                    backgroundColor: 'rgba(244,20,133,0.6)',
+                                    color: '#fff',
+                                    borderRadius: 0,
+                                    padding: [5, 0, 0, 0],
+                                    fontSize: 12,
+                                    width: 58,
+                                    height: 16,
+                                    borderWidth: 1,
+                                    borderColor: 'rgba(244,20,133,0.1)',
+                                    fontFamily: 'myFourthFont',
+                                    //padding: [5, 13, 5, 13],
+                                },
+
+                            }
+                        }
+                    },
+                    coord: [117.190182, 39.125596]
+                },
+
+                {
+                    name: "å¤©æ´¥",
+                    coord: [76.285513, 47.390485]
+                }
+
+            ], [
+
+                {
+
+                    symbol: 'none',
+                    coord: [76.285513, 47.390485]
+                },
+                {
+
+                    symbol: 'none',
+                    coord: [61.285513, 47.390485]
+                }
+            ]
+
+        ],
+        animation: false
+    }
+};
+
+var seriesArr = [series11, series21, series31, series41, series51, series61, series71, series81];
+
+var sequence2 = {};
+sequence2['1'] = series11;
+sequence2['2'] = series21;
+sequence2['3'] = series31;
+sequence2['4'] = series41;
+sequence2['5'] = series51;
+sequence2['6'] = series61;
+sequence2['7'] = series71;
+sequence2['8'] = series81;
+
+
+var pointData2 = [
+    {province: '1'},
+    {province: '2'},
+    {province: '3'},
+    {province: '4'},
+    {province: '5'},
+    {province: '6'},
+    {province: '7'},
+    {province: '8'},
+];
+
diff --git a/gicc/Scripts/echarts.js b/gicc/Scripts/echarts.js
new file mode 100644
index 0000000000000000000000000000000000000000..c1a3ef2c8e57528ccb0d2b9ef841ce7dfbd68127
--- /dev/null
+++ b/gicc/Scripts/echarts.js
@@ -0,0 +1,90302 @@
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+	typeof define === 'function' && define.amd ? define(['exports'], factory) :
+	(factory((global.echarts = {})));
+}(this, (function (exports) { 'use strict';
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// (1) The code `if (__DEV__) ...` can be removed by build tool.
+// (2) If intend to use `__DEV__`, this module should be imported. Use a global
+// variable `__DEV__` may cause that miss the declaration (see #6535), or the
+// declaration is behind of the using position (for example in `Model.extent`,
+// And tools like rollup can not analysis the dependency if not import).
+
+var dev;
+
+// In browser
+if (typeof window !== 'undefined') {
+    dev = window.__DEV__;
+}
+// In node
+else if (typeof global !== 'undefined') {
+    dev = global.__DEV__;
+}
+
+if (typeof dev === 'undefined') {
+    dev = true;
+}
+
+var __DEV__ = dev;
+
+/**
+ * zrender: ç”Ÿæˆå”¯ä¸€id
+ *
+ * @author errorrik (errorrik@gmail.com)
+ */
+
+var idStart = 0x0907;
+
+var guid = function () {
+    return idStart++;
+};
+
+/**
+ * echartsè®¾å¤‡çŽ¯å¢ƒè¯†åˆ«
+ *
+ * @desc echartsåŸºäºŽCanvasï¼Œçº¯Javascriptå›¾è¡¨åº“ï¼Œæä¾›ç›´è§‚ï¼Œç”ŸåŠ¨ï¼Œå¯äº¤äº’ï¼Œå¯ä¸ªæ€§åŒ–å®šåˆ¶çš„æ•°æ®ç»Ÿè®¡å›¾è¡¨ã€‚
+ * @author firede[firede@firede.us]
+ * @desc thanks zepto.
+ */
+
+var env = {};
+
+if (typeof wx === 'object' && typeof wx.getSystemInfoSync === 'function') {
+    // In Weixin Application
+    env = {
+        browser: {},
+        os: {},
+        node: false,
+        wxa: true, // Weixin Application
+        canvasSupported: true,
+        svgSupported: false,
+        touchEventsSupported: true
+    };
+}
+else if (typeof document === 'undefined' && typeof self !== 'undefined') {
+    // In worker
+    env = {
+        browser: {},
+        os: {},
+        node: false,
+        worker: true,
+        canvasSupported: true
+    };
+}
+else if (typeof navigator === 'undefined') {
+    // In node
+    env = {
+        browser: {},
+        os: {},
+        node: true,
+        worker: false,
+        // Assume canvas is supported
+        canvasSupported: true,
+        svgSupported: true
+    };
+}
+else {
+    env = detect(navigator.userAgent);
+}
+
+var env$1 = env;
+
+// Zepto.js
+// (c) 2010-2013 Thomas Fuchs
+// Zepto.js may be freely distributed under the MIT license.
+
+function detect(ua) {
+    var os = {};
+    var browser = {};
+    // var webkit = ua.match(/Web[kK]it[\/]{0,1}([\d.]+)/);
+    // var android = ua.match(/(Android);?[\s\/]+([\d.]+)?/);
+    // var ipad = ua.match(/(iPad).*OS\s([\d_]+)/);
+    // var ipod = ua.match(/(iPod)(.*OS\s([\d_]+))?/);
+    // var iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/);
+    // var webos = ua.match(/(webOS|hpwOS)[\s\/]([\d.]+)/);
+    // var touchpad = webos && ua.match(/TouchPad/);
+    // var kindle = ua.match(/Kindle\/([\d.]+)/);
+    // var silk = ua.match(/Silk\/([\d._]+)/);
+    // var blackberry = ua.match(/(BlackBerry).*Version\/([\d.]+)/);
+    // var bb10 = ua.match(/(BB10).*Version\/([\d.]+)/);
+    // var rimtabletos = ua.match(/(RIM\sTablet\sOS)\s([\d.]+)/);
+    // var playbook = ua.match(/PlayBook/);
+    // var chrome = ua.match(/Chrome\/([\d.]+)/) || ua.match(/CriOS\/([\d.]+)/);
+    var firefox = ua.match(/Firefox\/([\d.]+)/);
+    // var safari = webkit && ua.match(/Mobile\//) && !chrome;
+    // var webview = ua.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/) && !chrome;
+    var ie = ua.match(/MSIE\s([\d.]+)/)
+        // IE 11 Trident/7.0; rv:11.0
+        || ua.match(/Trident\/.+?rv:(([\d.]+))/);
+    var edge = ua.match(/Edge\/([\d.]+)/); // IE 12 and 12+
+
+    var weChat = (/micromessenger/i).test(ua);
+
+    // Todo: clean this up with a better OS/browser seperation:
+    // - discern (more) between multiple browsers on android
+    // - decide if kindle fire in silk mode is android or not
+    // - Firefox on Android doesn't specify the Android version
+    // - possibly devide in os, device and browser hashes
+
+    // if (browser.webkit = !!webkit) browser.version = webkit[1];
+
+    // if (android) os.android = true, os.version = android[2];
+    // if (iphone && !ipod) os.ios = os.iphone = true, os.version = iphone[2].replace(/_/g, '.');
+    // if (ipad) os.ios = os.ipad = true, os.version = ipad[2].replace(/_/g, '.');
+    // if (ipod) os.ios = os.ipod = true, os.version = ipod[3] ? ipod[3].replace(/_/g, '.') : null;
+    // if (webos) os.webos = true, os.version = webos[2];
+    // if (touchpad) os.touchpad = true;
+    // if (blackberry) os.blackberry = true, os.version = blackberry[2];
+    // if (bb10) os.bb10 = true, os.version = bb10[2];
+    // if (rimtabletos) os.rimtabletos = true, os.version = rimtabletos[2];
+    // if (playbook) browser.playbook = true;
+    // if (kindle) os.kindle = true, os.version = kindle[1];
+    // if (silk) browser.silk = true, browser.version = silk[1];
+    // if (!silk && os.android && ua.match(/Kindle Fire/)) browser.silk = true;
+    // if (chrome) browser.chrome = true, browser.version = chrome[1];
+    if (firefox) {
+        browser.firefox = true;
+        browser.version = firefox[1];
+    }
+    // if (safari && (ua.match(/Safari/) || !!os.ios)) browser.safari = true;
+    // if (webview) browser.webview = true;
+
+    if (ie) {
+        browser.ie = true;
+        browser.version = ie[1];
+    }
+
+    if (edge) {
+        browser.edge = true;
+        browser.version = edge[1];
+    }
+
+    // It is difficult to detect WeChat in Win Phone precisely, because ua can
+    // not be set on win phone. So we do not consider Win Phone.
+    if (weChat) {
+        browser.weChat = true;
+    }
+
+    // os.tablet = !!(ipad || playbook || (android && !ua.match(/Mobile/)) ||
+    //     (firefox && ua.match(/Tablet/)) || (ie && !ua.match(/Phone/) && ua.match(/Touch/)));
+    // os.phone  = !!(!os.tablet && !os.ipod && (android || iphone || webos ||
+    //     (chrome && ua.match(/Android/)) || (chrome && ua.match(/CriOS\/([\d.]+)/)) ||
+    //     (firefox && ua.match(/Mobile/)) || (ie && ua.match(/Touch/))));
+
+    return {
+        browser: browser,
+        os: os,
+        node: false,
+        // åŽŸç”Ÿcanvasæ”¯æŒï¼Œæ”¹æžç«¯ç‚¹äº†
+        // canvasSupported : !(browser.ie && parseFloat(browser.version) < 9)
+        canvasSupported: !!document.createElement('canvas').getContext,
+        svgSupported: typeof SVGRect !== 'undefined',
+        // works on most browsers
+        // IE10/11 does not support touch event, and MS Edge supports them but not by
+        // default, so we dont check navigator.maxTouchPoints for them here.
+        touchEventsSupported: 'ontouchstart' in window && !browser.ie && !browser.edge,
+        // <http://caniuse.com/#search=pointer%20event>.
+        pointerEventsSupported: 'onpointerdown' in window
+            // Firefox supports pointer but not by default, only MS browsers are reliable on pointer
+            // events currently. So we dont use that on other browsers unless tested sufficiently.
+            // Although IE 10 supports pointer event, it use old style and is different from the
+            // standard. So we exclude that. (IE 10 is hardly used on touch device)
+            && (browser.edge || (browser.ie && browser.version >= 11))
+        // passiveSupported: detectPassiveSupport()
+    };
+}
+
+// See https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection
+// function detectPassiveSupport() {
+//     // Test via a getter in the options object to see if the passive property is accessed
+//     var supportsPassive = false;
+//     try {
+//         var opts = Object.defineProperty({}, 'passive', {
+//             get: function() {
+//                 supportsPassive = true;
+//             }
+//         });
+//         window.addEventListener('testPassive', function() {}, opts);
+//     } catch (e) {
+//     }
+//     return supportsPassive;
+// }
+
+/**
+ * @module zrender/core/util
+ */
+
+// ç”¨äºŽå¤„ç†mergeæ—¶æ— æ³•éåŽ†Dateç‰å¯¹è±¡çš„é—®é¢˜
+var BUILTIN_OBJECT = {
+    '[object Function]': 1,
+    '[object RegExp]': 1,
+    '[object Date]': 1,
+    '[object Error]': 1,
+    '[object CanvasGradient]': 1,
+    '[object CanvasPattern]': 1,
+    // For node-canvas
+    '[object Image]': 1,
+    '[object Canvas]': 1
+};
+
+var TYPED_ARRAY = {
+    '[object Int8Array]': 1,
+    '[object Uint8Array]': 1,
+    '[object Uint8ClampedArray]': 1,
+    '[object Int16Array]': 1,
+    '[object Uint16Array]': 1,
+    '[object Int32Array]': 1,
+    '[object Uint32Array]': 1,
+    '[object Float32Array]': 1,
+    '[object Float64Array]': 1
+};
+
+var objToString = Object.prototype.toString;
+
+var arrayProto = Array.prototype;
+var nativeForEach = arrayProto.forEach;
+var nativeFilter = arrayProto.filter;
+var nativeSlice = arrayProto.slice;
+var nativeMap = arrayProto.map;
+var nativeReduce = arrayProto.reduce;
+
+// Avoid assign to an exported variable, for transforming to cjs.
+var methods = {};
+
+function $override(name, fn) {
+    // Clear ctx instance for different environment
+    if (name === 'createCanvas') {
+        _ctx = null;
+    }
+
+    methods[name] = fn;
+}
+
+/**
+ * Those data types can be cloned:
+ *     Plain object, Array, TypedArray, number, string, null, undefined.
+ * Those data types will be assgined using the orginal data:
+ *     BUILTIN_OBJECT
+ * Instance of user defined class will be cloned to a plain object, without
+ * properties in prototype.
+ * Other data types is not supported (not sure what will happen).
+ *
+ * Caution: do not support clone Date, for performance consideration.
+ * (There might be a large number of date in `series.data`).
+ * So date should not be modified in and out of echarts.
+ *
+ * @param {*} source
+ * @return {*} new
+ */
+function clone(source) {
+    if (source == null || typeof source != 'object') {
+        return source;
+    }
+
+    var result = source;
+    var typeStr = objToString.call(source);
+
+    if (typeStr === '[object Array]') {
+        if (!isPrimitive(source)) {
+            result = [];
+            for (var i = 0, len = source.length; i < len; i++) {
+                result[i] = clone(source[i]);
+            }
+        }
+    }
+    else if (TYPED_ARRAY[typeStr]) {
+        if (!isPrimitive(source)) {
+            var Ctor = source.constructor;
+            if (source.constructor.from) {
+                result = Ctor.from(source);
+            }
+            else {
+                result = new Ctor(source.length);
+                for (var i = 0, len = source.length; i < len; i++) {
+                    result[i] = clone(source[i]);
+                }
+            }
+        }
+    }
+    else if (!BUILTIN_OBJECT[typeStr] && !isPrimitive(source) && !isDom(source)) {
+        result = {};
+        for (var key in source) {
+            if (source.hasOwnProperty(key)) {
+                result[key] = clone(source[key]);
+            }
+        }
+    }
+
+    return result;
+}
+
+/**
+ * @memberOf module:zrender/core/util
+ * @param {*} target
+ * @param {*} source
+ * @param {boolean} [overwrite=false]
+ */
+function merge(target, source, overwrite) {
+    // We should escapse that source is string
+    // and enter for ... in ...
+    if (!isObject$1(source) || !isObject$1(target)) {
+        return overwrite ? clone(source) : target;
+    }
+
+    for (var key in source) {
+        if (source.hasOwnProperty(key)) {
+            var targetProp = target[key];
+            var sourceProp = source[key];
+
+            if (isObject$1(sourceProp)
+                && isObject$1(targetProp)
+                && !isArray(sourceProp)
+                && !isArray(targetProp)
+                && !isDom(sourceProp)
+                && !isDom(targetProp)
+                && !isBuiltInObject(sourceProp)
+                && !isBuiltInObject(targetProp)
+                && !isPrimitive(sourceProp)
+                && !isPrimitive(targetProp)
+            ) {
+                // å¦‚æžœéœ€è¦é€’å½’è¦†ç›–ï¼Œå°±é€’å½’è°ƒç”¨merge
+                merge(targetProp, sourceProp, overwrite);
+            }
+            else if (overwrite || !(key in target)) {
+                // å¦åˆ™åªå¤„ç†overwriteä¸ºtrueï¼Œæˆ–è€…åœ¨ç›®æ ‡å¯¹è±¡ä¸æ²¡æœ‰æ¤å±žæ€§çš„æƒ…å†µ
+                // NOTEï¼Œåœ¨ target[key] ä¸å˜åœ¨çš„æ—¶å€™ä¹Ÿæ˜¯ç›´æŽ¥è¦†ç›–
+                target[key] = clone(source[key], true);
+            }
+        }
+    }
+
+    return target;
+}
+
+/**
+ * @param {Array} targetAndSources The first item is target, and the rests are source.
+ * @param {boolean} [overwrite=false]
+ * @return {*} target
+ */
+function mergeAll(targetAndSources, overwrite) {
+    var result = targetAndSources[0];
+    for (var i = 1, len = targetAndSources.length; i < len; i++) {
+        result = merge(result, targetAndSources[i], overwrite);
+    }
+    return result;
+}
+
+/**
+ * @param {*} target
+ * @param {*} source
+ * @memberOf module:zrender/core/util
+ */
+function extend(target, source) {
+    for (var key in source) {
+        if (source.hasOwnProperty(key)) {
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+
+/**
+ * @param {*} target
+ * @param {*} source
+ * @param {boolean} [overlay=false]
+ * @memberOf module:zrender/core/util
+ */
+function defaults(target, source, overlay) {
+    for (var key in source) {
+        if (source.hasOwnProperty(key)
+            && (overlay ? source[key] != null : target[key] == null)
+        ) {
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+
+var createCanvas = function () {
+    return methods.createCanvas();
+};
+
+methods.createCanvas = function () {
+    return document.createElement('canvas');
+};
+
+// FIXME
+var _ctx;
+
+function getContext() {
+    if (!_ctx) {
+        // Use util.createCanvas instead of createCanvas
+        // because createCanvas may be overwritten in different environment
+        _ctx = createCanvas().getContext('2d');
+    }
+    return _ctx;
+}
+
+/**
+ * æŸ¥è¯¢æ•°ç»„ä¸å…ƒç´ çš„index
+ * @memberOf module:zrender/core/util
+ */
+function indexOf(array, value) {
+    if (array) {
+        if (array.indexOf) {
+            return array.indexOf(value);
+        }
+        for (var i = 0, len = array.length; i < len; i++) {
+            if (array[i] === value) {
+                return i;
+            }
+        }
+    }
+    return -1;
+}
+
+/**
+ * æž„é€ ç±»ç»§æ‰¿å…³ç³»
+ *
+ * @memberOf module:zrender/core/util
+ * @param {Function} clazz æºç±»
+ * @param {Function} baseClazz åŸºç±»
+ */
+function inherits(clazz, baseClazz) {
+    var clazzPrototype = clazz.prototype;
+    function F() {}
+    F.prototype = baseClazz.prototype;
+    clazz.prototype = new F();
+
+    for (var prop in clazzPrototype) {
+        clazz.prototype[prop] = clazzPrototype[prop];
+    }
+    clazz.prototype.constructor = clazz;
+    clazz.superClass = baseClazz;
+}
+
+/**
+ * @memberOf module:zrender/core/util
+ * @param {Object|Function} target
+ * @param {Object|Function} sorce
+ * @param {boolean} overlay
+ */
+function mixin(target, source, overlay) {
+    target = 'prototype' in target ? target.prototype : target;
+    source = 'prototype' in source ? source.prototype : source;
+
+    defaults(target, source, overlay);
+}
+
+/**
+ * Consider typed array.
+ * @param {Array|TypedArray} data
+ */
+function isArrayLike(data) {
+    if (! data) {
+        return;
+    }
+    if (typeof data == 'string') {
+        return false;
+    }
+    return typeof data.length == 'number';
+}
+
+/**
+ * æ•°ç»„æˆ–å¯¹è±¡éåŽ†
+ * @memberOf module:zrender/core/util
+ * @param {Object|Array} obj
+ * @param {Function} cb
+ * @param {*} [context]
+ */
+function each$1(obj, cb, context) {
+    if (!(obj && cb)) {
+        return;
+    }
+    if (obj.forEach && obj.forEach === nativeForEach) {
+        obj.forEach(cb, context);
+    }
+    else if (obj.length === +obj.length) {
+        for (var i = 0, len = obj.length; i < len; i++) {
+            cb.call(context, obj[i], i, obj);
+        }
+    }
+    else {
+        for (var key in obj) {
+            if (obj.hasOwnProperty(key)) {
+                cb.call(context, obj[key], key, obj);
+            }
+        }
+    }
+}
+
+/**
+ * æ•°ç»„æ˜ å°„
+ * @memberOf module:zrender/core/util
+ * @param {Array} obj
+ * @param {Function} cb
+ * @param {*} [context]
+ * @return {Array}
+ */
+function map(obj, cb, context) {
+    if (!(obj && cb)) {
+        return;
+    }
+    if (obj.map && obj.map === nativeMap) {
+        return obj.map(cb, context);
+    }
+    else {
+        var result = [];
+        for (var i = 0, len = obj.length; i < len; i++) {
+            result.push(cb.call(context, obj[i], i, obj));
+        }
+        return result;
+    }
+}
+
+/**
+ * @memberOf module:zrender/core/util
+ * @param {Array} obj
+ * @param {Function} cb
+ * @param {Object} [memo]
+ * @param {*} [context]
+ * @return {Array}
+ */
+function reduce(obj, cb, memo, context) {
+    if (!(obj && cb)) {
+        return;
+    }
+    if (obj.reduce && obj.reduce === nativeReduce) {
+        return obj.reduce(cb, memo, context);
+    }
+    else {
+        for (var i = 0, len = obj.length; i < len; i++) {
+            memo = cb.call(context, memo, obj[i], i, obj);
+        }
+        return memo;
+    }
+}
+
+/**
+ * æ•°ç»„è¿‡æ»¤
+ * @memberOf module:zrender/core/util
+ * @param {Array} obj
+ * @param {Function} cb
+ * @param {*} [context]
+ * @return {Array}
+ */
+function filter(obj, cb, context) {
+    if (!(obj && cb)) {
+        return;
+    }
+    if (obj.filter && obj.filter === nativeFilter) {
+        return obj.filter(cb, context);
+    }
+    else {
+        var result = [];
+        for (var i = 0, len = obj.length; i < len; i++) {
+            if (cb.call(context, obj[i], i, obj)) {
+                result.push(obj[i]);
+            }
+        }
+        return result;
+    }
+}
+
+/**
+ * æ•°ç»„é¡¹æŸ¥æ‰¾
+ * @memberOf module:zrender/core/util
+ * @param {Array} obj
+ * @param {Function} cb
+ * @param {*} [context]
+ * @return {*}
+ */
+function find(obj, cb, context) {
+    if (!(obj && cb)) {
+        return;
+    }
+    for (var i = 0, len = obj.length; i < len; i++) {
+        if (cb.call(context, obj[i], i, obj)) {
+            return obj[i];
+        }
+    }
+}
+
+/**
+ * @memberOf module:zrender/core/util
+ * @param {Function} func
+ * @param {*} context
+ * @return {Function}
+ */
+function bind(func, context) {
+    var args = nativeSlice.call(arguments, 2);
+    return function () {
+        return func.apply(context, args.concat(nativeSlice.call(arguments)));
+    };
+}
+
+/**
+ * @memberOf module:zrender/core/util
+ * @param {Function} func
+ * @return {Function}
+ */
+function curry(func) {
+    var args = nativeSlice.call(arguments, 1);
+    return function () {
+        return func.apply(this, args.concat(nativeSlice.call(arguments)));
+    };
+}
+
+/**
+ * @memberOf module:zrender/core/util
+ * @param {*} value
+ * @return {boolean}
+ */
+function isArray(value) {
+    return objToString.call(value) === '[object Array]';
+}
+
+/**
+ * @memberOf module:zrender/core/util
+ * @param {*} value
+ * @return {boolean}
+ */
+function isFunction$1(value) {
+    return typeof value === 'function';
+}
+
+/**
+ * @memberOf module:zrender/core/util
+ * @param {*} value
+ * @return {boolean}
+ */
+function isString(value) {
+    return objToString.call(value) === '[object String]';
+}
+
+/**
+ * @memberOf module:zrender/core/util
+ * @param {*} value
+ * @return {boolean}
+ */
+function isObject$1(value) {
+    // Avoid a V8 JIT bug in Chrome 19-20.
+    // See https://code.google.com/p/v8/issues/detail?id=2291 for more details.
+    var type = typeof value;
+    return type === 'function' || (!!value && type == 'object');
+}
+
+/**
+ * @memberOf module:zrender/core/util
+ * @param {*} value
+ * @return {boolean}
+ */
+function isBuiltInObject(value) {
+    return !!BUILTIN_OBJECT[objToString.call(value)];
+}
+
+/**
+ * @memberOf module:zrender/core/util
+ * @param {*} value
+ * @return {boolean}
+ */
+function isTypedArray(value) {
+    return !!TYPED_ARRAY[objToString.call(value)];
+}
+
+/**
+ * @memberOf module:zrender/core/util
+ * @param {*} value
+ * @return {boolean}
+ */
+function isDom(value) {
+    return typeof value === 'object'
+        && typeof value.nodeType === 'number'
+        && typeof value.ownerDocument === 'object';
+}
+
+/**
+ * Whether is exactly NaN. Notice isNaN('a') returns true.
+ * @param {*} value
+ * @return {boolean}
+ */
+function eqNaN(value) {
+    return value !== value;
+}
+
+/**
+ * If value1 is not null, then return value1, otherwise judget rest of values.
+ * Low performance.
+ * @memberOf module:zrender/core/util
+ * @return {*} Final value
+ */
+function retrieve(values) {
+    for (var i = 0, len = arguments.length; i < len; i++) {
+        if (arguments[i] != null) {
+            return arguments[i];
+        }
+    }
+}
+
+function retrieve2(value0, value1) {
+    return value0 != null
+        ? value0
+        : value1;
+}
+
+function retrieve3(value0, value1, value2) {
+    return value0 != null
+        ? value0
+        : value1 != null
+        ? value1
+        : value2;
+}
+
+/**
+ * @memberOf module:zrender/core/util
+ * @param {Array} arr
+ * @param {number} startIndex
+ * @param {number} endIndex
+ * @return {Array}
+ */
+function slice() {
+    return Function.call.apply(nativeSlice, arguments);
+}
+
+/**
+ * Normalize css liked array configuration
+ * e.g.
+ *  3 => [3, 3, 3, 3]
+ *  [4, 2] => [4, 2, 4, 2]
+ *  [4, 3, 2] => [4, 3, 2, 3]
+ * @param {number|Array.<number>} val
+ * @return {Array.<number>}
+ */
+function normalizeCssArray(val) {
+    if (typeof (val) === 'number') {
+        return [val, val, val, val];
+    }
+    var len = val.length;
+    if (len === 2) {
+        // vertical | horizontal
+        return [val[0], val[1], val[0], val[1]];
+    }
+    else if (len === 3) {
+        // top | horizontal | bottom
+        return [val[0], val[1], val[2], val[1]];
+    }
+    return val;
+}
+
+/**
+ * @memberOf module:zrender/core/util
+ * @param {boolean} condition
+ * @param {string} message
+ */
+function assert$1(condition, message) {
+    if (!condition) {
+        throw new Error(message);
+    }
+}
+
+/**
+ * @memberOf module:zrender/core/util
+ * @param {string} str string to be trimed
+ * @return {string} trimed string
+ */
+function trim(str) {
+    if (str == null) {
+        return null;
+    }
+    else if (typeof str.trim === 'function') {
+        return str.trim();
+    }
+    else {
+        return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
+    }
+}
+
+var primitiveKey = '__ec_primitive__';
+/**
+ * Set an object as primitive to be ignored traversing children in clone or merge
+ */
+function setAsPrimitive(obj) {
+    obj[primitiveKey] = true;
+}
+
+function isPrimitive(obj) {
+    return obj[primitiveKey];
+}
+
+/**
+ * @constructor
+ * @param {Object} obj Only apply `ownProperty`.
+ */
+function HashMap(obj) {
+    var isArr = isArray(obj);
+    var thisMap = this;
+
+    (obj instanceof HashMap)
+        ? obj.each(visit)
+        : (obj && each$1(obj, visit));
+
+    function visit(value, key) {
+        isArr ? thisMap.set(value, key) : thisMap.set(key, value);
+    }
+}
+
+// Add prefix to avoid conflict with Object.prototype.
+
+HashMap.prototype = {
+    constructor: HashMap,
+    // Do not provide `has` method to avoid defining what is `has`.
+    // (We usually treat `null` and `undefined` as the same, different
+    // from ES6 Map).
+    get: function (key) {
+        return this.hasOwnProperty(key) ? this[key] : null;
+    },
+    set: function (key, value) {
+        // Comparing with invocation chaining, `return value` is more commonly
+        // used in this case: `var someVal = map.set('a', genVal());`
+        return (this[key] = value);
+    },
+    // Although util.each can be performed on this hashMap directly, user
+    // should not use the exposed keys, who are prefixed.
+    each: function (cb, context) {
+        context !== void 0 && (cb = bind(cb, context));
+        for (var key in this) {
+            this.hasOwnProperty(key) && cb(this[key], key);
+        }
+    },
+    // Do not use this method if performance sensitive.
+    removeKey: function (key) {
+        delete this[key];
+    }
+};
+
+function createHashMap(obj) {
+    return new HashMap(obj);
+}
+
+function concatArray(a, b) {
+    var newArray = new a.constructor(a.length + b.length);
+    for (var i = 0; i < a.length; i++) {
+        newArray[i] = a[i];
+    }
+    var offset = a.length;
+    for (i = 0; i < b.length; i++) {
+        newArray[i + offset] = b[i];
+    }
+    return newArray;
+}
+
+
+function noop() {}
+
+
+var zrUtil = (Object.freeze || Object)({
+	$override: $override,
+	clone: clone,
+	merge: merge,
+	mergeAll: mergeAll,
+	extend: extend,
+	defaults: defaults,
+	createCanvas: createCanvas,
+	getContext: getContext,
+	indexOf: indexOf,
+	inherits: inherits,
+	mixin: mixin,
+	isArrayLike: isArrayLike,
+	each: each$1,
+	map: map,
+	reduce: reduce,
+	filter: filter,
+	find: find,
+	bind: bind,
+	curry: curry,
+	isArray: isArray,
+	isFunction: isFunction$1,
+	isString: isString,
+	isObject: isObject$1,
+	isBuiltInObject: isBuiltInObject,
+	isTypedArray: isTypedArray,
+	isDom: isDom,
+	eqNaN: eqNaN,
+	retrieve: retrieve,
+	retrieve2: retrieve2,
+	retrieve3: retrieve3,
+	slice: slice,
+	normalizeCssArray: normalizeCssArray,
+	assert: assert$1,
+	trim: trim,
+	setAsPrimitive: setAsPrimitive,
+	isPrimitive: isPrimitive,
+	createHashMap: createHashMap,
+	concatArray: concatArray,
+	noop: noop
+});
+
+var ArrayCtor = typeof Float32Array === 'undefined'
+    ? Array
+    : Float32Array;
+
+/**
+ * åˆ›å»ºä¸€ä¸ªå‘é‡
+ * @param {number} [x=0]
+ * @param {number} [y=0]
+ * @return {Vector2}
+ */
+function create(x, y) {
+    var out = new ArrayCtor(2);
+    if (x == null) {
+        x = 0;
+    }
+    if (y == null) {
+        y = 0;
+    }
+    out[0] = x;
+    out[1] = y;
+    return out;
+}
+
+/**
+ * å¤åˆ¶å‘é‡æ•°æ®
+ * @param {Vector2} out
+ * @param {Vector2} v
+ * @return {Vector2}
+ */
+function copy(out, v) {
+    out[0] = v[0];
+    out[1] = v[1];
+    return out;
+}
+
+/**
+ * å…‹éš†ä¸€ä¸ªå‘é‡
+ * @param {Vector2} v
+ * @return {Vector2}
+ */
+function clone$1(v) {
+    var out = new ArrayCtor(2);
+    out[0] = v[0];
+    out[1] = v[1];
+    return out;
+}
+
+/**
+ * è®¾ç½®å‘é‡çš„ä¸¤ä¸ªé¡¹
+ * @param {Vector2} out
+ * @param {number} a
+ * @param {number} b
+ * @return {Vector2} ç»“æžœ
+ */
+function set(out, a, b) {
+    out[0] = a;
+    out[1] = b;
+    return out;
+}
+
+/**
+ * å‘é‡ç›¸åŠ 
+ * @param {Vector2} out
+ * @param {Vector2} v1
+ * @param {Vector2} v2
+ */
+function add(out, v1, v2) {
+    out[0] = v1[0] + v2[0];
+    out[1] = v1[1] + v2[1];
+    return out;
+}
+
+/**
+ * å‘é‡ç¼©æ”¾åŽç›¸åŠ 
+ * @param {Vector2} out
+ * @param {Vector2} v1
+ * @param {Vector2} v2
+ * @param {number} a
+ */
+function scaleAndAdd(out, v1, v2, a) {
+    out[0] = v1[0] + v2[0] * a;
+    out[1] = v1[1] + v2[1] * a;
+    return out;
+}
+
+/**
+ * å‘é‡ç›¸å‡
+ * @param {Vector2} out
+ * @param {Vector2} v1
+ * @param {Vector2} v2
+ */
+function sub(out, v1, v2) {
+    out[0] = v1[0] - v2[0];
+    out[1] = v1[1] - v2[1];
+    return out;
+}
+
+/**
+ * å‘é‡é•¿åº¦
+ * @param {Vector2} v
+ * @return {number}
+ */
+function len(v) {
+    return Math.sqrt(lenSquare(v));
+}
+var length = len; // jshint ignore:line
+
+/**
+ * å‘é‡é•¿åº¦å¹³æ–¹
+ * @param {Vector2} v
+ * @return {number}
+ */
+function lenSquare(v) {
+    return v[0] * v[0] + v[1] * v[1];
+}
+var lengthSquare = lenSquare;
+
+/**
+ * å‘é‡ä¹˜æ³•
+ * @param {Vector2} out
+ * @param {Vector2} v1
+ * @param {Vector2} v2
+ */
+function mul(out, v1, v2) {
+    out[0] = v1[0] * v2[0];
+    out[1] = v1[1] * v2[1];
+    return out;
+}
+
+/**
+ * å‘é‡é™¤æ³•
+ * @param {Vector2} out
+ * @param {Vector2} v1
+ * @param {Vector2} v2
+ */
+function div(out, v1, v2) {
+    out[0] = v1[0] / v2[0];
+    out[1] = v1[1] / v2[1];
+    return out;
+}
+
+/**
+ * å‘é‡ç‚¹ä¹˜
+ * @param {Vector2} v1
+ * @param {Vector2} v2
+ * @return {number}
+ */
+function dot(v1, v2) {
+    return v1[0] * v2[0] + v1[1] * v2[1];
+}
+
+/**
+ * å‘é‡ç¼©æ”¾
+ * @param {Vector2} out
+ * @param {Vector2} v
+ * @param {number} s
+ */
+function scale(out, v, s) {
+    out[0] = v[0] * s;
+    out[1] = v[1] * s;
+    return out;
+}
+
+/**
+ * å‘é‡å½’ä¸€åŒ–
+ * @param {Vector2} out
+ * @param {Vector2} v
+ */
+function normalize(out, v) {
+    var d = len(v);
+    if (d === 0) {
+        out[0] = 0;
+        out[1] = 0;
+    }
+    else {
+        out[0] = v[0] / d;
+        out[1] = v[1] / d;
+    }
+    return out;
+}
+
+/**
+ * è®¡ç®—å‘é‡é—´è·ç¦»
+ * @param {Vector2} v1
+ * @param {Vector2} v2
+ * @return {number}
+ */
+function distance(v1, v2) {
+    return Math.sqrt(
+        (v1[0] - v2[0]) * (v1[0] - v2[0])
+        + (v1[1] - v2[1]) * (v1[1] - v2[1])
+    );
+}
+var dist = distance;
+
+/**
+ * å‘é‡è·ç¦»å¹³æ–¹
+ * @param {Vector2} v1
+ * @param {Vector2} v2
+ * @return {number}
+ */
+function distanceSquare(v1, v2) {
+    return (v1[0] - v2[0]) * (v1[0] - v2[0])
+        + (v1[1] - v2[1]) * (v1[1] - v2[1]);
+}
+var distSquare = distanceSquare;
+
+/**
+ * æ±‚è´Ÿå‘é‡
+ * @param {Vector2} out
+ * @param {Vector2} v
+ */
+function negate(out, v) {
+    out[0] = -v[0];
+    out[1] = -v[1];
+    return out;
+}
+
+/**
+ * æ’å€¼ä¸¤ä¸ªç‚¹
+ * @param {Vector2} out
+ * @param {Vector2} v1
+ * @param {Vector2} v2
+ * @param {number} t
+ */
+function lerp(out, v1, v2, t) {
+    out[0] = v1[0] + t * (v2[0] - v1[0]);
+    out[1] = v1[1] + t * (v2[1] - v1[1]);
+    return out;
+}
+
+/**
+ * çŸ©é˜µå·¦ä¹˜å‘é‡
+ * @param {Vector2} out
+ * @param {Vector2} v
+ * @param {Vector2} m
+ */
+function applyTransform(out, v, m) {
+    var x = v[0];
+    var y = v[1];
+    out[0] = m[0] * x + m[2] * y + m[4];
+    out[1] = m[1] * x + m[3] * y + m[5];
+    return out;
+}
+
+/**
+ * æ±‚ä¸¤ä¸ªå‘é‡æœ€å°å€¼
+ * @param  {Vector2} out
+ * @param  {Vector2} v1
+ * @param  {Vector2} v2
+ */
+function min(out, v1, v2) {
+    out[0] = Math.min(v1[0], v2[0]);
+    out[1] = Math.min(v1[1], v2[1]);
+    return out;
+}
+
+/**
+ * æ±‚ä¸¤ä¸ªå‘é‡æœ€å¤§å€¼
+ * @param  {Vector2} out
+ * @param  {Vector2} v1
+ * @param  {Vector2} v2
+ */
+function max(out, v1, v2) {
+    out[0] = Math.max(v1[0], v2[0]);
+    out[1] = Math.max(v1[1], v2[1]);
+    return out;
+}
+
+
+var vector = (Object.freeze || Object)({
+	create: create,
+	copy: copy,
+	clone: clone$1,
+	set: set,
+	add: add,
+	scaleAndAdd: scaleAndAdd,
+	sub: sub,
+	len: len,
+	length: length,
+	lenSquare: lenSquare,
+	lengthSquare: lengthSquare,
+	mul: mul,
+	div: div,
+	dot: dot,
+	scale: scale,
+	normalize: normalize,
+	distance: distance,
+	dist: dist,
+	distanceSquare: distanceSquare,
+	distSquare: distSquare,
+	negate: negate,
+	lerp: lerp,
+	applyTransform: applyTransform,
+	min: min,
+	max: max
+});
+
+// TODO Draggable for group
+// FIXME Draggable on element which has parent rotation or scale
+function Draggable() {
+
+    this.on('mousedown', this._dragStart, this);
+    this.on('mousemove', this._drag, this);
+    this.on('mouseup', this._dragEnd, this);
+    this.on('globalout', this._dragEnd, this);
+    // this._dropTarget = null;
+    // this._draggingTarget = null;
+
+    // this._x = 0;
+    // this._y = 0;
+}
+
+Draggable.prototype = {
+
+    constructor: Draggable,
+
+    _dragStart: function (e) {
+        var draggingTarget = e.target;
+        if (draggingTarget && draggingTarget.draggable) {
+            this._draggingTarget = draggingTarget;
+            draggingTarget.dragging = true;
+            this._x = e.offsetX;
+            this._y = e.offsetY;
+
+            this.dispatchToElement(param(draggingTarget, e), 'dragstart', e.event);
+        }
+    },
+
+    _drag: function (e) {
+        var draggingTarget = this._draggingTarget;
+        if (draggingTarget) {
+
+            var x = e.offsetX;
+            var y = e.offsetY;
+
+            var dx = x - this._x;
+            var dy = y - this._y;
+            this._x = x;
+            this._y = y;
+
+            draggingTarget.drift(dx, dy, e);
+            this.dispatchToElement(param(draggingTarget, e), 'drag', e.event);
+
+            var dropTarget = this.findHover(x, y, draggingTarget).target;
+            var lastDropTarget = this._dropTarget;
+            this._dropTarget = dropTarget;
+
+            if (draggingTarget !== dropTarget) {
+                if (lastDropTarget && dropTarget !== lastDropTarget) {
+                    this.dispatchToElement(param(lastDropTarget, e), 'dragleave', e.event);
+                }
+                if (dropTarget && dropTarget !== lastDropTarget) {
+                    this.dispatchToElement(param(dropTarget, e), 'dragenter', e.event);
+                }
+            }
+        }
+    },
+
+    _dragEnd: function (e) {
+        var draggingTarget = this._draggingTarget;
+
+        if (draggingTarget) {
+            draggingTarget.dragging = false;
+        }
+
+        this.dispatchToElement(param(draggingTarget, e), 'dragend', e.event);
+
+        if (this._dropTarget) {
+            this.dispatchToElement(param(this._dropTarget, e), 'drop', e.event);
+        }
+
+        this._draggingTarget = null;
+        this._dropTarget = null;
+    }
+
+};
+
+function param(target, e) {
+    return {target: target, topTarget: e && e.topTarget};
+}
+
+/**
+ * äº‹ä»¶æ‰©å±•
+ * @module zrender/mixin/Eventful
+ * @author Kener (@Kener-æž—å³°, kener.linfeng@gmail.com)
+ *         pissang (https://www.github.com/pissang)
+ */
+
+var arrySlice = Array.prototype.slice;
+
+/**
+ * äº‹ä»¶åˆ†å‘å™¨
+ * @alias module:zrender/mixin/Eventful
+ * @constructor
+ */
+var Eventful = function () {
+    this._$handlers = {};
+};
+
+Eventful.prototype = {
+
+    constructor: Eventful,
+
+    /**
+     * å•æ¬¡è§¦å‘ç»‘å®šï¼ŒtriggeråŽé”€æ¯
+     *
+     * @param {string} event äº‹ä»¶å
+     * @param {Function} handler å“åº”å‡½æ•°
+     * @param {Object} context
+     */
+    one: function (event, handler, context) {
+        var _h = this._$handlers;
+
+        if (!handler || !event) {
+            return this;
+        }
+
+        if (!_h[event]) {
+            _h[event] = [];
+        }
+
+        for (var i = 0; i < _h[event].length; i++) {
+            if (_h[event][i].h === handler) {
+                return this;
+            }
+        }
+
+        _h[event].push({
+            h: handler,
+            one: true,
+            ctx: context || this
+        });
+
+        return this;
+    },
+
+    /**
+     * ç»‘å®šäº‹ä»¶
+     * @param {string} event äº‹ä»¶å
+     * @param {Function} handler äº‹ä»¶å¤„ç†å‡½æ•°
+     * @param {Object} [context]
+     */
+    on: function (event, handler, context) {
+        var _h = this._$handlers;
+
+        if (!handler || !event) {
+            return this;
+        }
+
+        if (!_h[event]) {
+            _h[event] = [];
+        }
+
+        for (var i = 0; i < _h[event].length; i++) {
+            if (_h[event][i].h === handler) {
+                return this;
+            }
+        }
+
+        _h[event].push({
+            h: handler,
+            one: false,
+            ctx: context || this
+        });
+
+        return this;
+    },
+
+    /**
+     * æ˜¯å¦ç»‘å®šäº†äº‹ä»¶
+     * @param  {string}  event
+     * @return {boolean}
+     */
+    isSilent: function (event) {
+        var _h = this._$handlers;
+        return _h[event] && _h[event].length;
+    },
+
+    /**
+     * è§£ç»‘äº‹ä»¶
+     * @param {string} event äº‹ä»¶å
+     * @param {Function} [handler] äº‹ä»¶å¤„ç†å‡½æ•°
+     */
+    off: function (event, handler) {
+        var _h = this._$handlers;
+
+        if (!event) {
+            this._$handlers = {};
+            return this;
+        }
+
+        if (handler) {
+            if (_h[event]) {
+                var newList = [];
+                for (var i = 0, l = _h[event].length; i < l; i++) {
+                    if (_h[event][i]['h'] != handler) {
+                        newList.push(_h[event][i]);
+                    }
+                }
+                _h[event] = newList;
+            }
+
+            if (_h[event] && _h[event].length === 0) {
+                delete _h[event];
+            }
+        }
+        else {
+            delete _h[event];
+        }
+
+        return this;
+    },
+
+    /**
+     * äº‹ä»¶åˆ†å‘
+     *
+     * @param {string} type äº‹ä»¶ç±»åž‹
+     */
+    trigger: function (type) {
+        if (this._$handlers[type]) {
+            var args = arguments;
+            var argLen = args.length;
+
+            if (argLen > 3) {
+                args = arrySlice.call(args, 1);
+            }
+
+            var _h = this._$handlers[type];
+            var len = _h.length;
+            for (var i = 0; i < len;) {
+                // Optimize advise from backbone
+                switch (argLen) {
+                    case 1:
+                        _h[i]['h'].call(_h[i]['ctx']);
+                        break;
+                    case 2:
+                        _h[i]['h'].call(_h[i]['ctx'], args[1]);
+                        break;
+                    case 3:
+                        _h[i]['h'].call(_h[i]['ctx'], args[1], args[2]);
+                        break;
+                    default:
+                        // have more than 2 given arguments
+                        _h[i]['h'].apply(_h[i]['ctx'], args);
+                        break;
+                }
+
+                if (_h[i]['one']) {
+                    _h.splice(i, 1);
+                    len--;
+                }
+                else {
+                    i++;
+                }
+            }
+        }
+
+        return this;
+    },
+
+    /**
+     * å¸¦æœ‰contextçš„äº‹ä»¶åˆ†å‘, æœ€åŽä¸€ä¸ªå‚æ•°æ˜¯äº‹ä»¶å›žè°ƒçš„context
+     * @param {string} type äº‹ä»¶ç±»åž‹
+     */
+    triggerWithContext: function (type) {
+        if (this._$handlers[type]) {
+            var args = arguments;
+            var argLen = args.length;
+
+            if (argLen > 4) {
+                args = arrySlice.call(args, 1, args.length - 1);
+            }
+            var ctx = args[args.length - 1];
+
+            var _h = this._$handlers[type];
+            var len = _h.length;
+            for (var i = 0; i < len;) {
+                // Optimize advise from backbone
+                switch (argLen) {
+                    case 1:
+                        _h[i]['h'].call(ctx);
+                        break;
+                    case 2:
+                        _h[i]['h'].call(ctx, args[1]);
+                        break;
+                    case 3:
+                        _h[i]['h'].call(ctx, args[1], args[2]);
+                        break;
+                    default:
+                        // have more than 2 given arguments
+                        _h[i]['h'].apply(ctx, args);
+                        break;
+                }
+
+                if (_h[i]['one']) {
+                    _h.splice(i, 1);
+                    len--;
+                }
+                else {
+                    i++;
+                }
+            }
+        }
+
+        return this;
+    }
+};
+
+var SILENT = 'silent';
+
+function makeEventPacket(eveType, targetInfo, event) {
+    return {
+        type: eveType,
+        event: event,
+        // target can only be an element that is not silent.
+        target: targetInfo.target,
+        // topTarget can be a silent element.
+        topTarget: targetInfo.topTarget,
+        cancelBubble: false,
+        offsetX: event.zrX,
+        offsetY: event.zrY,
+        gestureEvent: event.gestureEvent,
+        pinchX: event.pinchX,
+        pinchY: event.pinchY,
+        pinchScale: event.pinchScale,
+        wheelDelta: event.zrDelta,
+        zrByTouch: event.zrByTouch,
+        which: event.which
+    };
+}
+
+function EmptyProxy () {}
+EmptyProxy.prototype.dispose = function () {};
+
+var handlerNames = [
+    'click', 'dblclick', 'mousewheel', 'mouseout',
+    'mouseup', 'mousedown', 'mousemove', 'contextmenu'
+];
+/**
+ * @alias module:zrender/Handler
+ * @constructor
+ * @extends module:zrender/mixin/Eventful
+ * @param {module:zrender/Storage} storage Storage instance.
+ * @param {module:zrender/Painter} painter Painter instance.
+ * @param {module:zrender/dom/HandlerProxy} proxy HandlerProxy instance.
+ * @param {HTMLElement} painterRoot painter.root (not painter.getViewportRoot()).
+ */
+var Handler = function(storage, painter, proxy, painterRoot) {
+    Eventful.call(this);
+
+    this.storage = storage;
+
+    this.painter = painter;
+
+    this.painterRoot = painterRoot;
+
+    proxy = proxy || new EmptyProxy();
+
+    /**
+     * Proxy of event. can be Dom, WebGLSurface, etc.
+     */
+    this.proxy = null;
+
+    /**
+     * {target, topTarget, x, y}
+     * @private
+     * @type {Object}
+     */
+    this._hovered = {};
+
+    /**
+     * @private
+     * @type {Date}
+     */
+    this._lastTouchMoment;
+
+    /**
+     * @private
+     * @type {number}
+     */
+    this._lastX;
+
+    /**
+     * @private
+     * @type {number}
+     */
+    this._lastY;
+
+
+    Draggable.call(this);
+
+    this.setHandlerProxy(proxy);
+};
+
+Handler.prototype = {
+
+    constructor: Handler,
+
+    setHandlerProxy: function (proxy) {
+        if (this.proxy) {
+            this.proxy.dispose();
+        }
+
+        if (proxy) {
+            each$1(handlerNames, function (name) {
+                proxy.on && proxy.on(name, this[name], this);
+            }, this);
+            // Attach handler
+            proxy.handler = this;
+        }
+        this.proxy = proxy;
+    },
+
+    mousemove: function (event) {
+        var x = event.zrX;
+        var y = event.zrY;
+
+        var lastHovered = this._hovered;
+        var lastHoveredTarget = lastHovered.target;
+
+        // If lastHoveredTarget is removed from zr (detected by '__zr') by some API call
+        // (like 'setOption' or 'dispatchAction') in event handlers, we should find
+        // lastHovered again here. Otherwise 'mouseout' can not be triggered normally.
+        // See #6198.
+        if (lastHoveredTarget && !lastHoveredTarget.__zr) {
+            lastHovered = this.findHover(lastHovered.x, lastHovered.y);
+            lastHoveredTarget = lastHovered.target;
+        }
+
+        var hovered = this._hovered = this.findHover(x, y);
+        var hoveredTarget = hovered.target;
+
+        var proxy = this.proxy;
+        proxy.setCursor && proxy.setCursor(hoveredTarget ? hoveredTarget.cursor : 'default');
+
+        // Mouse out on previous hovered element
+        if (lastHoveredTarget && hoveredTarget !== lastHoveredTarget) {
+            this.dispatchToElement(lastHovered, 'mouseout', event);
+        }
+
+        // Mouse moving on one element
+        this.dispatchToElement(hovered, 'mousemove', event);
+
+        // Mouse over on a new element
+        if (hoveredTarget && hoveredTarget !== lastHoveredTarget) {
+            this.dispatchToElement(hovered, 'mouseover', event);
+        }
+    },
+
+    mouseout: function (event) {
+        this.dispatchToElement(this._hovered, 'mouseout', event);
+
+        // There might be some doms created by upper layer application
+        // at the same level of painter.getViewportRoot() (e.g., tooltip
+        // dom created by echarts), where 'globalout' event should not
+        // be triggered when mouse enters these doms. (But 'mouseout'
+        // should be triggered at the original hovered element as usual).
+        var element = event.toElement || event.relatedTarget;
+        var innerDom;
+        do {
+            element = element && element.parentNode;
+        }
+        while (element && element.nodeType != 9 && !(
+            innerDom = element === this.painterRoot
+        ));
+
+        !innerDom && this.trigger('globalout', {event: event});
+    },
+
+    /**
+     * Resize
+     */
+    resize: function (event) {
+        this._hovered = {};
+    },
+
+    /**
+     * Dispatch event
+     * @param {string} eventName
+     * @param {event=} eventArgs
+     */
+    dispatch: function (eventName, eventArgs) {
+        var handler = this[eventName];
+        handler && handler.call(this, eventArgs);
+    },
+
+    /**
+     * Dispose
+     */
+    dispose: function () {
+
+        this.proxy.dispose();
+
+        this.storage =
+        this.proxy =
+        this.painter = null;
+    },
+
+    /**
+     * è®¾ç½®é»˜è®¤çš„cursor style
+     * @param {string} [cursorStyle='default'] ä¾‹å¦‚ crosshair
+     */
+    setCursorStyle: function (cursorStyle) {
+        var proxy = this.proxy;
+        proxy.setCursor && proxy.setCursor(cursorStyle);
+    },
+
+    /**
+     * äº‹ä»¶åˆ†å‘ä»£ç†
+     *
+     * @private
+     * @param {Object} targetInfo {target, topTarget} ç›®æ ‡å›¾å½¢å…ƒç´ 
+     * @param {string} eventName äº‹ä»¶åç§°
+     * @param {Object} event äº‹ä»¶å¯¹è±¡
+     */
+    dispatchToElement: function (targetInfo, eventName, event) {
+        targetInfo = targetInfo || {};
+        var el = targetInfo.target;
+        if (el && el.silent) {
+            return;
+        }
+        var eventHandler = 'on' + eventName;
+        var eventPacket = makeEventPacket(eventName, targetInfo, event);
+
+        while (el) {
+            el[eventHandler]
+                && (eventPacket.cancelBubble = el[eventHandler].call(el, eventPacket));
+
+            el.trigger(eventName, eventPacket);
+
+            el = el.parent;
+
+            if (eventPacket.cancelBubble) {
+                break;
+            }
+        }
+
+        if (!eventPacket.cancelBubble) {
+            // å†’æ³¡åˆ°é¡¶çº§ zrender å¯¹è±¡
+            this.trigger(eventName, eventPacket);
+            // åˆ†å‘äº‹ä»¶åˆ°ç”¨æˆ·è‡ªå®šä¹‰å±‚
+            // ç”¨æˆ·æœ‰å¯èƒ½åœ¨å…¨å±€ click äº‹ä»¶ä¸ disposeï¼Œæ‰€ä»¥éœ€è¦åˆ¤æ–ä¸‹ painter æ˜¯å¦å˜åœ¨
+            this.painter && this.painter.eachOtherLayer(function (layer) {
+                if (typeof(layer[eventHandler]) == 'function') {
+                    layer[eventHandler].call(layer, eventPacket);
+                }
+                if (layer.trigger) {
+                    layer.trigger(eventName, eventPacket);
+                }
+            });
+        }
+    },
+
+    /**
+     * @private
+     * @param {number} x
+     * @param {number} y
+     * @param {module:zrender/graphic/Displayable} exclude
+     * @return {model:zrender/Element}
+     * @method
+     */
+    findHover: function(x, y, exclude) {
+        var list = this.storage.getDisplayList();
+        var out = {x: x, y: y};
+
+        for (var i = list.length - 1; i >= 0 ; i--) {
+            var hoverCheckResult;
+            if (list[i] !== exclude
+                // getDisplayList may include ignored item in VML mode
+                && !list[i].ignore
+                && (hoverCheckResult = isHover(list[i], x, y))
+            ) {
+                !out.topTarget && (out.topTarget = list[i]);
+                if (hoverCheckResult !== SILENT) {
+                    out.target = list[i];
+                    break;
+                }
+            }
+        }
+
+        return out;
+    }
+};
+
+// Common handlers
+each$1(['click', 'mousedown', 'mouseup', 'mousewheel', 'dblclick', 'contextmenu'], function (name) {
+    Handler.prototype[name] = function (event) {
+        // Find hover again to avoid click event is dispatched manually. Or click is triggered without mouseover
+        var hovered = this.findHover(event.zrX, event.zrY);
+        var hoveredTarget = hovered.target;
+
+        if (name === 'mousedown') {
+            this._downEl = hoveredTarget;
+            this._downPoint = [event.zrX, event.zrY];
+            // In case click triggered before mouseup
+            this._upEl = hoveredTarget;
+        }
+        else if (name === 'mouseup') {
+            this._upEl = hoveredTarget;
+        }
+        else if (name === 'click') {
+            if (this._downEl !== this._upEl
+                // Original click event is triggered on the whole canvas element,
+                // including the case that `mousedown` - `mousemove` - `mouseup`,
+                // which should be filtered, otherwise it will bring trouble to
+                // pan and zoom.
+                || !this._downPoint
+                // Arbitrary value
+                || dist(this._downPoint, [event.zrX, event.zrY]) > 4
+            ) {
+                return;
+            }
+            this._downPoint = null;
+        }
+
+        this.dispatchToElement(hovered, name, event);
+    };
+});
+
+function isHover(displayable, x, y) {
+    if (displayable[displayable.rectHover ? 'rectContain' : 'contain'](x, y)) {
+        var el = displayable;
+        var isSilent;
+        while (el) {
+            // If clipped by ancestor.
+            // FIXME: If clipPath has neither stroke nor fill,
+            // el.clipPath.contain(x, y) will always return false.
+            if (el.clipPath && !el.clipPath.contain(x, y))  {
+                return false;
+            }
+            if (el.silent) {
+                isSilent = true;
+            }
+            el = el.parent;
+        }
+        return isSilent ? SILENT : true;
+    }
+
+    return false;
+}
+
+mixin(Handler, Eventful);
+mixin(Handler, Draggable);
+
+/**
+ * 3x2çŸ©é˜µæ“ä½œç±»
+ * @exports zrender/tool/matrix
+ */
+
+var ArrayCtor$1 = typeof Float32Array === 'undefined'
+    ? Array
+   : Float32Array;
+
+/**
+ * Create a identity matrix.
+ * @return {Float32Array|Array.<number>}
+ */
+function create$1() {
+    var out = new ArrayCtor$1(6);
+    identity(out);
+
+    return out;
+}
+
+/**
+ * è®¾ç½®çŸ©é˜µä¸ºå•ä½çŸ©é˜µ
+ * @param {Float32Array|Array.<number>} out
+ */
+function identity(out) {
+    out[0] = 1;
+    out[1] = 0;
+    out[2] = 0;
+    out[3] = 1;
+    out[4] = 0;
+    out[5] = 0;
+    return out;
+}
+
+/**
+ * å¤åˆ¶çŸ©é˜µ
+ * @param {Float32Array|Array.<number>} out
+ * @param {Float32Array|Array.<number>} m
+ */
+function copy$1(out, m) {
+    out[0] = m[0];
+    out[1] = m[1];
+    out[2] = m[2];
+    out[3] = m[3];
+    out[4] = m[4];
+    out[5] = m[5];
+    return out;
+}
+
+/**
+ * çŸ©é˜µç›¸ä¹˜
+ * @param {Float32Array|Array.<number>} out
+ * @param {Float32Array|Array.<number>} m1
+ * @param {Float32Array|Array.<number>} m2
+ */
+function mul$1(out, m1, m2) {
+    // Consider matrix.mul(m, m2, m);
+    // where out is the same as m2.
+    // So use temp variable to escape error.
+    var out0 = m1[0] * m2[0] + m1[2] * m2[1];
+    var out1 = m1[1] * m2[0] + m1[3] * m2[1];
+    var out2 = m1[0] * m2[2] + m1[2] * m2[3];
+    var out3 = m1[1] * m2[2] + m1[3] * m2[3];
+    var out4 = m1[0] * m2[4] + m1[2] * m2[5] + m1[4];
+    var out5 = m1[1] * m2[4] + m1[3] * m2[5] + m1[5];
+    out[0] = out0;
+    out[1] = out1;
+    out[2] = out2;
+    out[3] = out3;
+    out[4] = out4;
+    out[5] = out5;
+    return out;
+}
+
+/**
+ * å¹³ç§»å˜æ¢
+ * @param {Float32Array|Array.<number>} out
+ * @param {Float32Array|Array.<number>} a
+ * @param {Float32Array|Array.<number>} v
+ */
+function translate(out, a, v) {
+    out[0] = a[0];
+    out[1] = a[1];
+    out[2] = a[2];
+    out[3] = a[3];
+    out[4] = a[4] + v[0];
+    out[5] = a[5] + v[1];
+    return out;
+}
+
+/**
+ * æ—‹è½¬å˜æ¢
+ * @param {Float32Array|Array.<number>} out
+ * @param {Float32Array|Array.<number>} a
+ * @param {number} rad
+ */
+function rotate(out, a, rad) {
+    var aa = a[0];
+    var ac = a[2];
+    var atx = a[4];
+    var ab = a[1];
+    var ad = a[3];
+    var aty = a[5];
+    var st = Math.sin(rad);
+    var ct = Math.cos(rad);
+
+    out[0] = aa * ct + ab * st;
+    out[1] = -aa * st + ab * ct;
+    out[2] = ac * ct + ad * st;
+    out[3] = -ac * st + ct * ad;
+    out[4] = ct * atx + st * aty;
+    out[5] = ct * aty - st * atx;
+    return out;
+}
+
+/**
+ * ç¼©æ”¾å˜æ¢
+ * @param {Float32Array|Array.<number>} out
+ * @param {Float32Array|Array.<number>} a
+ * @param {Float32Array|Array.<number>} v
+ */
+function scale$1(out, a, v) {
+    var vx = v[0];
+    var vy = v[1];
+    out[0] = a[0] * vx;
+    out[1] = a[1] * vy;
+    out[2] = a[2] * vx;
+    out[3] = a[3] * vy;
+    out[4] = a[4] * vx;
+    out[5] = a[5] * vy;
+    return out;
+}
+
+/**
+ * æ±‚é€†çŸ©é˜µ
+ * @param {Float32Array|Array.<number>} out
+ * @param {Float32Array|Array.<number>} a
+ */
+function invert(out, a) {
+
+    var aa = a[0];
+    var ac = a[2];
+    var atx = a[4];
+    var ab = a[1];
+    var ad = a[3];
+    var aty = a[5];
+
+    var det = aa * ad - ab * ac;
+    if (!det) {
+        return null;
+    }
+    det = 1.0 / det;
+
+    out[0] = ad * det;
+    out[1] = -ab * det;
+    out[2] = -ac * det;
+    out[3] = aa * det;
+    out[4] = (ac * aty - ad * atx) * det;
+    out[5] = (ab * atx - aa * aty) * det;
+    return out;
+}
+
+/**
+ * Clone a new matrix.
+ * @param {Float32Array|Array.<number>} a
+ */
+function clone$2(a) {
+    var b = create$1();
+    copy$1(b, a);
+    return b;
+}
+
+var matrix = (Object.freeze || Object)({
+	create: create$1,
+	identity: identity,
+	copy: copy$1,
+	mul: mul$1,
+	translate: translate,
+	rotate: rotate,
+	scale: scale$1,
+	invert: invert,
+	clone: clone$2
+});
+
+/**
+ * æä¾›å˜æ¢æ‰©å±•
+ * @module zrender/mixin/Transformable
+ * @author pissang (https://www.github.com/pissang)
+ */
+
+var mIdentity = identity;
+
+var EPSILON = 5e-5;
+
+function isNotAroundZero(val) {
+    return val > EPSILON || val < -EPSILON;
+}
+
+/**
+ * @alias module:zrender/mixin/Transformable
+ * @constructor
+ */
+var Transformable = function (opts) {
+    opts = opts || {};
+    // If there are no given position, rotation, scale
+    if (!opts.position) {
+        /**
+         * å¹³ç§»
+         * @type {Array.<number>}
+         * @default [0, 0]
+         */
+        this.position = [0, 0];
+    }
+    if (opts.rotation == null) {
+        /**
+         * æ—‹è½¬
+         * @type {Array.<number>}
+         * @default 0
+         */
+        this.rotation = 0;
+    }
+    if (!opts.scale) {
+        /**
+         * ç¼©æ”¾
+         * @type {Array.<number>}
+         * @default [1, 1]
+         */
+        this.scale = [1, 1];
+    }
+    /**
+     * æ—‹è½¬å’Œç¼©æ”¾çš„åŽŸç‚¹
+     * @type {Array.<number>}
+     * @default null
+     */
+    this.origin = this.origin || null;
+};
+
+var transformableProto = Transformable.prototype;
+transformableProto.transform = null;
+
+/**
+ * åˆ¤æ–æ˜¯å¦éœ€è¦æœ‰åæ ‡å˜æ¢
+ * å¦‚æžœæœ‰åæ ‡å˜æ¢, åˆ™ä»Žposition, rotation, scaleä»¥åŠçˆ¶èŠ‚ç‚¹çš„transformè®¡ç®—å‡ºè‡ªèº«çš„transformçŸ©é˜µ
+ */
+transformableProto.needLocalTransform = function () {
+    return isNotAroundZero(this.rotation)
+        || isNotAroundZero(this.position[0])
+        || isNotAroundZero(this.position[1])
+        || isNotAroundZero(this.scale[0] - 1)
+        || isNotAroundZero(this.scale[1] - 1);
+};
+
+transformableProto.updateTransform = function () {
+    var parent = this.parent;
+    var parentHasTransform = parent && parent.transform;
+    var needLocalTransform = this.needLocalTransform();
+
+    var m = this.transform;
+    if (!(needLocalTransform || parentHasTransform)) {
+        m && mIdentity(m);
+        return;
+    }
+
+    m = m || create$1();
+
+    if (needLocalTransform) {
+        this.getLocalTransform(m);
+    }
+    else {
+        mIdentity(m);
+    }
+
+    // åº”ç”¨çˆ¶èŠ‚ç‚¹å˜æ¢
+    if (parentHasTransform) {
+        if (needLocalTransform) {
+            mul$1(m, parent.transform, m);
+        }
+        else {
+            copy$1(m, parent.transform);
+        }
+    }
+    // ä¿å˜è¿™ä¸ªå˜æ¢çŸ©é˜µ
+    this.transform = m;
+
+    this.invTransform = this.invTransform || create$1();
+    invert(this.invTransform, m);
+};
+
+transformableProto.getLocalTransform = function (m) {
+    return Transformable.getLocalTransform(this, m);
+};
+
+/**
+ * å°†è‡ªå·±çš„transformåº”ç”¨åˆ°contextä¸Š
+ * @param {CanvasRenderingContext2D} ctx
+ */
+transformableProto.setTransform = function (ctx) {
+    var m = this.transform;
+    var dpr = ctx.dpr || 1;
+    if (m) {
+        ctx.setTransform(dpr * m[0], dpr * m[1], dpr * m[2], dpr * m[3], dpr * m[4], dpr * m[5]);
+    }
+    else {
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    }
+};
+
+transformableProto.restoreTransform = function (ctx) {
+    var dpr = ctx.dpr || 1;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+};
+
+var tmpTransform = [];
+
+/**
+ * åˆ†è§£`transform`çŸ©é˜µåˆ°`position`, `rotation`, `scale`
+ */
+transformableProto.decomposeTransform = function () {
+    if (!this.transform) {
+        return;
+    }
+    var parent = this.parent;
+    var m = this.transform;
+    if (parent && parent.transform) {
+        // Get local transform and decompose them to position, scale, rotation
+        mul$1(tmpTransform, parent.invTransform, m);
+        m = tmpTransform;
+    }
+    var sx = m[0] * m[0] + m[1] * m[1];
+    var sy = m[2] * m[2] + m[3] * m[3];
+    var position = this.position;
+    var scale$$1 = this.scale;
+    if (isNotAroundZero(sx - 1)) {
+        sx = Math.sqrt(sx);
+    }
+    if (isNotAroundZero(sy - 1)) {
+        sy = Math.sqrt(sy);
+    }
+    if (m[0] < 0) {
+        sx = -sx;
+    }
+    if (m[3] < 0) {
+        sy = -sy;
+    }
+    position[0] = m[4];
+    position[1] = m[5];
+    scale$$1[0] = sx;
+    scale$$1[1] = sy;
+    this.rotation = Math.atan2(-m[1] / sy, m[0] / sx);
+};
+
+/**
+ * Get global scale
+ * @return {Array.<number>}
+ */
+transformableProto.getGlobalScale = function () {
+    var m = this.transform;
+    if (!m) {
+        return [1, 1];
+    }
+    var sx = Math.sqrt(m[0] * m[0] + m[1] * m[1]);
+    var sy = Math.sqrt(m[2] * m[2] + m[3] * m[3]);
+    if (m[0] < 0) {
+        sx = -sx;
+    }
+    if (m[3] < 0) {
+        sy = -sy;
+    }
+    return [sx, sy];
+};
+/**
+ * å˜æ¢åæ ‡ä½ç½®åˆ° shape çš„å±€éƒ¨åæ ‡ç©ºé—´
+ * @method
+ * @param {number} x
+ * @param {number} y
+ * @return {Array.<number>}
+ */
+transformableProto.transformCoordToLocal = function (x, y) {
+    var v2 = [x, y];
+    var invTransform = this.invTransform;
+    if (invTransform) {
+        applyTransform(v2, v2, invTransform);
+    }
+    return v2;
+};
+
+/**
+ * å˜æ¢å±€éƒ¨åæ ‡ä½ç½®åˆ°å…¨å±€åæ ‡ç©ºé—´
+ * @method
+ * @param {number} x
+ * @param {number} y
+ * @return {Array.<number>}
+ */
+transformableProto.transformCoordToGlobal = function (x, y) {
+    var v2 = [x, y];
+    var transform = this.transform;
+    if (transform) {
+        applyTransform(v2, v2, transform);
+    }
+    return v2;
+};
+
+/**
+ * @static
+ * @param {Object} target
+ * @param {Array.<number>} target.origin
+ * @param {number} target.rotation
+ * @param {Array.<number>} target.position
+ * @param {Array.<number>} [m]
+ */
+Transformable.getLocalTransform = function (target, m) {
+    m = m || [];
+    mIdentity(m);
+
+    var origin = target.origin;
+    var scale$$1 = target.scale || [1, 1];
+    var rotation = target.rotation || 0;
+    var position = target.position || [0, 0];
+
+    if (origin) {
+        // Translate to origin
+        m[4] -= origin[0];
+        m[5] -= origin[1];
+    }
+    scale$1(m, m, scale$$1);
+    if (rotation) {
+        rotate(m, m, rotation);
+    }
+    if (origin) {
+        // Translate back from origin
+        m[4] += origin[0];
+        m[5] += origin[1];
+    }
+
+    m[4] += position[0];
+    m[5] += position[1];
+
+    return m;
+};
+
+/**
+ * ç¼“åŠ¨ä»£ç æ¥è‡ª https://github.com/sole/tween.js/blob/master/src/Tween.js
+ * @see http://sole.github.io/tween.js/examples/03_graphs.html
+ * @exports zrender/animation/easing
+ */
+var easing = {
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    linear: function (k) {
+        return k;
+    },
+
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    quadraticIn: function (k) {
+        return k * k;
+    },
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    quadraticOut: function (k) {
+        return k * (2 - k);
+    },
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    quadraticInOut: function (k) {
+        if ((k *= 2) < 1) {
+            return 0.5 * k * k;
+        }
+        return -0.5 * (--k * (k - 2) - 1);
+    },
+
+    // ä¸‰æ¬¡æ–¹çš„ç¼“åŠ¨ï¼ˆt^3ï¼‰
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    cubicIn: function (k) {
+        return k * k * k;
+    },
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    cubicOut: function (k) {
+        return --k * k * k + 1;
+    },
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    cubicInOut: function (k) {
+        if ((k *= 2) < 1) {
+            return 0.5 * k * k * k;
+        }
+        return 0.5 * ((k -= 2) * k * k + 2);
+    },
+
+    // å››æ¬¡æ–¹çš„ç¼“åŠ¨ï¼ˆt^4ï¼‰
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    quarticIn: function (k) {
+        return k * k * k * k;
+    },
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    quarticOut: function (k) {
+        return 1 - (--k * k * k * k);
+    },
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    quarticInOut: function (k) {
+        if ((k *= 2) < 1) {
+            return 0.5 * k * k * k * k;
+        }
+        return -0.5 * ((k -= 2) * k * k * k - 2);
+    },
+
+    // äº”æ¬¡æ–¹çš„ç¼“åŠ¨ï¼ˆt^5ï¼‰
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    quinticIn: function (k) {
+        return k * k * k * k * k;
+    },
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    quinticOut: function (k) {
+        return --k * k * k * k * k + 1;
+    },
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    quinticInOut: function (k) {
+        if ((k *= 2) < 1) {
+            return 0.5 * k * k * k * k * k;
+        }
+        return 0.5 * ((k -= 2) * k * k * k * k + 2);
+    },
+
+    // æ£å¼¦æ›²çº¿çš„ç¼“åŠ¨ï¼ˆsin(t)ï¼‰
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    sinusoidalIn: function (k) {
+        return 1 - Math.cos(k * Math.PI / 2);
+    },
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    sinusoidalOut: function (k) {
+        return Math.sin(k * Math.PI / 2);
+    },
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    sinusoidalInOut: function (k) {
+        return 0.5 * (1 - Math.cos(Math.PI * k));
+    },
+
+    // æŒ‡æ•°æ›²çº¿çš„ç¼“åŠ¨ï¼ˆ2^tï¼‰
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    exponentialIn: function (k) {
+        return k === 0 ? 0 : Math.pow(1024, k - 1);
+    },
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    exponentialOut: function (k) {
+        return k === 1 ? 1 : 1 - Math.pow(2, -10 * k);
+    },
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    exponentialInOut: function (k) {
+        if (k === 0) {
+            return 0;
+        }
+        if (k === 1) {
+            return 1;
+        }
+        if ((k *= 2) < 1) {
+            return 0.5 * Math.pow(1024, k - 1);
+        }
+        return 0.5 * (-Math.pow(2, -10 * (k - 1)) + 2);
+    },
+
+    // åœ†å½¢æ›²çº¿çš„ç¼“åŠ¨ï¼ˆsqrt(1-t^2)ï¼‰
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    circularIn: function (k) {
+        return 1 - Math.sqrt(1 - k * k);
+    },
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    circularOut: function (k) {
+        return Math.sqrt(1 - (--k * k));
+    },
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    circularInOut: function (k) {
+        if ((k *= 2) < 1) {
+            return -0.5 * (Math.sqrt(1 - k * k) - 1);
+        }
+        return 0.5 * (Math.sqrt(1 - (k -= 2) * k) + 1);
+    },
+
+    // åˆ›å»ºç±»ä¼¼äºŽå¼¹ç°§åœ¨åœæ¢å‰æ¥å›žæŒ¯è¡çš„åŠ¨ç”»
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    elasticIn: function (k) {
+        var s;
+        var a = 0.1;
+        var p = 0.4;
+        if (k === 0) {
+            return 0;
+        }
+        if (k === 1) {
+            return 1;
+        }
+        if (!a || a < 1) {
+            a = 1; s = p / 4;
+        }
+        else {
+            s = p * Math.asin(1 / a) / (2 * Math.PI);
+        }
+        return -(a * Math.pow(2, 10 * (k -= 1)) *
+                    Math.sin((k - s) * (2 * Math.PI) / p));
+    },
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    elasticOut: function (k) {
+        var s;
+        var a = 0.1;
+        var p = 0.4;
+        if (k === 0) {
+            return 0;
+        }
+        if (k === 1) {
+            return 1;
+        }
+        if (!a || a < 1) {
+            a = 1; s = p / 4;
+        }
+        else {
+            s = p * Math.asin(1 / a) / (2 * Math.PI);
+        }
+        return (a * Math.pow(2, -10 * k) *
+                Math.sin((k - s) * (2 * Math.PI) / p) + 1);
+    },
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    elasticInOut: function (k) {
+        var s;
+        var a = 0.1;
+        var p = 0.4;
+        if (k === 0) {
+            return 0;
+        }
+        if (k === 1) {
+            return 1;
+        }
+        if (!a || a < 1) {
+            a = 1; s = p / 4;
+        }
+        else {
+            s = p * Math.asin(1 / a) / (2 * Math.PI);
+        }
+        if ((k *= 2) < 1) {
+            return -0.5 * (a * Math.pow(2, 10 * (k -= 1))
+                * Math.sin((k - s) * (2 * Math.PI) / p));
+        }
+        return a * Math.pow(2, -10 * (k -= 1))
+                * Math.sin((k - s) * (2 * Math.PI) / p) * 0.5 + 1;
+
+    },
+
+    // åœ¨æŸä¸€åŠ¨ç”»å¼€å§‹æ²¿æŒ‡ç¤ºçš„è·¯å¾„è¿›è¡ŒåŠ¨ç”»å¤„ç†å‰ç¨ç¨æ”¶å›žè¯¥åŠ¨ç”»çš„ç§»åŠ¨
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    backIn: function (k) {
+        var s = 1.70158;
+        return k * k * ((s + 1) * k - s);
+    },
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    backOut: function (k) {
+        var s = 1.70158;
+        return --k * k * ((s + 1) * k + s) + 1;
+    },
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    backInOut: function (k) {
+        var s = 1.70158 * 1.525;
+        if ((k *= 2) < 1) {
+            return 0.5 * (k * k * ((s + 1) * k - s));
+        }
+        return 0.5 * ((k -= 2) * k * ((s + 1) * k + s) + 2);
+    },
+
+    // åˆ›å»ºå¼¹è·³æ•ˆæžœ
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    bounceIn: function (k) {
+        return 1 - easing.bounceOut(1 - k);
+    },
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    bounceOut: function (k) {
+        if (k < (1 / 2.75)) {
+            return 7.5625 * k * k;
+        }
+        else if (k < (2 / 2.75)) {
+            return 7.5625 * (k -= (1.5 / 2.75)) * k + 0.75;
+        }
+        else if (k < (2.5 / 2.75)) {
+            return 7.5625 * (k -= (2.25 / 2.75)) * k + 0.9375;
+        }
+        else {
+            return 7.5625 * (k -= (2.625 / 2.75)) * k + 0.984375;
+        }
+    },
+    /**
+    * @param {number} k
+    * @return {number}
+    */
+    bounceInOut: function (k) {
+        if (k < 0.5) {
+            return easing.bounceIn(k * 2) * 0.5;
+        }
+        return easing.bounceOut(k * 2 - 1) * 0.5 + 0.5;
+    }
+};
+
+/**
+ * åŠ¨ç”»ä¸»æŽ§åˆ¶å™¨
+ * @config target åŠ¨ç”»å¯¹è±¡ï¼Œå¯ä»¥æ˜¯æ•°ç»„ï¼Œå¦‚æžœæ˜¯æ•°ç»„çš„è¯ä¼šæ‰¹é‡åˆ†å‘onframeç‰äº‹ä»¶
+ * @config life(1000) åŠ¨ç”»æ—¶é•¿
+ * @config delay(0) åŠ¨ç”»å»¶è¿Ÿæ—¶é—´
+ * @config loop(true)
+ * @config gap(0) å¾ªçŽ¯çš„é—´éš”æ—¶é—´
+ * @config onframe
+ * @config easing(optional)
+ * @config ondestroy(optional)
+ * @config onrestart(optional)
+ *
+ * TODO pause
+ */
+
+function Clip(options) {
+
+    this._target = options.target;
+
+    // ç”Ÿå‘½å‘¨æœŸ
+    this._life = options.life || 1000;
+    // å»¶æ—¶
+    this._delay = options.delay || 0;
+    // å¼€å§‹æ—¶é—´
+    // this._startTime = new Date().getTime() + this._delay;// å•ä½æ¯«ç§’
+    this._initialized = false;
+
+    // æ˜¯å¦å¾ªçŽ¯
+    this.loop = options.loop == null ? false : options.loop;
+
+    this.gap = options.gap || 0;
+
+    this.easing = options.easing || 'Linear';
+
+    this.onframe = options.onframe;
+    this.ondestroy = options.ondestroy;
+    this.onrestart = options.onrestart;
+
+    this._pausedTime = 0;
+    this._paused = false;
+}
+
+Clip.prototype = {
+
+    constructor: Clip,
+
+    step: function (globalTime, deltaTime) {
+        // Set startTime on first step, or _startTime may has milleseconds different between clips
+        // PENDING
+        if (!this._initialized) {
+            this._startTime = globalTime + this._delay;
+            this._initialized = true;
+        }
+
+        if (this._paused) {
+            this._pausedTime += deltaTime;
+            return;
+        }
+
+        var percent = (globalTime - this._startTime - this._pausedTime) / this._life;
+
+        // è¿˜æ²¡å¼€å§‹
+        if (percent < 0) {
+            return;
+        }
+
+        percent = Math.min(percent, 1);
+
+        var easing$$1 = this.easing;
+        var easingFunc = typeof easing$$1 == 'string' ? easing[easing$$1] : easing$$1;
+        var schedule = typeof easingFunc === 'function'
+            ? easingFunc(percent)
+            : percent;
+
+        this.fire('frame', schedule);
+
+        // ç»“æŸ
+        if (percent == 1) {
+            if (this.loop) {
+                this.restart (globalTime);
+                // é‡æ–°å¼€å§‹å‘¨æœŸ
+                // æŠ›å‡ºè€Œä¸æ˜¯ç›´æŽ¥è°ƒç”¨äº‹ä»¶ç›´åˆ° stage.update åŽå†ç»Ÿä¸€è°ƒç”¨è¿™äº›äº‹ä»¶
+                return 'restart';
+            }
+
+            // åŠ¨ç”»å®Œæˆå°†è¿™ä¸ªæŽ§åˆ¶å™¨æ ‡è¯†ä¸ºå¾…åˆ é™¤
+            // åœ¨Animation.updateä¸è¿›è¡Œæ‰¹é‡åˆ é™¤
+            this._needsRemove = true;
+            return 'destroy';
+        }
+
+        return null;
+    },
+
+    restart: function (globalTime) {
+        var remainder = (globalTime - this._startTime - this._pausedTime) % this._life;
+        this._startTime = globalTime - remainder + this.gap;
+        this._pausedTime = 0;
+
+        this._needsRemove = false;
+    },
+
+    fire: function (eventType, arg) {
+        eventType = 'on' + eventType;
+        if (this[eventType]) {
+            this[eventType](this._target, arg);
+        }
+    },
+
+    pause: function () {
+        this._paused = true;
+    },
+
+    resume: function () {
+        this._paused = false;
+    }
+};
+
+// Simple LRU cache use doubly linked list
+// @module zrender/core/LRU
+
+/**
+ * Simple double linked list. Compared with array, it has O(1) remove operation.
+ * @constructor
+ */
+var LinkedList = function () {
+
+    /**
+     * @type {module:zrender/core/LRU~Entry}
+     */
+    this.head = null;
+
+    /**
+     * @type {module:zrender/core/LRU~Entry}
+     */
+    this.tail = null;
+
+    this._len = 0;
+};
+
+var linkedListProto = LinkedList.prototype;
+/**
+ * Insert a new value at the tail
+ * @param  {} val
+ * @return {module:zrender/core/LRU~Entry}
+ */
+linkedListProto.insert = function (val) {
+    var entry = new Entry(val);
+    this.insertEntry(entry);
+    return entry;
+};
+
+/**
+ * Insert an entry at the tail
+ * @param  {module:zrender/core/LRU~Entry} entry
+ */
+linkedListProto.insertEntry = function (entry) {
+    if (!this.head) {
+        this.head = this.tail = entry;
+    }
+    else {
+        this.tail.next = entry;
+        entry.prev = this.tail;
+        entry.next = null;
+        this.tail = entry;
+    }
+    this._len++;
+};
+
+/**
+ * Remove entry.
+ * @param  {module:zrender/core/LRU~Entry} entry
+ */
+linkedListProto.remove = function (entry) {
+    var prev = entry.prev;
+    var next = entry.next;
+    if (prev) {
+        prev.next = next;
+    }
+    else {
+        // Is head
+        this.head = next;
+    }
+    if (next) {
+        next.prev = prev;
+    }
+    else {
+        // Is tail
+        this.tail = prev;
+    }
+    entry.next = entry.prev = null;
+    this._len--;
+};
+
+/**
+ * @return {number}
+ */
+linkedListProto.len = function () {
+    return this._len;
+};
+
+/**
+ * Clear list
+ */
+linkedListProto.clear = function () {
+    this.head = this.tail = null;
+    this._len = 0;
+};
+
+/**
+ * @constructor
+ * @param {} val
+ */
+var Entry = function (val) {
+    /**
+     * @type {}
+     */
+    this.value = val;
+
+    /**
+     * @type {module:zrender/core/LRU~Entry}
+     */
+    this.next;
+
+    /**
+     * @type {module:zrender/core/LRU~Entry}
+     */
+    this.prev;
+};
+
+/**
+ * LRU Cache
+ * @constructor
+ * @alias module:zrender/core/LRU
+ */
+var LRU = function (maxSize) {
+
+    this._list = new LinkedList();
+
+    this._map = {};
+
+    this._maxSize = maxSize || 10;
+
+    this._lastRemovedEntry = null;
+};
+
+var LRUProto = LRU.prototype;
+
+/**
+ * @param  {string} key
+ * @param  {} value
+ * @return {} Removed value
+ */
+LRUProto.put = function (key, value) {
+    var list = this._list;
+    var map = this._map;
+    var removed = null;
+    if (map[key] == null) {
+        var len = list.len();
+        // Reuse last removed entry
+        var entry = this._lastRemovedEntry;
+
+        if (len >= this._maxSize && len > 0) {
+            // Remove the least recently used
+            var leastUsedEntry = list.head;
+            list.remove(leastUsedEntry);
+            delete map[leastUsedEntry.key];
+
+            removed = leastUsedEntry.value;
+            this._lastRemovedEntry = leastUsedEntry;
+        }
+
+        if (entry) {
+            entry.value = value;
+        }
+        else {
+            entry = new Entry(value);
+        }
+        entry.key = key;
+        list.insertEntry(entry);
+        map[key] = entry;
+    }
+
+    return removed;
+};
+
+/**
+ * @param  {string} key
+ * @return {}
+ */
+LRUProto.get = function (key) {
+    var entry = this._map[key];
+    var list = this._list;
+    if (entry != null) {
+        // Put the latest used entry in the tail
+        if (entry !== list.tail) {
+            list.remove(entry);
+            list.insertEntry(entry);
+        }
+
+        return entry.value;
+    }
+};
+
+/**
+ * Clear the cache
+ */
+LRUProto.clear = function () {
+    this._list.clear();
+    this._map = {};
+};
+
+var kCSSColorTable = {
+    'transparent': [0,0,0,0], 'aliceblue': [240,248,255,1],
+    'antiquewhite': [250,235,215,1], 'aqua': [0,255,255,1],
+    'aquamarine': [127,255,212,1], 'azure': [240,255,255,1],
+    'beige': [245,245,220,1], 'bisque': [255,228,196,1],
+    'black': [0,0,0,1], 'blanchedalmond': [255,235,205,1],
+    'blue': [0,0,255,1], 'blueviolet': [138,43,226,1],
+    'brown': [165,42,42,1], 'burlywood': [222,184,135,1],
+    'cadetblue': [95,158,160,1], 'chartreuse': [127,255,0,1],
+    'chocolate': [210,105,30,1], 'coral': [255,127,80,1],
+    'cornflowerblue': [100,149,237,1], 'cornsilk': [255,248,220,1],
+    'crimson': [220,20,60,1], 'cyan': [0,255,255,1],
+    'darkblue': [0,0,139,1], 'darkcyan': [0,139,139,1],
+    'darkgoldenrod': [184,134,11,1], 'darkgray': [169,169,169,1],
+    'darkgreen': [0,100,0,1], 'darkgrey': [169,169,169,1],
+    'darkkhaki': [189,183,107,1], 'darkmagenta': [139,0,139,1],
+    'darkolivegreen': [85,107,47,1], 'darkorange': [255,140,0,1],
+    'darkorchid': [153,50,204,1], 'darkred': [139,0,0,1],
+    'darksalmon': [233,150,122,1], 'darkseagreen': [143,188,143,1],
+    'darkslateblue': [72,61,139,1], 'darkslategray': [47,79,79,1],
+    'darkslategrey': [47,79,79,1], 'darkturquoise': [0,206,209,1],
+    'darkviolet': [148,0,211,1], 'deeppink': [255,20,147,1],
+    'deepskyblue': [0,191,255,1], 'dimgray': [105,105,105,1],
+    'dimgrey': [105,105,105,1], 'dodgerblue': [30,144,255,1],
+    'firebrick': [178,34,34,1], 'floralwhite': [255,250,240,1],
+    'forestgreen': [34,139,34,1], 'fuchsia': [255,0,255,1],
+    'gainsboro': [220,220,220,1], 'ghostwhite': [248,248,255,1],
+    'gold': [255,215,0,1], 'goldenrod': [218,165,32,1],
+    'gray': [128,128,128,1], 'green': [0,128,0,1],
+    'greenyellow': [173,255,47,1], 'grey': [128,128,128,1],
+    'honeydew': [240,255,240,1], 'hotpink': [255,105,180,1],
+    'indianred': [205,92,92,1], 'indigo': [75,0,130,1],
+    'ivory': [255,255,240,1], 'khaki': [240,230,140,1],
+    'lavender': [230,230,250,1], 'lavenderblush': [255,240,245,1],
+    'lawngreen': [124,252,0,1], 'lemonchiffon': [255,250,205,1],
+    'lightblue': [173,216,230,1], 'lightcoral': [240,128,128,1],
+    'lightcyan': [224,255,255,1], 'lightgoldenrodyellow': [250,250,210,1],
+    'lightgray': [211,211,211,1], 'lightgreen': [144,238,144,1],
+    'lightgrey': [211,211,211,1], 'lightpink': [255,182,193,1],
+    'lightsalmon': [255,160,122,1], 'lightseagreen': [32,178,170,1],
+    'lightskyblue': [135,206,250,1], 'lightslategray': [119,136,153,1],
+    'lightslategrey': [119,136,153,1], 'lightsteelblue': [176,196,222,1],
+    'lightyellow': [255,255,224,1], 'lime': [0,255,0,1],
+    'limegreen': [50,205,50,1], 'linen': [250,240,230,1],
+    'magenta': [255,0,255,1], 'maroon': [128,0,0,1],
+    'mediumaquamarine': [102,205,170,1], 'mediumblue': [0,0,205,1],
+    'mediumorchid': [186,85,211,1], 'mediumpurple': [147,112,219,1],
+    'mediumseagreen': [60,179,113,1], 'mediumslateblue': [123,104,238,1],
+    'mediumspringgreen': [0,250,154,1], 'mediumturquoise': [72,209,204,1],
+    'mediumvioletred': [199,21,133,1], 'midnightblue': [25,25,112,1],
+    'mintcream': [245,255,250,1], 'mistyrose': [255,228,225,1],
+    'moccasin': [255,228,181,1], 'navajowhite': [255,222,173,1],
+    'navy': [0,0,128,1], 'oldlace': [253,245,230,1],
+    'olive': [128,128,0,1], 'olivedrab': [107,142,35,1],
+    'orange': [255,165,0,1], 'orangered': [255,69,0,1],
+    'orchid': [218,112,214,1], 'palegoldenrod': [238,232,170,1],
+    'palegreen': [152,251,152,1], 'paleturquoise': [175,238,238,1],
+    'palevioletred': [219,112,147,1], 'papayawhip': [255,239,213,1],
+    'peachpuff': [255,218,185,1], 'peru': [205,133,63,1],
+    'pink': [255,192,203,1], 'plum': [221,160,221,1],
+    'powderblue': [176,224,230,1], 'purple': [128,0,128,1],
+    'red': [255,0,0,1], 'rosybrown': [188,143,143,1],
+    'royalblue': [65,105,225,1], 'saddlebrown': [139,69,19,1],
+    'salmon': [250,128,114,1], 'sandybrown': [244,164,96,1],
+    'seagreen': [46,139,87,1], 'seashell': [255,245,238,1],
+    'sienna': [160,82,45,1], 'silver': [192,192,192,1],
+    'skyblue': [135,206,235,1], 'slateblue': [106,90,205,1],
+    'slategray': [112,128,144,1], 'slategrey': [112,128,144,1],
+    'snow': [255,250,250,1], 'springgreen': [0,255,127,1],
+    'steelblue': [70,130,180,1], 'tan': [210,180,140,1],
+    'teal': [0,128,128,1], 'thistle': [216,191,216,1],
+    'tomato': [255,99,71,1], 'turquoise': [64,224,208,1],
+    'violet': [238,130,238,1], 'wheat': [245,222,179,1],
+    'white': [255,255,255,1], 'whitesmoke': [245,245,245,1],
+    'yellow': [255,255,0,1], 'yellowgreen': [154,205,50,1]
+};
+
+function clampCssByte(i) {  // Clamp to integer 0 .. 255.
+    i = Math.round(i);  // Seems to be what Chrome does (vs truncation).
+    return i < 0 ? 0 : i > 255 ? 255 : i;
+}
+
+function clampCssAngle(i) {  // Clamp to integer 0 .. 360.
+    i = Math.round(i);  // Seems to be what Chrome does (vs truncation).
+    return i < 0 ? 0 : i > 360 ? 360 : i;
+}
+
+function clampCssFloat(f) {  // Clamp to float 0.0 .. 1.0.
+    return f < 0 ? 0 : f > 1 ? 1 : f;
+}
+
+function parseCssInt(str) {  // int or percentage.
+    if (str.length && str.charAt(str.length - 1) === '%') {
+        return clampCssByte(parseFloat(str) / 100 * 255);
+    }
+    return clampCssByte(parseInt(str, 10));
+}
+
+function parseCssFloat(str) {  // float or percentage.
+    if (str.length && str.charAt(str.length - 1) === '%') {
+        return clampCssFloat(parseFloat(str) / 100);
+    }
+    return clampCssFloat(parseFloat(str));
+}
+
+function cssHueToRgb(m1, m2, h) {
+    if (h < 0) {
+        h += 1;
+    }
+    else if (h > 1) {
+        h -= 1;
+    }
+
+    if (h * 6 < 1) {
+        return m1 + (m2 - m1) * h * 6;
+    }
+    if (h * 2 < 1) {
+        return m2;
+    }
+    if (h * 3 < 2) {
+        return m1 + (m2 - m1) * (2/3 - h) * 6;
+    }
+    return m1;
+}
+
+function lerpNumber(a, b, p) {
+    return a + (b - a) * p;
+}
+
+function setRgba(out, r, g, b, a) {
+    out[0] = r; out[1] = g; out[2] = b; out[3] = a;
+    return out;
+}
+function copyRgba(out, a) {
+    out[0] = a[0]; out[1] = a[1]; out[2] = a[2]; out[3] = a[3];
+    return out;
+}
+
+var colorCache = new LRU(20);
+var lastRemovedArr = null;
+
+function putToCache(colorStr, rgbaArr) {
+    // Reuse removed array
+    if (lastRemovedArr) {
+        copyRgba(lastRemovedArr, rgbaArr);
+    }
+    lastRemovedArr = colorCache.put(colorStr, lastRemovedArr || (rgbaArr.slice()));
+}
+
+/**
+ * @param {string} colorStr
+ * @param {Array.<number>} out
+ * @return {Array.<number>}
+ * @memberOf module:zrender/util/color
+ */
+function parse(colorStr, rgbaArr) {
+    if (!colorStr) {
+        return;
+    }
+    rgbaArr = rgbaArr || [];
+
+    var cached = colorCache.get(colorStr);
+    if (cached) {
+        return copyRgba(rgbaArr, cached);
+    }
+
+    // colorStr may be not string
+    colorStr = colorStr + '';
+    // Remove all whitespace, not compliant, but should just be more accepting.
+    var str = colorStr.replace(/ /g, '').toLowerCase();
+
+    // Color keywords (and transparent) lookup.
+    if (str in kCSSColorTable) {
+        copyRgba(rgbaArr, kCSSColorTable[str]);
+        putToCache(colorStr, rgbaArr);
+        return rgbaArr;
+    }
+
+    // #abc and #abc123 syntax.
+    if (str.charAt(0) === '#') {
+        if (str.length === 4) {
+            var iv = parseInt(str.substr(1), 16);  // TODO(deanm): Stricter parsing.
+            if (!(iv >= 0 && iv <= 0xfff)) {
+                setRgba(rgbaArr, 0, 0, 0, 1);
+                return;  // Covers NaN.
+            }
+            setRgba(rgbaArr,
+                ((iv & 0xf00) >> 4) | ((iv & 0xf00) >> 8),
+                (iv & 0xf0) | ((iv & 0xf0) >> 4),
+                (iv & 0xf) | ((iv & 0xf) << 4),
+                1
+            );
+            putToCache(colorStr, rgbaArr);
+            return rgbaArr;
+        }
+        else if (str.length === 7) {
+            var iv = parseInt(str.substr(1), 16);  // TODO(deanm): Stricter parsing.
+            if (!(iv >= 0 && iv <= 0xffffff)) {
+                setRgba(rgbaArr, 0, 0, 0, 1);
+                return;  // Covers NaN.
+            }
+            setRgba(rgbaArr,
+                (iv & 0xff0000) >> 16,
+                (iv & 0xff00) >> 8,
+                iv & 0xff,
+                1
+            );
+            putToCache(colorStr, rgbaArr);
+            return rgbaArr;
+        }
+
+        return;
+    }
+    var op = str.indexOf('('), ep = str.indexOf(')');
+    if (op !== -1 && ep + 1 === str.length) {
+        var fname = str.substr(0, op);
+        var params = str.substr(op + 1, ep - (op + 1)).split(',');
+        var alpha = 1;  // To allow case fallthrough.
+        switch (fname) {
+            case 'rgba':
+                if (params.length !== 4) {
+                    setRgba(rgbaArr, 0, 0, 0, 1);
+                    return;
+                }
+                alpha = parseCssFloat(params.pop()); // jshint ignore:line
+            // Fall through.
+            case 'rgb':
+                if (params.length !== 3) {
+                    setRgba(rgbaArr, 0, 0, 0, 1);
+                    return;
+                }
+                setRgba(rgbaArr,
+                    parseCssInt(params[0]),
+                    parseCssInt(params[1]),
+                    parseCssInt(params[2]),
+                    alpha
+                );
+                putToCache(colorStr, rgbaArr);
+                return rgbaArr;
+            case 'hsla':
+                if (params.length !== 4) {
+                    setRgba(rgbaArr, 0, 0, 0, 1);
+                    return;
+                }
+                params[3] = parseCssFloat(params[3]);
+                hsla2rgba(params, rgbaArr);
+                putToCache(colorStr, rgbaArr);
+                return rgbaArr;
+            case 'hsl':
+                if (params.length !== 3) {
+                    setRgba(rgbaArr, 0, 0, 0, 1);
+                    return;
+                }
+                hsla2rgba(params, rgbaArr);
+                putToCache(colorStr, rgbaArr);
+                return rgbaArr;
+            default:
+                return;
+        }
+    }
+
+    setRgba(rgbaArr, 0, 0, 0, 1);
+    return;
+}
+
+/**
+ * @param {Array.<number>} hsla
+ * @param {Array.<number>} rgba
+ * @return {Array.<number>} rgba
+ */
+function hsla2rgba(hsla, rgba) {
+    var h = (((parseFloat(hsla[0]) % 360) + 360) % 360) / 360;  // 0 .. 1
+    // NOTE(deanm): According to the CSS spec s/l should only be
+    // percentages, but we don't bother and let float or percentage.
+    var s = parseCssFloat(hsla[1]);
+    var l = parseCssFloat(hsla[2]);
+    var m2 = l <= 0.5 ? l * (s + 1) : l + s - l * s;
+    var m1 = l * 2 - m2;
+
+    rgba = rgba || [];
+    setRgba(rgba,
+        clampCssByte(cssHueToRgb(m1, m2, h + 1 / 3) * 255),
+        clampCssByte(cssHueToRgb(m1, m2, h) * 255),
+        clampCssByte(cssHueToRgb(m1, m2, h - 1 / 3) * 255),
+        1
+    );
+
+    if (hsla.length === 4) {
+        rgba[3] = hsla[3];
+    }
+
+    return rgba;
+}
+
+/**
+ * @param {Array.<number>} rgba
+ * @return {Array.<number>} hsla
+ */
+function rgba2hsla(rgba) {
+    if (!rgba) {
+        return;
+    }
+
+    // RGB from 0 to 255
+    var R = rgba[0] / 255;
+    var G = rgba[1] / 255;
+    var B = rgba[2] / 255;
+
+    var vMin = Math.min(R, G, B); // Min. value of RGB
+    var vMax = Math.max(R, G, B); // Max. value of RGB
+    var delta = vMax - vMin; // Delta RGB value
+
+    var L = (vMax + vMin) / 2;
+    var H;
+    var S;
+    // HSL results from 0 to 1
+    if (delta === 0) {
+        H = 0;
+        S = 0;
+    }
+    else {
+        if (L < 0.5) {
+            S = delta / (vMax + vMin);
+        }
+        else {
+            S = delta / (2 - vMax - vMin);
+        }
+
+        var deltaR = (((vMax - R) / 6) + (delta / 2)) / delta;
+        var deltaG = (((vMax - G) / 6) + (delta / 2)) / delta;
+        var deltaB = (((vMax - B) / 6) + (delta / 2)) / delta;
+
+        if (R === vMax) {
+            H = deltaB - deltaG;
+        }
+        else if (G === vMax) {
+            H = (1 / 3) + deltaR - deltaB;
+        }
+        else if (B === vMax) {
+            H = (2 / 3) + deltaG - deltaR;
+        }
+
+        if (H < 0) {
+            H += 1;
+        }
+
+        if (H > 1) {
+            H -= 1;
+        }
+    }
+
+    var hsla = [H * 360, S, L];
+
+    if (rgba[3] != null) {
+        hsla.push(rgba[3]);
+    }
+
+    return hsla;
+}
+
+/**
+ * @param {string} color
+ * @param {number} level
+ * @return {string}
+ * @memberOf module:zrender/util/color
+ */
+function lift(color, level) {
+    var colorArr = parse(color);
+    if (colorArr) {
+        for (var i = 0; i < 3; i++) {
+            if (level < 0) {
+                colorArr[i] = colorArr[i] * (1 - level) | 0;
+            }
+            else {
+                colorArr[i] = ((255 - colorArr[i]) * level + colorArr[i]) | 0;
+            }
+            if (colorArr[i] > 255) {
+                colorArr[i] = 255;
+            }
+            else if (color[i] < 0) {
+                colorArr[i] = 0;
+            }
+        }
+        return stringify(colorArr, colorArr.length === 4 ? 'rgba' : 'rgb');
+    }
+}
+
+/**
+ * @param {string} color
+ * @return {string}
+ * @memberOf module:zrender/util/color
+ */
+function toHex(color) {
+    var colorArr = parse(color);
+    if (colorArr) {
+        return ((1 << 24) + (colorArr[0] << 16) + (colorArr[1] << 8) + (+colorArr[2])).toString(16).slice(1);
+    }
+}
+
+/**
+ * Map value to color. Faster than lerp methods because color is represented by rgba array.
+ * @param {number} normalizedValue A float between 0 and 1.
+ * @param {Array.<Array.<number>>} colors List of rgba color array
+ * @param {Array.<number>} [out] Mapped gba color array
+ * @return {Array.<number>} will be null/undefined if input illegal.
+ */
+function fastLerp(normalizedValue, colors, out) {
+    if (!(colors && colors.length)
+        || !(normalizedValue >= 0 && normalizedValue <= 1)
+    ) {
+        return;
+    }
+
+    out = out || [];
+
+    var value = normalizedValue * (colors.length - 1);
+    var leftIndex = Math.floor(value);
+    var rightIndex = Math.ceil(value);
+    var leftColor = colors[leftIndex];
+    var rightColor = colors[rightIndex];
+    var dv = value - leftIndex;
+    out[0] = clampCssByte(lerpNumber(leftColor[0], rightColor[0], dv));
+    out[1] = clampCssByte(lerpNumber(leftColor[1], rightColor[1], dv));
+    out[2] = clampCssByte(lerpNumber(leftColor[2], rightColor[2], dv));
+    out[3] = clampCssFloat(lerpNumber(leftColor[3], rightColor[3], dv));
+
+    return out;
+}
+
+/**
+ * @deprecated
+ */
+var fastMapToColor = fastLerp;
+
+/**
+ * @param {number} normalizedValue A float between 0 and 1.
+ * @param {Array.<string>} colors Color list.
+ * @param {boolean=} fullOutput Default false.
+ * @return {(string|Object)} Result color. If fullOutput,
+ *                           return {color: ..., leftIndex: ..., rightIndex: ..., value: ...},
+ * @memberOf module:zrender/util/color
+ */
+function lerp$1(normalizedValue, colors, fullOutput) {
+    if (!(colors && colors.length)
+        || !(normalizedValue >= 0 && normalizedValue <= 1)
+    ) {
+        return;
+    }
+
+    var value = normalizedValue * (colors.length - 1);
+    var leftIndex = Math.floor(value);
+    var rightIndex = Math.ceil(value);
+    var leftColor = parse(colors[leftIndex]);
+    var rightColor = parse(colors[rightIndex]);
+    var dv = value - leftIndex;
+
+    var color = stringify(
+        [
+            clampCssByte(lerpNumber(leftColor[0], rightColor[0], dv)),
+            clampCssByte(lerpNumber(leftColor[1], rightColor[1], dv)),
+            clampCssByte(lerpNumber(leftColor[2], rightColor[2], dv)),
+            clampCssFloat(lerpNumber(leftColor[3], rightColor[3], dv))
+        ],
+        'rgba'
+    );
+
+    return fullOutput
+        ? {
+            color: color,
+            leftIndex: leftIndex,
+            rightIndex: rightIndex,
+            value: value
+        }
+        : color;
+}
+
+/**
+ * @deprecated
+ */
+var mapToColor = lerp$1;
+
+/**
+ * @param {string} color
+ * @param {number=} h 0 ~ 360, ignore when null.
+ * @param {number=} s 0 ~ 1, ignore when null.
+ * @param {number=} l 0 ~ 1, ignore when null.
+ * @return {string} Color string in rgba format.
+ * @memberOf module:zrender/util/color
+ */
+function modifyHSL(color, h, s, l) {
+    color = parse(color);
+
+    if (color) {
+        color = rgba2hsla(color);
+        h != null && (color[0] = clampCssAngle(h));
+        s != null && (color[1] = parseCssFloat(s));
+        l != null && (color[2] = parseCssFloat(l));
+
+        return stringify(hsla2rgba(color), 'rgba');
+    }
+}
+
+/**
+ * @param {string} color
+ * @param {number=} alpha 0 ~ 1
+ * @return {string} Color string in rgba format.
+ * @memberOf module:zrender/util/color
+ */
+function modifyAlpha(color, alpha) {
+    color = parse(color);
+
+    if (color && alpha != null) {
+        color[3] = clampCssFloat(alpha);
+        return stringify(color, 'rgba');
+    }
+}
+
+/**
+ * @param {Array.<number>} arrColor like [12,33,44,0.4]
+ * @param {string} type 'rgba', 'hsva', ...
+ * @return {string} Result color. (If input illegal, return undefined).
+ */
+function stringify(arrColor, type) {
+    if (!arrColor || !arrColor.length) {
+        return;
+    }
+    var colorStr = arrColor[0] + ',' + arrColor[1] + ',' + arrColor[2];
+    if (type === 'rgba' || type === 'hsva' || type === 'hsla') {
+        colorStr += ',' + arrColor[3];
+    }
+    return type + '(' + colorStr + ')';
+}
+
+
+var color = (Object.freeze || Object)({
+	parse: parse,
+	lift: lift,
+	toHex: toHex,
+	fastLerp: fastLerp,
+	fastMapToColor: fastMapToColor,
+	lerp: lerp$1,
+	mapToColor: mapToColor,
+	modifyHSL: modifyHSL,
+	modifyAlpha: modifyAlpha,
+	stringify: stringify
+});
+
+/**
+ * @module echarts/animation/Animator
+ */
+
+var arraySlice = Array.prototype.slice;
+
+function defaultGetter(target, key) {
+    return target[key];
+}
+
+function defaultSetter(target, key, value) {
+    target[key] = value;
+}
+
+/**
+ * @param  {number} p0
+ * @param  {number} p1
+ * @param  {number} percent
+ * @return {number}
+ */
+function interpolateNumber(p0, p1, percent) {
+    return (p1 - p0) * percent + p0;
+}
+
+/**
+ * @param  {string} p0
+ * @param  {string} p1
+ * @param  {number} percent
+ * @return {string}
+ */
+function interpolateString(p0, p1, percent) {
+    return percent > 0.5 ? p1 : p0;
+}
+
+/**
+ * @param  {Array} p0
+ * @param  {Array} p1
+ * @param  {number} percent
+ * @param  {Array} out
+ * @param  {number} arrDim
+ */
+function interpolateArray(p0, p1, percent, out, arrDim) {
+    var len = p0.length;
+    if (arrDim == 1) {
+        for (var i = 0; i < len; i++) {
+            out[i] = interpolateNumber(p0[i], p1[i], percent);
+        }
+    }
+    else {
+        var len2 = len && p0[0].length;
+        for (var i = 0; i < len; i++) {
+            for (var j = 0; j < len2; j++) {
+                out[i][j] = interpolateNumber(
+                    p0[i][j], p1[i][j], percent
+                );
+            }
+        }
+    }
+}
+
+// arr0 is source array, arr1 is target array.
+// Do some preprocess to avoid error happened when interpolating from arr0 to arr1
+function fillArr(arr0, arr1, arrDim) {
+    var arr0Len = arr0.length;
+    var arr1Len = arr1.length;
+    if (arr0Len !== arr1Len) {
+        // FIXME Not work for TypedArray
+        var isPreviousLarger = arr0Len > arr1Len;
+        if (isPreviousLarger) {
+            // Cut the previous
+            arr0.length = arr1Len;
+        }
+        else {
+            // Fill the previous
+            for (var i = arr0Len; i < arr1Len; i++) {
+                arr0.push(
+                    arrDim === 1 ? arr1[i] : arraySlice.call(arr1[i])
+                );
+            }
+        }
+    }
+    // Handling NaN value
+    var len2 = arr0[0] && arr0[0].length;
+    for (var i = 0; i < arr0.length; i++) {
+        if (arrDim === 1) {
+            if (isNaN(arr0[i])) {
+                arr0[i] = arr1[i];
+            }
+        }
+        else {
+            for (var j = 0; j < len2; j++) {
+                if (isNaN(arr0[i][j])) {
+                    arr0[i][j] = arr1[i][j];
+                }
+            }
+        }
+    }
+}
+
+/**
+ * @param  {Array} arr0
+ * @param  {Array} arr1
+ * @param  {number} arrDim
+ * @return {boolean}
+ */
+function isArraySame(arr0, arr1, arrDim) {
+    if (arr0 === arr1) {
+        return true;
+    }
+    var len = arr0.length;
+    if (len !== arr1.length) {
+        return false;
+    }
+    if (arrDim === 1) {
+        for (var i = 0; i < len; i++) {
+            if (arr0[i] !== arr1[i]) {
+                return false;
+            }
+        }
+    }
+    else {
+        var len2 = arr0[0].length;
+        for (var i = 0; i < len; i++) {
+            for (var j = 0; j < len2; j++) {
+                if (arr0[i][j] !== arr1[i][j]) {
+                    return false;
+                }
+            }
+        }
+    }
+    return true;
+}
+
+/**
+ * Catmull Rom interpolate array
+ * @param  {Array} p0
+ * @param  {Array} p1
+ * @param  {Array} p2
+ * @param  {Array} p3
+ * @param  {number} t
+ * @param  {number} t2
+ * @param  {number} t3
+ * @param  {Array} out
+ * @param  {number} arrDim
+ */
+function catmullRomInterpolateArray(
+    p0, p1, p2, p3, t, t2, t3, out, arrDim
+) {
+    var len = p0.length;
+    if (arrDim == 1) {
+        for (var i = 0; i < len; i++) {
+            out[i] = catmullRomInterpolate(
+                p0[i], p1[i], p2[i], p3[i], t, t2, t3
+            );
+        }
+    }
+    else {
+        var len2 = p0[0].length;
+        for (var i = 0; i < len; i++) {
+            for (var j = 0; j < len2; j++) {
+                out[i][j] = catmullRomInterpolate(
+                    p0[i][j], p1[i][j], p2[i][j], p3[i][j],
+                    t, t2, t3
+                );
+            }
+        }
+    }
+}
+
+/**
+ * Catmull Rom interpolate number
+ * @param  {number} p0
+ * @param  {number} p1
+ * @param  {number} p2
+ * @param  {number} p3
+ * @param  {number} t
+ * @param  {number} t2
+ * @param  {number} t3
+ * @return {number}
+ */
+function catmullRomInterpolate(p0, p1, p2, p3, t, t2, t3) {
+    var v0 = (p2 - p0) * 0.5;
+    var v1 = (p3 - p1) * 0.5;
+    return (2 * (p1 - p2) + v0 + v1) * t3
+            + (-3 * (p1 - p2) - 2 * v0 - v1) * t2
+            + v0 * t + p1;
+}
+
+function cloneValue(value) {
+    if (isArrayLike(value)) {
+        var len = value.length;
+        if (isArrayLike(value[0])) {
+            var ret = [];
+            for (var i = 0; i < len; i++) {
+                ret.push(arraySlice.call(value[i]));
+            }
+            return ret;
+        }
+
+        return arraySlice.call(value);
+    }
+
+    return value;
+}
+
+function rgba2String(rgba) {
+    rgba[0] = Math.floor(rgba[0]);
+    rgba[1] = Math.floor(rgba[1]);
+    rgba[2] = Math.floor(rgba[2]);
+
+    return 'rgba(' + rgba.join(',') + ')';
+}
+
+function getArrayDim(keyframes) {
+    var lastValue = keyframes[keyframes.length - 1].value;
+    return isArrayLike(lastValue && lastValue[0]) ? 2 : 1;
+}
+
+function createTrackClip(animator, easing, oneTrackDone, keyframes, propName, forceAnimate) {
+    var getter = animator._getter;
+    var setter = animator._setter;
+    var useSpline = easing === 'spline';
+
+    var trackLen = keyframes.length;
+    if (!trackLen) {
+        return;
+    }
+    // Guess data type
+    var firstVal = keyframes[0].value;
+    var isValueArray = isArrayLike(firstVal);
+    var isValueColor = false;
+    var isValueString = false;
+
+    // For vertices morphing
+    var arrDim = isValueArray ? getArrayDim(keyframes) : 0;
+
+    var trackMaxTime;
+    // Sort keyframe as ascending
+    keyframes.sort(function(a, b) {
+        return a.time - b.time;
+    });
+
+    trackMaxTime = keyframes[trackLen - 1].time;
+    // Percents of each keyframe
+    var kfPercents = [];
+    // Value of each keyframe
+    var kfValues = [];
+    var prevValue = keyframes[0].value;
+    var isAllValueEqual = true;
+    for (var i = 0; i < trackLen; i++) {
+        kfPercents.push(keyframes[i].time / trackMaxTime);
+        // Assume value is a color when it is a string
+        var value = keyframes[i].value;
+
+        // Check if value is equal, deep check if value is array
+        if (!((isValueArray && isArraySame(value, prevValue, arrDim))
+            || (!isValueArray && value === prevValue))) {
+            isAllValueEqual = false;
+        }
+        prevValue = value;
+
+        // Try converting a string to a color array
+        if (typeof value == 'string') {
+            var colorArray = parse(value);
+            if (colorArray) {
+                value = colorArray;
+                isValueColor = true;
+            }
+            else {
+                isValueString = true;
+            }
+        }
+        kfValues.push(value);
+    }
+    if (!forceAnimate && isAllValueEqual) {
+        return;
+    }
+
+    var lastValue = kfValues[trackLen - 1];
+    // Polyfill array and NaN value
+    for (var i = 0; i < trackLen - 1; i++) {
+        if (isValueArray) {
+            fillArr(kfValues[i], lastValue, arrDim);
+        }
+        else {
+            if (isNaN(kfValues[i]) && !isNaN(lastValue) && !isValueString && !isValueColor) {
+                kfValues[i] = lastValue;
+            }
+        }
+    }
+    isValueArray && fillArr(getter(animator._target, propName), lastValue, arrDim);
+
+    // Cache the key of last frame to speed up when
+    // animation playback is sequency
+    var lastFrame = 0;
+    var lastFramePercent = 0;
+    var start;
+    var w;
+    var p0;
+    var p1;
+    var p2;
+    var p3;
+
+    if (isValueColor) {
+        var rgba = [0, 0, 0, 0];
+    }
+
+    var onframe = function (target, percent) {
+        // Find the range keyframes
+        // kf1-----kf2---------current--------kf3
+        // find kf2 and kf3 and do interpolation
+        var frame;
+        // In the easing function like elasticOut, percent may less than 0
+        if (percent < 0) {
+            frame = 0;
+        }
+        else if (percent < lastFramePercent) {
+            // Start from next key
+            // PENDING start from lastFrame ?
+            start = Math.min(lastFrame + 1, trackLen - 1);
+            for (frame = start; frame >= 0; frame--) {
+                if (kfPercents[frame] <= percent) {
+                    break;
+                }
+            }
+            // PENDING really need to do this ?
+            frame = Math.min(frame, trackLen - 2);
+        }
+        else {
+            for (frame = lastFrame; frame < trackLen; frame++) {
+                if (kfPercents[frame] > percent) {
+                    break;
+                }
+            }
+            frame = Math.min(frame - 1, trackLen - 2);
+        }
+        lastFrame = frame;
+        lastFramePercent = percent;
+
+        var range = (kfPercents[frame + 1] - kfPercents[frame]);
+        if (range === 0) {
+            return;
+        }
+        else {
+            w = (percent - kfPercents[frame]) / range;
+        }
+        if (useSpline) {
+            p1 = kfValues[frame];
+            p0 = kfValues[frame === 0 ? frame : frame - 1];
+            p2 = kfValues[frame > trackLen - 2 ? trackLen - 1 : frame + 1];
+            p3 = kfValues[frame > trackLen - 3 ? trackLen - 1 : frame + 2];
+            if (isValueArray) {
+                catmullRomInterpolateArray(
+                    p0, p1, p2, p3, w, w * w, w * w * w,
+                    getter(target, propName),
+                    arrDim
+                );
+            }
+            else {
+                var value;
+                if (isValueColor) {
+                    value = catmullRomInterpolateArray(
+                        p0, p1, p2, p3, w, w * w, w * w * w,
+                        rgba, 1
+                    );
+                    value = rgba2String(rgba);
+                }
+                else if (isValueString) {
+                    // String is step(0.5)
+                    return interpolateString(p1, p2, w);
+                }
+                else {
+                    value = catmullRomInterpolate(
+                        p0, p1, p2, p3, w, w * w, w * w * w
+                    );
+                }
+                setter(
+                    target,
+                    propName,
+                    value
+                );
+            }
+        }
+        else {
+            if (isValueArray) {
+                interpolateArray(
+                    kfValues[frame], kfValues[frame + 1], w,
+                    getter(target, propName),
+                    arrDim
+                );
+            }
+            else {
+                var value;
+                if (isValueColor) {
+                    interpolateArray(
+                        kfValues[frame], kfValues[frame + 1], w,
+                        rgba, 1
+                    );
+                    value = rgba2String(rgba);
+                }
+                else if (isValueString) {
+                    // String is step(0.5)
+                    return interpolateString(kfValues[frame], kfValues[frame + 1], w);
+                }
+                else {
+                    value = interpolateNumber(kfValues[frame], kfValues[frame + 1], w);
+                }
+                setter(
+                    target,
+                    propName,
+                    value
+                );
+            }
+        }
+    };
+
+    var clip = new Clip({
+        target: animator._target,
+        life: trackMaxTime,
+        loop: animator._loop,
+        delay: animator._delay,
+        onframe: onframe,
+        ondestroy: oneTrackDone
+    });
+
+    if (easing && easing !== 'spline') {
+        clip.easing = easing;
+    }
+
+    return clip;
+}
+
+/**
+ * @alias module:zrender/animation/Animator
+ * @constructor
+ * @param {Object} target
+ * @param {boolean} loop
+ * @param {Function} getter
+ * @param {Function} setter
+ */
+var Animator = function(target, loop, getter, setter) {
+    this._tracks = {};
+    this._target = target;
+
+    this._loop = loop || false;
+
+    this._getter = getter || defaultGetter;
+    this._setter = setter || defaultSetter;
+
+    this._clipCount = 0;
+
+    this._delay = 0;
+
+    this._doneList = [];
+
+    this._onframeList = [];
+
+    this._clipList = [];
+};
+
+Animator.prototype = {
+    /**
+     * è®¾ç½®åŠ¨ç”»å…³é”®å¸§
+     * @param  {number} time å…³é”®å¸§æ—¶é—´ï¼Œå•ä½æ˜¯ms
+     * @param  {Object} props å…³é”®å¸§çš„å±žæ€§å€¼ï¼Œkey-valueè¡¨ç¤º
+     * @return {module:zrender/animation/Animator}
+     */
+    when: function(time /* ms */, props) {
+        var tracks = this._tracks;
+        for (var propName in props) {
+            if (!props.hasOwnProperty(propName)) {
+                continue;
+            }
+
+            if (!tracks[propName]) {
+                tracks[propName] = [];
+                // Invalid value
+                var value = this._getter(this._target, propName);
+                if (value == null) {
+                    // zrLog('Invalid property ' + propName);
+                    continue;
+                }
+                // If time is 0
+                //  Then props is given initialize value
+                // Else
+                //  Initialize value from current prop value
+                if (time !== 0) {
+                    tracks[propName].push({
+                        time: 0,
+                        value: cloneValue(value)
+                    });
+                }
+            }
+            tracks[propName].push({
+                time: time,
+                value: props[propName]
+            });
+        }
+        return this;
+    },
+    /**
+     * æ·»åŠ åŠ¨ç”»æ¯ä¸€å¸§çš„å›žè°ƒå‡½æ•°
+     * @param  {Function} callback
+     * @return {module:zrender/animation/Animator}
+     */
+    during: function (callback) {
+        this._onframeList.push(callback);
+        return this;
+    },
+
+    pause: function () {
+        for (var i = 0; i < this._clipList.length; i++) {
+            this._clipList[i].pause();
+        }
+        this._paused = true;
+    },
+
+    resume: function () {
+        for (var i = 0; i < this._clipList.length; i++) {
+            this._clipList[i].resume();
+        }
+        this._paused = false;
+    },
+
+    isPaused: function () {
+        return !!this._paused;
+    },
+
+    _doneCallback: function () {
+        // Clear all tracks
+        this._tracks = {};
+        // Clear all clips
+        this._clipList.length = 0;
+
+        var doneList = this._doneList;
+        var len = doneList.length;
+        for (var i = 0; i < len; i++) {
+            doneList[i].call(this);
+        }
+    },
+    /**
+     * å¼€å§‹æ‰§è¡ŒåŠ¨ç”»
+     * @param  {string|Function} [easing]
+     *         åŠ¨ç”»ç¼“åŠ¨å‡½æ•°ï¼Œè¯¦è§{@link module:zrender/animation/easing}
+     * @param  {boolean} forceAnimate
+     * @return {module:zrender/animation/Animator}
+     */
+    start: function (easing, forceAnimate) {
+
+        var self = this;
+        var clipCount = 0;
+
+        var oneTrackDone = function() {
+            clipCount--;
+            if (!clipCount) {
+                self._doneCallback();
+            }
+        };
+
+        var lastClip;
+        for (var propName in this._tracks) {
+            if (!this._tracks.hasOwnProperty(propName)) {
+                continue;
+            }
+            var clip = createTrackClip(
+                this, easing, oneTrackDone,
+                this._tracks[propName], propName, forceAnimate
+            );
+            if (clip) {
+                this._clipList.push(clip);
+                clipCount++;
+
+                // If start after added to animation
+                if (this.animation) {
+                    this.animation.addClip(clip);
+                }
+
+                lastClip = clip;
+            }
+        }
+
+        // Add during callback on the last clip
+        if (lastClip) {
+            var oldOnFrame = lastClip.onframe;
+            lastClip.onframe = function (target, percent) {
+                oldOnFrame(target, percent);
+
+                for (var i = 0; i < self._onframeList.length; i++) {
+                    self._onframeList[i](target, percent);
+                }
+            };
+        }
+
+        // This optimization will help the case that in the upper application
+        // the view may be refreshed frequently, where animation will be
+        // called repeatly but nothing changed.
+        if (!clipCount) {
+            this._doneCallback();
+        }
+        return this;
+    },
+    /**
+     * åœæ¢åŠ¨ç”»
+     * @param {boolean} forwardToLast If move to last frame before stop
+     */
+    stop: function (forwardToLast) {
+        var clipList = this._clipList;
+        var animation = this.animation;
+        for (var i = 0; i < clipList.length; i++) {
+            var clip = clipList[i];
+            if (forwardToLast) {
+                // Move to last frame before stop
+                clip.onframe(this._target, 1);
+            }
+            animation && animation.removeClip(clip);
+        }
+        clipList.length = 0;
+    },
+    /**
+     * è®¾ç½®åŠ¨ç”»å»¶è¿Ÿå¼€å§‹çš„æ—¶é—´
+     * @param  {number} time å•ä½ms
+     * @return {module:zrender/animation/Animator}
+     */
+    delay: function (time) {
+        this._delay = time;
+        return this;
+    },
+    /**
+     * æ·»åŠ åŠ¨ç”»ç»“æŸçš„å›žè°ƒ
+     * @param  {Function} cb
+     * @return {module:zrender/animation/Animator}
+     */
+    done: function(cb) {
+        if (cb) {
+            this._doneList.push(cb);
+        }
+        return this;
+    },
+
+    /**
+     * @return {Array.<module:zrender/animation/Clip>}
+     */
+    getClips: function () {
+        return this._clipList;
+    }
+};
+
+var dpr = 1;
+
+// If in browser environment
+if (typeof window !== 'undefined') {
+    dpr = Math.max(window.devicePixelRatio || 1, 1);
+}
+
+/**
+ * configé»˜è®¤é…ç½®é¡¹
+ * @exports zrender/config
+ * @author Kener (@Kener-æž—å³°, kener.linfeng@gmail.com)
+ */
+
+/**
+ * debugæ—¥å¿—é€‰é¡¹ï¼šcatchBrushExceptionä¸ºtrueä¸‹æœ‰æ•ˆ
+ * 0 : ä¸ç”Ÿæˆdebugæ•°æ®ï¼Œå‘å¸ƒç”¨
+ * 1 : å¼‚å¸¸æŠ›å‡ºï¼Œè°ƒè¯•ç”¨
+ * 2 : æŽ§åˆ¶å°è¾“å‡ºï¼Œè°ƒè¯•ç”¨
+ */
+var debugMode = 0;
+
+// retina å±å¹•ä¼˜åŒ–
+var devicePixelRatio = dpr;
+
+var log = function () {
+};
+
+if (debugMode === 1) {
+    log = function () {
+        for (var k in arguments) {
+            throw new Error(arguments[k]);
+        }
+    };
+}
+else if (debugMode > 1) {
+    log = function () {
+        for (var k in arguments) {
+            console.log(arguments[k]);
+        }
+    };
+}
+
+var zrLog = log;
+
+/**
+ * @alias modue:zrender/mixin/Animatable
+ * @constructor
+ */
+var Animatable = function () {
+
+    /**
+     * @type {Array.<module:zrender/animation/Animator>}
+     * @readOnly
+     */
+    this.animators = [];
+};
+
+Animatable.prototype = {
+
+    constructor: Animatable,
+
+    /**
+     * åŠ¨ç”»
+     *
+     * @param {string} path The path to fetch value from object, like 'a.b.c'.
+     * @param {boolean} [loop] Whether to loop animation.
+     * @return {module:zrender/animation/Animator}
+     * @example:
+     *     el.animate('style', false)
+     *         .when(1000, {x: 10} )
+     *         .done(function(){ // Animation done })
+     *         .start()
+     */
+    animate: function (path, loop) {
+        var target;
+        var animatingShape = false;
+        var el = this;
+        var zr = this.__zr;
+        if (path) {
+            var pathSplitted = path.split('.');
+            var prop = el;
+            // If animating shape
+            animatingShape = pathSplitted[0] === 'shape';
+            for (var i = 0, l = pathSplitted.length; i < l; i++) {
+                if (!prop) {
+                    continue;
+                }
+                prop = prop[pathSplitted[i]];
+            }
+            if (prop) {
+                target = prop;
+            }
+        }
+        else {
+            target = el;
+        }
+
+        if (!target) {
+            zrLog(
+                'Property "'
+                + path
+                + '" is not existed in element '
+                + el.id
+            );
+            return;
+        }
+
+        var animators = el.animators;
+
+        var animator = new Animator(target, loop);
+
+        animator.during(function (target) {
+            el.dirty(animatingShape);
+        })
+        .done(function () {
+            // FIXME Animator will not be removed if use `Animator#stop` to stop animation
+            animators.splice(indexOf(animators, animator), 1);
+        });
+
+        animators.push(animator);
+
+        // If animate after added to the zrender
+        if (zr) {
+            zr.animation.addAnimator(animator);
+        }
+
+        return animator;
+    },
+
+    /**
+     * åœæ¢åŠ¨ç”»
+     * @param {boolean} forwardToLast If move to last frame before stop
+     */
+    stopAnimation: function (forwardToLast) {
+        var animators = this.animators;
+        var len = animators.length;
+        for (var i = 0; i < len; i++) {
+            animators[i].stop(forwardToLast);
+        }
+        animators.length = 0;
+
+        return this;
+    },
+
+    /**
+     * Caution: this method will stop previous animation.
+     * So do not use this method to one element twice before
+     * animation starts, unless you know what you are doing.
+     * @param {Object} target
+     * @param {number} [time=500] Time in ms
+     * @param {string} [easing='linear']
+     * @param {number} [delay=0]
+     * @param {Function} [callback]
+     * @param {Function} [forceAnimate] Prevent stop animation and callback
+     *        immediently when target values are the same as current values.
+     *
+     * @example
+     *  // Animate position
+     *  el.animateTo({
+     *      position: [10, 10]
+     *  }, function () { // done })
+     *
+     *  // Animate shape, style and position in 100ms, delayed 100ms, with cubicOut easing
+     *  el.animateTo({
+     *      shape: {
+     *          width: 500
+     *      },
+     *      style: {
+     *          fill: 'red'
+     *      }
+     *      position: [10, 10]
+     *  }, 100, 100, 'cubicOut', function () { // done })
+     */
+        // TODO Return animation key
+    animateTo: function (target, time, delay, easing, callback, forceAnimate) {
+        // animateTo(target, time, easing, callback);
+        if (isString(delay)) {
+            callback = easing;
+            easing = delay;
+            delay = 0;
+        }
+        // animateTo(target, time, delay, callback);
+        else if (isFunction$1(easing)) {
+            callback = easing;
+            easing = 'linear';
+            delay = 0;
+        }
+        // animateTo(target, time, callback);
+        else if (isFunction$1(delay)) {
+            callback = delay;
+            delay = 0;
+        }
+        // animateTo(target, callback)
+        else if (isFunction$1(time)) {
+            callback = time;
+            time = 500;
+        }
+        // animateTo(target)
+        else if (!time) {
+            time = 500;
+        }
+        // Stop all previous animations
+        this.stopAnimation();
+        this._animateToShallow('', this, target, time, delay);
+
+        // Animators may be removed immediately after start
+        // if there is nothing to animate
+        var animators = this.animators.slice();
+        var count = animators.length;
+        function done() {
+            count--;
+            if (!count) {
+                callback && callback();
+            }
+        }
+
+        // No animators. This should be checked before animators[i].start(),
+        // because 'done' may be executed immediately if no need to animate.
+        if (!count) {
+            callback && callback();
+        }
+        // Start after all animators created
+        // Incase any animator is done immediately when all animation properties are not changed
+        for (var i = 0; i < animators.length; i++) {
+            animators[i]
+                .done(done)
+                .start(easing, forceAnimate);
+        }
+    },
+
+    /**
+     * @private
+     * @param {string} path=''
+     * @param {Object} source=this
+     * @param {Object} target
+     * @param {number} [time=500]
+     * @param {number} [delay=0]
+     *
+     * @example
+     *  // Animate position
+     *  el._animateToShallow({
+     *      position: [10, 10]
+     *  })
+     *
+     *  // Animate shape, style and position in 100ms, delayed 100ms
+     *  el._animateToShallow({
+     *      shape: {
+     *          width: 500
+     *      },
+     *      style: {
+     *          fill: 'red'
+     *      }
+     *      position: [10, 10]
+     *  }, 100, 100)
+     */
+    _animateToShallow: function (path, source, target, time, delay) {
+        var objShallow = {};
+        var propertyCount = 0;
+        for (var name in target) {
+            if (!target.hasOwnProperty(name)) {
+                continue;
+            }
+
+            if (source[name] != null) {
+                if (isObject$1(target[name]) && !isArrayLike(target[name])) {
+                    this._animateToShallow(
+                        path ? path + '.' + name : name,
+                        source[name],
+                        target[name],
+                        time,
+                        delay
+                    );
+                }
+                else {
+                    objShallow[name] = target[name];
+                    propertyCount++;
+                }
+            }
+            else if (target[name] != null) {
+                // Attr directly if not has property
+                // FIXME, if some property not needed for element ?
+                if (!path) {
+                    this.attr(name, target[name]);
+                }
+                else {  // Shape or style
+                    var props = {};
+                    props[path] = {};
+                    props[path][name] = target[name];
+                    this.attr(props);
+                }
+            }
+        }
+
+        if (propertyCount > 0) {
+            this.animate(path, false)
+                .when(time == null ? 500 : time, objShallow)
+                .delay(delay || 0);
+        }
+
+        return this;
+    }
+};
+
+/**
+ * @alias module:zrender/Element
+ * @constructor
+ * @extends {module:zrender/mixin/Animatable}
+ * @extends {module:zrender/mixin/Transformable}
+ * @extends {module:zrender/mixin/Eventful}
+ */
+var Element = function (opts) { // jshint ignore:line
+
+    Transformable.call(this, opts);
+    Eventful.call(this, opts);
+    Animatable.call(this, opts);
+
+    /**
+     * ç”»å¸ƒå…ƒç´ ID
+     * @type {string}
+     */
+    this.id = opts.id || guid();
+};
+
+Element.prototype = {
+
+    /**
+     * å…ƒç´ ç±»åž‹
+     * Element type
+     * @type {string}
+     */
+    type: 'element',
+
+    /**
+     * å…ƒç´ åå—
+     * Element name
+     * @type {string}
+     */
+    name: '',
+
+    /**
+     * ZRender å®žä¾‹å¯¹è±¡ï¼Œä¼šåœ¨ element æ·»åŠ åˆ° zrender å®žä¾‹ä¸åŽè‡ªåŠ¨èµ‹å€¼
+     * ZRender instance will be assigned when element is associated with zrender
+     * @name module:/zrender/Element#__zr
+     * @type {module:zrender/ZRender}
+     */
+    __zr: null,
+
+    /**
+     * å›¾å½¢æ˜¯å¦å¿½ç•¥ï¼Œä¸ºtrueæ—¶å¿½ç•¥å›¾å½¢çš„ç»˜åˆ¶ä»¥åŠäº‹ä»¶è§¦å‘
+     * If ignore drawing and events of the element object
+     * @name module:/zrender/Element#ignore
+     * @type {boolean}
+     * @default false
+     */
+    ignore: false,
+
+    /**
+     * ç”¨äºŽè£å‰ªçš„è·¯å¾„(shape)ï¼Œæ‰€æœ‰ Group å†…çš„è·¯å¾„åœ¨ç»˜åˆ¶æ—¶éƒ½ä¼šè¢«è¿™ä¸ªè·¯å¾„è£å‰ª
+     * è¯¥è·¯å¾„ä¼šç»§æ‰¿è¢«è£å‡å¯¹è±¡çš„å˜æ¢
+     * @type {module:zrender/graphic/Path}
+     * @see http://www.w3.org/TR/2dcontext/#clipping-region
+     * @readOnly
+     */
+    clipPath: null,
+
+    /**
+     * æ˜¯å¦æ˜¯ Group
+     * @type {boolean}
+     */
+    isGroup: false,
+
+    /**
+     * Drift element
+     * @param  {number} dx dx on the global space
+     * @param  {number} dy dy on the global space
+     */
+    drift: function (dx, dy) {
+        switch (this.draggable) {
+            case 'horizontal':
+                dy = 0;
+                break;
+            case 'vertical':
+                dx = 0;
+                break;
+        }
+
+        var m = this.transform;
+        if (!m) {
+            m = this.transform = [1, 0, 0, 1, 0, 0];
+        }
+        m[4] += dx;
+        m[5] += dy;
+
+        this.decomposeTransform();
+        this.dirty(false);
+    },
+
+    /**
+     * Hook before update
+     */
+    beforeUpdate: function () {},
+    /**
+     * Hook after update
+     */
+    afterUpdate: function () {},
+    /**
+     * Update each frame
+     */
+    update: function () {
+        this.updateTransform();
+    },
+
+    /**
+     * @param  {Function} cb
+     * @param  {}   context
+     */
+    traverse: function (cb, context) {},
+
+    /**
+     * @protected
+     */
+    attrKV: function (key, value) {
+        if (key === 'position' || key === 'scale' || key === 'origin') {
+            // Copy the array
+            if (value) {
+                var target = this[key];
+                if (!target) {
+                    target = this[key] = [];
+                }
+                target[0] = value[0];
+                target[1] = value[1];
+            }
+        }
+        else {
+            this[key] = value;
+        }
+    },
+
+    /**
+     * Hide the element
+     */
+    hide: function () {
+        this.ignore = true;
+        this.__zr && this.__zr.refresh();
+    },
+
+    /**
+     * Show the element
+     */
+    show: function () {
+        this.ignore = false;
+        this.__zr && this.__zr.refresh();
+    },
+
+    /**
+     * @param {string|Object} key
+     * @param {*} value
+     */
+    attr: function (key, value) {
+        if (typeof key === 'string') {
+            this.attrKV(key, value);
+        }
+        else if (isObject$1(key)) {
+            for (var name in key) {
+                if (key.hasOwnProperty(name)) {
+                    this.attrKV(name, key[name]);
+                }
+            }
+        }
+
+        this.dirty(false);
+
+        return this;
+    },
+
+    /**
+     * @param {module:zrender/graphic/Path} clipPath
+     */
+    setClipPath: function (clipPath) {
+        var zr = this.__zr;
+        if (zr) {
+            clipPath.addSelfToZr(zr);
+        }
+
+        // Remove previous clip path
+        if (this.clipPath && this.clipPath !== clipPath) {
+            this.removeClipPath();
+        }
+
+        this.clipPath = clipPath;
+        clipPath.__zr = zr;
+        clipPath.__clipTarget = this;
+
+        this.dirty(false);
+    },
+
+    /**
+     */
+    removeClipPath: function () {
+        var clipPath = this.clipPath;
+        if (clipPath) {
+            if (clipPath.__zr) {
+                clipPath.removeSelfFromZr(clipPath.__zr);
+            }
+
+            clipPath.__zr = null;
+            clipPath.__clipTarget = null;
+            this.clipPath = null;
+
+            this.dirty(false);
+        }
+    },
+
+    /**
+     * Add self from zrender instance.
+     * Not recursively because it will be invoked when element added to storage.
+     * @param {module:zrender/ZRender} zr
+     */
+    addSelfToZr: function (zr) {
+        this.__zr = zr;
+        // æ·»åŠ åŠ¨ç”»
+        var animators = this.animators;
+        if (animators) {
+            for (var i = 0; i < animators.length; i++) {
+                zr.animation.addAnimator(animators[i]);
+            }
+        }
+
+        if (this.clipPath) {
+            this.clipPath.addSelfToZr(zr);
+        }
+    },
+
+    /**
+     * Remove self from zrender instance.
+     * Not recursively because it will be invoked when element added to storage.
+     * @param {module:zrender/ZRender} zr
+     */
+    removeSelfFromZr: function (zr) {
+        this.__zr = null;
+        // ç§»é™¤åŠ¨ç”»
+        var animators = this.animators;
+        if (animators) {
+            for (var i = 0; i < animators.length; i++) {
+                zr.animation.removeAnimator(animators[i]);
+            }
+        }
+
+        if (this.clipPath) {
+            this.clipPath.removeSelfFromZr(zr);
+        }
+    }
+};
+
+mixin(Element, Animatable);
+mixin(Element, Transformable);
+mixin(Element, Eventful);
+
+/**
+ * @module echarts/core/BoundingRect
+ */
+
+var v2ApplyTransform = applyTransform;
+var mathMin = Math.min;
+var mathMax = Math.max;
+
+/**
+ * @alias module:echarts/core/BoundingRect
+ */
+function BoundingRect(x, y, width, height) {
+
+    if (width < 0) {
+        x = x + width;
+        width = -width;
+    }
+    if (height < 0) {
+        y = y + height;
+        height = -height;
+    }
+
+    /**
+     * @type {number}
+     */
+    this.x = x;
+    /**
+     * @type {number}
+     */
+    this.y = y;
+    /**
+     * @type {number}
+     */
+    this.width = width;
+    /**
+     * @type {number}
+     */
+    this.height = height;
+}
+
+BoundingRect.prototype = {
+
+    constructor: BoundingRect,
+
+    /**
+     * @param {module:echarts/core/BoundingRect} other
+     */
+    union: function (other) {
+        var x = mathMin(other.x, this.x);
+        var y = mathMin(other.y, this.y);
+
+        this.width = mathMax(
+                other.x + other.width,
+                this.x + this.width
+            ) - x;
+        this.height = mathMax(
+                other.y + other.height,
+                this.y + this.height
+            ) - y;
+        this.x = x;
+        this.y = y;
+    },
+
+    /**
+     * @param {Array.<number>} m
+     * @methods
+     */
+    applyTransform: (function () {
+        var lt = [];
+        var rb = [];
+        var lb = [];
+        var rt = [];
+        return function (m) {
+            // In case usage like this
+            // el.getBoundingRect().applyTransform(el.transform)
+            // And element has no transform
+            if (!m) {
+                return;
+            }
+            lt[0] = lb[0] = this.x;
+            lt[1] = rt[1] = this.y;
+            rb[0] = rt[0] = this.x + this.width;
+            rb[1] = lb[1] = this.y + this.height;
+
+            v2ApplyTransform(lt, lt, m);
+            v2ApplyTransform(rb, rb, m);
+            v2ApplyTransform(lb, lb, m);
+            v2ApplyTransform(rt, rt, m);
+
+            this.x = mathMin(lt[0], rb[0], lb[0], rt[0]);
+            this.y = mathMin(lt[1], rb[1], lb[1], rt[1]);
+            var maxX = mathMax(lt[0], rb[0], lb[0], rt[0]);
+            var maxY = mathMax(lt[1], rb[1], lb[1], rt[1]);
+            this.width = maxX - this.x;
+            this.height = maxY - this.y;
+        };
+    })(),
+
+    /**
+     * Calculate matrix of transforming from self to target rect
+     * @param  {module:zrender/core/BoundingRect} b
+     * @return {Array.<number>}
+     */
+    calculateTransform: function (b) {
+        var a = this;
+        var sx = b.width / a.width;
+        var sy = b.height / a.height;
+
+        var m = create$1();
+
+        // çŸ©é˜µå³ä¹˜
+        translate(m, m, [-a.x, -a.y]);
+        scale$1(m, m, [sx, sy]);
+        translate(m, m, [b.x, b.y]);
+
+        return m;
+    },
+
+    /**
+     * @param {(module:echarts/core/BoundingRect|Object)} b
+     * @return {boolean}
+     */
+    intersect: function (b) {
+        if (!b) {
+            return false;
+        }
+
+        if (!(b instanceof BoundingRect)) {
+            // Normalize negative width/height.
+            b = BoundingRect.create(b);
+        }
+
+        var a = this;
+        var ax0 = a.x;
+        var ax1 = a.x + a.width;
+        var ay0 = a.y;
+        var ay1 = a.y + a.height;
+
+        var bx0 = b.x;
+        var bx1 = b.x + b.width;
+        var by0 = b.y;
+        var by1 = b.y + b.height;
+
+        return ! (ax1 < bx0 || bx1 < ax0 || ay1 < by0 || by1 < ay0);
+    },
+
+    contain: function (x, y) {
+        var rect = this;
+        return x >= rect.x
+            && x <= (rect.x + rect.width)
+            && y >= rect.y
+            && y <= (rect.y + rect.height);
+    },
+
+    /**
+     * @return {module:echarts/core/BoundingRect}
+     */
+    clone: function () {
+        return new BoundingRect(this.x, this.y, this.width, this.height);
+    },
+
+    /**
+     * Copy from another rect
+     */
+    copy: function (other) {
+        this.x = other.x;
+        this.y = other.y;
+        this.width = other.width;
+        this.height = other.height;
+    },
+
+    plain: function () {
+        return {
+            x: this.x,
+            y: this.y,
+            width: this.width,
+            height: this.height
+        };
+    }
+};
+
+/**
+ * @param {Object|module:zrender/core/BoundingRect} rect
+ * @param {number} rect.x
+ * @param {number} rect.y
+ * @param {number} rect.width
+ * @param {number} rect.height
+ * @return {module:zrender/core/BoundingRect}
+ */
+BoundingRect.create = function (rect) {
+    return new BoundingRect(rect.x, rect.y, rect.width, rect.height);
+};
+
+/**
+ * Groupæ˜¯ä¸€ä¸ªå®¹å™¨ï¼Œå¯ä»¥æ’å…¥åèŠ‚ç‚¹ï¼ŒGroupçš„å˜æ¢ä¹Ÿä¼šè¢«åº”ç”¨åˆ°åèŠ‚ç‚¹ä¸Š
+ * @module zrender/graphic/Group
+ * @example
+ *     var Group = require('zrender/container/Group');
+ *     var Circle = require('zrender/graphic/shape/Circle');
+ *     var g = new Group();
+ *     g.position[0] = 100;
+ *     g.position[1] = 100;
+ *     g.add(new Circle({
+ *         style: {
+ *             x: 100,
+ *             y: 100,
+ *             r: 20,
+ *         }
+ *     }));
+ *     zr.add(g);
+ */
+
+/**
+ * @alias module:zrender/graphic/Group
+ * @constructor
+ * @extends module:zrender/mixin/Transformable
+ * @extends module:zrender/mixin/Eventful
+ */
+var Group = function (opts) {
+
+    opts = opts || {};
+
+    Element.call(this, opts);
+
+    for (var key in opts) {
+        if (opts.hasOwnProperty(key)) {
+            this[key] = opts[key];
+        }
+    }
+
+    this._children = [];
+
+    this.__storage = null;
+
+    this.__dirty = true;
+};
+
+Group.prototype = {
+
+    constructor: Group,
+
+    isGroup: true,
+
+    /**
+     * @type {string}
+     */
+    type: 'group',
+
+    /**
+     * æ‰€æœ‰åå™å…ƒç´ æ˜¯å¦å“åº”é¼ æ ‡äº‹ä»¶
+     * @name module:/zrender/container/Group#silent
+     * @type {boolean}
+     * @default false
+     */
+    silent: false,
+
+    /**
+     * @return {Array.<module:zrender/Element>}
+     */
+    children: function () {
+        return this._children.slice();
+    },
+
+    /**
+     * èŽ·å–æŒ‡å®š index çš„å„¿åèŠ‚ç‚¹
+     * @param  {number} idx
+     * @return {module:zrender/Element}
+     */
+    childAt: function (idx) {
+        return this._children[idx];
+    },
+
+    /**
+     * èŽ·å–æŒ‡å®šåå—çš„å„¿åèŠ‚ç‚¹
+     * @param  {string} name
+     * @return {module:zrender/Element}
+     */
+    childOfName: function (name) {
+        var children = this._children;
+        for (var i = 0; i < children.length; i++) {
+            if (children[i].name === name) {
+                return children[i];
+            }
+            }
+    },
+
+    /**
+     * @return {number}
+     */
+    childCount: function () {
+        return this._children.length;
+    },
+
+    /**
+     * æ·»åŠ åèŠ‚ç‚¹åˆ°æœ€åŽ
+     * @param {module:zrender/Element} child
+     */
+    add: function (child) {
+        if (child && child !== this && child.parent !== this) {
+
+            this._children.push(child);
+
+            this._doAdd(child);
+        }
+
+        return this;
+    },
+
+    /**
+     * æ·»åŠ åèŠ‚ç‚¹åœ¨ nextSibling ä¹‹å‰
+     * @param {module:zrender/Element} child
+     * @param {module:zrender/Element} nextSibling
+     */
+    addBefore: function (child, nextSibling) {
+        if (child && child !== this && child.parent !== this
+            && nextSibling && nextSibling.parent === this) {
+
+            var children = this._children;
+            var idx = children.indexOf(nextSibling);
+
+            if (idx >= 0) {
+                children.splice(idx, 0, child);
+                this._doAdd(child);
+            }
+        }
+
+        return this;
+    },
+
+    _doAdd: function (child) {
+        if (child.parent) {
+            child.parent.remove(child);
+        }
+
+        child.parent = this;
+
+        var storage = this.__storage;
+        var zr = this.__zr;
+        if (storage && storage !== child.__storage) {
+
+            storage.addToStorage(child);
+
+            if (child instanceof Group) {
+                child.addChildrenToStorage(storage);
+            }
+        }
+
+        zr && zr.refresh();
+    },
+
+    /**
+     * ç§»é™¤åèŠ‚ç‚¹
+     * @param {module:zrender/Element} child
+     */
+    remove: function (child) {
+        var zr = this.__zr;
+        var storage = this.__storage;
+        var children = this._children;
+
+        var idx = indexOf(children, child);
+        if (idx < 0) {
+            return this;
+        }
+        children.splice(idx, 1);
+
+        child.parent = null;
+
+        if (storage) {
+
+            storage.delFromStorage(child);
+
+            if (child instanceof Group) {
+                child.delChildrenFromStorage(storage);
+            }
+        }
+
+        zr && zr.refresh();
+
+        return this;
+    },
+
+    /**
+     * ç§»é™¤æ‰€æœ‰åèŠ‚ç‚¹
+     */
+    removeAll: function () {
+        var children = this._children;
+        var storage = this.__storage;
+        var child;
+        var i;
+        for (i = 0; i < children.length; i++) {
+            child = children[i];
+            if (storage) {
+                storage.delFromStorage(child);
+                if (child instanceof Group) {
+                    child.delChildrenFromStorage(storage);
+                }
+            }
+            child.parent = null;
+        }
+        children.length = 0;
+
+        return this;
+    },
+
+    /**
+     * éåŽ†æ‰€æœ‰åèŠ‚ç‚¹
+     * @param  {Function} cb
+     * @param  {}   context
+     */
+    eachChild: function (cb, context) {
+        var children = this._children;
+        for (var i = 0; i < children.length; i++) {
+            var child = children[i];
+            cb.call(context, child, i);
+        }
+        return this;
+    },
+
+    /**
+     * æ·±åº¦ä¼˜å…ˆéåŽ†æ‰€æœ‰åå™èŠ‚ç‚¹
+     * @param  {Function} cb
+     * @param  {}   context
+     */
+    traverse: function (cb, context) {
+        for (var i = 0; i < this._children.length; i++) {
+            var child = this._children[i];
+            cb.call(context, child);
+
+            if (child.type === 'group') {
+                child.traverse(cb, context);
+            }
+        }
+        return this;
+    },
+
+    addChildrenToStorage: function (storage) {
+        for (var i = 0; i < this._children.length; i++) {
+            var child = this._children[i];
+            storage.addToStorage(child);
+            if (child instanceof Group) {
+                child.addChildrenToStorage(storage);
+            }
+        }
+    },
+
+    delChildrenFromStorage: function (storage) {
+        for (var i = 0; i < this._children.length; i++) {
+            var child = this._children[i];
+            storage.delFromStorage(child);
+            if (child instanceof Group) {
+                child.delChildrenFromStorage(storage);
+            }
+        }
+    },
+
+    dirty: function () {
+        this.__dirty = true;
+        this.__zr && this.__zr.refresh();
+        return this;
+    },
+
+    /**
+     * @return {module:zrender/core/BoundingRect}
+     */
+    getBoundingRect: function (includeChildren) {
+        // TODO Caching
+        var rect = null;
+        var tmpRect = new BoundingRect(0, 0, 0, 0);
+        var children = includeChildren || this._children;
+        var tmpMat = [];
+
+        for (var i = 0; i < children.length; i++) {
+            var child = children[i];
+            if (child.ignore || child.invisible) {
+                continue;
+            }
+
+            var childRect = child.getBoundingRect();
+            var transform = child.getLocalTransform(tmpMat);
+            // TODO
+            // The boundingRect cacluated by transforming original
+            // rect may be bigger than the actual bundingRect when rotation
+            // is used. (Consider a circle rotated aginst its center, where
+            // the actual boundingRect should be the same as that not be
+            // rotated.) But we can not find better approach to calculate
+            // actual boundingRect yet, considering performance.
+            if (transform) {
+                tmpRect.copy(childRect);
+                tmpRect.applyTransform(transform);
+                rect = rect || tmpRect.clone();
+                rect.union(tmpRect);
+            }
+            else {
+                rect = rect || childRect.clone();
+                rect.union(childRect);
+            }
+        }
+        return rect || tmpRect;
+    }
+};
+
+inherits(Group, Element);
+
+// https://github.com/mziccard/node-timsort
+var DEFAULT_MIN_MERGE = 32;
+
+var DEFAULT_MIN_GALLOPING = 7;
+
+function minRunLength(n) {
+    var r = 0;
+
+    while (n >= DEFAULT_MIN_MERGE) {
+        r |= n & 1;
+        n >>= 1;
+    }
+
+    return n + r;
+}
+
+function makeAscendingRun(array, lo, hi, compare) {
+    var runHi = lo + 1;
+
+    if (runHi === hi) {
+        return 1;
+    }
+
+    if (compare(array[runHi++], array[lo]) < 0) {
+        while (runHi < hi && compare(array[runHi], array[runHi - 1]) < 0) {
+            runHi++;
+        }
+
+        reverseRun(array, lo, runHi);
+    }
+    else {
+        while (runHi < hi && compare(array[runHi], array[runHi - 1]) >= 0) {
+            runHi++;
+        }
+    }
+
+    return runHi - lo;
+}
+
+function reverseRun(array, lo, hi) {
+    hi--;
+
+    while (lo < hi) {
+        var t = array[lo];
+        array[lo++] = array[hi];
+        array[hi--] = t;
+    }
+}
+
+function binaryInsertionSort(array, lo, hi, start, compare) {
+    if (start === lo) {
+        start++;
+    }
+
+    for (; start < hi; start++) {
+        var pivot = array[start];
+
+        var left = lo;
+        var right = start;
+        var mid;
+
+        while (left < right) {
+            mid = left + right >>> 1;
+
+            if (compare(pivot, array[mid]) < 0) {
+                right = mid;
+            }
+            else {
+                left = mid + 1;
+            }
+        }
+
+        var n = start - left;
+
+        switch (n) {
+            case 3:
+                array[left + 3] = array[left + 2];
+
+            case 2:
+                array[left + 2] = array[left + 1];
+
+            case 1:
+                array[left + 1] = array[left];
+                break;
+            default:
+                while (n > 0) {
+                    array[left + n] = array[left + n - 1];
+                    n--;
+                }
+        }
+
+        array[left] = pivot;
+    }
+}
+
+function gallopLeft(value, array, start, length, hint, compare) {
+    var lastOffset = 0;
+    var maxOffset = 0;
+    var offset = 1;
+
+    if (compare(value, array[start + hint]) > 0) {
+        maxOffset = length - hint;
+
+        while (offset < maxOffset && compare(value, array[start + hint + offset]) > 0) {
+            lastOffset = offset;
+            offset = (offset << 1) + 1;
+
+            if (offset <= 0) {
+                offset = maxOffset;
+            }
+        }
+
+        if (offset > maxOffset) {
+            offset = maxOffset;
+        }
+
+        lastOffset += hint;
+        offset += hint;
+    }
+    else {
+        maxOffset = hint + 1;
+        while (offset < maxOffset && compare(value, array[start + hint - offset]) <= 0) {
+            lastOffset = offset;
+            offset = (offset << 1) + 1;
+
+            if (offset <= 0) {
+                offset = maxOffset;
+            }
+        }
+        if (offset > maxOffset) {
+            offset = maxOffset;
+        }
+
+        var tmp = lastOffset;
+        lastOffset = hint - offset;
+        offset = hint - tmp;
+    }
+
+    lastOffset++;
+    while (lastOffset < offset) {
+        var m = lastOffset + (offset - lastOffset >>> 1);
+
+        if (compare(value, array[start + m]) > 0) {
+            lastOffset = m + 1;
+        }
+        else {
+            offset = m;
+        }
+    }
+    return offset;
+}
+
+function gallopRight(value, array, start, length, hint, compare) {
+    var lastOffset = 0;
+    var maxOffset = 0;
+    var offset = 1;
+
+    if (compare(value, array[start + hint]) < 0) {
+        maxOffset = hint + 1;
+
+        while (offset < maxOffset && compare(value, array[start + hint - offset]) < 0) {
+            lastOffset = offset;
+            offset = (offset << 1) + 1;
+
+            if (offset <= 0) {
+                offset = maxOffset;
+            }
+        }
+
+        if (offset > maxOffset) {
+            offset = maxOffset;
+        }
+
+        var tmp = lastOffset;
+        lastOffset = hint - offset;
+        offset = hint - tmp;
+    }
+    else {
+        maxOffset = length - hint;
+
+        while (offset < maxOffset && compare(value, array[start + hint + offset]) >= 0) {
+            lastOffset = offset;
+            offset = (offset << 1) + 1;
+
+            if (offset <= 0) {
+                offset = maxOffset;
+            }
+        }
+
+        if (offset > maxOffset) {
+            offset = maxOffset;
+        }
+
+        lastOffset += hint;
+        offset += hint;
+    }
+
+    lastOffset++;
+
+    while (lastOffset < offset) {
+        var m = lastOffset + (offset - lastOffset >>> 1);
+
+        if (compare(value, array[start + m]) < 0) {
+            offset = m;
+        }
+        else {
+            lastOffset = m + 1;
+        }
+    }
+
+    return offset;
+}
+
+function TimSort(array, compare) {
+    var minGallop = DEFAULT_MIN_GALLOPING;
+    var runStart;
+    var runLength;
+    var stackSize = 0;
+
+    var tmp = [];
+
+    runStart = [];
+    runLength = [];
+
+    function pushRun(_runStart, _runLength) {
+        runStart[stackSize] = _runStart;
+        runLength[stackSize] = _runLength;
+        stackSize += 1;
+    }
+
+    function mergeRuns() {
+        while (stackSize > 1) {
+            var n = stackSize - 2;
+
+            if (n >= 1 && runLength[n - 1] <= runLength[n] + runLength[n + 1] || n >= 2 && runLength[n - 2] <= runLength[n] + runLength[n - 1]) {
+                if (runLength[n - 1] < runLength[n + 1]) {
+                    n--;
+                }
+            }
+            else if (runLength[n] > runLength[n + 1]) {
+                break;
+            }
+            mergeAt(n);
+        }
+    }
+
+    function forceMergeRuns() {
+        while (stackSize > 1) {
+            var n = stackSize - 2;
+
+            if (n > 0 && runLength[n - 1] < runLength[n + 1]) {
+                n--;
+            }
+
+            mergeAt(n);
+        }
+    }
+
+    function mergeAt(i) {
+        var start1 = runStart[i];
+        var length1 = runLength[i];
+        var start2 = runStart[i + 1];
+        var length2 = runLength[i + 1];
+
+        runLength[i] = length1 + length2;
+
+        if (i === stackSize - 3) {
+            runStart[i + 1] = runStart[i + 2];
+            runLength[i + 1] = runLength[i + 2];
+        }
+
+        stackSize--;
+
+        var k = gallopRight(array[start2], array, start1, length1, 0, compare);
+        start1 += k;
+        length1 -= k;
+
+        if (length1 === 0) {
+            return;
+        }
+
+        length2 = gallopLeft(array[start1 + length1 - 1], array, start2, length2, length2 - 1, compare);
+
+        if (length2 === 0) {
+            return;
+        }
+
+        if (length1 <= length2) {
+            mergeLow(start1, length1, start2, length2);
+        }
+        else {
+            mergeHigh(start1, length1, start2, length2);
+        }
+    }
+
+    function mergeLow(start1, length1, start2, length2) {
+        var i = 0;
+
+        for (i = 0; i < length1; i++) {
+            tmp[i] = array[start1 + i];
+        }
+
+        var cursor1 = 0;
+        var cursor2 = start2;
+        var dest = start1;
+
+        array[dest++] = array[cursor2++];
+
+        if (--length2 === 0) {
+            for (i = 0; i < length1; i++) {
+                array[dest + i] = tmp[cursor1 + i];
+            }
+            return;
+        }
+
+        if (length1 === 1) {
+            for (i = 0; i < length2; i++) {
+                array[dest + i] = array[cursor2 + i];
+            }
+            array[dest + length2] = tmp[cursor1];
+            return;
+        }
+
+        var _minGallop = minGallop;
+        var count1, count2, exit;
+
+        while (1) {
+            count1 = 0;
+            count2 = 0;
+            exit = false;
+
+            do {
+                if (compare(array[cursor2], tmp[cursor1]) < 0) {
+                    array[dest++] = array[cursor2++];
+                    count2++;
+                    count1 = 0;
+
+                    if (--length2 === 0) {
+                        exit = true;
+                        break;
+                    }
+                }
+                else {
+                    array[dest++] = tmp[cursor1++];
+                    count1++;
+                    count2 = 0;
+                    if (--length1 === 1) {
+                        exit = true;
+                        break;
+                    }
+                }
+            } while ((count1 | count2) < _minGallop);
+
+            if (exit) {
+                break;
+            }
+
+            do {
+                count1 = gallopRight(array[cursor2], tmp, cursor1, length1, 0, compare);
+
+                if (count1 !== 0) {
+                    for (i = 0; i < count1; i++) {
+                        array[dest + i] = tmp[cursor1 + i];
+                    }
+
+                    dest += count1;
+                    cursor1 += count1;
+                    length1 -= count1;
+                    if (length1 <= 1) {
+                        exit = true;
+                        break;
+                    }
+                }
+
+                array[dest++] = array[cursor2++];
+
+                if (--length2 === 0) {
+                    exit = true;
+                    break;
+                }
+
+                count2 = gallopLeft(tmp[cursor1], array, cursor2, length2, 0, compare);
+
+                if (count2 !== 0) {
+                    for (i = 0; i < count2; i++) {
+                        array[dest + i] = array[cursor2 + i];
+                    }
+
+                    dest += count2;
+                    cursor2 += count2;
+                    length2 -= count2;
+
+                    if (length2 === 0) {
+                        exit = true;
+                        break;
+                    }
+                }
+                array[dest++] = tmp[cursor1++];
+
+                if (--length1 === 1) {
+                    exit = true;
+                    break;
+                }
+
+                _minGallop--;
+            } while (count1 >= DEFAULT_MIN_GALLOPING || count2 >= DEFAULT_MIN_GALLOPING);
+
+            if (exit) {
+                break;
+            }
+
+            if (_minGallop < 0) {
+                _minGallop = 0;
+            }
+
+            _minGallop += 2;
+        }
+
+        minGallop = _minGallop;
+
+        minGallop < 1 && (minGallop = 1);
+
+        if (length1 === 1) {
+            for (i = 0; i < length2; i++) {
+                array[dest + i] = array[cursor2 + i];
+            }
+            array[dest + length2] = tmp[cursor1];
+        }
+        else if (length1 === 0) {
+            throw new Error();
+            // throw new Error('mergeLow preconditions were not respected');
+        }
+        else {
+            for (i = 0; i < length1; i++) {
+                array[dest + i] = tmp[cursor1 + i];
+            }
+        }
+    }
+
+    function mergeHigh (start1, length1, start2, length2) {
+        var i = 0;
+
+        for (i = 0; i < length2; i++) {
+            tmp[i] = array[start2 + i];
+        }
+
+        var cursor1 = start1 + length1 - 1;
+        var cursor2 = length2 - 1;
+        var dest = start2 + length2 - 1;
+        var customCursor = 0;
+        var customDest = 0;
+
+        array[dest--] = array[cursor1--];
+
+        if (--length1 === 0) {
+            customCursor = dest - (length2 - 1);
+
+            for (i = 0; i < length2; i++) {
+                array[customCursor + i] = tmp[i];
+            }
+
+            return;
+        }
+
+        if (length2 === 1) {
+            dest -= length1;
+            cursor1 -= length1;
+            customDest = dest + 1;
+            customCursor = cursor1 + 1;
+
+            for (i = length1 - 1; i >= 0; i--) {
+                array[customDest + i] = array[customCursor + i];
+            }
+
+            array[dest] = tmp[cursor2];
+            return;
+        }
+
+        var _minGallop = minGallop;
+
+        while (true) {
+            var count1 = 0;
+            var count2 = 0;
+            var exit = false;
+
+            do {
+                if (compare(tmp[cursor2], array[cursor1]) < 0) {
+                    array[dest--] = array[cursor1--];
+                    count1++;
+                    count2 = 0;
+                    if (--length1 === 0) {
+                        exit = true;
+                        break;
+                    }
+                }
+                else {
+                    array[dest--] = tmp[cursor2--];
+                    count2++;
+                    count1 = 0;
+                    if (--length2 === 1) {
+                        exit = true;
+                        break;
+                    }
+                }
+            } while ((count1 | count2) < _minGallop);
+
+            if (exit) {
+                break;
+            }
+
+            do {
+                count1 = length1 - gallopRight(tmp[cursor2], array, start1, length1, length1 - 1, compare);
+
+                if (count1 !== 0) {
+                    dest -= count1;
+                    cursor1 -= count1;
+                    length1 -= count1;
+                    customDest = dest + 1;
+                    customCursor = cursor1 + 1;
+
+                    for (i = count1 - 1; i >= 0; i--) {
+                        array[customDest + i] = array[customCursor + i];
+                    }
+
+                    if (length1 === 0) {
+                        exit = true;
+                        break;
+                    }
+                }
+
+                array[dest--] = tmp[cursor2--];
+
+                if (--length2 === 1) {
+                    exit = true;
+                    break;
+                }
+
+                count2 = length2 - gallopLeft(array[cursor1], tmp, 0, length2, length2 - 1, compare);
+
+                if (count2 !== 0) {
+                    dest -= count2;
+                    cursor2 -= count2;
+                    length2 -= count2;
+                    customDest = dest + 1;
+                    customCursor = cursor2 + 1;
+
+                    for (i = 0; i < count2; i++) {
+                        array[customDest + i] = tmp[customCursor + i];
+                    }
+
+                    if (length2 <= 1) {
+                        exit = true;
+                        break;
+                    }
+                }
+
+                array[dest--] = array[cursor1--];
+
+                if (--length1 === 0) {
+                    exit = true;
+                    break;
+                }
+
+                _minGallop--;
+            } while (count1 >= DEFAULT_MIN_GALLOPING || count2 >= DEFAULT_MIN_GALLOPING);
+
+            if (exit) {
+                break;
+            }
+
+            if (_minGallop < 0) {
+                _minGallop = 0;
+            }
+
+            _minGallop += 2;
+        }
+
+        minGallop = _minGallop;
+
+        if (minGallop < 1) {
+            minGallop = 1;
+        }
+
+        if (length2 === 1) {
+            dest -= length1;
+            cursor1 -= length1;
+            customDest = dest + 1;
+            customCursor = cursor1 + 1;
+
+            for (i = length1 - 1; i >= 0; i--) {
+                array[customDest + i] = array[customCursor + i];
+            }
+
+            array[dest] = tmp[cursor2];
+        }
+        else if (length2 === 0) {
+            throw new Error();
+            // throw new Error('mergeHigh preconditions were not respected');
+        }
+        else {
+            customCursor = dest - (length2 - 1);
+            for (i = 0; i < length2; i++) {
+                array[customCursor + i] = tmp[i];
+            }
+        }
+    }
+
+    this.mergeRuns = mergeRuns;
+    this.forceMergeRuns = forceMergeRuns;
+    this.pushRun = pushRun;
+}
+
+function sort(array, compare, lo, hi) {
+    if (!lo) {
+        lo = 0;
+    }
+    if (!hi) {
+        hi = array.length;
+    }
+
+    var remaining = hi - lo;
+
+    if (remaining < 2) {
+        return;
+    }
+
+    var runLength = 0;
+
+    if (remaining < DEFAULT_MIN_MERGE) {
+        runLength = makeAscendingRun(array, lo, hi, compare);
+        binaryInsertionSort(array, lo, hi, lo + runLength, compare);
+        return;
+    }
+
+    var ts = new TimSort(array, compare);
+
+    var minRun = minRunLength(remaining);
+
+    do {
+        runLength = makeAscendingRun(array, lo, hi, compare);
+        if (runLength < minRun) {
+            var force = remaining;
+            if (force > minRun) {
+                force = minRun;
+            }
+
+            binaryInsertionSort(array, lo, lo + force, lo + runLength, compare);
+            runLength = force;
+        }
+
+        ts.pushRun(lo, runLength);
+        ts.mergeRuns();
+
+        remaining -= runLength;
+        lo += runLength;
+    } while (remaining !== 0);
+
+    ts.forceMergeRuns();
+}
+
+// Use timsort because in most case elements are partially sorted
+// https://jsfiddle.net/pissang/jr4x7mdm/8/
+function shapeCompareFunc(a, b) {
+    if (a.zlevel === b.zlevel) {
+        if (a.z === b.z) {
+            // if (a.z2 === b.z2) {
+            //     // FIXME Slow has renderidx compare
+            //     // http://stackoverflow.com/questions/20883421/sorting-in-javascript-should-every-compare-function-have-a-return-0-statement
+            //     // https://github.com/v8/v8/blob/47cce544a31ed5577ffe2963f67acb4144ee0232/src/js/array.js#L1012
+            //     return a.__renderidx - b.__renderidx;
+            // }
+            return a.z2 - b.z2;
+        }
+        return a.z - b.z;
+    }
+    return a.zlevel - b.zlevel;
+}
+/**
+ * å†…å®¹ä»“åº“ (M)
+ * @alias module:zrender/Storage
+ * @constructor
+ */
+var Storage = function () { // jshint ignore:line
+    this._roots = [];
+
+    this._displayList = [];
+
+    this._displayListLen = 0;
+};
+
+Storage.prototype = {
+
+    constructor: Storage,
+
+    /**
+     * @param  {Function} cb
+     *
+     */
+    traverse: function (cb, context) {
+        for (var i = 0; i < this._roots.length; i++) {
+            this._roots[i].traverse(cb, context);
+        }
+    },
+
+    /**
+     * è¿”å›žæ‰€æœ‰å›¾å½¢çš„ç»˜åˆ¶é˜Ÿåˆ—
+     * @param {boolean} [update=false] æ˜¯å¦åœ¨è¿”å›žå‰æ›´æ–°è¯¥æ•°ç»„
+     * @param {boolean} [includeIgnore=false] æ˜¯å¦åŒ…å« ignore çš„æ•°ç»„, åœ¨ update ä¸º true çš„æ—¶å€™æœ‰æ•ˆ
+     *
+     * è¯¦è§{@link module:zrender/graphic/Displayable.prototype.updateDisplayList}
+     * @return {Array.<module:zrender/graphic/Displayable>}
+     */
+    getDisplayList: function (update, includeIgnore) {
+        includeIgnore = includeIgnore || false;
+        if (update) {
+            this.updateDisplayList(includeIgnore);
+        }
+        return this._displayList;
+    },
+
+    /**
+     * æ›´æ–°å›¾å½¢çš„ç»˜åˆ¶é˜Ÿåˆ—ã€‚
+     * æ¯æ¬¡ç»˜åˆ¶å‰éƒ½ä¼šè°ƒç”¨ï¼Œè¯¥æ–¹æ³•ä¼šå…ˆæ·±åº¦ä¼˜å…ˆéåŽ†æ•´ä¸ªæ ‘ï¼Œæ›´æ–°æ‰€æœ‰Groupå’ŒShapeçš„å˜æ¢å¹¶ä¸”æŠŠæ‰€æœ‰å¯è§çš„Shapeä¿å˜åˆ°æ•°ç»„ä¸ï¼Œ
+     * æœ€åŽæ ¹æ®ç»˜åˆ¶çš„ä¼˜å…ˆçº§ï¼ˆzlevel > z > æ’å…¥é¡ºåºï¼‰æŽ’åºå¾—åˆ°ç»˜åˆ¶é˜Ÿåˆ—
+     * @param {boolean} [includeIgnore=false] æ˜¯å¦åŒ…å« ignore çš„æ•°ç»„
+     */
+    updateDisplayList: function (includeIgnore) {
+        this._displayListLen = 0;
+
+        var roots = this._roots;
+        var displayList = this._displayList;
+        for (var i = 0, len = roots.length; i < len; i++) {
+            this._updateAndAddDisplayable(roots[i], null, includeIgnore);
+        }
+
+        displayList.length = this._displayListLen;
+
+        env$1.canvasSupported && sort(displayList, shapeCompareFunc);
+    },
+
+    _updateAndAddDisplayable: function (el, clipPaths, includeIgnore) {
+
+        if (el.ignore && !includeIgnore) {
+            return;
+        }
+
+        el.beforeUpdate();
+
+        if (el.__dirty) {
+
+            el.update();
+
+        }
+
+        el.afterUpdate();
+
+        var userSetClipPath = el.clipPath;
+        if (userSetClipPath) {
+
+            // FIXME æ•ˆçŽ‡å½±å“
+            if (clipPaths) {
+                clipPaths = clipPaths.slice();
+            }
+            else {
+                clipPaths = [];
+            }
+
+            var currentClipPath = userSetClipPath;
+            var parentClipPath = el;
+            // Recursively add clip path
+            while (currentClipPath) {
+                // clipPath çš„å˜æ¢æ˜¯åŸºäºŽä½¿ç”¨è¿™ä¸ª clipPath çš„å…ƒç´ 
+                currentClipPath.parent = parentClipPath;
+                currentClipPath.updateTransform();
+
+                clipPaths.push(currentClipPath);
+
+                parentClipPath = currentClipPath;
+                currentClipPath = currentClipPath.clipPath;
+            }
+        }
+
+        if (el.isGroup) {
+            var children = el._children;
+
+            for (var i = 0; i < children.length; i++) {
+                var child = children[i];
+
+                // Force to mark as dirty if group is dirty
+                // FIXME __dirtyPath ?
+                if (el.__dirty) {
+                    child.__dirty = true;
+                }
+
+                this._updateAndAddDisplayable(child, clipPaths, includeIgnore);
+            }
+
+            // Mark group clean here
+            el.__dirty = false;
+
+        }
+        else {
+            el.__clipPaths = clipPaths;
+
+            this._displayList[this._displayListLen++] = el;
+        }
+    },
+
+    /**
+     * æ·»åŠ å›¾å½¢(Shape)æˆ–è€…ç»„(Group)åˆ°æ ¹èŠ‚ç‚¹
+     * @param {module:zrender/Element} el
+     */
+    addRoot: function (el) {
+        if (el.__storage === this) {
+            return;
+        }
+
+        if (el instanceof Group) {
+            el.addChildrenToStorage(this);
+        }
+
+        this.addToStorage(el);
+        this._roots.push(el);
+    },
+
+    /**
+     * åˆ é™¤æŒ‡å®šçš„å›¾å½¢(Shape)æˆ–è€…ç»„(Group)
+     * @param {string|Array.<string>} [el] å¦‚æžœä¸ºç©ºæ¸…ç©ºæ•´ä¸ªStorage
+     */
+    delRoot: function (el) {
+        if (el == null) {
+            // ä¸æŒ‡å®šelæ¸…ç©º
+            for (var i = 0; i < this._roots.length; i++) {
+                var root = this._roots[i];
+                if (root instanceof Group) {
+                    root.delChildrenFromStorage(this);
+                }
+            }
+
+            this._roots = [];
+            this._displayList = [];
+            this._displayListLen = 0;
+
+            return;
+        }
+
+        if (el instanceof Array) {
+            for (var i = 0, l = el.length; i < l; i++) {
+                this.delRoot(el[i]);
+            }
+            return;
+        }
+
+
+        var idx = indexOf(this._roots, el);
+        if (idx >= 0) {
+            this.delFromStorage(el);
+            this._roots.splice(idx, 1);
+            if (el instanceof Group) {
+                el.delChildrenFromStorage(this);
+            }
+        }
+    },
+
+    addToStorage: function (el) {
+        if (el) {
+            el.__storage = this;
+            el.dirty(false);
+        }
+        return this;
+    },
+
+    delFromStorage: function (el) {
+        if (el) {
+            el.__storage = null;
+        }
+
+        return this;
+    },
+
+    /**
+     * æ¸…ç©ºå¹¶ä¸”é‡Šæ”¾Storage
+     */
+    dispose: function () {
+        this._renderList =
+        this._roots = null;
+    },
+
+    displayableSortFunc: shapeCompareFunc
+};
+
+var SHADOW_PROPS = {
+    'shadowBlur': 1,
+    'shadowOffsetX': 1,
+    'shadowOffsetY': 1,
+    'textShadowBlur': 1,
+    'textShadowOffsetX': 1,
+    'textShadowOffsetY': 1,
+    'textBoxShadowBlur': 1,
+    'textBoxShadowOffsetX': 1,
+    'textBoxShadowOffsetY': 1
+};
+
+var fixShadow = function (ctx, propName, value) {
+    if (SHADOW_PROPS.hasOwnProperty(propName)) {
+        return value *= ctx.dpr;
+    }
+    return value;
+};
+
+var STYLE_COMMON_PROPS = [
+    ['shadowBlur', 0], ['shadowOffsetX', 0], ['shadowOffsetY', 0], ['shadowColor', '#000'],
+    ['lineCap', 'butt'], ['lineJoin', 'miter'], ['miterLimit', 10]
+];
+
+// var SHADOW_PROPS = STYLE_COMMON_PROPS.slice(0, 4);
+// var LINE_PROPS = STYLE_COMMON_PROPS.slice(4);
+
+var Style = function (opts, host) {
+    this.extendFrom(opts, false);
+    this.host = host;
+};
+
+function createLinearGradient(ctx, obj, rect) {
+    var x = obj.x == null ? 0 : obj.x;
+    var x2 = obj.x2 == null ? 1 : obj.x2;
+    var y = obj.y == null ? 0 : obj.y;
+    var y2 = obj.y2 == null ? 0 : obj.y2;
+
+    if (!obj.global) {
+        x = x * rect.width + rect.x;
+        x2 = x2 * rect.width + rect.x;
+        y = y * rect.height + rect.y;
+        y2 = y2 * rect.height + rect.y;
+    }
+
+    // Fix NaN when rect is Infinity
+    x = isNaN(x) ? 0 : x;
+    x2 = isNaN(x2) ? 1 : x2;
+    y = isNaN(y) ? 0 : y;
+    y2 = isNaN(y2) ? 0 : y2;
+
+    var canvasGradient = ctx.createLinearGradient(x, y, x2, y2);
+
+    return canvasGradient;
+}
+
+function createRadialGradient(ctx, obj, rect) {
+    var width = rect.width;
+    var height = rect.height;
+    var min = Math.min(width, height);
+
+    var x = obj.x == null ? 0.5 : obj.x;
+    var y = obj.y == null ? 0.5 : obj.y;
+    var r = obj.r == null ? 0.5 : obj.r;
+    if (!obj.global) {
+        x = x * width + rect.x;
+        y = y * height + rect.y;
+        r = r * min;
+    }
+
+    var canvasGradient = ctx.createRadialGradient(x, y, 0, x, y, r);
+
+    return canvasGradient;
+}
+
+
+Style.prototype = {
+
+    constructor: Style,
+
+    /**
+     * @type {module:zrender/graphic/Displayable}
+     */
+    host: null,
+
+    /**
+     * @type {string}
+     */
+    fill: '#000',
+
+    /**
+     * @type {string}
+     */
+    stroke: null,
+
+    /**
+     * @type {number}
+     */
+    opacity: 1,
+
+    /**
+     * @type {Array.<number>}
+     */
+    lineDash: null,
+
+    /**
+     * @type {number}
+     */
+    lineDashOffset: 0,
+
+    /**
+     * @type {number}
+     */
+    shadowBlur: 0,
+
+    /**
+     * @type {number}
+     */
+    shadowOffsetX: 0,
+
+    /**
+     * @type {number}
+     */
+    shadowOffsetY: 0,
+
+    /**
+     * @type {number}
+     */
+    lineWidth: 1,
+
+    /**
+     * If stroke ignore scale
+     * @type {Boolean}
+     */
+    strokeNoScale: false,
+
+    // Bounding rect text configuration
+    // Not affected by element transform
+    /**
+     * @type {string}
+     */
+    text: null,
+
+    /**
+     * If `fontSize` or `fontFamily` exists, `font` will be reset by
+     * `fontSize`, `fontStyle`, `fontWeight`, `fontFamily`.
+     * So do not visit it directly in upper application (like echarts),
+     * but use `contain/text#makeFont` instead.
+     * @type {string}
+     */
+    font: null,
+
+    /**
+     * The same as font. Use font please.
+     * @deprecated
+     * @type {string}
+     */
+    textFont: null,
+
+    /**
+     * It helps merging respectively, rather than parsing an entire font string.
+     * @type {string}
+     */
+    fontStyle: null,
+
+    /**
+     * It helps merging respectively, rather than parsing an entire font string.
+     * @type {string}
+     */
+    fontWeight: null,
+
+    /**
+     * It helps merging respectively, rather than parsing an entire font string.
+     * Should be 12 but not '12px'.
+     * @type {number}
+     */
+    fontSize: null,
+
+    /**
+     * It helps merging respectively, rather than parsing an entire font string.
+     * @type {string}
+     */
+    fontFamily: null,
+
+    /**
+     * Reserved for special functinality, like 'hr'.
+     * @type {string}
+     */
+    textTag: null,
+
+    /**
+     * @type {string}
+     */
+    textFill: '#000',
+
+    /**
+     * @type {string}
+     */
+    textStroke: null,
+
+    /**
+     * @type {number}
+     */
+    textWidth: null,
+
+    /**
+     * Only for textBackground.
+     * @type {number}
+     */
+    textHeight: null,
+
+    /**
+     * textStroke may be set as some color as a default
+     * value in upper applicaion, where the default value
+     * of textStrokeWidth should be 0 to make sure that
+     * user can choose to do not use text stroke.
+     * @type {number}
+     */
+    textStrokeWidth: 0,
+
+    /**
+     * @type {number}
+     */
+    textLineHeight: null,
+
+    /**
+     * 'inside', 'left', 'right', 'top', 'bottom'
+     * [x, y]
+     * Based on x, y of rect.
+     * @type {string|Array.<number>}
+     * @default 'inside'
+     */
+    textPosition: 'inside',
+
+    /**
+     * If not specified, use the boundingRect of a `displayable`.
+     * @type {Object}
+     */
+    textRect: null,
+
+    /**
+     * [x, y]
+     * @type {Array.<number>}
+     */
+    textOffset: null,
+
+    /**
+     * @type {string}
+     */
+    textAlign: null,
+
+    /**
+     * @type {string}
+     */
+    textVerticalAlign: null,
+
+    /**
+     * @type {number}
+     */
+    textDistance: 5,
+
+    /**
+     * @type {string}
+     */
+    textShadowColor: 'transparent',
+
+    /**
+     * @type {number}
+     */
+    textShadowBlur: 0,
+
+    /**
+     * @type {number}
+     */
+    textShadowOffsetX: 0,
+
+    /**
+     * @type {number}
+     */
+    textShadowOffsetY: 0,
+
+    /**
+     * @type {string}
+     */
+    textBoxShadowColor: 'transparent',
+
+    /**
+     * @type {number}
+     */
+    textBoxShadowBlur: 0,
+
+    /**
+     * @type {number}
+     */
+    textBoxShadowOffsetX: 0,
+
+    /**
+     * @type {number}
+     */
+    textBoxShadowOffsetY: 0,
+
+    /**
+     * Whether transform text.
+     * Only useful in Path and Image element
+     * @type {boolean}
+     */
+    transformText: false,
+
+    /**
+     * Text rotate around position of Path or Image
+     * Only useful in Path and Image element and transformText is false.
+     */
+    textRotation: 0,
+
+    /**
+     * Text origin of text rotation, like [10, 40].
+     * Based on x, y of rect.
+     * Useful in label rotation of circular symbol.
+     * By default, this origin is textPosition.
+     * Can be 'center'.
+     * @type {string|Array.<number>}
+     */
+    textOrigin: null,
+
+    /**
+     * @type {string}
+     */
+    textBackgroundColor: null,
+
+    /**
+     * @type {string}
+     */
+    textBorderColor: null,
+
+    /**
+     * @type {number}
+     */
+    textBorderWidth: 0,
+
+    /**
+     * @type {number}
+     */
+    textBorderRadius: 0,
+
+    /**
+     * Can be `2` or `[2, 4]` or `[2, 3, 4, 5]`
+     * @type {number|Array.<number>}
+     */
+    textPadding: null,
+
+    /**
+     * Text styles for rich text.
+     * @type {Object}
+     */
+    rich: null,
+
+    /**
+     * {outerWidth, outerHeight, ellipsis, placeholder}
+     * @type {Object}
+     */
+    truncate: null,
+
+    /**
+     * https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
+     * @type {string}
+     */
+    blend: null,
+
+    /**
+     * @param {CanvasRenderingContext2D} ctx
+     */
+    bind: function (ctx, el, prevEl) {
+        var style = this;
+        var prevStyle = prevEl && prevEl.style;
+        var firstDraw = !prevStyle;
+
+        for (var i = 0; i < STYLE_COMMON_PROPS.length; i++) {
+            var prop = STYLE_COMMON_PROPS[i];
+            var styleName = prop[0];
+
+            if (firstDraw || style[styleName] !== prevStyle[styleName]) {
+                // FIXME Invalid property value will cause style leak from previous element.
+                ctx[styleName] =
+                    fixShadow(ctx, styleName, style[styleName] || prop[1]);
+            }
+        }
+
+        if ((firstDraw || style.fill !== prevStyle.fill)) {
+            ctx.fillStyle = style.fill;
+        }
+        if ((firstDraw || style.stroke !== prevStyle.stroke)) {
+            ctx.strokeStyle = style.stroke;
+        }
+        if ((firstDraw || style.opacity !== prevStyle.opacity)) {
+            ctx.globalAlpha = style.opacity == null ? 1 : style.opacity;
+        }
+
+        if ((firstDraw || style.blend !== prevStyle.blend)) {
+            ctx.globalCompositeOperation = style.blend || 'source-over';
+        }
+        if (this.hasStroke()) {
+            var lineWidth = style.lineWidth;
+            ctx.lineWidth = lineWidth / (
+                (this.strokeNoScale && el && el.getLineScale) ? el.getLineScale() : 1
+            );
+        }
+    },
+
+    hasFill: function () {
+        var fill = this.fill;
+        return fill != null && fill !== 'none';
+    },
+
+    hasStroke: function () {
+        var stroke = this.stroke;
+        return stroke != null && stroke !== 'none' && this.lineWidth > 0;
+    },
+
+    /**
+     * Extend from other style
+     * @param {zrender/graphic/Style} otherStyle
+     * @param {boolean} overwrite true: overwrirte any way.
+     *                            false: overwrite only when !target.hasOwnProperty
+     *                            others: overwrite when property is not null/undefined.
+     */
+    extendFrom: function (otherStyle, overwrite) {
+        if (otherStyle) {
+            for (var name in otherStyle) {
+                if (otherStyle.hasOwnProperty(name)
+                    && (overwrite === true
+                        || (
+                            overwrite === false
+                                ? !this.hasOwnProperty(name)
+                                : otherStyle[name] != null
+                        )
+                    )
+                ) {
+                    this[name] = otherStyle[name];
+                }
+            }
+        }
+    },
+
+    /**
+     * Batch setting style with a given object
+     * @param {Object|string} obj
+     * @param {*} [obj]
+     */
+    set: function (obj, value) {
+        if (typeof obj === 'string') {
+            this[obj] = value;
+        }
+        else {
+            this.extendFrom(obj, true);
+        }
+    },
+
+    /**
+     * Clone
+     * @return {zrender/graphic/Style} [description]
+     */
+    clone: function () {
+        var newStyle = new this.constructor();
+        newStyle.extendFrom(this, true);
+        return newStyle;
+    },
+
+    getGradient: function (ctx, obj, rect) {
+        var method = obj.type === 'radial' ? createRadialGradient : createLinearGradient;
+        var canvasGradient = method(ctx, obj, rect);
+        var colorStops = obj.colorStops;
+        for (var i = 0; i < colorStops.length; i++) {
+            canvasGradient.addColorStop(
+                colorStops[i].offset, colorStops[i].color
+            );
+        }
+        return canvasGradient;
+    }
+
+};
+
+var styleProto = Style.prototype;
+for (var i = 0; i < STYLE_COMMON_PROPS.length; i++) {
+    var prop = STYLE_COMMON_PROPS[i];
+    if (!(prop[0] in styleProto)) {
+        styleProto[prop[0]] = prop[1];
+    }
+}
+
+// Provide for others
+Style.getGradient = styleProto.getGradient;
+
+var Pattern = function (image, repeat) {
+    // Should do nothing more in this constructor. Because gradient can be
+    // declard by `color: {image: ...}`, where this constructor will not be called.
+
+    this.image = image;
+    this.repeat = repeat;
+
+    // Can be cloned
+    this.type = 'pattern';
+};
+
+Pattern.prototype.getCanvasPattern = function (ctx) {
+    return ctx.createPattern(this.image, this.repeat || 'repeat');
+};
+
+/**
+ * @module zrender/Layer
+ * @author pissang(https://www.github.com/pissang)
+ */
+
+function returnFalse() {
+    return false;
+}
+
+/**
+ * åˆ›å»ºdom
+ *
+ * @inner
+ * @param {string} id dom id å¾…ç”¨
+ * @param {Painter} painter painter instance
+ * @param {number} number
+ */
+function createDom(id, painter, dpr) {
+    var newDom = createCanvas();
+    var width = painter.getWidth();
+    var height = painter.getHeight();
+
+    var newDomStyle = newDom.style;
+    if (newDomStyle) {  // In node or some other non-browser environment
+        newDomStyle.position = 'absolute';
+        newDomStyle.left = 0;
+        newDomStyle.top = 0;
+        newDomStyle.width = width + 'px';
+        newDomStyle.height = height + 'px';
+
+        newDom.setAttribute('data-zr-dom-id', id);
+    }
+
+    newDom.width = width * dpr;
+    newDom.height = height * dpr;
+
+    return newDom;
+}
+
+/**
+ * @alias module:zrender/Layer
+ * @constructor
+ * @extends module:zrender/mixin/Transformable
+ * @param {string} id
+ * @param {module:zrender/Painter} painter
+ * @param {number} [dpr]
+ */
+var Layer = function(id, painter, dpr) {
+    var dom;
+    dpr = dpr || devicePixelRatio;
+    if (typeof id === 'string') {
+        dom = createDom(id, painter, dpr);
+    }
+    // Not using isDom because in node it will return false
+    else if (isObject$1(id)) {
+        dom = id;
+        id = dom.id;
+    }
+    this.id = id;
+    this.dom = dom;
+
+    var domStyle = dom.style;
+    if (domStyle) { // Not in node
+        dom.onselectstart = returnFalse; // é¿å…é¡µé¢é€‰ä¸çš„å°´å°¬
+        domStyle['-webkit-user-select'] = 'none';
+        domStyle['user-select'] = 'none';
+        domStyle['-webkit-touch-callout'] = 'none';
+        domStyle['-webkit-tap-highlight-color'] = 'rgba(0,0,0,0)';
+        domStyle['padding'] = 0;
+        domStyle['margin'] = 0;
+        domStyle['border-width'] = 0;
+    }
+
+    this.domBack = null;
+    this.ctxBack = null;
+
+    this.painter = painter;
+
+    this.config = null;
+
+    // Configs
+    /**
+     * æ¯æ¬¡æ¸…ç©ºç”»å¸ƒçš„é¢œè‰²
+     * @type {string}
+     * @default 0
+     */
+    this.clearColor = 0;
+    /**
+     * æ˜¯å¦å¼€å¯åŠ¨æ€æ¨¡ç³Š
+     * @type {boolean}
+     * @default false
+     */
+    this.motionBlur = false;
+    /**
+     * åœ¨å¼€å¯åŠ¨æ€æ¨¡ç³Šçš„æ—¶å€™ä½¿ç”¨ï¼Œä¸Žä¸Šä¸€å¸§æ··åˆçš„alphaå€¼ï¼Œå€¼è¶Šå¤§å°¾è¿¹è¶Šæ˜Žæ˜¾
+     * @type {number}
+     * @default 0.7
+     */
+    this.lastFrameAlpha = 0.7;
+
+    /**
+     * Layer dpr
+     * @type {number}
+     */
+    this.dpr = dpr;
+};
+
+Layer.prototype = {
+
+    constructor: Layer,
+
+    __dirty: true,
+
+    __used: false,
+
+    __drawIndex: 0,
+    __startIndex: 0,
+    __endIndex: 0,
+
+    incremental: false,
+
+    getElementCount: function () {
+        return this.__endIndex - this.__startIndex;
+    },
+
+    initContext: function () {
+        this.ctx = this.dom.getContext('2d');
+        this.ctx.dpr = this.dpr;
+    },
+
+    createBackBuffer: function () {
+        var dpr = this.dpr;
+
+        this.domBack = createDom('back-' + this.id, this.painter, dpr);
+        this.ctxBack = this.domBack.getContext('2d');
+
+        if (dpr != 1) {
+            this.ctxBack.scale(dpr, dpr);
+        }
+    },
+
+    /**
+     * @param  {number} width
+     * @param  {number} height
+     */
+    resize: function (width, height) {
+        var dpr = this.dpr;
+
+        var dom = this.dom;
+        var domStyle = dom.style;
+        var domBack = this.domBack;
+
+        if (domStyle) {
+            domStyle.width = width + 'px';
+            domStyle.height = height + 'px';
+        }
+
+        dom.width = width * dpr;
+        dom.height = height * dpr;
+
+        if (domBack) {
+            domBack.width = width * dpr;
+            domBack.height = height * dpr;
+
+            if (dpr != 1) {
+                this.ctxBack.scale(dpr, dpr);
+            }
+        }
+    },
+
+    /**
+     * æ¸…ç©ºè¯¥å±‚ç”»å¸ƒ
+     * @param {boolean} [clearAll]=false Clear all with out motion blur
+     * @param {Color} [clearColor]
+     */
+    clear: function (clearAll, clearColor) {
+        var dom = this.dom;
+        var ctx = this.ctx;
+        var width = dom.width;
+        var height = dom.height;
+
+        var clearColor = clearColor || this.clearColor;
+        var haveMotionBLur = this.motionBlur && !clearAll;
+        var lastFrameAlpha = this.lastFrameAlpha;
+
+        var dpr = this.dpr;
+
+        if (haveMotionBLur) {
+            if (!this.domBack) {
+                this.createBackBuffer();
+            }
+
+            this.ctxBack.globalCompositeOperation = 'copy';
+            this.ctxBack.drawImage(
+                dom, 0, 0,
+                width / dpr,
+                height / dpr
+            );
+        }
+
+        ctx.clearRect(0, 0, width, height);
+        if (clearColor && clearColor !== 'transparent') {
+            var clearColorGradientOrPattern;
+            // Gradient
+            if (clearColor.colorStops) {
+                // Cache canvas gradient
+                clearColorGradientOrPattern = clearColor.__canvasGradient || Style.getGradient(ctx, clearColor, {
+                    x: 0,
+                    y: 0,
+                    width: width,
+                    height: height
+                });
+
+                clearColor.__canvasGradient = clearColorGradientOrPattern;
+            }
+            // Pattern
+            else if (clearColor.image) {
+                clearColorGradientOrPattern = Pattern.prototype.getCanvasPattern.call(clearColor, ctx);
+            }
+            ctx.save();
+            ctx.fillStyle = clearColorGradientOrPattern || clearColor;
+            ctx.fillRect(0, 0, width, height);
+            ctx.restore();
+        }
+
+        if (haveMotionBLur) {
+            var domBack = this.domBack;
+            ctx.save();
+            ctx.globalAlpha = lastFrameAlpha;
+            ctx.drawImage(domBack, 0, 0, width, height);
+            ctx.restore();
+        }
+    }
+};
+
+var requestAnimationFrame = (
+    typeof window !== 'undefined'
+    && (
+        (window.requestAnimationFrame && window.requestAnimationFrame.bind(window))
+        // https://github.com/ecomfe/zrender/issues/189#issuecomment-224919809
+        || (window.msRequestAnimationFrame && window.msRequestAnimationFrame.bind(window))
+        || window.mozRequestAnimationFrame
+        || window.webkitRequestAnimationFrame
+    )
+) || function (func) {
+    setTimeout(func, 16);
+};
+
+var globalImageCache = new LRU(50);
+
+/**
+ * @param {string|HTMLImageElement|HTMLCanvasElement|Canvas} newImageOrSrc
+ * @return {HTMLImageElement|HTMLCanvasElement|Canvas} image
+ */
+function findExistImage(newImageOrSrc) {
+    if (typeof newImageOrSrc === 'string') {
+        var cachedImgObj = globalImageCache.get(newImageOrSrc);
+        return cachedImgObj && cachedImgObj.image;
+    }
+    else {
+        return newImageOrSrc;
+    }
+}
+
+/**
+ * Caution: User should cache loaded images, but not just count on LRU.
+ * Consider if required images more than LRU size, will dead loop occur?
+ *
+ * @param {string|HTMLImageElement|HTMLCanvasElement|Canvas} newImageOrSrc
+ * @param {HTMLImageElement|HTMLCanvasElement|Canvas} image Existent image.
+ * @param {module:zrender/Element} [hostEl] For calling `dirty`.
+ * @param {Function} [cb] params: (image, cbPayload)
+ * @param {Object} [cbPayload] Payload on cb calling.
+ * @return {HTMLImageElement|HTMLCanvasElement|Canvas} image
+ */
+function createOrUpdateImage(newImageOrSrc, image, hostEl, cb, cbPayload) {
+    if (!newImageOrSrc) {
+        return image;
+    }
+    else if (typeof newImageOrSrc === 'string') {
+
+        // Image should not be loaded repeatly.
+        if ((image && image.__zrImageSrc === newImageOrSrc) || !hostEl) {
+            return image;
+        }
+
+        // Only when there is no existent image or existent image src
+        // is different, this method is responsible for load.
+        var cachedImgObj = globalImageCache.get(newImageOrSrc);
+
+        var pendingWrap = {hostEl: hostEl, cb: cb, cbPayload: cbPayload};
+
+        if (cachedImgObj) {
+            image = cachedImgObj.image;
+            !isImageReady(image) && cachedImgObj.pending.push(pendingWrap);
+        }
+        else {
+            !image && (image = new Image());
+            image.onload = imageOnLoad;
+
+            globalImageCache.put(
+                newImageOrSrc,
+                image.__cachedImgObj = {
+                    image: image,
+                    pending: [pendingWrap]
+                }
+            );
+
+            image.src = image.__zrImageSrc = newImageOrSrc;
+        }
+
+        return image;
+    }
+    // newImageOrSrc is an HTMLImageElement or HTMLCanvasElement or Canvas
+    else {
+        return newImageOrSrc;
+    }
+}
+
+function imageOnLoad() {
+    var cachedImgObj = this.__cachedImgObj;
+    this.onload = this.__cachedImgObj = null;
+
+    for (var i = 0; i < cachedImgObj.pending.length; i++) {
+        var pendingWrap = cachedImgObj.pending[i];
+        var cb = pendingWrap.cb;
+        cb && cb(this, pendingWrap.cbPayload);
+        pendingWrap.hostEl.dirty();
+    }
+    cachedImgObj.pending.length = 0;
+}
+
+function isImageReady(image) {
+    return image && image.width && image.height;
+}
+
+var textWidthCache = {};
+var textWidthCacheCounter = 0;
+
+var TEXT_CACHE_MAX = 5000;
+var STYLE_REG = /\{([a-zA-Z0-9_]+)\|([^}]*)\}/g;
+
+var DEFAULT_FONT = '12px sans-serif';
+
+// Avoid assign to an exported variable, for transforming to cjs.
+var methods$1 = {};
+
+function $override$1(name, fn) {
+    methods$1[name] = fn;
+}
+
+/**
+ * @public
+ * @param {string} text
+ * @param {string} font
+ * @return {number} width
+ */
+function getWidth(text, font) {
+    font = font || DEFAULT_FONT;
+    var key = text + ':' + font;
+    if (textWidthCache[key]) {
+        return textWidthCache[key];
+    }
+
+    var textLines = (text + '').split('\n');
+    var width = 0;
+
+    for (var i = 0, l = textLines.length; i < l; i++) {
+        // textContain.measureText may be overrided in SVG or VML
+        width = Math.max(measureText(textLines[i], font).width, width);
+    }
+
+    if (textWidthCacheCounter > TEXT_CACHE_MAX) {
+        textWidthCacheCounter = 0;
+        textWidthCache = {};
+    }
+    textWidthCacheCounter++;
+    textWidthCache[key] = width;
+
+    return width;
+}
+
+/**
+ * @public
+ * @param {string} text
+ * @param {string} font
+ * @param {string} [textAlign='left']
+ * @param {string} [textVerticalAlign='top']
+ * @param {Array.<number>} [textPadding]
+ * @param {Object} [rich]
+ * @param {Object} [truncate]
+ * @return {Object} {x, y, width, height, lineHeight}
+ */
+function getBoundingRect(text, font, textAlign, textVerticalAlign, textPadding, rich, truncate) {
+    return rich
+        ? getRichTextRect(text, font, textAlign, textVerticalAlign, textPadding, rich, truncate)
+        : getPlainTextRect(text, font, textAlign, textVerticalAlign, textPadding, truncate);
+}
+
+function getPlainTextRect(text, font, textAlign, textVerticalAlign, textPadding, truncate) {
+    var contentBlock = parsePlainText(text, font, textPadding, truncate);
+    var outerWidth = getWidth(text, font);
+    if (textPadding) {
+        outerWidth += textPadding[1] + textPadding[3];
+    }
+    var outerHeight = contentBlock.outerHeight;
+
+    var x = adjustTextX(0, outerWidth, textAlign);
+    var y = adjustTextY(0, outerHeight, textVerticalAlign);
+
+    var rect = new BoundingRect(x, y, outerWidth, outerHeight);
+    rect.lineHeight = contentBlock.lineHeight;
+
+    return rect;
+}
+
+function getRichTextRect(text, font, textAlign, textVerticalAlign, textPadding, rich, truncate) {
+    var contentBlock = parseRichText(text, {
+        rich: rich,
+        truncate: truncate,
+        font: font,
+        textAlign: textAlign,
+        textPadding: textPadding
+    });
+    var outerWidth = contentBlock.outerWidth;
+    var outerHeight = contentBlock.outerHeight;
+
+    var x = adjustTextX(0, outerWidth, textAlign);
+    var y = adjustTextY(0, outerHeight, textVerticalAlign);
+
+    return new BoundingRect(x, y, outerWidth, outerHeight);
+}
+
+/**
+ * @public
+ * @param {number} x
+ * @param {number} width
+ * @param {string} [textAlign='left']
+ * @return {number} Adjusted x.
+ */
+function adjustTextX(x, width, textAlign) {
+    // FIXME Right to left language
+    if (textAlign === 'right') {
+        x -= width;
+    }
+    else if (textAlign === 'center') {
+        x -= width / 2;
+    }
+    return x;
+}
+
+/**
+ * @public
+ * @param {number} y
+ * @param {number} height
+ * @param {string} [textVerticalAlign='top']
+ * @return {number} Adjusted y.
+ */
+function adjustTextY(y, height, textVerticalAlign) {
+    if (textVerticalAlign === 'middle') {
+        y -= height / 2;
+    }
+    else if (textVerticalAlign === 'bottom') {
+        y -= height;
+    }
+    return y;
+}
+
+/**
+ * @public
+ * @param {stirng} textPosition
+ * @param {Object} rect {x, y, width, height}
+ * @param {number} distance
+ * @return {Object} {x, y, textAlign, textVerticalAlign}
+ */
+function adjustTextPositionOnRect(textPosition, rect, distance) {
+
+    var x = rect.x;
+    var y = rect.y;
+
+    var height = rect.height;
+    var width = rect.width;
+    var halfHeight = height / 2;
+
+    var textAlign = 'left';
+    var textVerticalAlign = 'top';
+
+    switch (textPosition) {
+        case 'left':
+            x -= distance;
+            y += halfHeight;
+            textAlign = 'right';
+            textVerticalAlign = 'middle';
+            break;
+        case 'right':
+            x += distance + width;
+            y += halfHeight;
+            textVerticalAlign = 'middle';
+            break;
+        case 'top':
+            x += width / 2;
+            y -= distance;
+            textAlign = 'center';
+            textVerticalAlign = 'bottom';
+            break;
+        case 'bottom':
+            x += width / 2;
+            y += height + distance;
+            textAlign = 'center';
+            break;
+        case 'inside':
+            x += width / 2;
+            y += halfHeight;
+            textAlign = 'center';
+            textVerticalAlign = 'middle';
+            break;
+        case 'insideLeft':
+            x += distance;
+            y += halfHeight;
+            textVerticalAlign = 'middle';
+            break;
+        case 'insideRight':
+            x += width - distance;
+            y += halfHeight;
+            textAlign = 'right';
+            textVerticalAlign = 'middle';
+            break;
+        case 'insideTop':
+            x += width / 2;
+            y += distance;
+            textAlign = 'center';
+            break;
+        case 'insideBottom':
+            x += width / 2;
+            y += height - distance;
+            textAlign = 'center';
+            textVerticalAlign = 'bottom';
+            break;
+        case 'insideTopLeft':
+            x += distance;
+            y += distance;
+            break;
+        case 'insideTopRight':
+            x += width - distance;
+            y += distance;
+            textAlign = 'right';
+            break;
+        case 'insideBottomLeft':
+            x += distance;
+            y += height - distance;
+            textVerticalAlign = 'bottom';
+            break;
+        case 'insideBottomRight':
+            x += width - distance;
+            y += height - distance;
+            textAlign = 'right';
+            textVerticalAlign = 'bottom';
+            break;
+    }
+
+    return {
+        x: x,
+        y: y,
+        textAlign: textAlign,
+        textVerticalAlign: textVerticalAlign
+    };
+}
+
+/**
+ * Show ellipsis if overflow.
+ *
+ * @public
+ * @param  {string} text
+ * @param  {string} containerWidth
+ * @param  {string} font
+ * @param  {number} [ellipsis='...']
+ * @param  {Object} [options]
+ * @param  {number} [options.maxIterations=3]
+ * @param  {number} [options.minChar=0] If truncate result are less
+ *                  then minChar, ellipsis will not show, which is
+ *                  better for user hint in some cases.
+ * @param  {number} [options.placeholder=''] When all truncated, use the placeholder.
+ * @return {string}
+ */
+function truncateText(text, containerWidth, font, ellipsis, options) {
+    if (!containerWidth) {
+        return '';
+    }
+
+    var textLines = (text + '').split('\n');
+    options = prepareTruncateOptions(containerWidth, font, ellipsis, options);
+
+    // FIXME
+    // It is not appropriate that every line has '...' when truncate multiple lines.
+    for (var i = 0, len = textLines.length; i < len; i++) {
+        textLines[i] = truncateSingleLine(textLines[i], options);
+    }
+
+    return textLines.join('\n');
+}
+
+function prepareTruncateOptions(containerWidth, font, ellipsis, options) {
+    options = extend({}, options);
+
+    options.font = font;
+    var ellipsis = retrieve2(ellipsis, '...');
+    options.maxIterations = retrieve2(options.maxIterations, 2);
+    var minChar = options.minChar = retrieve2(options.minChar, 0);
+    // FIXME
+    // Other languages?
+    options.cnCharWidth = getWidth('å›½', font);
+    // FIXME
+    // Consider proportional font?
+    var ascCharWidth = options.ascCharWidth = getWidth('a', font);
+    options.placeholder = retrieve2(options.placeholder, '');
+
+    // Example 1: minChar: 3, text: 'asdfzxcv', truncate result: 'asdf', but not: 'a...'.
+    // Example 2: minChar: 3, text: 'ç»´åº¦', truncate result: 'ç»´', but not: '...'.
+    var contentWidth = containerWidth = Math.max(0, containerWidth - 1); // Reserve some gap.
+    for (var i = 0; i < minChar && contentWidth >= ascCharWidth; i++) {
+        contentWidth -= ascCharWidth;
+    }
+
+    var ellipsisWidth = getWidth(ellipsis);
+    if (ellipsisWidth > contentWidth) {
+        ellipsis = '';
+        ellipsisWidth = 0;
+    }
+
+    contentWidth = containerWidth - ellipsisWidth;
+
+    options.ellipsis = ellipsis;
+    options.ellipsisWidth = ellipsisWidth;
+    options.contentWidth = contentWidth;
+    options.containerWidth = containerWidth;
+
+    return options;
+}
+
+function truncateSingleLine(textLine, options) {
+    var containerWidth = options.containerWidth;
+    var font = options.font;
+    var contentWidth = options.contentWidth;
+
+    if (!containerWidth) {
+        return '';
+    }
+
+    var lineWidth = getWidth(textLine, font);
+
+    if (lineWidth <= containerWidth) {
+        return textLine;
+    }
+
+    for (var j = 0;; j++) {
+        if (lineWidth <= contentWidth || j >= options.maxIterations) {
+            textLine += options.ellipsis;
+            break;
+        }
+
+        var subLength = j === 0
+            ? estimateLength(textLine, contentWidth, options.ascCharWidth, options.cnCharWidth)
+            : lineWidth > 0
+            ? Math.floor(textLine.length * contentWidth / lineWidth)
+            : 0;
+
+        textLine = textLine.substr(0, subLength);
+        lineWidth = getWidth(textLine, font);
+    }
+
+    if (textLine === '') {
+        textLine = options.placeholder;
+    }
+
+    return textLine;
+}
+
+function estimateLength(text, contentWidth, ascCharWidth, cnCharWidth) {
+    var width = 0;
+    var i = 0;
+    for (var len = text.length; i < len && width < contentWidth; i++) {
+        var charCode = text.charCodeAt(i);
+        width += (0 <= charCode && charCode <= 127) ? ascCharWidth : cnCharWidth;
+    }
+    return i;
+}
+
+/**
+ * @public
+ * @param {string} font
+ * @return {number} line height
+ */
+function getLineHeight(font) {
+    // FIXME A rough approach.
+    return getWidth('å›½', font);
+}
+
+/**
+ * @public
+ * @param {string} text
+ * @param {string} font
+ * @return {Object} width
+ */
+function measureText(text, font) {
+    return methods$1.measureText(text, font);
+}
+
+// Avoid assign to an exported variable, for transforming to cjs.
+methods$1.measureText = function (text, font) {
+    var ctx = getContext();
+    ctx.font = font || DEFAULT_FONT;
+    return ctx.measureText(text);
+};
+
+/**
+ * @public
+ * @param {string} text
+ * @param {string} font
+ * @param {Object} [truncate]
+ * @return {Object} block: {lineHeight, lines, height, outerHeight}
+ *  Notice: for performance, do not calculate outerWidth util needed.
+ */
+function parsePlainText(text, font, padding, truncate) {
+    text != null && (text += '');
+
+    var lineHeight = getLineHeight(font);
+    var lines = text ? text.split('\n') : [];
+    var height = lines.length * lineHeight;
+    var outerHeight = height;
+
+    if (padding) {
+        outerHeight += padding[0] + padding[2];
+    }
+
+    if (text && truncate) {
+        var truncOuterHeight = truncate.outerHeight;
+        var truncOuterWidth = truncate.outerWidth;
+        if (truncOuterHeight != null && outerHeight > truncOuterHeight) {
+            text = '';
+            lines = [];
+        }
+        else if (truncOuterWidth != null) {
+            var options = prepareTruncateOptions(
+                truncOuterWidth - (padding ? padding[1] + padding[3] : 0),
+                font,
+                truncate.ellipsis,
+                {minChar: truncate.minChar, placeholder: truncate.placeholder}
+            );
+
+            // FIXME
+            // It is not appropriate that every line has '...' when truncate multiple lines.
+            for (var i = 0, len = lines.length; i < len; i++) {
+                lines[i] = truncateSingleLine(lines[i], options);
+            }
+        }
+    }
+
+    return {
+        lines: lines,
+        height: height,
+        outerHeight: outerHeight,
+        lineHeight: lineHeight
+    };
+}
+
+/**
+ * For example: 'some text {a|some text}other text{b|some text}xxx{c|}xxx'
+ * Also consider 'bbbb{a|xxx\nzzz}xxxx\naaaa'.
+ *
+ * @public
+ * @param {string} text
+ * @param {Object} style
+ * @return {Object} block
+ * {
+ *      width,
+ *      height,
+ *      lines: [{
+ *          lineHeight,
+ *          width,
+ *          tokens: [[{
+ *              styleName,
+ *              text,
+ *              width,      // include textPadding
+ *              height,     // include textPadding
+ *              textWidth, // pure text width
+ *              textHeight, // pure text height
+ *              lineHeihgt,
+ *              font,
+ *              textAlign,
+ *              textVerticalAlign
+ *          }], [...], ...]
+ *      }, ...]
+ * }
+ * If styleName is undefined, it is plain text.
+ */
+function parseRichText(text, style) {
+    var contentBlock = {lines: [], width: 0, height: 0};
+
+    text != null && (text += '');
+    if (!text) {
+        return contentBlock;
+    }
+
+    var lastIndex = STYLE_REG.lastIndex = 0;
+    var result;
+    while ((result = STYLE_REG.exec(text)) != null) {
+        var matchedIndex = result.index;
+        if (matchedIndex > lastIndex) {
+            pushTokens(contentBlock, text.substring(lastIndex, matchedIndex));
+        }
+        pushTokens(contentBlock, result[2], result[1]);
+        lastIndex = STYLE_REG.lastIndex;
+    }
+
+    if (lastIndex < text.length) {
+        pushTokens(contentBlock, text.substring(lastIndex, text.length));
+    }
+
+    var lines = contentBlock.lines;
+    var contentHeight = 0;
+    var contentWidth = 0;
+    // For `textWidth: 100%`
+    var pendingList = [];
+
+    var stlPadding = style.textPadding;
+
+    var truncate = style.truncate;
+    var truncateWidth = truncate && truncate.outerWidth;
+    var truncateHeight = truncate && truncate.outerHeight;
+    if (stlPadding) {
+        truncateWidth != null && (truncateWidth -= stlPadding[1] + stlPadding[3]);
+        truncateHeight != null && (truncateHeight -= stlPadding[0] + stlPadding[2]);
+    }
+
+    // Calculate layout info of tokens.
+    for (var i = 0; i < lines.length; i++) {
+        var line = lines[i];
+        var lineHeight = 0;
+        var lineWidth = 0;
+
+        for (var j = 0; j < line.tokens.length; j++) {
+            var token = line.tokens[j];
+            var tokenStyle = token.styleName && style.rich[token.styleName] || {};
+            // textPadding should not inherit from style.
+            var textPadding = token.textPadding = tokenStyle.textPadding;
+
+            // textFont has been asigned to font by `normalizeStyle`.
+            var font = token.font = tokenStyle.font || style.font;
+
+            // textHeight can be used when textVerticalAlign is specified in token.
+            var tokenHeight = token.textHeight = retrieve2(
+                // textHeight should not be inherited, consider it can be specified
+                // as box height of the block.
+                tokenStyle.textHeight, getLineHeight(font)
+            );
+            textPadding && (tokenHeight += textPadding[0] + textPadding[2]);
+            token.height = tokenHeight;
+            token.lineHeight = retrieve3(
+                tokenStyle.textLineHeight, style.textLineHeight, tokenHeight
+            );
+
+            token.textAlign = tokenStyle && tokenStyle.textAlign || style.textAlign;
+            token.textVerticalAlign = tokenStyle && tokenStyle.textVerticalAlign || 'middle';
+
+            if (truncateHeight != null && contentHeight + token.lineHeight > truncateHeight) {
+                return {lines: [], width: 0, height: 0};
+            }
+
+            token.textWidth = getWidth(token.text, font);
+            var tokenWidth = tokenStyle.textWidth;
+            var tokenWidthNotSpecified = tokenWidth == null || tokenWidth === 'auto';
+
+            // Percent width, can be `100%`, can be used in drawing separate
+            // line when box width is needed to be auto.
+            if (typeof tokenWidth === 'string' && tokenWidth.charAt(tokenWidth.length - 1) === '%') {
+                token.percentWidth = tokenWidth;
+                pendingList.push(token);
+                tokenWidth = 0;
+                // Do not truncate in this case, because there is no user case
+                // and it is too complicated.
+            }
+            else {
+                if (tokenWidthNotSpecified) {
+                    tokenWidth = token.textWidth;
+
+                    // FIXME: If image is not loaded and textWidth is not specified, calling
+                    // `getBoundingRect()` will not get correct result.
+                    var textBackgroundColor = tokenStyle.textBackgroundColor;
+                    var bgImg = textBackgroundColor && textBackgroundColor.image;
+
+                    // Use cases:
+                    // (1) If image is not loaded, it will be loaded at render phase and call
+                    // `dirty()` and `textBackgroundColor.image` will be replaced with the loaded
+                    // image, and then the right size will be calculated here at the next tick.
+                    // See `graphic/helper/text.js`.
+                    // (2) If image loaded, and `textBackgroundColor.image` is image src string,
+                    // use `imageHelper.findExistImage` to find cached image.
+                    // `imageHelper.findExistImage` will always be called here before
+                    // `imageHelper.createOrUpdateImage` in `graphic/helper/text.js#renderRichText`
+                    // which ensures that image will not be rendered before correct size calcualted.
+                    if (bgImg) {
+                        bgImg = findExistImage(bgImg);
+                        if (isImageReady(bgImg)) {
+                            tokenWidth = Math.max(tokenWidth, bgImg.width * tokenHeight / bgImg.height);
+                        }
+                    }
+                }
+
+                var paddingW = textPadding ? textPadding[1] + textPadding[3] : 0;
+                tokenWidth += paddingW;
+
+                var remianTruncWidth = truncateWidth != null ? truncateWidth - lineWidth : null;
+
+                if (remianTruncWidth != null && remianTruncWidth < tokenWidth) {
+                    if (!tokenWidthNotSpecified || remianTruncWidth < paddingW) {
+                        token.text = '';
+                        token.textWidth = tokenWidth = 0;
+                    }
+                    else {
+                        token.text = truncateText(
+                            token.text, remianTruncWidth - paddingW, font, truncate.ellipsis,
+                            {minChar: truncate.minChar}
+                        );
+                        token.textWidth = getWidth(token.text, font);
+                        tokenWidth = token.textWidth + paddingW;
+                    }
+                }
+            }
+
+            lineWidth += (token.width = tokenWidth);
+            tokenStyle && (lineHeight = Math.max(lineHeight, token.lineHeight));
+        }
+
+        line.width = lineWidth;
+        line.lineHeight = lineHeight;
+        contentHeight += lineHeight;
+        contentWidth = Math.max(contentWidth, lineWidth);
+    }
+
+    contentBlock.outerWidth = contentBlock.width = retrieve2(style.textWidth, contentWidth);
+    contentBlock.outerHeight = contentBlock.height = retrieve2(style.textHeight, contentHeight);
+
+    if (stlPadding) {
+        contentBlock.outerWidth += stlPadding[1] + stlPadding[3];
+        contentBlock.outerHeight += stlPadding[0] + stlPadding[2];
+    }
+
+    for (var i = 0; i < pendingList.length; i++) {
+        var token = pendingList[i];
+        var percentWidth = token.percentWidth;
+        // Should not base on outerWidth, because token can not be placed out of padding.
+        token.width = parseInt(percentWidth, 10) / 100 * contentWidth;
+    }
+
+    return contentBlock;
+}
+
+function pushTokens(block, str, styleName) {
+    var isEmptyStr = str === '';
+    var strs = str.split('\n');
+    var lines = block.lines;
+
+    for (var i = 0; i < strs.length; i++) {
+        var text = strs[i];
+        var token = {
+            styleName: styleName,
+            text: text,
+            isLineHolder: !text && !isEmptyStr
+        };
+
+        // The first token should be appended to the last line.
+        if (!i) {
+            var tokens = (lines[lines.length - 1] || (lines[0] = {tokens: []})).tokens;
+
+            // Consider cases:
+            // (1) ''.split('\n') => ['', '\n', ''], the '' at the first item
+            // (which is a placeholder) should be replaced by new token.
+            // (2) A image backage, where token likes {a|}.
+            // (3) A redundant '' will affect textAlign in line.
+            // (4) tokens with the same tplName should not be merged, because
+            // they should be displayed in different box (with border and padding).
+            var tokensLen = tokens.length;
+            (tokensLen === 1 && tokens[0].isLineHolder)
+                ? (tokens[0] = token)
+                // Consider text is '', only insert when it is the "lineHolder" or
+                // "emptyStr". Otherwise a redundant '' will affect textAlign in line.
+                : ((text || !tokensLen || isEmptyStr) && tokens.push(token));
+        }
+        // Other tokens always start a new line.
+        else {
+            // If there is '', insert it as a placeholder.
+            lines.push({tokens: [token]});
+        }
+    }
+}
+
+function makeFont(style) {
+    // FIXME in node-canvas fontWeight is before fontStyle
+    // Use `fontSize` `fontFamily` to check whether font properties are defined.
+    var font = (style.fontSize || style.fontFamily) && [
+        style.fontStyle,
+        style.fontWeight,
+        (style.fontSize || 12) + 'px',
+        // If font properties are defined, `fontFamily` should not be ignored.
+        style.fontFamily || 'sans-serif'
+    ].join(' ');
+    return font && trim(font) || style.textFont || style.font;
+}
+
+function buildPath(ctx, shape) {
+    var x = shape.x;
+    var y = shape.y;
+    var width = shape.width;
+    var height = shape.height;
+    var r = shape.r;
+    var r1;
+    var r2;
+    var r3;
+    var r4;
+
+    // Convert width and height to positive for better borderRadius
+    if (width < 0) {
+        x = x + width;
+        width = -width;
+    }
+    if (height < 0) {
+        y = y + height;
+        height = -height;
+    }
+
+    if (typeof r === 'number') {
+        r1 = r2 = r3 = r4 = r;
+    }
+    else if (r instanceof Array) {
+        if (r.length === 1) {
+            r1 = r2 = r3 = r4 = r[0];
+        }
+        else if (r.length === 2) {
+            r1 = r3 = r[0];
+            r2 = r4 = r[1];
+        }
+        else if (r.length === 3) {
+            r1 = r[0];
+            r2 = r4 = r[1];
+            r3 = r[2];
+        }
+        else {
+            r1 = r[0];
+            r2 = r[1];
+            r3 = r[2];
+            r4 = r[3];
+        }
+    }
+    else {
+        r1 = r2 = r3 = r4 = 0;
+    }
+
+    var total;
+    if (r1 + r2 > width) {
+        total = r1 + r2;
+        r1 *= width / total;
+        r2 *= width / total;
+    }
+    if (r3 + r4 > width) {
+        total = r3 + r4;
+        r3 *= width / total;
+        r4 *= width / total;
+    }
+    if (r2 + r3 > height) {
+        total = r2 + r3;
+        r2 *= height / total;
+        r3 *= height / total;
+    }
+    if (r1 + r4 > height) {
+        total = r1 + r4;
+        r1 *= height / total;
+        r4 *= height / total;
+    }
+    ctx.moveTo(x + r1, y);
+    ctx.lineTo(x + width - r2, y);
+    r2 !== 0 && ctx.arc(x + width - r2, y + r2, r2, -Math.PI / 2, 0);
+    ctx.lineTo(x + width, y + height - r3);
+    r3 !== 0 && ctx.arc(x + width - r3, y + height - r3, r3, 0, Math.PI / 2);
+    ctx.lineTo(x + r4, y + height);
+    r4 !== 0 && ctx.arc(x + r4, y + height - r4, r4, Math.PI / 2, Math.PI);
+    ctx.lineTo(x, y + r1);
+    r1 !== 0 && ctx.arc(x + r1, y + r1, r1, Math.PI, Math.PI * 1.5);
+}
+
+// TODO: Have not support 'start', 'end' yet.
+var VALID_TEXT_ALIGN = {left: 1, right: 1, center: 1};
+var VALID_TEXT_VERTICAL_ALIGN = {top: 1, bottom: 1, middle: 1};
+
+/**
+ * @param {module:zrender/graphic/Style} style
+ * @return {module:zrender/graphic/Style} The input style.
+ */
+function normalizeTextStyle(style) {
+    normalizeStyle(style);
+    each$1(style.rich, normalizeStyle);
+    return style;
+}
+
+function normalizeStyle(style) {
+    if (style) {
+
+        style.font = makeFont(style);
+
+        var textAlign = style.textAlign;
+        textAlign === 'middle' && (textAlign = 'center');
+        style.textAlign = (
+            textAlign == null || VALID_TEXT_ALIGN[textAlign]
+        ) ? textAlign : 'left';
+
+        // Compatible with textBaseline.
+        var textVerticalAlign = style.textVerticalAlign || style.textBaseline;
+        textVerticalAlign === 'center' && (textVerticalAlign = 'middle');
+        style.textVerticalAlign = (
+            textVerticalAlign == null || VALID_TEXT_VERTICAL_ALIGN[textVerticalAlign]
+        ) ? textVerticalAlign : 'top';
+
+        var textPadding = style.textPadding;
+        if (textPadding) {
+            style.textPadding = normalizeCssArray(style.textPadding);
+        }
+    }
+}
+
+/**
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {string} text
+ * @param {module:zrender/graphic/Style} style
+ * @param {Object|boolean} [rect] {x, y, width, height}
+ *                  If set false, rect text is not used.
+ */
+function renderText(hostEl, ctx, text, style, rect) {
+    style.rich
+        ? renderRichText(hostEl, ctx, text, style, rect)
+        : renderPlainText(hostEl, ctx, text, style, rect);
+}
+
+function renderPlainText(hostEl, ctx, text, style, rect) {
+    var font = setCtx(ctx, 'font', style.font || DEFAULT_FONT);
+
+    var textPadding = style.textPadding;
+
+    var contentBlock = hostEl.__textCotentBlock;
+    if (!contentBlock || hostEl.__dirty) {
+        contentBlock = hostEl.__textCotentBlock = parsePlainText(
+            text, font, textPadding, style.truncate
+        );
+    }
+
+    var outerHeight = contentBlock.outerHeight;
+
+    var textLines = contentBlock.lines;
+    var lineHeight = contentBlock.lineHeight;
+
+    var boxPos = getBoxPosition(outerHeight, style, rect);
+    var baseX = boxPos.baseX;
+    var baseY = boxPos.baseY;
+    var textAlign = boxPos.textAlign;
+    var textVerticalAlign = boxPos.textVerticalAlign;
+
+    // Origin of textRotation should be the base point of text drawing.
+    applyTextRotation(ctx, style, rect, baseX, baseY);
+
+    var boxY = adjustTextY(baseY, outerHeight, textVerticalAlign);
+    var textX = baseX;
+    var textY = boxY;
+
+    var needDrawBg = needDrawBackground(style);
+    if (needDrawBg || textPadding) {
+        // Consider performance, do not call getTextWidth util necessary.
+        var textWidth = getWidth(text, font);
+        var outerWidth = textWidth;
+        textPadding && (outerWidth += textPadding[1] + textPadding[3]);
+        var boxX = adjustTextX(baseX, outerWidth, textAlign);
+
+        needDrawBg && drawBackground(hostEl, ctx, style, boxX, boxY, outerWidth, outerHeight);
+
+        if (textPadding) {
+            textX = getTextXForPadding(baseX, textAlign, textPadding);
+            textY += textPadding[0];
+        }
+    }
+
+    setCtx(ctx, 'textAlign', textAlign || 'left');
+    // Force baseline to be "middle". Otherwise, if using "top", the
+    // text will offset downward a little bit in font "Microsoft YaHei".
+    setCtx(ctx, 'textBaseline', 'middle');
+
+    // Always set shadowBlur and shadowOffset to avoid leak from displayable.
+    setCtx(ctx, 'shadowBlur', style.textShadowBlur || 0);
+    setCtx(ctx, 'shadowColor', style.textShadowColor || 'transparent');
+    setCtx(ctx, 'shadowOffsetX', style.textShadowOffsetX || 0);
+    setCtx(ctx, 'shadowOffsetY', style.textShadowOffsetY || 0);
+
+    // `textBaseline` is set as 'middle'.
+    textY += lineHeight / 2;
+
+    var textStrokeWidth = style.textStrokeWidth;
+    var textStroke = getStroke(style.textStroke, textStrokeWidth);
+    var textFill = getFill(style.textFill);
+
+    if (textStroke) {
+        setCtx(ctx, 'lineWidth', textStrokeWidth);
+        setCtx(ctx, 'strokeStyle', textStroke);
+    }
+    if (textFill) {
+        setCtx(ctx, 'fillStyle', textFill);
+    }
+
+    for (var i = 0; i < textLines.length; i++) {
+        // Fill after stroke so the outline will not cover the main part.
+        textStroke && ctx.strokeText(textLines[i], textX, textY);
+        textFill && ctx.fillText(textLines[i], textX, textY);
+        textY += lineHeight;
+    }
+}
+
+function renderRichText(hostEl, ctx, text, style, rect) {
+    var contentBlock = hostEl.__textCotentBlock;
+
+    if (!contentBlock || hostEl.__dirty) {
+        contentBlock = hostEl.__textCotentBlock = parseRichText(text, style);
+    }
+
+    drawRichText(hostEl, ctx, contentBlock, style, rect);
+}
+
+function drawRichText(hostEl, ctx, contentBlock, style, rect) {
+    var contentWidth = contentBlock.width;
+    var outerWidth = contentBlock.outerWidth;
+    var outerHeight = contentBlock.outerHeight;
+    var textPadding = style.textPadding;
+
+    var boxPos = getBoxPosition(outerHeight, style, rect);
+    var baseX = boxPos.baseX;
+    var baseY = boxPos.baseY;
+    var textAlign = boxPos.textAlign;
+    var textVerticalAlign = boxPos.textVerticalAlign;
+
+    // Origin of textRotation should be the base point of text drawing.
+    applyTextRotation(ctx, style, rect, baseX, baseY);
+
+    var boxX = adjustTextX(baseX, outerWidth, textAlign);
+    var boxY = adjustTextY(baseY, outerHeight, textVerticalAlign);
+    var xLeft = boxX;
+    var lineTop = boxY;
+    if (textPadding) {
+        xLeft += textPadding[3];
+        lineTop += textPadding[0];
+    }
+    var xRight = xLeft + contentWidth;
+
+    needDrawBackground(style) && drawBackground(
+        hostEl, ctx, style, boxX, boxY, outerWidth, outerHeight
+    );
+
+    for (var i = 0; i < contentBlock.lines.length; i++) {
+        var line = contentBlock.lines[i];
+        var tokens = line.tokens;
+        var tokenCount = tokens.length;
+        var lineHeight = line.lineHeight;
+        var usedWidth = line.width;
+
+        var leftIndex = 0;
+        var lineXLeft = xLeft;
+        var lineXRight = xRight;
+        var rightIndex = tokenCount - 1;
+        var token;
+
+        while (
+            leftIndex < tokenCount
+            && (token = tokens[leftIndex], !token.textAlign || token.textAlign === 'left')
+        ) {
+            placeToken(hostEl, ctx, token, style, lineHeight, lineTop, lineXLeft, 'left');
+            usedWidth -= token.width;
+            lineXLeft += token.width;
+            leftIndex++;
+        }
+
+        while (
+            rightIndex >= 0
+            && (token = tokens[rightIndex], token.textAlign === 'right')
+        ) {
+            placeToken(hostEl, ctx, token, style, lineHeight, lineTop, lineXRight, 'right');
+            usedWidth -= token.width;
+            lineXRight -= token.width;
+            rightIndex--;
+        }
+
+        // The other tokens are placed as textAlign 'center' if there is enough space.
+        lineXLeft += (contentWidth - (lineXLeft - xLeft) - (xRight - lineXRight) - usedWidth) / 2;
+        while (leftIndex <= rightIndex) {
+            token = tokens[leftIndex];
+            // Consider width specified by user, use 'center' rather than 'left'.
+            placeToken(hostEl, ctx, token, style, lineHeight, lineTop, lineXLeft + token.width / 2, 'center');
+            lineXLeft += token.width;
+            leftIndex++;
+        }
+
+        lineTop += lineHeight;
+    }
+}
+
+function applyTextRotation(ctx, style, rect, x, y) {
+    // textRotation only apply in RectText.
+    if (rect && style.textRotation) {
+        var origin = style.textOrigin;
+        if (origin === 'center') {
+            x = rect.width / 2 + rect.x;
+            y = rect.height / 2 + rect.y;
+        }
+        else if (origin) {
+            x = origin[0] + rect.x;
+            y = origin[1] + rect.y;
+        }
+
+        ctx.translate(x, y);
+        // Positive: anticlockwise
+        ctx.rotate(-style.textRotation);
+        ctx.translate(-x, -y);
+    }
+}
+
+function placeToken(hostEl, ctx, token, style, lineHeight, lineTop, x, textAlign) {
+    var tokenStyle = style.rich[token.styleName] || {};
+
+    // 'ctx.textBaseline' is always set as 'middle', for sake of
+    // the bias of "Microsoft YaHei".
+    var textVerticalAlign = token.textVerticalAlign;
+    var y = lineTop + lineHeight / 2;
+    if (textVerticalAlign === 'top') {
+        y = lineTop + token.height / 2;
+    }
+    else if (textVerticalAlign === 'bottom') {
+        y = lineTop + lineHeight - token.height / 2;
+    }
+
+    !token.isLineHolder && needDrawBackground(tokenStyle) && drawBackground(
+        hostEl,
+        ctx,
+        tokenStyle,
+        textAlign === 'right'
+            ? x - token.width
+            : textAlign === 'center'
+            ? x - token.width / 2
+            : x,
+        y - token.height / 2,
+        token.width,
+        token.height
+    );
+
+    var textPadding = token.textPadding;
+    if (textPadding) {
+        x = getTextXForPadding(x, textAlign, textPadding);
+        y -= token.height / 2 - textPadding[2] - token.textHeight / 2;
+    }
+
+    setCtx(ctx, 'shadowBlur', retrieve3(tokenStyle.textShadowBlur, style.textShadowBlur, 0));
+    setCtx(ctx, 'shadowColor', tokenStyle.textShadowColor || style.textShadowColor || 'transparent');
+    setCtx(ctx, 'shadowOffsetX', retrieve3(tokenStyle.textShadowOffsetX, style.textShadowOffsetX, 0));
+    setCtx(ctx, 'shadowOffsetY', retrieve3(tokenStyle.textShadowOffsetY, style.textShadowOffsetY, 0));
+
+    setCtx(ctx, 'textAlign', textAlign);
+    // Force baseline to be "middle". Otherwise, if using "top", the
+    // text will offset downward a little bit in font "Microsoft YaHei".
+    setCtx(ctx, 'textBaseline', 'middle');
+
+    setCtx(ctx, 'font', token.font || DEFAULT_FONT);
+
+    var textStroke = getStroke(tokenStyle.textStroke || style.textStroke, textStrokeWidth);
+    var textFill = getFill(tokenStyle.textFill || style.textFill);
+    var textStrokeWidth = retrieve2(tokenStyle.textStrokeWidth, style.textStrokeWidth);
+
+    // Fill after stroke so the outline will not cover the main part.
+    if (textStroke) {
+        setCtx(ctx, 'lineWidth', textStrokeWidth);
+        setCtx(ctx, 'strokeStyle', textStroke);
+        ctx.strokeText(token.text, x, y);
+    }
+    if (textFill) {
+        setCtx(ctx, 'fillStyle', textFill);
+        ctx.fillText(token.text, x, y);
+    }
+}
+
+function needDrawBackground(style) {
+    return style.textBackgroundColor
+        || (style.textBorderWidth && style.textBorderColor);
+}
+
+// style: {textBackgroundColor, textBorderWidth, textBorderColor, textBorderRadius}
+// shape: {x, y, width, height}
+function drawBackground(hostEl, ctx, style, x, y, width, height) {
+    var textBackgroundColor = style.textBackgroundColor;
+    var textBorderWidth = style.textBorderWidth;
+    var textBorderColor = style.textBorderColor;
+    var isPlainBg = isString(textBackgroundColor);
+
+    setCtx(ctx, 'shadowBlur', style.textBoxShadowBlur || 0);
+    setCtx(ctx, 'shadowColor', style.textBoxShadowColor || 'transparent');
+    setCtx(ctx, 'shadowOffsetX', style.textBoxShadowOffsetX || 0);
+    setCtx(ctx, 'shadowOffsetY', style.textBoxShadowOffsetY || 0);
+
+    if (isPlainBg || (textBorderWidth && textBorderColor)) {
+        ctx.beginPath();
+        var textBorderRadius = style.textBorderRadius;
+        if (!textBorderRadius) {
+            ctx.rect(x, y, width, height);
+        }
+        else {
+            buildPath(ctx, {
+                x: x, y: y, width: width, height: height, r: textBorderRadius
+            });
+        }
+        ctx.closePath();
+    }
+
+    if (isPlainBg) {
+        setCtx(ctx, 'fillStyle', textBackgroundColor);
+        ctx.fill();
+    }
+    else if (isObject$1(textBackgroundColor)) {
+        var image = textBackgroundColor.image;
+
+        image = createOrUpdateImage(
+            image, null, hostEl, onBgImageLoaded, textBackgroundColor
+        );
+        if (image && isImageReady(image)) {
+            ctx.drawImage(image, x, y, width, height);
+        }
+    }
+
+    if (textBorderWidth && textBorderColor) {
+        setCtx(ctx, 'lineWidth', textBorderWidth);
+        setCtx(ctx, 'strokeStyle', textBorderColor);
+        ctx.stroke();
+    }
+}
+
+function onBgImageLoaded(image, textBackgroundColor) {
+    // Replace image, so that `contain/text.js#parseRichText`
+    // will get correct result in next tick.
+    textBackgroundColor.image = image;
+}
+
+function getBoxPosition(blockHeiht, style, rect) {
+    var baseX = style.x || 0;
+    var baseY = style.y || 0;
+    var textAlign = style.textAlign;
+    var textVerticalAlign = style.textVerticalAlign;
+
+    // Text position represented by coord
+    if (rect) {
+        var textPosition = style.textPosition;
+        if (textPosition instanceof Array) {
+            // Percent
+            baseX = rect.x + parsePercent(textPosition[0], rect.width);
+            baseY = rect.y + parsePercent(textPosition[1], rect.height);
+        }
+        else {
+            var res = adjustTextPositionOnRect(
+                textPosition, rect, style.textDistance
+            );
+            baseX = res.x;
+            baseY = res.y;
+            // Default align and baseline when has textPosition
+            textAlign = textAlign || res.textAlign;
+            textVerticalAlign = textVerticalAlign || res.textVerticalAlign;
+        }
+
+        // textOffset is only support in RectText, otherwise
+        // we have to adjust boundingRect for textOffset.
+        var textOffset = style.textOffset;
+        if (textOffset) {
+            baseX += textOffset[0];
+            baseY += textOffset[1];
+        }
+    }
+
+    return {
+        baseX: baseX,
+        baseY: baseY,
+        textAlign: textAlign,
+        textVerticalAlign: textVerticalAlign
+    };
+}
+
+function setCtx(ctx, prop, value) {
+    ctx[prop] = fixShadow(ctx, prop, value);
+    return ctx[prop];
+}
+
+/**
+ * @param {string} [stroke] If specified, do not check style.textStroke.
+ * @param {string} [lineWidth] If specified, do not check style.textStroke.
+ * @param {number} style
+ */
+function getStroke(stroke, lineWidth) {
+    return (stroke == null || lineWidth <= 0 || stroke === 'transparent' || stroke === 'none')
+        ? null
+        // TODO pattern and gradient?
+        : (stroke.image || stroke.colorStops)
+        ? '#000'
+        : stroke;
+}
+
+function getFill(fill) {
+    return (fill == null || fill === 'none')
+        ? null
+        // TODO pattern and gradient?
+        : (fill.image || fill.colorStops)
+        ? '#000'
+        : fill;
+}
+
+function parsePercent(value, maxValue) {
+    if (typeof value === 'string') {
+        if (value.lastIndexOf('%') >= 0) {
+            return parseFloat(value) / 100 * maxValue;
+        }
+        return parseFloat(value);
+    }
+    return value;
+}
+
+function getTextXForPadding(x, textAlign, textPadding) {
+    return textAlign === 'right'
+        ? (x - textPadding[1])
+        : textAlign === 'center'
+        ? (x + textPadding[3] / 2 - textPadding[1] / 2)
+        : (x + textPadding[3]);
+}
+
+/**
+ * @param {string} text
+ * @param {module:zrender/Style} style
+ * @return {boolean}
+ */
+function needDrawText(text, style) {
+    return text != null
+        && (text
+            || style.textBackgroundColor
+            || (style.textBorderWidth && style.textBorderColor)
+            || style.textPadding
+        );
+}
+
+/**
+ * Mixin for drawing text in a element bounding rect
+ * @module zrender/mixin/RectText
+ */
+
+var tmpRect$1 = new BoundingRect();
+
+var RectText = function () {};
+
+RectText.prototype = {
+
+    constructor: RectText,
+
+    /**
+     * Draw text in a rect with specified position.
+     * @param  {CanvasRenderingContext2D} ctx
+     * @param  {Object} rect Displayable rect
+     */
+    drawRectText: function (ctx, rect) {
+        var style = this.style;
+
+        rect = style.textRect || rect;
+
+        // Optimize, avoid normalize every time.
+        this.__dirty && normalizeTextStyle(style, true);
+
+        var text = style.text;
+
+        // Convert to string
+        text != null && (text += '');
+
+        if (!needDrawText(text, style)) {
+            return;
+        }
+
+        // FIXME
+        ctx.save();
+
+        // Transform rect to view space
+        var transform = this.transform;
+        if (!style.transformText) {
+            if (transform) {
+                tmpRect$1.copy(rect);
+                tmpRect$1.applyTransform(transform);
+                rect = tmpRect$1;
+            }
+        }
+        else {
+            this.setTransform(ctx);
+        }
+
+        // transformText and textRotation can not be used at the same time.
+        renderText(this, ctx, text, style, rect);
+
+        ctx.restore();
+    }
+};
+
+/**
+ * å¯ç»˜åˆ¶çš„å›¾å½¢åŸºç±»
+ * Base class of all displayable graphic objects
+ * @module zrender/graphic/Displayable
+ */
+
+
+/**
+ * @alias module:zrender/graphic/Displayable
+ * @extends module:zrender/Element
+ * @extends module:zrender/graphic/mixin/RectText
+ */
+function Displayable(opts) {
+
+    opts = opts || {};
+
+    Element.call(this, opts);
+
+    // Extend properties
+    for (var name in opts) {
+        if (
+            opts.hasOwnProperty(name) &&
+            name !== 'style'
+        ) {
+            this[name] = opts[name];
+        }
+    }
+
+    /**
+     * @type {module:zrender/graphic/Style}
+     */
+    this.style = new Style(opts.style, this);
+
+    this._rect = null;
+    // Shapes for cascade clipping.
+    this.__clipPaths = [];
+
+    // FIXME Stateful must be mixined after style is setted
+    // Stateful.call(this, opts);
+}
+
+Displayable.prototype = {
+
+    constructor: Displayable,
+
+    type: 'displayable',
+
+    /**
+     * Displayable æ˜¯å¦ä¸ºè„ï¼ŒPainter ä¸ä¼šæ ¹æ®è¯¥æ ‡è®°åˆ¤æ–æ˜¯å¦éœ€è¦æ˜¯å¦éœ€è¦é‡æ–°ç»˜åˆ¶
+     * Dirty flag. From which painter will determine if this displayable object needs brush
+     * @name module:zrender/graphic/Displayable#__dirty
+     * @type {boolean}
+     */
+    __dirty: true,
+
+    /**
+     * å›¾å½¢æ˜¯å¦å¯è§ï¼Œä¸ºtrueæ—¶ä¸ç»˜åˆ¶å›¾å½¢ï¼Œä½†æ˜¯ä»èƒ½è§¦å‘é¼ æ ‡äº‹ä»¶
+     * If ignore drawing of the displayable object. Mouse event will still be triggered
+     * @name module:/zrender/graphic/Displayable#invisible
+     * @type {boolean}
+     * @default false
+     */
+    invisible: false,
+
+    /**
+     * @name module:/zrender/graphic/Displayable#z
+     * @type {number}
+     * @default 0
+     */
+    z: 0,
+
+    /**
+     * @name module:/zrender/graphic/Displayable#z
+     * @type {number}
+     * @default 0
+     */
+    z2: 0,
+
+    /**
+     * zå±‚levelï¼Œå†³å®šç»˜ç”»åœ¨å“ªå±‚canvasä¸
+     * @name module:/zrender/graphic/Displayable#zlevel
+     * @type {number}
+     * @default 0
+     */
+    zlevel: 0,
+
+    /**
+     * æ˜¯å¦å¯æ‹–æ‹½
+     * @name module:/zrender/graphic/Displayable#draggable
+     * @type {boolean}
+     * @default false
+     */
+    draggable: false,
+
+    /**
+     * æ˜¯å¦æ£åœ¨æ‹–æ‹½
+     * @name module:/zrender/graphic/Displayable#draggable
+     * @type {boolean}
+     * @default false
+     */
+    dragging: false,
+
+    /**
+     * æ˜¯å¦ç›¸åº”é¼ æ ‡äº‹ä»¶
+     * @name module:/zrender/graphic/Displayable#silent
+     * @type {boolean}
+     * @default false
+     */
+    silent: false,
+
+    /**
+     * If enable culling
+     * @type {boolean}
+     * @default false
+     */
+    culling: false,
+
+    /**
+     * Mouse cursor when hovered
+     * @name module:/zrender/graphic/Displayable#cursor
+     * @type {string}
+     */
+    cursor: 'pointer',
+
+    /**
+     * If hover area is bounding rect
+     * @name module:/zrender/graphic/Displayable#rectHover
+     * @type {string}
+     */
+    rectHover: false,
+
+    /**
+     * Render the element progressively when the value >= 0,
+     * usefull for large data.
+     * @type {boolean}
+     */
+    progressive: false,
+
+    /**
+     * @type {boolean}
+     */
+    incremental: false,
+    // inplace is used with incremental
+    inplace: false,
+
+    beforeBrush: function (ctx) {},
+
+    afterBrush: function (ctx) {},
+
+    /**
+     * å›¾å½¢ç»˜åˆ¶æ–¹æ³•
+     * @param {CanvasRenderingContext2D} ctx
+     */
+    // Interface
+    brush: function (ctx, prevEl) {},
+
+    /**
+     * èŽ·å–æœ€å°åŒ…å›´ç›’
+     * @return {module:zrender/core/BoundingRect}
+     */
+    // Interface
+    getBoundingRect: function () {},
+
+    /**
+     * åˆ¤æ–åæ ‡ x, y æ˜¯å¦åœ¨å›¾å½¢ä¸Š
+     * If displayable element contain coord x, y
+     * @param  {number} x
+     * @param  {number} y
+     * @return {boolean}
+     */
+    contain: function (x, y) {
+        return this.rectContain(x, y);
+    },
+
+    /**
+     * @param  {Function} cb
+     * @param  {}   context
+     */
+    traverse: function (cb, context) {
+        cb.call(context, this);
+    },
+
+    /**
+     * åˆ¤æ–åæ ‡ x, y æ˜¯å¦åœ¨å›¾å½¢çš„åŒ…å›´ç›’ä¸Š
+     * If bounding rect of element contain coord x, y
+     * @param  {number} x
+     * @param  {number} y
+     * @return {boolean}
+     */
+    rectContain: function (x, y) {
+        var coord = this.transformCoordToLocal(x, y);
+        var rect = this.getBoundingRect();
+        return rect.contain(coord[0], coord[1]);
+    },
+
+    /**
+     * æ ‡è®°å›¾å½¢å…ƒç´ ä¸ºè„ï¼Œå¹¶ä¸”åœ¨ä¸‹ä¸€å¸§é‡ç»˜
+     * Mark displayable element dirty and refresh next frame
+     */
+    dirty: function () {
+        this.__dirty = true;
+
+        this._rect = null;
+
+        this.__zr && this.__zr.refresh();
+    },
+
+    /**
+     * å›¾å½¢æ˜¯å¦ä¼šè§¦å‘äº‹ä»¶
+     * If displayable object binded any event
+     * @return {boolean}
+     */
+    // TODO, é€šè¿‡ bind ç»‘å®šçš„äº‹ä»¶
+    // isSilent: function () {
+    //     return !(
+    //         this.hoverable || this.draggable
+    //         || this.onmousemove || this.onmouseover || this.onmouseout
+    //         || this.onmousedown || this.onmouseup || this.onclick
+    //         || this.ondragenter || this.ondragover || this.ondragleave
+    //         || this.ondrop
+    //     );
+    // },
+    /**
+     * Alias for animate('style')
+     * @param {boolean} loop
+     */
+    animateStyle: function (loop) {
+        return this.animate('style', loop);
+    },
+
+    attrKV: function (key, value) {
+        if (key !== 'style') {
+            Element.prototype.attrKV.call(this, key, value);
+        }
+        else {
+            this.style.set(value);
+        }
+    },
+
+    /**
+     * @param {Object|string} key
+     * @param {*} value
+     */
+    setStyle: function (key, value) {
+        this.style.set(key, value);
+        this.dirty(false);
+        return this;
+    },
+
+    /**
+     * Use given style object
+     * @param  {Object} obj
+     */
+    useStyle: function (obj) {
+        this.style = new Style(obj, this);
+        this.dirty(false);
+        return this;
+    }
+};
+
+inherits(Displayable, Element);
+
+mixin(Displayable, RectText);
+
+/**
+ * @alias zrender/graphic/Image
+ * @extends module:zrender/graphic/Displayable
+ * @constructor
+ * @param {Object} opts
+ */
+function ZImage(opts) {
+    Displayable.call(this, opts);
+}
+
+ZImage.prototype = {
+
+    constructor: ZImage,
+
+    type: 'image',
+
+    brush: function (ctx, prevEl) {
+        var style = this.style;
+        var src = style.image;
+
+        // Must bind each time
+        style.bind(ctx, this, prevEl);
+
+        var image = this._image = createOrUpdateImage(
+            src,
+            this._image,
+            this,
+            this.onload
+        );
+
+        if (!image || !isImageReady(image)) {
+            return;
+        }
+
+        // å›¾ç‰‡å·²ç»åŠ è½½å®Œæˆ
+        // if (image.nodeName.toUpperCase() == 'IMG') {
+        //     if (!image.complete) {
+        //         return;
+        //     }
+        // }
+        // Else is canvas
+
+        var x = style.x || 0;
+        var y = style.y || 0;
+        var width = style.width;
+        var height = style.height;
+        var aspect = image.width / image.height;
+        if (width == null && height != null) {
+            // Keep image/height ratio
+            width = height * aspect;
+        }
+        else if (height == null && width != null) {
+            height = width / aspect;
+        }
+        else if (width == null && height == null) {
+            width = image.width;
+            height = image.height;
+        }
+
+        // è®¾ç½®transform
+        this.setTransform(ctx);
+
+        if (style.sWidth && style.sHeight) {
+            var sx = style.sx || 0;
+            var sy = style.sy || 0;
+            ctx.drawImage(
+                image,
+                sx, sy, style.sWidth, style.sHeight,
+                x, y, width, height
+            );
+        }
+        else if (style.sx && style.sy) {
+            var sx = style.sx;
+            var sy = style.sy;
+            var sWidth = width - sx;
+            var sHeight = height - sy;
+            ctx.drawImage(
+                image,
+                sx, sy, sWidth, sHeight,
+                x, y, width, height
+            );
+        }
+        else {
+            ctx.drawImage(image, x, y, width, height);
+        }
+
+        // Draw rect text
+        if (style.text != null) {
+            // Only restore transform when needs draw text.
+            this.restoreTransform(ctx);    
+            this.drawRectText(ctx, this.getBoundingRect());
+        }
+    },
+
+    getBoundingRect: function () {
+        var style = this.style;
+        if (! this._rect) {
+            this._rect = new BoundingRect(
+                style.x || 0, style.y || 0, style.width || 0, style.height || 0
+            );
+        }
+        return this._rect;
+    }
+};
+
+inherits(ZImage, Displayable);
+
+var HOVER_LAYER_ZLEVEL = 1e5;
+var CANVAS_ZLEVEL = 314159;
+
+var EL_AFTER_INCREMENTAL_INC = 0.01;
+var INCREMENTAL_INC = 0.001;
+
+function parseInt10(val) {
+    return parseInt(val, 10);
+}
+
+function isLayerValid(layer) {
+    if (!layer) {
+        return false;
+    }
+
+    if (layer.__builtin__) {
+        return true;
+    }
+
+    if (typeof(layer.resize) !== 'function'
+        || typeof(layer.refresh) !== 'function'
+    ) {
+        return false;
+    }
+
+    return true;
+}
+
+var tmpRect = new BoundingRect(0, 0, 0, 0);
+var viewRect = new BoundingRect(0, 0, 0, 0);
+function isDisplayableCulled(el, width, height) {
+    tmpRect.copy(el.getBoundingRect());
+    if (el.transform) {
+        tmpRect.applyTransform(el.transform);
+    }
+    viewRect.width = width;
+    viewRect.height = height;
+    return !tmpRect.intersect(viewRect);
+}
+
+function isClipPathChanged(clipPaths, prevClipPaths) {
+    if (clipPaths == prevClipPaths) { // Can both be null or undefined
+        return false;
+    }
+
+    if (!clipPaths || !prevClipPaths || (clipPaths.length !== prevClipPaths.length)) {
+        return true;
+    }
+    for (var i = 0; i < clipPaths.length; i++) {
+        if (clipPaths[i] !== prevClipPaths[i]) {
+            return true;
+        }
+    }
+}
+
+function doClip(clipPaths, ctx) {
+    for (var i = 0; i < clipPaths.length; i++) {
+        var clipPath = clipPaths[i];
+
+        clipPath.setTransform(ctx);
+        ctx.beginPath();
+        clipPath.buildPath(ctx, clipPath.shape);
+        ctx.clip();
+        // Transform back
+        clipPath.restoreTransform(ctx);
+    }
+}
+
+function createRoot(width, height) {
+    var domRoot = document.createElement('div');
+
+    // domRoot.onselectstart = returnFalse; // é¿å…é¡µé¢é€‰ä¸çš„å°´å°¬
+    domRoot.style.cssText = [
+        'position:relative',
+        'overflow:hidden',
+        'width:' + width + 'px',
+        'height:' + height + 'px',
+        'padding:0',
+        'margin:0',
+        'border-width:0'
+    ].join(';') + ';';
+
+    return domRoot;
+}
+
+
+/**
+ * @alias module:zrender/Painter
+ * @constructor
+ * @param {HTMLElement} root ç»˜å›¾å®¹å™¨
+ * @param {module:zrender/Storage} storage
+ * @param {Object} opts
+ */
+var Painter = function (root, storage, opts) {
+
+    this.type = 'canvas';
+
+    // In node environment using node-canvas
+    var singleCanvas = !root.nodeName // In node ?
+        || root.nodeName.toUpperCase() === 'CANVAS';
+
+    this._opts = opts = extend({}, opts || {});
+
+    /**
+     * @type {number}
+     */
+    this.dpr = opts.devicePixelRatio || devicePixelRatio;
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._singleCanvas = singleCanvas;
+    /**
+     * ç»˜å›¾å®¹å™¨
+     * @type {HTMLElement}
+     */
+    this.root = root;
+
+    var rootStyle = root.style;
+
+    if (rootStyle) {
+        rootStyle['-webkit-tap-highlight-color'] = 'transparent';
+        rootStyle['-webkit-user-select'] =
+        rootStyle['user-select'] =
+        rootStyle['-webkit-touch-callout'] = 'none';
+
+        root.innerHTML = '';
+    }
+
+    /**
+     * @type {module:zrender/Storage}
+     */
+    this.storage = storage;
+
+    /**
+     * @type {Array.<number>}
+     * @private
+     */
+    var zlevelList = this._zlevelList = [];
+
+    /**
+     * @type {Object.<string, module:zrender/Layer>}
+     * @private
+     */
+    var layers = this._layers = {};
+
+    /**
+     * @type {Object.<string, Object>}
+     * @private
+     */
+    this._layerConfig = {};
+
+    /**
+     * zrender will do compositing when root is a canvas and have multiple zlevels.
+     */
+    this._needsManuallyCompositing = false;
+
+    if (!singleCanvas) {
+        this._width = this._getSize(0);
+        this._height = this._getSize(1);
+
+        var domRoot = this._domRoot = createRoot(
+            this._width, this._height
+        );
+        root.appendChild(domRoot);
+    }
+    else {
+        var width = root.width;
+        var height = root.height;
+
+        if (opts.width != null) {
+            width = opts.width;
+        }
+        if (opts.height != null) {
+            height = opts.height;
+        }
+        this.dpr = opts.devicePixelRatio || 1;
+
+        // Use canvas width and height directly
+        root.width = width * this.dpr;
+        root.height = height * this.dpr;
+
+        this._width = width;
+        this._height = height;
+
+        // Create layer if only one given canvas
+        // Device can be specified to create a high dpi image.
+        var mainLayer = new Layer(root, this, this.dpr);
+        mainLayer.__builtin__ = true;
+        mainLayer.initContext();
+        // FIXME Use canvas width and height
+        // mainLayer.resize(width, height);
+        layers[CANVAS_ZLEVEL] = mainLayer;
+        mainLayer.zlevel = CANVAS_ZLEVEL;
+        // Not use common zlevel.
+        zlevelList.push(CANVAS_ZLEVEL);
+
+        this._domRoot = root;
+    }
+
+    /**
+     * @type {module:zrender/Layer}
+     * @private
+     */
+    this._hoverlayer = null;
+
+    this._hoverElements = [];
+};
+
+Painter.prototype = {
+
+    constructor: Painter,
+
+    getType: function () {
+        return 'canvas';
+    },
+
+    /**
+     * If painter use a single canvas
+     * @return {boolean}
+     */
+    isSingleCanvas: function () {
+        return this._singleCanvas;
+    },
+    /**
+     * @return {HTMLDivElement}
+     */
+    getViewportRoot: function () {
+        return this._domRoot;
+    },
+
+    getViewportRootOffset: function () {
+        var viewportRoot = this.getViewportRoot();
+        if (viewportRoot) {
+            return {
+                offsetLeft: viewportRoot.offsetLeft || 0,
+                offsetTop: viewportRoot.offsetTop || 0
+            };
+        }
+    },
+
+    /**
+     * åˆ·æ–°
+     * @param {boolean} [paintAll=false] å¼ºåˆ¶ç»˜åˆ¶æ‰€æœ‰displayable
+     */
+    refresh: function (paintAll) {
+
+        var list = this.storage.getDisplayList(true);
+
+        var zlevelList = this._zlevelList;
+
+        this._redrawId = Math.random();
+
+        this._paintList(list, paintAll, this._redrawId);
+
+        // Paint custum layers
+        for (var i = 0; i < zlevelList.length; i++) {
+            var z = zlevelList[i];
+            var layer = this._layers[z];
+            if (!layer.__builtin__ && layer.refresh) {
+                var clearColor = i === 0 ? this._backgroundColor : null;
+                layer.refresh(clearColor);
+            }
+        }
+
+        this.refreshHover();
+
+        return this;
+    },
+
+    addHover: function (el, hoverStyle) {
+        if (el.__hoverMir) {
+            return;
+        }
+        var elMirror = new el.constructor({
+            style: el.style,
+            shape: el.shape
+        });
+        elMirror.__from = el;
+        el.__hoverMir = elMirror;
+        elMirror.setStyle(hoverStyle);
+        this._hoverElements.push(elMirror);
+    },
+
+    removeHover: function (el) {
+        var elMirror = el.__hoverMir;
+        var hoverElements = this._hoverElements;
+        var idx = indexOf(hoverElements, elMirror);
+        if (idx >= 0) {
+            hoverElements.splice(idx, 1);
+        }
+        el.__hoverMir = null;
+    },
+
+    clearHover: function (el) {
+        var hoverElements = this._hoverElements;
+        for (var i = 0; i < hoverElements.length; i++) {
+            var from = hoverElements[i].__from;
+            if (from) {
+                from.__hoverMir = null;
+            }
+        }
+        hoverElements.length = 0;
+    },
+
+    refreshHover: function () {
+        var hoverElements = this._hoverElements;
+        var len = hoverElements.length;
+        var hoverLayer = this._hoverlayer;
+        hoverLayer && hoverLayer.clear();
+
+        if (!len) {
+            return;
+        }
+        sort(hoverElements, this.storage.displayableSortFunc);
+
+        // Use a extream large zlevel
+        // FIXME?
+        if (!hoverLayer) {
+            hoverLayer = this._hoverlayer = this.getLayer(HOVER_LAYER_ZLEVEL);
+        }
+
+        var scope = {};
+        hoverLayer.ctx.save();
+        for (var i = 0; i < len;) {
+            var el = hoverElements[i];
+            var originalEl = el.__from;
+            // Original el is removed
+            // PENDING
+            if (!(originalEl && originalEl.__zr)) {
+                hoverElements.splice(i, 1);
+                originalEl.__hoverMir = null;
+                len--;
+                continue;
+            }
+            i++;
+
+            // Use transform
+            // FIXME style and shape ?
+            if (!originalEl.invisible) {
+                el.transform = originalEl.transform;
+                el.invTransform = originalEl.invTransform;
+                el.__clipPaths = originalEl.__clipPaths;
+                // el.
+                this._doPaintEl(el, hoverLayer, true, scope);
+            }
+        }
+        hoverLayer.ctx.restore();
+    },
+
+    getHoverLayer: function () {
+        return this.getLayer(HOVER_LAYER_ZLEVEL);
+    },
+
+    _paintList: function (list, paintAll, redrawId) {
+        if (this._redrawId !== redrawId) {
+            return;
+        }
+
+        paintAll = paintAll || false;
+
+        this._updateLayerStatus(list);
+
+        var finished = this._doPaintList(list, paintAll);
+
+        if (this._needsManuallyCompositing) {
+            this._compositeManually();
+        }
+
+        if (!finished) {
+            var self = this;
+            requestAnimationFrame(function () {
+                self._paintList(list, paintAll, redrawId);
+            });
+        }
+    },
+
+    _compositeManually: function () {
+        var ctx = this.getLayer(CANVAS_ZLEVEL).ctx;
+        var width = this._domRoot.width;
+        var height = this._domRoot.height;
+        ctx.clearRect(0, 0, width, height);
+        // PENDING, If only builtin layer?
+        this.eachBuiltinLayer(function (layer) {
+            if (layer.virtual) {
+                ctx.drawImage(layer.dom, 0, 0, width, height);
+            }
+        });
+    },
+
+    _doPaintList: function (list, paintAll) {
+        var layerList = [];
+        for (var zi = 0; zi < this._zlevelList.length; zi++) {
+            var zlevel = this._zlevelList[zi];
+            var layer = this._layers[zlevel];
+            if (layer.__builtin__
+                && layer !== this._hoverlayer
+                && (layer.__dirty || paintAll)
+            ) {
+                layerList.push(layer);
+            }
+        }
+
+        var finished = true;
+
+        for (var k = 0; k < layerList.length; k++) {
+            var layer = layerList[k];
+            var ctx = layer.ctx;
+            var scope = {};
+            ctx.save();
+
+            var start = paintAll ? layer.__startIndex : layer.__drawIndex;
+
+            var useTimer = !paintAll && layer.incremental && Date.now;
+            var startTime = useTimer && Date.now();
+
+            var clearColor = layer.zlevel === this._zlevelList[0]
+                ? this._backgroundColor : null;
+            // All elements in this layer are cleared.
+            if (layer.__startIndex === layer.__endIndex) {
+                layer.clear(false, clearColor);
+            }
+            else if (start === layer.__startIndex) {
+                var firstEl = list[start];
+                if (!firstEl.incremental || !firstEl.notClear || paintAll) {
+                    layer.clear(false, clearColor);
+                }
+            }
+            if (start === -1) {
+                console.error('For some unknown reason. drawIndex is -1');
+                start = layer.__startIndex;
+            }
+            for (var i = start; i < layer.__endIndex; i++) {
+                var el = list[i];
+                this._doPaintEl(el, layer, paintAll, scope);
+                el.__dirty = false;
+
+                if (useTimer) {
+                    // Date.now can be executed in 13,025,305 ops/second.
+                    var dTime = Date.now() - startTime;
+                    // Give 15 millisecond to draw.
+                    // The rest elements will be drawn in the next frame.
+                    if (dTime > 15) {
+                        break;
+                    }
+                }
+            }
+
+            layer.__drawIndex = i;
+
+            if (layer.__drawIndex < layer.__endIndex) {
+                finished = false;
+            }
+
+            if (scope.prevElClipPaths) {
+                // Needs restore the state. If last drawn element is in the clipping area.
+                ctx.restore();
+            }
+
+            ctx.restore();
+        }
+
+        if (env$1.wxa) {
+            // Flush for weixin application
+            each$1(this._layers, function (layer) {
+                if (layer && layer.ctx && layer.ctx.draw) {
+                    layer.ctx.draw();
+                }
+            });
+        }
+
+        return finished;
+    },
+
+    _doPaintEl: function (el, currentLayer, forcePaint, scope) {
+        var ctx = currentLayer.ctx;
+        var m = el.transform;
+        if (
+            (currentLayer.__dirty || forcePaint)
+            // Ignore invisible element
+            && !el.invisible
+            // Ignore transparent element
+            && el.style.opacity !== 0
+            // Ignore scale 0 element, in some environment like node-canvas
+            // Draw a scale 0 element can cause all following draw wrong
+            // And setTransform with scale 0 will cause set back transform failed.
+            && !(m && !m[0] && !m[3])
+            // Ignore culled element
+            && !(el.culling && isDisplayableCulled(el, this._width, this._height))
+        ) {
+
+            var clipPaths = el.__clipPaths;
+
+            // Optimize when clipping on group with several elements
+            if (!scope.prevElClipPaths
+                || isClipPathChanged(clipPaths, scope.prevElClipPaths)
+            ) {
+                // If has previous clipping state, restore from it
+                if (scope.prevElClipPaths) {
+                    currentLayer.ctx.restore();
+                    scope.prevElClipPaths = null;
+
+                    // Reset prevEl since context has been restored
+                    scope.prevEl = null;
+                }
+                // New clipping state
+                if (clipPaths) {
+                    ctx.save();
+                    doClip(clipPaths, ctx);
+                    scope.prevElClipPaths = clipPaths;
+                }
+            }
+            el.beforeBrush && el.beforeBrush(ctx);
+
+            el.brush(ctx, scope.prevEl || null);
+            scope.prevEl = el;
+
+            el.afterBrush && el.afterBrush(ctx);
+        }
+    },
+
+    /**
+     * èŽ·å– zlevel æ‰€åœ¨å±‚ï¼Œå¦‚æžœä¸å˜åœ¨åˆ™ä¼šåˆ›å»ºä¸€ä¸ªæ–°çš„å±‚
+     * @param {number} zlevel
+     * @param {boolean} virtual Virtual layer will not be inserted into dom.
+     * @return {module:zrender/Layer}
+     */
+    getLayer: function (zlevel, virtual) {
+        if (this._singleCanvas && !this._needsManuallyCompositing) {
+            zlevel = CANVAS_ZLEVEL;
+        }
+        var layer = this._layers[zlevel];
+        if (!layer) {
+            // Create a new layer
+            layer = new Layer('zr_' + zlevel, this, this.dpr);
+            layer.zlevel = zlevel;
+            layer.__builtin__ = true;
+
+            if (this._layerConfig[zlevel]) {
+                merge(layer, this._layerConfig[zlevel], true);
+            }
+
+            if (virtual) {
+                layer.virtual = virtual;
+            }
+
+            this.insertLayer(zlevel, layer);
+
+            // Context is created after dom inserted to document
+            // Or excanvas will get 0px clientWidth and clientHeight
+            layer.initContext();
+        }
+
+        return layer;
+    },
+
+    insertLayer: function (zlevel, layer) {
+
+        var layersMap = this._layers;
+        var zlevelList = this._zlevelList;
+        var len = zlevelList.length;
+        var prevLayer = null;
+        var i = -1;
+        var domRoot = this._domRoot;
+
+        if (layersMap[zlevel]) {
+            zrLog('ZLevel ' + zlevel + ' has been used already');
+            return;
+        }
+        // Check if is a valid layer
+        if (!isLayerValid(layer)) {
+            zrLog('Layer of zlevel ' + zlevel + ' is not valid');
+            return;
+        }
+
+        if (len > 0 && zlevel > zlevelList[0]) {
+            for (i = 0; i < len - 1; i++) {
+                if (
+                    zlevelList[i] < zlevel
+                    && zlevelList[i + 1] > zlevel
+                ) {
+                    break;
+                }
+            }
+            prevLayer = layersMap[zlevelList[i]];
+        }
+        zlevelList.splice(i + 1, 0, zlevel);
+
+        layersMap[zlevel] = layer;
+
+        // Vitual layer will not directly show on the screen.
+        // (It can be a WebGL layer and assigned to a ZImage element)
+        // But it still under management of zrender.
+        if (!layer.virtual) {
+            if (prevLayer) {
+                var prevDom = prevLayer.dom;
+                if (prevDom.nextSibling) {
+                    domRoot.insertBefore(
+                        layer.dom,
+                        prevDom.nextSibling
+                    );
+                }
+                else {
+                    domRoot.appendChild(layer.dom);
+                }
+            }
+            else {
+                if (domRoot.firstChild) {
+                    domRoot.insertBefore(layer.dom, domRoot.firstChild);
+                }
+                else {
+                    domRoot.appendChild(layer.dom);
+                }
+            }
+        }
+    },
+
+    // Iterate each layer
+    eachLayer: function (cb, context) {
+        var zlevelList = this._zlevelList;
+        var z;
+        var i;
+        for (i = 0; i < zlevelList.length; i++) {
+            z = zlevelList[i];
+            cb.call(context, this._layers[z], z);
+        }
+    },
+
+    // Iterate each buildin layer
+    eachBuiltinLayer: function (cb, context) {
+        var zlevelList = this._zlevelList;
+        var layer;
+        var z;
+        var i;
+        for (i = 0; i < zlevelList.length; i++) {
+            z = zlevelList[i];
+            layer = this._layers[z];
+            if (layer.__builtin__) {
+                cb.call(context, layer, z);
+            }
+        }
+    },
+
+    // Iterate each other layer except buildin layer
+    eachOtherLayer: function (cb, context) {
+        var zlevelList = this._zlevelList;
+        var layer;
+        var z;
+        var i;
+        for (i = 0; i < zlevelList.length; i++) {
+            z = zlevelList[i];
+            layer = this._layers[z];
+            if (!layer.__builtin__) {
+                cb.call(context, layer, z);
+            }
+        }
+    },
+
+    /**
+     * èŽ·å–æ‰€æœ‰å·²åˆ›å»ºçš„å±‚
+     * @param {Array.<module:zrender/Layer>} [prevLayer]
+     */
+    getLayers: function () {
+        return this._layers;
+    },
+
+    _updateLayerStatus: function (list) {
+
+        this.eachBuiltinLayer(function (layer, z) {
+            layer.__dirty = layer.__used = false;
+        });
+
+        function updatePrevLayer(idx) {
+            if (prevLayer) {
+                if (prevLayer.__endIndex !== idx) {
+                    prevLayer.__dirty = true;
+                }
+                prevLayer.__endIndex = idx;
+            }
+        }
+
+        if (this._singleCanvas) {
+            for (var i = 1; i < list.length; i++) {
+                var el = list[i];
+                if (el.zlevel !== list[i - 1].zlevel || el.incremental) {
+                    this._needsManuallyCompositing = true;
+                    break;
+                }
+            }
+        }
+
+        var prevLayer = null;
+        var incrementalLayerCount = 0;
+        for (var i = 0; i < list.length; i++) {
+            var el = list[i];
+            var zlevel = el.zlevel;
+            var layer;
+            // PENDING If change one incremental element style ?
+            // TODO Where there are non-incremental elements between incremental elements.
+            if (el.incremental) {
+                layer = this.getLayer(zlevel + INCREMENTAL_INC, this._needsManuallyCompositing);
+                layer.incremental = true;
+                incrementalLayerCount = 1;
+            }
+            else {
+                layer = this.getLayer(zlevel + (incrementalLayerCount > 0 ? EL_AFTER_INCREMENTAL_INC : 0), this._needsManuallyCompositing);
+            }
+
+            if (!layer.__builtin__) {
+                zrLog('ZLevel ' + zlevel + ' has been used by unkown layer ' + layer.id);
+            }
+
+            if (layer !== prevLayer) {
+                layer.__used = true;
+                if (layer.__startIndex !== i) {
+                    layer.__dirty = true;
+                }
+                layer.__startIndex = i;
+                if (!layer.incremental) {
+                    layer.__drawIndex = i;
+                }
+                else {
+                    // Mark layer draw index needs to update.
+                    layer.__drawIndex = -1;
+                }
+                updatePrevLayer(i);
+                prevLayer = layer;
+            }
+            if (el.__dirty) {
+                layer.__dirty = true;
+                if (layer.incremental && layer.__drawIndex < 0) {
+                    // Start draw from the first dirty element.
+                    layer.__drawIndex = i;
+                }
+            }
+        }
+
+        updatePrevLayer(i);
+
+        this.eachBuiltinLayer(function (layer, z) {
+            // Used in last frame but not in this frame. Needs clear
+            if (!layer.__used && layer.getElementCount() > 0) {
+                layer.__dirty = true;
+                layer.__startIndex = layer.__endIndex = layer.__drawIndex = 0;
+            }
+            // For incremental layer. In case start index changed and no elements are dirty.
+            if (layer.__dirty && layer.__drawIndex < 0) {
+                layer.__drawIndex = layer.__startIndex;
+            }
+        });
+    },
+
+    /**
+     * æ¸…é™¤hoverå±‚å¤–æ‰€æœ‰å†…å®¹
+     */
+    clear: function () {
+        this.eachBuiltinLayer(this._clearLayer);
+        return this;
+    },
+
+    _clearLayer: function (layer) {
+        layer.clear();
+    },
+
+    setBackgroundColor: function (backgroundColor) {
+        this._backgroundColor = backgroundColor;
+    },
+
+    /**
+     * ä¿®æ”¹æŒ‡å®šzlevelçš„ç»˜åˆ¶å‚æ•°
+     *
+     * @param {string} zlevel
+     * @param {Object} config é…ç½®å¯¹è±¡
+     * @param {string} [config.clearColor=0] æ¯æ¬¡æ¸…ç©ºç”»å¸ƒçš„é¢œè‰²
+     * @param {string} [config.motionBlur=false] æ˜¯å¦å¼€å¯åŠ¨æ€æ¨¡ç³Š
+     * @param {number} [config.lastFrameAlpha=0.7]
+     *                 åœ¨å¼€å¯åŠ¨æ€æ¨¡ç³Šçš„æ—¶å€™ä½¿ç”¨ï¼Œä¸Žä¸Šä¸€å¸§æ··åˆçš„alphaå€¼ï¼Œå€¼è¶Šå¤§å°¾è¿¹è¶Šæ˜Žæ˜¾
+     */
+    configLayer: function (zlevel, config) {
+        if (config) {
+            var layerConfig = this._layerConfig;
+            if (!layerConfig[zlevel]) {
+                layerConfig[zlevel] = config;
+            }
+            else {
+                merge(layerConfig[zlevel], config, true);
+            }
+
+            for (var i = 0; i < this._zlevelList.length; i++) {
+                var _zlevel = this._zlevelList[i];
+                if (_zlevel === zlevel || _zlevel === zlevel + EL_AFTER_INCREMENTAL_INC) {
+                    var layer = this._layers[_zlevel];
+                    merge(layer, layerConfig[zlevel], true);
+                }
+            }
+        }
+    },
+
+    /**
+     * åˆ é™¤æŒ‡å®šå±‚
+     * @param {number} zlevel å±‚æ‰€åœ¨çš„zlevel
+     */
+    delLayer: function (zlevel) {
+        var layers = this._layers;
+        var zlevelList = this._zlevelList;
+        var layer = layers[zlevel];
+        if (!layer) {
+            return;
+        }
+        layer.dom.parentNode.removeChild(layer.dom);
+        delete layers[zlevel];
+
+        zlevelList.splice(indexOf(zlevelList, zlevel), 1);
+    },
+
+    /**
+     * åŒºåŸŸå¤§å°å˜åŒ–åŽé‡ç»˜
+     */
+    resize: function (width, height) {
+        if (!this._domRoot.style) { // Maybe in node or worker
+            if (width == null || height == null) {
+                return;
+            }
+            this._width = width;
+            this._height = height;
+
+            this.getLayer(CANVAS_ZLEVEL).resize(width, height);
+        }
+        else {
+            var domRoot = this._domRoot;
+            // FIXME Why ?
+            domRoot.style.display = 'none';
+
+            // Save input w/h
+            var opts = this._opts;
+            width != null && (opts.width = width);
+            height != null && (opts.height = height);
+
+            width = this._getSize(0);
+            height = this._getSize(1);
+
+            domRoot.style.display = '';
+
+            // ä¼˜åŒ–æ²¡æœ‰å®žé™…æ”¹å˜çš„resize
+            if (this._width != width || height != this._height) {
+                domRoot.style.width = width + 'px';
+                domRoot.style.height = height + 'px';
+
+                for (var id in this._layers) {
+                    if (this._layers.hasOwnProperty(id)) {
+                        this._layers[id].resize(width, height);
+                    }
+                }
+                each$1(this._progressiveLayers, function (layer) {
+                    layer.resize(width, height);
+                });
+
+                this.refresh(true);
+            }
+
+            this._width = width;
+            this._height = height;
+
+        }
+        return this;
+    },
+
+    /**
+     * æ¸…é™¤å•ç‹¬çš„ä¸€ä¸ªå±‚
+     * @param {number} zlevel
+     */
+    clearLayer: function (zlevel) {
+        var layer = this._layers[zlevel];
+        if (layer) {
+            layer.clear();
+        }
+    },
+
+    /**
+     * é‡Šæ”¾
+     */
+    dispose: function () {
+        this.root.innerHTML = '';
+
+        this.root =
+        this.storage =
+
+        this._domRoot =
+        this._layers = null;
+    },
+
+    /**
+     * Get canvas which has all thing rendered
+     * @param {Object} opts
+     * @param {string} [opts.backgroundColor]
+     * @param {number} [opts.pixelRatio]
+     */
+    getRenderedCanvas: function (opts) {
+        opts = opts || {};
+        if (this._singleCanvas && !this._compositeManually) {
+            return this._layers[CANVAS_ZLEVEL].dom;
+        }
+
+        var imageLayer = new Layer('image', this, opts.pixelRatio || this.dpr);
+        imageLayer.initContext();
+        imageLayer.clear(false, opts.backgroundColor || this._backgroundColor);
+
+        if (opts.pixelRatio <= this.dpr) {
+            this.refresh();
+
+            var width = imageLayer.dom.width;
+            var height = imageLayer.dom.height;
+            var ctx = imageLayer.ctx;
+            this.eachLayer(function (layer) {
+                if (layer.__builtin__) {
+                    ctx.drawImage(layer.dom, 0, 0, width, height);
+                }
+                else if (layer.renderToCanvas) {
+                    imageLayer.ctx.save();
+                    layer.renderToCanvas(imageLayer.ctx);
+                    imageLayer.ctx.restore();
+                }
+            });
+        }
+        else {
+            // PENDING, echarts-gl and incremental rendering.
+            var scope = {};
+            var displayList = this.storage.getDisplayList(true);
+            for (var i = 0; i < displayList.length; i++) {
+                var el = displayList[i];
+                this._doPaintEl(el, imageLayer, true, scope);
+            }
+        }
+
+        return imageLayer.dom;
+    },
+    /**
+     * èŽ·å–ç»˜å›¾åŒºåŸŸå®½åº¦
+     */
+    getWidth: function () {
+        return this._width;
+    },
+
+    /**
+     * èŽ·å–ç»˜å›¾åŒºåŸŸé«˜åº¦
+     */
+    getHeight: function () {
+        return this._height;
+    },
+
+    _getSize: function (whIdx) {
+        var opts = this._opts;
+        var wh = ['width', 'height'][whIdx];
+        var cwh = ['clientWidth', 'clientHeight'][whIdx];
+        var plt = ['paddingLeft', 'paddingTop'][whIdx];
+        var prb = ['paddingRight', 'paddingBottom'][whIdx];
+
+        if (opts[wh] != null && opts[wh] !== 'auto') {
+            return parseFloat(opts[wh]);
+        }
+
+        var root = this.root;
+        // IE8 does not support getComputedStyle, but it use VML.
+        var stl = document.defaultView.getComputedStyle(root);
+
+        return (
+            (root[cwh] || parseInt10(stl[wh]) || parseInt10(root.style[wh]))
+            - (parseInt10(stl[plt]) || 0)
+            - (parseInt10(stl[prb]) || 0)
+        ) | 0;
+    },
+
+    pathToImage: function (path, dpr) {
+        dpr = dpr || this.dpr;
+
+        var canvas = document.createElement('canvas');
+        var ctx = canvas.getContext('2d');
+        var rect = path.getBoundingRect();
+        var style = path.style;
+        var shadowBlurSize = style.shadowBlur * dpr;
+        var shadowOffsetX = style.shadowOffsetX * dpr;
+        var shadowOffsetY = style.shadowOffsetY * dpr;
+        var lineWidth = style.hasStroke() ? style.lineWidth : 0;
+
+        var leftMargin = Math.max(lineWidth / 2, -shadowOffsetX + shadowBlurSize);
+        var rightMargin = Math.max(lineWidth / 2, shadowOffsetX + shadowBlurSize);
+        var topMargin = Math.max(lineWidth / 2, -shadowOffsetY + shadowBlurSize);
+        var bottomMargin = Math.max(lineWidth / 2, shadowOffsetY + shadowBlurSize);
+        var width = rect.width + leftMargin + rightMargin;
+        var height = rect.height + topMargin + bottomMargin;
+
+        canvas.width = width * dpr;
+        canvas.height = height * dpr;
+
+        ctx.scale(dpr, dpr);
+        ctx.clearRect(0, 0, width, height);
+        ctx.dpr = dpr;
+
+        var pathTransform = {
+            position: path.position,
+            rotation: path.rotation,
+            scale: path.scale
+        };
+        path.position = [leftMargin - rect.x, topMargin - rect.y];
+        path.rotation = 0;
+        path.scale = [1, 1];
+        path.updateTransform();
+        if (path) {
+            path.brush(ctx);
+        }
+
+        var ImageShape = ZImage;
+        var imgShape = new ImageShape({
+            style: {
+                x: 0,
+                y: 0,
+                image: canvas
+            }
+        });
+
+        if (pathTransform.position != null) {
+            imgShape.position = path.position = pathTransform.position;
+        }
+
+        if (pathTransform.rotation != null) {
+            imgShape.rotation = path.rotation = pathTransform.rotation;
+        }
+
+        if (pathTransform.scale != null) {
+            imgShape.scale = path.scale = pathTransform.scale;
+        }
+
+        return imgShape;
+    }
+};
+
+/**
+ * äº‹ä»¶è¾…åŠ©ç±»
+ * @module zrender/core/event
+ * @author Kener (@Kener-æž—å³°, kener.linfeng@gmail.com)
+ */
+
+var isDomLevel2 = (typeof window !== 'undefined') && !!window.addEventListener;
+
+var MOUSE_EVENT_REG = /^(?:mouse|pointer|contextmenu|drag|drop)|click/;
+
+function getBoundingClientRect(el) {
+    // BlackBerry 5, iOS 3 (original iPhone) don't have getBoundingRect
+    return el.getBoundingClientRect ? el.getBoundingClientRect() : {left: 0, top: 0};
+}
+
+// `calculate` is optional, default false
+function clientToLocal(el, e, out, calculate) {
+    out = out || {};
+
+    // According to the W3C Working Draft, offsetX and offsetY should be relative
+    // to the padding edge of the target element. The only browser using this convention
+    // is IE. Webkit uses the border edge, Opera uses the content edge, and FireFox does
+    // not support the properties.
+    // (see http://www.jacklmoore.com/notes/mouse-position/)
+    // In zr painter.dom, padding edge equals to border edge.
+
+    // FIXME
+    // When mousemove event triggered on ec tooltip, target is not zr painter.dom, and
+    // offsetX/Y is relative to e.target, where the calculation of zrX/Y via offsetX/Y
+    // is too complex. So css-transfrom dont support in this case temporarily.
+    if (calculate || !env$1.canvasSupported) {
+        defaultGetZrXY(el, e, out);
+    }
+    // Caution: In FireFox, layerX/layerY Mouse position relative to the closest positioned
+    // ancestor element, so we should make sure el is positioned (e.g., not position:static).
+    // BTW1, Webkit don't return the same results as FF in non-simple cases (like add
+    // zoom-factor, overflow / opacity layers, transforms ...)
+    // BTW2, (ev.offsetY || ev.pageY - $(ev.target).offset().top) is not correct in preserve-3d.
+    // <https://bugs.jquery.com/ticket/8523#comment:14>
+    // BTW3, In ff, offsetX/offsetY is always 0.
+    else if (env$1.browser.firefox && e.layerX != null && e.layerX !== e.offsetX) {
+        out.zrX = e.layerX;
+        out.zrY = e.layerY;
+    }
+    // For IE6+, chrome, safari, opera. (When will ff support offsetX?)
+    else if (e.offsetX != null) {
+        out.zrX = e.offsetX;
+        out.zrY = e.offsetY;
+    }
+    // For some other device, e.g., IOS safari.
+    else {
+        defaultGetZrXY(el, e, out);
+    }
+
+    return out;
+}
+
+function defaultGetZrXY(el, e, out) {
+    // This well-known method below does not support css transform.
+    var box = getBoundingClientRect(el);
+    out.zrX = e.clientX - box.left;
+    out.zrY = e.clientY - box.top;
+}
+
+/**
+ * å¦‚æžœå˜åœ¨ç¬¬ä¸‰æ–¹åµŒå…¥çš„ä¸€äº›domè§¦å‘çš„äº‹ä»¶ï¼Œæˆ–touchäº‹ä»¶ï¼Œéœ€è¦è½¬æ¢ä¸€ä¸‹äº‹ä»¶åæ ‡.
+ * `calculate` is optional, default false.
+ */
+function normalizeEvent(el, e, calculate) {
+
+    e = e || window.event;
+
+    if (e.zrX != null) {
+        return e;
+    }
+
+    var eventType = e.type;
+    var isTouch = eventType && eventType.indexOf('touch') >= 0;
+
+    if (!isTouch) {
+        clientToLocal(el, e, e, calculate);
+        e.zrDelta = (e.wheelDelta) ? e.wheelDelta / 120 : -(e.detail || 0) / 3;
+    }
+    else {
+        var touch = eventType != 'touchend'
+            ? e.targetTouches[0]
+            : e.changedTouches[0];
+        touch && clientToLocal(el, touch, e, calculate);
+    }
+
+    // Add which for click: 1 === left; 2 === middle; 3 === right; otherwise: 0;
+    // See jQuery: https://github.com/jquery/jquery/blob/master/src/event.js
+    // If e.which has been defined, if may be readonly,
+    // see: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/which
+    var button = e.button;
+    if (e.which == null && button !== undefined && MOUSE_EVENT_REG.test(e.type)) {
+        e.which = (button & 1 ? 1 : (button & 2 ? 3 : (button & 4 ? 2 : 0)));
+    }
+
+    return e;
+}
+
+/**
+ * @param {HTMLElement} el
+ * @param {string} name
+ * @param {Function} handler
+ */
+function addEventListener(el, name, handler) {
+    if (isDomLevel2) {
+        // Reproduct the console warning:
+        // [Violation] Added non-passive event listener to a scroll-blocking <some> event.
+        // Consider marking event handler as 'passive' to make the page more responsive.
+        // Just set console log level: verbose in chrome dev tool.
+        // then the warning log will be printed when addEventListener called.
+        // See https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
+        // We have not yet found a neat way to using passive. Because in zrender the dom event
+        // listener delegate all of the upper events of element. Some of those events need
+        // to prevent default. For example, the feature `preventDefaultMouseMove` of echarts.
+        // Before passive can be adopted, these issues should be considered:
+        // (1) Whether and how a zrender user specifies an event listener passive. And by default,
+        // passive or not.
+        // (2) How to tread that some zrender event listener is passive, and some is not. If
+        // we use other way but not preventDefault of mousewheel and touchmove, browser
+        // compatibility should be handled.
+
+        // var opts = (env.passiveSupported && name === 'mousewheel')
+        //     ? {passive: true}
+        //     // By default, the third param of el.addEventListener is `capture: false`.
+        //     : void 0;
+        // el.addEventListener(name, handler /* , opts */);
+        el.addEventListener(name, handler);
+    }
+    else {
+        el.attachEvent('on' + name, handler);
+    }
+}
+
+function removeEventListener(el, name, handler) {
+    if (isDomLevel2) {
+        el.removeEventListener(name, handler);
+    }
+    else {
+        el.detachEvent('on' + name, handler);
+    }
+}
+
+/**
+ * preventDefault and stopPropagation.
+ * Notice: do not do that in zrender. Upper application
+ * do that if necessary.
+ *
+ * @memberOf module:zrender/core/event
+ * @method
+ * @param {Event} e : eventå¯¹è±¡
+ */
+var stop = isDomLevel2
+    ? function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        e.cancelBubble = true;
+    }
+    : function (e) {
+        e.returnValue = false;
+        e.cancelBubble = true;
+    };
+
+function notLeftMouse(e) {
+    // If e.which is undefined, considered as left mouse event.
+    return e.which > 1;
+}
+
+/**
+ * åŠ¨ç”»ä¸»ç±», è°ƒåº¦å’Œç®¡ç†æ‰€æœ‰åŠ¨ç”»æŽ§åˆ¶å™¨
+ *
+ * @module zrender/animation/Animation
+ * @author pissang(https://github.com/pissang)
+ */
+// TODO Additive animation
+// http://iosoteric.com/additive-animations-animatewithduration-in-ios-8/
+// https://developer.apple.com/videos/wwdc2014/#236
+
+/**
+ * @typedef {Object} IZRenderStage
+ * @property {Function} update
+ */
+
+/**
+ * @alias module:zrender/animation/Animation
+ * @constructor
+ * @param {Object} [options]
+ * @param {Function} [options.onframe]
+ * @param {IZRenderStage} [options.stage]
+ * @example
+ *     var animation = new Animation();
+ *     var obj = {
+ *         x: 100,
+ *         y: 100
+ *     };
+ *     animation.animate(node.position)
+ *         .when(1000, {
+ *             x: 500,
+ *             y: 500
+ *         })
+ *         .when(2000, {
+ *             x: 100,
+ *             y: 100
+ *         })
+ *         .start('spline');
+ */
+var Animation = function (options) {
+
+    options = options || {};
+
+    this.stage = options.stage || {};
+
+    this.onframe = options.onframe || function() {};
+
+    // private properties
+    this._clips = [];
+
+    this._running = false;
+
+    this._time;
+
+    this._pausedTime;
+
+    this._pauseStart;
+
+    this._paused = false;
+
+    Eventful.call(this);
+};
+
+Animation.prototype = {
+
+    constructor: Animation,
+    /**
+     * æ·»åŠ  clip
+     * @param {module:zrender/animation/Clip} clip
+     */
+    addClip: function (clip) {
+        this._clips.push(clip);
+    },
+    /**
+     * æ·»åŠ  animator
+     * @param {module:zrender/animation/Animator} animator
+     */
+    addAnimator: function (animator) {
+        animator.animation = this;
+        var clips = animator.getClips();
+        for (var i = 0; i < clips.length; i++) {
+            this.addClip(clips[i]);
+        }
+    },
+    /**
+     * åˆ é™¤åŠ¨ç”»ç‰‡æ®µ
+     * @param {module:zrender/animation/Clip} clip
+     */
+    removeClip: function(clip) {
+        var idx = indexOf(this._clips, clip);
+        if (idx >= 0) {
+            this._clips.splice(idx, 1);
+        }
+    },
+
+    /**
+     * åˆ é™¤åŠ¨ç”»ç‰‡æ®µ
+     * @param {module:zrender/animation/Animator} animator
+     */
+    removeAnimator: function (animator) {
+        var clips = animator.getClips();
+        for (var i = 0; i < clips.length; i++) {
+            this.removeClip(clips[i]);
+        }
+        animator.animation = null;
+    },
+
+    _update: function() {
+        var time = new Date().getTime() - this._pausedTime;
+        var delta = time - this._time;
+        var clips = this._clips;
+        var len = clips.length;
+
+        var deferredEvents = [];
+        var deferredClips = [];
+        for (var i = 0; i < len; i++) {
+            var clip = clips[i];
+            var e = clip.step(time, delta);
+            // Throw out the events need to be called after
+            // stage.update, like destroy
+            if (e) {
+                deferredEvents.push(e);
+                deferredClips.push(clip);
+            }
+        }
+
+        // Remove the finished clip
+        for (var i = 0; i < len;) {
+            if (clips[i]._needsRemove) {
+                clips[i] = clips[len - 1];
+                clips.pop();
+                len--;
+            }
+            else {
+                i++;
+            }
+        }
+
+        len = deferredEvents.length;
+        for (var i = 0; i < len; i++) {
+            deferredClips[i].fire(deferredEvents[i]);
+        }
+
+        this._time = time;
+
+        this.onframe(delta);
+
+        // 'frame' should be triggered before stage, because upper application
+        // depends on the sequence (e.g., echarts-stream and finish
+        // event judge)
+        this.trigger('frame', delta);
+
+        if (this.stage.update) {
+            this.stage.update();
+        }
+    },
+
+    _startLoop: function () {
+        var self = this;
+
+        this._running = true;
+
+        function step() {
+            if (self._running) {
+
+                requestAnimationFrame(step);
+
+                !self._paused && self._update();
+            }
+        }
+
+        requestAnimationFrame(step);
+    },
+
+    /**
+     * Start animation.
+     */
+    start: function () {
+
+        this._time = new Date().getTime();
+        this._pausedTime = 0;
+
+        this._startLoop();
+    },
+
+    /**
+     * Stop animation.
+     */
+    stop: function () {
+        this._running = false;
+    },
+
+    /**
+     * Pause animation.
+     */
+    pause: function () {
+        if (!this._paused) {
+            this._pauseStart = new Date().getTime();
+            this._paused = true;
+        }
+    },
+
+    /**
+     * Resume animation.
+     */
+    resume: function () {
+        if (this._paused) {
+            this._pausedTime += (new Date().getTime()) - this._pauseStart;
+            this._paused = false;
+        }
+    },
+
+    /**
+     * Clear animation.
+     */
+    clear: function () {
+        this._clips = [];
+    },
+
+    /**
+     * Whether animation finished.
+     */
+    isFinished: function () {
+        return !this._clips.length;
+    },
+
+    /**
+     * Creat animator for a target, whose props can be animated.
+     *
+     * @param  {Object} target
+     * @param  {Object} options
+     * @param  {boolean} [options.loop=false] Whether loop animation.
+     * @param  {Function} [options.getter=null] Get value from target.
+     * @param  {Function} [options.setter=null] Set value to target.
+     * @return {module:zrender/animation/Animation~Animator}
+     */
+    // TODO Gap
+    animate: function (target, options) {
+        options = options || {};
+
+        var animator = new Animator(
+            target,
+            options.loop,
+            options.getter,
+            options.setter
+        );
+
+        this.addAnimator(animator);
+
+        return animator;
+    }
+};
+
+mixin(Animation, Eventful);
+
+/**
+ * Only implements needed gestures for mobile.
+ */
+
+var GestureMgr = function () {
+
+    /**
+     * @private
+     * @type {Array.<Object>}
+     */
+    this._track = [];
+};
+
+GestureMgr.prototype = {
+
+    constructor: GestureMgr,
+
+    recognize: function (event, target, root) {
+        this._doTrack(event, target, root);
+        return this._recognize(event);
+    },
+
+    clear: function () {
+        this._track.length = 0;
+        return this;
+    },
+
+    _doTrack: function (event, target, root) {
+        var touches = event.touches;
+
+        if (!touches) {
+            return;
+        }
+
+        var trackItem = {
+            points: [],
+            touches: [],
+            target: target,
+            event: event
+        };
+
+        for (var i = 0, len = touches.length; i < len; i++) {
+            var touch = touches[i];
+            var pos = clientToLocal(root, touch, {});
+            trackItem.points.push([pos.zrX, pos.zrY]);
+            trackItem.touches.push(touch);
+        }
+
+        this._track.push(trackItem);
+    },
+
+    _recognize: function (event) {
+        for (var eventName in recognizers) {
+            if (recognizers.hasOwnProperty(eventName)) {
+                var gestureInfo = recognizers[eventName](this._track, event);
+                if (gestureInfo) {
+                    return gestureInfo;
+                }
+            }
+        }
+    }
+};
+
+function dist$1(pointPair) {
+    var dx = pointPair[1][0] - pointPair[0][0];
+    var dy = pointPair[1][1] - pointPair[0][1];
+
+    return Math.sqrt(dx * dx + dy * dy);
+}
+
+function center(pointPair) {
+    return [
+        (pointPair[0][0] + pointPair[1][0]) / 2,
+        (pointPair[0][1] + pointPair[1][1]) / 2
+    ];
+}
+
+var recognizers = {
+
+    pinch: function (track, event) {
+        var trackLen = track.length;
+
+        if (!trackLen) {
+            return;
+        }
+
+        var pinchEnd = (track[trackLen - 1] || {}).points;
+        var pinchPre = (track[trackLen - 2] || {}).points || pinchEnd;
+
+        if (pinchPre
+            && pinchPre.length > 1
+            && pinchEnd
+            && pinchEnd.length > 1
+        ) {
+            var pinchScale = dist$1(pinchEnd) / dist$1(pinchPre);
+            !isFinite(pinchScale) && (pinchScale = 1);
+
+            event.pinchScale = pinchScale;
+
+            var pinchCenter = center(pinchEnd);
+            event.pinchX = pinchCenter[0];
+            event.pinchY = pinchCenter[1];
+
+            return {
+                type: 'pinch',
+                target: track[0].target,
+                event: event
+            };
+        }
+    }
+
+    // Only pinch currently.
+};
+
+var TOUCH_CLICK_DELAY = 300;
+
+var mouseHandlerNames = [
+    'click', 'dblclick', 'mousewheel', 'mouseout',
+    'mouseup', 'mousedown', 'mousemove', 'contextmenu'
+];
+
+var touchHandlerNames = [
+    'touchstart', 'touchend', 'touchmove'
+];
+
+var pointerEventNames = {
+    pointerdown: 1, pointerup: 1, pointermove: 1, pointerout: 1
+};
+
+var pointerHandlerNames = map(mouseHandlerNames, function (name) {
+    var nm = name.replace('mouse', 'pointer');
+    return pointerEventNames[nm] ? nm : name;
+});
+
+function eventNameFix(name) {
+    return (name === 'mousewheel' && env$1.browser.firefox) ? 'DOMMouseScroll' : name;
+}
+
+function processGesture(proxy, event, stage) {
+    var gestureMgr = proxy._gestureMgr;
+
+    stage === 'start' && gestureMgr.clear();
+
+    var gestureInfo = gestureMgr.recognize(
+        event,
+        proxy.handler.findHover(event.zrX, event.zrY, null).target,
+        proxy.dom
+    );
+
+    stage === 'end' && gestureMgr.clear();
+
+    // Do not do any preventDefault here. Upper application do that if necessary.
+    if (gestureInfo) {
+        var type = gestureInfo.type;
+        event.gestureEvent = type;
+
+        proxy.handler.dispatchToElement({target: gestureInfo.target}, type, gestureInfo.event);
+    }
+}
+
+// function onMSGestureChange(proxy, event) {
+//     if (event.translationX || event.translationY) {
+//         // mousemove is carried by MSGesture to reduce the sensitivity.
+//         proxy.handler.dispatchToElement(event.target, 'mousemove', event);
+//     }
+//     if (event.scale !== 1) {
+//         event.pinchX = event.offsetX;
+//         event.pinchY = event.offsetY;
+//         event.pinchScale = event.scale;
+//         proxy.handler.dispatchToElement(event.target, 'pinch', event);
+//     }
+// }
+
+/**
+ * Prevent mouse event from being dispatched after Touch Events action
+ * @see <https://github.com/deltakosh/handjs/blob/master/src/hand.base.js>
+ * 1. Mobile browsers dispatch mouse events 300ms after touchend.
+ * 2. Chrome for Android dispatch mousedown for long-touch about 650ms
+ * Result: Blocking Mouse Events for 700ms.
+ */
+function setTouchTimer(instance) {
+    instance._touching = true;
+    clearTimeout(instance._touchTimer);
+    instance._touchTimer = setTimeout(function () {
+        instance._touching = false;
+    }, 700);
+}
+
+
+var domHandlers = {
+    /**
+     * Mouse move handler
+     * @inner
+     * @param {Event} event
+     */
+    mousemove: function (event) {
+        event = normalizeEvent(this.dom, event);
+
+        this.trigger('mousemove', event);
+    },
+
+    /**
+     * Mouse out handler
+     * @inner
+     * @param {Event} event
+     */
+    mouseout: function (event) {
+        event = normalizeEvent(this.dom, event);
+
+        var element = event.toElement || event.relatedTarget;
+        if (element != this.dom) {
+            while (element && element.nodeType != 9) {
+                // å¿½ç•¥åŒ…å«åœ¨rootä¸çš„domå¼•èµ·çš„mouseOut
+                if (element === this.dom) {
+                    return;
+                }
+
+                element = element.parentNode;
+            }
+        }
+
+        this.trigger('mouseout', event);
+    },
+
+    /**
+     * Touchå¼€å§‹å“åº”å‡½æ•°
+     * @inner
+     * @param {Event} event
+     */
+    touchstart: function (event) {
+        // Default mouse behaviour should not be disabled here.
+        // For example, page may needs to be slided.
+        event = normalizeEvent(this.dom, event);
+
+        // Mark touch, which is useful in distinguish touch and
+        // mouse event in upper applicatoin.
+        event.zrByTouch = true;
+
+        this._lastTouchMoment = new Date();
+
+        processGesture(this, event, 'start');
+
+        // In touch device, trigger `mousemove`(`mouseover`) should
+        // be triggered, and must before `mousedown` triggered.
+        domHandlers.mousemove.call(this, event);
+
+        domHandlers.mousedown.call(this, event);
+
+        setTouchTimer(this);
+    },
+
+    /**
+     * Touchç§»åŠ¨å“åº”å‡½æ•°
+     * @inner
+     * @param {Event} event
+     */
+    touchmove: function (event) {
+
+        event = normalizeEvent(this.dom, event);
+
+        // Mark touch, which is useful in distinguish touch and
+        // mouse event in upper applicatoin.
+        event.zrByTouch = true;
+
+        processGesture(this, event, 'change');
+
+        // Mouse move should always be triggered no matter whether
+        // there is gestrue event, because mouse move and pinch may
+        // be used at the same time.
+        domHandlers.mousemove.call(this, event);
+
+        setTouchTimer(this);
+    },
+
+    /**
+     * Touchç»“æŸå“åº”å‡½æ•°
+     * @inner
+     * @param {Event} event
+     */
+    touchend: function (event) {
+
+        event = normalizeEvent(this.dom, event);
+
+        // Mark touch, which is useful in distinguish touch and
+        // mouse event in upper applicatoin.
+        event.zrByTouch = true;
+
+        processGesture(this, event, 'end');
+
+        domHandlers.mouseup.call(this, event);
+
+        // Do not trigger `mouseout` here, in spite of `mousemove`(`mouseover`) is
+        // triggered in `touchstart`. This seems to be illogical, but by this mechanism,
+        // we can conveniently implement "hover style" in both PC and touch device just
+        // by listening to `mouseover` to add "hover style" and listening to `mouseout`
+        // to remove "hover style" on an element, without any additional code for
+        // compatibility. (`mouseout` will not be triggered in `touchend`, so "hover
+        // style" will remain for user view)
+
+        // click event should always be triggered no matter whether
+        // there is gestrue event. System click can not be prevented.
+        if (+new Date() - this._lastTouchMoment < TOUCH_CLICK_DELAY) {
+            domHandlers.click.call(this, event);
+        }
+
+        setTouchTimer(this);
+    },
+
+    pointerdown: function (event) {
+        domHandlers.mousedown.call(this, event);
+
+        // if (useMSGuesture(this, event)) {
+        //     this._msGesture.addPointer(event.pointerId);
+        // }
+    },
+
+    pointermove: function (event) {
+        // FIXME
+        // pointermove is so sensitive that it always triggered when
+        // tap(click) on touch screen, which affect some judgement in
+        // upper application. So, we dont support mousemove on MS touch
+        // device yet.
+        if (!isPointerFromTouch(event)) {
+            domHandlers.mousemove.call(this, event);
+        }
+    },
+
+    pointerup: function (event) {
+        domHandlers.mouseup.call(this, event);
+    },
+
+    pointerout: function (event) {
+        // pointerout will be triggered when tap on touch screen
+        // (IE11+/Edge on MS Surface) after click event triggered,
+        // which is inconsistent with the mousout behavior we defined
+        // in touchend. So we unify them.
+        // (check domHandlers.touchend for detailed explanation)
+        if (!isPointerFromTouch(event)) {
+            domHandlers.mouseout.call(this, event);
+        }
+    }
+};
+
+function isPointerFromTouch(event) {
+    var pointerType = event.pointerType;
+    return pointerType === 'pen' || pointerType === 'touch';
+}
+
+// function useMSGuesture(handlerProxy, event) {
+//     return isPointerFromTouch(event) && !!handlerProxy._msGesture;
+// }
+
+// Common handlers
+each$1(['click', 'mousedown', 'mouseup', 'mousewheel', 'dblclick', 'contextmenu'], function (name) {
+    domHandlers[name] = function (event) {
+        event = normalizeEvent(this.dom, event);
+        this.trigger(name, event);
+    };
+});
+
+/**
+ * ä¸ºæŽ§åˆ¶ç±»å®žä¾‹åˆå§‹åŒ–dom äº‹ä»¶å¤„ç†å‡½æ•°
+ *
+ * @inner
+ * @param {module:zrender/Handler} instance æŽ§åˆ¶ç±»å®žä¾‹
+ */
+function initDomHandler(instance) {
+    each$1(touchHandlerNames, function (name) {
+        instance._handlers[name] = bind(domHandlers[name], instance);
+    });
+
+    each$1(pointerHandlerNames, function (name) {
+        instance._handlers[name] = bind(domHandlers[name], instance);
+    });
+
+    each$1(mouseHandlerNames, function (name) {
+        instance._handlers[name] = makeMouseHandler(domHandlers[name], instance);
+    });
+
+    function makeMouseHandler(fn, instance) {
+        return function () {
+            if (instance._touching) {
+                return;
+            }
+            return fn.apply(instance, arguments);
+        };
+    }
+}
+
+
+function HandlerDomProxy(dom) {
+    Eventful.call(this);
+
+    this.dom = dom;
+
+    /**
+     * @private
+     * @type {boolean}
+     */
+    this._touching = false;
+
+    /**
+     * @private
+     * @type {number}
+     */
+    this._touchTimer;
+
+    /**
+     * @private
+     * @type {module:zrender/core/GestureMgr}
+     */
+    this._gestureMgr = new GestureMgr();
+
+    this._handlers = {};
+
+    initDomHandler(this);
+
+    if (env$1.pointerEventsSupported) { // Only IE11+/Edge
+        // 1. On devices that both enable touch and mouse (e.g., MS Surface and lenovo X240),
+        // IE11+/Edge do not trigger touch event, but trigger pointer event and mouse event
+        // at the same time.
+        // 2. On MS Surface, it probablely only trigger mousedown but no mouseup when tap on
+        // screen, which do not occurs in pointer event.
+        // So we use pointer event to both detect touch gesture and mouse behavior.
+        mountHandlers(pointerHandlerNames, this);
+
+        // FIXME
+        // Note: MS Gesture require CSS touch-action set. But touch-action is not reliable,
+        // which does not prevent defuault behavior occasionally (which may cause view port
+        // zoomed in but use can not zoom it back). And event.preventDefault() does not work.
+        // So we have to not to use MSGesture and not to support touchmove and pinch on MS
+        // touch screen. And we only support click behavior on MS touch screen now.
+
+        // MS Gesture Event is only supported on IE11+/Edge and on Windows 8+.
+        // We dont support touch on IE on win7.
+        // See <https://msdn.microsoft.com/en-us/library/dn433243(v=vs.85).aspx>
+        // if (typeof MSGesture === 'function') {
+        //     (this._msGesture = new MSGesture()).target = dom; // jshint ignore:line
+        //     dom.addEventListener('MSGestureChange', onMSGestureChange);
+        // }
+    }
+    else {
+        if (env$1.touchEventsSupported) {
+            mountHandlers(touchHandlerNames, this);
+            // Handler of 'mouseout' event is needed in touch mode, which will be mounted below.
+            // addEventListener(root, 'mouseout', this._mouseoutHandler);
+        }
+
+        // 1. Considering some devices that both enable touch and mouse event (like on MS Surface
+        // and lenovo X240, @see #2350), we make mouse event be always listened, otherwise
+        // mouse event can not be handle in those devices.
+        // 2. On MS Surface, Chrome will trigger both touch event and mouse event. How to prevent
+        // mouseevent after touch event triggered, see `setTouchTimer`.
+        mountHandlers(mouseHandlerNames, this);
+    }
+
+    function mountHandlers(handlerNames, instance) {
+        each$1(handlerNames, function (name) {
+            addEventListener(dom, eventNameFix(name), instance._handlers[name]);
+        }, instance);
+    }
+}
+
+var handlerDomProxyProto = HandlerDomProxy.prototype;
+handlerDomProxyProto.dispose = function () {
+    var handlerNames = mouseHandlerNames.concat(touchHandlerNames);
+
+    for (var i = 0; i < handlerNames.length; i++) {
+        var name = handlerNames[i];
+        removeEventListener(this.dom, eventNameFix(name), this._handlers[name]);
+    }
+};
+
+handlerDomProxyProto.setCursor = function (cursorStyle) {
+    this.dom.style && (this.dom.style.cursor = cursorStyle || 'default');
+};
+
+mixin(HandlerDomProxy, Eventful);
+
+/*!
+* ZRender, a high performance 2d drawing library.
+*
+* Copyright (c) 2013, Baidu Inc.
+* All rights reserved.
+*
+* LICENSE
+* https://github.com/ecomfe/zrender/blob/master/LICENSE.txt
+*/
+
+var useVML = !env$1.canvasSupported;
+
+var painterCtors = {
+    canvas: Painter
+};
+
+var instances$1 = {};    // ZRenderå®žä¾‹mapç´¢å¼•
+
+/**
+ * @type {string}
+ */
+var version$1 = '4.0.4';
+
+/**
+ * Initializing a zrender instance
+ * @param {HTMLElement} dom
+ * @param {Object} opts
+ * @param {string} [opts.renderer='canvas'] 'canvas' or 'svg'
+ * @param {number} [opts.devicePixelRatio]
+ * @param {number|string} [opts.width] Can be 'auto' (the same as null/undefined)
+ * @param {number|string} [opts.height] Can be 'auto' (the same as null/undefined)
+ * @return {module:zrender/ZRender}
+ */
+function init$1(dom, opts) {
+    var zr = new ZRender(guid(), dom, opts);
+    instances$1[zr.id] = zr;
+    return zr;
+}
+
+/**
+ * Dispose zrender instance
+ * @param {module:zrender/ZRender} zr
+ */
+function dispose$1(zr) {
+    if (zr) {
+        zr.dispose();
+    }
+    else {
+        for (var key in instances$1) {
+            if (instances$1.hasOwnProperty(key)) {
+                instances$1[key].dispose();
+            }
+        }
+        instances$1 = {};
+    }
+
+    return this;
+}
+
+/**
+ * Get zrender instance by id
+ * @param {string} id zrender instance id
+ * @return {module:zrender/ZRender}
+ */
+function getInstance(id) {
+    return instances$1[id];
+}
+
+function registerPainter(name, Ctor) {
+    painterCtors[name] = Ctor;
+}
+
+function delInstance(id) {
+    delete instances$1[id];
+}
+
+/**
+ * @module zrender/ZRender
+ */
+/**
+ * @constructor
+ * @alias module:zrender/ZRender
+ * @param {string} id
+ * @param {HTMLElement} dom
+ * @param {Object} opts
+ * @param {string} [opts.renderer='canvas'] 'canvas' or 'svg'
+ * @param {number} [opts.devicePixelRatio]
+ * @param {number} [opts.width] Can be 'auto' (the same as null/undefined)
+ * @param {number} [opts.height] Can be 'auto' (the same as null/undefined)
+ */
+var ZRender = function (id, dom, opts) {
+
+    opts = opts || {};
+
+    /**
+     * @type {HTMLDomElement}
+     */
+    this.dom = dom;
+
+    /**
+     * @type {string}
+     */
+    this.id = id;
+
+    var self = this;
+    var storage = new Storage();
+
+    var rendererType = opts.renderer;
+    // TODO WebGL
+    if (useVML) {
+        if (!painterCtors.vml) {
+            throw new Error('You need to require \'zrender/vml/vml\' to support IE8');
+        }
+        rendererType = 'vml';
+    }
+    else if (!rendererType || !painterCtors[rendererType]) {
+        rendererType = 'canvas';
+    }
+    var painter = new painterCtors[rendererType](dom, storage, opts, id);
+
+    this.storage = storage;
+    this.painter = painter;
+
+    var handerProxy = (!env$1.node && !env$1.worker) ? new HandlerDomProxy(painter.getViewportRoot()) : null;
+    this.handler = new Handler(storage, painter, handerProxy, painter.root);
+
+    /**
+     * @type {module:zrender/animation/Animation}
+     */
+    this.animation = new Animation({
+        stage: {
+            update: bind(this.flush, this)
+        }
+    });
+    this.animation.start();
+
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._needsRefresh;
+
+    // ä¿®æ”¹ storage.delFromStorage, æ¯æ¬¡åˆ é™¤å…ƒç´ ä¹‹å‰åˆ é™¤åŠ¨ç”»
+    // FIXME æœ‰ç‚¹ugly
+    var oldDelFromStorage = storage.delFromStorage;
+    var oldAddToStorage = storage.addToStorage;
+
+    storage.delFromStorage = function (el) {
+        oldDelFromStorage.call(storage, el);
+
+        el && el.removeSelfFromZr(self);
+    };
+
+    storage.addToStorage = function (el) {
+        oldAddToStorage.call(storage, el);
+
+        el.addSelfToZr(self);
+    };
+};
+
+ZRender.prototype = {
+
+    constructor: ZRender,
+    /**
+     * èŽ·å–å®žä¾‹å”¯ä¸€æ ‡è¯†
+     * @return {string}
+     */
+    getId: function () {
+        return this.id;
+    },
+
+    /**
+     * æ·»åŠ å…ƒç´ 
+     * @param  {module:zrender/Element} el
+     */
+    add: function (el) {
+        this.storage.addRoot(el);
+        this._needsRefresh = true;
+    },
+
+    /**
+     * åˆ é™¤å…ƒç´ 
+     * @param  {module:zrender/Element} el
+     */
+    remove: function (el) {
+        this.storage.delRoot(el);
+        this._needsRefresh = true;
+    },
+
+    /**
+     * Change configuration of layer
+     * @param {string} zLevel
+     * @param {Object} config
+     * @param {string} [config.clearColor=0] Clear color
+     * @param {string} [config.motionBlur=false] If enable motion blur
+     * @param {number} [config.lastFrameAlpha=0.7] Motion blur factor. Larger value cause longer trailer
+    */
+    configLayer: function (zLevel, config) {
+        if (this.painter.configLayer) {
+            this.painter.configLayer(zLevel, config);
+        }
+        this._needsRefresh = true;
+    },
+
+    /**
+     * Set background color
+     * @param {string} backgroundColor
+     */
+    setBackgroundColor: function (backgroundColor) {
+        if (this.painter.setBackgroundColor) {
+            this.painter.setBackgroundColor(backgroundColor);
+        }
+        this._needsRefresh = true;
+    },
+
+    /**
+     * Repaint the canvas immediately
+     */
+    refreshImmediately: function () {
+        // var start = new Date();
+        // Clear needsRefresh ahead to avoid something wrong happens in refresh
+        // Or it will cause zrender refreshes again and again.
+        this._needsRefresh = false;
+        this.painter.refresh();
+        /**
+         * Avoid trigger zr.refresh in Element#beforeUpdate hook
+         */
+        this._needsRefresh = false;
+        // var end = new Date();
+        // var log = document.getElementById('log');
+        // if (log) {
+        //     log.innerHTML = log.innerHTML + '<br>' + (end - start);
+        // }
+    },
+
+    /**
+     * Mark and repaint the canvas in the next frame of browser
+     */
+    refresh: function() {
+        this._needsRefresh = true;
+    },
+
+    /**
+     * Perform all refresh
+     */
+    flush: function () {
+        var triggerRendered;
+
+        if (this._needsRefresh) {
+            triggerRendered = true;
+            this.refreshImmediately();
+        }
+        if (this._needsRefreshHover) {
+            triggerRendered = true;
+            this.refreshHoverImmediately();
+        }
+
+        triggerRendered && this.trigger('rendered');
+    },
+
+    /**
+     * Add element to hover layer
+     * @param  {module:zrender/Element} el
+     * @param {Object} style
+     */
+    addHover: function (el, style) {
+        if (this.painter.addHover) {
+            this.painter.addHover(el, style);
+            this.refreshHover();
+        }
+    },
+
+    /**
+     * Add element from hover layer
+     * @param  {module:zrender/Element} el
+     */
+    removeHover: function (el) {
+        if (this.painter.removeHover) {
+            this.painter.removeHover(el);
+            this.refreshHover();
+        }
+    },
+
+    /**
+     * Clear all hover elements in hover layer
+     * @param  {module:zrender/Element} el
+     */
+    clearHover: function () {
+        if (this.painter.clearHover) {
+            this.painter.clearHover();
+            this.refreshHover();
+        }
+    },
+
+    /**
+     * Refresh hover in next frame
+     */
+    refreshHover: function () {
+        this._needsRefreshHover = true;
+    },
+
+    /**
+     * Refresh hover immediately
+     */
+    refreshHoverImmediately: function () {
+        this._needsRefreshHover = false;
+        this.painter.refreshHover && this.painter.refreshHover();
+    },
+
+    /**
+     * Resize the canvas.
+     * Should be invoked when container size is changed
+     * @param {Object} [opts]
+     * @param {number|string} [opts.width] Can be 'auto' (the same as null/undefined)
+     * @param {number|string} [opts.height] Can be 'auto' (the same as null/undefined)
+     */
+    resize: function(opts) {
+        opts = opts || {};
+        this.painter.resize(opts.width, opts.height);
+        this.handler.resize();
+    },
+
+    /**
+     * Stop and clear all animation immediately
+     */
+    clearAnimation: function () {
+        this.animation.clear();
+    },
+
+    /**
+     * Get container width
+     */
+    getWidth: function() {
+        return this.painter.getWidth();
+    },
+
+    /**
+     * Get container height
+     */
+    getHeight: function() {
+        return this.painter.getHeight();
+    },
+
+    /**
+     * Export the canvas as Base64 URL
+     * @param {string} type
+     * @param {string} [backgroundColor='#fff']
+     * @return {string} Base64 URL
+     */
+    // toDataURL: function(type, backgroundColor) {
+    //     return this.painter.getRenderedCanvas({
+    //         backgroundColor: backgroundColor
+    //     }).toDataURL(type);
+    // },
+
+    /**
+     * Converting a path to image.
+     * It has much better performance of drawing image rather than drawing a vector path.
+     * @param {module:zrender/graphic/Path} e
+     * @param {number} width
+     * @param {number} height
+     */
+    pathToImage: function(e, dpr) {
+        return this.painter.pathToImage(e, dpr);
+    },
+
+    /**
+     * Set default cursor
+     * @param {string} [cursorStyle='default'] ä¾‹å¦‚ crosshair
+     */
+    setCursorStyle: function (cursorStyle) {
+        this.handler.setCursorStyle(cursorStyle);
+    },
+
+    /**
+     * Find hovered element
+     * @param {number} x
+     * @param {number} y
+     * @return {Object} {target, topTarget}
+     */
+    findHover: function (x, y) {
+        return this.handler.findHover(x, y);
+    },
+
+    /**
+     * Bind event
+     *
+     * @param {string} eventName Event name
+     * @param {Function} eventHandler Handler function
+     * @param {Object} [context] Context object
+     */
+    on: function(eventName, eventHandler, context) {
+        this.handler.on(eventName, eventHandler, context);
+    },
+
+    /**
+     * Unbind event
+     * @param {string} eventName Event name
+     * @param {Function} [eventHandler] Handler function
+     */
+    off: function(eventName, eventHandler) {
+        this.handler.off(eventName, eventHandler);
+    },
+
+    /**
+     * Trigger event manually
+     *
+     * @param {string} eventName Event name
+     * @param {event=} event Event object
+     */
+    trigger: function (eventName, event) {
+        this.handler.trigger(eventName, event);
+    },
+
+
+    /**
+     * Clear all objects and the canvas.
+     */
+    clear: function () {
+        this.storage.delRoot();
+        this.painter.clear();
+    },
+
+    /**
+     * Dispose self.
+     */
+    dispose: function () {
+        this.animation.stop();
+
+        this.clear();
+        this.storage.dispose();
+        this.painter.dispose();
+        this.handler.dispose();
+
+        this.animation =
+        this.storage =
+        this.painter =
+        this.handler = null;
+
+        delInstance(this.id);
+    }
+};
+
+
+
+var zrender = (Object.freeze || Object)({
+	version: version$1,
+	init: init$1,
+	dispose: dispose$1,
+	getInstance: getInstance,
+	registerPainter: registerPainter
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var each$2 = each$1;
+var isObject$2 = isObject$1;
+var isArray$1 = isArray;
+
+/**
+ * Make the name displayable. But we should
+ * make sure it is not duplicated with user
+ * specified name, so use '\0';
+ */
+var DUMMY_COMPONENT_NAME_PREFIX = 'series\0';
+
+/**
+ * If value is not array, then translate it to array.
+ * @param  {*} value
+ * @return {Array} [value] or value
+ */
+function normalizeToArray(value) {
+    return value instanceof Array
+        ? value
+        : value == null
+        ? []
+        : [value];
+}
+
+/**
+ * Sync default option between normal and emphasis like `position` and `show`
+ * In case some one will write code like
+ *     label: {
+ *          show: false,
+ *          position: 'outside',
+ *          fontSize: 18
+ *     },
+ *     emphasis: {
+ *          label: { show: true }
+ *     }
+ * @param {Object} opt
+ * @param {string} key
+ * @param {Array.<string>} subOpts
+ */
+function defaultEmphasis(opt, key, subOpts) {
+    // Caution: performance sensitive.
+    if (opt) {
+        opt[key] = opt[key] || {};
+        opt.emphasis = opt.emphasis || {};
+        opt.emphasis[key] = opt.emphasis[key] || {};
+
+        // Default emphasis option from normal
+        for (var i = 0, len = subOpts.length; i < len; i++) {
+            var subOptName = subOpts[i];
+            if (!opt.emphasis[key].hasOwnProperty(subOptName)
+                && opt[key].hasOwnProperty(subOptName)
+            ) {
+                opt.emphasis[key][subOptName] = opt[key][subOptName];
+            }
+        }
+    }
+}
+
+var TEXT_STYLE_OPTIONS = [
+    'fontStyle', 'fontWeight', 'fontSize', 'fontFamily',
+    'rich', 'tag', 'color', 'textBorderColor', 'textBorderWidth',
+    'width', 'height', 'lineHeight', 'align', 'verticalAlign', 'baseline',
+    'shadowColor', 'shadowBlur', 'shadowOffsetX', 'shadowOffsetY',
+    'textShadowColor', 'textShadowBlur', 'textShadowOffsetX', 'textShadowOffsetY',
+    'backgroundColor', 'borderColor', 'borderWidth', 'borderRadius', 'padding'
+];
+
+// modelUtil.LABEL_OPTIONS = modelUtil.TEXT_STYLE_OPTIONS.concat([
+//     'position', 'offset', 'rotate', 'origin', 'show', 'distance', 'formatter',
+//     'fontStyle', 'fontWeight', 'fontSize', 'fontFamily',
+//     // FIXME: deprecated, check and remove it.
+//     'textStyle'
+// ]);
+
+/**
+ * The method do not ensure performance.
+ * data could be [12, 2323, {value: 223}, [1221, 23], {value: [2, 23]}]
+ * This helper method retieves value from data.
+ * @param {string|number|Date|Array|Object} dataItem
+ * @return {number|string|Date|Array.<number|string|Date>}
+ */
+function getDataItemValue(dataItem) {
+    return (isObject$2(dataItem) && !isArray$1(dataItem) && !(dataItem instanceof Date))
+        ? dataItem.value : dataItem;
+}
+
+/**
+ * data could be [12, 2323, {value: 223}, [1221, 23], {value: [2, 23]}]
+ * This helper method determine if dataItem has extra option besides value
+ * @param {string|number|Date|Array|Object} dataItem
+ */
+function isDataItemOption(dataItem) {
+    return isObject$2(dataItem)
+        && !(dataItem instanceof Array);
+        // // markLine data can be array
+        // && !(dataItem[0] && isObject(dataItem[0]) && !(dataItem[0] instanceof Array));
+}
+
+/**
+ * Mapping to exists for merge.
+ *
+ * @public
+ * @param {Array.<Object>|Array.<module:echarts/model/Component>} exists
+ * @param {Object|Array.<Object>} newCptOptions
+ * @return {Array.<Object>} Result, like [{exist: ..., option: ...}, {}],
+ *                          index of which is the same as exists.
+ */
+function mappingToExists(exists, newCptOptions) {
+    // Mapping by the order by original option (but not order of
+    // new option) in merge mode. Because we should ensure
+    // some specified index (like xAxisIndex) is consistent with
+    // original option, which is easy to understand, espatially in
+    // media query. And in most case, merge option is used to
+    // update partial option but not be expected to change order.
+    newCptOptions = (newCptOptions || []).slice();
+
+    var result = map(exists || [], function (obj, index) {
+        return {exist: obj};
+    });
+
+    // Mapping by id or name if specified.
+    each$2(newCptOptions, function (cptOption, index) {
+        if (!isObject$2(cptOption)) {
+            return;
+        }
+
+        // id has highest priority.
+        for (var i = 0; i < result.length; i++) {
+            if (!result[i].option // Consider name: two map to one.
+                && cptOption.id != null
+                && result[i].exist.id === cptOption.id + ''
+            ) {
+                result[i].option = cptOption;
+                newCptOptions[index] = null;
+                return;
+            }
+        }
+
+        for (var i = 0; i < result.length; i++) {
+            var exist = result[i].exist;
+            if (!result[i].option // Consider name: two map to one.
+                // Can not match when both ids exist but different.
+                && (exist.id == null || cptOption.id == null)
+                && cptOption.name != null
+                && !isIdInner(cptOption)
+                && !isIdInner(exist)
+                && exist.name === cptOption.name + ''
+            ) {
+                result[i].option = cptOption;
+                newCptOptions[index] = null;
+                return;
+            }
+        }
+    });
+
+    // Otherwise mapping by index.
+    each$2(newCptOptions, function (cptOption, index) {
+        if (!isObject$2(cptOption)) {
+            return;
+        }
+
+        var i = 0;
+        for (; i < result.length; i++) {
+            var exist = result[i].exist;
+            if (!result[i].option
+                // Existing model that already has id should be able to
+                // mapped to (because after mapping performed model may
+                // be assigned with a id, whish should not affect next
+                // mapping), except those has inner id.
+                && !isIdInner(exist)
+                // Caution:
+                // Do not overwrite id. But name can be overwritten,
+                // because axis use name as 'show label text'.
+                // 'exist' always has id and name and we dont
+                // need to check it.
+                && cptOption.id == null
+            ) {
+                result[i].option = cptOption;
+                break;
+            }
+        }
+
+        if (i >= result.length) {
+            result.push({option: cptOption});
+        }
+    });
+
+    return result;
+}
+
+/**
+ * Make id and name for mapping result (result of mappingToExists)
+ * into `keyInfo` field.
+ *
+ * @public
+ * @param {Array.<Object>} Result, like [{exist: ..., option: ...}, {}],
+ *                          which order is the same as exists.
+ * @return {Array.<Object>} The input.
+ */
+function makeIdAndName(mapResult) {
+    // We use this id to hash component models and view instances
+    // in echarts. id can be specified by user, or auto generated.
+
+    // The id generation rule ensures new view instance are able
+    // to mapped to old instance when setOption are called in
+    // no-merge mode. So we generate model id by name and plus
+    // type in view id.
+
+    // name can be duplicated among components, which is convenient
+    // to specify multi components (like series) by one name.
+
+    // Ensure that each id is distinct.
+    var idMap = createHashMap();
+
+    each$2(mapResult, function (item, index) {
+        var existCpt = item.exist;
+        existCpt && idMap.set(existCpt.id, item);
+    });
+
+    each$2(mapResult, function (item, index) {
+        var opt = item.option;
+
+        assert$1(
+            !opt || opt.id == null || !idMap.get(opt.id) || idMap.get(opt.id) === item,
+            'id duplicates: ' + (opt && opt.id)
+        );
+
+        opt && opt.id != null && idMap.set(opt.id, item);
+        !item.keyInfo && (item.keyInfo = {});
+    });
+
+    // Make name and id.
+    each$2(mapResult, function (item, index) {
+        var existCpt = item.exist;
+        var opt = item.option;
+        var keyInfo = item.keyInfo;
+
+        if (!isObject$2(opt)) {
+            return;
+        }
+
+        // name can be overwitten. Consider case: axis.name = '20km'.
+        // But id generated by name will not be changed, which affect
+        // only in that case: setOption with 'not merge mode' and view
+        // instance will be recreated, which can be accepted.
+        keyInfo.name = opt.name != null
+            ? opt.name + ''
+            : existCpt
+            ? existCpt.name
+            // Avoid diffferent series has the same name,
+            // because name may be used like in color pallet.
+            : DUMMY_COMPONENT_NAME_PREFIX + index;
+
+        if (existCpt) {
+            keyInfo.id = existCpt.id;
+        }
+        else if (opt.id != null) {
+            keyInfo.id = opt.id + '';
+        }
+        else {
+            // Consider this situatoin:
+            //  optionA: [{name: 'a'}, {name: 'a'}, {..}]
+            //  optionB [{..}, {name: 'a'}, {name: 'a'}]
+            // Series with the same name between optionA and optionB
+            // should be mapped.
+            var idNum = 0;
+            do {
+                keyInfo.id = '\0' + keyInfo.name + '\0' + idNum++;
+            }
+            while (idMap.get(keyInfo.id));
+        }
+
+        idMap.set(keyInfo.id, item);
+    });
+}
+
+function isNameSpecified(componentModel) {
+    var name = componentModel.name;
+    // Is specified when `indexOf` get -1 or > 0.
+    return !!(name && name.indexOf(DUMMY_COMPONENT_NAME_PREFIX));
+}
+
+/**
+ * @public
+ * @param {Object} cptOption
+ * @return {boolean}
+ */
+function isIdInner(cptOption) {
+    return isObject$2(cptOption)
+        && cptOption.id
+        && (cptOption.id + '').indexOf('\0_ec_\0') === 0;
+}
+
+/**
+ * A helper for removing duplicate items between batchA and batchB,
+ * and in themselves, and categorize by series.
+ *
+ * @param {Array.<Object>} batchA Like: [{seriesId: 2, dataIndex: [32, 4, 5]}, ...]
+ * @param {Array.<Object>} batchB Like: [{seriesId: 2, dataIndex: [32, 4, 5]}, ...]
+ * @return {Array.<Array.<Object>, Array.<Object>>} result: [resultBatchA, resultBatchB]
+ */
+function compressBatches(batchA, batchB) {
+    var mapA = {};
+    var mapB = {};
+
+    makeMap(batchA || [], mapA);
+    makeMap(batchB || [], mapB, mapA);
+
+    return [mapToArray(mapA), mapToArray(mapB)];
+
+    function makeMap(sourceBatch, map$$1, otherMap) {
+        for (var i = 0, len = sourceBatch.length; i < len; i++) {
+            var seriesId = sourceBatch[i].seriesId;
+            var dataIndices = normalizeToArray(sourceBatch[i].dataIndex);
+            var otherDataIndices = otherMap && otherMap[seriesId];
+
+            for (var j = 0, lenj = dataIndices.length; j < lenj; j++) {
+                var dataIndex = dataIndices[j];
+
+                if (otherDataIndices && otherDataIndices[dataIndex]) {
+                    otherDataIndices[dataIndex] = null;
+                }
+                else {
+                    (map$$1[seriesId] || (map$$1[seriesId] = {}))[dataIndex] = 1;
+                }
+            }
+        }
+    }
+
+    function mapToArray(map$$1, isData) {
+        var result = [];
+        for (var i in map$$1) {
+            if (map$$1.hasOwnProperty(i) && map$$1[i] != null) {
+                if (isData) {
+                    result.push(+i);
+                }
+                else {
+                    var dataIndices = mapToArray(map$$1[i], true);
+                    dataIndices.length && result.push({seriesId: i, dataIndex: dataIndices});
+                }
+            }
+        }
+        return result;
+    }
+}
+
+/**
+ * @param {module:echarts/data/List} data
+ * @param {Object} payload Contains dataIndex (means rawIndex) / dataIndexInside / name
+ *                         each of which can be Array or primary type.
+ * @return {number|Array.<number>} dataIndex If not found, return undefined/null.
+ */
+function queryDataIndex(data, payload) {
+    if (payload.dataIndexInside != null) {
+        return payload.dataIndexInside;
+    }
+    else if (payload.dataIndex != null) {
+        return isArray(payload.dataIndex)
+            ? map(payload.dataIndex, function (value) {
+                return data.indexOfRawIndex(value);
+            })
+            : data.indexOfRawIndex(payload.dataIndex);
+    }
+    else if (payload.name != null) {
+        return isArray(payload.name)
+            ? map(payload.name, function (value) {
+                return data.indexOfName(value);
+            })
+            : data.indexOfName(payload.name);
+    }
+}
+
+/**
+ * Enable property storage to any host object.
+ * Notice: Serialization is not supported.
+ *
+ * For example:
+ * var inner = zrUitl.makeInner();
+ *
+ * function some1(hostObj) {
+ *      inner(hostObj).someProperty = 1212;
+ *      ...
+ * }
+ * function some2() {
+ *      var fields = inner(this);
+ *      fields.someProperty1 = 1212;
+ *      fields.someProperty2 = 'xx';
+ *      ...
+ * }
+ *
+ * @return {Function}
+ */
+function makeInner() {
+    // Consider different scope by es module import.
+    var key = '__\0ec_inner_' + innerUniqueIndex++ + '_' + Math.random().toFixed(5);
+    return function (hostObj) {
+        return hostObj[key] || (hostObj[key] = {});
+    };
+}
+var innerUniqueIndex = 0;
+
+/**
+ * @param {module:echarts/model/Global} ecModel
+ * @param {string|Object} finder
+ *        If string, e.g., 'geo', means {geoIndex: 0}.
+ *        If Object, could contain some of these properties below:
+ *        {
+ *            seriesIndex, seriesId, seriesName,
+ *            geoIndex, geoId, geoName,
+ *            bmapIndex, bmapId, bmapName,
+ *            xAxisIndex, xAxisId, xAxisName,
+ *            yAxisIndex, yAxisId, yAxisName,
+ *            gridIndex, gridId, gridName,
+ *            ... (can be extended)
+ *        }
+ *        Each properties can be number|string|Array.<number>|Array.<string>
+ *        For example, a finder could be
+ *        {
+ *            seriesIndex: 3,
+ *            geoId: ['aa', 'cc'],
+ *            gridName: ['xx', 'rr']
+ *        }
+ *        xxxIndex can be set as 'all' (means all xxx) or 'none' (means not specify)
+ *        If nothing or null/undefined specified, return nothing.
+ * @param {Object} [opt]
+ * @param {string} [opt.defaultMainType]
+ * @param {Array.<string>} [opt.includeMainTypes]
+ * @return {Object} result like:
+ *        {
+ *            seriesModels: [seriesModel1, seriesModel2],
+ *            seriesModel: seriesModel1, // The first model
+ *            geoModels: [geoModel1, geoModel2],
+ *            geoModel: geoModel1, // The first model
+ *            ...
+ *        }
+ */
+function parseFinder(ecModel, finder, opt) {
+    if (isString(finder)) {
+        var obj = {};
+        obj[finder + 'Index'] = 0;
+        finder = obj;
+    }
+
+    var defaultMainType = opt && opt.defaultMainType;
+    if (defaultMainType
+        && !has(finder, defaultMainType + 'Index')
+        && !has(finder, defaultMainType + 'Id')
+        && !has(finder, defaultMainType + 'Name')
+    ) {
+        finder[defaultMainType + 'Index'] = 0;
+    }
+
+    var result = {};
+
+    each$2(finder, function (value, key) {
+        var value = finder[key];
+
+        // Exclude 'dataIndex' and other illgal keys.
+        if (key === 'dataIndex' || key === 'dataIndexInside') {
+            result[key] = value;
+            return;
+        }
+
+        var parsedKey = key.match(/^(\w+)(Index|Id|Name)$/) || [];
+        var mainType = parsedKey[1];
+        var queryType = (parsedKey[2] || '').toLowerCase();
+
+        if (!mainType
+            || !queryType
+            || value == null
+            || (queryType === 'index' && value === 'none')
+            || (opt && opt.includeMainTypes && indexOf(opt.includeMainTypes, mainType) < 0)
+        ) {
+            return;
+        }
+
+        var queryParam = {mainType: mainType};
+        if (queryType !== 'index' || value !== 'all') {
+            queryParam[queryType] = value;
+        }
+
+        var models = ecModel.queryComponents(queryParam);
+        result[mainType + 'Models'] = models;
+        result[mainType + 'Model'] = models[0];
+    });
+
+    return result;
+}
+
+function has(obj, prop) {
+    return obj && obj.hasOwnProperty(prop);
+}
+
+function setAttribute(dom, key, value) {
+    dom.setAttribute
+        ? dom.setAttribute(key, value)
+        : (dom[key] = value);
+}
+
+function getAttribute(dom, key) {
+    return dom.getAttribute
+        ? dom.getAttribute(key)
+        : dom[key];
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var TYPE_DELIMITER = '.';
+var IS_CONTAINER = '___EC__COMPONENT__CONTAINER___';
+
+/**
+ * Notice, parseClassType('') should returns {main: '', sub: ''}
+ * @public
+ */
+function parseClassType$1(componentType) {
+    var ret = {main: '', sub: ''};
+    if (componentType) {
+        componentType = componentType.split(TYPE_DELIMITER);
+        ret.main = componentType[0] || '';
+        ret.sub = componentType[1] || '';
+    }
+    return ret;
+}
+
+/**
+ * @public
+ */
+function checkClassType(componentType) {
+    assert$1(
+        /^[a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)?$/.test(componentType),
+        'componentType "' + componentType + '" illegal'
+    );
+}
+
+/**
+ * @public
+ */
+function enableClassExtend(RootClass, mandatoryMethods) {
+
+    RootClass.$constructor = RootClass;
+    RootClass.extend = function (proto) {
+
+        if (__DEV__) {
+            each$1(mandatoryMethods, function (method) {
+                if (!proto[method]) {
+                    console.warn(
+                        'Method `' + method + '` should be implemented'
+                        + (proto.type ? ' in ' + proto.type : '') + '.'
+                    );
+                }
+            });
+        }
+
+        var superClass = this;
+        var ExtendedClass = function () {
+            if (!proto.$constructor) {
+                superClass.apply(this, arguments);
+            }
+            else {
+                proto.$constructor.apply(this, arguments);
+            }
+        };
+
+        extend(ExtendedClass.prototype, proto);
+
+        ExtendedClass.extend = this.extend;
+        ExtendedClass.superCall = superCall;
+        ExtendedClass.superApply = superApply;
+        inherits(ExtendedClass, this);
+        ExtendedClass.superClass = superClass;
+
+        return ExtendedClass;
+    };
+}
+
+var classBase = 0;
+
+/**
+ * Can not use instanceof, consider different scope by
+ * cross domain or es module import in ec extensions.
+ * Mount a method "isInstance()" to Clz.
+ */
+function enableClassCheck(Clz) {
+    var classAttr = ['__\0is_clz', classBase++, Math.random().toFixed(3)].join('_');
+    Clz.prototype[classAttr] = true;
+
+    if (__DEV__) {
+        assert$1(!Clz.isInstance, 'The method "is" can not be defined.');
+    }
+
+    Clz.isInstance = function (obj) {
+        return !!(obj && obj[classAttr]);
+    };
+}
+
+// superCall should have class info, which can not be fetch from 'this'.
+// Consider this case:
+// class A has method f,
+// class B inherits class A, overrides method f, f call superApply('f'),
+// class C inherits class B, do not overrides method f,
+// then when method of class C is called, dead loop occured.
+function superCall(context, methodName) {
+    var args = slice(arguments, 2);
+    return this.superClass.prototype[methodName].apply(context, args);
+}
+
+function superApply(context, methodName, args) {
+    return this.superClass.prototype[methodName].apply(context, args);
+}
+
+/**
+ * @param {Object} entity
+ * @param {Object} options
+ * @param {boolean} [options.registerWhenExtend]
+ * @public
+ */
+function enableClassManagement(entity, options) {
+    options = options || {};
+
+    /**
+     * Component model classes
+     * key: componentType,
+     * value:
+     *     componentClass, when componentType is 'xxx'
+     *     or Object.<subKey, componentClass>, when componentType is 'xxx.yy'
+     * @type {Object}
+     */
+    var storage = {};
+
+    entity.registerClass = function (Clazz, componentType) {
+        if (componentType) {
+            checkClassType(componentType);
+            componentType = parseClassType$1(componentType);
+
+            if (!componentType.sub) {
+                if (__DEV__) {
+                    if (storage[componentType.main]) {
+                        console.warn(componentType.main + ' exists.');
+                    }
+                }
+                storage[componentType.main] = Clazz;
+            }
+            else if (componentType.sub !== IS_CONTAINER) {
+                var container = makeContainer(componentType);
+                container[componentType.sub] = Clazz;
+            }
+        }
+        return Clazz;
+    };
+
+    entity.getClass = function (componentMainType, subType, throwWhenNotFound) {
+        var Clazz = storage[componentMainType];
+
+        if (Clazz && Clazz[IS_CONTAINER]) {
+            Clazz = subType ? Clazz[subType] : null;
+        }
+
+        if (throwWhenNotFound && !Clazz) {
+            throw new Error(
+                !subType
+                    ? componentMainType + '.' + 'type should be specified.'
+                    : 'Component ' + componentMainType + '.' + (subType || '') + ' not exists. Load it first.'
+            );
+        }
+
+        return Clazz;
+    };
+
+    entity.getClassesByMainType = function (componentType) {
+        componentType = parseClassType$1(componentType);
+
+        var result = [];
+        var obj = storage[componentType.main];
+
+        if (obj && obj[IS_CONTAINER]) {
+            each$1(obj, function (o, type) {
+                type !== IS_CONTAINER && result.push(o);
+            });
+        }
+        else {
+            result.push(obj);
+        }
+
+        return result;
+    };
+
+    entity.hasClass = function (componentType) {
+        // Just consider componentType.main.
+        componentType = parseClassType$1(componentType);
+        return !!storage[componentType.main];
+    };
+
+    /**
+     * @return {Array.<string>} Like ['aa', 'bb'], but can not be ['aa.xx']
+     */
+    entity.getAllClassMainTypes = function () {
+        var types = [];
+        each$1(storage, function (obj, type) {
+            types.push(type);
+        });
+        return types;
+    };
+
+    /**
+     * If a main type is container and has sub types
+     * @param  {string}  mainType
+     * @return {boolean}
+     */
+    entity.hasSubTypes = function (componentType) {
+        componentType = parseClassType$1(componentType);
+        var obj = storage[componentType.main];
+        return obj && obj[IS_CONTAINER];
+    };
+
+    entity.parseClassType = parseClassType$1;
+
+    function makeContainer(componentType) {
+        var container = storage[componentType.main];
+        if (!container || !container[IS_CONTAINER]) {
+            container = storage[componentType.main] = {};
+            container[IS_CONTAINER] = true;
+        }
+        return container;
+    }
+
+    if (options.registerWhenExtend) {
+        var originalExtend = entity.extend;
+        if (originalExtend) {
+            entity.extend = function (proto) {
+                var ExtendedClass = originalExtend.call(this, proto);
+                return entity.registerClass(ExtendedClass, proto.type);
+            };
+        }
+    }
+
+    return entity;
+}
+
+/**
+ * @param {string|Array.<string>} properties
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// TODO Parse shadow style
+// TODO Only shallow path support
+var makeStyleMapper = function (properties) {
+    // Normalize
+    for (var i = 0; i < properties.length; i++) {
+        if (!properties[i][1]) {
+            properties[i][1] = properties[i][0];
+        }
+    }
+    return function (model, excludes, includes) {
+        var style = {};
+        for (var i = 0; i < properties.length; i++) {
+            var propName = properties[i][1];
+            if ((excludes && indexOf(excludes, propName) >= 0)
+                || (includes && indexOf(includes, propName) < 0)
+            ) {
+                continue;
+            }
+            var val = model.getShallow(propName);
+            if (val != null) {
+                style[properties[i][0]] = val;
+            }
+        }
+        return style;
+    };
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var getLineStyle = makeStyleMapper(
+    [
+        ['lineWidth', 'width'],
+        ['stroke', 'color'],
+        ['opacity'],
+        ['shadowBlur'],
+        ['shadowOffsetX'],
+        ['shadowOffsetY'],
+        ['shadowColor']
+    ]
+);
+
+var lineStyleMixin = {
+    getLineStyle: function (excludes) {
+        var style = getLineStyle(this, excludes);
+        var lineDash = this.getLineDash(style.lineWidth);
+        lineDash && (style.lineDash = lineDash);
+        return style;
+    },
+
+    getLineDash: function (lineWidth) {
+        if (lineWidth == null) {
+            lineWidth = 1;
+        }
+        var lineType = this.get('type');
+        var dotSize = Math.max(lineWidth, 2);
+        var dashSize = lineWidth * 4;
+        return (lineType === 'solid' || lineType == null) ? null
+            : (lineType === 'dashed' ? [dashSize, dashSize] : [dotSize, dotSize]);
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var getAreaStyle = makeStyleMapper(
+    [
+        ['fill', 'color'],
+        ['shadowBlur'],
+        ['shadowOffsetX'],
+        ['shadowOffsetY'],
+        ['opacity'],
+        ['shadowColor']
+    ]
+);
+
+var areaStyleMixin = {
+    getAreaStyle: function (excludes, includes) {
+        return getAreaStyle(this, excludes, includes);
+    }
+};
+
+/**
+ * æ›²çº¿è¾…åŠ©æ¨¡å—
+ * @module zrender/core/curve
+ * @author pissang(https://www.github.com/pissang)
+ */
+
+var mathPow = Math.pow;
+var mathSqrt$2 = Math.sqrt;
+
+var EPSILON$1 = 1e-8;
+var EPSILON_NUMERIC = 1e-4;
+
+var THREE_SQRT = mathSqrt$2(3);
+var ONE_THIRD = 1 / 3;
+
+// ä¸´æ—¶å˜é‡
+var _v0 = create();
+var _v1 = create();
+var _v2 = create();
+
+function isAroundZero(val) {
+    return val > -EPSILON$1 && val < EPSILON$1;
+}
+function isNotAroundZero$1(val) {
+    return val > EPSILON$1 || val < -EPSILON$1;
+}
+/**
+ * è®¡ç®—ä¸‰æ¬¡è´å¡žå°”å€¼
+ * @memberOf module:zrender/core/curve
+ * @param  {number} p0
+ * @param  {number} p1
+ * @param  {number} p2
+ * @param  {number} p3
+ * @param  {number} t
+ * @return {number}
+ */
+function cubicAt(p0, p1, p2, p3, t) {
+    var onet = 1 - t;
+    return onet * onet * (onet * p0 + 3 * t * p1)
+            + t * t * (t * p3 + 3 * onet * p2);
+}
+
+/**
+ * è®¡ç®—ä¸‰æ¬¡è´å¡žå°”å¯¼æ•°å€¼
+ * @memberOf module:zrender/core/curve
+ * @param  {number} p0
+ * @param  {number} p1
+ * @param  {number} p2
+ * @param  {number} p3
+ * @param  {number} t
+ * @return {number}
+ */
+function cubicDerivativeAt(p0, p1, p2, p3, t) {
+    var onet = 1 - t;
+    return 3 * (
+        ((p1 - p0) * onet + 2 * (p2 - p1) * t) * onet
+        + (p3 - p2) * t * t
+    );
+}
+
+/**
+ * è®¡ç®—ä¸‰æ¬¡è´å¡žå°”æ–¹ç¨‹æ ¹ï¼Œä½¿ç”¨ç››é‡‘å…¬å¼
+ * @memberOf module:zrender/core/curve
+ * @param  {number} p0
+ * @param  {number} p1
+ * @param  {number} p2
+ * @param  {number} p3
+ * @param  {number} val
+ * @param  {Array.<number>} roots
+ * @return {number} æœ‰æ•ˆæ ¹æ•°ç›®
+ */
+function cubicRootAt(p0, p1, p2, p3, val, roots) {
+    // Evaluate roots of cubic functions
+    var a = p3 + 3 * (p1 - p2) - p0;
+    var b = 3 * (p2 - p1 * 2 + p0);
+    var c = 3 * (p1  - p0);
+    var d = p0 - val;
+
+    var A = b * b - 3 * a * c;
+    var B = b * c - 9 * a * d;
+    var C = c * c - 3 * b * d;
+
+    var n = 0;
+
+    if (isAroundZero(A) && isAroundZero(B)) {
+        if (isAroundZero(b)) {
+            roots[0] = 0;
+        }
+        else {
+            var t1 = -c / b;  //t1, t2, t3, b is not zero
+            if (t1 >= 0 && t1 <= 1) {
+                roots[n++] = t1;
+            }
+        }
+    }
+    else {
+        var disc = B * B - 4 * A * C;
+
+        if (isAroundZero(disc)) {
+            var K = B / A;
+            var t1 = -b / a + K;  // t1, a is not zero
+            var t2 = -K / 2;  // t2, t3
+            if (t1 >= 0 && t1 <= 1) {
+                roots[n++] = t1;
+            }
+            if (t2 >= 0 && t2 <= 1) {
+                roots[n++] = t2;
+            }
+        }
+        else if (disc > 0) {
+            var discSqrt = mathSqrt$2(disc);
+            var Y1 = A * b + 1.5 * a * (-B + discSqrt);
+            var Y2 = A * b + 1.5 * a * (-B - discSqrt);
+            if (Y1 < 0) {
+                Y1 = -mathPow(-Y1, ONE_THIRD);
+            }
+            else {
+                Y1 = mathPow(Y1, ONE_THIRD);
+            }
+            if (Y2 < 0) {
+                Y2 = -mathPow(-Y2, ONE_THIRD);
+            }
+            else {
+                Y2 = mathPow(Y2, ONE_THIRD);
+            }
+            var t1 = (-b - (Y1 + Y2)) / (3 * a);
+            if (t1 >= 0 && t1 <= 1) {
+                roots[n++] = t1;
+            }
+        }
+        else {
+            var T = (2 * A * b - 3 * a * B) / (2 * mathSqrt$2(A * A * A));
+            var theta = Math.acos(T) / 3;
+            var ASqrt = mathSqrt$2(A);
+            var tmp = Math.cos(theta);
+
+            var t1 = (-b - 2 * ASqrt * tmp) / (3 * a);
+            var t2 = (-b + ASqrt * (tmp + THREE_SQRT * Math.sin(theta))) / (3 * a);
+            var t3 = (-b + ASqrt * (tmp - THREE_SQRT * Math.sin(theta))) / (3 * a);
+            if (t1 >= 0 && t1 <= 1) {
+                roots[n++] = t1;
+            }
+            if (t2 >= 0 && t2 <= 1) {
+                roots[n++] = t2;
+            }
+            if (t3 >= 0 && t3 <= 1) {
+                roots[n++] = t3;
+            }
+        }
+    }
+    return n;
+}
+
+/**
+ * è®¡ç®—ä¸‰æ¬¡è´å¡žå°”æ–¹ç¨‹æžé™å€¼çš„ä½ç½®
+ * @memberOf module:zrender/core/curve
+ * @param  {number} p0
+ * @param  {number} p1
+ * @param  {number} p2
+ * @param  {number} p3
+ * @param  {Array.<number>} extrema
+ * @return {number} æœ‰æ•ˆæ•°ç›®
+ */
+function cubicExtrema(p0, p1, p2, p3, extrema) {
+    var b = 6 * p2 - 12 * p1 + 6 * p0;
+    var a = 9 * p1 + 3 * p3 - 3 * p0 - 9 * p2;
+    var c = 3 * p1 - 3 * p0;
+
+    var n = 0;
+    if (isAroundZero(a)) {
+        if (isNotAroundZero$1(b)) {
+            var t1 = -c / b;
+            if (t1 >= 0 && t1 <=1) {
+                extrema[n++] = t1;
+            }
+        }
+    }
+    else {
+        var disc = b * b - 4 * a * c;
+        if (isAroundZero(disc)) {
+            extrema[0] = -b / (2 * a);
+        }
+        else if (disc > 0) {
+            var discSqrt = mathSqrt$2(disc);
+            var t1 = (-b + discSqrt) / (2 * a);
+            var t2 = (-b - discSqrt) / (2 * a);
+            if (t1 >= 0 && t1 <= 1) {
+                extrema[n++] = t1;
+            }
+            if (t2 >= 0 && t2 <= 1) {
+                extrema[n++] = t2;
+            }
+        }
+    }
+    return n;
+}
+
+/**
+ * ç»†åˆ†ä¸‰æ¬¡è´å¡žå°”æ›²çº¿
+ * @memberOf module:zrender/core/curve
+ * @param  {number} p0
+ * @param  {number} p1
+ * @param  {number} p2
+ * @param  {number} p3
+ * @param  {number} t
+ * @param  {Array.<number>} out
+ */
+function cubicSubdivide(p0, p1, p2, p3, t, out) {
+    var p01 = (p1 - p0) * t + p0;
+    var p12 = (p2 - p1) * t + p1;
+    var p23 = (p3 - p2) * t + p2;
+
+    var p012 = (p12 - p01) * t + p01;
+    var p123 = (p23 - p12) * t + p12;
+
+    var p0123 = (p123 - p012) * t + p012;
+    // Seg0
+    out[0] = p0;
+    out[1] = p01;
+    out[2] = p012;
+    out[3] = p0123;
+    // Seg1
+    out[4] = p0123;
+    out[5] = p123;
+    out[6] = p23;
+    out[7] = p3;
+}
+
+/**
+ * æŠ•å°„ç‚¹åˆ°ä¸‰æ¬¡è´å¡žå°”æ›²çº¿ä¸Šï¼Œè¿”å›žæŠ•å°„è·ç¦»ã€‚
+ * æŠ•å°„ç‚¹æœ‰å¯èƒ½ä¼šæœ‰ä¸€ä¸ªæˆ–è€…å¤šä¸ªï¼Œè¿™é‡Œåªè¿”å›žå…¶ä¸è·ç¦»æœ€çŸçš„ä¸€ä¸ªã€‚
+ * @param {number} x0
+ * @param {number} y0
+ * @param {number} x1
+ * @param {number} y1
+ * @param {number} x2
+ * @param {number} y2
+ * @param {number} x3
+ * @param {number} y3
+ * @param {number} x
+ * @param {number} y
+ * @param {Array.<number>} [out] æŠ•å°„ç‚¹
+ * @return {number}
+ */
+function cubicProjectPoint(
+    x0, y0, x1, y1, x2, y2, x3, y3,
+    x, y, out
+) {
+    // http://pomax.github.io/bezierinfo/#projections
+    var t;
+    var interval = 0.005;
+    var d = Infinity;
+    var prev;
+    var next;
+    var d1;
+    var d2;
+
+    _v0[0] = x;
+    _v0[1] = y;
+
+    // å…ˆç²—ç•¥ä¼°è®¡ä¸€ä¸‹å¯èƒ½çš„æœ€å°è·ç¦»çš„ t å€¼
+    // PENDING
+    for (var _t = 0; _t < 1; _t += 0.05) {
+        _v1[0] = cubicAt(x0, x1, x2, x3, _t);
+        _v1[1] = cubicAt(y0, y1, y2, y3, _t);
+        d1 = distSquare(_v0, _v1);
+        if (d1 < d) {
+            t = _t;
+            d = d1;
+        }
+    }
+    d = Infinity;
+
+    // At most 32 iteration
+    for (var i = 0; i < 32; i++) {
+        if (interval < EPSILON_NUMERIC) {
+            break;
+        }
+        prev = t - interval;
+        next = t + interval;
+        // t - interval
+        _v1[0] = cubicAt(x0, x1, x2, x3, prev);
+        _v1[1] = cubicAt(y0, y1, y2, y3, prev);
+
+        d1 = distSquare(_v1, _v0);
+
+        if (prev >= 0 && d1 < d) {
+            t = prev;
+            d = d1;
+        }
+        else {
+            // t + interval
+            _v2[0] = cubicAt(x0, x1, x2, x3, next);
+            _v2[1] = cubicAt(y0, y1, y2, y3, next);
+            d2 = distSquare(_v2, _v0);
+
+            if (next <= 1 && d2 < d) {
+                t = next;
+                d = d2;
+            }
+            else {
+                interval *= 0.5;
+            }
+        }
+    }
+    // t
+    if (out) {
+        out[0] = cubicAt(x0, x1, x2, x3, t);
+        out[1] = cubicAt(y0, y1, y2, y3, t);
+    }
+    // console.log(interval, i);
+    return mathSqrt$2(d);
+}
+
+/**
+ * è®¡ç®—äºŒæ¬¡æ–¹è´å¡žå°”å€¼
+ * @param  {number} p0
+ * @param  {number} p1
+ * @param  {number} p2
+ * @param  {number} t
+ * @return {number}
+ */
+function quadraticAt(p0, p1, p2, t) {
+    var onet = 1 - t;
+    return onet * (onet * p0 + 2 * t * p1) + t * t * p2;
+}
+
+/**
+ * è®¡ç®—äºŒæ¬¡æ–¹è´å¡žå°”å¯¼æ•°å€¼
+ * @param  {number} p0
+ * @param  {number} p1
+ * @param  {number} p2
+ * @param  {number} t
+ * @return {number}
+ */
+function quadraticDerivativeAt(p0, p1, p2, t) {
+    return 2 * ((1 - t) * (p1 - p0) + t * (p2 - p1));
+}
+
+/**
+ * è®¡ç®—äºŒæ¬¡æ–¹è´å¡žå°”æ–¹ç¨‹æ ¹
+ * @param  {number} p0
+ * @param  {number} p1
+ * @param  {number} p2
+ * @param  {number} t
+ * @param  {Array.<number>} roots
+ * @return {number} æœ‰æ•ˆæ ¹æ•°ç›®
+ */
+function quadraticRootAt(p0, p1, p2, val, roots) {
+    var a = p0 - 2 * p1 + p2;
+    var b = 2 * (p1 - p0);
+    var c = p0 - val;
+
+    var n = 0;
+    if (isAroundZero(a)) {
+        if (isNotAroundZero$1(b)) {
+            var t1 = -c / b;
+            if (t1 >= 0 && t1 <= 1) {
+                roots[n++] = t1;
+            }
+        }
+    }
+    else {
+        var disc = b * b - 4 * a * c;
+        if (isAroundZero(disc)) {
+            var t1 = -b / (2 * a);
+            if (t1 >= 0 && t1 <= 1) {
+                roots[n++] = t1;
+            }
+        }
+        else if (disc > 0) {
+            var discSqrt = mathSqrt$2(disc);
+            var t1 = (-b + discSqrt) / (2 * a);
+            var t2 = (-b - discSqrt) / (2 * a);
+            if (t1 >= 0 && t1 <= 1) {
+                roots[n++] = t1;
+            }
+            if (t2 >= 0 && t2 <= 1) {
+                roots[n++] = t2;
+            }
+        }
+    }
+    return n;
+}
+
+/**
+ * è®¡ç®—äºŒæ¬¡è´å¡žå°”æ–¹ç¨‹æžé™å€¼
+ * @memberOf module:zrender/core/curve
+ * @param  {number} p0
+ * @param  {number} p1
+ * @param  {number} p2
+ * @return {number}
+ */
+function quadraticExtremum(p0, p1, p2) {
+    var divider = p0 + p2 - 2 * p1;
+    if (divider === 0) {
+        // p1 is center of p0 and p2
+        return 0.5;
+    }
+    else {
+        return (p0 - p1) / divider;
+    }
+}
+
+/**
+ * ç»†åˆ†äºŒæ¬¡è´å¡žå°”æ›²çº¿
+ * @memberOf module:zrender/core/curve
+ * @param  {number} p0
+ * @param  {number} p1
+ * @param  {number} p2
+ * @param  {number} t
+ * @param  {Array.<number>} out
+ */
+function quadraticSubdivide(p0, p1, p2, t, out) {
+    var p01 = (p1 - p0) * t + p0;
+    var p12 = (p2 - p1) * t + p1;
+    var p012 = (p12 - p01) * t + p01;
+
+    // Seg0
+    out[0] = p0;
+    out[1] = p01;
+    out[2] = p012;
+
+    // Seg1
+    out[3] = p012;
+    out[4] = p12;
+    out[5] = p2;
+}
+
+/**
+ * æŠ•å°„ç‚¹åˆ°äºŒæ¬¡è´å¡žå°”æ›²çº¿ä¸Šï¼Œè¿”å›žæŠ•å°„è·ç¦»ã€‚
+ * æŠ•å°„ç‚¹æœ‰å¯èƒ½ä¼šæœ‰ä¸€ä¸ªæˆ–è€…å¤šä¸ªï¼Œè¿™é‡Œåªè¿”å›žå…¶ä¸è·ç¦»æœ€çŸçš„ä¸€ä¸ªã€‚
+ * @param {number} x0
+ * @param {number} y0
+ * @param {number} x1
+ * @param {number} y1
+ * @param {number} x2
+ * @param {number} y2
+ * @param {number} x
+ * @param {number} y
+ * @param {Array.<number>} out æŠ•å°„ç‚¹
+ * @return {number}
+ */
+function quadraticProjectPoint(
+    x0, y0, x1, y1, x2, y2,
+    x, y, out
+) {
+    // http://pomax.github.io/bezierinfo/#projections
+    var t;
+    var interval = 0.005;
+    var d = Infinity;
+
+    _v0[0] = x;
+    _v0[1] = y;
+
+    // å…ˆç²—ç•¥ä¼°è®¡ä¸€ä¸‹å¯èƒ½çš„æœ€å°è·ç¦»çš„ t å€¼
+    // PENDING
+    for (var _t = 0; _t < 1; _t += 0.05) {
+        _v1[0] = quadraticAt(x0, x1, x2, _t);
+        _v1[1] = quadraticAt(y0, y1, y2, _t);
+        var d1 = distSquare(_v0, _v1);
+        if (d1 < d) {
+            t = _t;
+            d = d1;
+        }
+    }
+    d = Infinity;
+
+    // At most 32 iteration
+    for (var i = 0; i < 32; i++) {
+        if (interval < EPSILON_NUMERIC) {
+            break;
+        }
+        var prev = t - interval;
+        var next = t + interval;
+        // t - interval
+        _v1[0] = quadraticAt(x0, x1, x2, prev);
+        _v1[1] = quadraticAt(y0, y1, y2, prev);
+
+        var d1 = distSquare(_v1, _v0);
+
+        if (prev >= 0 && d1 < d) {
+            t = prev;
+            d = d1;
+        }
+        else {
+            // t + interval
+            _v2[0] = quadraticAt(x0, x1, x2, next);
+            _v2[1] = quadraticAt(y0, y1, y2, next);
+            var d2 = distSquare(_v2, _v0);
+            if (next <= 1 && d2 < d) {
+                t = next;
+                d = d2;
+            }
+            else {
+                interval *= 0.5;
+            }
+        }
+    }
+    // t
+    if (out) {
+        out[0] = quadraticAt(x0, x1, x2, t);
+        out[1] = quadraticAt(y0, y1, y2, t);
+    }
+    // console.log(interval, i);
+    return mathSqrt$2(d);
+}
+
+/**
+ * @author Yi Shen(https://github.com/pissang)
+ */
+
+var mathMin$3 = Math.min;
+var mathMax$3 = Math.max;
+var mathSin$2 = Math.sin;
+var mathCos$2 = Math.cos;
+var PI2 = Math.PI * 2;
+
+var start = create();
+var end = create();
+var extremity = create();
+
+/**
+ * ä»Žé¡¶ç‚¹æ•°ç»„ä¸è®¡ç®—å‡ºæœ€å°åŒ…å›´ç›’ï¼Œå†™å…¥`min`å’Œ`max`ä¸
+ * @module zrender/core/bbox
+ * @param {Array<Object>} points é¡¶ç‚¹æ•°ç»„
+ * @param {number} min
+ * @param {number} max
+ */
+function fromPoints(points, min$$1, max$$1) {
+    if (points.length === 0) {
+        return;
+    }
+    var p = points[0];
+    var left = p[0];
+    var right = p[0];
+    var top = p[1];
+    var bottom = p[1];
+    var i;
+
+    for (i = 1; i < points.length; i++) {
+        p = points[i];
+        left = mathMin$3(left, p[0]);
+        right = mathMax$3(right, p[0]);
+        top = mathMin$3(top, p[1]);
+        bottom = mathMax$3(bottom, p[1]);
+    }
+
+    min$$1[0] = left;
+    min$$1[1] = top;
+    max$$1[0] = right;
+    max$$1[1] = bottom;
+}
+
+/**
+ * @memberOf module:zrender/core/bbox
+ * @param {number} x0
+ * @param {number} y0
+ * @param {number} x1
+ * @param {number} y1
+ * @param {Array.<number>} min
+ * @param {Array.<number>} max
+ */
+function fromLine(x0, y0, x1, y1, min$$1, max$$1) {
+    min$$1[0] = mathMin$3(x0, x1);
+    min$$1[1] = mathMin$3(y0, y1);
+    max$$1[0] = mathMax$3(x0, x1);
+    max$$1[1] = mathMax$3(y0, y1);
+}
+
+var xDim = [];
+var yDim = [];
+/**
+ * ä»Žä¸‰é˜¶è´å¡žå°”æ›²çº¿(p0, p1, p2, p3)ä¸è®¡ç®—å‡ºæœ€å°åŒ…å›´ç›’ï¼Œå†™å…¥`min`å’Œ`max`ä¸
+ * @memberOf module:zrender/core/bbox
+ * @param {number} x0
+ * @param {number} y0
+ * @param {number} x1
+ * @param {number} y1
+ * @param {number} x2
+ * @param {number} y2
+ * @param {number} x3
+ * @param {number} y3
+ * @param {Array.<number>} min
+ * @param {Array.<number>} max
+ */
+function fromCubic(
+    x0, y0, x1, y1, x2, y2, x3, y3, min$$1, max$$1
+) {
+    var cubicExtrema$$1 = cubicExtrema;
+    var cubicAt$$1 = cubicAt;
+    var i;
+    var n = cubicExtrema$$1(x0, x1, x2, x3, xDim);
+    min$$1[0] = Infinity;
+    min$$1[1] = Infinity;
+    max$$1[0] = -Infinity;
+    max$$1[1] = -Infinity;
+
+    for (i = 0; i < n; i++) {
+        var x = cubicAt$$1(x0, x1, x2, x3, xDim[i]);
+        min$$1[0] = mathMin$3(x, min$$1[0]);
+        max$$1[0] = mathMax$3(x, max$$1[0]);
+    }
+    n = cubicExtrema$$1(y0, y1, y2, y3, yDim);
+    for (i = 0; i < n; i++) {
+        var y = cubicAt$$1(y0, y1, y2, y3, yDim[i]);
+        min$$1[1] = mathMin$3(y, min$$1[1]);
+        max$$1[1] = mathMax$3(y, max$$1[1]);
+    }
+
+    min$$1[0] = mathMin$3(x0, min$$1[0]);
+    max$$1[0] = mathMax$3(x0, max$$1[0]);
+    min$$1[0] = mathMin$3(x3, min$$1[0]);
+    max$$1[0] = mathMax$3(x3, max$$1[0]);
+
+    min$$1[1] = mathMin$3(y0, min$$1[1]);
+    max$$1[1] = mathMax$3(y0, max$$1[1]);
+    min$$1[1] = mathMin$3(y3, min$$1[1]);
+    max$$1[1] = mathMax$3(y3, max$$1[1]);
+}
+
+/**
+ * ä»ŽäºŒé˜¶è´å¡žå°”æ›²çº¿(p0, p1, p2)ä¸è®¡ç®—å‡ºæœ€å°åŒ…å›´ç›’ï¼Œå†™å…¥`min`å’Œ`max`ä¸
+ * @memberOf module:zrender/core/bbox
+ * @param {number} x0
+ * @param {number} y0
+ * @param {number} x1
+ * @param {number} y1
+ * @param {number} x2
+ * @param {number} y2
+ * @param {Array.<number>} min
+ * @param {Array.<number>} max
+ */
+function fromQuadratic(x0, y0, x1, y1, x2, y2, min$$1, max$$1) {
+    var quadraticExtremum$$1 = quadraticExtremum;
+    var quadraticAt$$1 = quadraticAt;
+    // Find extremities, where derivative in x dim or y dim is zero
+    var tx =
+        mathMax$3(
+            mathMin$3(quadraticExtremum$$1(x0, x1, x2), 1), 0
+        );
+    var ty =
+        mathMax$3(
+            mathMin$3(quadraticExtremum$$1(y0, y1, y2), 1), 0
+        );
+
+    var x = quadraticAt$$1(x0, x1, x2, tx);
+    var y = quadraticAt$$1(y0, y1, y2, ty);
+
+    min$$1[0] = mathMin$3(x0, x2, x);
+    min$$1[1] = mathMin$3(y0, y2, y);
+    max$$1[0] = mathMax$3(x0, x2, x);
+    max$$1[1] = mathMax$3(y0, y2, y);
+}
+
+/**
+ * ä»Žåœ†å¼§ä¸è®¡ç®—å‡ºæœ€å°åŒ…å›´ç›’ï¼Œå†™å…¥`min`å’Œ`max`ä¸
+ * @method
+ * @memberOf module:zrender/core/bbox
+ * @param {number} x
+ * @param {number} y
+ * @param {number} rx
+ * @param {number} ry
+ * @param {number} startAngle
+ * @param {number} endAngle
+ * @param {number} anticlockwise
+ * @param {Array.<number>} min
+ * @param {Array.<number>} max
+ */
+function fromArc(
+    x, y, rx, ry, startAngle, endAngle, anticlockwise, min$$1, max$$1
+) {
+    var vec2Min = min;
+    var vec2Max = max;
+
+    var diff = Math.abs(startAngle - endAngle);
+
+
+    if (diff % PI2 < 1e-4 && diff > 1e-4) {
+        // Is a circle
+        min$$1[0] = x - rx;
+        min$$1[1] = y - ry;
+        max$$1[0] = x + rx;
+        max$$1[1] = y + ry;
+        return;
+    }
+
+    start[0] = mathCos$2(startAngle) * rx + x;
+    start[1] = mathSin$2(startAngle) * ry + y;
+
+    end[0] = mathCos$2(endAngle) * rx + x;
+    end[1] = mathSin$2(endAngle) * ry + y;
+
+    vec2Min(min$$1, start, end);
+    vec2Max(max$$1, start, end);
+
+    // Thresh to [0, Math.PI * 2]
+    startAngle = startAngle % (PI2);
+    if (startAngle < 0) {
+        startAngle = startAngle + PI2;
+    }
+    endAngle = endAngle % (PI2);
+    if (endAngle < 0) {
+        endAngle = endAngle + PI2;
+    }
+
+    if (startAngle > endAngle && !anticlockwise) {
+        endAngle += PI2;
+    }
+    else if (startAngle < endAngle && anticlockwise) {
+        startAngle += PI2;
+    }
+    if (anticlockwise) {
+        var tmp = endAngle;
+        endAngle = startAngle;
+        startAngle = tmp;
+    }
+
+    // var number = 0;
+    // var step = (anticlockwise ? -Math.PI : Math.PI) / 2;
+    for (var angle = 0; angle < endAngle; angle += Math.PI / 2) {
+        if (angle > startAngle) {
+            extremity[0] = mathCos$2(angle) * rx + x;
+            extremity[1] = mathSin$2(angle) * ry + y;
+
+            vec2Min(min$$1, extremity, min$$1);
+            vec2Max(max$$1, extremity, max$$1);
+        }
+    }
+}
+
+/**
+ * Path ä»£ç†ï¼Œå¯ä»¥åœ¨`buildPath`ä¸ç”¨äºŽæ›¿ä»£`ctx`, ä¼šä¿å˜æ¯ä¸ªpathæ“ä½œçš„å‘½ä»¤åˆ°pathCommandså±žæ€§ä¸
+ * å¯ä»¥ç”¨äºŽ isInsidePath åˆ¤æ–ä»¥åŠèŽ·å–boundingRect
+ *
+ * @module zrender/core/PathProxy
+ * @author Yi Shen (http://www.github.com/pissang)
+ */
+
+// TODO getTotalLength, getPointAtLength
+
+var CMD = {
+    M: 1,
+    L: 2,
+    C: 3,
+    Q: 4,
+    A: 5,
+    Z: 6,
+    // Rect
+    R: 7
+};
+
+// var CMD_MEM_SIZE = {
+//     M: 3,
+//     L: 3,
+//     C: 7,
+//     Q: 5,
+//     A: 9,
+//     R: 5,
+//     Z: 1
+// };
+
+var min$1 = [];
+var max$1 = [];
+var min2 = [];
+var max2 = [];
+var mathMin$2 = Math.min;
+var mathMax$2 = Math.max;
+var mathCos$1 = Math.cos;
+var mathSin$1 = Math.sin;
+var mathSqrt$1 = Math.sqrt;
+var mathAbs = Math.abs;
+
+var hasTypedArray = typeof Float32Array != 'undefined';
+
+/**
+ * @alias module:zrender/core/PathProxy
+ * @constructor
+ */
+var PathProxy = function (notSaveData) {
+
+    this._saveData = !(notSaveData || false);
+
+    if (this._saveData) {
+        /**
+         * Path data. Stored as flat array
+         * @type {Array.<Object>}
+         */
+        this.data = [];
+    }
+
+    this._ctx = null;
+};
+
+/**
+ * å¿«é€Ÿè®¡ç®—PathåŒ…å›´ç›’ï¼ˆå¹¶ä¸æ˜¯æœ€å°åŒ…å›´ç›’ï¼‰
+ * @return {Object}
+ */
+PathProxy.prototype = {
+
+    constructor: PathProxy,
+
+    _xi: 0,
+    _yi: 0,
+
+    _x0: 0,
+    _y0: 0,
+    // Unit x, Unit y. Provide for avoiding drawing that too short line segment
+    _ux: 0,
+    _uy: 0,
+
+    _len: 0,
+
+    _lineDash: null,
+
+    _dashOffset: 0,
+
+    _dashIdx: 0,
+
+    _dashSum: 0,
+
+    /**
+     * @readOnly
+     */
+    setScale: function (sx, sy) {
+        this._ux = mathAbs(1 / devicePixelRatio / sx) || 0;
+        this._uy = mathAbs(1 / devicePixelRatio / sy) || 0;
+    },
+
+    getContext: function () {
+        return this._ctx;
+    },
+
+    /**
+     * @param  {CanvasRenderingContext2D} ctx
+     * @return {module:zrender/core/PathProxy}
+     */
+    beginPath: function (ctx) {
+
+        this._ctx = ctx;
+
+        ctx && ctx.beginPath();
+
+        ctx && (this.dpr = ctx.dpr);
+
+        // Reset
+        if (this._saveData) {
+            this._len = 0;
+        }
+
+        if (this._lineDash) {
+            this._lineDash = null;
+
+            this._dashOffset = 0;
+        }
+
+        return this;
+    },
+
+    /**
+     * @param  {number} x
+     * @param  {number} y
+     * @return {module:zrender/core/PathProxy}
+     */
+    moveTo: function (x, y) {
+        this.addData(CMD.M, x, y);
+        this._ctx && this._ctx.moveTo(x, y);
+
+        // x0, y0, xi, yi æ˜¯è®°å½•åœ¨ _dashedXXXXTo æ–¹æ³•ä¸ä½¿ç”¨
+        // xi, yi è®°å½•å½“å‰ç‚¹, x0, y0 åœ¨ closePath çš„æ—¶å€™å›žåˆ°èµ·å§‹ç‚¹ã€‚
+        // æœ‰å¯èƒ½åœ¨ beginPath ä¹‹åŽç›´æŽ¥è°ƒç”¨ lineToï¼Œè¿™æ—¶å€™ x0, y0 éœ€è¦
+        // åœ¨ lineTo æ–¹æ³•ä¸è®°å½•ï¼Œè¿™é‡Œå…ˆä¸è€ƒè™‘è¿™ç§æƒ…å†µï¼Œdashed line ä¹Ÿåªåœ¨ IE10- ä¸ä¸æ”¯æŒ
+        this._x0 = x;
+        this._y0 = y;
+
+        this._xi = x;
+        this._yi = y;
+
+        return this;
+    },
+
+    /**
+     * @param  {number} x
+     * @param  {number} y
+     * @return {module:zrender/core/PathProxy}
+     */
+    lineTo: function (x, y) {
+        var exceedUnit = mathAbs(x - this._xi) > this._ux
+            || mathAbs(y - this._yi) > this._uy
+            // Force draw the first segment
+            || this._len < 5;
+
+        this.addData(CMD.L, x, y);
+
+        if (this._ctx && exceedUnit) {
+            this._needsDash() ? this._dashedLineTo(x, y)
+                : this._ctx.lineTo(x, y);
+        }
+        if (exceedUnit) {
+            this._xi = x;
+            this._yi = y;
+        }
+
+        return this;
+    },
+
+    /**
+     * @param  {number} x1
+     * @param  {number} y1
+     * @param  {number} x2
+     * @param  {number} y2
+     * @param  {number} x3
+     * @param  {number} y3
+     * @return {module:zrender/core/PathProxy}
+     */
+    bezierCurveTo: function (x1, y1, x2, y2, x3, y3) {
+        this.addData(CMD.C, x1, y1, x2, y2, x3, y3);
+        if (this._ctx) {
+            this._needsDash() ? this._dashedBezierTo(x1, y1, x2, y2, x3, y3)
+                : this._ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3);
+        }
+        this._xi = x3;
+        this._yi = y3;
+        return this;
+    },
+
+    /**
+     * @param  {number} x1
+     * @param  {number} y1
+     * @param  {number} x2
+     * @param  {number} y2
+     * @return {module:zrender/core/PathProxy}
+     */
+    quadraticCurveTo: function (x1, y1, x2, y2) {
+        this.addData(CMD.Q, x1, y1, x2, y2);
+        if (this._ctx) {
+            this._needsDash() ? this._dashedQuadraticTo(x1, y1, x2, y2)
+                : this._ctx.quadraticCurveTo(x1, y1, x2, y2);
+        }
+        this._xi = x2;
+        this._yi = y2;
+        return this;
+    },
+
+    /**
+     * @param  {number} cx
+     * @param  {number} cy
+     * @param  {number} r
+     * @param  {number} startAngle
+     * @param  {number} endAngle
+     * @param  {boolean} anticlockwise
+     * @return {module:zrender/core/PathProxy}
+     */
+    arc: function (cx, cy, r, startAngle, endAngle, anticlockwise) {
+        this.addData(
+            CMD.A, cx, cy, r, r, startAngle, endAngle - startAngle, 0, anticlockwise ? 0 : 1
+        );
+        this._ctx && this._ctx.arc(cx, cy, r, startAngle, endAngle, anticlockwise);
+
+        this._xi = mathCos$1(endAngle) * r + cx;
+        this._yi = mathSin$1(endAngle) * r + cx;
+        return this;
+    },
+
+    // TODO
+    arcTo: function (x1, y1, x2, y2, radius) {
+        if (this._ctx) {
+            this._ctx.arcTo(x1, y1, x2, y2, radius);
+        }
+        return this;
+    },
+
+    // TODO
+    rect: function (x, y, w, h) {
+        this._ctx && this._ctx.rect(x, y, w, h);
+        this.addData(CMD.R, x, y, w, h);
+        return this;
+    },
+
+    /**
+     * @return {module:zrender/core/PathProxy}
+     */
+    closePath: function () {
+        this.addData(CMD.Z);
+
+        var ctx = this._ctx;
+        var x0 = this._x0;
+        var y0 = this._y0;
+        if (ctx) {
+            this._needsDash() && this._dashedLineTo(x0, y0);
+            ctx.closePath();
+        }
+
+        this._xi = x0;
+        this._yi = y0;
+        return this;
+    },
+
+    /**
+     * Context ä»Žå¤–éƒ¨ä¼ å…¥ï¼Œå› ä¸ºæœ‰å¯èƒ½æ˜¯ rebuildPath å®Œä¹‹åŽå† fillã€‚
+     * stroke åŒæ ·
+     * @param {CanvasRenderingContext2D} ctx
+     * @return {module:zrender/core/PathProxy}
+     */
+    fill: function (ctx) {
+        ctx && ctx.fill();
+        this.toStatic();
+    },
+
+    /**
+     * @param {CanvasRenderingContext2D} ctx
+     * @return {module:zrender/core/PathProxy}
+     */
+    stroke: function (ctx) {
+        ctx && ctx.stroke();
+        this.toStatic();
+    },
+
+    /**
+     * å¿…é¡»åœ¨å…¶å®ƒç»˜åˆ¶å‘½ä»¤å‰è°ƒç”¨
+     * Must be invoked before all other path drawing methods
+     * @return {module:zrender/core/PathProxy}
+     */
+    setLineDash: function (lineDash) {
+        if (lineDash instanceof Array) {
+            this._lineDash = lineDash;
+
+            this._dashIdx = 0;
+
+            var lineDashSum = 0;
+            for (var i = 0; i < lineDash.length; i++) {
+                lineDashSum += lineDash[i];
+            }
+            this._dashSum = lineDashSum;
+        }
+        return this;
+    },
+
+    /**
+     * å¿…é¡»åœ¨å…¶å®ƒç»˜åˆ¶å‘½ä»¤å‰è°ƒç”¨
+     * Must be invoked before all other path drawing methods
+     * @return {module:zrender/core/PathProxy}
+     */
+    setLineDashOffset: function (offset) {
+        this._dashOffset = offset;
+        return this;
+    },
+
+    /**
+     *
+     * @return {boolean}
+     */
+    len: function () {
+        return this._len;
+    },
+
+    /**
+     * ç›´æŽ¥è®¾ç½® Path æ•°æ®
+     */
+    setData: function (data) {
+
+        var len$$1 = data.length;
+
+        if (! (this.data && this.data.length == len$$1) && hasTypedArray) {
+            this.data = new Float32Array(len$$1);
+        }
+
+        for (var i = 0; i < len$$1; i++) {
+            this.data[i] = data[i];
+        }
+
+        this._len = len$$1;
+    },
+
+    /**
+     * æ·»åŠ åè·¯å¾„
+     * @param {module:zrender/core/PathProxy|Array.<module:zrender/core/PathProxy>} path
+     */
+    appendPath: function (path) {
+        if (!(path instanceof Array)) {
+            path = [path];
+        }
+        var len$$1 = path.length;
+        var appendSize = 0;
+        var offset = this._len;
+        for (var i = 0; i < len$$1; i++) {
+            appendSize += path[i].len();
+        }
+        if (hasTypedArray && (this.data instanceof Float32Array)) {
+            this.data = new Float32Array(offset + appendSize);
+        }
+        for (var i = 0; i < len$$1; i++) {
+            var appendPathData = path[i].data;
+            for (var k = 0; k < appendPathData.length; k++) {
+                this.data[offset++] = appendPathData[k];
+            }
+        }
+        this._len = offset;
+    },
+
+    /**
+     * å¡«å…… Path æ•°æ®ã€‚
+     * å°½é‡å¤ç”¨è€Œä¸ç”³æ˜Žæ–°çš„æ•°ç»„ã€‚å¤§éƒ¨åˆ†å›¾å½¢é‡ç»˜çš„æŒ‡ä»¤æ•°æ®é•¿åº¦éƒ½æ˜¯ä¸å˜çš„ã€‚
+     */
+    addData: function (cmd) {
+        if (!this._saveData) {
+            return;
+        }
+
+        var data = this.data;
+        if (this._len + arguments.length > data.length) {
+            // å› ä¸ºä¹‹å‰çš„æ•°ç»„å·²ç»è½¬æ¢æˆé™æ€çš„ Float32Array
+            // æ‰€ä»¥ä¸å¤Ÿç”¨æ—¶éœ€è¦æ‰©å±•ä¸€ä¸ªæ–°çš„åŠ¨æ€æ•°ç»„
+            this._expandData();
+            data = this.data;
+        }
+        for (var i = 0; i < arguments.length; i++) {
+            data[this._len++] = arguments[i];
+        }
+
+        this._prevCmd = cmd;
+    },
+
+    _expandData: function () {
+        // Only if data is Float32Array
+        if (!(this.data instanceof Array)) {
+            var newData = [];
+            for (var i = 0; i < this._len; i++) {
+                newData[i] = this.data[i];
+            }
+            this.data = newData;
+        }
+    },
+
+    /**
+     * If needs js implemented dashed line
+     * @return {boolean}
+     * @private
+     */
+    _needsDash: function () {
+        return this._lineDash;
+    },
+
+    _dashedLineTo: function (x1, y1) {
+        var dashSum = this._dashSum;
+        var offset = this._dashOffset;
+        var lineDash = this._lineDash;
+        var ctx = this._ctx;
+
+        var x0 = this._xi;
+        var y0 = this._yi;
+        var dx = x1 - x0;
+        var dy = y1 - y0;
+        var dist$$1 = mathSqrt$1(dx * dx + dy * dy);
+        var x = x0;
+        var y = y0;
+        var dash;
+        var nDash = lineDash.length;
+        var idx;
+        dx /= dist$$1;
+        dy /= dist$$1;
+
+        if (offset < 0) {
+            // Convert to positive offset
+            offset = dashSum + offset;
+        }
+        offset %= dashSum;
+        x -= offset * dx;
+        y -= offset * dy;
+
+        while ((dx > 0 && x <= x1) || (dx < 0 && x >= x1)
+        || (dx == 0 && ((dy > 0 && y <= y1) || (dy < 0 && y >= y1)))) {
+            idx = this._dashIdx;
+            dash = lineDash[idx];
+            x += dx * dash;
+            y += dy * dash;
+            this._dashIdx = (idx + 1) % nDash;
+            // Skip positive offset
+            if ((dx > 0 && x < x0) || (dx < 0 && x > x0) || (dy > 0 && y < y0) || (dy < 0 && y > y0)) {
+                continue;
+            }
+            ctx[idx % 2 ? 'moveTo' : 'lineTo'](
+                dx >= 0 ? mathMin$2(x, x1) : mathMax$2(x, x1),
+                dy >= 0 ? mathMin$2(y, y1) : mathMax$2(y, y1)
+            );
+        }
+        // Offset for next lineTo
+        dx = x - x1;
+        dy = y - y1;
+        this._dashOffset = -mathSqrt$1(dx * dx + dy * dy);
+    },
+
+    // Not accurate dashed line to
+    _dashedBezierTo: function (x1, y1, x2, y2, x3, y3) {
+        var dashSum = this._dashSum;
+        var offset = this._dashOffset;
+        var lineDash = this._lineDash;
+        var ctx = this._ctx;
+
+        var x0 = this._xi;
+        var y0 = this._yi;
+        var t;
+        var dx;
+        var dy;
+        var cubicAt$$1 = cubicAt;
+        var bezierLen = 0;
+        var idx = this._dashIdx;
+        var nDash = lineDash.length;
+
+        var x;
+        var y;
+
+        var tmpLen = 0;
+
+        if (offset < 0) {
+            // Convert to positive offset
+            offset = dashSum + offset;
+        }
+        offset %= dashSum;
+        // Bezier approx length
+        for (t = 0; t < 1; t += 0.1) {
+            dx = cubicAt$$1(x0, x1, x2, x3, t + 0.1)
+                - cubicAt$$1(x0, x1, x2, x3, t);
+            dy = cubicAt$$1(y0, y1, y2, y3, t + 0.1)
+                - cubicAt$$1(y0, y1, y2, y3, t);
+            bezierLen += mathSqrt$1(dx * dx + dy * dy);
+        }
+
+        // Find idx after add offset
+        for (; idx < nDash; idx++) {
+            tmpLen += lineDash[idx];
+            if (tmpLen > offset) {
+                break;
+            }
+        }
+        t = (tmpLen - offset) / bezierLen;
+
+        while (t <= 1) {
+
+            x = cubicAt$$1(x0, x1, x2, x3, t);
+            y = cubicAt$$1(y0, y1, y2, y3, t);
+
+            // Use line to approximate dashed bezier
+            // Bad result if dash is long
+            idx % 2 ? ctx.moveTo(x, y)
+                : ctx.lineTo(x, y);
+
+            t += lineDash[idx] / bezierLen;
+
+            idx = (idx + 1) % nDash;
+        }
+
+        // Finish the last segment and calculate the new offset
+        (idx % 2 !== 0) && ctx.lineTo(x3, y3);
+        dx = x3 - x;
+        dy = y3 - y;
+        this._dashOffset = -mathSqrt$1(dx * dx + dy * dy);
+    },
+
+    _dashedQuadraticTo: function (x1, y1, x2, y2) {
+        // Convert quadratic to cubic using degree elevation
+        var x3 = x2;
+        var y3 = y2;
+        x2 = (x2 + 2 * x1) / 3;
+        y2 = (y2 + 2 * y1) / 3;
+        x1 = (this._xi + 2 * x1) / 3;
+        y1 = (this._yi + 2 * y1) / 3;
+
+        this._dashedBezierTo(x1, y1, x2, y2, x3, y3);
+    },
+
+    /**
+     * è½¬æˆé™æ€çš„ Float32Array å‡å°‘å †å†…å˜å ç”¨
+     * Convert dynamic array to static Float32Array
+     */
+    toStatic: function () {
+        var data = this.data;
+        if (data instanceof Array) {
+            data.length = this._len;
+            if (hasTypedArray) {
+                this.data = new Float32Array(data);
+            }
+        }
+    },
+
+    /**
+     * @return {module:zrender/core/BoundingRect}
+     */
+    getBoundingRect: function () {
+        min$1[0] = min$1[1] = min2[0] = min2[1] = Number.MAX_VALUE;
+        max$1[0] = max$1[1] = max2[0] = max2[1] = -Number.MAX_VALUE;
+
+        var data = this.data;
+        var xi = 0;
+        var yi = 0;
+        var x0 = 0;
+        var y0 = 0;
+
+        for (var i = 0; i < data.length;) {
+            var cmd = data[i++];
+
+            if (i == 1) {
+                // å¦‚æžœç¬¬ä¸€ä¸ªå‘½ä»¤æ˜¯ L, C, Q
+                // åˆ™ previous point åŒç»˜åˆ¶å‘½ä»¤çš„ç¬¬ä¸€ä¸ª point
+                //
+                // ç¬¬ä¸€ä¸ªå‘½ä»¤ä¸º Arc çš„æƒ…å†µä¸‹ä¼šåœ¨åŽé¢ç‰¹æ®Šå¤„ç†
+                xi = data[i];
+                yi = data[i + 1];
+
+                x0 = xi;
+                y0 = yi;
+            }
+
+            switch (cmd) {
+                case CMD.M:
+                    // moveTo å‘½ä»¤é‡æ–°åˆ›å»ºä¸€ä¸ªæ–°çš„ subpath, å¹¶ä¸”æ›´æ–°æ–°çš„èµ·ç‚¹
+                    // åœ¨ closePath çš„æ—¶å€™ä½¿ç”¨
+                    x0 = data[i++];
+                    y0 = data[i++];
+                    xi = x0;
+                    yi = y0;
+                    min2[0] = x0;
+                    min2[1] = y0;
+                    max2[0] = x0;
+                    max2[1] = y0;
+                    break;
+                case CMD.L:
+                    fromLine(xi, yi, data[i], data[i + 1], min2, max2);
+                    xi = data[i++];
+                    yi = data[i++];
+                    break;
+                case CMD.C:
+                    fromCubic(
+                        xi, yi, data[i++], data[i++], data[i++], data[i++], data[i], data[i + 1],
+                        min2, max2
+                    );
+                    xi = data[i++];
+                    yi = data[i++];
+                    break;
+                case CMD.Q:
+                    fromQuadratic(
+                        xi, yi, data[i++], data[i++], data[i], data[i + 1],
+                        min2, max2
+                    );
+                    xi = data[i++];
+                    yi = data[i++];
+                    break;
+                case CMD.A:
+                    // TODO Arc åˆ¤æ–çš„å¼€é”€æ¯”è¾ƒå¤§
+                    var cx = data[i++];
+                    var cy = data[i++];
+                    var rx = data[i++];
+                    var ry = data[i++];
+                    var startAngle = data[i++];
+                    var endAngle = data[i++] + startAngle;
+                    // TODO Arc æ—‹è½¬
+                    var psi = data[i++];
+                    var anticlockwise = 1 - data[i++];
+
+                    if (i == 1) {
+                        // ç›´æŽ¥ä½¿ç”¨ arc å‘½ä»¤
+                        // ç¬¬ä¸€ä¸ªå‘½ä»¤èµ·ç‚¹è¿˜æœªå®šä¹‰
+                        x0 = mathCos$1(startAngle) * rx + cx;
+                        y0 = mathSin$1(startAngle) * ry + cy;
+                    }
+
+                    fromArc(
+                        cx, cy, rx, ry, startAngle, endAngle,
+                        anticlockwise, min2, max2
+                    );
+
+                    xi = mathCos$1(endAngle) * rx + cx;
+                    yi = mathSin$1(endAngle) * ry + cy;
+                    break;
+                case CMD.R:
+                    x0 = xi = data[i++];
+                    y0 = yi = data[i++];
+                    var width = data[i++];
+                    var height = data[i++];
+                    // Use fromLine
+                    fromLine(x0, y0, x0 + width, y0 + height, min2, max2);
+                    break;
+                case CMD.Z:
+                    xi = x0;
+                    yi = y0;
+                    break;
+            }
+
+            // Union
+            min(min$1, min$1, min2);
+            max(max$1, max$1, max2);
+        }
+
+        // No data
+        if (i === 0) {
+            min$1[0] = min$1[1] = max$1[0] = max$1[1] = 0;
+        }
+
+        return new BoundingRect(
+            min$1[0], min$1[1], max$1[0] - min$1[0], max$1[1] - min$1[1]
+        );
+    },
+
+    /**
+     * Rebuild path from current data
+     * Rebuild path will not consider javascript implemented line dash.
+     * @param {CanvasRenderingContext2D} ctx
+     */
+    rebuildPath: function (ctx) {
+        var d = this.data;
+        var x0, y0;
+        var xi, yi;
+        var x, y;
+        var ux = this._ux;
+        var uy = this._uy;
+        var len$$1 = this._len;
+        for (var i = 0; i < len$$1;) {
+            var cmd = d[i++];
+
+            if (i == 1) {
+                // å¦‚æžœç¬¬ä¸€ä¸ªå‘½ä»¤æ˜¯ L, C, Q
+                // åˆ™ previous point åŒç»˜åˆ¶å‘½ä»¤çš„ç¬¬ä¸€ä¸ª point
+                //
+                // ç¬¬ä¸€ä¸ªå‘½ä»¤ä¸º Arc çš„æƒ…å†µä¸‹ä¼šåœ¨åŽé¢ç‰¹æ®Šå¤„ç†
+                xi = d[i];
+                yi = d[i + 1];
+
+                x0 = xi;
+                y0 = yi;
+            }
+            switch (cmd) {
+                case CMD.M:
+                    x0 = xi = d[i++];
+                    y0 = yi = d[i++];
+                    ctx.moveTo(xi, yi);
+                    break;
+                case CMD.L:
+                    x = d[i++];
+                    y = d[i++];
+                    // Not draw too small seg between
+                    if (mathAbs(x - xi) > ux || mathAbs(y - yi) > uy || i === len$$1 - 1) {
+                        ctx.lineTo(x, y);
+                        xi = x;
+                        yi = y;
+                    }
+                    break;
+                case CMD.C:
+                    ctx.bezierCurveTo(
+                        d[i++], d[i++], d[i++], d[i++], d[i++], d[i++]
+                    );
+                    xi = d[i - 2];
+                    yi = d[i - 1];
+                    break;
+                case CMD.Q:
+                    ctx.quadraticCurveTo(d[i++], d[i++], d[i++], d[i++]);
+                    xi = d[i - 2];
+                    yi = d[i - 1];
+                    break;
+                case CMD.A:
+                    var cx = d[i++];
+                    var cy = d[i++];
+                    var rx = d[i++];
+                    var ry = d[i++];
+                    var theta = d[i++];
+                    var dTheta = d[i++];
+                    var psi = d[i++];
+                    var fs = d[i++];
+                    var r = (rx > ry) ? rx : ry;
+                    var scaleX = (rx > ry) ? 1 : rx / ry;
+                    var scaleY = (rx > ry) ? ry / rx : 1;
+                    var isEllipse = Math.abs(rx - ry) > 1e-3;
+                    var endAngle = theta + dTheta;
+                    if (isEllipse) {
+                        ctx.translate(cx, cy);
+                        ctx.rotate(psi);
+                        ctx.scale(scaleX, scaleY);
+                        ctx.arc(0, 0, r, theta, endAngle, 1 - fs);
+                        ctx.scale(1 / scaleX, 1 / scaleY);
+                        ctx.rotate(-psi);
+                        ctx.translate(-cx, -cy);
+                    }
+                    else {
+                        ctx.arc(cx, cy, r, theta, endAngle, 1 - fs);
+                    }
+
+                    if (i == 1) {
+                        // ç›´æŽ¥ä½¿ç”¨ arc å‘½ä»¤
+                        // ç¬¬ä¸€ä¸ªå‘½ä»¤èµ·ç‚¹è¿˜æœªå®šä¹‰
+                        x0 = mathCos$1(theta) * rx + cx;
+                        y0 = mathSin$1(theta) * ry + cy;
+                    }
+                    xi = mathCos$1(endAngle) * rx + cx;
+                    yi = mathSin$1(endAngle) * ry + cy;
+                    break;
+                case CMD.R:
+                    x0 = xi = d[i];
+                    y0 = yi = d[i + 1];
+                    ctx.rect(d[i++], d[i++], d[i++], d[i++]);
+                    break;
+                case CMD.Z:
+                    ctx.closePath();
+                    xi = x0;
+                    yi = y0;
+            }
+        }
+    }
+};
+
+PathProxy.CMD = CMD;
+
+/**
+ * çº¿æ®µåŒ…å«åˆ¤æ–
+ * @param  {number}  x0
+ * @param  {number}  y0
+ * @param  {number}  x1
+ * @param  {number}  y1
+ * @param  {number}  lineWidth
+ * @param  {number}  x
+ * @param  {number}  y
+ * @return {boolean}
+ */
+function containStroke$1(x0, y0, x1, y1, lineWidth, x, y) {
+    if (lineWidth === 0) {
+        return false;
+    }
+    var _l = lineWidth;
+    var _a = 0;
+    var _b = x0;
+    // Quick reject
+    if (
+        (y > y0 + _l && y > y1 + _l)
+        || (y < y0 - _l && y < y1 - _l)
+        || (x > x0 + _l && x > x1 + _l)
+        || (x < x0 - _l && x < x1 - _l)
+    ) {
+        return false;
+    }
+
+    if (x0 !== x1) {
+        _a = (y0 - y1) / (x0 - x1);
+        _b = (x0 * y1 - x1 * y0) / (x0 - x1) ;
+    }
+    else {
+        return Math.abs(x - x0) <= _l / 2;
+    }
+    var tmp = _a * x - y + _b;
+    var _s = tmp * tmp / (_a * _a + 1);
+    return _s <= _l / 2 * _l / 2;
+}
+
+/**
+ * ä¸‰æ¬¡è´å¡žå°”æ›²çº¿æè¾¹åŒ…å«åˆ¤æ–
+ * @param  {number}  x0
+ * @param  {number}  y0
+ * @param  {number}  x1
+ * @param  {number}  y1
+ * @param  {number}  x2
+ * @param  {number}  y2
+ * @param  {number}  x3
+ * @param  {number}  y3
+ * @param  {number}  lineWidth
+ * @param  {number}  x
+ * @param  {number}  y
+ * @return {boolean}
+ */
+function containStroke$2(x0, y0, x1, y1, x2, y2, x3, y3, lineWidth, x, y) {
+    if (lineWidth === 0) {
+        return false;
+    }
+    var _l = lineWidth;
+    // Quick reject
+    if (
+        (y > y0 + _l && y > y1 + _l && y > y2 + _l && y > y3 + _l)
+        || (y < y0 - _l && y < y1 - _l && y < y2 - _l && y < y3 - _l)
+        || (x > x0 + _l && x > x1 + _l && x > x2 + _l && x > x3 + _l)
+        || (x < x0 - _l && x < x1 - _l && x < x2 - _l && x < x3 - _l)
+    ) {
+        return false;
+    }
+    var d = cubicProjectPoint(
+        x0, y0, x1, y1, x2, y2, x3, y3,
+        x, y, null
+    );
+    return d <= _l / 2;
+}
+
+/**
+ * äºŒæ¬¡è´å¡žå°”æ›²çº¿æè¾¹åŒ…å«åˆ¤æ–
+ * @param  {number}  x0
+ * @param  {number}  y0
+ * @param  {number}  x1
+ * @param  {number}  y1
+ * @param  {number}  x2
+ * @param  {number}  y2
+ * @param  {number}  lineWidth
+ * @param  {number}  x
+ * @param  {number}  y
+ * @return {boolean}
+ */
+function containStroke$3(x0, y0, x1, y1, x2, y2, lineWidth, x, y) {
+    if (lineWidth === 0) {
+        return false;
+    }
+    var _l = lineWidth;
+    // Quick reject
+    if (
+        (y > y0 + _l && y > y1 + _l && y > y2 + _l)
+        || (y < y0 - _l && y < y1 - _l && y < y2 - _l)
+        || (x > x0 + _l && x > x1 + _l && x > x2 + _l)
+        || (x < x0 - _l && x < x1 - _l && x < x2 - _l)
+    ) {
+        return false;
+    }
+    var d = quadraticProjectPoint(
+        x0, y0, x1, y1, x2, y2,
+        x, y, null
+    );
+    return d <= _l / 2;
+}
+
+var PI2$3 = Math.PI * 2;
+
+function normalizeRadian(angle) {
+    angle %= PI2$3;
+    if (angle < 0) {
+        angle += PI2$3;
+    }
+    return angle;
+}
+
+var PI2$2 = Math.PI * 2;
+
+/**
+ * åœ†å¼§æè¾¹åŒ…å«åˆ¤æ–
+ * @param  {number}  cx
+ * @param  {number}  cy
+ * @param  {number}  r
+ * @param  {number}  startAngle
+ * @param  {number}  endAngle
+ * @param  {boolean}  anticlockwise
+ * @param  {number} lineWidth
+ * @param  {number}  x
+ * @param  {number}  y
+ * @return {Boolean}
+ */
+function containStroke$4(
+    cx, cy, r, startAngle, endAngle, anticlockwise,
+    lineWidth, x, y
+) {
+
+    if (lineWidth === 0) {
+        return false;
+    }
+    var _l = lineWidth;
+
+    x -= cx;
+    y -= cy;
+    var d = Math.sqrt(x * x + y * y);
+
+    if ((d - _l > r) || (d + _l < r)) {
+        return false;
+    }
+    if (Math.abs(startAngle - endAngle) % PI2$2 < 1e-4) {
+        // Is a circle
+        return true;
+    }
+    if (anticlockwise) {
+        var tmp = startAngle;
+        startAngle = normalizeRadian(endAngle);
+        endAngle = normalizeRadian(tmp);
+    } else {
+        startAngle = normalizeRadian(startAngle);
+        endAngle = normalizeRadian(endAngle);
+    }
+    if (startAngle > endAngle) {
+        endAngle += PI2$2;
+    }
+
+    var angle = Math.atan2(y, x);
+    if (angle < 0) {
+        angle += PI2$2;
+    }
+    return (angle >= startAngle && angle <= endAngle)
+        || (angle + PI2$2 >= startAngle && angle + PI2$2 <= endAngle);
+}
+
+function windingLine(x0, y0, x1, y1, x, y) {
+    if ((y > y0 && y > y1) || (y < y0 && y < y1)) {
+        return 0;
+    }
+    // Ignore horizontal line
+    if (y1 === y0) {
+        return 0;
+    }
+    var dir = y1 < y0 ? 1 : -1;
+    var t = (y - y0) / (y1 - y0);
+
+    // Avoid winding error when intersection point is the connect point of two line of polygon
+    if (t === 1 || t === 0) {
+        dir = y1 < y0 ? 0.5 : -0.5;
+    }
+
+    var x_ = t * (x1 - x0) + x0;
+
+    // If (x, y) on the line, considered as "contain".
+    return x_ === x ? Infinity : x_ > x ? dir : 0;
+}
+
+var CMD$1 = PathProxy.CMD;
+var PI2$1 = Math.PI * 2;
+
+var EPSILON$2 = 1e-4;
+
+function isAroundEqual(a, b) {
+    return Math.abs(a - b) < EPSILON$2;
+}
+
+// ä¸´æ—¶æ•°ç»„
+var roots = [-1, -1, -1];
+var extrema = [-1, -1];
+
+function swapExtrema() {
+    var tmp = extrema[0];
+    extrema[0] = extrema[1];
+    extrema[1] = tmp;
+}
+
+function windingCubic(x0, y0, x1, y1, x2, y2, x3, y3, x, y) {
+    // Quick reject
+    if (
+        (y > y0 && y > y1 && y > y2 && y > y3)
+        || (y < y0 && y < y1 && y < y2 && y < y3)
+    ) {
+        return 0;
+    }
+    var nRoots = cubicRootAt(y0, y1, y2, y3, y, roots);
+    if (nRoots === 0) {
+        return 0;
+    }
+    else {
+        var w = 0;
+        var nExtrema = -1;
+        var y0_, y1_;
+        for (var i = 0; i < nRoots; i++) {
+            var t = roots[i];
+
+            // Avoid winding error when intersection point is the connect point of two line of polygon
+            var unit = (t === 0 || t === 1) ? 0.5 : 1;
+
+            var x_ = cubicAt(x0, x1, x2, x3, t);
+            if (x_ < x) { // Quick reject
+                continue;
+            }
+            if (nExtrema < 0) {
+                nExtrema = cubicExtrema(y0, y1, y2, y3, extrema);
+                if (extrema[1] < extrema[0] && nExtrema > 1) {
+                    swapExtrema();
+                }
+                y0_ = cubicAt(y0, y1, y2, y3, extrema[0]);
+                if (nExtrema > 1) {
+                    y1_ = cubicAt(y0, y1, y2, y3, extrema[1]);
+                }
+            }
+            if (nExtrema == 2) {
+                // åˆ†æˆä¸‰æ®µå•è°ƒå‡½æ•°
+                if (t < extrema[0]) {
+                    w += y0_ < y0 ? unit : -unit;
+                }
+                else if (t < extrema[1]) {
+                    w += y1_ < y0_ ? unit : -unit;
+                }
+                else {
+                    w += y3 < y1_ ? unit : -unit;
+                }
+            }
+            else {
+                // åˆ†æˆä¸¤æ®µå•è°ƒå‡½æ•°
+                if (t < extrema[0]) {
+                    w += y0_ < y0 ? unit : -unit;
+                }
+                else {
+                    w += y3 < y0_ ? unit : -unit;
+                }
+            }
+        }
+        return w;
+    }
+}
+
+function windingQuadratic(x0, y0, x1, y1, x2, y2, x, y) {
+    // Quick reject
+    if (
+        (y > y0 && y > y1 && y > y2)
+        || (y < y0 && y < y1 && y < y2)
+    ) {
+        return 0;
+    }
+    var nRoots = quadraticRootAt(y0, y1, y2, y, roots);
+    if (nRoots === 0) {
+        return 0;
+    }
+    else {
+        var t = quadraticExtremum(y0, y1, y2);
+        if (t >= 0 && t <= 1) {
+            var w = 0;
+            var y_ = quadraticAt(y0, y1, y2, t);
+            for (var i = 0; i < nRoots; i++) {
+                // Remove one endpoint.
+                var unit = (roots[i] === 0 || roots[i] === 1) ? 0.5 : 1;
+
+                var x_ = quadraticAt(x0, x1, x2, roots[i]);
+                if (x_ < x) {   // Quick reject
+                    continue;
+                }
+                if (roots[i] < t) {
+                    w += y_ < y0 ? unit : -unit;
+                }
+                else {
+                    w += y2 < y_ ? unit : -unit;
+                }
+            }
+            return w;
+        }
+        else {
+            // Remove one endpoint.
+            var unit = (roots[0] === 0 || roots[0] === 1) ? 0.5 : 1;
+
+            var x_ = quadraticAt(x0, x1, x2, roots[0]);
+            if (x_ < x) {   // Quick reject
+                return 0;
+            }
+            return y2 < y0 ? unit : -unit;
+        }
+    }
+}
+
+// TODO
+// Arc æ—‹è½¬
+function windingArc(
+    cx, cy, r, startAngle, endAngle, anticlockwise, x, y
+) {
+    y -= cy;
+    if (y > r || y < -r) {
+        return 0;
+    }
+    var tmp = Math.sqrt(r * r - y * y);
+    roots[0] = -tmp;
+    roots[1] = tmp;
+
+    var diff = Math.abs(startAngle - endAngle);
+    if (diff < 1e-4) {
+        return 0;
+    }
+    if (diff % PI2$1 < 1e-4) {
+        // Is a circle
+        startAngle = 0;
+        endAngle = PI2$1;
+        var dir = anticlockwise ? 1 : -1;
+        if (x >= roots[0] + cx && x <= roots[1] + cx) {
+            return dir;
+        } else {
+            return 0;
+        }
+    }
+
+    if (anticlockwise) {
+        var tmp = startAngle;
+        startAngle = normalizeRadian(endAngle);
+        endAngle = normalizeRadian(tmp);
+    }
+    else {
+        startAngle = normalizeRadian(startAngle);
+        endAngle = normalizeRadian(endAngle);
+    }
+    if (startAngle > endAngle) {
+        endAngle += PI2$1;
+    }
+
+    var w = 0;
+    for (var i = 0; i < 2; i++) {
+        var x_ = roots[i];
+        if (x_ + cx > x) {
+            var angle = Math.atan2(y, x_);
+            var dir = anticlockwise ? 1 : -1;
+            if (angle < 0) {
+                angle = PI2$1 + angle;
+            }
+            if (
+                (angle >= startAngle && angle <= endAngle)
+                || (angle + PI2$1 >= startAngle && angle + PI2$1 <= endAngle)
+            ) {
+                if (angle > Math.PI / 2 && angle < Math.PI * 1.5) {
+                    dir = -dir;
+                }
+                w += dir;
+            }
+        }
+    }
+    return w;
+}
+
+function containPath(data, lineWidth, isStroke, x, y) {
+    var w = 0;
+    var xi = 0;
+    var yi = 0;
+    var x0 = 0;
+    var y0 = 0;
+
+    for (var i = 0; i < data.length;) {
+        var cmd = data[i++];
+        // Begin a new subpath
+        if (cmd === CMD$1.M && i > 1) {
+            // Close previous subpath
+            if (!isStroke) {
+                w += windingLine(xi, yi, x0, y0, x, y);
+            }
+            // å¦‚æžœè¢«ä»»ä½•ä¸€ä¸ª subpath åŒ…å«
+            // if (w !== 0) {
+            //     return true;
+            // }
+        }
+
+        if (i == 1) {
+            // å¦‚æžœç¬¬ä¸€ä¸ªå‘½ä»¤æ˜¯ L, C, Q
+            // åˆ™ previous point åŒç»˜åˆ¶å‘½ä»¤çš„ç¬¬ä¸€ä¸ª point
+            //
+            // ç¬¬ä¸€ä¸ªå‘½ä»¤ä¸º Arc çš„æƒ…å†µä¸‹ä¼šåœ¨åŽé¢ç‰¹æ®Šå¤„ç†
+            xi = data[i];
+            yi = data[i + 1];
+
+            x0 = xi;
+            y0 = yi;
+        }
+
+        switch (cmd) {
+            case CMD$1.M:
+                // moveTo å‘½ä»¤é‡æ–°åˆ›å»ºä¸€ä¸ªæ–°çš„ subpath, å¹¶ä¸”æ›´æ–°æ–°çš„èµ·ç‚¹
+                // åœ¨ closePath çš„æ—¶å€™ä½¿ç”¨
+                x0 = data[i++];
+                y0 = data[i++];
+                xi = x0;
+                yi = y0;
+                break;
+            case CMD$1.L:
+                if (isStroke) {
+                    if (containStroke$1(xi, yi, data[i], data[i + 1], lineWidth, x, y)) {
+                        return true;
+                    }
+                }
+                else {
+                    // NOTE åœ¨ç¬¬ä¸€ä¸ªå‘½ä»¤ä¸º L, C, Q çš„æ—¶å€™ä¼šè®¡ç®—å‡º NaN
+                    w += windingLine(xi, yi, data[i], data[i + 1], x, y) || 0;
+                }
+                xi = data[i++];
+                yi = data[i++];
+                break;
+            case CMD$1.C:
+                if (isStroke) {
+                    if (containStroke$2(xi, yi,
+                        data[i++], data[i++], data[i++], data[i++], data[i], data[i + 1],
+                        lineWidth, x, y
+                    )) {
+                        return true;
+                    }
+                }
+                else {
+                    w += windingCubic(
+                        xi, yi,
+                        data[i++], data[i++], data[i++], data[i++], data[i], data[i + 1],
+                        x, y
+                    ) || 0;
+                }
+                xi = data[i++];
+                yi = data[i++];
+                break;
+            case CMD$1.Q:
+                if (isStroke) {
+                    if (containStroke$3(xi, yi,
+                        data[i++], data[i++], data[i], data[i + 1],
+                        lineWidth, x, y
+                    )) {
+                        return true;
+                    }
+                }
+                else {
+                    w += windingQuadratic(
+                        xi, yi,
+                        data[i++], data[i++], data[i], data[i + 1],
+                        x, y
+                    ) || 0;
+                }
+                xi = data[i++];
+                yi = data[i++];
+                break;
+            case CMD$1.A:
+                // TODO Arc åˆ¤æ–çš„å¼€é”€æ¯”è¾ƒå¤§
+                var cx = data[i++];
+                var cy = data[i++];
+                var rx = data[i++];
+                var ry = data[i++];
+                var theta = data[i++];
+                var dTheta = data[i++];
+                // TODO Arc æ—‹è½¬
+                var psi = data[i++];
+                var anticlockwise = 1 - data[i++];
+                var x1 = Math.cos(theta) * rx + cx;
+                var y1 = Math.sin(theta) * ry + cy;
+                // ä¸æ˜¯ç›´æŽ¥ä½¿ç”¨ arc å‘½ä»¤
+                if (i > 1) {
+                    w += windingLine(xi, yi, x1, y1, x, y);
+                }
+                else {
+                    // ç¬¬ä¸€ä¸ªå‘½ä»¤èµ·ç‚¹è¿˜æœªå®šä¹‰
+                    x0 = x1;
+                    y0 = y1;
+                }
+                // zr ä½¿ç”¨scaleæ¥æ¨¡æ‹Ÿæ¤åœ†, è¿™é‡Œä¹Ÿå¯¹xåšä¸€å®šçš„ç¼©æ”¾
+                var _x = (x - cx) * ry / rx + cx;
+                if (isStroke) {
+                    if (containStroke$4(
+                        cx, cy, ry, theta, theta + dTheta, anticlockwise,
+                        lineWidth, _x, y
+                    )) {
+                        return true;
+                    }
+                }
+                else {
+                    w += windingArc(
+                        cx, cy, ry, theta, theta + dTheta, anticlockwise,
+                        _x, y
+                    );
+                }
+                xi = Math.cos(theta + dTheta) * rx + cx;
+                yi = Math.sin(theta + dTheta) * ry + cy;
+                break;
+            case CMD$1.R:
+                x0 = xi = data[i++];
+                y0 = yi = data[i++];
+                var width = data[i++];
+                var height = data[i++];
+                var x1 = x0 + width;
+                var y1 = y0 + height;
+                if (isStroke) {
+                    if (containStroke$1(x0, y0, x1, y0, lineWidth, x, y)
+                        || containStroke$1(x1, y0, x1, y1, lineWidth, x, y)
+                        || containStroke$1(x1, y1, x0, y1, lineWidth, x, y)
+                        || containStroke$1(x0, y1, x0, y0, lineWidth, x, y)
+                    ) {
+                        return true;
+                    }
+                }
+                else {
+                    // FIXME Clockwise ?
+                    w += windingLine(x1, y0, x1, y1, x, y);
+                    w += windingLine(x0, y1, x0, y0, x, y);
+                }
+                break;
+            case CMD$1.Z:
+                if (isStroke) {
+                    if (containStroke$1(
+                        xi, yi, x0, y0, lineWidth, x, y
+                    )) {
+                        return true;
+                    }
+                }
+                else {
+                    // Close a subpath
+                    w += windingLine(xi, yi, x0, y0, x, y);
+                    // å¦‚æžœè¢«ä»»ä½•ä¸€ä¸ª subpath åŒ…å«
+                    // FIXME subpaths may overlap
+                    // if (w !== 0) {
+                    //     return true;
+                    // }
+                }
+                xi = x0;
+                yi = y0;
+                break;
+        }
+    }
+    if (!isStroke && !isAroundEqual(yi, y0)) {
+        w += windingLine(xi, yi, x0, y0, x, y) || 0;
+    }
+    return w !== 0;
+}
+
+function contain(pathData, x, y) {
+    return containPath(pathData, 0, false, x, y);
+}
+
+function containStroke(pathData, lineWidth, x, y) {
+    return containPath(pathData, lineWidth, true, x, y);
+}
+
+var getCanvasPattern = Pattern.prototype.getCanvasPattern;
+
+var abs = Math.abs;
+
+var pathProxyForDraw = new PathProxy(true);
+/**
+ * @alias module:zrender/graphic/Path
+ * @extends module:zrender/graphic/Displayable
+ * @constructor
+ * @param {Object} opts
+ */
+function Path(opts) {
+    Displayable.call(this, opts);
+
+    /**
+     * @type {module:zrender/core/PathProxy}
+     * @readOnly
+     */
+    this.path = null;
+}
+
+Path.prototype = {
+
+    constructor: Path,
+
+    type: 'path',
+
+    __dirtyPath: true,
+
+    strokeContainThreshold: 5,
+
+    brush: function (ctx, prevEl) {
+        var style = this.style;
+        var path = this.path || pathProxyForDraw;
+        var hasStroke = style.hasStroke();
+        var hasFill = style.hasFill();
+        var fill = style.fill;
+        var stroke = style.stroke;
+        var hasFillGradient = hasFill && !!(fill.colorStops);
+        var hasStrokeGradient = hasStroke && !!(stroke.colorStops);
+        var hasFillPattern = hasFill && !!(fill.image);
+        var hasStrokePattern = hasStroke && !!(stroke.image);
+
+        style.bind(ctx, this, prevEl);
+        this.setTransform(ctx);
+
+        if (this.__dirty) {
+            var rect;
+            // Update gradient because bounding rect may changed
+            if (hasFillGradient) {
+                rect = rect || this.getBoundingRect();
+                this._fillGradient = style.getGradient(ctx, fill, rect);
+            }
+            if (hasStrokeGradient) {
+                rect = rect || this.getBoundingRect();
+                this._strokeGradient = style.getGradient(ctx, stroke, rect);
+            }
+        }
+        // Use the gradient or pattern
+        if (hasFillGradient) {
+            // PENDING If may have affect the state
+            ctx.fillStyle = this._fillGradient;
+        }
+        else if (hasFillPattern) {
+            ctx.fillStyle = getCanvasPattern.call(fill, ctx);
+        }
+        if (hasStrokeGradient) {
+            ctx.strokeStyle = this._strokeGradient;
+        }
+        else if (hasStrokePattern) {
+            ctx.strokeStyle = getCanvasPattern.call(stroke, ctx);
+        }
+
+        var lineDash = style.lineDash;
+        var lineDashOffset = style.lineDashOffset;
+
+        var ctxLineDash = !!ctx.setLineDash;
+
+        // Update path sx, sy
+        var scale = this.getGlobalScale();
+        path.setScale(scale[0], scale[1]);
+
+        // Proxy context
+        // Rebuild path in following 2 cases
+        // 1. Path is dirty
+        // 2. Path needs javascript implemented lineDash stroking.
+        //    In this case, lineDash information will not be saved in PathProxy
+        if (this.__dirtyPath
+            || (lineDash && !ctxLineDash && hasStroke)
+        ) {
+            path.beginPath(ctx);
+
+            // Setting line dash before build path
+            if (lineDash && !ctxLineDash) {
+                path.setLineDash(lineDash);
+                path.setLineDashOffset(lineDashOffset);
+            }
+
+            this.buildPath(path, this.shape, false);
+
+            // Clear path dirty flag
+            if (this.path) {
+                this.__dirtyPath = false;
+            }
+        }
+        else {
+            // Replay path building
+            ctx.beginPath();
+            this.path.rebuildPath(ctx);
+        }
+
+        hasFill && path.fill(ctx);
+
+        if (lineDash && ctxLineDash) {
+            ctx.setLineDash(lineDash);
+            ctx.lineDashOffset = lineDashOffset;
+        }
+
+        hasStroke && path.stroke(ctx);
+
+        if (lineDash && ctxLineDash) {
+            // PENDING
+            // Remove lineDash
+            ctx.setLineDash([]);
+        }
+
+        // Draw rect text
+        if (style.text != null) {
+            // Only restore transform when needs draw text.
+            this.restoreTransform(ctx);    
+            this.drawRectText(ctx, this.getBoundingRect());
+        }
+    },
+
+    // When bundling path, some shape may decide if use moveTo to begin a new subpath or closePath
+    // Like in circle
+    buildPath: function (ctx, shapeCfg, inBundle) {},
+
+    createPathProxy: function () {
+        this.path = new PathProxy();
+    },
+
+    getBoundingRect: function () {
+        var rect = this._rect;
+        var style = this.style;
+        var needsUpdateRect = !rect;
+        if (needsUpdateRect) {
+            var path = this.path;
+            if (!path) {
+                // Create path on demand.
+                path = this.path = new PathProxy();
+            }
+            if (this.__dirtyPath) {
+                path.beginPath();
+                this.buildPath(path, this.shape, false);
+            }
+            rect = path.getBoundingRect();
+        }
+        this._rect = rect;
+
+        if (style.hasStroke()) {
+            // Needs update rect with stroke lineWidth when
+            // 1. Element changes scale or lineWidth
+            // 2. Shape is changed
+            var rectWithStroke = this._rectWithStroke || (this._rectWithStroke = rect.clone());
+            if (this.__dirty || needsUpdateRect) {
+                rectWithStroke.copy(rect);
+                // FIXME Must after updateTransform
+                var w = style.lineWidth;
+                // PENDING, Min line width is needed when line is horizontal or vertical
+                var lineScale = style.strokeNoScale ? this.getLineScale() : 1;
+
+                // Only add extra hover lineWidth when there are no fill
+                if (!style.hasFill()) {
+                    w = Math.max(w, this.strokeContainThreshold || 4);
+                }
+                // Consider line width
+                // Line scale can't be 0;
+                if (lineScale > 1e-10) {
+                    rectWithStroke.width += w / lineScale;
+                    rectWithStroke.height += w / lineScale;
+                    rectWithStroke.x -= w / lineScale / 2;
+                    rectWithStroke.y -= w / lineScale / 2;
+                }
+            }
+
+            // Return rect with stroke
+            return rectWithStroke;
+        }
+
+        return rect;
+    },
+
+    contain: function (x, y) {
+        var localPos = this.transformCoordToLocal(x, y);
+        var rect = this.getBoundingRect();
+        var style = this.style;
+        x = localPos[0];
+        y = localPos[1];
+
+        if (rect.contain(x, y)) {
+            var pathData = this.path.data;
+            if (style.hasStroke()) {
+                var lineWidth = style.lineWidth;
+                var lineScale = style.strokeNoScale ? this.getLineScale() : 1;
+                // Line scale can't be 0;
+                if (lineScale > 1e-10) {
+                    // Only add extra hover lineWidth when there are no fill
+                    if (!style.hasFill()) {
+                        lineWidth = Math.max(lineWidth, this.strokeContainThreshold);
+                    }
+                    if (containStroke(
+                        pathData, lineWidth / lineScale, x, y
+                    )) {
+                        return true;
+                    }
+                }
+            }
+            if (style.hasFill()) {
+                return contain(pathData, x, y);
+            }
+        }
+        return false;
+    },
+
+    /**
+     * @param  {boolean} dirtyPath
+     */
+    dirty: function (dirtyPath) {
+        if (dirtyPath == null) {
+            dirtyPath = true;
+        }
+        // Only mark dirty, not mark clean
+        if (dirtyPath) {
+            this.__dirtyPath = dirtyPath;
+            this._rect = null;
+        }
+
+        this.__dirty = true;
+
+        this.__zr && this.__zr.refresh();
+
+        // Used as a clipping path
+        if (this.__clipTarget) {
+            this.__clipTarget.dirty();
+        }
+    },
+
+    /**
+     * Alias for animate('shape')
+     * @param {boolean} loop
+     */
+    animateShape: function (loop) {
+        return this.animate('shape', loop);
+    },
+
+    // Overwrite attrKV
+    attrKV: function (key, value) {
+        // FIXME
+        if (key === 'shape') {
+            this.setShape(value);
+            this.__dirtyPath = true;
+            this._rect = null;
+        }
+        else {
+            Displayable.prototype.attrKV.call(this, key, value);
+        }
+    },
+
+    /**
+     * @param {Object|string} key
+     * @param {*} value
+     */
+    setShape: function (key, value) {
+        var shape = this.shape;
+        // Path from string may not have shape
+        if (shape) {
+            if (isObject$1(key)) {
+                for (var name in key) {
+                    if (key.hasOwnProperty(name)) {
+                        shape[name] = key[name];
+                    }
+                }
+            }
+            else {
+                shape[key] = value;
+            }
+            this.dirty(true);
+        }
+        return this;
+    },
+
+    getLineScale: function () {
+        var m = this.transform;
+        // Get the line scale.
+        // Determinant of `m` means how much the area is enlarged by the
+        // transformation. So its square root can be used as a scale factor
+        // for width.
+        return m && abs(m[0] - 1) > 1e-10 && abs(m[3] - 1) > 1e-10
+            ? Math.sqrt(abs(m[0] * m[3] - m[2] * m[1]))
+            : 1;
+    }
+};
+
+/**
+ * æ‰©å±•ä¸€ä¸ª Path element, æ¯”å¦‚æ˜Ÿå½¢ï¼Œåœ†ç‰ã€‚
+ * Extend a path element
+ * @param {Object} props
+ * @param {string} props.type Path type
+ * @param {Function} props.init Initialize
+ * @param {Function} props.buildPath Overwrite buildPath method
+ * @param {Object} [props.style] Extended default style config
+ * @param {Object} [props.shape] Extended default shape config
+ */
+Path.extend = function (defaults$$1) {
+    var Sub = function (opts) {
+        Path.call(this, opts);
+
+        if (defaults$$1.style) {
+            // Extend default style
+            this.style.extendFrom(defaults$$1.style, false);
+        }
+
+        // Extend default shape
+        var defaultShape = defaults$$1.shape;
+        if (defaultShape) {
+            this.shape = this.shape || {};
+            var thisShape = this.shape;
+            for (var name in defaultShape) {
+                if (
+                    ! thisShape.hasOwnProperty(name)
+                    && defaultShape.hasOwnProperty(name)
+                ) {
+                    thisShape[name] = defaultShape[name];
+                }
+            }
+        }
+
+        defaults$$1.init && defaults$$1.init.call(this, opts);
+    };
+
+    inherits(Sub, Path);
+
+    // FIXME ä¸èƒ½ extend position, rotation ç‰å¼•ç”¨å¯¹è±¡
+    for (var name in defaults$$1) {
+        // Extending prototype values and methods
+        if (name !== 'style' && name !== 'shape') {
+            Sub.prototype[name] = defaults$$1[name];
+        }
+    }
+
+    return Sub;
+};
+
+inherits(Path, Displayable);
+
+var CMD$2 = PathProxy.CMD;
+
+var points = [[], [], []];
+var mathSqrt$3 = Math.sqrt;
+var mathAtan2 = Math.atan2;
+
+var transformPath = function (path, m) {
+    var data = path.data;
+    var cmd;
+    var nPoint;
+    var i;
+    var j;
+    var k;
+    var p;
+
+    var M = CMD$2.M;
+    var C = CMD$2.C;
+    var L = CMD$2.L;
+    var R = CMD$2.R;
+    var A = CMD$2.A;
+    var Q = CMD$2.Q;
+
+    for (i = 0, j = 0; i < data.length;) {
+        cmd = data[i++];
+        j = i;
+        nPoint = 0;
+
+        switch (cmd) {
+            case M:
+                nPoint = 1;
+                break;
+            case L:
+                nPoint = 1;
+                break;
+            case C:
+                nPoint = 3;
+                break;
+            case Q:
+                nPoint = 2;
+                break;
+            case A:
+                var x = m[4];
+                var y = m[5];
+                var sx = mathSqrt$3(m[0] * m[0] + m[1] * m[1]);
+                var sy = mathSqrt$3(m[2] * m[2] + m[3] * m[3]);
+                var angle = mathAtan2(-m[1] / sy, m[0] / sx);
+                // cx
+                data[i] *= sx;
+                data[i++] += x;
+                // cy
+                data[i] *= sy;
+                data[i++] += y;
+                // Scale rx and ry
+                // FIXME Assume psi is 0 here
+                data[i++] *= sx;
+                data[i++] *= sy;
+
+                // Start angle
+                data[i++] += angle;
+                // end angle
+                data[i++] += angle;
+                // FIXME psi
+                i += 2;
+                j = i;
+                break;
+            case R:
+                // x0, y0
+                p[0] = data[i++];
+                p[1] = data[i++];
+                applyTransform(p, p, m);
+                data[j++] = p[0];
+                data[j++] = p[1];
+                // x1, y1
+                p[0] += data[i++];
+                p[1] += data[i++];
+                applyTransform(p, p, m);
+                data[j++] = p[0];
+                data[j++] = p[1];
+        }
+
+        for (k = 0; k < nPoint; k++) {
+            var p = points[k];
+            p[0] = data[i++];
+            p[1] = data[i++];
+
+            applyTransform(p, p, m);
+            // Write back
+            data[j++] = p[0];
+            data[j++] = p[1];
+        }
+    }
+};
+
+// command chars
+var cc = [
+    'm', 'M', 'l', 'L', 'v', 'V', 'h', 'H', 'z', 'Z',
+    'c', 'C', 'q', 'Q', 't', 'T', 's', 'S', 'a', 'A'
+];
+
+var mathSqrt = Math.sqrt;
+var mathSin = Math.sin;
+var mathCos = Math.cos;
+var PI = Math.PI;
+
+var vMag = function(v) {
+    return Math.sqrt(v[0] * v[0] + v[1] * v[1]);
+};
+var vRatio = function(u, v) {
+    return (u[0] * v[0] + u[1] * v[1]) / (vMag(u) * vMag(v));
+};
+var vAngle = function(u, v) {
+    return (u[0] * v[1] < u[1] * v[0] ? -1 : 1)
+            * Math.acos(vRatio(u, v));
+};
+
+function processArc(x1, y1, x2, y2, fa, fs, rx, ry, psiDeg, cmd, path) {
+    var psi = psiDeg * (PI / 180.0);
+    var xp = mathCos(psi) * (x1 - x2) / 2.0
+                + mathSin(psi) * (y1 - y2) / 2.0;
+    var yp = -1 * mathSin(psi) * (x1 - x2) / 2.0
+                + mathCos(psi) * (y1 - y2) / 2.0;
+
+    var lambda = (xp * xp) / (rx * rx) + (yp * yp) / (ry * ry);
+
+    if (lambda > 1) {
+        rx *= mathSqrt(lambda);
+        ry *= mathSqrt(lambda);
+    }
+
+    var f = (fa === fs ? -1 : 1)
+        * mathSqrt((((rx * rx) * (ry * ry))
+                - ((rx * rx) * (yp * yp))
+                - ((ry * ry) * (xp * xp))) / ((rx * rx) * (yp * yp)
+                + (ry * ry) * (xp * xp))
+            ) || 0;
+
+    var cxp = f * rx * yp / ry;
+    var cyp = f * -ry * xp / rx;
+
+    var cx = (x1 + x2) / 2.0
+                + mathCos(psi) * cxp
+                - mathSin(psi) * cyp;
+    var cy = (y1 + y2) / 2.0
+            + mathSin(psi) * cxp
+            + mathCos(psi) * cyp;
+
+    var theta = vAngle([ 1, 0 ], [ (xp - cxp) / rx, (yp - cyp) / ry ]);
+    var u = [ (xp - cxp) / rx, (yp - cyp) / ry ];
+    var v = [ (-1 * xp - cxp) / rx, (-1 * yp - cyp) / ry ];
+    var dTheta = vAngle(u, v);
+
+    if (vRatio(u, v) <= -1) {
+        dTheta = PI;
+    }
+    if (vRatio(u, v) >= 1) {
+        dTheta = 0;
+    }
+    if (fs === 0 && dTheta > 0) {
+        dTheta = dTheta - 2 * PI;
+    }
+    if (fs === 1 && dTheta < 0) {
+        dTheta = dTheta + 2 * PI;
+    }
+
+    path.addData(cmd, cx, cy, rx, ry, theta, dTheta, psi, fs);
+}
+
+function createPathProxyFromString(data) {
+    if (!data) {
+        return [];
+    }
+
+    // command string
+    var cs = data.replace(/-/g, ' -')
+        .replace(/  /g, ' ')
+        .replace(/ /g, ',')
+        .replace(/,,/g, ',');
+
+    var n;
+    // create pipes so that we can split the data
+    for (n = 0; n < cc.length; n++) {
+        cs = cs.replace(new RegExp(cc[n], 'g'), '|' + cc[n]);
+    }
+
+    // create array
+    var arr = cs.split('|');
+    // init context point
+    var cpx = 0;
+    var cpy = 0;
+
+    var path = new PathProxy();
+    var CMD = PathProxy.CMD;
+
+    var prevCmd;
+    for (n = 1; n < arr.length; n++) {
+        var str = arr[n];
+        var c = str.charAt(0);
+        var off = 0;
+        var p = str.slice(1).replace(/e,-/g, 'e-').split(',');
+        var cmd;
+
+        if (p.length > 0 && p[0] === '') {
+            p.shift();
+        }
+
+        for (var i = 0; i < p.length; i++) {
+            p[i] = parseFloat(p[i]);
+        }
+        while (off < p.length && !isNaN(p[off])) {
+            if (isNaN(p[0])) {
+                break;
+            }
+            var ctlPtx;
+            var ctlPty;
+
+            var rx;
+            var ry;
+            var psi;
+            var fa;
+            var fs;
+
+            var x1 = cpx;
+            var y1 = cpy;
+
+            // convert l, H, h, V, and v to L
+            switch (c) {
+                case 'l':
+                    cpx += p[off++];
+                    cpy += p[off++];
+                    cmd = CMD.L;
+                    path.addData(cmd, cpx, cpy);
+                    break;
+                case 'L':
+                    cpx = p[off++];
+                    cpy = p[off++];
+                    cmd = CMD.L;
+                    path.addData(cmd, cpx, cpy);
+                    break;
+                case 'm':
+                    cpx += p[off++];
+                    cpy += p[off++];
+                    cmd = CMD.M;
+                    path.addData(cmd, cpx, cpy);
+                    c = 'l';
+                    break;
+                case 'M':
+                    cpx = p[off++];
+                    cpy = p[off++];
+                    cmd = CMD.M;
+                    path.addData(cmd, cpx, cpy);
+                    c = 'L';
+                    break;
+                case 'h':
+                    cpx += p[off++];
+                    cmd = CMD.L;
+                    path.addData(cmd, cpx, cpy);
+                    break;
+                case 'H':
+                    cpx = p[off++];
+                    cmd = CMD.L;
+                    path.addData(cmd, cpx, cpy);
+                    break;
+                case 'v':
+                    cpy += p[off++];
+                    cmd = CMD.L;
+                    path.addData(cmd, cpx, cpy);
+                    break;
+                case 'V':
+                    cpy = p[off++];
+                    cmd = CMD.L;
+                    path.addData(cmd, cpx, cpy);
+                    break;
+                case 'C':
+                    cmd = CMD.C;
+                    path.addData(
+                        cmd, p[off++], p[off++], p[off++], p[off++], p[off++], p[off++]
+                    );
+                    cpx = p[off - 2];
+                    cpy = p[off - 1];
+                    break;
+                case 'c':
+                    cmd = CMD.C;
+                    path.addData(
+                        cmd,
+                        p[off++] + cpx, p[off++] + cpy,
+                        p[off++] + cpx, p[off++] + cpy,
+                        p[off++] + cpx, p[off++] + cpy
+                    );
+                    cpx += p[off - 2];
+                    cpy += p[off - 1];
+                    break;
+                case 'S':
+                    ctlPtx = cpx;
+                    ctlPty = cpy;
+                    var len = path.len();
+                    var pathData = path.data;
+                    if (prevCmd === CMD.C) {
+                        ctlPtx += cpx - pathData[len - 4];
+                        ctlPty += cpy - pathData[len - 3];
+                    }
+                    cmd = CMD.C;
+                    x1 = p[off++];
+                    y1 = p[off++];
+                    cpx = p[off++];
+                    cpy = p[off++];
+                    path.addData(cmd, ctlPtx, ctlPty, x1, y1, cpx, cpy);
+                    break;
+                case 's':
+                    ctlPtx = cpx;
+                    ctlPty = cpy;
+                    var len = path.len();
+                    var pathData = path.data;
+                    if (prevCmd === CMD.C) {
+                        ctlPtx += cpx - pathData[len - 4];
+                        ctlPty += cpy - pathData[len - 3];
+                    }
+                    cmd = CMD.C;
+                    x1 = cpx + p[off++];
+                    y1 = cpy + p[off++];
+                    cpx += p[off++];
+                    cpy += p[off++];
+                    path.addData(cmd, ctlPtx, ctlPty, x1, y1, cpx, cpy);
+                    break;
+                case 'Q':
+                    x1 = p[off++];
+                    y1 = p[off++];
+                    cpx = p[off++];
+                    cpy = p[off++];
+                    cmd = CMD.Q;
+                    path.addData(cmd, x1, y1, cpx, cpy);
+                    break;
+                case 'q':
+                    x1 = p[off++] + cpx;
+                    y1 = p[off++] + cpy;
+                    cpx += p[off++];
+                    cpy += p[off++];
+                    cmd = CMD.Q;
+                    path.addData(cmd, x1, y1, cpx, cpy);
+                    break;
+                case 'T':
+                    ctlPtx = cpx;
+                    ctlPty = cpy;
+                    var len = path.len();
+                    var pathData = path.data;
+                    if (prevCmd === CMD.Q) {
+                        ctlPtx += cpx - pathData[len - 4];
+                        ctlPty += cpy - pathData[len - 3];
+                    }
+                    cpx = p[off++];
+                    cpy = p[off++];
+                    cmd = CMD.Q;
+                    path.addData(cmd, ctlPtx, ctlPty, cpx, cpy);
+                    break;
+                case 't':
+                    ctlPtx = cpx;
+                    ctlPty = cpy;
+                    var len = path.len();
+                    var pathData = path.data;
+                    if (prevCmd === CMD.Q) {
+                        ctlPtx += cpx - pathData[len - 4];
+                        ctlPty += cpy - pathData[len - 3];
+                    }
+                    cpx += p[off++];
+                    cpy += p[off++];
+                    cmd = CMD.Q;
+                    path.addData(cmd, ctlPtx, ctlPty, cpx, cpy);
+                    break;
+                case 'A':
+                    rx = p[off++];
+                    ry = p[off++];
+                    psi = p[off++];
+                    fa = p[off++];
+                    fs = p[off++];
+
+                    x1 = cpx, y1 = cpy;
+                    cpx = p[off++];
+                    cpy = p[off++];
+                    cmd = CMD.A;
+                    processArc(
+                        x1, y1, cpx, cpy, fa, fs, rx, ry, psi, cmd, path
+                    );
+                    break;
+                case 'a':
+                    rx = p[off++];
+                    ry = p[off++];
+                    psi = p[off++];
+                    fa = p[off++];
+                    fs = p[off++];
+
+                    x1 = cpx, y1 = cpy;
+                    cpx += p[off++];
+                    cpy += p[off++];
+                    cmd = CMD.A;
+                    processArc(
+                        x1, y1, cpx, cpy, fa, fs, rx, ry, psi, cmd, path
+                    );
+                    break;
+            }
+        }
+
+        if (c === 'z' || c === 'Z') {
+            cmd = CMD.Z;
+            path.addData(cmd);
+        }
+
+        prevCmd = cmd;
+    }
+
+    path.toStatic();
+
+    return path;
+}
+
+// TODO Optimize double memory cost problem
+function createPathOptions(str, opts) {
+    var pathProxy = createPathProxyFromString(str);
+    opts = opts || {};
+    opts.buildPath = function (path) {
+        if (path.setData) {
+            path.setData(pathProxy.data);
+            // Svg and vml renderer don't have context
+            var ctx = path.getContext();
+            if (ctx) {
+                path.rebuildPath(ctx);
+            }
+        }
+        else {
+            var ctx = path;
+            pathProxy.rebuildPath(ctx);
+        }
+    };
+
+    opts.applyTransform = function (m) {
+        transformPath(pathProxy, m);
+        this.dirty(true);
+    };
+
+    return opts;
+}
+
+/**
+ * Create a Path object from path string data
+ * http://www.w3.org/TR/SVG/paths.html#PathData
+ * @param  {Object} opts Other options
+ */
+function createFromString(str, opts) {
+    return new Path(createPathOptions(str, opts));
+}
+
+/**
+ * Create a Path class from path string data
+ * @param  {string} str
+ * @param  {Object} opts Other options
+ */
+function extendFromString(str, opts) {
+    return Path.extend(createPathOptions(str, opts));
+}
+
+/**
+ * Merge multiple paths
+ */
+// TODO Apply transform
+// TODO stroke dash
+// TODO Optimize double memory cost problem
+function mergePath$1(pathEls, opts) {
+    var pathList = [];
+    var len = pathEls.length;
+    for (var i = 0; i < len; i++) {
+        var pathEl = pathEls[i];
+        if (!pathEl.path) {
+            pathEl.createPathProxy();
+        }
+        if (pathEl.__dirtyPath) {
+            pathEl.buildPath(pathEl.path, pathEl.shape, true);
+        }
+        pathList.push(pathEl.path);
+    }
+
+    var pathBundle = new Path(opts);
+    // Need path proxy.
+    pathBundle.createPathProxy();
+    pathBundle.buildPath = function (path) {
+        path.appendPath(pathList);
+        // Svg and vml renderer don't have context
+        var ctx = path.getContext();
+        if (ctx) {
+            path.rebuildPath(ctx);
+        }
+    };
+
+    return pathBundle;
+}
+
+/**
+ * @alias zrender/graphic/Text
+ * @extends module:zrender/graphic/Displayable
+ * @constructor
+ * @param {Object} opts
+ */
+var Text = function (opts) { // jshint ignore:line
+    Displayable.call(this, opts);
+};
+
+Text.prototype = {
+
+    constructor: Text,
+
+    type: 'text',
+
+    brush: function (ctx, prevEl) {
+        var style = this.style;
+
+        // Optimize, avoid normalize every time.
+        this.__dirty && normalizeTextStyle(style, true);
+
+        // Use props with prefix 'text'.
+        style.fill = style.stroke = style.shadowBlur = style.shadowColor =
+            style.shadowOffsetX = style.shadowOffsetY = null;
+
+        var text = style.text;
+        // Convert to string
+        text != null && (text += '');
+
+        // Always bind style
+        style.bind(ctx, this, prevEl);
+
+        if (!needDrawText(text, style)) {
+            return;
+        }
+
+        this.setTransform(ctx);
+
+        renderText(this, ctx, text, style);
+
+        this.restoreTransform(ctx);
+    },
+
+    getBoundingRect: function () {
+        var style = this.style;
+
+        // Optimize, avoid normalize every time.
+        this.__dirty && normalizeTextStyle(style, true);
+
+        if (!this._rect) {
+            var text = style.text;
+            text != null ? (text += '') : (text = '');
+
+            var rect = getBoundingRect(
+                style.text + '',
+                style.font,
+                style.textAlign,
+                style.textVerticalAlign,
+                style.textPadding,
+                style.rich
+            );
+
+            rect.x += style.x || 0;
+            rect.y += style.y || 0;
+
+            if (getStroke(style.textStroke, style.textStrokeWidth)) {
+                var w = style.textStrokeWidth;
+                rect.x -= w / 2;
+                rect.y -= w / 2;
+                rect.width += w;
+                rect.height += w;
+            }
+
+            this._rect = rect;
+        }
+
+        return this._rect;
+    }
+};
+
+inherits(Text, Displayable);
+
+/**
+ * åœ†å½¢
+ * @module zrender/shape/Circle
+ */
+
+var Circle = Path.extend({
+
+    type: 'circle',
+
+    shape: {
+        cx: 0,
+        cy: 0,
+        r: 0
+    },
+
+
+    buildPath : function (ctx, shape, inBundle) {
+        // Better stroking in ShapeBundle
+        // Always do it may have performence issue ( fill may be 2x more cost)
+        if (inBundle) {
+            ctx.moveTo(shape.cx + shape.r, shape.cy);
+        }
+        // else {
+        //     if (ctx.allocate && !ctx.data.length) {
+        //         ctx.allocate(ctx.CMD_MEM_SIZE.A);
+        //     }
+        // }
+        // Better stroking in ShapeBundle
+        // ctx.moveTo(shape.cx + shape.r, shape.cy);
+        ctx.arc(shape.cx, shape.cy, shape.r, 0, Math.PI * 2, true);
+    }
+});
+
+// Fix weird bug in some version of IE11 (like 11.0.9600.178**),
+// where exception "unexpected call to method or property access"
+// might be thrown when calling ctx.fill or ctx.stroke after a path
+// whose area size is zero is drawn and ctx.clip() is called and
+// shadowBlur is set. See #4572, #3112, #5777.
+// (e.g.,
+//  ctx.moveTo(10, 10);
+//  ctx.lineTo(20, 10);
+//  ctx.closePath();
+//  ctx.clip();
+//  ctx.shadowBlur = 10;
+//  ...
+//  ctx.fill();
+// )
+
+var shadowTemp = [
+    ['shadowBlur', 0],
+    ['shadowColor', '#000'],
+    ['shadowOffsetX', 0],
+    ['shadowOffsetY', 0]
+];
+
+var fixClipWithShadow = function (orignalBrush) {
+
+    // version string can be: '11.0'
+    return (env$1.browser.ie && env$1.browser.version >= 11)
+
+        ? function () {
+            var clipPaths = this.__clipPaths;
+            var style = this.style;
+            var modified;
+
+            if (clipPaths) {
+                for (var i = 0; i < clipPaths.length; i++) {
+                    var clipPath = clipPaths[i];
+                    var shape = clipPath && clipPath.shape;
+                    var type = clipPath && clipPath.type;
+
+                    if (shape && (
+                        (type === 'sector' && shape.startAngle === shape.endAngle)
+                        || (type === 'rect' && (!shape.width || !shape.height))
+                    )) {
+                        for (var j = 0; j < shadowTemp.length; j++) {
+                            // It is save to put shadowTemp static, because shadowTemp
+                            // will be all modified each item brush called.
+                            shadowTemp[j][2] = style[shadowTemp[j][0]];
+                            style[shadowTemp[j][0]] = shadowTemp[j][1];
+                        }
+                        modified = true;
+                        break;
+                    }
+                }
+            }
+
+            orignalBrush.apply(this, arguments);
+
+            if (modified) {
+                for (var j = 0; j < shadowTemp.length; j++) {
+                    style[shadowTemp[j][0]] = shadowTemp[j][2];
+                }
+            }
+        }
+
+        : orignalBrush;
+};
+
+/**
+ * æ‰‡å½¢
+ * @module zrender/graphic/shape/Sector
+ */
+
+var Sector = Path.extend({
+
+    type: 'sector',
+
+    shape: {
+
+        cx: 0,
+
+        cy: 0,
+
+        r0: 0,
+
+        r: 0,
+
+        startAngle: 0,
+
+        endAngle: Math.PI * 2,
+
+        clockwise: true
+    },
+
+    brush: fixClipWithShadow(Path.prototype.brush),
+
+    buildPath: function (ctx, shape) {
+
+        var x = shape.cx;
+        var y = shape.cy;
+        var r0 = Math.max(shape.r0 || 0, 0);
+        var r = Math.max(shape.r, 0);
+        var startAngle = shape.startAngle;
+        var endAngle = shape.endAngle;
+        var clockwise = shape.clockwise;
+
+        var unitX = Math.cos(startAngle);
+        var unitY = Math.sin(startAngle);
+
+        ctx.moveTo(unitX * r0 + x, unitY * r0 + y);
+
+        ctx.lineTo(unitX * r + x, unitY * r + y);
+
+        ctx.arc(x, y, r, startAngle, endAngle, !clockwise);
+
+        ctx.lineTo(
+            Math.cos(endAngle) * r0 + x,
+            Math.sin(endAngle) * r0 + y
+        );
+
+        if (r0 !== 0) {
+            ctx.arc(x, y, r0, endAngle, startAngle, clockwise);
+        }
+
+        ctx.closePath();
+    }
+});
+
+/**
+ * åœ†çŽ¯
+ * @module zrender/graphic/shape/Ring
+ */
+
+var Ring = Path.extend({
+
+    type: 'ring',
+
+    shape: {
+        cx: 0,
+        cy: 0,
+        r: 0,
+        r0: 0
+    },
+
+    buildPath: function (ctx, shape) {
+        var x = shape.cx;
+        var y = shape.cy;
+        var PI2 = Math.PI * 2;
+        ctx.moveTo(x + shape.r, y);
+        ctx.arc(x, y, shape.r, 0, PI2, false);
+        ctx.moveTo(x + shape.r0, y);
+        ctx.arc(x, y, shape.r0, 0, PI2, true);
+    }
+});
+
+/**
+ * Catmull-Rom spline æ’å€¼æŠ˜çº¿
+ * @module zrender/shape/util/smoothSpline
+ * @author pissang (https://www.github.com/pissang)
+ *         Kener (@Kener-æž—å³°, kener.linfeng@gmail.com)
+ *         errorrik (errorrik@gmail.com)
+ */
+
+/**
+ * @inner
+ */
+function interpolate(p0, p1, p2, p3, t, t2, t3) {
+    var v0 = (p2 - p0) * 0.5;
+    var v1 = (p3 - p1) * 0.5;
+    return (2 * (p1 - p2) + v0 + v1) * t3
+            + (-3 * (p1 - p2) - 2 * v0 - v1) * t2
+            + v0 * t + p1;
+}
+
+/**
+ * @alias module:zrender/shape/util/smoothSpline
+ * @param {Array} points çº¿æ®µé¡¶ç‚¹æ•°ç»„
+ * @param {boolean} isLoop
+ * @return {Array}
+ */
+var smoothSpline = function (points, isLoop) {
+    var len$$1 = points.length;
+    var ret = [];
+
+    var distance$$1 = 0;
+    for (var i = 1; i < len$$1; i++) {
+        distance$$1 += distance(points[i - 1], points[i]);
+    }
+
+    var segs = distance$$1 / 2;
+    segs = segs < len$$1 ? len$$1 : segs;
+    for (var i = 0; i < segs; i++) {
+        var pos = i / (segs - 1) * (isLoop ? len$$1 : len$$1 - 1);
+        var idx = Math.floor(pos);
+
+        var w = pos - idx;
+
+        var p0;
+        var p1 = points[idx % len$$1];
+        var p2;
+        var p3;
+        if (!isLoop) {
+            p0 = points[idx === 0 ? idx : idx - 1];
+            p2 = points[idx > len$$1 - 2 ? len$$1 - 1 : idx + 1];
+            p3 = points[idx > len$$1 - 3 ? len$$1 - 1 : idx + 2];
+        }
+        else {
+            p0 = points[(idx - 1 + len$$1) % len$$1];
+            p2 = points[(idx + 1) % len$$1];
+            p3 = points[(idx + 2) % len$$1];
+        }
+
+        var w2 = w * w;
+        var w3 = w * w2;
+
+        ret.push([
+            interpolate(p0[0], p1[0], p2[0], p3[0], w, w2, w3),
+            interpolate(p0[1], p1[1], p2[1], p3[1], w, w2, w3)
+        ]);
+    }
+    return ret;
+};
+
+/**
+ * è´å¡žå°”å¹³æ»‘æ›²çº¿
+ * @module zrender/shape/util/smoothBezier
+ * @author pissang (https://www.github.com/pissang)
+ *         Kener (@Kener-æž—å³°, kener.linfeng@gmail.com)
+ *         errorrik (errorrik@gmail.com)
+ */
+
+/**
+ * è´å¡žå°”å¹³æ»‘æ›²çº¿
+ * @alias module:zrender/shape/util/smoothBezier
+ * @param {Array} points çº¿æ®µé¡¶ç‚¹æ•°ç»„
+ * @param {number} smooth å¹³æ»‘ç‰çº§, 0-1
+ * @param {boolean} isLoop
+ * @param {Array} constraint å°†è®¡ç®—å‡ºæ¥çš„æŽ§åˆ¶ç‚¹çº¦æŸåœ¨ä¸€ä¸ªåŒ…å›´ç›’å†…
+ *                           æ¯”å¦‚ [[0, 0], [100, 100]], è¿™ä¸ªåŒ…å›´ç›’ä¼šä¸Ž
+ *                           æ•´ä¸ªæŠ˜çº¿çš„åŒ…å›´ç›’åšä¸€ä¸ªå¹¶é›†ç”¨æ¥çº¦æŸæŽ§åˆ¶ç‚¹ã€‚
+ * @param {Array} è®¡ç®—å‡ºæ¥çš„æŽ§åˆ¶ç‚¹æ•°ç»„
+ */
+var smoothBezier = function (points, smooth, isLoop, constraint) {
+    var cps = [];
+
+    var v = [];
+    var v1 = [];
+    var v2 = [];
+    var prevPoint;
+    var nextPoint;
+
+    var min$$1, max$$1;
+    if (constraint) {
+        min$$1 = [Infinity, Infinity];
+        max$$1 = [-Infinity, -Infinity];
+        for (var i = 0, len$$1 = points.length; i < len$$1; i++) {
+            min(min$$1, min$$1, points[i]);
+            max(max$$1, max$$1, points[i]);
+        }
+        // ä¸ŽæŒ‡å®šçš„åŒ…å›´ç›’åšå¹¶é›†
+        min(min$$1, min$$1, constraint[0]);
+        max(max$$1, max$$1, constraint[1]);
+    }
+
+    for (var i = 0, len$$1 = points.length; i < len$$1; i++) {
+        var point = points[i];
+
+        if (isLoop) {
+            prevPoint = points[i ? i - 1 : len$$1 - 1];
+            nextPoint = points[(i + 1) % len$$1];
+        }
+        else {
+            if (i === 0 || i === len$$1 - 1) {
+                cps.push(clone$1(points[i]));
+                continue;
+            }
+            else {
+                prevPoint = points[i - 1];
+                nextPoint = points[i + 1];
+            }
+        }
+
+        sub(v, nextPoint, prevPoint);
+
+        // use degree to scale the handle length
+        scale(v, v, smooth);
+
+        var d0 = distance(point, prevPoint);
+        var d1 = distance(point, nextPoint);
+        var sum = d0 + d1;
+        if (sum !== 0) {
+            d0 /= sum;
+            d1 /= sum;
+        }
+
+        scale(v1, v, -d0);
+        scale(v2, v, d1);
+        var cp0 = add([], point, v1);
+        var cp1 = add([], point, v2);
+        if (constraint) {
+            max(cp0, cp0, min$$1);
+            min(cp0, cp0, max$$1);
+            max(cp1, cp1, min$$1);
+            min(cp1, cp1, max$$1);
+        }
+        cps.push(cp0);
+        cps.push(cp1);
+    }
+
+    if (isLoop) {
+        cps.push(cps.shift());
+    }
+
+    return cps;
+};
+
+function buildPath$1(ctx, shape, closePath) {
+    var points = shape.points;
+    var smooth = shape.smooth;
+    if (points && points.length >= 2) {
+        if (smooth && smooth !== 'spline') {
+            var controlPoints = smoothBezier(
+                points, smooth, closePath, shape.smoothConstraint
+            );
+
+            ctx.moveTo(points[0][0], points[0][1]);
+            var len = points.length;
+            for (var i = 0; i < (closePath ? len : len - 1); i++) {
+                var cp1 = controlPoints[i * 2];
+                var cp2 = controlPoints[i * 2 + 1];
+                var p = points[(i + 1) % len];
+                ctx.bezierCurveTo(
+                    cp1[0], cp1[1], cp2[0], cp2[1], p[0], p[1]
+                );
+            }
+        }
+        else {
+            if (smooth === 'spline') {
+                points = smoothSpline(points, closePath);
+            }
+
+            ctx.moveTo(points[0][0], points[0][1]);
+            for (var i = 1, l = points.length; i < l; i++) {
+                ctx.lineTo(points[i][0], points[i][1]);
+            }
+        }
+
+        closePath && ctx.closePath();
+    }
+}
+
+/**
+ * å¤šè¾¹å½¢
+ * @module zrender/shape/Polygon
+ */
+
+var Polygon = Path.extend({
+
+    type: 'polygon',
+
+    shape: {
+        points: null,
+
+        smooth: false,
+
+        smoothConstraint: null
+    },
+
+    buildPath: function (ctx, shape) {
+        buildPath$1(ctx, shape, true);
+    }
+});
+
+/**
+ * @module zrender/graphic/shape/Polyline
+ */
+
+var Polyline = Path.extend({
+
+    type: 'polyline',
+
+    shape: {
+        points: null,
+
+        smooth: false,
+
+        smoothConstraint: null
+    },
+
+    style: {
+        stroke: '#000',
+
+        fill: null
+    },
+
+    buildPath: function (ctx, shape) {
+        buildPath$1(ctx, shape, false);
+    }
+});
+
+/**
+ * çŸ©å½¢
+ * @module zrender/graphic/shape/Rect
+ */
+
+var Rect = Path.extend({
+
+    type: 'rect',
+
+    shape: {
+        // å·¦ä¸Šã€å³ä¸Šã€å³ä¸‹ã€å·¦ä¸‹è§’çš„åŠå¾„ä¾æ¬¡ä¸ºr1ã€r2ã€r3ã€r4
+        // rç¼©å†™ä¸º1         ç›¸å½“äºŽ [1, 1, 1, 1]
+        // rç¼©å†™ä¸º[1]       ç›¸å½“äºŽ [1, 1, 1, 1]
+        // rç¼©å†™ä¸º[1, 2]    ç›¸å½“äºŽ [1, 2, 1, 2]
+        // rç¼©å†™ä¸º[1, 2, 3] ç›¸å½“äºŽ [1, 2, 3, 2]
+        r: 0,
+
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+    },
+
+    buildPath: function (ctx, shape) {
+        var x = shape.x;
+        var y = shape.y;
+        var width = shape.width;
+        var height = shape.height;
+        if (!shape.r) {
+            ctx.rect(x, y, width, height);
+        }
+        else {
+            buildPath(ctx, shape);
+        }
+        ctx.closePath();
+        return;
+    }
+});
+
+/**
+ * ç›´çº¿
+ * @module zrender/graphic/shape/Line
+ */
+
+var Line = Path.extend({
+
+    type: 'line',
+
+    shape: {
+        // Start point
+        x1: 0,
+        y1: 0,
+        // End point
+        x2: 0,
+        y2: 0,
+
+        percent: 1
+    },
+
+    style: {
+        stroke: '#000',
+        fill: null
+    },
+
+    buildPath: function (ctx, shape) {
+        var x1 = shape.x1;
+        var y1 = shape.y1;
+        var x2 = shape.x2;
+        var y2 = shape.y2;
+        var percent = shape.percent;
+
+        if (percent === 0) {
+            return;
+        }
+
+        ctx.moveTo(x1, y1);
+
+        if (percent < 1) {
+            x2 = x1 * (1 - percent) + x2 * percent;
+            y2 = y1 * (1 - percent) + y2 * percent;
+        }
+        ctx.lineTo(x2, y2);
+    },
+
+    /**
+     * Get point at percent
+     * @param  {number} percent
+     * @return {Array.<number>}
+     */
+    pointAt: function (p) {
+        var shape = this.shape;
+        return [
+            shape.x1 * (1 - p) + shape.x2 * p,
+            shape.y1 * (1 - p) + shape.y2 * p
+        ];
+    }
+});
+
+/**
+ * è´å¡žå°”æ›²çº¿
+ * @module zrender/shape/BezierCurve
+ */
+
+var out = [];
+
+function someVectorAt(shape, t, isTangent) {
+    var cpx2 = shape.cpx2;
+    var cpy2 = shape.cpy2;
+    if (cpx2 === null || cpy2 === null) {
+        return [
+            (isTangent ? cubicDerivativeAt : cubicAt)(shape.x1, shape.cpx1, shape.cpx2, shape.x2, t),
+            (isTangent ? cubicDerivativeAt : cubicAt)(shape.y1, shape.cpy1, shape.cpy2, shape.y2, t)
+        ];
+    }
+    else {
+        return [
+            (isTangent ? quadraticDerivativeAt : quadraticAt)(shape.x1, shape.cpx1, shape.x2, t),
+            (isTangent ? quadraticDerivativeAt : quadraticAt)(shape.y1, shape.cpy1, shape.y2, t)
+        ];
+    }
+}
+
+var BezierCurve = Path.extend({
+
+    type: 'bezier-curve',
+
+    shape: {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: 0,
+        cpx1: 0,
+        cpy1: 0,
+        // cpx2: 0,
+        // cpy2: 0
+
+        // Curve show percent, for animating
+        percent: 1
+    },
+
+    style: {
+        stroke: '#000',
+        fill: null
+    },
+
+    buildPath: function (ctx, shape) {
+        var x1 = shape.x1;
+        var y1 = shape.y1;
+        var x2 = shape.x2;
+        var y2 = shape.y2;
+        var cpx1 = shape.cpx1;
+        var cpy1 = shape.cpy1;
+        var cpx2 = shape.cpx2;
+        var cpy2 = shape.cpy2;
+        var percent = shape.percent;
+        if (percent === 0) {
+            return;
+        }
+
+        ctx.moveTo(x1, y1);
+
+        if (cpx2 == null || cpy2 == null) {
+            if (percent < 1) {
+                quadraticSubdivide(
+                    x1, cpx1, x2, percent, out
+                );
+                cpx1 = out[1];
+                x2 = out[2];
+                quadraticSubdivide(
+                    y1, cpy1, y2, percent, out
+                );
+                cpy1 = out[1];
+                y2 = out[2];
+            }
+
+            ctx.quadraticCurveTo(
+                cpx1, cpy1,
+                x2, y2
+            );
+        }
+        else {
+            if (percent < 1) {
+                cubicSubdivide(
+                    x1, cpx1, cpx2, x2, percent, out
+                );
+                cpx1 = out[1];
+                cpx2 = out[2];
+                x2 = out[3];
+                cubicSubdivide(
+                    y1, cpy1, cpy2, y2, percent, out
+                );
+                cpy1 = out[1];
+                cpy2 = out[2];
+                y2 = out[3];
+            }
+            ctx.bezierCurveTo(
+                cpx1, cpy1,
+                cpx2, cpy2,
+                x2, y2
+            );
+        }
+    },
+
+    /**
+     * Get point at percent
+     * @param  {number} t
+     * @return {Array.<number>}
+     */
+    pointAt: function (t) {
+        return someVectorAt(this.shape, t, false);
+    },
+
+    /**
+     * Get tangent at percent
+     * @param  {number} t
+     * @return {Array.<number>}
+     */
+    tangentAt: function (t) {
+        var p = someVectorAt(this.shape, t, true);
+        return normalize(p, p);
+    }
+});
+
+/**
+ * åœ†å¼§
+ * @module zrender/graphic/shape/Arc
+ */
+
+var Arc = Path.extend({
+
+    type: 'arc',
+
+    shape: {
+
+        cx: 0,
+
+        cy: 0,
+
+        r: 0,
+
+        startAngle: 0,
+
+        endAngle: Math.PI * 2,
+
+        clockwise: true
+    },
+
+    style: {
+
+        stroke: '#000',
+
+        fill: null
+    },
+
+    buildPath: function (ctx, shape) {
+
+        var x = shape.cx;
+        var y = shape.cy;
+        var r = Math.max(shape.r, 0);
+        var startAngle = shape.startAngle;
+        var endAngle = shape.endAngle;
+        var clockwise = shape.clockwise;
+
+        var unitX = Math.cos(startAngle);
+        var unitY = Math.sin(startAngle);
+
+        ctx.moveTo(unitX * r + x, unitY * r + y);
+        ctx.arc(x, y, r, startAngle, endAngle, !clockwise);
+    }
+});
+
+// CompoundPath to improve performance
+
+var CompoundPath = Path.extend({
+
+    type: 'compound',
+
+    shape: {
+
+        paths: null
+    },
+
+    _updatePathDirty: function () {
+        var dirtyPath = this.__dirtyPath;
+        var paths = this.shape.paths;
+        for (var i = 0; i < paths.length; i++) {
+            // Mark as dirty if any subpath is dirty
+            dirtyPath = dirtyPath || paths[i].__dirtyPath;
+        }
+        this.__dirtyPath = dirtyPath;
+        this.__dirty = this.__dirty || dirtyPath;
+    },
+
+    beforeBrush: function () {
+        this._updatePathDirty();
+        var paths = this.shape.paths || [];
+        var scale = this.getGlobalScale();
+        // Update path scale
+        for (var i = 0; i < paths.length; i++) {
+            if (!paths[i].path) {
+                paths[i].createPathProxy();
+            }
+            paths[i].path.setScale(scale[0], scale[1]);
+        }
+    },
+
+    buildPath: function (ctx, shape) {
+        var paths = shape.paths || [];
+        for (var i = 0; i < paths.length; i++) {
+            paths[i].buildPath(ctx, paths[i].shape, true);
+        }
+    },
+
+    afterBrush: function () {
+        var paths = this.shape.paths || [];
+        for (var i = 0; i < paths.length; i++) {
+            paths[i].__dirtyPath = false;
+        }
+    },
+
+    getBoundingRect: function () {
+        this._updatePathDirty();
+        return Path.prototype.getBoundingRect.call(this);
+    }
+});
+
+/**
+ * @param {Array.<Object>} colorStops
+ */
+var Gradient = function (colorStops) {
+
+    this.colorStops = colorStops || [];
+
+};
+
+Gradient.prototype = {
+
+    constructor: Gradient,
+
+    addColorStop: function (offset, color) {
+        this.colorStops.push({
+
+            offset: offset,
+
+            color: color
+        });
+    }
+
+};
+
+/**
+ * x, y, x2, y2 are all percent from 0 to 1
+ * @param {number} [x=0]
+ * @param {number} [y=0]
+ * @param {number} [x2=1]
+ * @param {number} [y2=0]
+ * @param {Array.<Object>} colorStops
+ * @param {boolean} [globalCoord=false]
+ */
+var LinearGradient = function (x, y, x2, y2, colorStops, globalCoord) {
+    // Should do nothing more in this constructor. Because gradient can be
+    // declard by `color: {type: 'linear', colorStops: ...}`, where
+    // this constructor will not be called.
+
+    this.x = x == null ? 0 : x;
+
+    this.y = y == null ? 0 : y;
+
+    this.x2 = x2 == null ? 1 : x2;
+
+    this.y2 = y2 == null ? 0 : y2;
+
+    // Can be cloned
+    this.type = 'linear';
+
+    // If use global coord
+    this.global = globalCoord || false;
+
+    Gradient.call(this, colorStops);
+};
+
+LinearGradient.prototype = {
+
+    constructor: LinearGradient
+};
+
+inherits(LinearGradient, Gradient);
+
+/**
+ * x, y, r are all percent from 0 to 1
+ * @param {number} [x=0.5]
+ * @param {number} [y=0.5]
+ * @param {number} [r=0.5]
+ * @param {Array.<Object>} [colorStops]
+ * @param {boolean} [globalCoord=false]
+ */
+var RadialGradient = function (x, y, r, colorStops, globalCoord) {
+    // Should do nothing more in this constructor. Because gradient can be
+    // declard by `color: {type: 'radial', colorStops: ...}`, where
+    // this constructor will not be called.
+
+    this.x = x == null ? 0.5 : x;
+
+    this.y = y == null ? 0.5 : y;
+
+    this.r = r == null ? 0.5 : r;
+
+    // Can be cloned
+    this.type = 'radial';
+
+    // If use global coord
+    this.global = globalCoord || false;
+
+    Gradient.call(this, colorStops);
+};
+
+RadialGradient.prototype = {
+
+    constructor: RadialGradient
+};
+
+inherits(RadialGradient, Gradient);
+
+/**
+ * Displayable for incremental rendering. It will be rendered in a separate layer
+ * IncrementalDisplay have too main methods. `clearDisplayables` and `addDisplayables`
+ * addDisplayables will render the added displayables incremetally.
+ *
+ * It use a not clearFlag to tell the painter don't clear the layer if it's the first element.
+ */
+// TODO Style override ?
+function IncrementalDisplayble(opts) {
+
+    Displayable.call(this, opts);
+
+    this._displayables = [];
+
+    this._temporaryDisplayables = [];
+
+    this._cursor = 0;
+
+    this.notClear = true;
+}
+
+IncrementalDisplayble.prototype.incremental = true;
+
+IncrementalDisplayble.prototype.clearDisplaybles = function () {
+    this._displayables = [];
+    this._temporaryDisplayables = [];
+    this._cursor = 0;
+    this.dirty();
+
+    this.notClear = false;
+};
+
+IncrementalDisplayble.prototype.addDisplayable = function (displayable, notPersistent) {
+    if (notPersistent) {
+        this._temporaryDisplayables.push(displayable);
+    }
+    else {
+        this._displayables.push(displayable);
+    }
+    this.dirty();
+};
+
+IncrementalDisplayble.prototype.addDisplayables = function (displayables, notPersistent) {
+    notPersistent = notPersistent || false;
+    for (var i = 0; i < displayables.length; i++) {
+        this.addDisplayable(displayables[i], notPersistent);
+    }
+};
+
+IncrementalDisplayble.prototype.eachPendingDisplayable = function  (cb) {
+    for (var i = this._cursor; i < this._displayables.length; i++) {
+        cb && cb(this._displayables[i]);
+    }
+    for (var i = 0; i < this._temporaryDisplayables.length; i++) {
+        cb && cb(this._temporaryDisplayables[i]);
+    }
+};
+
+IncrementalDisplayble.prototype.update = function () {
+    this.updateTransform();
+    for (var i = this._cursor; i < this._displayables.length; i++) {
+        var displayable = this._displayables[i];
+        // PENDING
+        displayable.parent = this;
+        displayable.update();
+        displayable.parent = null;
+    }
+    for (var i = 0; i < this._temporaryDisplayables.length; i++) {
+        var displayable = this._temporaryDisplayables[i];
+        // PENDING
+        displayable.parent = this;
+        displayable.update();
+        displayable.parent = null;
+    }
+};
+
+IncrementalDisplayble.prototype.brush = function (ctx, prevEl) {
+    // Render persistant displayables.
+    for (var i = this._cursor; i < this._displayables.length; i++) {
+        var displayable = this._displayables[i];
+        displayable.beforeBrush && displayable.beforeBrush(ctx);
+        displayable.brush(ctx, i === this._cursor ? null : this._displayables[i - 1]);
+        displayable.afterBrush && displayable.afterBrush(ctx);
+    }
+    this._cursor = i;
+    // Render temporary displayables.
+    for (var i = 0; i < this._temporaryDisplayables.length; i++) {
+        var displayable = this._temporaryDisplayables[i];
+        displayable.beforeBrush && displayable.beforeBrush(ctx);
+        displayable.brush(ctx, i === 0 ? null : this._temporaryDisplayables[i - 1]);
+        displayable.afterBrush && displayable.afterBrush(ctx);
+    }
+
+    this._temporaryDisplayables = [];
+
+    this.notClear = true;
+};
+
+var m = [];
+IncrementalDisplayble.prototype.getBoundingRect = function () {
+    if (!this._rect) {
+        var rect = new BoundingRect(Infinity, Infinity, -Infinity, -Infinity);
+        for (var i = 0; i < this._displayables.length; i++) {
+            var displayable = this._displayables[i];
+            var childRect = displayable.getBoundingRect().clone();
+            if (displayable.needLocalTransform()) {
+                childRect.applyTransform(displayable.getLocalTransform(m));
+            }
+            rect.union(childRect);
+        }
+        this._rect = rect;
+    }
+    return this._rect;
+};
+
+IncrementalDisplayble.prototype.contain = function (x, y) {
+    var localPos = this.transformCoordToLocal(x, y);
+    var rect = this.getBoundingRect();
+
+    if (rect.contain(localPos[0], localPos[1])) {
+        for (var i = 0; i < this._displayables.length; i++) {
+            var displayable = this._displayables[i];
+            if (displayable.contain(x, y)) {
+                return true;
+            }
+        }
+    }
+    return false;
+};
+
+inherits(IncrementalDisplayble, Displayable);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var round = Math.round;
+var mathMax$1 = Math.max;
+var mathMin$1 = Math.min;
+
+var EMPTY_OBJ = {};
+
+/**
+ * Extend shape with parameters
+ */
+function extendShape(opts) {
+    return Path.extend(opts);
+}
+
+/**
+ * Extend path
+ */
+function extendPath(pathData, opts) {
+    return extendFromString(pathData, opts);
+}
+
+/**
+ * Create a path element from path data string
+ * @param {string} pathData
+ * @param {Object} opts
+ * @param {module:zrender/core/BoundingRect} rect
+ * @param {string} [layout=cover] 'center' or 'cover'
+ */
+function makePath(pathData, opts, rect, layout) {
+    var path = createFromString(pathData, opts);
+    var boundingRect = path.getBoundingRect();
+    if (rect) {
+        if (layout === 'center') {
+            rect = centerGraphic(rect, boundingRect);
+        }
+
+        resizePath(path, rect);
+    }
+    return path;
+}
+
+/**
+ * Create a image element from image url
+ * @param {string} imageUrl image url
+ * @param {Object} opts options
+ * @param {module:zrender/core/BoundingRect} rect constrain rect
+ * @param {string} [layout=cover] 'center' or 'cover'
+ */
+function makeImage(imageUrl, rect, layout) {
+    var path = new ZImage({
+        style: {
+            image: imageUrl,
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height
+        },
+        onload: function (img) {
+            if (layout === 'center') {
+                var boundingRect = {
+                    width: img.width,
+                    height: img.height
+                };
+                path.setStyle(centerGraphic(rect, boundingRect));
+            }
+        }
+    });
+    return path;
+}
+
+/**
+ * Get position of centered element in bounding box.
+ *
+ * @param  {Object} rect         element local bounding box
+ * @param  {Object} boundingRect constraint bounding box
+ * @return {Object} element position containing x, y, width, and height
+ */
+function centerGraphic(rect, boundingRect) {
+    // Set rect to center, keep width / height ratio.
+    var aspect = boundingRect.width / boundingRect.height;
+    var width = rect.height * aspect;
+    var height;
+    if (width <= rect.width) {
+        height = rect.height;
+    }
+    else {
+        width = rect.width;
+        height = width / aspect;
+    }
+    var cx = rect.x + rect.width / 2;
+    var cy = rect.y + rect.height / 2;
+
+    return {
+        x: cx - width / 2,
+        y: cy - height / 2,
+        width: width,
+        height: height
+    };
+}
+
+var mergePath = mergePath$1;
+
+/**
+ * Resize a path to fit the rect
+ * @param {module:zrender/graphic/Path} path
+ * @param {Object} rect
+ */
+function resizePath(path, rect) {
+    if (!path.applyTransform) {
+        return;
+    }
+
+    var pathRect = path.getBoundingRect();
+
+    var m = pathRect.calculateTransform(rect);
+
+    path.applyTransform(m);
+}
+
+/**
+ * Sub pixel optimize line for canvas
+ *
+ * @param {Object} param
+ * @param {Object} [param.shape]
+ * @param {number} [param.shape.x1]
+ * @param {number} [param.shape.y1]
+ * @param {number} [param.shape.x2]
+ * @param {number} [param.shape.y2]
+ * @param {Object} [param.style]
+ * @param {number} [param.style.lineWidth]
+ * @return {Object} Modified param
+ */
+function subPixelOptimizeLine(param) {
+    var shape = param.shape;
+    var lineWidth = param.style.lineWidth;
+
+    if (round(shape.x1 * 2) === round(shape.x2 * 2)) {
+        shape.x1 = shape.x2 = subPixelOptimize(shape.x1, lineWidth, true);
+    }
+    if (round(shape.y1 * 2) === round(shape.y2 * 2)) {
+        shape.y1 = shape.y2 = subPixelOptimize(shape.y1, lineWidth, true);
+    }
+    return param;
+}
+
+/**
+ * Sub pixel optimize rect for canvas
+ *
+ * @param {Object} param
+ * @param {Object} [param.shape]
+ * @param {number} [param.shape.x]
+ * @param {number} [param.shape.y]
+ * @param {number} [param.shape.width]
+ * @param {number} [param.shape.height]
+ * @param {Object} [param.style]
+ * @param {number} [param.style.lineWidth]
+ * @return {Object} Modified param
+ */
+function subPixelOptimizeRect(param) {
+    var shape = param.shape;
+    var lineWidth = param.style.lineWidth;
+    var originX = shape.x;
+    var originY = shape.y;
+    var originWidth = shape.width;
+    var originHeight = shape.height;
+    shape.x = subPixelOptimize(shape.x, lineWidth, true);
+    shape.y = subPixelOptimize(shape.y, lineWidth, true);
+    shape.width = Math.max(
+        subPixelOptimize(originX + originWidth, lineWidth, false) - shape.x,
+        originWidth === 0 ? 0 : 1
+    );
+    shape.height = Math.max(
+        subPixelOptimize(originY + originHeight, lineWidth, false) - shape.y,
+        originHeight === 0 ? 0 : 1
+    );
+    return param;
+}
+
+/**
+ * Sub pixel optimize for canvas
+ *
+ * @param {number} position Coordinate, such as x, y
+ * @param {number} lineWidth Should be nonnegative integer.
+ * @param {boolean=} positiveOrNegative Default false (negative).
+ * @return {number} Optimized position.
+ */
+function subPixelOptimize(position, lineWidth, positiveOrNegative) {
+    // Assure that (position + lineWidth / 2) is near integer edge,
+    // otherwise line will be fuzzy in canvas.
+    var doubledPosition = round(position * 2);
+    return (doubledPosition + round(lineWidth)) % 2 === 0
+        ? doubledPosition / 2
+        : (doubledPosition + (positiveOrNegative ? 1 : -1)) / 2;
+}
+
+function hasFillOrStroke(fillOrStroke) {
+    return fillOrStroke != null && fillOrStroke != 'none';
+}
+
+function liftColor(color) {
+    return typeof color === 'string' ? lift(color, -0.1) : color;
+}
+
+/**
+ * @private
+ */
+function cacheElementStl(el) {
+    if (el.__hoverStlDirty) {
+        var stroke = el.style.stroke;
+        var fill = el.style.fill;
+
+        // Create hoverStyle on mouseover
+        var hoverStyle = el.__hoverStl;
+        hoverStyle.fill = hoverStyle.fill
+            || (hasFillOrStroke(fill) ? liftColor(fill) : null);
+        hoverStyle.stroke = hoverStyle.stroke
+            || (hasFillOrStroke(stroke) ? liftColor(stroke) : null);
+
+        var normalStyle = {};
+        for (var name in hoverStyle) {
+            // See comment in `doSingleEnterHover`.
+            if (hoverStyle[name] != null) {
+                normalStyle[name] = el.style[name];
+            }
+        }
+
+        el.__normalStl = normalStyle;
+
+        el.__hoverStlDirty = false;
+    }
+}
+
+/**
+ * @private
+ */
+function doSingleEnterHover(el) {
+    if (el.__isHover) {
+        return;
+    }
+
+    cacheElementStl(el);
+
+    if (el.useHoverLayer) {
+        el.__zr && el.__zr.addHover(el, el.__hoverStl);
+    }
+    else {
+        var style = el.style;
+        var insideRollbackOpt = style.insideRollbackOpt;
+
+        // Consider case: only `position: 'top'` is set on emphasis, then text
+        // color should be returned to `autoColor`, rather than remain '#fff'.
+        // So we should rollback then apply again after style merging.
+        insideRollbackOpt && rollbackInsideStyle(style);
+
+        // styles can be:
+        // {
+        //    label: {
+        //        show: false,
+        //        position: 'outside',
+        //        fontSize: 18
+        //    },
+        //    emphasis: {
+        //        label: {
+        //            show: true
+        //        }
+        //    }
+        // },
+        // where properties of `emphasis` may not appear in `normal`. We previously use
+        // module:echarts/util/model#defaultEmphasis to merge `normal` to `emphasis`.
+        // But consider rich text and setOption in merge mode, it is impossible to cover
+        // all properties in merge. So we use merge mode when setting style here, where
+        // only properties that is not `null/undefined` can be set. The disadventage:
+        // null/undefined can not be used to remove style any more in `emphasis`.
+        style.extendFrom(el.__hoverStl);
+
+        // Do not save `insideRollback`.
+        if (insideRollbackOpt) {
+            applyInsideStyle(style, style.insideOriginalTextPosition, insideRollbackOpt);
+
+            // textFill may be rollbacked to null.
+            if (style.textFill == null) {
+                style.textFill = insideRollbackOpt.autoColor;
+            }
+        }
+
+        el.dirty(false);
+        el.z2 += 1;
+    }
+
+    el.__isHover = true;
+}
+
+/**
+ * @inner
+ */
+function doSingleLeaveHover(el) {
+    if (!el.__isHover) {
+        return;
+    }
+
+    var normalStl = el.__normalStl;
+    if (el.useHoverLayer) {
+        el.__zr && el.__zr.removeHover(el);
+    }
+    else {
+        // Consider null/undefined value, should use
+        // `setStyle` but not `extendFrom(stl, true)`.
+        normalStl && el.setStyle(normalStl);
+        el.z2 -= 1;
+    }
+
+    el.__isHover = false;
+}
+
+/**
+ * @inner
+ */
+function doEnterHover(el) {
+    el.type === 'group'
+        ? el.traverse(function (child) {
+            if (child.type !== 'group') {
+                doSingleEnterHover(child);
+            }
+        })
+        : doSingleEnterHover(el);
+}
+
+function doLeaveHover(el) {
+    el.type === 'group'
+        ? el.traverse(function (child) {
+            if (child.type !== 'group') {
+                doSingleLeaveHover(child);
+            }
+        })
+        : doSingleLeaveHover(el);
+}
+
+/**
+ * @inner
+ */
+function setElementHoverStl(el, hoverStl) {
+    // If element has sepcified hoverStyle, then use it instead of given hoverStyle
+    // Often used when item group has a label element and it's hoverStyle is different
+    el.__hoverStl = el.hoverStyle || hoverStl || {};
+    el.__hoverStlDirty = true;
+
+    if (el.__isHover) {
+        cacheElementStl(el);
+    }
+}
+
+/**
+ * @inner
+ */
+function onElementMouseOver(e) {
+    if (this.__hoverSilentOnTouch && e.zrByTouch) {
+        return;
+    }
+
+    // Only if element is not in emphasis status
+    !this.__isEmphasis && doEnterHover(this);
+}
+
+/**
+ * @inner
+ */
+function onElementMouseOut(e) {
+    if (this.__hoverSilentOnTouch && e.zrByTouch) {
+        return;
+    }
+
+    // Only if element is not in emphasis status
+    !this.__isEmphasis && doLeaveHover(this);
+}
+
+/**
+ * @inner
+ */
+function enterEmphasis() {
+    this.__isEmphasis = true;
+    doEnterHover(this);
+}
+
+/**
+ * @inner
+ */
+function leaveEmphasis() {
+    this.__isEmphasis = false;
+    doLeaveHover(this);
+}
+
+/**
+ * Set hover style of element.
+ * This method can be called repeatly without side-effects.
+ * @param {module:zrender/Element} el
+ * @param {Object} [hoverStyle]
+ * @param {Object} [opt]
+ * @param {boolean} [opt.hoverSilentOnTouch=false]
+ *        In touch device, mouseover event will be trigger on touchstart event
+ *        (see module:zrender/dom/HandlerProxy). By this mechanism, we can
+ *        conviniently use hoverStyle when tap on touch screen without additional
+ *        code for compatibility.
+ *        But if the chart/component has select feature, which usually also use
+ *        hoverStyle, there might be conflict between 'select-highlight' and
+ *        'hover-highlight' especially when roam is enabled (see geo for example).
+ *        In this case, hoverSilentOnTouch should be used to disable hover-highlight
+ *        on touch device.
+ */
+function setHoverStyle(el, hoverStyle, opt) {
+    el.__hoverSilentOnTouch = opt && opt.hoverSilentOnTouch;
+
+    el.type === 'group'
+        ? el.traverse(function (child) {
+            if (child.type !== 'group') {
+                setElementHoverStl(child, hoverStyle);
+            }
+        })
+        : setElementHoverStl(el, hoverStyle);
+
+    // Duplicated function will be auto-ignored, see Eventful.js.
+    el.on('mouseover', onElementMouseOver)
+        .on('mouseout', onElementMouseOut);
+
+    // Emphasis, normal can be triggered manually
+    el.on('emphasis', enterEmphasis)
+        .on('normal', leaveEmphasis);
+}
+
+/**
+ * @param {Object|module:zrender/graphic/Style} normalStyle
+ * @param {Object} emphasisStyle
+ * @param {module:echarts/model/Model} normalModel
+ * @param {module:echarts/model/Model} emphasisModel
+ * @param {Object} opt Check `opt` of `setTextStyleCommon` to find other props.
+ * @param {string|Function} [opt.defaultText]
+ * @param {module:echarts/model/Model} [opt.labelFetcher] Fetch text by
+ *      `opt.labelFetcher.getFormattedLabel(opt.labelDataIndex, 'normal'/'emphasis', null, opt.labelDimIndex)`
+ * @param {module:echarts/model/Model} [opt.labelDataIndex] Fetch text by
+ *      `opt.textFetcher.getFormattedLabel(opt.labelDataIndex, 'normal'/'emphasis', null, opt.labelDimIndex)`
+ * @param {module:echarts/model/Model} [opt.labelDimIndex] Fetch text by
+ *      `opt.textFetcher.getFormattedLabel(opt.labelDataIndex, 'normal'/'emphasis', null, opt.labelDimIndex)`
+ * @param {Object} [normalSpecified]
+ * @param {Object} [emphasisSpecified]
+ */
+function setLabelStyle(
+    normalStyle, emphasisStyle,
+    normalModel, emphasisModel,
+    opt,
+    normalSpecified, emphasisSpecified
+) {
+    opt = opt || EMPTY_OBJ;
+    var labelFetcher = opt.labelFetcher;
+    var labelDataIndex = opt.labelDataIndex;
+    var labelDimIndex = opt.labelDimIndex;
+
+    // This scenario, `label.normal.show = true; label.emphasis.show = false`,
+    // is not supported util someone requests.
+
+    var showNormal = normalModel.getShallow('show');
+    var showEmphasis = emphasisModel.getShallow('show');
+
+    // Consider performance, only fetch label when necessary.
+    // If `normal.show` is `false` and `emphasis.show` is `true` and `emphasis.formatter` is not set,
+    // label should be displayed, where text is fetched by `normal.formatter` or `opt.defaultText`.
+    var baseText;
+    if (showNormal || showEmphasis) {
+        if (labelFetcher) {
+            baseText = labelFetcher.getFormattedLabel(labelDataIndex, 'normal', null, labelDimIndex);
+        }
+        if (baseText == null) {
+            baseText = isFunction$1(opt.defaultText) ? opt.defaultText(labelDataIndex, opt) : opt.defaultText;
+        }
+    }
+    var normalStyleText = showNormal ? baseText : null;
+    var emphasisStyleText = showEmphasis
+        ? retrieve2(
+            labelFetcher
+                ? labelFetcher.getFormattedLabel(labelDataIndex, 'emphasis', null, labelDimIndex)
+                : null,
+            baseText
+        )
+        : null;
+
+    // Optimize: If style.text is null, text will not be drawn.
+    if (normalStyleText != null || emphasisStyleText != null) {
+        // Always set `textStyle` even if `normalStyle.text` is null, because default
+        // values have to be set on `normalStyle`.
+        // If we set default values on `emphasisStyle`, consider case:
+        // Firstly, `setOption(... label: {normal: {text: null}, emphasis: {show: true}} ...);`
+        // Secondly, `setOption(... label: {noraml: {show: true, text: 'abc', color: 'red'} ...);`
+        // Then the 'red' will not work on emphasis.
+        setTextStyle(normalStyle, normalModel, normalSpecified, opt);
+        setTextStyle(emphasisStyle, emphasisModel, emphasisSpecified, opt, true);
+    }
+
+    normalStyle.text = normalStyleText;
+    emphasisStyle.text = emphasisStyleText;
+}
+
+/**
+ * Set basic textStyle properties.
+ * @param {Object|module:zrender/graphic/Style} textStyle
+ * @param {module:echarts/model/Model} model
+ * @param {Object} [specifiedTextStyle] Can be overrided by settings in model.
+ * @param {Object} [opt] See `opt` of `setTextStyleCommon`.
+ * @param {boolean} [isEmphasis]
+ */
+function setTextStyle(
+    textStyle, textStyleModel, specifiedTextStyle, opt, isEmphasis
+) {
+    setTextStyleCommon(textStyle, textStyleModel, opt, isEmphasis);
+    specifiedTextStyle && extend(textStyle, specifiedTextStyle);
+    textStyle.host && textStyle.host.dirty && textStyle.host.dirty(false);
+
+    return textStyle;
+}
+
+/**
+ * Set text option in the style.
+ * @deprecated
+ * @param {Object} textStyle
+ * @param {module:echarts/model/Model} labelModel
+ * @param {string|boolean} defaultColor Default text color.
+ *        If set as false, it will be processed as a emphasis style.
+ */
+function setText(textStyle, labelModel, defaultColor) {
+    var opt = {isRectText: true};
+    var isEmphasis;
+
+    if (defaultColor === false) {
+        isEmphasis = true;
+    }
+    else {
+        // Support setting color as 'auto' to get visual color.
+        opt.autoColor = defaultColor;
+    }
+    setTextStyleCommon(textStyle, labelModel, opt, isEmphasis);
+    textStyle.host && textStyle.host.dirty && textStyle.host.dirty(false);
+}
+
+/**
+ * {
+ *      disableBox: boolean, Whether diable drawing box of block (outer most).
+ *      isRectText: boolean,
+ *      autoColor: string, specify a color when color is 'auto',
+ *              for textFill, textStroke, textBackgroundColor, and textBorderColor.
+ *              If autoColor specified, it is used as default textFill.
+ *      useInsideStyle:
+ *              `true`: Use inside style (textFill, textStroke, textStrokeWidth)
+ *                  if `textFill` is not specified.
+ *              `false`: Do not use inside style.
+ *              `null/undefined`: use inside style if `isRectText` is true and
+ *                  `textFill` is not specified and textPosition contains `'inside'`.
+ *      forceRich: boolean
+ * }
+ */
+function setTextStyleCommon(textStyle, textStyleModel, opt, isEmphasis) {
+    // Consider there will be abnormal when merge hover style to normal style if given default value.
+    opt = opt || EMPTY_OBJ;
+
+    if (opt.isRectText) {
+        var textPosition = textStyleModel.getShallow('position')
+            || (isEmphasis ? null : 'inside');
+        // 'outside' is not a valid zr textPostion value, but used
+        // in bar series, and magric type should be considered.
+        textPosition === 'outside' && (textPosition = 'top');
+        textStyle.textPosition = textPosition;
+        textStyle.textOffset = textStyleModel.getShallow('offset');
+        var labelRotate = textStyleModel.getShallow('rotate');
+        labelRotate != null && (labelRotate *= Math.PI / 180);
+        textStyle.textRotation = labelRotate;
+        textStyle.textDistance = retrieve2(
+            textStyleModel.getShallow('distance'), isEmphasis ? null : 5
+        );
+    }
+
+    var ecModel = textStyleModel.ecModel;
+    var globalTextStyle = ecModel && ecModel.option.textStyle;
+
+    // Consider case:
+    // {
+    //     data: [{
+    //         value: 12,
+    //         label: {
+    //             rich: {
+    //                 // no 'a' here but using parent 'a'.
+    //             }
+    //         }
+    //     }],
+    //     rich: {
+    //         a: { ... }
+    //     }
+    // }
+    var richItemNames = getRichItemNames(textStyleModel);
+    var richResult;
+    if (richItemNames) {
+        richResult = {};
+        for (var name in richItemNames) {
+            if (richItemNames.hasOwnProperty(name)) {
+                // Cascade is supported in rich.
+                var richTextStyle = textStyleModel.getModel(['rich', name]);
+                // In rich, never `disableBox`.
+                setTokenTextStyle(richResult[name] = {}, richTextStyle, globalTextStyle, opt, isEmphasis);
+            }
+        }
+    }
+    textStyle.rich = richResult;
+
+    setTokenTextStyle(textStyle, textStyleModel, globalTextStyle, opt, isEmphasis, true);
+
+    if (opt.forceRich && !opt.textStyle) {
+        opt.textStyle = {};
+    }
+
+    return textStyle;
+}
+
+// Consider case:
+// {
+//     data: [{
+//         value: 12,
+//         label: {
+//             rich: {
+//                 // no 'a' here but using parent 'a'.
+//             }
+//         }
+//     }],
+//     rich: {
+//         a: { ... }
+//     }
+// }
+function getRichItemNames(textStyleModel) {
+    // Use object to remove duplicated names.
+    var richItemNameMap;
+    while (textStyleModel && textStyleModel !== textStyleModel.ecModel) {
+        var rich = (textStyleModel.option || EMPTY_OBJ).rich;
+        if (rich) {
+            richItemNameMap = richItemNameMap || {};
+            for (var name in rich) {
+                if (rich.hasOwnProperty(name)) {
+                    richItemNameMap[name] = 1;
+                }
+            }
+        }
+        textStyleModel = textStyleModel.parentModel;
+    }
+    return richItemNameMap;
+}
+
+function setTokenTextStyle(textStyle, textStyleModel, globalTextStyle, opt, isEmphasis, isBlock) {
+    // In merge mode, default value should not be given.
+    globalTextStyle = !isEmphasis && globalTextStyle || EMPTY_OBJ;
+
+    textStyle.textFill = getAutoColor(textStyleModel.getShallow('color'), opt)
+        || globalTextStyle.color;
+    textStyle.textStroke = getAutoColor(textStyleModel.getShallow('textBorderColor'), opt)
+        || globalTextStyle.textBorderColor;
+    textStyle.textStrokeWidth = retrieve2(
+        textStyleModel.getShallow('textBorderWidth'),
+        globalTextStyle.textBorderWidth
+    );
+
+    if (!isEmphasis) {
+        if (isBlock) {
+            // Always set `insideRollback`, for clearing previous.
+            var originalTextPosition = textStyle.textPosition;
+            textStyle.insideRollback = applyInsideStyle(textStyle, originalTextPosition, opt);
+            // Save original textPosition, because style.textPosition will be repalced by
+            // real location (like [10, 30]) in zrender.
+            textStyle.insideOriginalTextPosition = originalTextPosition;
+            textStyle.insideRollbackOpt = opt;
+        }
+
+        // Set default finally.
+        if (textStyle.textFill == null) {
+            textStyle.textFill = opt.autoColor;
+        }
+    }
+
+    // Do not use `getFont` here, because merge should be supported, where
+    // part of these properties may be changed in emphasis style, and the
+    // others should remain their original value got from normal style.
+    textStyle.fontStyle = textStyleModel.getShallow('fontStyle') || globalTextStyle.fontStyle;
+    textStyle.fontWeight = textStyleModel.getShallow('fontWeight') || globalTextStyle.fontWeight;
+    textStyle.fontSize = textStyleModel.getShallow('fontSize') || globalTextStyle.fontSize;
+    textStyle.fontFamily = textStyleModel.getShallow('fontFamily') || globalTextStyle.fontFamily;
+
+    textStyle.textAlign = textStyleModel.getShallow('align');
+    textStyle.textVerticalAlign = textStyleModel.getShallow('verticalAlign')
+        || textStyleModel.getShallow('baseline');
+
+    textStyle.textLineHeight = textStyleModel.getShallow('lineHeight');
+    textStyle.textWidth = textStyleModel.getShallow('width');
+    textStyle.textHeight = textStyleModel.getShallow('height');
+    textStyle.textTag = textStyleModel.getShallow('tag');
+
+    if (!isBlock || !opt.disableBox) {
+        textStyle.textBackgroundColor = getAutoColor(textStyleModel.getShallow('backgroundColor'), opt);
+        textStyle.textPadding = textStyleModel.getShallow('padding');
+        textStyle.textBorderColor = getAutoColor(textStyleModel.getShallow('borderColor'), opt);
+        textStyle.textBorderWidth = textStyleModel.getShallow('borderWidth');
+        textStyle.textBorderRadius = textStyleModel.getShallow('borderRadius');
+
+        textStyle.textBoxShadowColor = textStyleModel.getShallow('shadowColor');
+        textStyle.textBoxShadowBlur = textStyleModel.getShallow('shadowBlur');
+        textStyle.textBoxShadowOffsetX = textStyleModel.getShallow('shadowOffsetX');
+        textStyle.textBoxShadowOffsetY = textStyleModel.getShallow('shadowOffsetY');
+    }
+
+    textStyle.textShadowColor = textStyleModel.getShallow('textShadowColor')
+        || globalTextStyle.textShadowColor;
+    textStyle.textShadowBlur = textStyleModel.getShallow('textShadowBlur')
+        || globalTextStyle.textShadowBlur;
+    textStyle.textShadowOffsetX = textStyleModel.getShallow('textShadowOffsetX')
+        || globalTextStyle.textShadowOffsetX;
+    textStyle.textShadowOffsetY = textStyleModel.getShallow('textShadowOffsetY')
+        || globalTextStyle.textShadowOffsetY;
+}
+
+function getAutoColor(color, opt) {
+    return color !== 'auto' ? color : (opt && opt.autoColor) ? opt.autoColor : null;
+}
+
+function applyInsideStyle(textStyle, textPosition, opt) {
+    var useInsideStyle = opt.useInsideStyle;
+    var insideRollback;
+
+    if (textStyle.textFill == null
+        && useInsideStyle !== false
+        && (useInsideStyle === true
+            || (opt.isRectText
+                && textPosition
+                // textPosition can be [10, 30]
+                && typeof textPosition === 'string'
+                && textPosition.indexOf('inside') >= 0
+            )
+        )
+    ) {
+        insideRollback = {
+            textFill: null,
+            textStroke: textStyle.textStroke,
+            textStrokeWidth: textStyle.textStrokeWidth
+        };
+        textStyle.textFill = '#fff';
+        // Consider text with #fff overflow its container.
+        if (textStyle.textStroke == null) {
+            textStyle.textStroke = opt.autoColor;
+            textStyle.textStrokeWidth == null && (textStyle.textStrokeWidth = 2);
+        }
+    }
+
+    return insideRollback;
+}
+
+function rollbackInsideStyle(style) {
+    var insideRollback = style.insideRollback;
+    if (insideRollback) {
+        style.textFill = insideRollback.textFill;
+        style.textStroke = insideRollback.textStroke;
+        style.textStrokeWidth = insideRollback.textStrokeWidth;
+    }
+}
+
+function getFont(opt, ecModel) {
+    // ecModel or default text style model.
+    var gTextStyleModel = ecModel || ecModel.getModel('textStyle');
+    return trim([
+        // FIXME in node-canvas fontWeight is before fontStyle
+        opt.fontStyle || gTextStyleModel && gTextStyleModel.getShallow('fontStyle') || '',
+        opt.fontWeight || gTextStyleModel && gTextStyleModel.getShallow('fontWeight') || '',
+        (opt.fontSize || gTextStyleModel && gTextStyleModel.getShallow('fontSize') || 12) + 'px',
+        opt.fontFamily || gTextStyleModel && gTextStyleModel.getShallow('fontFamily') || 'sans-serif'
+    ].join(' '));
+}
+
+function animateOrSetProps(isUpdate, el, props, animatableModel, dataIndex, cb) {
+    if (typeof dataIndex === 'function') {
+        cb = dataIndex;
+        dataIndex = null;
+    }
+    // Do not check 'animation' property directly here. Consider this case:
+    // animation model is an `itemModel`, whose does not have `isAnimationEnabled`
+    // but its parent model (`seriesModel`) does.
+    var animationEnabled = animatableModel && animatableModel.isAnimationEnabled();
+
+    if (animationEnabled) {
+        var postfix = isUpdate ? 'Update' : '';
+        var duration = animatableModel.getShallow('animationDuration' + postfix);
+        var animationEasing = animatableModel.getShallow('animationEasing' + postfix);
+        var animationDelay = animatableModel.getShallow('animationDelay' + postfix);
+        if (typeof animationDelay === 'function') {
+            animationDelay = animationDelay(
+                dataIndex,
+                animatableModel.getAnimationDelayParams
+                    ? animatableModel.getAnimationDelayParams(el, dataIndex)
+                    : null
+            );
+        }
+        if (typeof duration === 'function') {
+            duration = duration(dataIndex);
+        }
+
+        duration > 0
+            ? el.animateTo(props, duration, animationDelay || 0, animationEasing, cb, !!cb)
+            : (el.stopAnimation(), el.attr(props), cb && cb());
+    }
+    else {
+        el.stopAnimation();
+        el.attr(props);
+        cb && cb();
+    }
+}
+
+/**
+ * Update graphic element properties with or without animation according to the
+ * configuration in series.
+ *
+ * Caution: this method will stop previous animation.
+ * So if do not use this method to one element twice before
+ * animation starts, unless you know what you are doing.
+ *
+ * @param {module:zrender/Element} el
+ * @param {Object} props
+ * @param {module:echarts/model/Model} [animatableModel]
+ * @param {number} [dataIndex]
+ * @param {Function} [cb]
+ * @example
+ *     graphic.updateProps(el, {
+ *         position: [100, 100]
+ *     }, seriesModel, dataIndex, function () { console.log('Animation done!'); });
+ *     // Or
+ *     graphic.updateProps(el, {
+ *         position: [100, 100]
+ *     }, seriesModel, function () { console.log('Animation done!'); });
+ */
+function updateProps(el, props, animatableModel, dataIndex, cb) {
+    animateOrSetProps(true, el, props, animatableModel, dataIndex, cb);
+}
+
+/**
+ * Init graphic element properties with or without animation according to the
+ * configuration in series.
+ *
+ * Caution: this method will stop previous animation.
+ * So if do not use this method to one element twice before
+ * animation starts, unless you know what you are doing.
+ *
+ * @param {module:zrender/Element} el
+ * @param {Object} props
+ * @param {module:echarts/model/Model} [animatableModel]
+ * @param {number} [dataIndex]
+ * @param {Function} cb
+ */
+function initProps(el, props, animatableModel, dataIndex, cb) {
+    animateOrSetProps(false, el, props, animatableModel, dataIndex, cb);
+}
+
+/**
+ * Get transform matrix of target (param target),
+ * in coordinate of its ancestor (param ancestor)
+ *
+ * @param {module:zrender/mixin/Transformable} target
+ * @param {module:zrender/mixin/Transformable} [ancestor]
+ */
+function getTransform(target, ancestor) {
+    var mat = identity([]);
+
+    while (target && target !== ancestor) {
+        mul$1(mat, target.getLocalTransform(), mat);
+        target = target.parent;
+    }
+
+    return mat;
+}
+
+/**
+ * Apply transform to an vertex.
+ * @param {Array.<number>} target [x, y]
+ * @param {Array.<number>|TypedArray.<number>|Object} transform Can be:
+ *      + Transform matrix: like [1, 0, 0, 1, 0, 0]
+ *      + {position, rotation, scale}, the same as `zrender/Transformable`.
+ * @param {boolean=} invert Whether use invert matrix.
+ * @return {Array.<number>} [x, y]
+ */
+function applyTransform$1(target, transform, invert$$1) {
+    if (transform && !isArrayLike(transform)) {
+        transform = Transformable.getLocalTransform(transform);
+    }
+
+    if (invert$$1) {
+        transform = invert([], transform);
+    }
+    return applyTransform([], target, transform);
+}
+
+/**
+ * @param {string} direction 'left' 'right' 'top' 'bottom'
+ * @param {Array.<number>} transform Transform matrix: like [1, 0, 0, 1, 0, 0]
+ * @param {boolean=} invert Whether use invert matrix.
+ * @return {string} Transformed direction. 'left' 'right' 'top' 'bottom'
+ */
+function transformDirection(direction, transform, invert$$1) {
+
+    // Pick a base, ensure that transform result will not be (0, 0).
+    var hBase = (transform[4] === 0 || transform[5] === 0 || transform[0] === 0)
+        ? 1 : Math.abs(2 * transform[4] / transform[0]);
+    var vBase = (transform[4] === 0 || transform[5] === 0 || transform[2] === 0)
+        ? 1 : Math.abs(2 * transform[4] / transform[2]);
+
+    var vertex = [
+        direction === 'left' ? -hBase : direction === 'right' ? hBase : 0,
+        direction === 'top' ? -vBase : direction === 'bottom' ? vBase : 0
+    ];
+
+    vertex = applyTransform$1(vertex, transform, invert$$1);
+
+    return Math.abs(vertex[0]) > Math.abs(vertex[1])
+        ? (vertex[0] > 0 ? 'right' : 'left')
+        : (vertex[1] > 0 ? 'bottom' : 'top');
+}
+
+/**
+ * Apply group transition animation from g1 to g2.
+ * If no animatableModel, no animation.
+ */
+function groupTransition(g1, g2, animatableModel, cb) {
+    if (!g1 || !g2) {
+        return;
+    }
+
+    function getElMap(g) {
+        var elMap = {};
+        g.traverse(function (el) {
+            if (!el.isGroup && el.anid) {
+                elMap[el.anid] = el;
+            }
+        });
+        return elMap;
+    }
+    function getAnimatableProps(el) {
+        var obj = {
+            position: clone$1(el.position),
+            rotation: el.rotation
+        };
+        if (el.shape) {
+            obj.shape = extend({}, el.shape);
+        }
+        return obj;
+    }
+    var elMap1 = getElMap(g1);
+
+    g2.traverse(function (el) {
+        if (!el.isGroup && el.anid) {
+            var oldEl = elMap1[el.anid];
+            if (oldEl) {
+                var newProp = getAnimatableProps(el);
+                el.attr(getAnimatableProps(oldEl));
+                updateProps(el, newProp, animatableModel, el.dataIndex);
+            }
+            // else {
+            //     if (el.previousProps) {
+            //         graphic.updateProps
+            //     }
+            // }
+        }
+    });
+}
+
+/**
+ * @param {Array.<Array.<number>>} points Like: [[23, 44], [53, 66], ...]
+ * @param {Object} rect {x, y, width, height}
+ * @return {Array.<Array.<number>>} A new clipped points.
+ */
+function clipPointsByRect(points, rect) {
+    return map(points, function (point) {
+        var x = point[0];
+        x = mathMax$1(x, rect.x);
+        x = mathMin$1(x, rect.x + rect.width);
+        var y = point[1];
+        y = mathMax$1(y, rect.y);
+        y = mathMin$1(y, rect.y + rect.height);
+        return [x, y];
+    });
+}
+
+/**
+ * @param {Object} targetRect {x, y, width, height}
+ * @param {Object} rect {x, y, width, height}
+ * @return {Object} A new clipped rect. If rect size are negative, return undefined.
+ */
+function clipRectByRect(targetRect, rect) {
+    var x = mathMax$1(targetRect.x, rect.x);
+    var x2 = mathMin$1(targetRect.x + targetRect.width, rect.x + rect.width);
+    var y = mathMax$1(targetRect.y, rect.y);
+    var y2 = mathMin$1(targetRect.y + targetRect.height, rect.y + rect.height);
+
+    if (x2 >= x && y2 >= y) {
+        return {
+            x: x,
+            y: y,
+            width: x2 - x,
+            height: y2 - y
+        };
+    }
+}
+
+/**
+ * @param {string} iconStr Support 'image://' or 'path://' or direct svg path.
+ * @param {Object} [opt] Properties of `module:zrender/Element`, except `style`.
+ * @param {Object} [rect] {x, y, width, height}
+ * @return {module:zrender/Element} Icon path or image element.
+ */
+function createIcon(iconStr, opt, rect) {
+    opt = extend({rectHover: true}, opt);
+    var style = opt.style = {strokeNoScale: true};
+    rect = rect || {x: -1, y: -1, width: 2, height: 2};
+
+    if (iconStr) {
+        return iconStr.indexOf('image://') === 0
+            ? (
+                style.image = iconStr.slice(8),
+                defaults(style, rect),
+                new ZImage(opt)
+            )
+            : (
+                makePath(
+                    iconStr.replace('path://', ''),
+                    opt,
+                    rect,
+                    'center'
+                )
+            );
+    }
+}
+
+
+
+
+var graphic = (Object.freeze || Object)({
+	extendShape: extendShape,
+	extendPath: extendPath,
+	makePath: makePath,
+	makeImage: makeImage,
+	mergePath: mergePath,
+	resizePath: resizePath,
+	subPixelOptimizeLine: subPixelOptimizeLine,
+	subPixelOptimizeRect: subPixelOptimizeRect,
+	subPixelOptimize: subPixelOptimize,
+	setHoverStyle: setHoverStyle,
+	setLabelStyle: setLabelStyle,
+	setTextStyle: setTextStyle,
+	setText: setText,
+	getFont: getFont,
+	updateProps: updateProps,
+	initProps: initProps,
+	getTransform: getTransform,
+	applyTransform: applyTransform$1,
+	transformDirection: transformDirection,
+	groupTransition: groupTransition,
+	clipPointsByRect: clipPointsByRect,
+	clipRectByRect: clipRectByRect,
+	createIcon: createIcon,
+	Group: Group,
+	Image: ZImage,
+	Text: Text,
+	Circle: Circle,
+	Sector: Sector,
+	Ring: Ring,
+	Polygon: Polygon,
+	Polyline: Polyline,
+	Rect: Rect,
+	Line: Line,
+	BezierCurve: BezierCurve,
+	Arc: Arc,
+	IncrementalDisplayable: IncrementalDisplayble,
+	CompoundPath: CompoundPath,
+	LinearGradient: LinearGradient,
+	RadialGradient: RadialGradient,
+	BoundingRect: BoundingRect
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var PATH_COLOR = ['textStyle', 'color'];
+
+var textStyleMixin = {
+    /**
+     * Get color property or get color from option.textStyle.color
+     * @param {boolean} [isEmphasis]
+     * @return {string}
+     */
+    getTextColor: function (isEmphasis) {
+        var ecModel = this.ecModel;
+        return this.getShallow('color')
+            || (
+                (!isEmphasis && ecModel) ? ecModel.get(PATH_COLOR) : null
+            );
+    },
+
+    /**
+     * Create font string from fontStyle, fontWeight, fontSize, fontFamily
+     * @return {string}
+     */
+    getFont: function () {
+        return getFont({
+            fontStyle: this.getShallow('fontStyle'),
+            fontWeight: this.getShallow('fontWeight'),
+            fontSize: this.getShallow('fontSize'),
+            fontFamily: this.getShallow('fontFamily')
+        }, this.ecModel);
+    },
+
+    getTextRect: function (text) {
+        return getBoundingRect(
+            text,
+            this.getFont(),
+            this.getShallow('align'),
+            this.getShallow('verticalAlign') || this.getShallow('baseline'),
+            this.getShallow('padding'),
+            this.getShallow('rich'),
+            this.getShallow('truncateText')
+        );
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var getItemStyle = makeStyleMapper(
+    [
+        ['fill', 'color'],
+        ['stroke', 'borderColor'],
+        ['lineWidth', 'borderWidth'],
+        ['opacity'],
+        ['shadowBlur'],
+        ['shadowOffsetX'],
+        ['shadowOffsetY'],
+        ['shadowColor'],
+        ['textPosition'],
+        ['textAlign']
+    ]
+);
+
+var itemStyleMixin = {
+    getItemStyle: function (excludes, includes) {
+        var style = getItemStyle(this, excludes, includes);
+        var lineDash = this.getBorderLineDash();
+        lineDash && (style.lineDash = lineDash);
+        return style;
+    },
+
+    getBorderLineDash: function () {
+        var lineType = this.get('borderType');
+        return (lineType === 'solid' || lineType == null) ? null
+            : (lineType === 'dashed' ? [5, 5] : [1, 1]);
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @module echarts/model/Model
+ */
+
+var mixin$1 = mixin;
+var inner = makeInner();
+
+/**
+ * @alias module:echarts/model/Model
+ * @constructor
+ * @param {Object} option
+ * @param {module:echarts/model/Model} [parentModel]
+ * @param {module:echarts/model/Global} [ecModel]
+ */
+function Model(option, parentModel, ecModel) {
+    /**
+     * @type {module:echarts/model/Model}
+     * @readOnly
+     */
+    this.parentModel = parentModel;
+
+    /**
+     * @type {module:echarts/model/Global}
+     * @readOnly
+     */
+    this.ecModel = ecModel;
+
+    /**
+     * @type {Object}
+     * @protected
+     */
+    this.option = option;
+
+    // Simple optimization
+    // if (this.init) {
+    //     if (arguments.length <= 4) {
+    //         this.init(option, parentModel, ecModel, extraOpt);
+    //     }
+    //     else {
+    //         this.init.apply(this, arguments);
+    //     }
+    // }
+}
+
+Model.prototype = {
+
+    constructor: Model,
+
+    /**
+     * Model çš„åˆå§‹åŒ–å‡½æ•°
+     * @param {Object} option
+     */
+    init: null,
+
+    /**
+     * ä»Žæ–°çš„ Option merge
+     */
+    mergeOption: function (option) {
+        merge(this.option, option, true);
+    },
+
+    /**
+     * @param {string|Array.<string>} path
+     * @param {boolean} [ignoreParent=false]
+     * @return {*}
+     */
+    get: function (path, ignoreParent) {
+        if (path == null) {
+            return this.option;
+        }
+
+        return doGet(
+            this.option,
+            this.parsePath(path),
+            !ignoreParent && getParent(this, path)
+        );
+    },
+
+    /**
+     * @param {string} key
+     * @param {boolean} [ignoreParent=false]
+     * @return {*}
+     */
+    getShallow: function (key, ignoreParent) {
+        var option = this.option;
+
+        var val = option == null ? option : option[key];
+        var parentModel = !ignoreParent && getParent(this, key);
+        if (val == null && parentModel) {
+            val = parentModel.getShallow(key);
+        }
+        return val;
+    },
+
+    /**
+     * @param {string|Array.<string>} [path]
+     * @param {module:echarts/model/Model} [parentModel]
+     * @return {module:echarts/model/Model}
+     */
+    getModel: function (path, parentModel) {
+        var obj = path == null
+            ? this.option
+            : doGet(this.option, path = this.parsePath(path));
+
+        var thisParentModel;
+        parentModel = parentModel || (
+            (thisParentModel = getParent(this, path))
+                && thisParentModel.getModel(path)
+        );
+
+        return new Model(obj, parentModel, this.ecModel);
+    },
+
+    /**
+     * If model has option
+     */
+    isEmpty: function () {
+        return this.option == null;
+    },
+
+    restoreData: function () {},
+
+    // Pending
+    clone: function () {
+        var Ctor = this.constructor;
+        return new Ctor(clone(this.option));
+    },
+
+    setReadOnly: function (properties) {
+        // clazzUtil.setReadOnly(this, properties);
+    },
+
+    // If path is null/undefined, return null/undefined.
+    parsePath: function(path) {
+        if (typeof path === 'string') {
+            path = path.split('.');
+        }
+        return path;
+    },
+
+    /**
+     * @param {Function} getParentMethod
+     *        param {Array.<string>|string} path
+     *        return {module:echarts/model/Model}
+     */
+    customizeGetParent: function (getParentMethod) {
+        inner(this).getParent = getParentMethod;
+    },
+
+    isAnimationEnabled: function () {
+        if (!env$1.node) {
+            if (this.option.animation != null) {
+                return !!this.option.animation;
+            }
+            else if (this.parentModel) {
+                return this.parentModel.isAnimationEnabled();
+            }
+        }
+    }
+
+};
+
+function doGet(obj, pathArr, parentModel) {
+    for (var i = 0; i < pathArr.length; i++) {
+        // Ignore empty
+        if (!pathArr[i]) {
+            continue;
+        }
+        // obj could be number/string/... (like 0)
+        obj = (obj && typeof obj === 'object') ? obj[pathArr[i]] : null;
+        if (obj == null) {
+            break;
+        }
+    }
+    if (obj == null && parentModel) {
+        obj = parentModel.get(pathArr);
+    }
+    return obj;
+}
+
+// `path` can be null/undefined
+function getParent(model, path) {
+    var getParentMethod = inner(model).getParent;
+    return getParentMethod ? getParentMethod.call(model, path) : model.parentModel;
+}
+
+// Enable Model.extend.
+enableClassExtend(Model);
+enableClassCheck(Model);
+
+mixin$1(Model, lineStyleMixin);
+mixin$1(Model, areaStyleMixin);
+mixin$1(Model, textStyleMixin);
+mixin$1(Model, itemStyleMixin);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var base = 0;
+
+/**
+ * @public
+ * @param {string} type
+ * @return {string}
+ */
+function getUID(type) {
+    // Considering the case of crossing js context,
+    // use Math.random to make id as unique as possible.
+    return [(type || ''), base++, Math.random().toFixed(5)].join('_');
+}
+
+/**
+ * @inner
+ */
+function enableSubTypeDefaulter(entity) {
+
+    var subTypeDefaulters = {};
+
+    entity.registerSubTypeDefaulter = function (componentType, defaulter) {
+        componentType = parseClassType$1(componentType);
+        subTypeDefaulters[componentType.main] = defaulter;
+    };
+
+    entity.determineSubType = function (componentType, option) {
+        var type = option.type;
+        if (!type) {
+            var componentTypeMain = parseClassType$1(componentType).main;
+            if (entity.hasSubTypes(componentType) && subTypeDefaulters[componentTypeMain]) {
+                type = subTypeDefaulters[componentTypeMain](option);
+            }
+        }
+        return type;
+    };
+
+    return entity;
+}
+
+/**
+ * Topological travel on Activity Network (Activity On Vertices).
+ * Dependencies is defined in Model.prototype.dependencies, like ['xAxis', 'yAxis'].
+ *
+ * If 'xAxis' or 'yAxis' is absent in componentTypeList, just ignore it in topology.
+ *
+ * If there is circle dependencey, Error will be thrown.
+ *
+ */
+function enableTopologicalTravel(entity, dependencyGetter) {
+
+    /**
+     * @public
+     * @param {Array.<string>} targetNameList Target Component type list.
+     *                                           Can be ['aa', 'bb', 'aa.xx']
+     * @param {Array.<string>} fullNameList By which we can build dependency graph.
+     * @param {Function} callback Params: componentType, dependencies.
+     * @param {Object} context Scope of callback.
+     */
+    entity.topologicalTravel = function (targetNameList, fullNameList, callback, context) {
+        if (!targetNameList.length) {
+            return;
+        }
+
+        var result = makeDepndencyGraph(fullNameList);
+        var graph = result.graph;
+        var stack = result.noEntryList;
+
+        var targetNameSet = {};
+        each$1(targetNameList, function (name) {
+            targetNameSet[name] = true;
+        });
+
+        while (stack.length) {
+            var currComponentType = stack.pop();
+            var currVertex = graph[currComponentType];
+            var isInTargetNameSet = !!targetNameSet[currComponentType];
+            if (isInTargetNameSet) {
+                callback.call(context, currComponentType, currVertex.originalDeps.slice());
+                delete targetNameSet[currComponentType];
+            }
+            each$1(
+                currVertex.successor,
+                isInTargetNameSet ? removeEdgeAndAdd : removeEdge
+            );
+        }
+
+        each$1(targetNameSet, function () {
+            throw new Error('Circle dependency may exists');
+        });
+
+        function removeEdge(succComponentType) {
+            graph[succComponentType].entryCount--;
+            if (graph[succComponentType].entryCount === 0) {
+                stack.push(succComponentType);
+            }
+        }
+
+        // Consider this case: legend depends on series, and we call
+        // chart.setOption({series: [...]}), where only series is in option.
+        // If we do not have 'removeEdgeAndAdd', legendModel.mergeOption will
+        // not be called, but only sereis.mergeOption is called. Thus legend
+        // have no chance to update its local record about series (like which
+        // name of series is available in legend).
+        function removeEdgeAndAdd(succComponentType) {
+            targetNameSet[succComponentType] = true;
+            removeEdge(succComponentType);
+        }
+    };
+
+    /**
+     * DepndencyGraph: {Object}
+     * key: conponentType,
+     * value: {
+     *     successor: [conponentTypes...],
+     *     originalDeps: [conponentTypes...],
+     *     entryCount: {number}
+     * }
+     */
+    function makeDepndencyGraph(fullNameList) {
+        var graph = {};
+        var noEntryList = [];
+
+        each$1(fullNameList, function (name) {
+
+            var thisItem = createDependencyGraphItem(graph, name);
+            var originalDeps = thisItem.originalDeps = dependencyGetter(name);
+
+            var availableDeps = getAvailableDependencies(originalDeps, fullNameList);
+            thisItem.entryCount = availableDeps.length;
+            if (thisItem.entryCount === 0) {
+                noEntryList.push(name);
+            }
+
+            each$1(availableDeps, function (dependentName) {
+                if (indexOf(thisItem.predecessor, dependentName) < 0) {
+                    thisItem.predecessor.push(dependentName);
+                }
+                var thatItem = createDependencyGraphItem(graph, dependentName);
+                if (indexOf(thatItem.successor, dependentName) < 0) {
+                    thatItem.successor.push(name);
+                }
+            });
+        });
+
+        return {graph: graph, noEntryList: noEntryList};
+    }
+
+    function createDependencyGraphItem(graph, name) {
+        if (!graph[name]) {
+            graph[name] = {predecessor: [], successor: []};
+        }
+        return graph[name];
+    }
+
+    function getAvailableDependencies(originalDeps, fullNameList) {
+        var availableDeps = [];
+        each$1(originalDeps, function (dep) {
+            indexOf(fullNameList, dep) >= 0 && availableDeps.push(dep);
+        });
+        return availableDeps;
+    }
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var RADIAN_EPSILON = 1e-4;
+
+function _trim(str) {
+    return str.replace(/^\s+/, '').replace(/\s+$/, '');
+}
+
+/**
+ * Linear mapping a value from domain to range
+ * @memberOf module:echarts/util/number
+ * @param  {(number|Array.<number>)} val
+ * @param  {Array.<number>} domain Domain extent domain[0] can be bigger than domain[1]
+ * @param  {Array.<number>} range  Range extent range[0] can be bigger than range[1]
+ * @param  {boolean} clamp
+ * @return {(number|Array.<number>}
+ */
+function linearMap(val, domain, range, clamp) {
+    var subDomain = domain[1] - domain[0];
+    var subRange = range[1] - range[0];
+
+    if (subDomain === 0) {
+        return subRange === 0
+            ? range[0]
+            : (range[0] + range[1]) / 2;
+    }
+
+    // Avoid accuracy problem in edge, such as
+    // 146.39 - 62.83 === 83.55999999999999.
+    // See echarts/test/ut/spec/util/number.js#linearMap#accuracyError
+    // It is a little verbose for efficiency considering this method
+    // is a hotspot.
+    if (clamp) {
+        if (subDomain > 0) {
+            if (val <= domain[0]) {
+                return range[0];
+            }
+            else if (val >= domain[1]) {
+                return range[1];
+            }
+        }
+        else {
+            if (val >= domain[0]) {
+                return range[0];
+            }
+            else if (val <= domain[1]) {
+                return range[1];
+            }
+        }
+    }
+    else {
+        if (val === domain[0]) {
+            return range[0];
+        }
+        if (val === domain[1]) {
+            return range[1];
+        }
+    }
+
+    return (val - domain[0]) / subDomain * subRange + range[0];
+}
+
+/**
+ * Convert a percent string to absolute number.
+ * Returns NaN if percent is not a valid string or number
+ * @memberOf module:echarts/util/number
+ * @param {string|number} percent
+ * @param {number} all
+ * @return {number}
+ */
+function parsePercent$1(percent, all) {
+    switch (percent) {
+        case 'center':
+        case 'middle':
+            percent = '50%';
+            break;
+        case 'left':
+        case 'top':
+            percent = '0%';
+            break;
+        case 'right':
+        case 'bottom':
+            percent = '100%';
+            break;
+    }
+    if (typeof percent === 'string') {
+        if (_trim(percent).match(/%$/)) {
+            return parseFloat(percent) / 100 * all;
+        }
+
+        return parseFloat(percent);
+    }
+
+    return percent == null ? NaN : +percent;
+}
+
+/**
+ * (1) Fix rounding error of float numbers.
+ * (2) Support return string to avoid scientific notation like '3.5e-7'.
+ *
+ * @param {number} x
+ * @param {number} [precision]
+ * @param {boolean} [returnStr]
+ * @return {number|string}
+ */
+function round$1(x, precision, returnStr) {
+    if (precision == null) {
+        precision = 10;
+    }
+    // Avoid range error
+    precision = Math.min(Math.max(0, precision), 20);
+    x = (+x).toFixed(precision);
+    return returnStr ? x : +x;
+}
+
+function asc(arr) {
+    arr.sort(function (a, b) {
+        return a - b;
+    });
+    return arr;
+}
+
+/**
+ * Get precision
+ * @param {number} val
+ */
+function getPrecision(val) {
+    val = +val;
+    if (isNaN(val)) {
+        return 0;
+    }
+    // It is much faster than methods converting number to string as follows
+    //      var tmp = val.toString();
+    //      return tmp.length - 1 - tmp.indexOf('.');
+    // especially when precision is low
+    var e = 1;
+    var count = 0;
+    while (Math.round(val * e) / e !== val) {
+        e *= 10;
+        count++;
+    }
+    return count;
+}
+
+/**
+ * @param {string|number} val
+ * @return {number}
+ */
+function getPrecisionSafe(val) {
+    var str = val.toString();
+
+    // Consider scientific notation: '3.4e-12' '3.4e+12'
+    var eIndex = str.indexOf('e');
+    if (eIndex > 0) {
+        var precision = +str.slice(eIndex + 1);
+        return precision < 0 ? -precision : 0;
+    }
+    else {
+        var dotIndex = str.indexOf('.');
+        return dotIndex < 0 ? 0 : str.length - 1 - dotIndex;
+    }
+}
+
+/**
+ * Minimal dicernible data precisioin according to a single pixel.
+ *
+ * @param {Array.<number>} dataExtent
+ * @param {Array.<number>} pixelExtent
+ * @return {number} precision
+ */
+function getPixelPrecision(dataExtent, pixelExtent) {
+    var log = Math.log;
+    var LN10 = Math.LN10;
+    var dataQuantity = Math.floor(log(dataExtent[1] - dataExtent[0]) / LN10);
+    var sizeQuantity = Math.round(log(Math.abs(pixelExtent[1] - pixelExtent[0])) / LN10);
+    // toFixed() digits argument must be between 0 and 20.
+    var precision = Math.min(Math.max(-dataQuantity + sizeQuantity, 0), 20);
+    return !isFinite(precision) ? 20 : precision;
+}
+
+/**
+ * Get a data of given precision, assuring the sum of percentages
+ * in valueList is 1.
+ * The largest remainer method is used.
+ * https://en.wikipedia.org/wiki/Largest_remainder_method
+ *
+ * @param {Array.<number>} valueList a list of all data
+ * @param {number} idx index of the data to be processed in valueList
+ * @param {number} precision integer number showing digits of precision
+ * @return {number} percent ranging from 0 to 100
+ */
+function getPercentWithPrecision(valueList, idx, precision) {
+    if (!valueList[idx]) {
+        return 0;
+    }
+
+    var sum = reduce(valueList, function (acc, val) {
+        return acc + (isNaN(val) ? 0 : val);
+    }, 0);
+    if (sum === 0) {
+        return 0;
+    }
+
+    var digits = Math.pow(10, precision);
+    var votesPerQuota = map(valueList, function (val) {
+        return (isNaN(val) ? 0 : val) / sum * digits * 100;
+    });
+    var targetSeats = digits * 100;
+
+    var seats = map(votesPerQuota, function (votes) {
+        // Assign automatic seats.
+        return Math.floor(votes);
+    });
+    var currentSum = reduce(seats, function (acc, val) {
+        return acc + val;
+    }, 0);
+
+    var remainder = map(votesPerQuota, function (votes, idx) {
+        return votes - seats[idx];
+    });
+
+    // Has remainding votes.
+    while (currentSum < targetSeats) {
+        // Find next largest remainder.
+        var max = Number.NEGATIVE_INFINITY;
+        var maxId = null;
+        for (var i = 0, len = remainder.length; i < len; ++i) {
+            if (remainder[i] > max) {
+                max = remainder[i];
+                maxId = i;
+            }
+        }
+
+        // Add a vote to max remainder.
+        ++seats[maxId];
+        remainder[maxId] = 0;
+        ++currentSum;
+    }
+
+    return seats[idx] / digits;
+}
+
+// Number.MAX_SAFE_INTEGER, ie do not support.
+var MAX_SAFE_INTEGER = 9007199254740991;
+
+/**
+ * To 0 - 2 * PI, considering negative radian.
+ * @param {number} radian
+ * @return {number}
+ */
+function remRadian(radian) {
+    var pi2 = Math.PI * 2;
+    return (radian % pi2 + pi2) % pi2;
+}
+
+/**
+ * @param {type} radian
+ * @return {boolean}
+ */
+function isRadianAroundZero(val) {
+    return val > -RADIAN_EPSILON && val < RADIAN_EPSILON;
+}
+
+var TIME_REG = /^(?:(\d{4})(?:[-\/](\d{1,2})(?:[-\/](\d{1,2})(?:[T ](\d{1,2})(?::(\d\d)(?::(\d\d)(?:[.,](\d+))?)?)?(Z|[\+\-]\d\d:?\d\d)?)?)?)?)?$/; // jshint ignore:line
+
+/**
+ * @param {string|Date|number} value These values can be accepted:
+ *   + An instance of Date, represent a time in its own time zone.
+ *   + Or string in a subset of ISO 8601, only including:
+ *     + only year, month, date: '2012-03', '2012-03-01', '2012-03-01 05', '2012-03-01 05:06',
+ *     + separated with T or space: '2012-03-01T12:22:33.123', '2012-03-01 12:22:33.123',
+ *     + time zone: '2012-03-01T12:22:33Z', '2012-03-01T12:22:33+8000', '2012-03-01T12:22:33-05:00',
+ *     all of which will be treated as local time if time zone is not specified
+ *     (see <https://momentjs.com/>).
+ *   + Or other string format, including (all of which will be treated as loacal time):
+ *     '2012', '2012-3-1', '2012/3/1', '2012/03/01',
+ *     '2009/6/12 2:00', '2009/6/12 2:05:08', '2009/6/12 2:05:08.123'
+ *   + a timestamp, which represent a time in UTC.
+ * @return {Date} date
+ */
+function parseDate(value) {
+    if (value instanceof Date) {
+        return value;
+    }
+    else if (typeof value === 'string') {
+        // Different browsers parse date in different way, so we parse it manually.
+        // Some other issues:
+        // new Date('1970-01-01') is UTC,
+        // new Date('1970/01/01') and new Date('1970-1-01') is local.
+        // See issue #3623
+        var match = TIME_REG.exec(value);
+
+        if (!match) {
+            // return Invalid Date.
+            return new Date(NaN);
+        }
+
+        // Use local time when no timezone offset specifed.
+        if (!match[8]) {
+            // match[n] can only be string or undefined.
+            // But take care of '12' + 1 => '121'.
+            return new Date(
+                +match[1],
+                +(match[2] || 1) - 1,
+                +match[3] || 1,
+                +match[4] || 0,
+                +(match[5] || 0),
+                +match[6] || 0,
+                +match[7] || 0
+            );
+        }
+        // Timezoneoffset of Javascript Date has considered DST (Daylight Saving Time,
+        // https://tc39.github.io/ecma262/#sec-daylight-saving-time-adjustment).
+        // For example, system timezone is set as "Time Zone: America/Toronto",
+        // then these code will get different result:
+        // `new Date(1478411999999).getTimezoneOffset();  // get 240`
+        // `new Date(1478412000000).getTimezoneOffset();  // get 300`
+        // So we should not use `new Date`, but use `Date.UTC`.
+        else {
+            var hour = +match[4] || 0;
+            if (match[8].toUpperCase() !== 'Z') {
+                hour -= match[8].slice(0, 3);
+            }
+            return new Date(Date.UTC(
+                +match[1],
+                +(match[2] || 1) - 1,
+                +match[3] || 1,
+                hour,
+                +(match[5] || 0),
+                +match[6] || 0,
+                +match[7] || 0
+            ));
+        }
+    }
+    else if (value == null) {
+        return new Date(NaN);
+    }
+
+    return new Date(Math.round(value));
+}
+
+/**
+ * Quantity of a number. e.g. 0.1, 1, 10, 100
+ *
+ * @param  {number} val
+ * @return {number}
+ */
+function quantity(val) {
+    return Math.pow(10, quantityExponent(val));
+}
+
+function quantityExponent(val) {
+    return Math.floor(Math.log(val) / Math.LN10);
+}
+
+/**
+ * find a â€œniceâ€ number approximately equal to x. Round the number if round = true,
+ * take ceiling if round = false. The primary observation is that the â€œnicestâ€
+ * numbers in decimal are 1, 2, and 5, and all power-of-ten multiples of these numbers.
+ *
+ * See "Nice Numbers for Graph Labels" of Graphic Gems.
+ *
+ * @param  {number} val Non-negative value.
+ * @param  {boolean} round
+ * @return {number}
+ */
+function nice(val, round) {
+    var exponent = quantityExponent(val);
+    var exp10 = Math.pow(10, exponent);
+    var f = val / exp10; // 1 <= f < 10
+    var nf;
+    if (round) {
+        if (f < 1.5) { nf = 1; }
+        else if (f < 2.5) { nf = 2; }
+        else if (f < 4) { nf = 3; }
+        else if (f < 7) { nf = 5; }
+        else { nf = 10; }
+    }
+    else {
+        if (f < 1) { nf = 1; }
+        else if (f < 2) { nf = 2; }
+        else if (f < 3) { nf = 3; }
+        else if (f < 5) { nf = 5; }
+        else { nf = 10; }
+    }
+    val = nf * exp10;
+
+    // Fix 3 * 0.1 === 0.30000000000000004 issue (see IEEE 754).
+    // 20 is the uppper bound of toFixed.
+    return exponent >= -20 ? +val.toFixed(exponent < 0 ? -exponent : 0) : val;
+}
+
+/**
+ * Order intervals asc, and split them when overlap.
+ * expect(numberUtil.reformIntervals([
+ *     {interval: [18, 62], close: [1, 1]},
+ *     {interval: [-Infinity, -70], close: [0, 0]},
+ *     {interval: [-70, -26], close: [1, 1]},
+ *     {interval: [-26, 18], close: [1, 1]},
+ *     {interval: [62, 150], close: [1, 1]},
+ *     {interval: [106, 150], close: [1, 1]},
+ *     {interval: [150, Infinity], close: [0, 0]}
+ * ])).toEqual([
+ *     {interval: [-Infinity, -70], close: [0, 0]},
+ *     {interval: [-70, -26], close: [1, 1]},
+ *     {interval: [-26, 18], close: [0, 1]},
+ *     {interval: [18, 62], close: [0, 1]},
+ *     {interval: [62, 150], close: [0, 1]},
+ *     {interval: [150, Infinity], close: [0, 0]}
+ * ]);
+ * @param {Array.<Object>} list, where `close` mean open or close
+ *        of the interval, and Infinity can be used.
+ * @return {Array.<Object>} The origin list, which has been reformed.
+ */
+function reformIntervals(list) {
+    list.sort(function (a, b) {
+        return littleThan(a, b, 0) ? -1 : 1;
+    });
+
+    var curr = -Infinity;
+    var currClose = 1;
+    for (var i = 0; i < list.length;) {
+        var interval = list[i].interval;
+        var close = list[i].close;
+
+        for (var lg = 0; lg < 2; lg++) {
+            if (interval[lg] <= curr) {
+                interval[lg] = curr;
+                close[lg] = !lg ? 1 - currClose : 1;
+            }
+            curr = interval[lg];
+            currClose = close[lg];
+        }
+
+        if (interval[0] === interval[1] && close[0] * close[1] !== 1) {
+            list.splice(i, 1);
+        }
+        else {
+            i++;
+        }
+    }
+
+    return list;
+
+    function littleThan(a, b, lg) {
+        return a.interval[lg] < b.interval[lg]
+            || (
+                a.interval[lg] === b.interval[lg]
+                && (
+                    (a.close[lg] - b.close[lg] === (!lg ? 1 : -1))
+                    || (!lg && littleThan(a, b, 1))
+                )
+            );
+    }
+}
+
+/**
+ * parseFloat NaNs numeric-cast false positives (null|true|false|"")
+ * ...but misinterprets leading-number strings, particularly hex literals ("0x...")
+ * subtraction forces infinities to NaN
+ *
+ * @param {*} v
+ * @return {boolean}
+ */
+function isNumeric(v) {
+    return v - parseFloat(v) >= 0;
+}
+
+
+var number = (Object.freeze || Object)({
+	linearMap: linearMap,
+	parsePercent: parsePercent$1,
+	round: round$1,
+	asc: asc,
+	getPrecision: getPrecision,
+	getPrecisionSafe: getPrecisionSafe,
+	getPixelPrecision: getPixelPrecision,
+	getPercentWithPrecision: getPercentWithPrecision,
+	MAX_SAFE_INTEGER: MAX_SAFE_INTEGER,
+	remRadian: remRadian,
+	isRadianAroundZero: isRadianAroundZero,
+	parseDate: parseDate,
+	quantity: quantity,
+	nice: nice,
+	reformIntervals: reformIntervals,
+	isNumeric: isNumeric
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * æ¯ä¸‰ä½é»˜è®¤åŠ ,æ ¼å¼åŒ–
+ * @param {string|number} x
+ * @return {string}
+ */
+function addCommas(x) {
+    if (isNaN(x)) {
+        return '-';
+    }
+    x = (x + '').split('.');
+    return x[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g,'$1,')
+            + (x.length > 1 ? ('.' + x[1]) : '');
+}
+
+/**
+ * @param {string} str
+ * @param {boolean} [upperCaseFirst=false]
+ * @return {string} str
+ */
+function toCamelCase(str, upperCaseFirst) {
+    str = (str || '').toLowerCase().replace(/-(.)/g, function(match, group1) {
+        return group1.toUpperCase();
+    });
+
+    if (upperCaseFirst && str) {
+        str = str.charAt(0).toUpperCase() + str.slice(1);
+    }
+
+    return str;
+}
+
+var normalizeCssArray$1 = normalizeCssArray;
+
+
+var replaceReg = /([&<>"'])/g;
+var replaceMap = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    '\'': '&#39;'
+};
+
+function encodeHTML(source) {
+    return source == null
+        ? ''
+        : (source + '').replace(replaceReg, function (str, c) {
+            return replaceMap[c];
+        });
+}
+
+var TPL_VAR_ALIAS = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
+
+var wrapVar = function (varName, seriesIdx) {
+    return '{' + varName + (seriesIdx == null ? '' : seriesIdx) + '}';
+};
+
+/**
+ * Template formatter
+ * @param {string} tpl
+ * @param {Array.<Object>|Object} paramsList
+ * @param {boolean} [encode=false]
+ * @return {string}
+ */
+function formatTpl(tpl, paramsList, encode) {
+    if (!isArray(paramsList)) {
+        paramsList = [paramsList];
+    }
+    var seriesLen = paramsList.length;
+    if (!seriesLen) {
+        return '';
+    }
+
+    var $vars = paramsList[0].$vars || [];
+    for (var i = 0; i < $vars.length; i++) {
+        var alias = TPL_VAR_ALIAS[i];
+        tpl = tpl.replace(wrapVar(alias), wrapVar(alias, 0));
+    }
+    for (var seriesIdx = 0; seriesIdx < seriesLen; seriesIdx++) {
+        for (var k = 0; k < $vars.length; k++) {
+            var val = paramsList[seriesIdx][$vars[k]];
+            tpl = tpl.replace(
+                wrapVar(TPL_VAR_ALIAS[k], seriesIdx),
+                encode ? encodeHTML(val) : val
+            );
+        }
+    }
+
+    return tpl;
+}
+
+/**
+ * simple Template formatter
+ *
+ * @param {string} tpl
+ * @param {Object} param
+ * @param {boolean} [encode=false]
+ * @return {string}
+ */
+function formatTplSimple(tpl, param, encode) {
+    each$1(param, function (value, key) {
+        tpl = tpl.replace(
+            '{' + key + '}',
+            encode ? encodeHTML(value) : value
+        );
+    });
+    return tpl;
+}
+
+/**
+ * @param {Object|string} [opt] If string, means color.
+ * @param {string} [opt.color]
+ * @param {string} [opt.extraCssText]
+ * @param {string} [opt.type='item'] 'item' or 'subItem'
+ * @return {string}
+ */
+function getTooltipMarker(opt, extraCssText) {
+    opt = isString(opt) ? {color: opt, extraCssText: extraCssText} : (opt || {});
+    var color = opt.color;
+    var type = opt.type;
+    var extraCssText = opt.extraCssText;
+
+    if (!color) {
+        return '';
+    }
+
+    return type === 'subItem'
+        ? '<span style="display:inline-block;vertical-align:middle;margin-right:8px;margin-left:3px;'
+            + 'border-radius:4px;width:4px;height:4px;background-color:'
+            + encodeHTML(color) + ';' + (extraCssText || '') + '"></span>'
+        : '<span style="display:inline-block;margin-right:5px;'
+            + 'border-radius:10px;width:10px;height:10px;background-color:'
+            + encodeHTML(color) + ';' + (extraCssText || '') + '"></span>';
+}
+
+function pad(str, len) {
+    str += '';
+    return '0000'.substr(0, len - str.length) + str;
+}
+
+
+/**
+ * ISO Date format
+ * @param {string} tpl
+ * @param {number} value
+ * @param {boolean} [isUTC=false] Default in local time.
+ *           see `module:echarts/scale/Time`
+ *           and `module:echarts/util/number#parseDate`.
+ * @inner
+ */
+function formatTime(tpl, value, isUTC) {
+    if (tpl === 'week'
+        || tpl === 'month'
+        || tpl === 'quarter'
+        || tpl === 'half-year'
+        || tpl === 'year'
+    ) {
+        tpl = 'MM-dd\nyyyy';
+    }
+
+    var date = parseDate(value);
+    var utc = isUTC ? 'UTC' : '';
+    var y = date['get' + utc + 'FullYear']();
+    var M = date['get' + utc + 'Month']() + 1;
+    var d = date['get' + utc + 'Date']();
+    var h = date['get' + utc + 'Hours']();
+    var m = date['get' + utc + 'Minutes']();
+    var s = date['get' + utc + 'Seconds']();
+    var S = date['get' + utc + 'Milliseconds']();
+
+    tpl = tpl.replace('MM', pad(M, 2))
+        .replace('M', M)
+        .replace('yyyy', y)
+        .replace('yy', y % 100)
+        .replace('dd', pad(d, 2))
+        .replace('d', d)
+        .replace('hh', pad(h, 2))
+        .replace('h', h)
+        .replace('mm', pad(m, 2))
+        .replace('m', m)
+        .replace('ss', pad(s, 2))
+        .replace('s', s)
+        .replace('SSS', pad(S, 3));
+
+    return tpl;
+}
+
+/**
+ * Capital first
+ * @param {string} str
+ * @return {string}
+ */
+function capitalFirst(str) {
+    return str ? str.charAt(0).toUpperCase() + str.substr(1) : str;
+}
+
+var truncateText$1 = truncateText;
+
+var getTextRect = getBoundingRect;
+
+
+var format = (Object.freeze || Object)({
+	addCommas: addCommas,
+	toCamelCase: toCamelCase,
+	normalizeCssArray: normalizeCssArray$1,
+	encodeHTML: encodeHTML,
+	formatTpl: formatTpl,
+	formatTplSimple: formatTplSimple,
+	getTooltipMarker: getTooltipMarker,
+	formatTime: formatTime,
+	capitalFirst: capitalFirst,
+	truncateText: truncateText$1,
+	getTextRect: getTextRect
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// Layout helpers for each component positioning
+
+var each$3 = each$1;
+
+/**
+ * @public
+ */
+var LOCATION_PARAMS = [
+    'left', 'right', 'top', 'bottom', 'width', 'height'
+];
+
+/**
+ * @public
+ */
+var HV_NAMES = [
+    ['width', 'left', 'right'],
+    ['height', 'top', 'bottom']
+];
+
+function boxLayout(orient, group, gap, maxWidth, maxHeight) {
+    var x = 0;
+    var y = 0;
+
+    if (maxWidth == null) {
+        maxWidth = Infinity;
+    }
+    if (maxHeight == null) {
+        maxHeight = Infinity;
+    }
+    var currentLineMaxSize = 0;
+
+    group.eachChild(function (child, idx) {
+        var position = child.position;
+        var rect = child.getBoundingRect();
+        var nextChild = group.childAt(idx + 1);
+        var nextChildRect = nextChild && nextChild.getBoundingRect();
+        var nextX;
+        var nextY;
+
+        if (orient === 'horizontal') {
+            var moveX = rect.width + (nextChildRect ? (-nextChildRect.x + rect.x) : 0);
+            nextX = x + moveX;
+            // Wrap when width exceeds maxWidth or meet a `newline` group
+            // FIXME compare before adding gap?
+            if (nextX > maxWidth || child.newline) {
+                x = 0;
+                nextX = moveX;
+                y += currentLineMaxSize + gap;
+                currentLineMaxSize = rect.height;
+            }
+            else {
+                // FIXME: consider rect.y is not `0`?
+                currentLineMaxSize = Math.max(currentLineMaxSize, rect.height);
+            }
+        }
+        else {
+            var moveY = rect.height + (nextChildRect ? (-nextChildRect.y + rect.y) : 0);
+            nextY = y + moveY;
+            // Wrap when width exceeds maxHeight or meet a `newline` group
+            if (nextY > maxHeight || child.newline) {
+                x += currentLineMaxSize + gap;
+                y = 0;
+                nextY = moveY;
+                currentLineMaxSize = rect.width;
+            }
+            else {
+                currentLineMaxSize = Math.max(currentLineMaxSize, rect.width);
+            }
+        }
+
+        if (child.newline) {
+            return;
+        }
+
+        position[0] = x;
+        position[1] = y;
+
+        orient === 'horizontal'
+            ? (x = nextX + gap)
+            : (y = nextY + gap);
+    });
+}
+
+/**
+ * VBox or HBox layouting
+ * @param {string} orient
+ * @param {module:zrender/container/Group} group
+ * @param {number} gap
+ * @param {number} [width=Infinity]
+ * @param {number} [height=Infinity]
+ */
+var box = boxLayout;
+
+/**
+ * VBox layouting
+ * @param {module:zrender/container/Group} group
+ * @param {number} gap
+ * @param {number} [width=Infinity]
+ * @param {number} [height=Infinity]
+ */
+var vbox = curry(boxLayout, 'vertical');
+
+/**
+ * HBox layouting
+ * @param {module:zrender/container/Group} group
+ * @param {number} gap
+ * @param {number} [width=Infinity]
+ * @param {number} [height=Infinity]
+ */
+var hbox = curry(boxLayout, 'horizontal');
+
+/**
+ * If x or x2 is not specified or 'center' 'left' 'right',
+ * the width would be as long as possible.
+ * If y or y2 is not specified or 'middle' 'top' 'bottom',
+ * the height would be as long as possible.
+ *
+ * @param {Object} positionInfo
+ * @param {number|string} [positionInfo.x]
+ * @param {number|string} [positionInfo.y]
+ * @param {number|string} [positionInfo.x2]
+ * @param {number|string} [positionInfo.y2]
+ * @param {Object} containerRect {width, height}
+ * @param {string|number} margin
+ * @return {Object} {width, height}
+ */
+function getAvailableSize(positionInfo, containerRect, margin) {
+    var containerWidth = containerRect.width;
+    var containerHeight = containerRect.height;
+
+    var x = parsePercent$1(positionInfo.x, containerWidth);
+    var y = parsePercent$1(positionInfo.y, containerHeight);
+    var x2 = parsePercent$1(positionInfo.x2, containerWidth);
+    var y2 = parsePercent$1(positionInfo.y2, containerHeight);
+
+    (isNaN(x) || isNaN(parseFloat(positionInfo.x))) && (x = 0);
+    (isNaN(x2) || isNaN(parseFloat(positionInfo.x2))) && (x2 = containerWidth);
+    (isNaN(y) || isNaN(parseFloat(positionInfo.y))) && (y = 0);
+    (isNaN(y2) || isNaN(parseFloat(positionInfo.y2))) && (y2 = containerHeight);
+
+    margin = normalizeCssArray$1(margin || 0);
+
+    return {
+        width: Math.max(x2 - x - margin[1] - margin[3], 0),
+        height: Math.max(y2 - y - margin[0] - margin[2], 0)
+    };
+}
+
+/**
+ * Parse position info.
+ *
+ * @param {Object} positionInfo
+ * @param {number|string} [positionInfo.left]
+ * @param {number|string} [positionInfo.top]
+ * @param {number|string} [positionInfo.right]
+ * @param {number|string} [positionInfo.bottom]
+ * @param {number|string} [positionInfo.width]
+ * @param {number|string} [positionInfo.height]
+ * @param {number|string} [positionInfo.aspect] Aspect is width / height
+ * @param {Object} containerRect
+ * @param {string|number} [margin]
+ *
+ * @return {module:zrender/core/BoundingRect}
+ */
+function getLayoutRect(
+    positionInfo, containerRect, margin
+) {
+    margin = normalizeCssArray$1(margin || 0);
+
+    var containerWidth = containerRect.width;
+    var containerHeight = containerRect.height;
+
+    var left = parsePercent$1(positionInfo.left, containerWidth);
+    var top = parsePercent$1(positionInfo.top, containerHeight);
+    var right = parsePercent$1(positionInfo.right, containerWidth);
+    var bottom = parsePercent$1(positionInfo.bottom, containerHeight);
+    var width = parsePercent$1(positionInfo.width, containerWidth);
+    var height = parsePercent$1(positionInfo.height, containerHeight);
+
+    var verticalMargin = margin[2] + margin[0];
+    var horizontalMargin = margin[1] + margin[3];
+    var aspect = positionInfo.aspect;
+
+    // If width is not specified, calculate width from left and right
+    if (isNaN(width)) {
+        width = containerWidth - right - horizontalMargin - left;
+    }
+    if (isNaN(height)) {
+        height = containerHeight - bottom - verticalMargin - top;
+    }
+
+    if (aspect != null) {
+        // If width and height are not given
+        // 1. Graph should not exceeds the container
+        // 2. Aspect must be keeped
+        // 3. Graph should take the space as more as possible
+        // FIXME
+        // Margin is not considered, because there is no case that both
+        // using margin and aspect so far.
+        if (isNaN(width) && isNaN(height)) {
+            if (aspect > containerWidth / containerHeight) {
+                width = containerWidth * 0.8;
+            }
+            else {
+                height = containerHeight * 0.8;
+            }
+        }
+
+        // Calculate width or height with given aspect
+        if (isNaN(width)) {
+            width = aspect * height;
+        }
+        if (isNaN(height)) {
+            height = width / aspect;
+        }
+    }
+
+    // If left is not specified, calculate left from right and width
+    if (isNaN(left)) {
+        left = containerWidth - right - width - horizontalMargin;
+    }
+    if (isNaN(top)) {
+        top = containerHeight - bottom - height - verticalMargin;
+    }
+
+    // Align left and top
+    switch (positionInfo.left || positionInfo.right) {
+        case 'center':
+            left = containerWidth / 2 - width / 2 - margin[3];
+            break;
+        case 'right':
+            left = containerWidth - width - horizontalMargin;
+            break;
+    }
+    switch (positionInfo.top || positionInfo.bottom) {
+        case 'middle':
+        case 'center':
+            top = containerHeight / 2 - height / 2 - margin[0];
+            break;
+        case 'bottom':
+            top = containerHeight - height - verticalMargin;
+            break;
+    }
+    // If something is wrong and left, top, width, height are calculated as NaN
+    left = left || 0;
+    top = top || 0;
+    if (isNaN(width)) {
+        // Width may be NaN if only one value is given except width
+        width = containerWidth - horizontalMargin - left - (right || 0);
+    }
+    if (isNaN(height)) {
+        // Height may be NaN if only one value is given except height
+        height = containerHeight - verticalMargin - top - (bottom || 0);
+    }
+
+    var rect = new BoundingRect(left + margin[3], top + margin[0], width, height);
+    rect.margin = margin;
+    return rect;
+}
+
+
+/**
+ * Position a zr element in viewport
+ *  Group position is specified by either
+ *  {left, top}, {right, bottom}
+ *  If all properties exists, right and bottom will be igonred.
+ *
+ * Logic:
+ *     1. Scale (against origin point in parent coord)
+ *     2. Rotate (against origin point in parent coord)
+ *     3. Traslate (with el.position by this method)
+ * So this method only fixes the last step 'Traslate', which does not affect
+ * scaling and rotating.
+ *
+ * If be called repeatly with the same input el, the same result will be gotten.
+ *
+ * @param {module:zrender/Element} el Should have `getBoundingRect` method.
+ * @param {Object} positionInfo
+ * @param {number|string} [positionInfo.left]
+ * @param {number|string} [positionInfo.top]
+ * @param {number|string} [positionInfo.right]
+ * @param {number|string} [positionInfo.bottom]
+ * @param {number|string} [positionInfo.width] Only for opt.boundingModel: 'raw'
+ * @param {number|string} [positionInfo.height] Only for opt.boundingModel: 'raw'
+ * @param {Object} containerRect
+ * @param {string|number} margin
+ * @param {Object} [opt]
+ * @param {Array.<number>} [opt.hv=[1,1]] Only horizontal or only vertical.
+ * @param {Array.<number>} [opt.boundingMode='all']
+ *        Specify how to calculate boundingRect when locating.
+ *        'all': Position the boundingRect that is transformed and uioned
+ *               both itself and its descendants.
+ *               This mode simplies confine the elements in the bounding
+ *               of their container (e.g., using 'right: 0').
+ *        'raw': Position the boundingRect that is not transformed and only itself.
+ *               This mode is useful when you want a element can overflow its
+ *               container. (Consider a rotated circle needs to be located in a corner.)
+ *               In this mode positionInfo.width/height can only be number.
+ */
+function positionElement(el, positionInfo, containerRect, margin, opt) {
+    var h = !opt || !opt.hv || opt.hv[0];
+    var v = !opt || !opt.hv || opt.hv[1];
+    var boundingMode = opt && opt.boundingMode || 'all';
+
+    if (!h && !v) {
+        return;
+    }
+
+    var rect;
+    if (boundingMode === 'raw') {
+        rect = el.type === 'group'
+            ? new BoundingRect(0, 0, +positionInfo.width || 0, +positionInfo.height || 0)
+            : el.getBoundingRect();
+    }
+    else {
+        rect = el.getBoundingRect();
+        if (el.needLocalTransform()) {
+            var transform = el.getLocalTransform();
+            // Notice: raw rect may be inner object of el,
+            // which should not be modified.
+            rect = rect.clone();
+            rect.applyTransform(transform);
+        }
+    }
+
+    // The real width and height can not be specified but calculated by the given el.
+    positionInfo = getLayoutRect(
+        defaults(
+            {width: rect.width, height: rect.height},
+            positionInfo
+        ),
+        containerRect,
+        margin
+    );
+
+    // Because 'tranlate' is the last step in transform
+    // (see zrender/core/Transformable#getLocalTransform),
+    // we can just only modify el.position to get final result.
+    var elPos = el.position;
+    var dx = h ? positionInfo.x - rect.x : 0;
+    var dy = v ? positionInfo.y - rect.y : 0;
+
+    el.attr('position', boundingMode === 'raw' ? [dx, dy] : [elPos[0] + dx, elPos[1] + dy]);
+}
+
+/**
+ * @param {Object} option Contains some of the properties in HV_NAMES.
+ * @param {number} hvIdx 0: horizontal; 1: vertical.
+ */
+function sizeCalculable(option, hvIdx) {
+    return option[HV_NAMES[hvIdx][0]] != null
+        || (option[HV_NAMES[hvIdx][1]] != null && option[HV_NAMES[hvIdx][2]] != null);
+}
+
+/**
+ * Consider Case:
+ * When defulat option has {left: 0, width: 100}, and we set {right: 0}
+ * through setOption or media query, using normal zrUtil.merge will cause
+ * {right: 0} does not take effect.
+ *
+ * @example
+ * ComponentModel.extend({
+ *     init: function () {
+ *         ...
+ *         var inputPositionParams = layout.getLayoutParams(option);
+ *         this.mergeOption(inputPositionParams);
+ *     },
+ *     mergeOption: function (newOption) {
+ *         newOption && zrUtil.merge(thisOption, newOption, true);
+ *         layout.mergeLayoutParam(thisOption, newOption);
+ *     }
+ * });
+ *
+ * @param {Object} targetOption
+ * @param {Object} newOption
+ * @param {Object|string} [opt]
+ * @param {boolean|Array.<boolean>} [opt.ignoreSize=false] Used for the components
+ *  that width (or height) should not be calculated by left and right (or top and bottom).
+ */
+function mergeLayoutParam(targetOption, newOption, opt) {
+    !isObject$1(opt) && (opt = {});
+
+    var ignoreSize = opt.ignoreSize;
+    !isArray(ignoreSize) && (ignoreSize = [ignoreSize, ignoreSize]);
+
+    var hResult = merge$$1(HV_NAMES[0], 0);
+    var vResult = merge$$1(HV_NAMES[1], 1);
+
+    copy(HV_NAMES[0], targetOption, hResult);
+    copy(HV_NAMES[1], targetOption, vResult);
+
+    function merge$$1(names, hvIdx) {
+        var newParams = {};
+        var newValueCount = 0;
+        var merged = {};
+        var mergedValueCount = 0;
+        var enoughParamNumber = 2;
+
+        each$3(names, function (name) {
+            merged[name] = targetOption[name];
+        });
+        each$3(names, function (name) {
+            // Consider case: newOption.width is null, which is
+            // set by user for removing width setting.
+            hasProp(newOption, name) && (newParams[name] = merged[name] = newOption[name]);
+            hasValue(newParams, name) && newValueCount++;
+            hasValue(merged, name) && mergedValueCount++;
+        });
+
+        if (ignoreSize[hvIdx]) {
+            // Only one of left/right is premitted to exist.
+            if (hasValue(newOption, names[1])) {
+                merged[names[2]] = null;
+            }
+            else if (hasValue(newOption, names[2])) {
+                merged[names[1]] = null;
+            }
+            return merged;
+        }
+
+        // Case: newOption: {width: ..., right: ...},
+        // or targetOption: {right: ...} and newOption: {width: ...},
+        // There is no conflict when merged only has params count
+        // little than enoughParamNumber.
+        if (mergedValueCount === enoughParamNumber || !newValueCount) {
+            return merged;
+        }
+        // Case: newOption: {width: ..., right: ...},
+        // Than we can make sure user only want those two, and ignore
+        // all origin params in targetOption.
+        else if (newValueCount >= enoughParamNumber) {
+            return newParams;
+        }
+        else {
+            // Chose another param from targetOption by priority.
+            for (var i = 0; i < names.length; i++) {
+                var name = names[i];
+                if (!hasProp(newParams, name) && hasProp(targetOption, name)) {
+                    newParams[name] = targetOption[name];
+                    break;
+                }
+            }
+            return newParams;
+        }
+    }
+
+    function hasProp(obj, name) {
+        return obj.hasOwnProperty(name);
+    }
+
+    function hasValue(obj, name) {
+        return obj[name] != null && obj[name] !== 'auto';
+    }
+
+    function copy(names, target, source) {
+        each$3(names, function (name) {
+            target[name] = source[name];
+        });
+    }
+}
+
+/**
+ * Retrieve 'left', 'right', 'top', 'bottom', 'width', 'height' from object.
+ * @param {Object} source
+ * @return {Object} Result contains those props.
+ */
+function getLayoutParams(source) {
+    return copyLayoutParams({}, source);
+}
+
+/**
+ * Retrieve 'left', 'right', 'top', 'bottom', 'width', 'height' from object.
+ * @param {Object} source
+ * @return {Object} Result contains those props.
+ */
+function copyLayoutParams(target, source) {
+    source && target && each$3(LOCATION_PARAMS, function (name) {
+        source.hasOwnProperty(name) && (target[name] = source[name]);
+    });
+    return target;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+var boxLayoutMixin = {
+    getBoxLayoutParams: function () {
+        return {
+            left: this.get('left'),
+            top: this.get('top'),
+            right: this.get('right'),
+            bottom: this.get('bottom'),
+            width: this.get('width'),
+            height: this.get('height')
+        };
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Component model
+ *
+ * @module echarts/model/Component
+ */
+
+var inner$1 = makeInner();
+
+/**
+ * @alias module:echarts/model/Component
+ * @constructor
+ * @param {Object} option
+ * @param {module:echarts/model/Model} parentModel
+ * @param {module:echarts/model/Model} ecModel
+ */
+var ComponentModel = Model.extend({
+
+    type: 'component',
+
+    /**
+     * @readOnly
+     * @type {string}
+     */
+    id: '',
+
+    /**
+     * Because simplified concept is probably better, series.name (or component.name)
+     * has been having too many resposibilities:
+     * (1) Generating id (which requires name in option should not be modified).
+     * (2) As an index to mapping series when merging option or calling API (a name
+     * can refer to more then one components, which is convinient is some case).
+     * (3) Display.
+     * @readOnly
+     */
+    name: '',
+
+    /**
+     * @readOnly
+     * @type {string}
+     */
+    mainType: '',
+
+    /**
+     * @readOnly
+     * @type {string}
+     */
+    subType: '',
+
+    /**
+     * @readOnly
+     * @type {number}
+     */
+    componentIndex: 0,
+
+    /**
+     * @type {Object}
+     * @protected
+     */
+    defaultOption: null,
+
+    /**
+     * @type {module:echarts/model/Global}
+     * @readOnly
+     */
+    ecModel: null,
+
+    /**
+     * key: componentType
+     * value:  Component model list, can not be null.
+     * @type {Object.<string, Array.<module:echarts/model/Model>>}
+     * @readOnly
+     */
+    dependentModels: [],
+
+    /**
+     * @type {string}
+     * @readOnly
+     */
+    uid: null,
+
+    /**
+     * Support merge layout params.
+     * Only support 'box' now (left/right/top/bottom/width/height).
+     * @type {string|Object} Object can be {ignoreSize: true}
+     * @readOnly
+     */
+    layoutMode: null,
+
+    $constructor: function (option, parentModel, ecModel, extraOpt) {
+        Model.call(this, option, parentModel, ecModel, extraOpt);
+
+        this.uid = getUID('ec_cpt_model');
+    },
+
+    init: function (option, parentModel, ecModel, extraOpt) {
+        this.mergeDefaultAndTheme(option, ecModel);
+    },
+
+    mergeDefaultAndTheme: function (option, ecModel) {
+        var layoutMode = this.layoutMode;
+        var inputPositionParams = layoutMode
+            ? getLayoutParams(option) : {};
+
+        var themeModel = ecModel.getTheme();
+        merge(option, themeModel.get(this.mainType));
+        merge(option, this.getDefaultOption());
+
+        if (layoutMode) {
+            mergeLayoutParam(option, inputPositionParams, layoutMode);
+        }
+    },
+
+    mergeOption: function (option, extraOpt) {
+        merge(this.option, option, true);
+
+        var layoutMode = this.layoutMode;
+        if (layoutMode) {
+            mergeLayoutParam(this.option, option, layoutMode);
+        }
+    },
+
+    // Hooker after init or mergeOption
+    optionUpdated: function (newCptOption, isInit) {},
+
+    getDefaultOption: function () {
+        var fields = inner$1(this);
+        if (!fields.defaultOption) {
+            var optList = [];
+            var Class = this.constructor;
+            while (Class) {
+                var opt = Class.prototype.defaultOption;
+                opt && optList.push(opt);
+                Class = Class.superClass;
+            }
+
+            var defaultOption = {};
+            for (var i = optList.length - 1; i >= 0; i--) {
+                defaultOption = merge(defaultOption, optList[i], true);
+            }
+            fields.defaultOption = defaultOption;
+        }
+        return fields.defaultOption;
+    },
+
+    getReferringComponents: function (mainType) {
+        return this.ecModel.queryComponents({
+            mainType: mainType,
+            index: this.get(mainType + 'Index', true),
+            id: this.get(mainType + 'Id', true)
+        });
+    }
+
+});
+
+// Reset ComponentModel.extend, add preConstruct.
+// clazzUtil.enableClassExtend(
+//     ComponentModel,
+//     function (option, parentModel, ecModel, extraOpt) {
+//         // Set dependentModels, componentIndex, name, id, mainType, subType.
+//         zrUtil.extend(this, extraOpt);
+
+//         this.uid = componentUtil.getUID('componentModel');
+
+//         // this.setReadOnly([
+//         //     'type', 'id', 'uid', 'name', 'mainType', 'subType',
+//         //     'dependentModels', 'componentIndex'
+//         // ]);
+//     }
+// );
+
+// Add capability of registerClass, getClass, hasClass, registerSubTypeDefaulter and so on.
+enableClassManagement(
+    ComponentModel, {registerWhenExtend: true}
+);
+enableSubTypeDefaulter(ComponentModel);
+
+// Add capability of ComponentModel.topologicalTravel.
+enableTopologicalTravel(ComponentModel, getDependencies);
+
+function getDependencies(componentType) {
+    var deps = [];
+    each$1(ComponentModel.getClassesByMainType(componentType), function (Clazz) {
+        deps = deps.concat(Clazz.prototype.dependencies || []);
+    });
+
+    // Ensure main type.
+    deps = map(deps, function (type) {
+        return parseClassType$1(type).main;
+    });
+
+    // Hack dataset for convenience.
+    if (componentType !== 'dataset' && indexOf(deps, 'dataset') <= 0) {
+        deps.unshift('dataset');
+    }
+
+    return deps;
+}
+
+mixin(ComponentModel, boxLayoutMixin);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+var platform = '';
+// Navigator not exists in node
+if (typeof navigator !== 'undefined') {
+    platform = navigator.platform || '';
+}
+
+var globalDefault = {
+    // backgroundColor: 'rgba(0,0,0,0)',
+
+    // https://dribbble.com/shots/1065960-Infographic-Pie-chart-visualization
+    // color: ['#5793f3', '#d14a61', '#fd9c35', '#675bba', '#fec42c', '#dd4444', '#d4df5a', '#cd4870'],
+    // Light colors:
+    // color: ['#bcd3bb', '#e88f70', '#edc1a5', '#9dc5c8', '#e1e8c8', '#7b7c68', '#e5b5b5', '#f0b489', '#928ea8', '#bda29a'],
+    // color: ['#cc5664', '#9bd6ec', '#ea946e', '#8acaaa', '#f1ec64', '#ee8686', '#a48dc1', '#5da6bc', '#b9dcae'],
+    // Dark colors:
+    color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
+
+    gradientColor: ['#f6efa6', '#d88273', '#bf444c'],
+
+    // If xAxis and yAxis declared, grid is created by default.
+    // grid: {},
+
+    textStyle: {
+        // color: '#000',
+        // decoration: 'none',
+        // PENDING
+        fontFamily: platform.match(/^Win/) ? 'Microsoft YaHei' : 'sans-serif',
+        // fontFamily: 'Arial, Verdana, sans-serif',
+        fontSize: 12,
+        fontStyle: 'normal',
+        fontWeight: 'normal'
+    },
+
+    // http://blogs.adobe.com/webplatform/2014/02/24/using-blend-modes-in-html-canvas/
+    // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
+    // Default is source-over
+    blendMode: null,
+
+    animation: 'auto',
+    animationDuration: 1000,
+    animationDurationUpdate: 300,
+    animationEasing: 'exponentialOut',
+    animationEasingUpdate: 'cubicOut',
+
+    animationThreshold: 2000,
+    // Configuration for progressive/incremental rendering
+    progressiveThreshold: 3000,
+    progressive: 400,
+
+    // Threshold of if use single hover layer to optimize.
+    // It is recommended that `hoverLayerThreshold` is equivalent to or less than
+    // `progressiveThreshold`, otherwise hover will cause restart of progressive,
+    // which is unexpected.
+    // see example <echarts/test/heatmap-large.html>.
+    hoverLayerThreshold: 3000,
+
+    // See: module:echarts/scale/Time
+    useUTC: false
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var inner$2 = makeInner();
+
+function getNearestColorPalette(colors, requestColorNum) {
+    var paletteNum = colors.length;
+    // TODO colors must be in order
+    for (var i = 0; i < paletteNum; i++) {
+        if (colors[i].length > requestColorNum) {
+            return colors[i];
+        }
+    }
+    return colors[paletteNum - 1];
+}
+
+var colorPaletteMixin = {
+    clearColorPalette: function () {
+        inner$2(this).colorIdx = 0;
+        inner$2(this).colorNameMap = {};
+    },
+
+    /**
+     * @param {string} name MUST NOT be null/undefined. Otherwise call this function
+     *                 twise with the same parameters will get different result.
+     * @param {Object} [scope=this]
+     * @param {Object} [requestColorNum]
+     * @return {string} color string.
+     */
+    getColorFromPalette: function (name, scope, requestColorNum) {
+        scope = scope || this;
+        var scopeFields = inner$2(scope);
+        var colorIdx = scopeFields.colorIdx || 0;
+        var colorNameMap = scopeFields.colorNameMap = scopeFields.colorNameMap || {};
+        // Use `hasOwnProperty` to avoid conflict with Object.prototype.
+        if (colorNameMap.hasOwnProperty(name)) {
+            return colorNameMap[name];
+        }
+        var defaultColorPalette = normalizeToArray(this.get('color', true));
+        var layeredColorPalette = this.get('colorLayer', true);
+        var colorPalette = ((requestColorNum == null || !layeredColorPalette)
+            ? defaultColorPalette : getNearestColorPalette(layeredColorPalette, requestColorNum));
+
+        // In case can't find in layered color palette.
+        colorPalette = colorPalette || defaultColorPalette;
+
+        if (!colorPalette || !colorPalette.length) {
+            return;
+        }
+
+        var color = colorPalette[colorIdx];
+        if (name) {
+            colorNameMap[name] = color;
+        }
+        scopeFields.colorIdx = (colorIdx + 1) % colorPalette.length;
+
+        return color;
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Helper for model references.
+ * There are many manners to refer axis/coordSys.
+ */
+
+// TODO
+// merge relevant logic to this file?
+// check: "modelHelper" of tooltip and "BrushTargetManager".
+
+/**
+ * @return {Object} For example:
+ * {
+ *     coordSysName: 'cartesian2d',
+ *     coordSysDims: ['x', 'y', ...],
+ *     axisMap: HashMap({
+ *         x: xAxisModel,
+ *         y: yAxisModel
+ *     }),
+ *     categoryAxisMap: HashMap({
+ *         x: xAxisModel,
+ *         y: undefined
+ *     }),
+ *     // It also indicate that whether there is category axis.
+ *     firstCategoryDimIndex: 1,
+ *     // To replace user specified encode.
+ * }
+ */
+function getCoordSysDefineBySeries(seriesModel) {
+    var coordSysName = seriesModel.get('coordinateSystem');
+    var result = {
+        coordSysName: coordSysName,
+        coordSysDims: [],
+        axisMap: createHashMap(),
+        categoryAxisMap: createHashMap()
+    };
+    var fetch = fetchers[coordSysName];
+    if (fetch) {
+        fetch(seriesModel, result, result.axisMap, result.categoryAxisMap);
+        return result;
+    }
+}
+
+var fetchers = {
+
+    cartesian2d: function (seriesModel, result, axisMap, categoryAxisMap) {
+        var xAxisModel = seriesModel.getReferringComponents('xAxis')[0];
+        var yAxisModel = seriesModel.getReferringComponents('yAxis')[0];
+
+        if (__DEV__) {
+            if (!xAxisModel) {
+                throw new Error('xAxis "' + retrieve(
+                    seriesModel.get('xAxisIndex'),
+                    seriesModel.get('xAxisId'),
+                    0
+                ) + '" not found');
+            }
+            if (!yAxisModel) {
+                throw new Error('yAxis "' + retrieve(
+                    seriesModel.get('xAxisIndex'),
+                    seriesModel.get('yAxisId'),
+                    0
+                ) + '" not found');
+            }
+        }
+
+        result.coordSysDims = ['x', 'y'];
+        axisMap.set('x', xAxisModel);
+        axisMap.set('y', yAxisModel);
+
+        if (isCategory(xAxisModel)) {
+            categoryAxisMap.set('x', xAxisModel);
+            result.firstCategoryDimIndex = 0;
+        }
+        if (isCategory(yAxisModel)) {
+            categoryAxisMap.set('y', yAxisModel);
+            result.firstCategoryDimIndex = 1;
+        }
+    },
+
+    singleAxis: function (seriesModel, result, axisMap, categoryAxisMap) {
+        var singleAxisModel = seriesModel.getReferringComponents('singleAxis')[0];
+
+        if (__DEV__) {
+            if (!singleAxisModel) {
+                throw new Error('singleAxis should be specified.');
+            }
+        }
+
+        result.coordSysDims = ['single'];
+        axisMap.set('single', singleAxisModel);
+
+        if (isCategory(singleAxisModel)) {
+            categoryAxisMap.set('single', singleAxisModel);
+            result.firstCategoryDimIndex = 0;
+        }
+    },
+
+    polar: function (seriesModel, result, axisMap, categoryAxisMap) {
+        var polarModel = seriesModel.getReferringComponents('polar')[0];
+        var radiusAxisModel = polarModel.findAxisModel('radiusAxis');
+        var angleAxisModel = polarModel.findAxisModel('angleAxis');
+
+        if (__DEV__) {
+            if (!angleAxisModel) {
+                throw new Error('angleAxis option not found');
+            }
+            if (!radiusAxisModel) {
+                throw new Error('radiusAxis option not found');
+            }
+        }
+
+        result.coordSysDims = ['radius', 'angle'];
+        axisMap.set('radius', radiusAxisModel);
+        axisMap.set('angle', angleAxisModel);
+
+        if (isCategory(radiusAxisModel)) {
+            categoryAxisMap.set('radius', radiusAxisModel);
+            result.firstCategoryDimIndex = 0;
+        }
+        if (isCategory(angleAxisModel)) {
+            categoryAxisMap.set('angle', angleAxisModel);
+            result.firstCategoryDimIndex = 1;
+        }
+    },
+
+    geo: function (seriesModel, result, axisMap, categoryAxisMap) {
+        result.coordSysDims = ['lng', 'lat'];
+    },
+
+    parallel: function (seriesModel, result, axisMap, categoryAxisMap) {
+        var ecModel = seriesModel.ecModel;
+        var parallelModel = ecModel.getComponent(
+            'parallel', seriesModel.get('parallelIndex')
+        );
+        var coordSysDims = result.coordSysDims = parallelModel.dimensions.slice();
+
+        each$1(parallelModel.parallelAxisIndex, function (axisIndex, index) {
+            var axisModel = ecModel.getComponent('parallelAxis', axisIndex);
+            var axisDim = coordSysDims[index];
+            axisMap.set(axisDim, axisModel);
+
+            if (isCategory(axisModel) && result.firstCategoryDimIndex == null) {
+                categoryAxisMap.set(axisDim, axisModel);
+                result.firstCategoryDimIndex = index;
+            }
+        });
+    }
+};
+
+function isCategory(axisModel) {
+    return axisModel.get('type') === 'category';
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// Avoid typo.
+var SOURCE_FORMAT_ORIGINAL = 'original';
+var SOURCE_FORMAT_ARRAY_ROWS = 'arrayRows';
+var SOURCE_FORMAT_OBJECT_ROWS = 'objectRows';
+var SOURCE_FORMAT_KEYED_COLUMNS = 'keyedColumns';
+var SOURCE_FORMAT_UNKNOWN = 'unknown';
+// ??? CHANGE A NAME
+var SOURCE_FORMAT_TYPED_ARRAY = 'typedArray';
+
+var SERIES_LAYOUT_BY_COLUMN = 'column';
+var SERIES_LAYOUT_BY_ROW = 'row';
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * [sourceFormat]
+ *
+ * + "original":
+ * This format is only used in series.data, where
+ * itemStyle can be specified in data item.
+ *
+ * + "arrayRows":
+ * [
+ *     ['product', 'score', 'amount'],
+ *     ['Matcha Latte', 89.3, 95.8],
+ *     ['Milk Tea', 92.1, 89.4],
+ *     ['Cheese Cocoa', 94.4, 91.2],
+ *     ['Walnut Brownie', 85.4, 76.9]
+ * ]
+ *
+ * + "objectRows":
+ * [
+ *     {product: 'Matcha Latte', score: 89.3, amount: 95.8},
+ *     {product: 'Milk Tea', score: 92.1, amount: 89.4},
+ *     {product: 'Cheese Cocoa', score: 94.4, amount: 91.2},
+ *     {product: 'Walnut Brownie', score: 85.4, amount: 76.9}
+ * ]
+ *
+ * + "keyedColumns":
+ * {
+ *     'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
+ *     'count': [823, 235, 1042, 988],
+ *     'score': [95.8, 81.4, 91.2, 76.9]
+ * }
+ *
+ * + "typedArray"
+ *
+ * + "unknown"
+ */
+
+/**
+ * @constructor
+ * @param {Object} fields
+ * @param {string} fields.sourceFormat
+ * @param {Array|Object} fields.fromDataset
+ * @param {Array|Object} [fields.data]
+ * @param {string} [seriesLayoutBy='column']
+ * @param {Array.<Object|string>} [dimensionsDefine]
+ * @param {Objet|HashMap} [encodeDefine]
+ * @param {number} [startIndex=0]
+ * @param {number} [dimensionsDetectCount]
+ */
+function Source(fields) {
+
+    /**
+     * @type {boolean}
+     */
+    this.fromDataset = fields.fromDataset;
+
+    /**
+     * Not null/undefined.
+     * @type {Array|Object}
+     */
+    this.data = fields.data || (
+        fields.sourceFormat === SOURCE_FORMAT_KEYED_COLUMNS ? {} : []
+    );
+
+    /**
+     * See also "detectSourceFormat".
+     * Not null/undefined.
+     * @type {string}
+     */
+    this.sourceFormat = fields.sourceFormat || SOURCE_FORMAT_UNKNOWN;
+
+    /**
+     * 'row' or 'column'
+     * Not null/undefined.
+     * @type {string} seriesLayoutBy
+     */
+    this.seriesLayoutBy = fields.seriesLayoutBy || SERIES_LAYOUT_BY_COLUMN;
+
+    /**
+     * dimensions definition in option.
+     * can be null/undefined.
+     * @type {Array.<Object|string>}
+     */
+    this.dimensionsDefine = fields.dimensionsDefine;
+
+    /**
+     * encode definition in option.
+     * can be null/undefined.
+     * @type {Objet|HashMap}
+     */
+    this.encodeDefine = fields.encodeDefine && createHashMap(fields.encodeDefine);
+
+    /**
+     * Not null/undefined, uint.
+     * @type {number}
+     */
+    this.startIndex = fields.startIndex || 0;
+
+    /**
+     * Can be null/undefined (when unknown), uint.
+     * @type {number}
+     */
+    this.dimensionsDetectCount = fields.dimensionsDetectCount;
+}
+
+/**
+ * Wrap original series data for some compatibility cases.
+ */
+Source.seriesDataToSource = function (data) {
+    return new Source({
+        data: data,
+        sourceFormat: isTypedArray(data)
+            ? SOURCE_FORMAT_TYPED_ARRAY
+            : SOURCE_FORMAT_ORIGINAL,
+        fromDataset: false
+    });
+};
+
+enableClassCheck(Source);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var inner$3 = makeInner();
+
+/**
+ * @see {module:echarts/data/Source}
+ * @param {module:echarts/component/dataset/DatasetModel} datasetModel
+ * @return {string} sourceFormat
+ */
+function detectSourceFormat(datasetModel) {
+    var data = datasetModel.option.source;
+    var sourceFormat = SOURCE_FORMAT_UNKNOWN;
+
+    if (isTypedArray(data)) {
+        sourceFormat = SOURCE_FORMAT_TYPED_ARRAY;
+    }
+    else if (isArray(data)) {
+        // FIXME Whether tolerate null in top level array?
+        for (var i = 0, len = data.length; i < len; i++) {
+            var item = data[i];
+
+            if (item == null) {
+                continue;
+            }
+            else if (isArray(item)) {
+                sourceFormat = SOURCE_FORMAT_ARRAY_ROWS;
+                break;
+            }
+            else if (isObject$1(item)) {
+                sourceFormat = SOURCE_FORMAT_OBJECT_ROWS;
+                break;
+            }
+        }
+    }
+    else if (isObject$1(data)) {
+        for (var key in data) {
+            if (data.hasOwnProperty(key) && isArrayLike(data[key])) {
+                sourceFormat = SOURCE_FORMAT_KEYED_COLUMNS;
+                break;
+            }
+        }
+    }
+    else if (data != null) {
+        throw new Error('Invalid data');
+    }
+
+    inner$3(datasetModel).sourceFormat = sourceFormat;
+}
+
+/**
+ * [Scenarios]:
+ * (1) Provide source data directly:
+ *     series: {
+ *         encode: {...},
+ *         dimensions: [...]
+ *         seriesLayoutBy: 'row',
+ *         data: [[...]]
+ *     }
+ * (2) Refer to datasetModel.
+ *     series: [{
+ *         encode: {...}
+ *         // Ignore datasetIndex means `datasetIndex: 0`
+ *         // and the dimensions defination in dataset is used
+ *     }, {
+ *         encode: {...},
+ *         seriesLayoutBy: 'column',
+ *         datasetIndex: 1
+ *     }]
+ *
+ * Get data from series itself or datset.
+ * @return {module:echarts/data/Source} source
+ */
+function getSource(seriesModel) {
+    return inner$3(seriesModel).source;
+}
+
+/**
+ * MUST be called before mergeOption of all series.
+ * @param {module:echarts/model/Global} ecModel
+ */
+function resetSourceDefaulter(ecModel) {
+    // `datasetMap` is used to make default encode.
+    inner$3(ecModel).datasetMap = createHashMap();
+}
+
+/**
+ * [Caution]:
+ * MUST be called after series option merged and
+ * before "series.getInitailData()" called.
+ *
+ * [The rule of making default encode]:
+ * Category axis (if exists) alway map to the first dimension.
+ * Each other axis occupies a subsequent dimension.
+ *
+ * [Why make default encode]:
+ * Simplify the typing of encode in option, avoiding the case like that:
+ * series: [{encode: {x: 0, y: 1}}, {encode: {x: 0, y: 2}}, {encode: {x: 0, y: 3}}],
+ * where the "y" have to be manually typed as "1, 2, 3, ...".
+ *
+ * @param {module:echarts/model/Series} seriesModel
+ */
+function prepareSource(seriesModel) {
+    var seriesOption = seriesModel.option;
+
+    var data = seriesOption.data;
+    var sourceFormat = isTypedArray(data)
+        ? SOURCE_FORMAT_TYPED_ARRAY : SOURCE_FORMAT_ORIGINAL;
+    var fromDataset = false;
+
+    var seriesLayoutBy = seriesOption.seriesLayoutBy;
+    var sourceHeader = seriesOption.sourceHeader;
+    var dimensionsDefine = seriesOption.dimensions;
+
+    var datasetModel = getDatasetModel(seriesModel);
+    if (datasetModel) {
+        var datasetOption = datasetModel.option;
+
+        data = datasetOption.source;
+        sourceFormat = inner$3(datasetModel).sourceFormat;
+        fromDataset = true;
+
+        // These settings from series has higher priority.
+        seriesLayoutBy = seriesLayoutBy || datasetOption.seriesLayoutBy;
+        sourceHeader == null && (sourceHeader = datasetOption.sourceHeader);
+        dimensionsDefine = dimensionsDefine || datasetOption.dimensions;
+    }
+
+    var completeResult = completeBySourceData(
+        data, sourceFormat, seriesLayoutBy, sourceHeader, dimensionsDefine
+    );
+
+    // Note: dataset option does not have `encode`.
+    var encodeDefine = seriesOption.encode;
+    if (!encodeDefine && datasetModel) {
+        encodeDefine = makeDefaultEncode(
+            seriesModel, datasetModel, data, sourceFormat, seriesLayoutBy, completeResult
+        );
+    }
+
+    inner$3(seriesModel).source = new Source({
+        data: data,
+        fromDataset: fromDataset,
+        seriesLayoutBy: seriesLayoutBy,
+        sourceFormat: sourceFormat,
+        dimensionsDefine: completeResult.dimensionsDefine,
+        startIndex: completeResult.startIndex,
+        dimensionsDetectCount: completeResult.dimensionsDetectCount,
+        encodeDefine: encodeDefine
+    });
+}
+
+// return {startIndex, dimensionsDefine, dimensionsCount}
+function completeBySourceData(data, sourceFormat, seriesLayoutBy, sourceHeader, dimensionsDefine) {
+    if (!data) {
+        return {dimensionsDefine: normalizeDimensionsDefine(dimensionsDefine)};
+    }
+
+    var dimensionsDetectCount;
+    var startIndex;
+    var findPotentialName;
+
+    if (sourceFormat === SOURCE_FORMAT_ARRAY_ROWS) {
+        // Rule: Most of the first line are string: it is header.
+        // Caution: consider a line with 5 string and 1 number,
+        // it still can not be sure it is a head, because the
+        // 5 string may be 5 values of category columns.
+        if (sourceHeader === 'auto' || sourceHeader == null) {
+            arrayRowsTravelFirst(function (val) {
+                // '-' is regarded as null/undefined.
+                if (val != null && val !== '-') {
+                    if (isString(val)) {
+                        startIndex == null && (startIndex = 1);
+                    }
+                    else {
+                        startIndex = 0;
+                    }
+                }
+            // 10 is an experience number, avoid long loop.
+            }, seriesLayoutBy, data, 10);
+        }
+        else {
+            startIndex = sourceHeader ? 1 : 0;
+        }
+
+        if (!dimensionsDefine && startIndex === 1) {
+            dimensionsDefine = [];
+            arrayRowsTravelFirst(function (val, index) {
+                dimensionsDefine[index] = val != null ? val : '';
+            }, seriesLayoutBy, data);
+        }
+
+        dimensionsDetectCount = dimensionsDefine
+            ? dimensionsDefine.length
+            : seriesLayoutBy === SERIES_LAYOUT_BY_ROW
+            ? data.length
+            : data[0]
+            ? data[0].length
+            : null;
+    }
+    else if (sourceFormat === SOURCE_FORMAT_OBJECT_ROWS) {
+        if (!dimensionsDefine) {
+            dimensionsDefine = objectRowsCollectDimensions(data);
+            findPotentialName = true;
+        }
+    }
+    else if (sourceFormat === SOURCE_FORMAT_KEYED_COLUMNS) {
+        if (!dimensionsDefine) {
+            dimensionsDefine = [];
+            findPotentialName = true;
+            each$1(data, function (colArr, key) {
+                dimensionsDefine.push(key);
+            });
+        }
+    }
+    else if (sourceFormat === SOURCE_FORMAT_ORIGINAL) {
+        var value0 = getDataItemValue(data[0]);
+        dimensionsDetectCount = isArray(value0) && value0.length || 1;
+    }
+    else if (sourceFormat === SOURCE_FORMAT_TYPED_ARRAY) {
+        if (__DEV__) {
+            assert$1(!!dimensionsDefine, 'dimensions must be given if data is TypedArray.');
+        }
+    }
+
+    var potentialNameDimIndex;
+    if (findPotentialName) {
+        each$1(dimensionsDefine, function (dim, idx) {
+            if ((isObject$1(dim) ? dim.name : dim) === 'name') {
+                potentialNameDimIndex = idx;
+            }
+        });
+    }
+
+    return {
+        startIndex: startIndex,
+        dimensionsDefine: normalizeDimensionsDefine(dimensionsDefine),
+        dimensionsDetectCount: dimensionsDetectCount,
+        potentialNameDimIndex: potentialNameDimIndex
+        // TODO: potentialIdDimIdx
+    };
+}
+
+// Consider dimensions defined like ['A', 'price', 'B', 'price', 'C', 'price'],
+// which is reasonable. But dimension name is duplicated.
+// Returns undefined or an array contains only object without null/undefiend or string.
+function normalizeDimensionsDefine(dimensionsDefine) {
+    if (!dimensionsDefine) {
+        // The meaning of null/undefined is different from empty array.
+        return;
+    }
+    var nameMap = createHashMap();
+    return map(dimensionsDefine, function (item, index) {
+        item = extend({}, isObject$1(item) ? item : {name: item});
+
+        // User can set null in dimensions.
+        // We dont auto specify name, othewise a given name may
+        // cause it be refered unexpectedly.
+        if (item.name == null) {
+            return item;
+        }
+
+        // Also consider number form like 2012.
+        item.name += '';
+        // User may also specify displayName.
+        // displayName will always exists except user not
+        // specified or dim name is not specified or detected.
+        // (A auto generated dim name will not be used as
+        // displayName).
+        if (item.displayName == null) {
+            item.displayName = item.name;
+        }
+
+        var exist = nameMap.get(item.name);
+        if (!exist) {
+            nameMap.set(item.name, {count: 1});
+        }
+        else {
+            item.name += '-' + exist.count++;
+        }
+
+        return item;
+    });
+}
+
+function arrayRowsTravelFirst(cb, seriesLayoutBy, data, maxLoop) {
+    maxLoop == null && (maxLoop = Infinity);
+    if (seriesLayoutBy === SERIES_LAYOUT_BY_ROW) {
+        for (var i = 0; i < data.length && i < maxLoop; i++) {
+            cb(data[i] ? data[i][0] : null, i);
+        }
+    }
+    else {
+        var value0 = data[0] || [];
+        for (var i = 0; i < value0.length && i < maxLoop; i++) {
+            cb(value0[i], i);
+        }
+    }
+}
+
+function objectRowsCollectDimensions(data) {
+    var firstIndex = 0;
+    var obj;
+    while (firstIndex < data.length && !(obj = data[firstIndex++])) {} // jshint ignore: line
+    if (obj) {
+        var dimensions = [];
+        each$1(obj, function (value, key) {
+            dimensions.push(key);
+        });
+        return dimensions;
+    }
+}
+
+// ??? TODO merge to completedimensions, where also has
+// default encode making logic. And the default rule
+// should depends on series? consider 'map'.
+function makeDefaultEncode(
+    seriesModel, datasetModel, data, sourceFormat, seriesLayoutBy, completeResult
+) {
+    var coordSysDefine = getCoordSysDefineBySeries(seriesModel);
+    var encode = {};
+    // var encodeTooltip = [];
+    // var encodeLabel = [];
+    var encodeItemName = [];
+    var encodeSeriesName = [];
+    var seriesType = seriesModel.subType;
+
+    // ??? TODO refactor: provide by series itself.
+    // Consider the case: 'map' series is based on geo coordSys,
+    // 'graph', 'heatmap' can be based on cartesian. But can not
+    // give default rule simply here.
+    var nSeriesMap = createHashMap(['pie', 'map', 'funnel']);
+    var cSeriesMap = createHashMap([
+        'line', 'bar', 'pictorialBar', 'scatter', 'effectScatter', 'candlestick', 'boxplot'
+    ]);
+
+    // Usually in this case series will use the first data
+    // dimension as the "value" dimension, or other default
+    // processes respectively.
+    if (coordSysDefine && cSeriesMap.get(seriesType) != null) {
+        var ecModel = seriesModel.ecModel;
+        var datasetMap = inner$3(ecModel).datasetMap;
+        var key = datasetModel.uid + '_' + seriesLayoutBy;
+        var datasetRecord = datasetMap.get(key)
+            || datasetMap.set(key, {categoryWayDim: 1, valueWayDim: 0});
+
+        // TODO
+        // Auto detect first time axis and do arrangement.
+        each$1(coordSysDefine.coordSysDims, function (coordDim) {
+            // In value way.
+            if (coordSysDefine.firstCategoryDimIndex == null) {
+                var dataDim = datasetRecord.valueWayDim++;
+                encode[coordDim] = dataDim;
+
+                // ??? TODO give a better default series name rule?
+                // especially when encode x y specified.
+                // consider: when mutiple series share one dimension
+                // category axis, series name should better use
+                // the other dimsion name. On the other hand, use
+                // both dimensions name.
+
+                encodeSeriesName.push(dataDim);
+                // encodeTooltip.push(dataDim);
+                // encodeLabel.push(dataDim);
+            }
+            // In category way, category axis.
+            else if (coordSysDefine.categoryAxisMap.get(coordDim)) {
+                encode[coordDim] = 0;
+                encodeItemName.push(0);
+            }
+            // In category way, non-category axis.
+            else {
+                var dataDim = datasetRecord.categoryWayDim++;
+                encode[coordDim] = dataDim;
+                // encodeTooltip.push(dataDim);
+                // encodeLabel.push(dataDim);
+                encodeSeriesName.push(dataDim);
+            }
+        });
+    }
+    // Do not make a complex rule! Hard to code maintain and not necessary.
+    // ??? TODO refactor: provide by series itself.
+    // [{name: ..., value: ...}, ...] like:
+    else if (nSeriesMap.get(seriesType) != null) {
+        // Find the first not ordinal. (5 is an experience value)
+        var firstNotOrdinal;
+        for (var i = 0; i < 5 && firstNotOrdinal == null; i++) {
+            if (!doGuessOrdinal(
+                data, sourceFormat, seriesLayoutBy,
+                completeResult.dimensionsDefine, completeResult.startIndex, i
+            )) {
+                firstNotOrdinal = i;
+            }
+        }
+        if (firstNotOrdinal != null) {
+            encode.value = firstNotOrdinal;
+            var nameDimIndex = completeResult.potentialNameDimIndex
+                || Math.max(firstNotOrdinal - 1, 0);
+            // By default, label use itemName in charts.
+            // So we dont set encodeLabel here.
+            encodeSeriesName.push(nameDimIndex);
+            encodeItemName.push(nameDimIndex);
+            // encodeTooltip.push(firstNotOrdinal);
+        }
+    }
+
+    // encodeTooltip.length && (encode.tooltip = encodeTooltip);
+    // encodeLabel.length && (encode.label = encodeLabel);
+    encodeItemName.length && (encode.itemName = encodeItemName);
+    encodeSeriesName.length && (encode.seriesName = encodeSeriesName);
+
+    return encode;
+}
+
+/**
+ * If return null/undefined, indicate that should not use datasetModel.
+ */
+function getDatasetModel(seriesModel) {
+    var option = seriesModel.option;
+    // Caution: consider the scenario:
+    // A dataset is declared and a series is not expected to use the dataset,
+    // and at the beginning `setOption({series: { noData })` (just prepare other
+    // option but no data), then `setOption({series: {data: [...]}); In this case,
+    // the user should set an empty array to avoid that dataset is used by default.
+    var thisData = option.data;
+    if (!thisData) {
+        return seriesModel.ecModel.getComponent('dataset', option.datasetIndex || 0);
+    }
+}
+
+/**
+ * The rule should not be complex, otherwise user might not
+ * be able to known where the data is wrong.
+ * The code is ugly, but how to make it neat?
+ *
+ * @param {module:echars/data/Source} source
+ * @param {number} dimIndex
+ * @return {boolean} Whether ordinal.
+ */
+function guessOrdinal(source, dimIndex) {
+    return doGuessOrdinal(
+        source.data,
+        source.sourceFormat,
+        source.seriesLayoutBy,
+        source.dimensionsDefine,
+        source.startIndex,
+        dimIndex
+    );
+}
+
+// dimIndex may be overflow source data.
+function doGuessOrdinal(
+    data, sourceFormat, seriesLayoutBy, dimensionsDefine, startIndex, dimIndex
+) {
+    var result;
+    // Experience value.
+    var maxLoop = 5;
+
+    if (isTypedArray(data)) {
+        return false;
+    }
+
+    // When sourceType is 'objectRows' or 'keyedColumns', dimensionsDefine
+    // always exists in source.
+    var dimName;
+    if (dimensionsDefine) {
+        dimName = dimensionsDefine[dimIndex];
+        dimName = isObject$1(dimName) ? dimName.name : dimName;
+    }
+
+    if (sourceFormat === SOURCE_FORMAT_ARRAY_ROWS) {
+        if (seriesLayoutBy === SERIES_LAYOUT_BY_ROW) {
+            var sample = data[dimIndex];
+            for (var i = 0; i < (sample || []).length && i < maxLoop; i++) {
+                if ((result = detectValue(sample[startIndex + i])) != null) {
+                    return result;
+                }
+            }
+        }
+        else {
+            for (var i = 0; i < data.length && i < maxLoop; i++) {
+                var row = data[startIndex + i];
+                if (row && (result = detectValue(row[dimIndex])) != null) {
+                    return result;
+                }
+            }
+        }
+    }
+    else if (sourceFormat === SOURCE_FORMAT_OBJECT_ROWS) {
+        if (!dimName) {
+            return;
+        }
+        for (var i = 0; i < data.length && i < maxLoop; i++) {
+            var item = data[i];
+            if (item && (result = detectValue(item[dimName])) != null) {
+                return result;
+            }
+        }
+    }
+    else if (sourceFormat === SOURCE_FORMAT_KEYED_COLUMNS) {
+        if (!dimName) {
+            return;
+        }
+        var sample = data[dimName];
+        if (!sample || isTypedArray(sample)) {
+            return false;
+        }
+        for (var i = 0; i < sample.length && i < maxLoop; i++) {
+            if ((result = detectValue(sample[i])) != null) {
+                return result;
+            }
+        }
+    }
+    else if (sourceFormat === SOURCE_FORMAT_ORIGINAL) {
+        for (var i = 0; i < data.length && i < maxLoop; i++) {
+            var item = data[i];
+            var val = getDataItemValue(item);
+            if (!isArray(val)) {
+                return false;
+            }
+            if ((result = detectValue(val[dimIndex])) != null) {
+                return result;
+            }
+        }
+    }
+
+    function detectValue(val) {
+        // Consider usage convenience, '1', '2' will be treated as "number".
+        // `isFinit('')` get `true`.
+        if (val != null && isFinite(val) && val !== '') {
+            return false;
+        }
+        else if (isString(val) && val !== '-') {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * ECharts global model
+ *
+ * @module {echarts/model/Global}
+ */
+
+
+/**
+ * Caution: If the mechanism should be changed some day, these cases
+ * should be considered:
+ *
+ * (1) In `merge option` mode, if using the same option to call `setOption`
+ * many times, the result should be the same (try our best to ensure that).
+ * (2) In `merge option` mode, if a component has no id/name specified, it
+ * will be merged by index, and the result sequence of the components is
+ * consistent to the original sequence.
+ * (3) `reset` feature (in toolbox). Find detailed info in comments about
+ * `mergeOption` in module:echarts/model/OptionManager.
+ */
+
+var OPTION_INNER_KEY = '\0_ec_inner';
+
+/**
+ * @alias module:echarts/model/Global
+ *
+ * @param {Object} option
+ * @param {module:echarts/model/Model} parentModel
+ * @param {Object} theme
+ */
+var GlobalModel = Model.extend({
+
+    init: function (option, parentModel, theme, optionManager) {
+        theme = theme || {};
+
+        this.option = null; // Mark as not initialized.
+
+        /**
+         * @type {module:echarts/model/Model}
+         * @private
+         */
+        this._theme = new Model(theme);
+
+        /**
+         * @type {module:echarts/model/OptionManager}
+         */
+        this._optionManager = optionManager;
+    },
+
+    setOption: function (option, optionPreprocessorFuncs) {
+        assert$1(
+            !(OPTION_INNER_KEY in option),
+            'please use chart.getOption()'
+        );
+
+        this._optionManager.setOption(option, optionPreprocessorFuncs);
+
+        this.resetOption(null);
+    },
+
+    /**
+     * @param {string} type null/undefined: reset all.
+     *                      'recreate': force recreate all.
+     *                      'timeline': only reset timeline option
+     *                      'media': only reset media query option
+     * @return {boolean} Whether option changed.
+     */
+    resetOption: function (type) {
+        var optionChanged = false;
+        var optionManager = this._optionManager;
+
+        if (!type || type === 'recreate') {
+            var baseOption = optionManager.mountOption(type === 'recreate');
+
+            if (!this.option || type === 'recreate') {
+                initBase.call(this, baseOption);
+            }
+            else {
+                this.restoreData();
+                this.mergeOption(baseOption);
+            }
+            optionChanged = true;
+        }
+
+        if (type === 'timeline' || type === 'media') {
+            this.restoreData();
+        }
+
+        if (!type || type === 'recreate' || type === 'timeline') {
+            var timelineOption = optionManager.getTimelineOption(this);
+            timelineOption && (this.mergeOption(timelineOption), optionChanged = true);
+        }
+
+        if (!type || type === 'recreate' || type === 'media') {
+            var mediaOptions = optionManager.getMediaOption(this, this._api);
+            if (mediaOptions.length) {
+                each$1(mediaOptions, function (mediaOption) {
+                    this.mergeOption(mediaOption, optionChanged = true);
+                }, this);
+            }
+        }
+
+        return optionChanged;
+    },
+
+    /**
+     * @protected
+     */
+    mergeOption: function (newOption) {
+        var option = this.option;
+        var componentsMap = this._componentsMap;
+        var newCptTypes = [];
+
+        resetSourceDefaulter(this);
+
+        // If no component class, merge directly.
+        // For example: color, animaiton options, etc.
+        each$1(newOption, function (componentOption, mainType) {
+            if (componentOption == null) {
+                return;
+            }
+
+            if (!ComponentModel.hasClass(mainType)) {
+                // globalSettingTask.dirty();
+                option[mainType] = option[mainType] == null
+                    ? clone(componentOption)
+                    : merge(option[mainType], componentOption, true);
+            }
+            else if (mainType) {
+                newCptTypes.push(mainType);
+            }
+        });
+
+        ComponentModel.topologicalTravel(
+            newCptTypes, ComponentModel.getAllClassMainTypes(), visitComponent, this
+        );
+
+        function visitComponent(mainType, dependencies) {
+
+            var newCptOptionList = normalizeToArray(newOption[mainType]);
+
+            var mapResult = mappingToExists(
+                componentsMap.get(mainType), newCptOptionList
+            );
+
+            makeIdAndName(mapResult);
+
+            // Set mainType and complete subType.
+            each$1(mapResult, function (item, index) {
+                var opt = item.option;
+                if (isObject$1(opt)) {
+                    item.keyInfo.mainType = mainType;
+                    item.keyInfo.subType = determineSubType(mainType, opt, item.exist);
+                }
+            });
+
+            var dependentModels = getComponentsByTypes(
+                componentsMap, dependencies
+            );
+
+            option[mainType] = [];
+            componentsMap.set(mainType, []);
+
+            each$1(mapResult, function (resultItem, index) {
+                var componentModel = resultItem.exist;
+                var newCptOption = resultItem.option;
+
+                assert$1(
+                    isObject$1(newCptOption) || componentModel,
+                    'Empty component definition'
+                );
+
+                // Consider where is no new option and should be merged using {},
+                // see removeEdgeAndAdd in topologicalTravel and
+                // ComponentModel.getAllClassMainTypes.
+                if (!newCptOption) {
+                    componentModel.mergeOption({}, this);
+                    componentModel.optionUpdated({}, false);
+                }
+                else {
+                    var ComponentModelClass = ComponentModel.getClass(
+                        mainType, resultItem.keyInfo.subType, true
+                    );
+
+                    if (componentModel && componentModel instanceof ComponentModelClass) {
+                        componentModel.name = resultItem.keyInfo.name;
+                        // componentModel.settingTask && componentModel.settingTask.dirty();
+                        componentModel.mergeOption(newCptOption, this);
+                        componentModel.optionUpdated(newCptOption, false);
+                    }
+                    else {
+                        // PENDING Global as parent ?
+                        var extraOpt = extend(
+                            {
+                                dependentModels: dependentModels,
+                                componentIndex: index
+                            },
+                            resultItem.keyInfo
+                        );
+                        componentModel = new ComponentModelClass(
+                            newCptOption, this, this, extraOpt
+                        );
+                        extend(componentModel, extraOpt);
+                        componentModel.init(newCptOption, this, this, extraOpt);
+
+                        // Call optionUpdated after init.
+                        // newCptOption has been used as componentModel.option
+                        // and may be merged with theme and default, so pass null
+                        // to avoid confusion.
+                        componentModel.optionUpdated(null, true);
+                    }
+                }
+
+                componentsMap.get(mainType)[index] = componentModel;
+                option[mainType][index] = componentModel.option;
+            }, this);
+
+            // Backup series for filtering.
+            if (mainType === 'series') {
+                createSeriesIndices(this, componentsMap.get('series'));
+            }
+        }
+
+        this._seriesIndicesMap = createHashMap(
+            this._seriesIndices = this._seriesIndices || []
+        );
+    },
+
+    /**
+     * Get option for output (cloned option and inner info removed)
+     * @public
+     * @return {Object}
+     */
+    getOption: function () {
+        var option = clone(this.option);
+
+        each$1(option, function (opts, mainType) {
+            if (ComponentModel.hasClass(mainType)) {
+                var opts = normalizeToArray(opts);
+                for (var i = opts.length - 1; i >= 0; i--) {
+                    // Remove options with inner id.
+                    if (isIdInner(opts[i])) {
+                        opts.splice(i, 1);
+                    }
+                }
+                option[mainType] = opts;
+            }
+        });
+
+        delete option[OPTION_INNER_KEY];
+
+        return option;
+    },
+
+    /**
+     * @return {module:echarts/model/Model}
+     */
+    getTheme: function () {
+        return this._theme;
+    },
+
+    /**
+     * @param {string} mainType
+     * @param {number} [idx=0]
+     * @return {module:echarts/model/Component}
+     */
+    getComponent: function (mainType, idx) {
+        var list = this._componentsMap.get(mainType);
+        if (list) {
+            return list[idx || 0];
+        }
+    },
+
+    /**
+     * If none of index and id and name used, return all components with mainType.
+     * @param {Object} condition
+     * @param {string} condition.mainType
+     * @param {string} [condition.subType] If ignore, only query by mainType
+     * @param {number|Array.<number>} [condition.index] Either input index or id or name.
+     * @param {string|Array.<string>} [condition.id] Either input index or id or name.
+     * @param {string|Array.<string>} [condition.name] Either input index or id or name.
+     * @return {Array.<module:echarts/model/Component>}
+     */
+    queryComponents: function (condition) {
+        var mainType = condition.mainType;
+        if (!mainType) {
+            return [];
+        }
+
+        var index = condition.index;
+        var id = condition.id;
+        var name = condition.name;
+
+        var cpts = this._componentsMap.get(mainType);
+
+        if (!cpts || !cpts.length) {
+            return [];
+        }
+
+        var result;
+
+        if (index != null) {
+            if (!isArray(index)) {
+                index = [index];
+            }
+            result = filter(map(index, function (idx) {
+                return cpts[idx];
+            }), function (val) {
+                return !!val;
+            });
+        }
+        else if (id != null) {
+            var isIdArray = isArray(id);
+            result = filter(cpts, function (cpt) {
+                return (isIdArray && indexOf(id, cpt.id) >= 0)
+                    || (!isIdArray && cpt.id === id);
+            });
+        }
+        else if (name != null) {
+            var isNameArray = isArray(name);
+            result = filter(cpts, function (cpt) {
+                return (isNameArray && indexOf(name, cpt.name) >= 0)
+                    || (!isNameArray && cpt.name === name);
+            });
+        }
+        else {
+            // Return all components with mainType
+            result = cpts.slice();
+        }
+
+        return filterBySubType(result, condition);
+    },
+
+    /**
+     * The interface is different from queryComponents,
+     * which is convenient for inner usage.
+     *
+     * @usage
+     * var result = findComponents(
+     *     {mainType: 'dataZoom', query: {dataZoomId: 'abc'}}
+     * );
+     * var result = findComponents(
+     *     {mainType: 'series', subType: 'pie', query: {seriesName: 'uio'}}
+     * );
+     * var result = findComponents(
+     *     {mainType: 'series'},
+     *     function (model, index) {...}
+     * );
+     * // result like [component0, componnet1, ...]
+     *
+     * @param {Object} condition
+     * @param {string} condition.mainType Mandatory.
+     * @param {string} [condition.subType] Optional.
+     * @param {Object} [condition.query] like {xxxIndex, xxxId, xxxName},
+     *        where xxx is mainType.
+     *        If query attribute is null/undefined or has no index/id/name,
+     *        do not filtering by query conditions, which is convenient for
+     *        no-payload situations or when target of action is global.
+     * @param {Function} [condition.filter] parameter: component, return boolean.
+     * @return {Array.<module:echarts/model/Component>}
+     */
+    findComponents: function (condition) {
+        var query = condition.query;
+        var mainType = condition.mainType;
+
+        var queryCond = getQueryCond(query);
+        var result = queryCond
+            ? this.queryComponents(queryCond)
+            : this._componentsMap.get(mainType);
+
+        return doFilter(filterBySubType(result, condition));
+
+        function getQueryCond(q) {
+            var indexAttr = mainType + 'Index';
+            var idAttr = mainType + 'Id';
+            var nameAttr = mainType + 'Name';
+            return q && (
+                    q[indexAttr] != null
+                    || q[idAttr] != null
+                    || q[nameAttr] != null
+                )
+                ? {
+                    mainType: mainType,
+                    // subType will be filtered finally.
+                    index: q[indexAttr],
+                    id: q[idAttr],
+                    name: q[nameAttr]
+                }
+                : null;
+        }
+
+        function doFilter(res) {
+            return condition.filter
+                    ? filter(res, condition.filter)
+                    : res;
+        }
+    },
+
+    /**
+     * @usage
+     * eachComponent('legend', function (legendModel, index) {
+     *     ...
+     * });
+     * eachComponent(function (componentType, model, index) {
+     *     // componentType does not include subType
+     *     // (componentType is 'xxx' but not 'xxx.aa')
+     * });
+     * eachComponent(
+     *     {mainType: 'dataZoom', query: {dataZoomId: 'abc'}},
+     *     function (model, index) {...}
+     * );
+     * eachComponent(
+     *     {mainType: 'series', subType: 'pie', query: {seriesName: 'uio'}},
+     *     function (model, index) {...}
+     * );
+     *
+     * @param {string|Object=} mainType When mainType is object, the definition
+     *                                  is the same as the method 'findComponents'.
+     * @param {Function} cb
+     * @param {*} context
+     */
+    eachComponent: function (mainType, cb, context) {
+        var componentsMap = this._componentsMap;
+
+        if (typeof mainType === 'function') {
+            context = cb;
+            cb = mainType;
+            componentsMap.each(function (components, componentType) {
+                each$1(components, function (component, index) {
+                    cb.call(context, componentType, component, index);
+                });
+            });
+        }
+        else if (isString(mainType)) {
+            each$1(componentsMap.get(mainType), cb, context);
+        }
+        else if (isObject$1(mainType)) {
+            var queryResult = this.findComponents(mainType);
+            each$1(queryResult, cb, context);
+        }
+    },
+
+    /**
+     * @param {string} name
+     * @return {Array.<module:echarts/model/Series>}
+     */
+    getSeriesByName: function (name) {
+        var series = this._componentsMap.get('series');
+        return filter(series, function (oneSeries) {
+            return oneSeries.name === name;
+        });
+    },
+
+    /**
+     * @param {number} seriesIndex
+     * @return {module:echarts/model/Series}
+     */
+    getSeriesByIndex: function (seriesIndex) {
+        return this._componentsMap.get('series')[seriesIndex];
+    },
+
+    /**
+     * Get series list before filtered by type.
+     * FIXME: rename to getRawSeriesByType?
+     *
+     * @param {string} subType
+     * @return {Array.<module:echarts/model/Series>}
+     */
+    getSeriesByType: function (subType) {
+        var series = this._componentsMap.get('series');
+        return filter(series, function (oneSeries) {
+            return oneSeries.subType === subType;
+        });
+    },
+
+    /**
+     * @return {Array.<module:echarts/model/Series>}
+     */
+    getSeries: function () {
+        return this._componentsMap.get('series').slice();
+    },
+
+    /**
+     * @return {number}
+     */
+    getSeriesCount: function () {
+        return this._componentsMap.get('series').length;
+    },
+
+    /**
+     * After filtering, series may be different
+     * frome raw series.
+     *
+     * @param {Function} cb
+     * @param {*} context
+     */
+    eachSeries: function (cb, context) {
+        assertSeriesInitialized(this);
+        each$1(this._seriesIndices, function (rawSeriesIndex) {
+            var series = this._componentsMap.get('series')[rawSeriesIndex];
+            cb.call(context, series, rawSeriesIndex);
+        }, this);
+    },
+
+    /**
+     * Iterate raw series before filtered.
+     *
+     * @param {Function} cb
+     * @param {*} context
+     */
+    eachRawSeries: function (cb, context) {
+        each$1(this._componentsMap.get('series'), cb, context);
+    },
+
+    /**
+     * After filtering, series may be different.
+     * frome raw series.
+     *
+     * @parma {string} subType
+     * @param {Function} cb
+     * @param {*} context
+     */
+    eachSeriesByType: function (subType, cb, context) {
+        assertSeriesInitialized(this);
+        each$1(this._seriesIndices, function (rawSeriesIndex) {
+            var series = this._componentsMap.get('series')[rawSeriesIndex];
+            if (series.subType === subType) {
+                cb.call(context, series, rawSeriesIndex);
+            }
+        }, this);
+    },
+
+    /**
+     * Iterate raw series before filtered of given type.
+     *
+     * @parma {string} subType
+     * @param {Function} cb
+     * @param {*} context
+     */
+    eachRawSeriesByType: function (subType, cb, context) {
+        return each$1(this.getSeriesByType(subType), cb, context);
+    },
+
+    /**
+     * @param {module:echarts/model/Series} seriesModel
+     */
+    isSeriesFiltered: function (seriesModel) {
+        assertSeriesInitialized(this);
+        return this._seriesIndicesMap.get(seriesModel.componentIndex) == null;
+    },
+
+    /**
+     * @return {Array.<number>}
+     */
+    getCurrentSeriesIndices: function () {
+        return (this._seriesIndices || []).slice();
+    },
+
+    /**
+     * @param {Function} cb
+     * @param {*} context
+     */
+    filterSeries: function (cb, context) {
+        assertSeriesInitialized(this);
+        var filteredSeries = filter(
+            this._componentsMap.get('series'), cb, context
+        );
+        createSeriesIndices(this, filteredSeries);
+    },
+
+    restoreData: function (payload) {
+        var componentsMap = this._componentsMap;
+
+        createSeriesIndices(this, componentsMap.get('series'));
+
+        var componentTypes = [];
+        componentsMap.each(function (components, componentType) {
+            componentTypes.push(componentType);
+        });
+
+        ComponentModel.topologicalTravel(
+            componentTypes,
+            ComponentModel.getAllClassMainTypes(),
+            function (componentType, dependencies) {
+                each$1(componentsMap.get(componentType), function (component) {
+                    (componentType !== 'series' || !isNotTargetSeries(component, payload))
+                        && component.restoreData();
+                });
+            }
+        );
+    }
+
+});
+
+function isNotTargetSeries(seriesModel, payload) {
+    if (payload) {
+        var index = payload.seiresIndex;
+        var id = payload.seriesId;
+        var name = payload.seriesName;
+        return (index != null && seriesModel.componentIndex !== index)
+            || (id != null && seriesModel.id !== id)
+            || (name != null && seriesModel.name !== name);
+    }
+}
+
+/**
+ * @inner
+ */
+function mergeTheme(option, theme) {
+    // PENDING
+    // NOT use `colorLayer` in theme if option has `color`
+    var notMergeColorLayer = option.color && !option.colorLayer;
+
+    each$1(theme, function (themeItem, name) {
+        if (name === 'colorLayer' && notMergeColorLayer) {
+            return;
+        }
+        // å¦‚æžœæœ‰ component model åˆ™æŠŠå…·ä½“çš„ merge é€»è¾‘äº¤ç»™è¯¥ model å¤„ç†
+        if (!ComponentModel.hasClass(name)) {
+            if (typeof themeItem === 'object') {
+                option[name] = !option[name]
+                    ? clone(themeItem)
+                    : merge(option[name], themeItem, false);
+            }
+            else {
+                if (option[name] == null) {
+                    option[name] = themeItem;
+                }
+            }
+        }
+    });
+}
+
+function initBase(baseOption) {
+    baseOption = baseOption;
+
+    // Using OPTION_INNER_KEY to mark that this option can not be used outside,
+    // i.e. `chart.setOption(chart.getModel().option);` is forbiden.
+    this.option = {};
+    this.option[OPTION_INNER_KEY] = 1;
+
+    /**
+     * Init with series: [], in case of calling findSeries method
+     * before series initialized.
+     * @type {Object.<string, Array.<module:echarts/model/Model>>}
+     * @private
+     */
+    this._componentsMap = createHashMap({series: []});
+
+    /**
+     * Mapping between filtered series list and raw series list.
+     * key: filtered series indices, value: raw series indices.
+     * @type {Array.<nubmer>}
+     * @private
+     */
+    this._seriesIndices;
+
+    this._seriesIndicesMap;
+
+    mergeTheme(baseOption, this._theme.option);
+
+    // TODO Needs clone when merging to the unexisted property
+    merge(baseOption, globalDefault, false);
+
+    this.mergeOption(baseOption);
+}
+
+/**
+ * @inner
+ * @param {Array.<string>|string} types model types
+ * @return {Object} key: {string} type, value: {Array.<Object>} models
+ */
+function getComponentsByTypes(componentsMap, types) {
+    if (!isArray(types)) {
+        types = types ? [types] : [];
+    }
+
+    var ret = {};
+    each$1(types, function (type) {
+        ret[type] = (componentsMap.get(type) || []).slice();
+    });
+
+    return ret;
+}
+
+/**
+ * @inner
+ */
+function determineSubType(mainType, newCptOption, existComponent) {
+    var subType = newCptOption.type
+        ? newCptOption.type
+        : existComponent
+        ? existComponent.subType
+        // Use determineSubType only when there is no existComponent.
+        : ComponentModel.determineSubType(mainType, newCptOption);
+
+    // tooltip, markline, markpoint may always has no subType
+    return subType;
+}
+
+/**
+ * @inner
+ */
+function createSeriesIndices(ecModel, seriesModels) {
+    ecModel._seriesIndicesMap = createHashMap(
+        ecModel._seriesIndices = map(seriesModels, function (series) {
+            return series.componentIndex;
+        }) || []
+    );
+}
+
+/**
+ * @inner
+ */
+function filterBySubType(components, condition) {
+    // Using hasOwnProperty for restrict. Consider
+    // subType is undefined in user payload.
+    return condition.hasOwnProperty('subType')
+        ? filter(components, function (cpt) {
+            return cpt.subType === condition.subType;
+        })
+        : components;
+}
+
+/**
+ * @inner
+ */
+function assertSeriesInitialized(ecModel) {
+    // Components that use _seriesIndices should depends on series component,
+    // which make sure that their initialization is after series.
+    if (__DEV__) {
+        if (!ecModel._seriesIndices) {
+            throw new Error('Option should contains series.');
+        }
+    }
+}
+
+mixin(GlobalModel, colorPaletteMixin);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var echartsAPIList = [
+    'getDom', 'getZr', 'getWidth', 'getHeight', 'getDevicePixelRatio', 'dispatchAction', 'isDisposed',
+    'on', 'off', 'getDataURL', 'getConnectedDataURL', 'getModel', 'getOption',
+    'getViewOfComponentModel', 'getViewOfSeriesModel'
+];
+// And `getCoordinateSystems` and `getComponentByElement` will be injected in echarts.js
+
+function ExtensionAPI(chartInstance) {
+    each$1(echartsAPIList, function (name) {
+        this[name] = bind(chartInstance[name], chartInstance);
+    }, this);
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var coordinateSystemCreators = {};
+
+function CoordinateSystemManager() {
+
+    this._coordinateSystems = [];
+}
+
+CoordinateSystemManager.prototype = {
+
+    constructor: CoordinateSystemManager,
+
+    create: function (ecModel, api) {
+        var coordinateSystems = [];
+        each$1(coordinateSystemCreators, function (creater, type) {
+            var list = creater.create(ecModel, api);
+            coordinateSystems = coordinateSystems.concat(list || []);
+        });
+
+        this._coordinateSystems = coordinateSystems;
+    },
+
+    update: function (ecModel, api) {
+        each$1(this._coordinateSystems, function (coordSys) {
+            coordSys.update && coordSys.update(ecModel, api);
+        });
+    },
+
+    getCoordinateSystems: function () {
+        return this._coordinateSystems.slice();
+    }
+};
+
+CoordinateSystemManager.register = function (type, coordinateSystemCreator) {
+    coordinateSystemCreators[type] = coordinateSystemCreator;
+};
+
+CoordinateSystemManager.get = function (type) {
+    return coordinateSystemCreators[type];
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * ECharts option manager
+ *
+ * @module {echarts/model/OptionManager}
+ */
+
+
+var each$4 = each$1;
+var clone$3 = clone;
+var map$1 = map;
+var merge$1 = merge;
+
+var QUERY_REG = /^(min|max)?(.+)$/;
+
+/**
+ * TERM EXPLANATIONS:
+ *
+ * [option]:
+ *
+ *     An object that contains definitions of components. For example:
+ *     var option = {
+ *         title: {...},
+ *         legend: {...},
+ *         visualMap: {...},
+ *         series: [
+ *             {data: [...]},
+ *             {data: [...]},
+ *             ...
+ *         ]
+ *     };
+ *
+ * [rawOption]:
+ *
+ *     An object input to echarts.setOption. 'rawOption' may be an
+ *     'option', or may be an object contains multi-options. For example:
+ *     var option = {
+ *         baseOption: {
+ *             title: {...},
+ *             legend: {...},
+ *             series: [
+ *                 {data: [...]},
+ *                 {data: [...]},
+ *                 ...
+ *             ]
+ *         },
+ *         timeline: {...},
+ *         options: [
+ *             {title: {...}, series: {data: [...]}},
+ *             {title: {...}, series: {data: [...]}},
+ *             ...
+ *         ],
+ *         media: [
+ *             {
+ *                 query: {maxWidth: 320},
+ *                 option: {series: {x: 20}, visualMap: {show: false}}
+ *             },
+ *             {
+ *                 query: {minWidth: 320, maxWidth: 720},
+ *                 option: {series: {x: 500}, visualMap: {show: true}}
+ *             },
+ *             {
+ *                 option: {series: {x: 1200}, visualMap: {show: true}}
+ *             }
+ *         ]
+ *     };
+ *
+ * @alias module:echarts/model/OptionManager
+ * @param {module:echarts/ExtensionAPI} api
+ */
+function OptionManager(api) {
+
+    /**
+     * @private
+     * @type {module:echarts/ExtensionAPI}
+     */
+    this._api = api;
+
+    /**
+     * @private
+     * @type {Array.<number>}
+     */
+    this._timelineOptions = [];
+
+    /**
+     * @private
+     * @type {Array.<Object>}
+     */
+    this._mediaList = [];
+
+    /**
+     * @private
+     * @type {Object}
+     */
+    this._mediaDefault;
+
+    /**
+     * -1, means default.
+     * empty means no media.
+     * @private
+     * @type {Array.<number>}
+     */
+    this._currentMediaIndices = [];
+
+    /**
+     * @private
+     * @type {Object}
+     */
+    this._optionBackup;
+
+    /**
+     * @private
+     * @type {Object}
+     */
+    this._newBaseOption;
+}
+
+// timeline.notMerge is not supported in ec3. Firstly there is rearly
+// case that notMerge is needed. Secondly supporting 'notMerge' requires
+// rawOption cloned and backuped when timeline changed, which does no
+// good to performance. What's more, that both timeline and setOption
+// method supply 'notMerge' brings complex and some problems.
+// Consider this case:
+// (step1) chart.setOption({timeline: {notMerge: false}, ...}, false);
+// (step2) chart.setOption({timeline: {notMerge: true}, ...}, false);
+
+OptionManager.prototype = {
+
+    constructor: OptionManager,
+
+    /**
+     * @public
+     * @param {Object} rawOption Raw option.
+     * @param {module:echarts/model/Global} ecModel
+     * @param {Array.<Function>} optionPreprocessorFuncs
+     * @return {Object} Init option
+     */
+    setOption: function (rawOption, optionPreprocessorFuncs) {
+        if (rawOption) {
+            // That set dat primitive is dangerous if user reuse the data when setOption again.
+            each$1(normalizeToArray(rawOption.series), function (series) {
+                series && series.data && isTypedArray(series.data) && setAsPrimitive(series.data);
+            });
+        }
+
+        // Caution: some series modify option data, if do not clone,
+        // it should ensure that the repeat modify correctly
+        // (create a new object when modify itself).
+        rawOption = clone$3(rawOption, true);
+
+        // FIXME
+        // å¦‚æžœ timeline options æˆ–è€… media ä¸è®¾ç½®äº†æŸä¸ªå±žæ€§ï¼Œè€ŒbaseOptionä¸æ²¡æœ‰è®¾ç½®ï¼Œåˆ™è¿›è¡Œè¦å‘Šã€‚
+
+        var oldOptionBackup = this._optionBackup;
+        var newParsedOption = parseRawOption.call(
+            this, rawOption, optionPreprocessorFuncs, !oldOptionBackup
+        );
+        this._newBaseOption = newParsedOption.baseOption;
+
+        // For setOption at second time (using merge mode);
+        if (oldOptionBackup) {
+            // Only baseOption can be merged.
+            mergeOption(oldOptionBackup.baseOption, newParsedOption.baseOption);
+
+            // For simplicity, timeline options and media options do not support merge,
+            // that is, if you `setOption` twice and both has timeline options, the latter
+            // timeline opitons will not be merged to the formers, but just substitude them.
+            if (newParsedOption.timelineOptions.length) {
+                oldOptionBackup.timelineOptions = newParsedOption.timelineOptions;
+            }
+            if (newParsedOption.mediaList.length) {
+                oldOptionBackup.mediaList = newParsedOption.mediaList;
+            }
+            if (newParsedOption.mediaDefault) {
+                oldOptionBackup.mediaDefault = newParsedOption.mediaDefault;
+            }
+        }
+        else {
+            this._optionBackup = newParsedOption;
+        }
+    },
+
+    /**
+     * @param {boolean} isRecreate
+     * @return {Object}
+     */
+    mountOption: function (isRecreate) {
+        var optionBackup = this._optionBackup;
+
+        // TODO
+        // å¦‚æžœæ²¡æœ‰resetåŠŸèƒ½åˆ™ä¸cloneã€‚
+
+        this._timelineOptions = map$1(optionBackup.timelineOptions, clone$3);
+        this._mediaList = map$1(optionBackup.mediaList, clone$3);
+        this._mediaDefault = clone$3(optionBackup.mediaDefault);
+        this._currentMediaIndices = [];
+
+        return clone$3(isRecreate
+            // this._optionBackup.baseOption, which is created at the first `setOption`
+            // called, and is merged into every new option by inner method `mergeOption`
+            // each time `setOption` called, can be only used in `isRecreate`, because
+            // its reliability is under suspicion. In other cases option merge is
+            // performed by `model.mergeOption`.
+            ? optionBackup.baseOption : this._newBaseOption
+        );
+    },
+
+    /**
+     * @param {module:echarts/model/Global} ecModel
+     * @return {Object}
+     */
+    getTimelineOption: function (ecModel) {
+        var option;
+        var timelineOptions = this._timelineOptions;
+
+        if (timelineOptions.length) {
+            // getTimelineOption can only be called after ecModel inited,
+            // so we can get currentIndex from timelineModel.
+            var timelineModel = ecModel.getComponent('timeline');
+            if (timelineModel) {
+                option = clone$3(
+                    timelineOptions[timelineModel.getCurrentIndex()],
+                    true
+                );
+            }
+        }
+
+        return option;
+    },
+
+    /**
+     * @param {module:echarts/model/Global} ecModel
+     * @return {Array.<Object>}
+     */
+    getMediaOption: function (ecModel) {
+        var ecWidth = this._api.getWidth();
+        var ecHeight = this._api.getHeight();
+        var mediaList = this._mediaList;
+        var mediaDefault = this._mediaDefault;
+        var indices = [];
+        var result = [];
+
+        // No media defined.
+        if (!mediaList.length && !mediaDefault) {
+            return result;
+        }
+
+        // Multi media may be applied, the latter defined media has higher priority.
+        for (var i = 0, len = mediaList.length; i < len; i++) {
+            if (applyMediaQuery(mediaList[i].query, ecWidth, ecHeight)) {
+                indices.push(i);
+            }
+        }
+
+        // FIXME
+        // æ˜¯å¦mediaDefaultåº”è¯¥å¼ºåˆ¶ç”¨æˆ·è®¾ç½®ï¼Œå¦åˆ™å¯èƒ½ä¿®æ”¹ä¸èƒ½å›žå½’ã€‚
+        if (!indices.length && mediaDefault) {
+            indices = [-1];
+        }
+
+        if (indices.length && !indicesEquals(indices, this._currentMediaIndices)) {
+            result = map$1(indices, function (index) {
+                return clone$3(
+                    index === -1 ? mediaDefault.option : mediaList[index].option
+                );
+            });
+        }
+        // Otherwise return nothing.
+
+        this._currentMediaIndices = indices;
+
+        return result;
+    }
+};
+
+function parseRawOption(rawOption, optionPreprocessorFuncs, isNew) {
+    var timelineOptions = [];
+    var mediaList = [];
+    var mediaDefault;
+    var baseOption;
+
+    // Compatible with ec2.
+    var timelineOpt = rawOption.timeline;
+
+    if (rawOption.baseOption) {
+        baseOption = rawOption.baseOption;
+    }
+
+    // For timeline
+    if (timelineOpt || rawOption.options) {
+        baseOption = baseOption || {};
+        timelineOptions = (rawOption.options || []).slice();
+    }
+
+    // For media query
+    if (rawOption.media) {
+        baseOption = baseOption || {};
+        var media = rawOption.media;
+        each$4(media, function (singleMedia) {
+            if (singleMedia && singleMedia.option) {
+                if (singleMedia.query) {
+                    mediaList.push(singleMedia);
+                }
+                else if (!mediaDefault) {
+                    // Use the first media default.
+                    mediaDefault = singleMedia;
+                }
+            }
+        });
+    }
+
+    // For normal option
+    if (!baseOption) {
+        baseOption = rawOption;
+    }
+
+    // Set timelineOpt to baseOption in ec3,
+    // which is convenient for merge option.
+    if (!baseOption.timeline) {
+        baseOption.timeline = timelineOpt;
+    }
+
+    // Preprocess.
+    each$4([baseOption].concat(timelineOptions)
+        .concat(map(mediaList, function (media) {
+            return media.option;
+        })),
+        function (option) {
+            each$4(optionPreprocessorFuncs, function (preProcess) {
+                preProcess(option, isNew);
+            });
+        }
+    );
+
+    return {
+        baseOption: baseOption,
+        timelineOptions: timelineOptions,
+        mediaDefault: mediaDefault,
+        mediaList: mediaList
+    };
+}
+
+/**
+ * @see <http://www.w3.org/TR/css3-mediaqueries/#media1>
+ * Support: width, height, aspectRatio
+ * Can use max or min as prefix.
+ */
+function applyMediaQuery(query, ecWidth, ecHeight) {
+    var realMap = {
+        width: ecWidth,
+        height: ecHeight,
+        aspectratio: ecWidth / ecHeight // lowser case for convenientce.
+    };
+
+    var applicatable = true;
+
+    each$1(query, function (value, attr) {
+        var matched = attr.match(QUERY_REG);
+
+        if (!matched || !matched[1] || !matched[2]) {
+            return;
+        }
+
+        var operator = matched[1];
+        var realAttr = matched[2].toLowerCase();
+
+        if (!compare(realMap[realAttr], value, operator)) {
+            applicatable = false;
+        }
+    });
+
+    return applicatable;
+}
+
+function compare(real, expect, operator) {
+    if (operator === 'min') {
+        return real >= expect;
+    }
+    else if (operator === 'max') {
+        return real <= expect;
+    }
+    else { // Equals
+        return real === expect;
+    }
+}
+
+function indicesEquals(indices1, indices2) {
+    // indices is always order by asc and has only finite number.
+    return indices1.join(',') === indices2.join(',');
+}
+
+/**
+ * Consider case:
+ * `chart.setOption(opt1);`
+ * Then user do some interaction like dataZoom, dataView changing.
+ * `chart.setOption(opt2);`
+ * Then user press 'reset button' in toolbox.
+ *
+ * After doing that all of the interaction effects should be reset, the
+ * chart should be the same as the result of invoke
+ * `chart.setOption(opt1); chart.setOption(opt2);`.
+ *
+ * Although it is not able ensure that
+ * `chart.setOption(opt1); chart.setOption(opt2);` is equivalents to
+ * `chart.setOption(merge(opt1, opt2));` exactly,
+ * this might be the only simple way to implement that feature.
+ *
+ * MEMO: We've considered some other approaches:
+ * 1. Each model handle its self restoration but not uniform treatment.
+ *     (Too complex in logic and error-prone)
+ * 2. Use a shadow ecModel. (Performace expensive)
+ */
+function mergeOption(oldOption, newOption) {
+    newOption = newOption || {};
+
+    each$4(newOption, function (newCptOpt, mainType) {
+        if (newCptOpt == null) {
+            return;
+        }
+
+        var oldCptOpt = oldOption[mainType];
+
+        if (!ComponentModel.hasClass(mainType)) {
+            oldOption[mainType] = merge$1(oldCptOpt, newCptOpt, true);
+        }
+        else {
+            newCptOpt = normalizeToArray(newCptOpt);
+            oldCptOpt = normalizeToArray(oldCptOpt);
+
+            var mapResult = mappingToExists(oldCptOpt, newCptOpt);
+
+            oldOption[mainType] = map$1(mapResult, function (item) {
+                return (item.option && item.exist)
+                    ? merge$1(item.exist, item.option, true)
+                    : (item.exist || item.option);
+            });
+        }
+    });
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var each$5 = each$1;
+var isObject$3 = isObject$1;
+
+var POSSIBLE_STYLES = [
+    'areaStyle', 'lineStyle', 'nodeStyle', 'linkStyle',
+    'chordStyle', 'label', 'labelLine'
+];
+
+function compatEC2ItemStyle(opt) {
+    var itemStyleOpt = opt && opt.itemStyle;
+    if (!itemStyleOpt) {
+        return;
+    }
+    for (var i = 0, len = POSSIBLE_STYLES.length; i < len; i++) {
+        var styleName = POSSIBLE_STYLES[i];
+        var normalItemStyleOpt = itemStyleOpt.normal;
+        var emphasisItemStyleOpt = itemStyleOpt.emphasis;
+        if (normalItemStyleOpt && normalItemStyleOpt[styleName]) {
+            opt[styleName] = opt[styleName] || {};
+            if (!opt[styleName].normal) {
+                opt[styleName].normal = normalItemStyleOpt[styleName];
+            }
+            else {
+                merge(opt[styleName].normal, normalItemStyleOpt[styleName]);
+            }
+            normalItemStyleOpt[styleName] = null;
+        }
+        if (emphasisItemStyleOpt && emphasisItemStyleOpt[styleName]) {
+            opt[styleName] = opt[styleName] || {};
+            if (!opt[styleName].emphasis) {
+                opt[styleName].emphasis = emphasisItemStyleOpt[styleName];
+            }
+            else {
+                merge(opt[styleName].emphasis, emphasisItemStyleOpt[styleName]);
+            }
+            emphasisItemStyleOpt[styleName] = null;
+        }
+    }
+}
+
+function convertNormalEmphasis(opt, optType, useExtend) {
+    if (opt && opt[optType] && (opt[optType].normal || opt[optType].emphasis)) {
+        var normalOpt = opt[optType].normal;
+        var emphasisOpt = opt[optType].emphasis;
+
+        if (normalOpt) {
+            // Timeline controlStyle has other properties besides normal and emphasis
+            if (useExtend) {
+                opt[optType].normal = opt[optType].emphasis = null;
+                defaults(opt[optType], normalOpt);
+            }
+            else {
+                opt[optType] = normalOpt;
+            }
+        }
+        if (emphasisOpt) {
+            opt.emphasis = opt.emphasis || {};
+            opt.emphasis[optType] = emphasisOpt;
+        }
+    }
+}
+function removeEC3NormalStatus(opt) {
+    convertNormalEmphasis(opt, 'itemStyle');
+    convertNormalEmphasis(opt, 'lineStyle');
+    convertNormalEmphasis(opt, 'areaStyle');
+    convertNormalEmphasis(opt, 'label');
+    convertNormalEmphasis(opt, 'labelLine');
+    // treemap
+    convertNormalEmphasis(opt, 'upperLabel');
+    // graph
+    convertNormalEmphasis(opt, 'edgeLabel');
+}
+
+function compatTextStyle(opt, propName) {
+    // Check whether is not object (string\null\undefined ...)
+    var labelOptSingle = isObject$3(opt) && opt[propName];
+    var textStyle = isObject$3(labelOptSingle) && labelOptSingle.textStyle;
+    if (textStyle) {
+        for (var i = 0, len = TEXT_STYLE_OPTIONS.length; i < len; i++) {
+            var propName = TEXT_STYLE_OPTIONS[i];
+            if (textStyle.hasOwnProperty(propName)) {
+                labelOptSingle[propName] = textStyle[propName];
+            }
+        }
+    }
+}
+
+function compatEC3CommonStyles(opt) {
+    if (opt) {
+        removeEC3NormalStatus(opt);
+        compatTextStyle(opt, 'label');
+        opt.emphasis && compatTextStyle(opt.emphasis, 'label');
+    }
+}
+
+function processSeries(seriesOpt) {
+    if (!isObject$3(seriesOpt)) {
+        return;
+    }
+
+    compatEC2ItemStyle(seriesOpt);
+    removeEC3NormalStatus(seriesOpt);
+
+    compatTextStyle(seriesOpt, 'label');
+    // treemap
+    compatTextStyle(seriesOpt, 'upperLabel');
+    // graph
+    compatTextStyle(seriesOpt, 'edgeLabel');
+    if (seriesOpt.emphasis) {
+        compatTextStyle(seriesOpt.emphasis, 'label');
+        // treemap
+        compatTextStyle(seriesOpt.emphasis, 'upperLabel');
+        // graph
+        compatTextStyle(seriesOpt.emphasis, 'edgeLabel');
+    }
+
+    var markPoint = seriesOpt.markPoint;
+    if (markPoint) {
+        compatEC2ItemStyle(markPoint);
+        compatEC3CommonStyles(markPoint);
+    }
+
+    var markLine = seriesOpt.markLine;
+    if (markLine) {
+        compatEC2ItemStyle(markLine);
+        compatEC3CommonStyles(markLine);
+    }
+
+    var markArea = seriesOpt.markArea;
+    if (markArea) {
+        compatEC3CommonStyles(markArea);
+    }
+
+    var data = seriesOpt.data;
+
+    // Break with ec3: if `setOption` again, there may be no `type` in option,
+    // then the backward compat based on option type will not be performed.
+
+    if (seriesOpt.type === 'graph') {
+        data = data || seriesOpt.nodes;
+        var edgeData = seriesOpt.links || seriesOpt.edges;
+        if (edgeData && !isTypedArray(edgeData)) {
+            for (var i = 0; i < edgeData.length; i++) {
+                compatEC3CommonStyles(edgeData[i]);
+            }
+        }
+        each$1(seriesOpt.categories, function (opt) {
+            removeEC3NormalStatus(opt);
+        });
+    }
+
+    if (data && !isTypedArray(data)) {
+        for (var i = 0; i < data.length; i++) {
+            compatEC3CommonStyles(data[i]);
+        }
+    }
+
+    // mark point data
+    var markPoint = seriesOpt.markPoint;
+    if (markPoint && markPoint.data) {
+        var mpData = markPoint.data;
+        for (var i = 0; i < mpData.length; i++) {
+            compatEC3CommonStyles(mpData[i]);
+        }
+    }
+    // mark line data
+    var markLine = seriesOpt.markLine;
+    if (markLine && markLine.data) {
+        var mlData = markLine.data;
+        for (var i = 0; i < mlData.length; i++) {
+            if (isArray(mlData[i])) {
+                compatEC3CommonStyles(mlData[i][0]);
+                compatEC3CommonStyles(mlData[i][1]);
+            }
+            else {
+                compatEC3CommonStyles(mlData[i]);
+            }
+        }
+    }
+
+    // Series
+    if (seriesOpt.type === 'gauge') {
+        compatTextStyle(seriesOpt, 'axisLabel');
+        compatTextStyle(seriesOpt, 'title');
+        compatTextStyle(seriesOpt, 'detail');
+    }
+    else if (seriesOpt.type === 'treemap') {
+        convertNormalEmphasis(seriesOpt.breadcrumb, 'itemStyle');
+        each$1(seriesOpt.levels, function (opt) {
+            removeEC3NormalStatus(opt);
+        });
+    }
+    else if (seriesOpt.type === 'tree') {
+        removeEC3NormalStatus(seriesOpt.leaves);
+    }
+    // sunburst starts from ec4, so it does not need to compat levels.
+}
+
+function toArr(o) {
+    return isArray(o) ? o : o ? [o] : [];
+}
+
+function toObj(o) {
+    return (isArray(o) ? o[0] : o) || {};
+}
+
+var compatStyle = function (option, isTheme) {
+    each$5(toArr(option.series), function (seriesOpt) {
+        isObject$3(seriesOpt) && processSeries(seriesOpt);
+    });
+
+    var axes = ['xAxis', 'yAxis', 'radiusAxis', 'angleAxis', 'singleAxis', 'parallelAxis', 'radar'];
+    isTheme && axes.push('valueAxis', 'categoryAxis', 'logAxis', 'timeAxis');
+
+    each$5(
+        axes,
+        function (axisName) {
+            each$5(toArr(option[axisName]), function (axisOpt) {
+                if (axisOpt) {
+                    compatTextStyle(axisOpt, 'axisLabel');
+                    compatTextStyle(axisOpt.axisPointer, 'label');
+                }
+            });
+        }
+    );
+
+    each$5(toArr(option.parallel), function (parallelOpt) {
+        var parallelAxisDefault = parallelOpt && parallelOpt.parallelAxisDefault;
+        compatTextStyle(parallelAxisDefault, 'axisLabel');
+        compatTextStyle(parallelAxisDefault && parallelAxisDefault.axisPointer, 'label');
+    });
+
+    each$5(toArr(option.calendar), function (calendarOpt) {
+        convertNormalEmphasis(calendarOpt, 'itemStyle');
+        compatTextStyle(calendarOpt, 'dayLabel');
+        compatTextStyle(calendarOpt, 'monthLabel');
+        compatTextStyle(calendarOpt, 'yearLabel');
+    });
+
+    // radar.name.textStyle
+    each$5(toArr(option.radar), function (radarOpt) {
+        compatTextStyle(radarOpt, 'name');
+    });
+
+    each$5(toArr(option.geo), function (geoOpt) {
+        if (isObject$3(geoOpt)) {
+            compatEC3CommonStyles(geoOpt);
+            each$5(toArr(geoOpt.regions), function (regionObj) {
+                compatEC3CommonStyles(regionObj);
+            });
+        }
+    });
+
+    each$5(toArr(option.timeline), function (timelineOpt) {
+        compatEC3CommonStyles(timelineOpt);
+        convertNormalEmphasis(timelineOpt, 'label');
+        convertNormalEmphasis(timelineOpt, 'itemStyle');
+        convertNormalEmphasis(timelineOpt, 'controlStyle', true);
+
+        var data = timelineOpt.data;
+        isArray(data) && each$1(data, function (item) {
+            if (isObject$1(item)) {
+                convertNormalEmphasis(item, 'label');
+                convertNormalEmphasis(item, 'itemStyle');
+            }
+        });
+    });
+
+    each$5(toArr(option.toolbox), function (toolboxOpt) {
+        convertNormalEmphasis(toolboxOpt, 'iconStyle');
+        each$5(toolboxOpt.feature, function (featureOpt) {
+            convertNormalEmphasis(featureOpt, 'iconStyle');
+        });
+    });
+
+    compatTextStyle(toObj(option.axisPointer), 'label');
+    compatTextStyle(toObj(option.tooltip).axisPointer, 'label');
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// Compatitable with 2.0
+
+function get(opt, path) {
+    path = path.split(',');
+    var obj = opt;
+    for (var i = 0; i < path.length; i++) {
+        obj = obj && obj[path[i]];
+        if (obj == null) {
+            break;
+        }
+    }
+    return obj;
+}
+
+function set$1(opt, path, val, overwrite) {
+    path = path.split(',');
+    var obj = opt;
+    var key;
+    for (var i = 0; i < path.length - 1; i++) {
+        key = path[i];
+        if (obj[key] == null) {
+            obj[key] = {};
+        }
+        obj = obj[key];
+    }
+    if (overwrite || obj[path[i]] == null) {
+        obj[path[i]] = val;
+    }
+}
+
+function compatLayoutProperties(option) {
+    each$1(LAYOUT_PROPERTIES, function (prop) {
+        if (prop[0] in option && !(prop[1] in option)) {
+            option[prop[1]] = option[prop[0]];
+        }
+    });
+}
+
+var LAYOUT_PROPERTIES = [
+    ['x', 'left'], ['y', 'top'], ['x2', 'right'], ['y2', 'bottom']
+];
+
+var COMPATITABLE_COMPONENTS = [
+    'grid', 'geo', 'parallel', 'legend', 'toolbox', 'title', 'visualMap', 'dataZoom', 'timeline'
+];
+
+var backwardCompat = function (option, isTheme) {
+    compatStyle(option, isTheme);
+
+    // Make sure series array for model initialization.
+    option.series = normalizeToArray(option.series);
+
+    each$1(option.series, function (seriesOpt) {
+        if (!isObject$1(seriesOpt)) {
+            return;
+        }
+
+        var seriesType = seriesOpt.type;
+
+        if (seriesType === 'pie' || seriesType === 'gauge') {
+            if (seriesOpt.clockWise != null) {
+                seriesOpt.clockwise = seriesOpt.clockWise;
+            }
+        }
+        if (seriesType === 'gauge') {
+            var pointerColor = get(seriesOpt, 'pointer.color');
+            pointerColor != null
+                && set$1(seriesOpt, 'itemStyle.normal.color', pointerColor);
+        }
+
+        compatLayoutProperties(seriesOpt);
+    });
+
+    // dataRange has changed to visualMap
+    if (option.dataRange) {
+        option.visualMap = option.dataRange;
+    }
+
+    each$1(COMPATITABLE_COMPONENTS, function (componentName) {
+        var options = option[componentName];
+        if (options) {
+            if (!isArray(options)) {
+                options = [options];
+            }
+            each$1(options, function (option) {
+                compatLayoutProperties(option);
+            });
+        }
+    });
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// (1) [Caution]: the logic is correct based on the premises:
+//     data processing stage is blocked in stream.
+//     See <module:echarts/stream/Scheduler#performDataProcessorTasks>
+// (2) Only register once when import repeatly.
+//     Should be executed before after series filtered and before stack calculation.
+var dataStack = function (ecModel) {
+    var stackInfoMap = createHashMap();
+    ecModel.eachSeries(function (seriesModel) {
+        var stack = seriesModel.get('stack');
+        // Compatibal: when `stack` is set as '', do not stack.
+        if (stack) {
+            var stackInfoList = stackInfoMap.get(stack) || stackInfoMap.set(stack, []);
+            var data = seriesModel.getData();
+
+            var stackInfo = {
+                // Used for calculate axis extent automatically.
+                stackResultDimension: data.getCalculationInfo('stackResultDimension'),
+                stackedOverDimension: data.getCalculationInfo('stackedOverDimension'),
+                stackedDimension: data.getCalculationInfo('stackedDimension'),
+                stackedByDimension: data.getCalculationInfo('stackedByDimension'),
+                isStackedByIndex: data.getCalculationInfo('isStackedByIndex'),
+                data: data,
+                seriesModel: seriesModel
+            };
+
+            // If stacked on axis that do not support data stack.
+            if (!stackInfo.stackedDimension
+                || !(stackInfo.isStackedByIndex || stackInfo.stackedByDimension)
+            ) {
+                return;
+            }
+
+            stackInfoList.length && data.setCalculationInfo(
+                'stackedOnSeries', stackInfoList[stackInfoList.length - 1].seriesModel
+            );
+
+            stackInfoList.push(stackInfo);
+        }
+    });
+
+    stackInfoMap.each(calculateStack);
+};
+
+function calculateStack(stackInfoList) {
+    each$1(stackInfoList, function (targetStackInfo, idxInStack) {
+        var resultVal = [];
+        var resultNaN = [NaN, NaN];
+        var dims = [targetStackInfo.stackResultDimension, targetStackInfo.stackedOverDimension];
+        var targetData = targetStackInfo.data;
+        var isStackedByIndex = targetStackInfo.isStackedByIndex;
+
+        // Should not write on raw data, because stack series model list changes
+        // depending on legend selection.
+        var newData = targetData.map(dims, function (v0, v1, dataIndex) {
+            var sum = targetData.get(targetStackInfo.stackedDimension, dataIndex);
+
+            // Consider `connectNulls` of line area, if value is NaN, stackedOver
+            // should also be NaN, to draw a appropriate belt area.
+            if (isNaN(sum)) {
+                return resultNaN;
+            }
+
+            var byValue;
+            var stackedDataRawIndex;
+
+            if (isStackedByIndex) {
+                stackedDataRawIndex = targetData.getRawIndex(dataIndex);
+            }
+            else {
+                byValue = targetData.get(targetStackInfo.stackedByDimension, dataIndex);
+            }
+
+            // If stackOver is NaN, chart view will render point on value start.
+            var stackedOver = NaN;
+
+            for (var j = idxInStack - 1; j >= 0; j--) {
+                var stackInfo = stackInfoList[j];
+
+                // Has been optimized by inverted indices on `stackedByDimension`.
+                if (!isStackedByIndex) {
+                    stackedDataRawIndex = stackInfo.data.rawIndexOf(stackInfo.stackedByDimension, byValue);
+                }
+
+                if (stackedDataRawIndex >= 0) {
+                    var val = stackInfo.data.getByRawIndex(stackInfo.stackResultDimension, stackedDataRawIndex);
+
+                    // Considering positive stack, negative stack and empty data
+                    if ((sum >= 0 && val > 0) // Positive stack
+                        || (sum <= 0 && val < 0) // Negative stack
+                    ) {
+                        sum += val;
+                        stackedOver = val;
+                        break;
+                    }
+                }
+            }
+
+            resultVal[0] = sum;
+            resultVal[1] = stackedOver;
+
+            return resultVal;
+        });
+
+        targetData.hostModel.setData(newData);
+        // Update for consequent calculation
+        targetStackInfo.data = newData;
+    });
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// TODO
+// ??? refactor? check the outer usage of data provider.
+// merge with defaultDimValueGetter?
+
+/**
+ * If normal array used, mutable chunk size is supported.
+ * If typed array used, chunk size must be fixed.
+ */
+function DefaultDataProvider(source, dimSize) {
+    if (!Source.isInstance(source)) {
+        source = Source.seriesDataToSource(source);
+    }
+    this._source = source;
+
+    var data = this._data = source.data;
+    var sourceFormat = source.sourceFormat;
+
+    // Typed array. TODO IE10+?
+    if (sourceFormat === SOURCE_FORMAT_TYPED_ARRAY) {
+        if (__DEV__) {
+            if (dimSize == null) {
+                throw new Error('Typed array data must specify dimension size');
+            }
+        }
+        this._offset = 0;
+        this._dimSize = dimSize;
+        this._data = data;
+    }
+
+    var methods = providerMethods[
+        sourceFormat === SOURCE_FORMAT_ARRAY_ROWS
+        ? sourceFormat + '_' + source.seriesLayoutBy
+        : sourceFormat
+    ];
+
+    if (__DEV__) {
+        assert$1(methods, 'Invalide sourceFormat: ' + sourceFormat);
+    }
+
+    extend(this, methods);
+}
+
+var providerProto = DefaultDataProvider.prototype;
+// If data is pure without style configuration
+providerProto.pure = false;
+// If data is persistent and will not be released after use.
+providerProto.persistent = true;
+
+// ???! FIXME legacy data provider do not has method getSource
+providerProto.getSource = function () {
+    return this._source;
+};
+
+var providerMethods = {
+
+    'arrayRows_column': {
+        pure: true,
+        count: function () {
+            return Math.max(0, this._data.length - this._source.startIndex);
+        },
+        getItem: function (idx) {
+            return this._data[idx + this._source.startIndex];
+        },
+        appendData: appendDataSimply
+    },
+
+    'arrayRows_row': {
+        pure: true,
+        count: function () {
+            var row = this._data[0];
+            return row ? Math.max(0, row.length - this._source.startIndex) : 0;
+        },
+        getItem: function (idx) {
+            idx += this._source.startIndex;
+            var item = [];
+            var data = this._data;
+            for (var i = 0; i < data.length; i++) {
+                var row = data[i];
+                item.push(row ? row[idx] : null);
+            }
+            return item;
+        },
+        appendData: function () {
+            throw new Error('Do not support appendData when set seriesLayoutBy: "row".');
+        }
+    },
+
+    'objectRows': {
+        pure: true,
+        count: countSimply,
+        getItem: getItemSimply,
+        appendData: appendDataSimply
+    },
+
+    'keyedColumns': {
+        pure: true,
+        count: function () {
+            var dimName = this._source.dimensionsDefine[0].name;
+            var col = this._data[dimName];
+            return col ? col.length : 0;
+        },
+        getItem: function (idx) {
+            var item = [];
+            var dims = this._source.dimensionsDefine;
+            for (var i = 0; i < dims.length; i++) {
+                var col = this._data[dims[i].name];
+                item.push(col ? col[idx] : null);
+            }
+            return item;
+        },
+        appendData: function (newData) {
+            var data = this._data;
+            each$1(newData, function (newCol, key) {
+                var oldCol = data[key] || (data[key] = []);
+                for (var i = 0; i < (newCol || []).length; i++) {
+                    oldCol.push(newCol[i]);
+                }
+            });
+        }
+    },
+
+    'original': {
+        count: countSimply,
+        getItem: getItemSimply,
+        appendData: appendDataSimply
+    },
+
+    'typedArray': {
+        persistent: false,
+        pure: true,
+        count: function () {
+            return this._data ? (this._data.length / this._dimSize) : 0;
+        },
+        getItem: function (idx, out) {
+            idx = idx - this._offset;
+            out = out || [];
+            var offset = this._dimSize * idx;
+            for (var i = 0; i < this._dimSize; i++) {
+                out[i] = this._data[offset + i];
+            }
+            return out;
+        },
+        appendData: function (newData) {
+            if (__DEV__) {
+                assert$1(
+                    isTypedArray(newData),
+                    'Added data must be TypedArray if data in initialization is TypedArray'
+                );
+            }
+
+            this._data = newData;
+        },
+
+        // Clean self if data is already used.
+        clean: function () {
+            // PENDING
+            this._offset += this.count();
+            this._data = null;
+        }
+    }
+};
+
+function countSimply() {
+    return this._data.length;
+}
+function getItemSimply(idx) {
+    return this._data[idx];
+}
+function appendDataSimply(newData) {
+    for (var i = 0; i < newData.length; i++) {
+        this._data.push(newData[i]);
+    }
+}
+
+
+
+var rawValueGetters = {
+
+    arrayRows: getRawValueSimply,
+
+    objectRows: function (dataItem, dataIndex, dimIndex, dimName) {
+        return dimIndex != null ? dataItem[dimName] : dataItem;
+    },
+
+    keyedColumns: getRawValueSimply,
+
+    original: function (dataItem, dataIndex, dimIndex, dimName) {
+        // FIXME
+        // In some case (markpoint in geo (geo-map.html)), dataItem
+        // is {coord: [...]}
+        var value = getDataItemValue(dataItem);
+        return (dimIndex == null || !(value instanceof Array))
+            ? value
+            : value[dimIndex];
+    },
+
+    typedArray: getRawValueSimply
+};
+
+function getRawValueSimply(dataItem, dataIndex, dimIndex, dimName) {
+    return dimIndex != null ? dataItem[dimIndex] : dataItem;
+}
+
+
+var defaultDimValueGetters = {
+
+    arrayRows: getDimValueSimply,
+
+    objectRows: function (dataItem, dimName, dataIndex, dimIndex) {
+        return converDataValue(dataItem[dimName], this._dimensionInfos[dimName]);
+    },
+
+    keyedColumns: getDimValueSimply,
+
+    original: function (dataItem, dimName, dataIndex, dimIndex) {
+        // Performance sensitive, do not use modelUtil.getDataItemValue.
+        // If dataItem is an plain object with no value field, the var `value`
+        // will be assigned with the object, but it will be tread correctly
+        // in the `convertDataValue`.
+        var value = dataItem && (dataItem.value == null ? dataItem : dataItem.value);
+
+        // If any dataItem is like { value: 10 }
+        if (!this._rawData.pure && isDataItemOption(dataItem)) {
+            this.hasItemOption = true;
+        }
+        return converDataValue(
+            (value instanceof Array)
+                ? value[dimIndex]
+                // If value is a single number or something else not array.
+                : value,
+            this._dimensionInfos[dimName]
+        );
+    },
+
+    typedArray: function (dataItem, dimName, dataIndex, dimIndex) {
+        return dataItem[dimIndex];
+    }
+
+};
+
+function getDimValueSimply(dataItem, dimName, dataIndex, dimIndex) {
+    return converDataValue(dataItem[dimIndex], this._dimensionInfos[dimName]);
+}
+
+/**
+ * This helper method convert value in data.
+ * @param {string|number|Date} value
+ * @param {Object|string} [dimInfo] If string (like 'x'), dimType defaults 'number'.
+ *        If "dimInfo.ordinalParseAndSave", ordinal value can be parsed.
+ */
+function converDataValue(value, dimInfo) {
+    // Performance sensitive.
+    var dimType = dimInfo && dimInfo.type;
+    if (dimType === 'ordinal') {
+        // If given value is a category string
+        var ordinalMeta = dimInfo && dimInfo.ordinalMeta;
+        return ordinalMeta
+            ? ordinalMeta.parseAndCollect(value)
+            : value;
+    }
+
+    if (dimType === 'time'
+        // spead up when using timestamp
+        && typeof value !== 'number'
+        && value != null
+        && value !== '-'
+    ) {
+        value = +parseDate(value);
+    }
+
+    // dimType defaults 'number'.
+    // If dimType is not ordinal and value is null or undefined or NaN or '-',
+    // parse to NaN.
+    return (value == null || value === '')
+        ? NaN
+        // If string (like '-'), using '+' parse to NaN
+        // If object, also parse to NaN
+        : +value;
+}
+
+// ??? FIXME can these logic be more neat: getRawValue, getRawDataItem,
+// Consider persistent.
+// Caution: why use raw value to display on label or tooltip?
+// A reason is to avoid format. For example time value we do not know
+// how to format is expected. More over, if stack is used, calculated
+// value may be 0.91000000001, which have brings trouble to display.
+// TODO: consider how to treat null/undefined/NaN when display?
+/**
+ * @param {module:echarts/data/List} data
+ * @param {number} dataIndex
+ * @param {string|number} [dim] dimName or dimIndex
+ * @return {Array.<number>|string|number} can be null/undefined.
+ */
+function retrieveRawValue(data, dataIndex, dim) {
+    if (!data) {
+        return;
+    }
+
+    // Consider data may be not persistent.
+    var dataItem = data.getRawDataItem(dataIndex);
+
+    if (dataItem == null) {
+        return;
+    }
+
+    var sourceFormat = data.getProvider().getSource().sourceFormat;
+    var dimName;
+    var dimIndex;
+
+    var dimInfo = data.getDimensionInfo(dim);
+    if (dimInfo) {
+        dimName = dimInfo.name;
+        dimIndex = dimInfo.index;
+    }
+
+    return rawValueGetters[sourceFormat](dataItem, dataIndex, dimIndex, dimName);
+}
+
+/**
+ * Compatible with some cases (in pie, map) like:
+ * data: [{name: 'xx', value: 5, selected: true}, ...]
+ * where only sourceFormat is 'original' and 'objectRows' supported.
+ *
+ * ??? TODO
+ * Supported detail options in data item when using 'arrayRows'.
+ *
+ * @param {module:echarts/data/List} data
+ * @param {number} dataIndex
+ * @param {string} attr like 'selected'
+ */
+function retrieveRawAttr(data, dataIndex, attr) {
+    if (!data) {
+        return;
+    }
+
+    var sourceFormat = data.getProvider().getSource().sourceFormat;
+
+    if (sourceFormat !== SOURCE_FORMAT_ORIGINAL
+        && sourceFormat !== SOURCE_FORMAT_OBJECT_ROWS
+    ) {
+        return;
+    }
+
+    var dataItem = data.getRawDataItem(dataIndex);
+    if (sourceFormat === SOURCE_FORMAT_ORIGINAL && !isObject$1(dataItem)) {
+        dataItem = null;
+    }
+    if (dataItem) {
+        return dataItem[attr];
+    }
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var DIMENSION_LABEL_REG = /\{@(.+?)\}/g;
+
+// PENDING A little ugly
+var dataFormatMixin = {
+    /**
+     * Get params for formatter
+     * @param {number} dataIndex
+     * @param {string} [dataType]
+     * @return {Object}
+     */
+    getDataParams: function (dataIndex, dataType) {
+        var data = this.getData(dataType);
+        var rawValue = this.getRawValue(dataIndex, dataType);
+        var rawDataIndex = data.getRawIndex(dataIndex);
+        var name = data.getName(dataIndex);
+        var itemOpt = data.getRawDataItem(dataIndex);
+        var color = data.getItemVisual(dataIndex, 'color');
+
+        return {
+            componentType: this.mainType,
+            componentSubType: this.subType,
+            seriesType: this.mainType === 'series' ? this.subType : null,
+            seriesIndex: this.seriesIndex,
+            seriesId: this.id,
+            seriesName: this.name,
+            name: name,
+            dataIndex: rawDataIndex,
+            data: itemOpt,
+            dataType: dataType,
+            value: rawValue,
+            color: color,
+            marker: getTooltipMarker(color),
+
+            // Param name list for mapping `a`, `b`, `c`, `d`, `e`
+            $vars: ['seriesName', 'name', 'value']
+        };
+    },
+
+    /**
+     * Format label
+     * @param {number} dataIndex
+     * @param {string} [status='normal'] 'normal' or 'emphasis'
+     * @param {string} [dataType]
+     * @param {number} [dimIndex]
+     * @param {string} [labelProp='label']
+     * @return {string} If not formatter, return null/undefined
+     */
+    getFormattedLabel: function (dataIndex, status, dataType, dimIndex, labelProp) {
+        status = status || 'normal';
+        var data = this.getData(dataType);
+        var itemModel = data.getItemModel(dataIndex);
+
+        var params = this.getDataParams(dataIndex, dataType);
+        if (dimIndex != null && (params.value instanceof Array)) {
+            params.value = params.value[dimIndex];
+        }
+
+        var formatter = itemModel.get(
+            status === 'normal'
+            ? [labelProp || 'label', 'formatter']
+            : [status, labelProp || 'label', 'formatter']
+        );
+
+        if (typeof formatter === 'function') {
+            params.status = status;
+            return formatter(params);
+        }
+        else if (typeof formatter === 'string') {
+            var str = formatTpl(formatter, params);
+
+            // Support 'aaa{@[3]}bbb{@product}ccc'.
+            // Do not support '}' in dim name util have to.
+            return str.replace(DIMENSION_LABEL_REG, function (origin, dim) {
+                var len = dim.length;
+                if (dim.charAt(0) === '[' && dim.charAt(len - 1) === ']') {
+                    dim = +dim.slice(1, len - 1); // Also: '[]' => 0
+                }
+                return retrieveRawValue(data, dataIndex, dim);
+            });
+        }
+    },
+
+    /**
+     * Get raw value in option
+     * @param {number} idx
+     * @param {string} [dataType]
+     * @return {Array|number|string}
+     */
+    getRawValue: function (idx, dataType) {
+        return retrieveRawValue(this.getData(dataType), idx);
+    },
+
+    /**
+     * Should be implemented.
+     * @param {number} dataIndex
+     * @param {boolean} [multipleSeries=false]
+     * @param {number} [dataType]
+     * @return {string} tooltip string
+     */
+    formatTooltip: function () {
+        // Empty function
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @param {Object} define
+ * @return See the return of `createTask`.
+ */
+function createTask(define) {
+    return new Task(define);
+}
+
+/**
+ * @constructor
+ * @param {Object} define
+ * @param {Function} define.reset Custom reset
+ * @param {Function} [define.plan] Returns 'reset' indicate reset immediately.
+ * @param {Function} [define.count] count is used to determin data task.
+ * @param {Function} [define.onDirty] count is used to determin data task.
+ */
+function Task(define) {
+    define = define || {};
+
+    this._reset = define.reset;
+    this._plan = define.plan;
+    this._count = define.count;
+    this._onDirty = define.onDirty;
+
+    this._dirty = true;
+
+    // Context must be specified implicitly, to
+    // avoid miss update context when model changed.
+    this.context;
+}
+
+var taskProto = Task.prototype;
+
+/**
+ * @param {Object} performArgs
+ * @param {number} [performArgs.step] Specified step.
+ * @param {number} [performArgs.skip] Skip customer perform call.
+ * @param {number} [performArgs.modBy] Sampling window size.
+ * @param {number} [performArgs.modDataCount] Sampling count.
+ */
+taskProto.perform = function (performArgs) {
+    var upTask = this._upstream;
+    var skip = performArgs && performArgs.skip;
+
+    // TODO some refactor.
+    // Pull data. Must pull data each time, because context.data
+    // may be updated by Series.setData.
+    if (this._dirty && upTask) {
+        var context = this.context;
+        context.data = context.outputData = upTask.context.outputData;
+    }
+
+    if (this.__pipeline) {
+        this.__pipeline.currentTask = this;
+    }
+
+    var planResult;
+    if (this._plan && !skip) {
+        planResult = this._plan(this.context);
+    }
+
+    // Support sharding by mod, which changes the render sequence and makes the rendered graphic
+    // elements uniformed distributed when progress, especially when moving or zooming.
+    var lastModBy = normalizeModBy(this._modBy);
+    var lastModDataCount = this._modDataCount || 0;
+    var modBy = normalizeModBy(performArgs && performArgs.modBy);
+    var modDataCount = performArgs && performArgs.modDataCount || 0;
+    if (lastModBy !== modBy || lastModDataCount !== modDataCount) {
+        planResult = 'reset';
+    }
+
+    function normalizeModBy(val) {
+        !(val >= 1) && (val = 1); // jshint ignore:line
+        return val;
+    }
+
+    var forceFirstProgress;
+    if (this._dirty || planResult === 'reset') {
+        this._dirty = false;
+        forceFirstProgress = reset(this, skip);
+    }
+
+    this._modBy = modBy;
+    this._modDataCount = modDataCount;
+
+    var step = performArgs && performArgs.step;
+
+    if (upTask) {
+
+        if (__DEV__) {
+            assert$1(upTask._outputDueEnd != null);
+        }
+        this._dueEnd = upTask._outputDueEnd;
+    }
+    // DataTask or overallTask
+    else {
+        if (__DEV__) {
+            assert$1(!this._progress || this._count);
+        }
+        this._dueEnd = this._count ? this._count(this.context) : Infinity;
+    }
+
+    // Note: Stubs, that its host overall task let it has progress, has progress.
+    // If no progress, pass index from upstream to downstream each time plan called.
+    if (this._progress) {
+        var start = this._dueIndex;
+        var end = Math.min(
+            step != null ? this._dueIndex + step : Infinity,
+            this._dueEnd
+        );
+
+        if (!skip && (forceFirstProgress || start < end)) {
+            var progress = this._progress;
+            if (isArray(progress)) {
+                for (var i = 0; i < progress.length; i++) {
+                    doProgress(this, progress[i], start, end, modBy, modDataCount);
+                }
+            }
+            else {
+                doProgress(this, progress, start, end, modBy, modDataCount);
+            }
+        }
+
+        this._dueIndex = end;
+        // If no `outputDueEnd`, assume that output data and
+        // input data is the same, so use `dueIndex` as `outputDueEnd`.
+        var outputDueEnd = this._settedOutputEnd != null
+            ? this._settedOutputEnd : end;
+
+        if (__DEV__) {
+            // ??? Can not rollback.
+            assert$1(outputDueEnd >= this._outputDueEnd);
+        }
+
+        this._outputDueEnd = outputDueEnd;
+    }
+    else {
+        // (1) Some overall task has no progress.
+        // (2) Stubs, that its host overall task do not let it has progress, has no progress.
+        // This should always be performed so it can be passed to downstream.
+        this._dueIndex = this._outputDueEnd = this._settedOutputEnd != null
+            ? this._settedOutputEnd : this._dueEnd;
+    }
+
+    return this.unfinished();
+};
+
+var iterator = (function () {
+
+    var end;
+    var current;
+    var modBy;
+    var modDataCount;
+    var winCount;
+
+    var it = {
+        reset: function (s, e, sStep, sCount) {
+            current = s;
+            end = e;
+
+            modBy = sStep;
+            modDataCount = sCount;
+            winCount = Math.ceil(modDataCount / modBy);
+
+            it.next = (modBy > 1 && modDataCount > 0) ? modNext : sequentialNext;
+        }
+    };
+
+    return it;
+
+    function sequentialNext() {
+        return current < end ? current++ : null;
+    }
+
+    function modNext() {
+        var dataIndex = (current % winCount) * modBy + Math.ceil(current / winCount);
+        var result = current >= end
+            ? null
+            : dataIndex < modDataCount
+            ? dataIndex
+            // If modDataCount is smaller than data.count() (consider `appendData` case),
+            // Use normal linear rendering mode.
+            : current;
+        current++;
+        return result;
+    }
+})();
+
+taskProto.dirty = function () {
+    this._dirty = true;
+    this._onDirty && this._onDirty(this.context);
+};
+
+function doProgress(taskIns, progress, start, end, modBy, modDataCount) {
+    iterator.reset(start, end, modBy, modDataCount);
+    taskIns._callingProgress = progress;
+    taskIns._callingProgress({
+        start: start, end: end, count: end - start, next: iterator.next
+    }, taskIns.context);
+}
+
+function reset(taskIns, skip) {
+    taskIns._dueIndex = taskIns._outputDueEnd = taskIns._dueEnd = 0;
+    taskIns._settedOutputEnd = null;
+
+    var progress;
+    var forceFirstProgress;
+
+    if (!skip && taskIns._reset) {
+        progress = taskIns._reset(taskIns.context);
+        if (progress && progress.progress) {
+            forceFirstProgress = progress.forceFirstProgress;
+            progress = progress.progress;
+        }
+        // To simplify no progress checking, array must has item.
+        if (isArray(progress) && !progress.length) {
+            progress = null;
+        }
+    }
+
+    taskIns._progress = progress;
+    taskIns._modBy = taskIns._modDataCount = null;
+
+    var downstream = taskIns._downstream;
+    downstream && downstream.dirty();
+
+    return forceFirstProgress;
+}
+
+/**
+ * @return {boolean}
+ */
+taskProto.unfinished = function () {
+    return this._progress && this._dueIndex < this._dueEnd;
+};
+
+/**
+ * @param {Object} downTask The downstream task.
+ * @return {Object} The downstream task.
+ */
+taskProto.pipe = function (downTask) {
+    if (__DEV__) {
+        assert$1(downTask && !downTask._disposed && downTask !== this);
+    }
+
+    // If already downstream, do not dirty downTask.
+    if (this._downstream !== downTask || this._dirty) {
+        this._downstream = downTask;
+        downTask._upstream = this;
+        downTask.dirty();
+    }
+};
+
+taskProto.dispose = function () {
+    if (this._disposed) {
+        return;
+    }
+
+    this._upstream && (this._upstream._downstream = null);
+    this._downstream && (this._downstream._upstream = null);
+
+    this._dirty = false;
+    this._disposed = true;
+};
+
+taskProto.getUpstream = function () {
+    return this._upstream;
+};
+
+taskProto.getDownstream = function () {
+    return this._downstream;
+};
+
+taskProto.setOutputEnd = function (end) {
+    // This only happend in dataTask, dataZoom, map, currently.
+    // where dataZoom do not set end each time, but only set
+    // when reset. So we should record the setted end, in case
+    // that the stub of dataZoom perform again and earse the
+    // setted end by upstream.
+    this._outputDueEnd = this._settedOutputEnd = end;
+};
+
+
+///////////////////////////////////////////////////////////
+// For stream debug (Should be commented out after used!)
+// Usage: printTask(this, 'begin');
+// Usage: printTask(this, null, {someExtraProp});
+// function printTask(task, prefix, extra) {
+//     window.ecTaskUID == null && (window.ecTaskUID = 0);
+//     task.uidDebug == null && (task.uidDebug = `task_${window.ecTaskUID++}`);
+//     task.agent && task.agent.uidDebug == null && (task.agent.uidDebug = `task_${window.ecTaskUID++}`);
+//     var props = [];
+//     if (task.__pipeline) {
+//         var val = `${task.__idxInPipeline}/${task.__pipeline.tail.__idxInPipeline} ${task.agent ? '(stub)' : ''}`;
+//         props.push({text: 'idx', value: val});
+//     } else {
+//         var stubCount = 0;
+//         task.agentStubMap.each(() => stubCount++);
+//         props.push({text: 'idx', value: `overall (stubs: ${stubCount})`});
+//     }
+//     props.push({text: 'uid', value: task.uidDebug});
+//     if (task.__pipeline) {
+//         props.push({text: 'pid', value: task.__pipeline.id});
+//         task.agent && props.push(
+//             {text: 'stubFor', value: task.agent.uidDebug}
+//         );
+//     }
+//     props.push(
+//         {text: 'dirty', value: task._dirty},
+//         {text: 'dueIndex', value: task._dueIndex},
+//         {text: 'dueEnd', value: task._dueEnd},
+//         {text: 'outputDueEnd', value: task._outputDueEnd}
+//     );
+//     if (extra) {
+//         Object.keys(extra).forEach(key => {
+//             props.push({text: key, value: extra[key]});
+//         });
+//     }
+//     var args = ['color: blue'];
+//     var msg = `%c[${prefix || 'T'}] %c` + props.map(item => (
+//         args.push('color: black', 'color: red'),
+//         `${item.text}: %c${item.value}`
+//     )).join('%c, ');
+//     console.log.apply(console, [msg].concat(args));
+//     // console.log(this);
+// }
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var inner$4 = makeInner();
+
+var SeriesModel = ComponentModel.extend({
+
+    type: 'series.__base__',
+
+    /**
+     * @readOnly
+     */
+    seriesIndex: 0,
+
+    // coodinateSystem will be injected in the echarts/CoordinateSystem
+    coordinateSystem: null,
+
+    /**
+     * @type {Object}
+     * @protected
+     */
+    defaultOption: null,
+
+    /**
+     * Data provided for legend
+     * @type {Function}
+     */
+    // PENDING
+    legendDataProvider: null,
+
+    /**
+     * Access path of color for visual
+     */
+    visualColorAccessPath: 'itemStyle.color',
+
+    /**
+     * Support merge layout params.
+     * Only support 'box' now (left/right/top/bottom/width/height).
+     * @type {string|Object} Object can be {ignoreSize: true}
+     * @readOnly
+     */
+    layoutMode: null,
+
+    init: function (option, parentModel, ecModel, extraOpt) {
+
+        /**
+         * @type {number}
+         * @readOnly
+         */
+        this.seriesIndex = this.componentIndex;
+
+        this.dataTask = createTask({
+            count: dataTaskCount,
+            reset: dataTaskReset
+        });
+        this.dataTask.context = {model: this};
+
+        this.mergeDefaultAndTheme(option, ecModel);
+
+        prepareSource(this);
+
+
+        var data = this.getInitialData(option, ecModel);
+        wrapData(data, this);
+        this.dataTask.context.data = data;
+
+        if (__DEV__) {
+            assert$1(data, 'getInitialData returned invalid data.');
+        }
+
+        /**
+         * @type {module:echarts/data/List|module:echarts/data/Tree|module:echarts/data/Graph}
+         * @private
+         */
+        inner$4(this).dataBeforeProcessed = data;
+
+        // If we reverse the order (make data firstly, and then make
+        // dataBeforeProcessed by cloneShallow), cloneShallow will
+        // cause data.graph.data !== data when using
+        // module:echarts/data/Graph or module:echarts/data/Tree.
+        // See module:echarts/data/helper/linkList
+
+        // Theoretically, it is unreasonable to call `seriesModel.getData()` in the model
+        // init or merge stage, because the data can be restored. So we do not `restoreData`
+        // and `setData` here, which forbids calling `seriesModel.getData()` in this stage.
+        // Call `seriesModel.getRawData()` instead.
+        // this.restoreData();
+
+        autoSeriesName(this);
+    },
+
+    /**
+     * Util for merge default and theme to option
+     * @param  {Object} option
+     * @param  {module:echarts/model/Global} ecModel
+     */
+    mergeDefaultAndTheme: function (option, ecModel) {
+        var layoutMode = this.layoutMode;
+        var inputPositionParams = layoutMode
+            ? getLayoutParams(option) : {};
+
+        // Backward compat: using subType on theme.
+        // But if name duplicate between series subType
+        // (for example: parallel) add component mainType,
+        // add suffix 'Series'.
+        var themeSubType = this.subType;
+        if (ComponentModel.hasClass(themeSubType)) {
+            themeSubType += 'Series';
+        }
+        merge(
+            option,
+            ecModel.getTheme().get(this.subType)
+        );
+        merge(option, this.getDefaultOption());
+
+        // Default label emphasis `show`
+        defaultEmphasis(option, 'label', ['show']);
+
+        this.fillDataTextStyle(option.data);
+
+        if (layoutMode) {
+            mergeLayoutParam(option, inputPositionParams, layoutMode);
+        }
+    },
+
+    mergeOption: function (newSeriesOption, ecModel) {
+        // this.settingTask.dirty();
+
+        newSeriesOption = merge(this.option, newSeriesOption, true);
+        this.fillDataTextStyle(newSeriesOption.data);
+
+        var layoutMode = this.layoutMode;
+        if (layoutMode) {
+            mergeLayoutParam(this.option, newSeriesOption, layoutMode);
+        }
+
+        prepareSource(this);
+
+        var data = this.getInitialData(newSeriesOption, ecModel);
+        wrapData(data, this);
+        this.dataTask.dirty();
+        this.dataTask.context.data = data;
+
+        inner$4(this).dataBeforeProcessed = data;
+
+        autoSeriesName(this);
+    },
+
+    fillDataTextStyle: function (data) {
+        // Default data label emphasis `show`
+        // FIXME Tree structure data ?
+        // FIXME Performance ?
+        if (data && !isTypedArray(data)) {
+            var props = ['show'];
+            for (var i = 0; i < data.length; i++) {
+                if (data[i] && data[i].label) {
+                    defaultEmphasis(data[i], 'label', props);
+                }
+            }
+        }
+    },
+
+    /**
+     * Init a data structure from data related option in series
+     * Must be overwritten
+     */
+    getInitialData: function () {},
+
+    /**
+     * Append data to list
+     * @param {Object} params
+     * @param {Array|TypedArray} params.data
+     */
+    appendData: function (params) {
+        // FIXME ???
+        // (1) If data from dataset, forbidden append.
+        // (2) support append data of dataset.
+        var data = this.getRawData();
+        data.appendData(params.data);
+    },
+
+    /**
+     * Consider some method like `filter`, `map` need make new data,
+     * We should make sure that `seriesModel.getData()` get correct
+     * data in the stream procedure. So we fetch data from upstream
+     * each time `task.perform` called.
+     * @param {string} [dataType]
+     * @return {module:echarts/data/List}
+     */
+    getData: function (dataType) {
+        var task = getCurrentTask(this);
+        if (task) {
+            var data = task.context.data;
+            return dataType == null ? data : data.getLinkedData(dataType);
+        }
+        else {
+            // When series is not alive (that may happen when click toolbox
+            // restore or setOption with not merge mode), series data may
+            // be still need to judge animation or something when graphic
+            // elements want to know whether fade out.
+            return inner$4(this).data;
+        }
+    },
+
+    /**
+     * @param {module:echarts/data/List} data
+     */
+    setData: function (data) {
+        var task = getCurrentTask(this);
+        if (task) {
+            var context = task.context;
+            // Consider case: filter, data sample.
+            if (context.data !== data && task.modifyOutputEnd) {
+                task.setOutputEnd(data.count());
+            }
+            context.outputData = data;
+            // Caution: setData should update context.data,
+            // Because getData may be called multiply in a
+            // single stage and expect to get the data just
+            // set. (For example, AxisProxy, x y both call
+            // getData and setDate sequentially).
+            // So the context.data should be fetched from
+            // upstream each time when a stage starts to be
+            // performed.
+            if (task !== this.dataTask) {
+                context.data = data;
+            }
+        }
+        inner$4(this).data = data;
+    },
+
+    /**
+     * @see {module:echarts/data/helper/sourceHelper#getSource}
+     * @return {module:echarts/data/Source} source
+     */
+    getSource: function () {
+        return getSource(this);
+    },
+
+    /**
+     * Get data before processed
+     * @return {module:echarts/data/List}
+     */
+    getRawData: function () {
+        return inner$4(this).dataBeforeProcessed;
+    },
+
+    /**
+     * Get base axis if has coordinate system and has axis.
+     * By default use coordSys.getBaseAxis();
+     * Can be overrided for some chart.
+     * @return {type} description
+     */
+    getBaseAxis: function () {
+        var coordSys = this.coordinateSystem;
+        return coordSys && coordSys.getBaseAxis && coordSys.getBaseAxis();
+    },
+
+    // FIXME
+    /**
+     * Default tooltip formatter
+     *
+     * @param {number} dataIndex
+     * @param {boolean} [multipleSeries=false]
+     * @param {number} [dataType]
+     */
+    formatTooltip: function (dataIndex, multipleSeries, dataType) {
+
+        function formatArrayValue(value) {
+            // ??? TODO refactor these logic.
+            // check: category-no-encode-has-axis-data in dataset.html
+            var vertially = reduce(value, function (vertially, val, idx) {
+                var dimItem = data.getDimensionInfo(idx);
+                return vertially |= dimItem && dimItem.tooltip !== false && dimItem.displayName != null;
+            }, 0);
+
+            var result = [];
+
+            tooltipDims.length
+                ? each$1(tooltipDims, function (dim) {
+                    setEachItem(retrieveRawValue(data, dataIndex, dim), dim);
+                })
+                // By default, all dims is used on tooltip.
+                : each$1(value, setEachItem);
+
+            function setEachItem(val, dim) {
+                var dimInfo = data.getDimensionInfo(dim);
+                // If `dimInfo.tooltip` is not set, show tooltip.
+                if (!dimInfo || dimInfo.otherDims.tooltip === false) {
+                    return;
+                }
+                var dimType = dimInfo.type;
+                var dimHead = getTooltipMarker({color: color, type: 'subItem'});
+                var valStr = (vertially
+                        ? dimHead + encodeHTML(dimInfo.displayName || '-') + ': '
+                        : ''
+                    )
+                    // FIXME should not format time for raw data?
+                    + encodeHTML(dimType === 'ordinal'
+                        ? val + ''
+                        : dimType === 'time'
+                        ? (multipleSeries ? '' : formatTime('yyyy/MM/dd hh:mm:ss', val))
+                        : addCommas(val)
+                    );
+                valStr && result.push(valStr);
+            }
+
+            return (vertially ? '<br/>' : '') + result.join(vertially ? '<br/>' : ', ');
+        }
+
+        function formatSingleValue(val) {
+            return encodeHTML(addCommas(val));
+        }
+
+        var data = this.getData();
+        var tooltipDims = data.mapDimension('defaultedTooltip', true);
+        var tooltipDimLen = tooltipDims.length;
+        var value = this.getRawValue(dataIndex);
+        var isValueArr = isArray(value);
+
+        var color = data.getItemVisual(dataIndex, 'color');
+        if (isObject$1(color) && color.colorStops) {
+            color = (color.colorStops[0] || {}).color;
+        }
+        color = color || 'transparent';
+
+        // Complicated rule for pretty tooltip.
+        var formattedValue = (tooltipDimLen > 1 || (isValueArr && !tooltipDimLen))
+            ? formatArrayValue(value)
+            : tooltipDimLen
+            ? formatSingleValue(retrieveRawValue(data, dataIndex, tooltipDims[0]))
+            : formatSingleValue(isValueArr ? value[0] : value);
+
+        var colorEl = getTooltipMarker(color);
+
+        var name = data.getName(dataIndex);
+
+        var seriesName = this.name;
+        if (!isNameSpecified(this)) {
+            seriesName = '';
+        }
+        seriesName = seriesName
+            ? encodeHTML(seriesName) + (!multipleSeries ? '<br/>' : ': ')
+            : '';
+
+        return !multipleSeries
+            ? seriesName + colorEl
+                + (name
+                    ? encodeHTML(name) + ': ' + formattedValue
+                    : formattedValue
+                )
+            : colorEl + seriesName + formattedValue;
+    },
+
+    /**
+     * @return {boolean}
+     */
+    isAnimationEnabled: function () {
+        if (env$1.node) {
+            return false;
+        }
+
+        var animationEnabled = this.getShallow('animation');
+        if (animationEnabled) {
+            if (this.getData().count() > this.getShallow('animationThreshold')) {
+                animationEnabled = false;
+            }
+        }
+        return animationEnabled;
+    },
+
+    restoreData: function () {
+        this.dataTask.dirty();
+    },
+
+    getColorFromPalette: function (name, scope, requestColorNum) {
+        var ecModel = this.ecModel;
+        // PENDING
+        var color = colorPaletteMixin.getColorFromPalette.call(this, name, scope, requestColorNum);
+        if (!color) {
+            color = ecModel.getColorFromPalette(name, scope, requestColorNum);
+        }
+        return color;
+    },
+
+    /**
+     * Use `data.mapDimension(coordDim, true)` instead.
+     * @deprecated
+     */
+    coordDimToDataDim: function (coordDim) {
+        return this.getRawData().mapDimension(coordDim, true);
+    },
+
+    /**
+     * Get progressive rendering count each step
+     * @return {number}
+     */
+    getProgressive: function () {
+        return this.get('progressive');
+    },
+
+    /**
+     * Get progressive rendering count each step
+     * @return {number}
+     */
+    getProgressiveThreshold: function () {
+        return this.get('progressiveThreshold');
+    },
+
+    /**
+     * Get data indices for show tooltip content. See tooltip.
+     * @abstract
+     * @param {Array.<string>|string} dim
+     * @param {Array.<number>} value
+     * @param {module:echarts/coord/single/SingleAxis} baseAxis
+     * @return {Object} {dataIndices, nestestValue}.
+     */
+    getAxisTooltipData: null,
+
+    /**
+     * See tooltip.
+     * @abstract
+     * @param {number} dataIndex
+     * @return {Array.<number>} Point of tooltip. null/undefined can be returned.
+     */
+    getTooltipPosition: null,
+
+    /**
+     * @see {module:echarts/stream/Scheduler}
+     */
+    pipeTask: null,
+
+    /**
+     * Convinient for override in extended class.
+     * @protected
+     * @type {Function}
+     */
+    preventIncremental: null,
+
+    /**
+     * @public
+     * @readOnly
+     * @type {Object}
+     */
+    pipelineContext: null
+
+});
+
+
+mixin(SeriesModel, dataFormatMixin);
+mixin(SeriesModel, colorPaletteMixin);
+
+/**
+ * MUST be called after `prepareSource` called
+ * Here we need to make auto series, especially for auto legend. But we
+ * do not modify series.name in option to avoid side effects.
+ */
+function autoSeriesName(seriesModel) {
+    // User specified name has higher priority, otherwise it may cause
+    // series can not be queried unexpectedly.
+    var name = seriesModel.name;
+    if (!isNameSpecified(seriesModel)) {
+        seriesModel.name = getSeriesAutoName(seriesModel) || name;
+    }
+}
+
+function getSeriesAutoName(seriesModel) {
+    var data = seriesModel.getRawData();
+    var dataDims = data.mapDimension('seriesName', true);
+    var nameArr = [];
+    each$1(dataDims, function (dataDim) {
+        var dimInfo = data.getDimensionInfo(dataDim);
+        dimInfo.displayName && nameArr.push(dimInfo.displayName);
+    });
+    return nameArr.join(' ');
+}
+
+function dataTaskCount(context) {
+    return context.model.getRawData().count();
+}
+
+function dataTaskReset(context) {
+    var seriesModel = context.model;
+    seriesModel.setData(seriesModel.getRawData().cloneShallow());
+    return dataTaskProgress;
+}
+
+function dataTaskProgress(param, context) {
+    // Avoid repead cloneShallow when data just created in reset.
+    if (param.end > context.outputData.count()) {
+        context.model.getRawData().cloneShallow(context.outputData);
+    }
+}
+
+// TODO refactor
+function wrapData(data, seriesModel) {
+    each$1(data.CHANGABLE_METHODS, function (methodName) {
+        data.wrapMethod(methodName, curry(onDataSelfChange, seriesModel));
+    });
+}
+
+function onDataSelfChange(seriesModel) {
+    var task = getCurrentTask(seriesModel);
+    if (task) {
+        // Consider case: filter, selectRange
+        task.setOutputEnd(this.count());
+    }
+}
+
+function getCurrentTask(seriesModel) {
+    var scheduler = (seriesModel.ecModel || {}).scheduler;
+    var pipeline = scheduler && scheduler.getPipeline(seriesModel.uid);
+
+    if (pipeline) {
+        // When pipline finished, the currrentTask keep the last
+        // task (renderTask).
+        var task = pipeline.currentTask;
+        if (task) {
+            var agentStubMap = task.agentStubMap;
+            if (agentStubMap) {
+                task = agentStubMap.get(seriesModel.uid);
+            }
+        }
+        return task;
+    }
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var Component = function () {
+    /**
+     * @type {module:zrender/container/Group}
+     * @readOnly
+     */
+    this.group = new Group();
+
+    /**
+     * @type {string}
+     * @readOnly
+     */
+    this.uid = getUID('viewComponent');
+};
+
+Component.prototype = {
+
+    constructor: Component,
+
+    init: function (ecModel, api) {},
+
+    render: function (componentModel, ecModel, api, payload) {},
+
+    dispose: function () {}
+
+};
+
+var componentProto = Component.prototype;
+componentProto.updateView
+    = componentProto.updateLayout
+    = componentProto.updateVisual
+    = function (seriesModel, ecModel, api, payload) {
+        // Do nothing;
+    };
+// Enable Component.extend.
+enableClassExtend(Component);
+
+// Enable capability of registerClass, getClass, hasClass, registerSubTypeDefaulter and so on.
+enableClassManagement(Component, {registerWhenExtend: true});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @return {string} If large mode changed, return string 'reset';
+ */
+var createRenderPlanner = function () {
+    var inner = makeInner();
+
+    return function (seriesModel) {
+        var fields = inner(seriesModel);
+        var pipelineContext = seriesModel.pipelineContext;
+
+        var originalLarge = fields.large;
+        var originalProgressive = fields.progressiveRender;
+
+        var large = fields.large = pipelineContext.large;
+        var progressive = fields.progressiveRender = pipelineContext.progressiveRender;
+
+        return !!((originalLarge ^ large) || (originalProgressive ^ progressive)) && 'reset';
+    };
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var inner$5 = makeInner();
+var renderPlanner = createRenderPlanner();
+
+function Chart() {
+
+    /**
+     * @type {module:zrender/container/Group}
+     * @readOnly
+     */
+    this.group = new Group();
+
+    /**
+     * @type {string}
+     * @readOnly
+     */
+    this.uid = getUID('viewChart');
+
+    this.renderTask = createTask({
+        plan: renderTaskPlan,
+        reset: renderTaskReset
+    });
+    this.renderTask.context = {view: this};
+}
+
+Chart.prototype = {
+
+    type: 'chart',
+
+    /**
+     * Init the chart.
+     * @param  {module:echarts/model/Global} ecModel
+     * @param  {module:echarts/ExtensionAPI} api
+     */
+    init: function (ecModel, api) {},
+
+    /**
+     * Render the chart.
+     * @param  {module:echarts/model/Series} seriesModel
+     * @param  {module:echarts/model/Global} ecModel
+     * @param  {module:echarts/ExtensionAPI} api
+     * @param  {Object} payload
+     */
+    render: function (seriesModel, ecModel, api, payload) {},
+
+    /**
+     * Highlight series or specified data item.
+     * @param  {module:echarts/model/Series} seriesModel
+     * @param  {module:echarts/model/Global} ecModel
+     * @param  {module:echarts/ExtensionAPI} api
+     * @param  {Object} payload
+     */
+    highlight: function (seriesModel, ecModel, api, payload) {
+        toggleHighlight(seriesModel.getData(), payload, 'emphasis');
+    },
+
+    /**
+     * Downplay series or specified data item.
+     * @param  {module:echarts/model/Series} seriesModel
+     * @param  {module:echarts/model/Global} ecModel
+     * @param  {module:echarts/ExtensionAPI} api
+     * @param  {Object} payload
+     */
+    downplay: function (seriesModel, ecModel, api, payload) {
+        toggleHighlight(seriesModel.getData(), payload, 'normal');
+    },
+
+    /**
+     * Remove self.
+     * @param  {module:echarts/model/Global} ecModel
+     * @param  {module:echarts/ExtensionAPI} api
+     */
+    remove: function (ecModel, api) {
+        this.group.removeAll();
+    },
+
+    /**
+     * Dispose self.
+     * @param  {module:echarts/model/Global} ecModel
+     * @param  {module:echarts/ExtensionAPI} api
+     */
+    dispose: function () {},
+
+    /**
+     * Rendering preparation in progressive mode.
+     * @param  {module:echarts/model/Series} seriesModel
+     * @param  {module:echarts/model/Global} ecModel
+     * @param  {module:echarts/ExtensionAPI} api
+     * @param  {Object} payload
+     */
+    incrementalPrepareRender: null,
+
+    /**
+     * Render in progressive mode.
+     * @param  {module:echarts/model/Series} seriesModel
+     * @param  {module:echarts/model/Global} ecModel
+     * @param  {module:echarts/ExtensionAPI} api
+     * @param  {Object} payload
+     */
+    incrementalRender: null,
+
+    /**
+     * Update transform directly.
+     * @param  {module:echarts/model/Series} seriesModel
+     * @param  {module:echarts/model/Global} ecModel
+     * @param  {module:echarts/ExtensionAPI} api
+     * @param  {Object} payload
+     * @return {Object} {update: true}
+     */
+    updateTransform: null
+
+    /**
+     * The view contains the given point.
+     * @interface
+     * @param {Array.<number>} point
+     * @return {boolean}
+     */
+    // containPoint: function () {}
+
+};
+
+var chartProto = Chart.prototype;
+chartProto.updateView
+    = chartProto.updateLayout
+    = chartProto.updateVisual
+    = function (seriesModel, ecModel, api, payload) {
+        this.render(seriesModel, ecModel, api, payload);
+    };
+
+/**
+ * Set state of single element
+ * @param  {module:zrender/Element} el
+ * @param  {string} state
+ */
+function elSetState(el, state) {
+    if (el) {
+        el.trigger(state);
+        if (el.type === 'group') {
+            for (var i = 0; i < el.childCount(); i++) {
+                elSetState(el.childAt(i), state);
+            }
+        }
+    }
+}
+/**
+ * @param  {module:echarts/data/List} data
+ * @param  {Object} payload
+ * @param  {string} state 'normal'|'emphasis'
+ */
+function toggleHighlight(data, payload, state) {
+    var dataIndex = queryDataIndex(data, payload);
+
+    if (dataIndex != null) {
+        each$1(normalizeToArray(dataIndex), function (dataIdx) {
+            elSetState(data.getItemGraphicEl(dataIdx), state);
+        });
+    }
+    else {
+        data.eachItemGraphicEl(function (el) {
+            elSetState(el, state);
+        });
+    }
+}
+
+// Enable Chart.extend.
+enableClassExtend(Chart, ['dispose']);
+
+// Add capability of registerClass, getClass, hasClass, registerSubTypeDefaulter and so on.
+enableClassManagement(Chart, {registerWhenExtend: true});
+
+Chart.markUpdateMethod = function (payload, methodName) {
+    inner$5(payload).updateMethod = methodName;
+};
+
+function renderTaskPlan(context) {
+    return renderPlanner(context.model);
+}
+
+function renderTaskReset(context) {
+    var seriesModel = context.model;
+    var ecModel = context.ecModel;
+    var api = context.api;
+    var payload = context.payload;
+    // ???! remove updateView updateVisual
+    var progressiveRender = seriesModel.pipelineContext.progressiveRender;
+    var view = context.view;
+
+    var updateMethod = payload && inner$5(payload).updateMethod;
+    var methodName = progressiveRender
+        ? 'incrementalPrepareRender'
+        : (updateMethod && view[updateMethod])
+        ? updateMethod
+        // `appendData` is also supported when data amount
+        // is less than progressive threshold.
+        : 'render';
+
+    if (methodName !== 'render') {
+        view[methodName](seriesModel, ecModel, api, payload);
+    }
+
+    return progressMethodMap[methodName];
+}
+
+var progressMethodMap = {
+    incrementalPrepareRender: {
+        progress: function (params, context) {
+            context.view.incrementalRender(
+                params, context.model, context.ecModel, context.api, context.payload
+            );
+        }
+    },
+    render: {
+        // Put view.render in `progress` to support appendData. But in this case
+        // view.render should not be called in reset, otherwise it will be called
+        // twise. Use `forceFirstProgress` to make sure that view.render is called
+        // in any cases.
+        forceFirstProgress: true,
+        progress: function (params, context) {
+            context.view.render(
+                context.model, context.ecModel, context.api, context.payload
+            );
+        }
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+var ORIGIN_METHOD = '\0__throttleOriginMethod';
+var RATE = '\0__throttleRate';
+var THROTTLE_TYPE = '\0__throttleType';
+
+/**
+ * @public
+ * @param {(Function)} fn
+ * @param {number} [delay=0] Unit: ms.
+ * @param {boolean} [debounce=false]
+ *        true: If call interval less than `delay`, only the last call works.
+ *        false: If call interval less than `delay, call works on fixed rate.
+ * @return {(Function)} throttled fn.
+ */
+function throttle(fn, delay, debounce) {
+
+    var currCall;
+    var lastCall = 0;
+    var lastExec = 0;
+    var timer = null;
+    var diff;
+    var scope;
+    var args;
+    var debounceNextCall;
+
+    delay = delay || 0;
+
+    function exec() {
+        lastExec = (new Date()).getTime();
+        timer = null;
+        fn.apply(scope, args || []);
+    }
+
+    var cb = function () {
+        currCall = (new Date()).getTime();
+        scope = this;
+        args = arguments;
+        var thisDelay = debounceNextCall || delay;
+        var thisDebounce = debounceNextCall || debounce;
+        debounceNextCall = null;
+        diff = currCall - (thisDebounce ? lastCall : lastExec) - thisDelay;
+
+        clearTimeout(timer);
+
+        // Here we should make sure that: the `exec` SHOULD NOT be called later
+        // than a new call of `cb`, that is, preserving the command order. Consider
+        // calculating "scale rate" when roaming as an example. When a call of `cb`
+        // happens, either the `exec` is called dierectly, or the call is delayed.
+        // But the delayed call should never be later than next call of `cb`. Under
+        // this assurance, we can simply update view state each time `dispatchAction`
+        // triggered by user roaming, but not need to add extra code to avoid the
+        // state being "rolled-back".
+        if (thisDebounce) {
+            timer = setTimeout(exec, thisDelay);
+        }
+        else {
+            if (diff >= 0) {
+                exec();
+            }
+            else {
+                timer = setTimeout(exec, -diff);
+            }
+        }
+
+        lastCall = currCall;
+    };
+
+    /**
+     * Clear throttle.
+     * @public
+     */
+    cb.clear = function () {
+        if (timer) {
+            clearTimeout(timer);
+            timer = null;
+        }
+    };
+
+    /**
+     * Enable debounce once.
+     */
+    cb.debounceNextCall = function (debounceDelay) {
+        debounceNextCall = debounceDelay;
+    };
+
+    return cb;
+}
+
+/**
+ * Create throttle method or update throttle rate.
+ *
+ * @example
+ * ComponentView.prototype.render = function () {
+ *     ...
+ *     throttle.createOrUpdate(
+ *         this,
+ *         '_dispatchAction',
+ *         this.model.get('throttle'),
+ *         'fixRate'
+ *     );
+ * };
+ * ComponentView.prototype.remove = function () {
+ *     throttle.clear(this, '_dispatchAction');
+ * };
+ * ComponentView.prototype.dispose = function () {
+ *     throttle.clear(this, '_dispatchAction');
+ * };
+ *
+ * @public
+ * @param {Object} obj
+ * @param {string} fnAttr
+ * @param {number} [rate]
+ * @param {string} [throttleType='fixRate'] 'fixRate' or 'debounce'
+ * @return {Function} throttled function.
+ */
+function createOrUpdate(obj, fnAttr, rate, throttleType) {
+    var fn = obj[fnAttr];
+
+    if (!fn) {
+        return;
+    }
+
+    var originFn = fn[ORIGIN_METHOD] || fn;
+    var lastThrottleType = fn[THROTTLE_TYPE];
+    var lastRate = fn[RATE];
+
+    if (lastRate !== rate || lastThrottleType !== throttleType) {
+        if (rate == null || !throttleType) {
+            return (obj[fnAttr] = originFn);
+        }
+
+        fn = obj[fnAttr] = throttle(
+            originFn, rate, throttleType === 'debounce'
+        );
+        fn[ORIGIN_METHOD] = originFn;
+        fn[THROTTLE_TYPE] = throttleType;
+        fn[RATE] = rate;
+    }
+
+    return fn;
+}
+
+/**
+ * Clear throttle. Example see throttle.createOrUpdate.
+ *
+ * @public
+ * @param {Object} obj
+ * @param {string} fnAttr
+ */
+function clear(obj, fnAttr) {
+    var fn = obj[fnAttr];
+    if (fn && fn[ORIGIN_METHOD]) {
+        obj[fnAttr] = fn[ORIGIN_METHOD];
+    }
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var seriesColor = {
+    createOnAllSeries: true,
+    performRawSeries: true,
+    reset: function (seriesModel, ecModel) {
+        var data = seriesModel.getData();
+        var colorAccessPath = (seriesModel.visualColorAccessPath || 'itemStyle.color').split('.');
+        var color = seriesModel.get(colorAccessPath) // Set in itemStyle
+            || seriesModel.getColorFromPalette(
+                // TODO series count changed.
+                seriesModel.name, null, ecModel.getSeriesCount()
+            );  // Default color
+
+        // FIXME Set color function or use the platte color
+        data.setVisual('color', color);
+
+        // Only visible series has each data be visual encoded
+        if (!ecModel.isSeriesFiltered(seriesModel)) {
+            if (typeof color === 'function' && !(color instanceof Gradient)) {
+                data.each(function (idx) {
+                    data.setItemVisual(
+                        idx, 'color', color(seriesModel.getDataParams(idx))
+                    );
+                });
+            }
+
+            // itemStyle in each data item
+            var dataEach = function (data, idx) {
+                var itemModel = data.getItemModel(idx);
+                var color = itemModel.get(colorAccessPath, true);
+                if (color != null) {
+                    data.setItemVisual(idx, 'color', color);
+                }
+            };
+
+            return { dataEach: data.hasItemOption ? dataEach : null };
+        }
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+var lang = {
+    toolbox: {
+        brush: {
+            title: {
+                rect: 'çŸ©å½¢é€‰æ‹©',
+                polygon: 'åœˆé€‰',
+                lineX: 'æ¨ªå‘é€‰æ‹©',
+                lineY: 'çºµå‘é€‰æ‹©',
+                keep: 'ä¿æŒé€‰æ‹©',
+                clear: 'æ¸…é™¤é€‰æ‹©'
+            }
+        },
+        dataView: {
+            title: 'æ•°æ®è§†å›¾',
+            lang: ['æ•°æ®è§†å›¾', 'å…³é—', 'åˆ·æ–°']
+        },
+        dataZoom: {
+            title: {
+                zoom: 'åŒºåŸŸç¼©æ”¾',
+                back: 'åŒºåŸŸç¼©æ”¾è¿˜åŽŸ'
+            }
+        },
+        magicType: {
+            title: {
+                line: 'åˆ‡æ¢ä¸ºæŠ˜çº¿å›¾',
+                bar: 'åˆ‡æ¢ä¸ºæŸ±çŠ¶å›¾',
+                stack: 'åˆ‡æ¢ä¸ºå †å ',
+                tiled: 'åˆ‡æ¢ä¸ºå¹³é“º'
+            }
+        },
+        restore: {
+            title: 'è¿˜åŽŸ'
+        },
+        saveAsImage: {
+            title: 'ä¿å˜ä¸ºå›¾ç‰‡',
+            lang: ['å³é”®å¦å˜ä¸ºå›¾ç‰‡']
+        }
+    },
+    series: {
+        typeNames: {
+            pie: 'é¥¼å›¾',
+            bar: 'æŸ±çŠ¶å›¾',
+            line: 'æŠ˜çº¿å›¾',
+            scatter: 'æ•£ç‚¹å›¾',
+            effectScatter: 'æ¶Ÿæ¼ªæ•£ç‚¹å›¾',
+            radar: 'é›·è¾¾å›¾',
+            tree: 'æ ‘å›¾',
+            treemap: 'çŸ©å½¢æ ‘å›¾',
+            boxplot: 'ç®±åž‹å›¾',
+            candlestick: 'Kçº¿å›¾',
+            k: 'Kçº¿å›¾',
+            heatmap: 'çƒåŠ›å›¾',
+            map: 'åœ°å›¾',
+            parallel: 'å¹³è¡Œåæ ‡å›¾',
+            lines: 'çº¿å›¾',
+            graph: 'å…³ç³»å›¾',
+            sankey: 'æ¡‘åŸºå›¾',
+            funnel: 'æ¼æ–—å›¾',
+            gauge: 'ä»ªè¡¨ç›˜å›¾',
+            pictorialBar: 'è±¡å½¢æŸ±å›¾',
+            themeRiver: 'ä¸»é¢˜æ²³æµå›¾',
+            sunburst: 'æ—æ—¥å›¾'
+        }
+    },
+    aria: {
+        general: {
+            withTitle: 'è¿™æ˜¯ä¸€ä¸ªå…³äºŽâ€œ{title}â€çš„å›¾è¡¨ã€‚',
+            withoutTitle: 'è¿™æ˜¯ä¸€ä¸ªå›¾è¡¨ï¼Œ'
+        },
+        series: {
+            single: {
+                prefix: '',
+                withName: 'å›¾è¡¨ç±»åž‹æ˜¯{seriesType}ï¼Œè¡¨ç¤º{seriesName}ã€‚',
+                withoutName: 'å›¾è¡¨ç±»åž‹æ˜¯{seriesType}ã€‚'
+            },
+            multiple: {
+                prefix: 'å®ƒç”±{seriesCount}ä¸ªå›¾è¡¨ç³»åˆ—ç»„æˆã€‚',
+                withName: 'ç¬¬{seriesId}ä¸ªç³»åˆ—æ˜¯ä¸€ä¸ªè¡¨ç¤º{seriesName}çš„{seriesType}ï¼Œ',
+                withoutName: 'ç¬¬{seriesId}ä¸ªç³»åˆ—æ˜¯ä¸€ä¸ª{seriesType}ï¼Œ',
+                separator: {
+                    middle: 'ï¼›',
+                    end: 'ã€‚'
+                }
+            }
+        },
+        data: {
+            allData: 'å…¶æ•°æ®æ˜¯â€”â€”',
+            partialData: 'å…¶ä¸ï¼Œå‰{displayCnt}é¡¹æ˜¯â€”â€”',
+            withName: '{name}çš„æ•°æ®æ˜¯{value}',
+            withoutName: '{value}',
+            separator: {
+                middle: 'ï¼Œ',
+                end: ''
+            }
+        }
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var aria = function (dom, ecModel) {
+    var ariaModel = ecModel.getModel('aria');
+    if (!ariaModel.get('show')) {
+        return;
+    }
+    else if (ariaModel.get('description')) {
+        dom.setAttribute('aria-label', ariaModel.get('description'));
+        return;
+    }
+
+    var seriesCnt = 0;
+    ecModel.eachSeries(function (seriesModel, idx) {
+        ++seriesCnt;
+    }, this);
+
+    var maxDataCnt = ariaModel.get('data.maxCount') || 10;
+    var maxSeriesCnt = ariaModel.get('series.maxCount') || 10;
+    var displaySeriesCnt = Math.min(seriesCnt, maxSeriesCnt);
+
+    var ariaLabel;
+    if (seriesCnt < 1) {
+        // No series, no aria label
+        return;
+    }
+    else {
+        var title = getTitle();
+        if (title) {
+            ariaLabel = replace(getConfig('general.withTitle'), {
+                title: title
+            });
+        }
+        else {
+            ariaLabel = getConfig('general.withoutTitle');
+        }
+
+        var seriesLabels = [];
+        var prefix = seriesCnt > 1
+            ? 'series.multiple.prefix'
+            : 'series.single.prefix';
+        ariaLabel += replace(getConfig(prefix), { seriesCount: seriesCnt });
+
+        ecModel.eachSeries(function (seriesModel, idx) {
+            if (idx < displaySeriesCnt) {
+                var seriesLabel;
+
+                var seriesName = seriesModel.get('name');
+                var seriesTpl = 'series.'
+                    + (seriesCnt > 1 ? 'multiple' : 'single') + '.';
+                seriesLabel = getConfig(seriesName
+                    ? seriesTpl + 'withName'
+                    : seriesTpl + 'withoutName');
+
+                seriesLabel = replace(seriesLabel, {
+                    seriesId: seriesModel.seriesIndex,
+                    seriesName: seriesModel.get('name'),
+                    seriesType: getSeriesTypeName(seriesModel.subType)
+                });
+
+                var data = seriesModel.getData();
+                window.data = data;
+                if (data.count() > maxDataCnt) {
+                    // Show part of data
+                    seriesLabel += replace(getConfig('data.partialData'), {
+                        displayCnt: maxDataCnt
+                    });
+                }
+                else {
+                    seriesLabel += getConfig('data.allData');
+                }
+
+                var dataLabels = [];
+                for (var i = 0; i < data.count(); i++) {
+                    if (i < maxDataCnt) {
+                        var name = data.getName(i);
+                        var value = retrieveRawValue(data, i);
+                        dataLabels.push(
+                            replace(
+                                name
+                                    ? getConfig('data.withName')
+                                    : getConfig('data.withoutName'),
+                                {
+                                    name: name,
+                                    value: value
+                                }
+                            )
+                        );
+                    }
+                }
+                seriesLabel += dataLabels
+                    .join(getConfig('data.separator.middle'))
+                    + getConfig('data.separator.end');
+
+                seriesLabels.push(seriesLabel);
+            }
+        });
+
+        ariaLabel += seriesLabels
+            .join(getConfig('series.multiple.separator.middle'))
+            + getConfig('series.multiple.separator.end');
+
+        dom.setAttribute('aria-label', ariaLabel);
+    }
+
+    function replace(str, keyValues) {
+        if (typeof str !== 'string') {
+            return str;
+        }
+
+        var result = str;
+        each$1(keyValues, function (value, key) {
+            result = result.replace(
+                new RegExp('\\{\\s*' + key + '\\s*\\}', 'g'),
+                value
+            );
+        });
+        return result;
+    }
+
+    function getConfig(path) {
+        var userConfig = ariaModel.get(path);
+        if (userConfig == null) {
+            var pathArr = path.split('.');
+            var result = lang.aria;
+            for (var i = 0; i < pathArr.length; ++i) {
+                result = result[pathArr[i]];
+            }
+            return result;
+        }
+        else {
+            return userConfig;
+        }
+    }
+
+    function getTitle() {
+        var title = ecModel.getModel('title').option;
+        if (title && title.length) {
+            title = title[0];
+        }
+        return title && title.text;
+    }
+
+    function getSeriesTypeName(type) {
+        return lang.series.typeNames[type] || 'è‡ªå®šä¹‰å›¾';
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var PI$1 = Math.PI;
+
+/**
+ * @param {module:echarts/ExtensionAPI} api
+ * @param {Object} [opts]
+ * @param {string} [opts.text]
+ * @param {string} [opts.color]
+ * @param {string} [opts.textColor]
+ * @return {module:zrender/Element}
+ */
+var loadingDefault = function (api, opts) {
+    opts = opts || {};
+    defaults(opts, {
+        text: 'loading',
+        color: '#c23531',
+        textColor: '#000',
+        maskColor: 'rgba(255, 255, 255, 0.8)',
+        zlevel: 0
+    });
+    var mask = new Rect({
+        style: {
+            fill: opts.maskColor
+        },
+        zlevel: opts.zlevel,
+        z: 10000
+    });
+    var arc = new Arc({
+        shape: {
+            startAngle: -PI$1 / 2,
+            endAngle: -PI$1 / 2 + 0.1,
+            r: 10
+        },
+        style: {
+            stroke: opts.color,
+            lineCap: 'round',
+            lineWidth: 5
+        },
+        zlevel: opts.zlevel,
+        z: 10001
+    });
+    var labelRect = new Rect({
+        style: {
+            fill: 'none',
+            text: opts.text,
+            textPosition: 'right',
+            textDistance: 10,
+            textFill: opts.textColor
+        },
+        zlevel: opts.zlevel,
+        z: 10001
+    });
+
+    arc.animateShape(true)
+        .when(1000, {
+            endAngle: PI$1 * 3 / 2
+        })
+        .start('circularInOut');
+    arc.animateShape(true)
+        .when(1000, {
+            startAngle: PI$1 * 3 / 2
+        })
+        .delay(300)
+        .start('circularInOut');
+
+    var group = new Group();
+    group.add(arc);
+    group.add(labelRect);
+    group.add(mask);
+    // Inject resize
+    group.resize = function () {
+        var cx = api.getWidth() / 2;
+        var cy = api.getHeight() / 2;
+        arc.setShape({
+            cx: cx,
+            cy: cy
+        });
+        var r = arc.shape.r;
+        labelRect.setShape({
+            x: cx - r,
+            y: cy - r,
+            width: r * 2,
+            height: r * 2
+        });
+
+        mask.setShape({
+            x: 0,
+            y: 0,
+            width: api.getWidth(),
+            height: api.getHeight()
+        });
+    };
+    group.resize();
+    return group;
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @module echarts/stream/Scheduler
+ */
+
+/**
+ * @constructor
+ */
+function Scheduler(ecInstance, api, dataProcessorHandlers, visualHandlers) {
+    this.ecInstance = ecInstance;
+    this.api = api;
+    this.unfinished;
+
+    // Fix current processors in case that in some rear cases that
+    // processors might be registered after echarts instance created.
+    // Register processors incrementally for a echarts instance is
+    // not supported by this stream architecture.
+    var dataProcessorHandlers = this._dataProcessorHandlers = dataProcessorHandlers.slice();
+    var visualHandlers = this._visualHandlers = visualHandlers.slice();
+    this._allHandlers = dataProcessorHandlers.concat(visualHandlers);
+
+    /**
+     * @private
+     * @type {
+     *     [handlerUID: string]: {
+     *         seriesTaskMap?: {
+     *             [seriesUID: string]: Task
+     *         },
+     *         overallTask?: Task
+     *     }
+     * }
+     */
+    this._stageTaskMap = createHashMap();
+}
+
+var proto = Scheduler.prototype;
+
+/**
+ * @param {module:echarts/model/Global} ecModel
+ * @param {Object} payload
+ */
+proto.restoreData = function (ecModel, payload) {
+    // TODO: Only restroe needed series and components, but not all components.
+    // Currently `restoreData` of all of the series and component will be called.
+    // But some independent components like `title`, `legend`, `graphic`, `toolbox`,
+    // `tooltip`, `axisPointer`, etc, do not need series refresh when `setOption`,
+    // and some components like coordinate system, axes, dataZoom, visualMap only
+    // need their target series refresh.
+    // (1) If we are implementing this feature some day, we should consider these cases:
+    // if a data processor depends on a component (e.g., dataZoomProcessor depends
+    // on the settings of `dataZoom`), it should be re-performed if the component
+    // is modified by `setOption`.
+    // (2) If a processor depends on sevral series, speicified by its `getTargetSeries`,
+    // it should be re-performed when the result array of `getTargetSeries` changed.
+    // We use `dependencies` to cover these issues.
+    // (3) How to update target series when coordinate system related components modified.
+
+    // TODO: simply the dirty mechanism? Check whether only the case here can set tasks dirty,
+    // and this case all of the tasks will be set as dirty.
+
+    ecModel.restoreData(payload);
+
+    // Theoretically an overall task not only depends on each of its target series, but also
+    // depends on all of the series.
+    // The overall task is not in pipeline, and `ecModel.restoreData` only set pipeline tasks
+    // dirty. If `getTargetSeries` of an overall task returns nothing, we should also ensure
+    // that the overall task is set as dirty and to be performed, otherwise it probably cause
+    // state chaos. So we have to set dirty of all of the overall tasks manually, otherwise it
+    // probably cause state chaos (consider `dataZoomProcessor`).
+    this._stageTaskMap.each(function (taskRecord) {
+        var overallTask = taskRecord.overallTask;
+        overallTask && overallTask.dirty();
+    });
+};
+
+// If seriesModel provided, incremental threshold is check by series data.
+proto.getPerformArgs = function (task, isBlock) {
+    // For overall task
+    if (!task.__pipeline) {
+        return;
+    }
+
+    var pipeline = this._pipelineMap.get(task.__pipeline.id);
+    var pCtx = pipeline.context;
+    var incremental = !isBlock
+        && pipeline.progressiveEnabled
+        && (!pCtx || pCtx.progressiveRender)
+        && task.__idxInPipeline > pipeline.blockIndex;
+
+    var step = incremental ? pipeline.step : null;
+    var modDataCount = pCtx && pCtx.modDataCount;
+    var modBy = modDataCount != null ? Math.ceil(modDataCount / step): null;
+
+    return {step: step, modBy: modBy, modDataCount: modDataCount};
+};
+
+proto.getPipeline = function (pipelineId) {
+    return this._pipelineMap.get(pipelineId);
+};
+
+/**
+ * Current, progressive rendering starts from visual and layout.
+ * Always detect render mode in the same stage, avoiding that incorrect
+ * detection caused by data filtering.
+ * Caution:
+ * `updateStreamModes` use `seriesModel.getData()`.
+ */
+proto.updateStreamModes = function (seriesModel, view) {
+    var pipeline = this._pipelineMap.get(seriesModel.uid);
+    var data = seriesModel.getData();
+    var dataLen = data.count();
+
+    // `progressiveRender` means that can render progressively in each
+    // animation frame. Note that some types of series do not provide
+    // `view.incrementalPrepareRender` but support `chart.appendData`. We
+    // use the term `incremental` but not `progressive` to describe the
+    // case that `chart.appendData`.
+    var progressiveRender = pipeline.progressiveEnabled
+        && view.incrementalPrepareRender
+        && dataLen >= pipeline.threshold;
+
+    var large = seriesModel.get('large') && dataLen >= seriesModel.get('largeThreshold');
+
+    // TODO: modDataCount should not updated if `appendData`, otherwise cause whole repaint.
+    // see `test/candlestick-large3.html`
+    var modDataCount = seriesModel.get('progressiveChunkMode') === 'mod' ? dataLen : null;
+
+    seriesModel.pipelineContext = pipeline.context = {
+        progressiveRender: progressiveRender,
+        modDataCount: modDataCount,
+        large: large
+    };
+};
+
+proto.restorePipelines = function (ecModel) {
+    var scheduler = this;
+    var pipelineMap = scheduler._pipelineMap = createHashMap();
+
+    ecModel.eachSeries(function (seriesModel) {
+        var progressive = seriesModel.getProgressive();
+        var pipelineId = seriesModel.uid;
+
+        pipelineMap.set(pipelineId, {
+            id: pipelineId,
+            head: null,
+            tail: null,
+            threshold: seriesModel.getProgressiveThreshold(),
+            progressiveEnabled: progressive
+                && !(seriesModel.preventIncremental && seriesModel.preventIncremental()),
+            blockIndex: -1,
+            step: Math.round(progressive || 700),
+            count: 0
+        });
+
+        pipe(scheduler, seriesModel, seriesModel.dataTask);
+    });
+};
+
+proto.prepareStageTasks = function () {
+    var stageTaskMap = this._stageTaskMap;
+    var ecModel = this.ecInstance.getModel();
+    var api = this.api;
+
+    each$1(this._allHandlers, function (handler) {
+        var record = stageTaskMap.get(handler.uid) || stageTaskMap.set(handler.uid, []);
+
+        handler.reset && createSeriesStageTask(this, handler, record, ecModel, api);
+        handler.overallReset && createOverallStageTask(this, handler, record, ecModel, api);
+    }, this);
+};
+
+proto.prepareView = function (view, model, ecModel, api) {
+    var renderTask = view.renderTask;
+    var context = renderTask.context;
+
+    context.model = model;
+    context.ecModel = ecModel;
+    context.api = api;
+
+    renderTask.__block = !view.incrementalPrepareRender;
+
+    pipe(this, model, renderTask);
+};
+
+
+proto.performDataProcessorTasks = function (ecModel, payload) {
+    // If we do not use `block` here, it should be considered when to update modes.
+    performStageTasks(this, this._dataProcessorHandlers, ecModel, payload, {block: true});
+};
+
+// opt
+// opt.visualType: 'visual' or 'layout'
+// opt.setDirty
+proto.performVisualTasks = function (ecModel, payload, opt) {
+    performStageTasks(this, this._visualHandlers, ecModel, payload, opt);
+};
+
+function performStageTasks(scheduler, stageHandlers, ecModel, payload, opt) {
+    opt = opt || {};
+    var unfinished;
+
+    each$1(stageHandlers, function (stageHandler, idx) {
+        if (opt.visualType && opt.visualType !== stageHandler.visualType) {
+            return;
+        }
+
+        var stageHandlerRecord = scheduler._stageTaskMap.get(stageHandler.uid);
+        var seriesTaskMap = stageHandlerRecord.seriesTaskMap;
+        var overallTask = stageHandlerRecord.overallTask;
+
+        if (overallTask) {
+            var overallNeedDirty;
+            var agentStubMap = overallTask.agentStubMap;
+            agentStubMap.each(function (stub) {
+                if (needSetDirty(opt, stub)) {
+                    stub.dirty();
+                    overallNeedDirty = true;
+                }
+            });
+            overallNeedDirty && overallTask.dirty();
+            updatePayload(overallTask, payload);
+            var performArgs = scheduler.getPerformArgs(overallTask, opt.block);
+            // Execute stubs firstly, which may set the overall task dirty,
+            // then execute the overall task. And stub will call seriesModel.setData,
+            // which ensures that in the overallTask seriesModel.getData() will not
+            // return incorrect data.
+            agentStubMap.each(function (stub) {
+                stub.perform(performArgs);
+            });
+            unfinished |= overallTask.perform(performArgs);
+        }
+        else if (seriesTaskMap) {
+            seriesTaskMap.each(function (task, pipelineId) {
+                if (needSetDirty(opt, task)) {
+                    task.dirty();
+                }
+                var performArgs = scheduler.getPerformArgs(task, opt.block);
+                performArgs.skip = !stageHandler.performRawSeries
+                    && ecModel.isSeriesFiltered(task.context.model);
+                updatePayload(task, payload);
+                unfinished |= task.perform(performArgs);
+            });
+        }
+    });
+
+    function needSetDirty(opt, task) {
+        return opt.setDirty && (!opt.dirtyMap || opt.dirtyMap.get(task.__pipeline.id));
+    }
+
+    scheduler.unfinished |= unfinished;
+}
+
+proto.performSeriesTasks = function (ecModel) {
+    var unfinished;
+
+    ecModel.eachSeries(function (seriesModel) {
+        // Progress to the end for dataInit and dataRestore.
+        unfinished |= seriesModel.dataTask.perform();
+    });
+
+    this.unfinished |= unfinished;
+};
+
+proto.plan = function () {
+    // Travel pipelines, check block.
+    this._pipelineMap.each(function (pipeline) {
+        var task = pipeline.tail;
+        do {
+            if (task.__block) {
+                pipeline.blockIndex = task.__idxInPipeline;
+                break;
+            }
+            task = task.getUpstream();
+        }
+        while (task);
+    });
+};
+
+var updatePayload = proto.updatePayload = function (task, payload) {
+    payload !== 'remain' && (task.context.payload = payload);
+};
+
+function createSeriesStageTask(scheduler, stageHandler, stageHandlerRecord, ecModel, api) {
+    var seriesTaskMap = stageHandlerRecord.seriesTaskMap
+        || (stageHandlerRecord.seriesTaskMap = createHashMap());
+    var seriesType = stageHandler.seriesType;
+    var getTargetSeries = stageHandler.getTargetSeries;
+
+    // If a stageHandler should cover all series, `createOnAllSeries` should be declared mandatorily,
+    // to avoid some typo or abuse. Otherwise if an extension do not specify a `seriesType`,
+    // it works but it may cause other irrelevant charts blocked.
+    if (stageHandler.createOnAllSeries) {
+        ecModel.eachRawSeries(create);
+    }
+    else if (seriesType) {
+        ecModel.eachRawSeriesByType(seriesType, create);
+    }
+    else if (getTargetSeries) {
+        getTargetSeries(ecModel, api).each(create);
+    }
+
+    function create(seriesModel) {
+        var pipelineId = seriesModel.uid;
+
+        // Init tasks for each seriesModel only once.
+        // Reuse original task instance.
+        var task = seriesTaskMap.get(pipelineId)
+            || seriesTaskMap.set(pipelineId, createTask({
+                plan: seriesTaskPlan,
+                reset: seriesTaskReset,
+                count: seriesTaskCount
+            }));
+        task.context = {
+            model: seriesModel,
+            ecModel: ecModel,
+            api: api,
+            useClearVisual: stageHandler.isVisual && !stageHandler.isLayout,
+            plan: stageHandler.plan,
+            reset: stageHandler.reset,
+            scheduler: scheduler
+        };
+        pipe(scheduler, seriesModel, task);
+    }
+
+    // Clear unused series tasks.
+    var pipelineMap = scheduler._pipelineMap;
+    seriesTaskMap.each(function (task, pipelineId) {
+        if (!pipelineMap.get(pipelineId)) {
+            task.dispose();
+            seriesTaskMap.removeKey(pipelineId);
+        }
+    });
+}
+
+function createOverallStageTask(scheduler, stageHandler, stageHandlerRecord, ecModel, api) {
+    var overallTask = stageHandlerRecord.overallTask = stageHandlerRecord.overallTask
+        // For overall task, the function only be called on reset stage.
+        || createTask({reset: overallTaskReset});
+
+    overallTask.context = {
+        ecModel: ecModel,
+        api: api,
+        overallReset: stageHandler.overallReset,
+        scheduler: scheduler
+    };
+
+    // Reuse orignal stubs.
+    var agentStubMap = overallTask.agentStubMap = overallTask.agentStubMap || createHashMap();
+
+    var seriesType = stageHandler.seriesType;
+    var getTargetSeries = stageHandler.getTargetSeries;
+    var overallProgress = true;
+    var modifyOutputEnd = stageHandler.modifyOutputEnd;
+
+    // An overall task with seriesType detected or has `getTargetSeries`, we add
+    // stub in each pipelines, it will set the overall task dirty when the pipeline
+    // progress. Moreover, to avoid call the overall task each frame (too frequent),
+    // we set the pipeline block.
+    if (seriesType) {
+        ecModel.eachRawSeriesByType(seriesType, createStub);
+    }
+    else if (getTargetSeries) {
+        getTargetSeries(ecModel, api).each(createStub);
+    }
+    // Otherwise, (usually it is legancy case), the overall task will only be
+    // executed when upstream dirty. Otherwise the progressive rendering of all
+    // pipelines will be disabled unexpectedly. But it still needs stubs to receive
+    // dirty info from upsteam.
+    else {
+        overallProgress = false;
+        each$1(ecModel.getSeries(), createStub);
+    }
+
+    function createStub(seriesModel) {
+        var pipelineId = seriesModel.uid;
+        var stub = agentStubMap.get(pipelineId);
+        if (!stub) {
+            stub = agentStubMap.set(pipelineId, createTask(
+                {reset: stubReset, onDirty: stubOnDirty}
+            ));
+            // When the result of `getTargetSeries` changed, the overallTask
+            // should be set as dirty and re-performed.
+            overallTask.dirty();
+        }
+        stub.context = {
+            model: seriesModel,
+            overallProgress: overallProgress,
+            modifyOutputEnd: modifyOutputEnd
+        };
+        stub.agent = overallTask;
+        stub.__block = overallProgress;
+
+        pipe(scheduler, seriesModel, stub);
+    }
+
+    // Clear unused stubs.
+    var pipelineMap = scheduler._pipelineMap;
+    agentStubMap.each(function (stub, pipelineId) {
+        if (!pipelineMap.get(pipelineId)) {
+            stub.dispose();
+            // When the result of `getTargetSeries` changed, the overallTask
+            // should be set as dirty and re-performed.
+            overallTask.dirty();
+            agentStubMap.removeKey(pipelineId);
+        }
+    });
+}
+
+function overallTaskReset(context) {
+    context.overallReset(
+        context.ecModel, context.api, context.payload
+    );
+}
+
+function stubReset(context, upstreamContext) {
+    return context.overallProgress && stubProgress;
+}
+
+function stubProgress() {
+    this.agent.dirty();
+    this.getDownstream().dirty();
+}
+
+function stubOnDirty() {
+    this.agent && this.agent.dirty();
+}
+
+function seriesTaskPlan(context) {
+    return context.plan && context.plan(
+        context.model, context.ecModel, context.api, context.payload
+    );
+}
+
+function seriesTaskReset(context) {
+    if (context.useClearVisual) {
+        context.data.clearAllVisual();
+    }
+    var resetDefines = context.resetDefines = normalizeToArray(context.reset(
+        context.model, context.ecModel, context.api, context.payload
+    ));
+    return resetDefines.length > 1
+        ? map(resetDefines, function (v, idx) {
+            return makeSeriesTaskProgress(idx);
+        })
+        : singleSeriesTaskProgress;
+}
+
+var singleSeriesTaskProgress = makeSeriesTaskProgress(0);
+
+function makeSeriesTaskProgress(resetDefineIdx) {
+    return function (params, context) {
+        var data = context.data;
+        var resetDefine = context.resetDefines[resetDefineIdx];
+
+        if (resetDefine && resetDefine.dataEach) {
+            for (var i = params.start; i < params.end; i++) {
+                resetDefine.dataEach(data, i);
+            }
+        }
+        else if (resetDefine && resetDefine.progress) {
+            resetDefine.progress(params, data);
+        }
+    };
+}
+
+function seriesTaskCount(context) {
+    return context.data.count();
+}
+
+function pipe(scheduler, seriesModel, task) {
+    var pipelineId = seriesModel.uid;
+    var pipeline = scheduler._pipelineMap.get(pipelineId);
+    !pipeline.head && (pipeline.head = task);
+    pipeline.tail && pipeline.tail.pipe(task);
+    pipeline.tail = task;
+    task.__idxInPipeline = pipeline.count++;
+    task.__pipeline = pipeline;
+}
+
+Scheduler.wrapStageHandler = function (stageHandler, visualType) {
+    if (isFunction$1(stageHandler)) {
+        stageHandler = {
+            overallReset: stageHandler,
+            seriesType: detectSeriseType(stageHandler)
+        };
+    }
+
+    stageHandler.uid = getUID('stageHandler');
+    visualType && (stageHandler.visualType = visualType);
+
+    return stageHandler;
+};
+
+
+
+/**
+ * Only some legacy stage handlers (usually in echarts extensions) are pure function.
+ * To ensure that they can work normally, they should work in block mode, that is,
+ * they should not be started util the previous tasks finished. So they cause the
+ * progressive rendering disabled. We try to detect the series type, to narrow down
+ * the block range to only the series type they concern, but not all series.
+ */
+function detectSeriseType(legacyFunc) {
+    seriesType = null;
+    try {
+        // Assume there is no async when calling `eachSeriesByType`.
+        legacyFunc(ecModelMock, apiMock);
+    }
+    catch (e) {
+    }
+    return seriesType;
+}
+
+var ecModelMock = {};
+var apiMock = {};
+var seriesType;
+
+mockMethods(ecModelMock, GlobalModel);
+mockMethods(apiMock, ExtensionAPI);
+ecModelMock.eachSeriesByType = ecModelMock.eachRawSeriesByType = function (type) {
+    seriesType = type;
+};
+ecModelMock.eachComponent = function (cond) {
+    if (cond.mainType === 'series' && cond.subType) {
+        seriesType = cond.subType;
+    }
+};
+
+function mockMethods(target, Clz) {
+    for (var name in Clz.prototype) {
+        // Do not use hasOwnProperty
+        target[name] = noop;
+    }
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var colorAll = ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'];
+
+var lightTheme = {
+
+    color: colorAll,
+
+    colorLayer: [
+        ['#37A2DA', '#ffd85c', '#fd7b5f'],
+        ['#37A2DA', '#67E0E3', '#FFDB5C', '#ff9f7f', '#E062AE', '#9d96f5'],
+        ['#37A2DA', '#32C5E9', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378EA', '#96BFFF'],
+        colorAll
+    ]
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var contrastColor = '#eee';
+var axisCommon = function () {
+    return {
+        axisLine: {
+            lineStyle: {
+                color: contrastColor
+            }
+        },
+        axisTick: {
+            lineStyle: {
+                color: contrastColor
+            }
+        },
+        axisLabel: {
+            textStyle: {
+                color: contrastColor
+            }
+        },
+        splitLine: {
+            lineStyle: {
+                type: 'dashed',
+                color: '#aaa'
+            }
+        },
+        splitArea: {
+            areaStyle: {
+                color: contrastColor
+            }
+        }
+    };
+};
+
+var colorPalette = ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'];
+var theme = {
+    color: colorPalette,
+    backgroundColor: '#333',
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: contrastColor
+            },
+            crossStyle: {
+                color: contrastColor
+            }
+        }
+    },
+    legend: {
+        textStyle: {
+            color: contrastColor
+        }
+    },
+    textStyle: {
+        color: contrastColor
+    },
+    title: {
+        textStyle: {
+            color: contrastColor
+        }
+    },
+    toolbox: {
+        iconStyle: {
+            normal: {
+                borderColor: contrastColor
+            }
+        }
+    },
+    dataZoom: {
+        textStyle: {
+            color: contrastColor
+        }
+    },
+    visualMap: {
+        textStyle: {
+            color: contrastColor
+        }
+    },
+    timeline: {
+        lineStyle: {
+            color: contrastColor
+        },
+        itemStyle: {
+            normal: {
+                color: colorPalette[1]
+            }
+        },
+        label: {
+            normal: {
+                textStyle: {
+                    color: contrastColor
+                }
+            }
+        },
+        controlStyle: {
+            normal: {
+                color: contrastColor,
+                borderColor: contrastColor
+            }
+        }
+    },
+    timeAxis: axisCommon(),
+    logAxis: axisCommon(),
+    valueAxis: axisCommon(),
+    categoryAxis: axisCommon(),
+
+    line: {
+        symbol: 'circle'
+    },
+    graph: {
+        color: colorPalette
+    },
+    gauge: {
+        title: {
+            textStyle: {
+                color: contrastColor
+            }
+        }
+    },
+    candlestick: {
+        itemStyle: {
+            normal: {
+                color: '#FD1050',
+                color0: '#0CF49B',
+                borderColor: '#FD1050',
+                borderColor0: '#0CF49B'
+            }
+        }
+    }
+};
+theme.categoryAxis.splitLine.show = false;
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * This module is imported by echarts directly.
+ *
+ * Notice:
+ * Always keep this file exists for backward compatibility.
+ * Because before 4.1.0, dataset is an optional component,
+ * some users may import this module manually.
+ */
+
+ComponentModel.extend({
+
+    type: 'dataset',
+
+    /**
+     * @protected
+     */
+    defaultOption: {
+
+        // 'row', 'column'
+        seriesLayoutBy: SERIES_LAYOUT_BY_COLUMN,
+
+        // null/'auto': auto detect header, see "module:echarts/data/helper/sourceHelper"
+        sourceHeader: null,
+
+        dimensions: null,
+
+        source: null
+    },
+
+    optionUpdated: function () {
+        detectSourceFormat(this);
+    }
+
+});
+
+Component.extend({
+
+    type: 'dataset'
+
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+var assert = assert$1;
+var each = each$1;
+var isFunction = isFunction$1;
+var isObject = isObject$1;
+var parseClassType = ComponentModel.parseClassType;
+
+var version = '4.1.0';
+
+var dependencies = {
+    zrender: '4.0.4'
+};
+
+var TEST_FRAME_REMAIN_TIME = 1;
+
+var PRIORITY_PROCESSOR_FILTER = 1000;
+var PRIORITY_PROCESSOR_STATISTIC = 5000;
+
+var PRIORITY_VISUAL_LAYOUT = 1000;
+var PRIORITY_VISUAL_GLOBAL = 2000;
+var PRIORITY_VISUAL_CHART = 3000;
+var PRIORITY_VISUAL_COMPONENT = 4000;
+// FIXME
+// necessary?
+var PRIORITY_VISUAL_BRUSH = 5000;
+
+var PRIORITY = {
+    PROCESSOR: {
+        FILTER: PRIORITY_PROCESSOR_FILTER,
+        STATISTIC: PRIORITY_PROCESSOR_STATISTIC
+    },
+    VISUAL: {
+        LAYOUT: PRIORITY_VISUAL_LAYOUT,
+        GLOBAL: PRIORITY_VISUAL_GLOBAL,
+        CHART: PRIORITY_VISUAL_CHART,
+        COMPONENT: PRIORITY_VISUAL_COMPONENT,
+        BRUSH: PRIORITY_VISUAL_BRUSH
+    }
+};
+
+// Main process have three entries: `setOption`, `dispatchAction` and `resize`,
+// where they must not be invoked nestedly, except the only case: invoke
+// dispatchAction with updateMethod "none" in main process.
+// This flag is used to carry out this rule.
+// All events will be triggered out side main process (i.e. when !this[IN_MAIN_PROCESS]).
+var IN_MAIN_PROCESS = '__flagInMainProcess';
+var OPTION_UPDATED = '__optionUpdated';
+var ACTION_REG = /^[a-zA-Z0-9_]+$/;
+
+
+function createRegisterEventWithLowercaseName(method) {
+    return function (eventName, handler, context) {
+        // Event name is all lowercase
+        eventName = eventName && eventName.toLowerCase();
+        Eventful.prototype[method].call(this, eventName, handler, context);
+    };
+}
+
+/**
+ * @module echarts~MessageCenter
+ */
+function MessageCenter() {
+    Eventful.call(this);
+}
+MessageCenter.prototype.on = createRegisterEventWithLowercaseName('on');
+MessageCenter.prototype.off = createRegisterEventWithLowercaseName('off');
+MessageCenter.prototype.one = createRegisterEventWithLowercaseName('one');
+mixin(MessageCenter, Eventful);
+
+/**
+ * @module echarts~ECharts
+ */
+function ECharts(dom, theme$$1, opts) {
+    opts = opts || {};
+
+    // Get theme by name
+    if (typeof theme$$1 === 'string') {
+        theme$$1 = themeStorage[theme$$1];
+    }
+
+    /**
+     * @type {string}
+     */
+    this.id;
+
+    /**
+     * Group id
+     * @type {string}
+     */
+    this.group;
+
+    /**
+     * @type {HTMLElement}
+     * @private
+     */
+    this._dom = dom;
+
+    var defaultRenderer = 'canvas';
+    if (__DEV__) {
+        defaultRenderer = (
+            typeof window === 'undefined' ? global : window
+        ).__ECHARTS__DEFAULT__RENDERER__ || defaultRenderer;
+    }
+
+    /**
+     * @type {module:zrender/ZRender}
+     * @private
+     */
+    var zr = this._zr = init$1(dom, {
+        renderer: opts.renderer || defaultRenderer,
+        devicePixelRatio: opts.devicePixelRatio,
+        width: opts.width,
+        height: opts.height
+    });
+
+    /**
+     * Expect 60 pfs.
+     * @type {Function}
+     * @private
+     */
+    this._throttledZrFlush = throttle(bind(zr.flush, zr), 17);
+
+    var theme$$1 = clone(theme$$1);
+    theme$$1 && backwardCompat(theme$$1, true);
+    /**
+     * @type {Object}
+     * @private
+     */
+    this._theme = theme$$1;
+
+    /**
+     * @type {Array.<module:echarts/view/Chart>}
+     * @private
+     */
+    this._chartsViews = [];
+
+    /**
+     * @type {Object.<string, module:echarts/view/Chart>}
+     * @private
+     */
+    this._chartsMap = {};
+
+    /**
+     * @type {Array.<module:echarts/view/Component>}
+     * @private
+     */
+    this._componentsViews = [];
+
+    /**
+     * @type {Object.<string, module:echarts/view/Component>}
+     * @private
+     */
+    this._componentsMap = {};
+
+    /**
+     * @type {module:echarts/CoordinateSystem}
+     * @private
+     */
+    this._coordSysMgr = new CoordinateSystemManager();
+
+    /**
+     * @type {module:echarts/ExtensionAPI}
+     * @private
+     */
+    var api = this._api = createExtensionAPI(this);
+
+    // Sort on demand
+    function prioritySortFunc(a, b) {
+        return a.__prio - b.__prio;
+    }
+    sort(visualFuncs, prioritySortFunc);
+    sort(dataProcessorFuncs, prioritySortFunc);
+
+    /**
+     * @type {module:echarts/stream/Scheduler}
+     */
+    this._scheduler = new Scheduler(this, api, dataProcessorFuncs, visualFuncs);
+
+    Eventful.call(this);
+
+    /**
+     * @type {module:echarts~MessageCenter}
+     * @private
+     */
+    this._messageCenter = new MessageCenter();
+
+    // Init mouse events
+    this._initEvents();
+
+    // In case some people write `window.onresize = chart.resize`
+    this.resize = bind(this.resize, this);
+
+    // Can't dispatch action during rendering procedure
+    this._pendingActions = [];
+
+    zr.animation.on('frame', this._onframe, this);
+
+    bindRenderedEvent(zr, this);
+
+    // ECharts instance can be used as value.
+    setAsPrimitive(this);
+}
+
+var echartsProto = ECharts.prototype;
+
+echartsProto._onframe = function () {
+    if (this._disposed) {
+        return;
+    }
+
+    var scheduler = this._scheduler;
+
+    // Lazy update
+    if (this[OPTION_UPDATED]) {
+        var silent = this[OPTION_UPDATED].silent;
+
+        this[IN_MAIN_PROCESS] = true;
+
+        prepare(this);
+        updateMethods.update.call(this);
+
+        this[IN_MAIN_PROCESS] = false;
+
+        this[OPTION_UPDATED] = false;
+
+        flushPendingActions.call(this, silent);
+
+        triggerUpdatedEvent.call(this, silent);
+    }
+    // Avoid do both lazy update and progress in one frame.
+    else if (scheduler.unfinished) {
+        // Stream progress.
+        var remainTime = TEST_FRAME_REMAIN_TIME;
+        var ecModel = this._model;
+        var api = this._api;
+        scheduler.unfinished = false;
+        do {
+            var startTime = +new Date();
+
+            scheduler.performSeriesTasks(ecModel);
+
+            // Currently dataProcessorFuncs do not check threshold.
+            scheduler.performDataProcessorTasks(ecModel);
+
+            updateStreamModes(this, ecModel);
+
+            // Do not update coordinate system here. Because that coord system update in
+            // each frame is not a good user experience. So we follow the rule that
+            // the extent of the coordinate system is determin in the first frame (the
+            // frame is executed immedietely after task reset.
+            // this._coordSysMgr.update(ecModel, api);
+
+            // console.log('--- ec frame visual ---', remainTime);
+            scheduler.performVisualTasks(ecModel);
+
+            renderSeries(this, this._model, api, 'remain');
+
+            remainTime -= (+new Date() - startTime);
+        }
+        while (remainTime > 0 && scheduler.unfinished);
+
+        // Call flush explicitly for trigger finished event.
+        if (!scheduler.unfinished) {
+            this._zr.flush();
+        }
+        // Else, zr flushing be ensue within the same frame,
+        // because zr flushing is after onframe event.
+    }
+};
+
+/**
+ * @return {HTMLElement}
+ */
+echartsProto.getDom = function () {
+    return this._dom;
+};
+
+/**
+ * @return {module:zrender~ZRender}
+ */
+echartsProto.getZr = function () {
+    return this._zr;
+};
+
+/**
+ * Usage:
+ * chart.setOption(option, notMerge, lazyUpdate);
+ * chart.setOption(option, {
+ *     notMerge: ...,
+ *     lazyUpdate: ...,
+ *     silent: ...
+ * });
+ *
+ * @param {Object} option
+ * @param {Object|boolean} [opts] opts or notMerge.
+ * @param {boolean} [opts.notMerge=false]
+ * @param {boolean} [opts.lazyUpdate=false] Useful when setOption frequently.
+ */
+echartsProto.setOption = function (option, notMerge, lazyUpdate) {
+    if (__DEV__) {
+        assert(!this[IN_MAIN_PROCESS], '`setOption` should not be called during main process.');
+    }
+
+    var silent;
+    if (isObject(notMerge)) {
+        lazyUpdate = notMerge.lazyUpdate;
+        silent = notMerge.silent;
+        notMerge = notMerge.notMerge;
+    }
+
+    this[IN_MAIN_PROCESS] = true;
+
+    if (!this._model || notMerge) {
+        var optionManager = new OptionManager(this._api);
+        var theme$$1 = this._theme;
+        var ecModel = this._model = new GlobalModel(null, null, theme$$1, optionManager);
+        ecModel.scheduler = this._scheduler;
+        ecModel.init(null, null, theme$$1, optionManager);
+    }
+
+    this._model.setOption(option, optionPreprocessorFuncs);
+
+    if (lazyUpdate) {
+        this[OPTION_UPDATED] = {silent: silent};
+        this[IN_MAIN_PROCESS] = false;
+    }
+    else {
+        prepare(this);
+
+        updateMethods.update.call(this);
+
+        // Ensure zr refresh sychronously, and then pixel in canvas can be
+        // fetched after `setOption`.
+        this._zr.flush();
+
+        this[OPTION_UPDATED] = false;
+        this[IN_MAIN_PROCESS] = false;
+
+        flushPendingActions.call(this, silent);
+        triggerUpdatedEvent.call(this, silent);
+    }
+};
+
+/**
+ * @DEPRECATED
+ */
+echartsProto.setTheme = function () {
+    console.log('ECharts#setTheme() is DEPRECATED in ECharts 3.0');
+};
+
+/**
+ * @return {module:echarts/model/Global}
+ */
+echartsProto.getModel = function () {
+    return this._model;
+};
+
+/**
+ * @return {Object}
+ */
+echartsProto.getOption = function () {
+    return this._model && this._model.getOption();
+};
+
+/**
+ * @return {number}
+ */
+echartsProto.getWidth = function () {
+    return this._zr.getWidth();
+};
+
+/**
+ * @return {number}
+ */
+echartsProto.getHeight = function () {
+    return this._zr.getHeight();
+};
+
+/**
+ * @return {number}
+ */
+echartsProto.getDevicePixelRatio = function () {
+    return this._zr.painter.dpr || window.devicePixelRatio || 1;
+};
+
+/**
+ * Get canvas which has all thing rendered
+ * @param {Object} opts
+ * @param {string} [opts.backgroundColor]
+ * @return {string}
+ */
+echartsProto.getRenderedCanvas = function (opts) {
+    if (!env$1.canvasSupported) {
+        return;
+    }
+    opts = opts || {};
+    opts.pixelRatio = opts.pixelRatio || 1;
+    opts.backgroundColor = opts.backgroundColor
+        || this._model.get('backgroundColor');
+    var zr = this._zr;
+    // var list = zr.storage.getDisplayList();
+    // Stop animations
+    // Never works before in init animation, so remove it.
+    // zrUtil.each(list, function (el) {
+    //     el.stopAnimation(true);
+    // });
+    return zr.painter.getRenderedCanvas(opts);
+};
+
+/**
+ * Get svg data url
+ * @return {string}
+ */
+echartsProto.getSvgDataUrl = function () {
+    if (!env$1.svgSupported) {
+        return;
+    }
+
+    var zr = this._zr;
+    var list = zr.storage.getDisplayList();
+    // Stop animations
+    each$1(list, function (el) {
+        el.stopAnimation(true);
+    });
+
+    return zr.painter.pathToDataUrl();
+};
+
+/**
+ * @return {string}
+ * @param {Object} opts
+ * @param {string} [opts.type='png']
+ * @param {string} [opts.pixelRatio=1]
+ * @param {string} [opts.backgroundColor]
+ * @param {string} [opts.excludeComponents]
+ */
+echartsProto.getDataURL = function (opts) {
+    opts = opts || {};
+    var excludeComponents = opts.excludeComponents;
+    var ecModel = this._model;
+    var excludesComponentViews = [];
+    var self = this;
+
+    each(excludeComponents, function (componentType) {
+        ecModel.eachComponent({
+            mainType: componentType
+        }, function (component) {
+            var view = self._componentsMap[component.__viewId];
+            if (!view.group.ignore) {
+                excludesComponentViews.push(view);
+                view.group.ignore = true;
+            }
+        });
+    });
+
+    var url = this._zr.painter.getType() === 'svg'
+        ? this.getSvgDataUrl()
+        : this.getRenderedCanvas(opts).toDataURL(
+            'image/' + (opts && opts.type || 'png')
+        );
+
+    each(excludesComponentViews, function (view) {
+        view.group.ignore = false;
+    });
+
+    return url;
+};
+
+
+/**
+ * @return {string}
+ * @param {Object} opts
+ * @param {string} [opts.type='png']
+ * @param {string} [opts.pixelRatio=1]
+ * @param {string} [opts.backgroundColor]
+ */
+echartsProto.getConnectedDataURL = function (opts) {
+    if (!env$1.canvasSupported) {
+        return;
+    }
+    var groupId = this.group;
+    var mathMin = Math.min;
+    var mathMax = Math.max;
+    var MAX_NUMBER = Infinity;
+    if (connectedGroups[groupId]) {
+        var left = MAX_NUMBER;
+        var top = MAX_NUMBER;
+        var right = -MAX_NUMBER;
+        var bottom = -MAX_NUMBER;
+        var canvasList = [];
+        var dpr = (opts && opts.pixelRatio) || 1;
+
+        each$1(instances, function (chart, id) {
+            if (chart.group === groupId) {
+                var canvas = chart.getRenderedCanvas(
+                    clone(opts)
+                );
+                var boundingRect = chart.getDom().getBoundingClientRect();
+                left = mathMin(boundingRect.left, left);
+                top = mathMin(boundingRect.top, top);
+                right = mathMax(boundingRect.right, right);
+                bottom = mathMax(boundingRect.bottom, bottom);
+                canvasList.push({
+                    dom: canvas,
+                    left: boundingRect.left,
+                    top: boundingRect.top
+                });
+            }
+        });
+
+        left *= dpr;
+        top *= dpr;
+        right *= dpr;
+        bottom *= dpr;
+        var width = right - left;
+        var height = bottom - top;
+        var targetCanvas = createCanvas();
+        targetCanvas.width = width;
+        targetCanvas.height = height;
+        var zr = init$1(targetCanvas);
+
+        each(canvasList, function (item) {
+            var img = new ZImage({
+                style: {
+                    x: item.left * dpr - left,
+                    y: item.top * dpr - top,
+                    image: item.dom
+                }
+            });
+            zr.add(img);
+        });
+        zr.refreshImmediately();
+
+        return targetCanvas.toDataURL('image/' + (opts && opts.type || 'png'));
+    }
+    else {
+        return this.getDataURL(opts);
+    }
+};
+
+/**
+ * Convert from logical coordinate system to pixel coordinate system.
+ * See CoordinateSystem#convertToPixel.
+ * @param {string|Object} finder
+ *        If string, e.g., 'geo', means {geoIndex: 0}.
+ *        If Object, could contain some of these properties below:
+ *        {
+ *            seriesIndex / seriesId / seriesName,
+ *            geoIndex / geoId, geoName,
+ *            bmapIndex / bmapId / bmapName,
+ *            xAxisIndex / xAxisId / xAxisName,
+ *            yAxisIndex / yAxisId / yAxisName,
+ *            gridIndex / gridId / gridName,
+ *            ... (can be extended)
+ *        }
+ * @param {Array|number} value
+ * @return {Array|number} result
+ */
+echartsProto.convertToPixel = curry(doConvertPixel, 'convertToPixel');
+
+/**
+ * Convert from pixel coordinate system to logical coordinate system.
+ * See CoordinateSystem#convertFromPixel.
+ * @param {string|Object} finder
+ *        If string, e.g., 'geo', means {geoIndex: 0}.
+ *        If Object, could contain some of these properties below:
+ *        {
+ *            seriesIndex / seriesId / seriesName,
+ *            geoIndex / geoId / geoName,
+ *            bmapIndex / bmapId / bmapName,
+ *            xAxisIndex / xAxisId / xAxisName,
+ *            yAxisIndex / yAxisId / yAxisName
+ *            gridIndex / gridId / gridName,
+ *            ... (can be extended)
+ *        }
+ * @param {Array|number} value
+ * @return {Array|number} result
+ */
+echartsProto.convertFromPixel = curry(doConvertPixel, 'convertFromPixel');
+
+function doConvertPixel(methodName, finder, value) {
+    var ecModel = this._model;
+    var coordSysList = this._coordSysMgr.getCoordinateSystems();
+    var result;
+
+    finder = parseFinder(ecModel, finder);
+
+    for (var i = 0; i < coordSysList.length; i++) {
+        var coordSys = coordSysList[i];
+        if (coordSys[methodName]
+            && (result = coordSys[methodName](ecModel, finder, value)) != null
+        ) {
+            return result;
+        }
+    }
+
+    if (__DEV__) {
+        console.warn(
+            'No coordinate system that supports ' + methodName + ' found by the given finder.'
+        );
+    }
+}
+
+/**
+ * Is the specified coordinate systems or components contain the given pixel point.
+ * @param {string|Object} finder
+ *        If string, e.g., 'geo', means {geoIndex: 0}.
+ *        If Object, could contain some of these properties below:
+ *        {
+ *            seriesIndex / seriesId / seriesName,
+ *            geoIndex / geoId / geoName,
+ *            bmapIndex / bmapId / bmapName,
+ *            xAxisIndex / xAxisId / xAxisName,
+ *            yAxisIndex / yAxisId / yAxisName,
+ *            gridIndex / gridId / gridName,
+ *            ... (can be extended)
+ *        }
+ * @param {Array|number} value
+ * @return {boolean} result
+ */
+echartsProto.containPixel = function (finder, value) {
+    var ecModel = this._model;
+    var result;
+
+    finder = parseFinder(ecModel, finder);
+
+    each$1(finder, function (models, key) {
+        key.indexOf('Models') >= 0 && each$1(models, function (model) {
+            var coordSys = model.coordinateSystem;
+            if (coordSys && coordSys.containPoint) {
+                result |= !!coordSys.containPoint(value);
+            }
+            else if (key === 'seriesModels') {
+                var view = this._chartsMap[model.__viewId];
+                if (view && view.containPoint) {
+                    result |= view.containPoint(value, model);
+                }
+                else {
+                    if (__DEV__) {
+                        console.warn(key + ': ' + (view
+                            ? 'The found component do not support containPoint.'
+                            : 'No view mapping to the found component.'
+                        ));
+                    }
+                }
+            }
+            else {
+                if (__DEV__) {
+                    console.warn(key + ': containPoint is not supported');
+                }
+            }
+        }, this);
+    }, this);
+
+    return !!result;
+};
+
+/**
+ * Get visual from series or data.
+ * @param {string|Object} finder
+ *        If string, e.g., 'series', means {seriesIndex: 0}.
+ *        If Object, could contain some of these properties below:
+ *        {
+ *            seriesIndex / seriesId / seriesName,
+ *            dataIndex / dataIndexInside
+ *        }
+ *        If dataIndex is not specified, series visual will be fetched,
+ *        but not data item visual.
+ *        If all of seriesIndex, seriesId, seriesName are not specified,
+ *        visual will be fetched from first series.
+ * @param {string} visualType 'color', 'symbol', 'symbolSize'
+ */
+echartsProto.getVisual = function (finder, visualType) {
+    var ecModel = this._model;
+
+    finder = parseFinder(ecModel, finder, {defaultMainType: 'series'});
+
+    var seriesModel = finder.seriesModel;
+
+    if (__DEV__) {
+        if (!seriesModel) {
+            console.warn('There is no specified seires model');
+        }
+    }
+
+    var data = seriesModel.getData();
+
+    var dataIndexInside = finder.hasOwnProperty('dataIndexInside')
+        ? finder.dataIndexInside
+        : finder.hasOwnProperty('dataIndex')
+        ? data.indexOfRawIndex(finder.dataIndex)
+        : null;
+
+    return dataIndexInside != null
+        ? data.getItemVisual(dataIndexInside, visualType)
+        : data.getVisual(visualType);
+};
+
+/**
+ * Get view of corresponding component model
+ * @param  {module:echarts/model/Component} componentModel
+ * @return {module:echarts/view/Component}
+ */
+echartsProto.getViewOfComponentModel = function (componentModel) {
+    return this._componentsMap[componentModel.__viewId];
+};
+
+/**
+ * Get view of corresponding series model
+ * @param  {module:echarts/model/Series} seriesModel
+ * @return {module:echarts/view/Chart}
+ */
+echartsProto.getViewOfSeriesModel = function (seriesModel) {
+    return this._chartsMap[seriesModel.__viewId];
+};
+
+var updateMethods = {
+
+    prepareAndUpdate: function (payload) {
+        prepare(this);
+        updateMethods.update.call(this, payload);
+    },
+
+    /**
+     * @param {Object} payload
+     * @private
+     */
+    update: function (payload) {
+        // console.profile && console.profile('update');
+
+        var ecModel = this._model;
+        var api = this._api;
+        var zr = this._zr;
+        var coordSysMgr = this._coordSysMgr;
+        var scheduler = this._scheduler;
+
+        // update before setOption
+        if (!ecModel) {
+            return;
+        }
+
+        scheduler.restoreData(ecModel, payload);
+
+        scheduler.performSeriesTasks(ecModel);
+
+        // TODO
+        // Save total ecModel here for undo/redo (after restoring data and before processing data).
+        // Undo (restoration of total ecModel) can be carried out in 'action' or outside API call.
+
+        // Create new coordinate system each update
+        // In LineView may save the old coordinate system and use it to get the orignal point
+        coordSysMgr.create(ecModel, api);
+
+        scheduler.performDataProcessorTasks(ecModel, payload);
+
+        // Current stream render is not supported in data process. So we can update
+        // stream modes after data processing, where the filtered data is used to
+        // deteming whether use progressive rendering.
+        updateStreamModes(this, ecModel);
+
+        // We update stream modes before coordinate system updated, then the modes info
+        // can be fetched when coord sys updating (consider the barGrid extent fix). But
+        // the drawback is the full coord info can not be fetched. Fortunately this full
+        // coord is not requied in stream mode updater currently.
+        coordSysMgr.update(ecModel, api);
+
+        clearColorPalette(ecModel);
+        scheduler.performVisualTasks(ecModel, payload);
+
+        render(this, ecModel, api, payload);
+
+        // Set background
+        var backgroundColor = ecModel.get('backgroundColor') || 'transparent';
+
+        // In IE8
+        if (!env$1.canvasSupported) {
+            var colorArr = parse(backgroundColor);
+            backgroundColor = stringify(colorArr, 'rgb');
+            if (colorArr[3] === 0) {
+                backgroundColor = 'transparent';
+            }
+        }
+        else {
+            zr.setBackgroundColor(backgroundColor);
+        }
+
+        performPostUpdateFuncs(ecModel, api);
+
+        // console.profile && console.profileEnd('update');
+    },
+
+    /**
+     * @param {Object} payload
+     * @private
+     */
+    updateTransform: function (payload) {
+        var ecModel = this._model;
+        var ecIns = this;
+        var api = this._api;
+
+        // update before setOption
+        if (!ecModel) {
+            return;
+        }
+
+        // ChartView.markUpdateMethod(payload, 'updateTransform');
+
+        var componentDirtyList = [];
+        ecModel.eachComponent(function (componentType, componentModel) {
+            var componentView = ecIns.getViewOfComponentModel(componentModel);
+            if (componentView && componentView.__alive) {
+                if (componentView.updateTransform) {
+                    var result = componentView.updateTransform(componentModel, ecModel, api, payload);
+                    result && result.update && componentDirtyList.push(componentView);
+                }
+                else {
+                    componentDirtyList.push(componentView);
+                }
+            }
+        });
+
+        var seriesDirtyMap = createHashMap();
+        ecModel.eachSeries(function (seriesModel) {
+            var chartView = ecIns._chartsMap[seriesModel.__viewId];
+            if (chartView.updateTransform) {
+                var result = chartView.updateTransform(seriesModel, ecModel, api, payload);
+                result && result.update && seriesDirtyMap.set(seriesModel.uid, 1);
+            }
+            else {
+                seriesDirtyMap.set(seriesModel.uid, 1);
+            }
+        });
+
+        clearColorPalette(ecModel);
+        // Keep pipe to the exist pipeline because it depends on the render task of the full pipeline.
+        // this._scheduler.performVisualTasks(ecModel, payload, 'layout', true);
+        this._scheduler.performVisualTasks(
+            ecModel, payload, {setDirty: true, dirtyMap: seriesDirtyMap}
+        );
+
+        // Currently, not call render of components. Geo render cost a lot.
+        // renderComponents(ecIns, ecModel, api, payload, componentDirtyList);
+        renderSeries(ecIns, ecModel, api, payload, seriesDirtyMap);
+
+        performPostUpdateFuncs(ecModel, this._api);
+    },
+
+    /**
+     * @param {Object} payload
+     * @private
+     */
+    updateView: function (payload) {
+        var ecModel = this._model;
+
+        // update before setOption
+        if (!ecModel) {
+            return;
+        }
+
+        Chart.markUpdateMethod(payload, 'updateView');
+
+        clearColorPalette(ecModel);
+
+        // Keep pipe to the exist pipeline because it depends on the render task of the full pipeline.
+        this._scheduler.performVisualTasks(ecModel, payload, {setDirty: true});
+
+        render(this, this._model, this._api, payload);
+
+        performPostUpdateFuncs(ecModel, this._api);
+    },
+
+    /**
+     * @param {Object} payload
+     * @private
+     */
+    updateVisual: function (payload) {
+        updateMethods.update.call(this, payload);
+
+        // var ecModel = this._model;
+
+        // // update before setOption
+        // if (!ecModel) {
+        //     return;
+        // }
+
+        // ChartView.markUpdateMethod(payload, 'updateVisual');
+
+        // clearColorPalette(ecModel);
+
+        // // Keep pipe to the exist pipeline because it depends on the render task of the full pipeline.
+        // this._scheduler.performVisualTasks(ecModel, payload, {visualType: 'visual', setDirty: true});
+
+        // render(this, this._model, this._api, payload);
+
+        // performPostUpdateFuncs(ecModel, this._api);
+    },
+
+    /**
+     * @param {Object} payload
+     * @private
+     */
+    updateLayout: function (payload) {
+        updateMethods.update.call(this, payload);
+
+        // var ecModel = this._model;
+
+        // // update before setOption
+        // if (!ecModel) {
+        //     return;
+        // }
+
+        // ChartView.markUpdateMethod(payload, 'updateLayout');
+
+        // // Keep pipe to the exist pipeline because it depends on the render task of the full pipeline.
+        // // this._scheduler.performVisualTasks(ecModel, payload, 'layout', true);
+        // this._scheduler.performVisualTasks(ecModel, payload, {setDirty: true});
+
+        // render(this, this._model, this._api, payload);
+
+        // performPostUpdateFuncs(ecModel, this._api);
+    }
+};
+
+function prepare(ecIns) {
+    var ecModel = ecIns._model;
+    var scheduler = ecIns._scheduler;
+
+    scheduler.restorePipelines(ecModel);
+
+    scheduler.prepareStageTasks();
+
+    prepareView(ecIns, 'component', ecModel, scheduler);
+
+    prepareView(ecIns, 'chart', ecModel, scheduler);
+
+    scheduler.plan();
+}
+
+/**
+ * @private
+ */
+function updateDirectly(ecIns, method, payload, mainType, subType) {
+    var ecModel = ecIns._model;
+
+    // broadcast
+    if (!mainType) {
+        // FIXME
+        // Chart will not be update directly here, except set dirty.
+        // But there is no such scenario now.
+        each(ecIns._componentsViews.concat(ecIns._chartsViews), callView);
+        return;
+    }
+
+    var query = {};
+    query[mainType + 'Id'] = payload[mainType + 'Id'];
+    query[mainType + 'Index'] = payload[mainType + 'Index'];
+    query[mainType + 'Name'] = payload[mainType + 'Name'];
+
+    var condition = {mainType: mainType, query: query};
+    subType && (condition.subType = subType); // subType may be '' by parseClassType;
+
+    var excludeSeriesId = payload.excludeSeriesId;
+    if (excludeSeriesId != null) {
+        excludeSeriesId = createHashMap(normalizeToArray(excludeSeriesId));
+    }
+
+    // If dispatchAction before setOption, do nothing.
+    ecModel && ecModel.eachComponent(condition, function (model) {
+        if (!excludeSeriesId || excludeSeriesId.get(model.id) == null) {
+            callView(ecIns[
+                mainType === 'series' ? '_chartsMap' : '_componentsMap'
+            ][model.__viewId]);
+        }
+    }, ecIns);
+
+    function callView(view) {
+        view && view.__alive && view[method] && view[method](
+            view.__model, ecModel, ecIns._api, payload
+        );
+    }
+}
+
+/**
+ * Resize the chart
+ * @param {Object} opts
+ * @param {number} [opts.width] Can be 'auto' (the same as null/undefined)
+ * @param {number} [opts.height] Can be 'auto' (the same as null/undefined)
+ * @param {boolean} [opts.silent=false]
+ */
+echartsProto.resize = function (opts) {
+    if (__DEV__) {
+        assert(!this[IN_MAIN_PROCESS], '`resize` should not be called during main process.');
+    }
+
+    this._zr.resize(opts);
+
+    var ecModel = this._model;
+
+    // Resize loading effect
+    this._loadingFX && this._loadingFX.resize();
+
+    if (!ecModel) {
+        return;
+    }
+
+    var optionChanged = ecModel.resetOption('media');
+
+    var silent = opts && opts.silent;
+
+    this[IN_MAIN_PROCESS] = true;
+
+    optionChanged && prepare(this);
+    updateMethods.update.call(this);
+
+    this[IN_MAIN_PROCESS] = false;
+
+    flushPendingActions.call(this, silent);
+
+    triggerUpdatedEvent.call(this, silent);
+};
+
+function updateStreamModes(ecIns, ecModel) {
+    var chartsMap = ecIns._chartsMap;
+    var scheduler = ecIns._scheduler;
+    ecModel.eachSeries(function (seriesModel) {
+        scheduler.updateStreamModes(seriesModel, chartsMap[seriesModel.__viewId]);
+    });
+}
+
+/**
+ * Show loading effect
+ * @param  {string} [name='default']
+ * @param  {Object} [cfg]
+ */
+echartsProto.showLoading = function (name, cfg) {
+    if (isObject(name)) {
+        cfg = name;
+        name = '';
+    }
+    name = name || 'default';
+
+    this.hideLoading();
+    if (!loadingEffects[name]) {
+        if (__DEV__) {
+            console.warn('Loading effects ' + name + ' not exists.');
+        }
+        return;
+    }
+    var el = loadingEffects[name](this._api, cfg);
+    var zr = this._zr;
+    this._loadingFX = el;
+
+    zr.add(el);
+};
+
+/**
+ * Hide loading effect
+ */
+echartsProto.hideLoading = function () {
+    this._loadingFX && this._zr.remove(this._loadingFX);
+    this._loadingFX = null;
+};
+
+/**
+ * @param {Object} eventObj
+ * @return {Object}
+ */
+echartsProto.makeActionFromEvent = function (eventObj) {
+    var payload = extend({}, eventObj);
+    payload.type = eventActionMap[eventObj.type];
+    return payload;
+};
+
+/**
+ * @pubilc
+ * @param {Object} payload
+ * @param {string} [payload.type] Action type
+ * @param {Object|boolean} [opt] If pass boolean, means opt.silent
+ * @param {boolean} [opt.silent=false] Whether trigger events.
+ * @param {boolean} [opt.flush=undefined]
+ *                  true: Flush immediately, and then pixel in canvas can be fetched
+ *                      immediately. Caution: it might affect performance.
+ *                  false: Not not flush.
+ *                  undefined: Auto decide whether perform flush.
+ */
+echartsProto.dispatchAction = function (payload, opt) {
+    if (!isObject(opt)) {
+        opt = {silent: !!opt};
+    }
+
+    if (!actions[payload.type]) {
+        return;
+    }
+
+    // Avoid dispatch action before setOption. Especially in `connect`.
+    if (!this._model) {
+        return;
+    }
+
+    // May dispatchAction in rendering procedure
+    if (this[IN_MAIN_PROCESS]) {
+        this._pendingActions.push(payload);
+        return;
+    }
+
+    doDispatchAction.call(this, payload, opt.silent);
+
+    if (opt.flush) {
+        this._zr.flush(true);
+    }
+    else if (opt.flush !== false && env$1.browser.weChat) {
+        // In WeChat embeded browser, `requestAnimationFrame` and `setInterval`
+        // hang when sliding page (on touch event), which cause that zr does not
+        // refresh util user interaction finished, which is not expected.
+        // But `dispatchAction` may be called too frequently when pan on touch
+        // screen, which impacts performance if do not throttle them.
+        this._throttledZrFlush();
+    }
+
+    flushPendingActions.call(this, opt.silent);
+
+    triggerUpdatedEvent.call(this, opt.silent);
+};
+
+function doDispatchAction(payload, silent) {
+    var payloadType = payload.type;
+    var escapeConnect = payload.escapeConnect;
+    var actionWrap = actions[payloadType];
+    var actionInfo = actionWrap.actionInfo;
+
+    var cptType = (actionInfo.update || 'update').split(':');
+    var updateMethod = cptType.pop();
+    cptType = cptType[0] != null && parseClassType(cptType[0]);
+
+    this[IN_MAIN_PROCESS] = true;
+
+    var payloads = [payload];
+    var batched = false;
+    // Batch action
+    if (payload.batch) {
+        batched = true;
+        payloads = map(payload.batch, function (item) {
+            item = defaults(extend({}, item), payload);
+            item.batch = null;
+            return item;
+        });
+    }
+
+    var eventObjBatch = [];
+    var eventObj;
+    var isHighDown = payloadType === 'highlight' || payloadType === 'downplay';
+
+    each(payloads, function (batchItem) {
+        // Action can specify the event by return it.
+        eventObj = actionWrap.action(batchItem, this._model, this._api);
+        // Emit event outside
+        eventObj = eventObj || extend({}, batchItem);
+        // Convert type to eventType
+        eventObj.type = actionInfo.event || eventObj.type;
+        eventObjBatch.push(eventObj);
+
+        // light update does not perform data process, layout and visual.
+        if (isHighDown) {
+            // method, payload, mainType, subType
+            updateDirectly(this, updateMethod, batchItem, 'series');
+        }
+        else if (cptType) {
+            updateDirectly(this, updateMethod, batchItem, cptType.main, cptType.sub);
+        }
+    }, this);
+
+    if (updateMethod !== 'none' && !isHighDown && !cptType) {
+        // Still dirty
+        if (this[OPTION_UPDATED]) {
+            // FIXME Pass payload ?
+            prepare(this);
+            updateMethods.update.call(this, payload);
+            this[OPTION_UPDATED] = false;
+        }
+        else {
+            updateMethods[updateMethod].call(this, payload);
+        }
+    }
+
+    // Follow the rule of action batch
+    if (batched) {
+        eventObj = {
+            type: actionInfo.event || payloadType,
+            escapeConnect: escapeConnect,
+            batch: eventObjBatch
+        };
+    }
+    else {
+        eventObj = eventObjBatch[0];
+    }
+
+    this[IN_MAIN_PROCESS] = false;
+
+    !silent && this._messageCenter.trigger(eventObj.type, eventObj);
+}
+
+function flushPendingActions(silent) {
+    var pendingActions = this._pendingActions;
+    while (pendingActions.length) {
+        var payload = pendingActions.shift();
+        doDispatchAction.call(this, payload, silent);
+    }
+}
+
+function triggerUpdatedEvent(silent) {
+    !silent && this.trigger('updated');
+}
+
+/**
+ * Event `rendered` is triggered when zr
+ * rendered. It is useful for realtime
+ * snapshot (reflect animation).
+ *
+ * Event `finished` is triggered when:
+ * (1) zrender rendering finished.
+ * (2) initial animation finished.
+ * (3) progressive rendering finished.
+ * (4) no pending action.
+ * (5) no delayed setOption needs to be processed.
+ */
+function bindRenderedEvent(zr, ecIns) {
+    zr.on('rendered', function () {
+
+        ecIns.trigger('rendered');
+
+        // The `finished` event should not be triggered repeatly,
+        // so it should only be triggered when rendering indeed happend
+        // in zrender. (Consider the case that dipatchAction is keep
+        // triggering when mouse move).
+        if (
+            // Although zr is dirty if initial animation is not finished
+            // and this checking is called on frame, we also check
+            // animation finished for robustness.
+            zr.animation.isFinished()
+            && !ecIns[OPTION_UPDATED]
+            && !ecIns._scheduler.unfinished
+            && !ecIns._pendingActions.length
+        ) {
+            ecIns.trigger('finished');
+        }
+    });
+}
+
+/**
+ * @param {Object} params
+ * @param {number} params.seriesIndex
+ * @param {Array|TypedArray} params.data
+ */
+echartsProto.appendData = function (params) {
+    var seriesIndex = params.seriesIndex;
+    var ecModel = this.getModel();
+    var seriesModel = ecModel.getSeriesByIndex(seriesIndex);
+
+    if (__DEV__) {
+        assert(params.data && seriesModel);
+    }
+
+    seriesModel.appendData(params);
+
+    // Note: `appendData` does not support that update extent of coordinate
+    // system, util some scenario require that. In the expected usage of
+    // `appendData`, the initial extent of coordinate system should better
+    // be fixed by axis `min`/`max` setting or initial data, otherwise if
+    // the extent changed while `appendData`, the location of the painted
+    // graphic elements have to be changed, which make the usage of
+    // `appendData` meaningless.
+
+    this._scheduler.unfinished = true;
+};
+
+/**
+ * Register event
+ * @method
+ */
+echartsProto.on = createRegisterEventWithLowercaseName('on');
+echartsProto.off = createRegisterEventWithLowercaseName('off');
+echartsProto.one = createRegisterEventWithLowercaseName('one');
+
+/**
+ * Prepare view instances of charts and components
+ * @param  {module:echarts/model/Global} ecModel
+ * @private
+ */
+function prepareView(ecIns, type, ecModel, scheduler) {
+    var isComponent = type === 'component';
+    var viewList = isComponent ? ecIns._componentsViews : ecIns._chartsViews;
+    var viewMap = isComponent ? ecIns._componentsMap : ecIns._chartsMap;
+    var zr = ecIns._zr;
+    var api = ecIns._api;
+
+    for (var i = 0; i < viewList.length; i++) {
+        viewList[i].__alive = false;
+    }
+
+    isComponent
+        ? ecModel.eachComponent(function (componentType, model) {
+            componentType !== 'series' && doPrepare(model);
+        })
+        : ecModel.eachSeries(doPrepare);
+
+    function doPrepare(model) {
+        // Consider: id same and type changed.
+        var viewId = '_ec_' + model.id + '_' + model.type;
+        var view = viewMap[viewId];
+        if (!view) {
+            var classType = parseClassType(model.type);
+            var Clazz = isComponent
+                ? Component.getClass(classType.main, classType.sub)
+                : Chart.getClass(classType.sub);
+
+            if (__DEV__) {
+                assert(Clazz, classType.sub + ' does not exist.');
+            }
+
+            view = new Clazz();
+            view.init(ecModel, api);
+            viewMap[viewId] = view;
+            viewList.push(view);
+            zr.add(view.group);
+        }
+
+        model.__viewId = view.__id = viewId;
+        view.__alive = true;
+        view.__model = model;
+        view.group.__ecComponentInfo = {
+            mainType: model.mainType,
+            index: model.componentIndex
+        };
+        !isComponent && scheduler.prepareView(view, model, ecModel, api);
+    }
+
+    for (var i = 0; i < viewList.length;) {
+        var view = viewList[i];
+        if (!view.__alive) {
+            !isComponent && view.renderTask.dispose();
+            zr.remove(view.group);
+            view.dispose(ecModel, api);
+            viewList.splice(i, 1);
+            delete viewMap[view.__id];
+            view.__id = view.group.__ecComponentInfo = null;
+        }
+        else {
+            i++;
+        }
+    }
+}
+
+// /**
+//  * Encode visual infomation from data after data processing
+//  *
+//  * @param {module:echarts/model/Global} ecModel
+//  * @param {object} layout
+//  * @param {boolean} [layoutFilter] `true`: only layout,
+//  *                                 `false`: only not layout,
+//  *                                 `null`/`undefined`: all.
+//  * @param {string} taskBaseTag
+//  * @private
+//  */
+// function startVisualEncoding(ecIns, ecModel, api, payload, layoutFilter) {
+//     each(visualFuncs, function (visual, index) {
+//         var isLayout = visual.isLayout;
+//         if (layoutFilter == null
+//             || (layoutFilter === false && !isLayout)
+//             || (layoutFilter === true && isLayout)
+//         ) {
+//             visual.func(ecModel, api, payload);
+//         }
+//     });
+// }
+
+function clearColorPalette(ecModel) {
+    ecModel.clearColorPalette();
+    ecModel.eachSeries(function (seriesModel) {
+        seriesModel.clearColorPalette();
+    });
+}
+
+function render(ecIns, ecModel, api, payload) {
+
+    renderComponents(ecIns, ecModel, api, payload);
+
+    each(ecIns._chartsViews, function (chart) {
+        chart.__alive = false;
+    });
+
+    renderSeries(ecIns, ecModel, api, payload);
+
+    // Remove groups of unrendered charts
+    each(ecIns._chartsViews, function (chart) {
+        if (!chart.__alive) {
+            chart.remove(ecModel, api);
+        }
+    });
+}
+
+function renderComponents(ecIns, ecModel, api, payload, dirtyList) {
+    each(dirtyList || ecIns._componentsViews, function (componentView) {
+        var componentModel = componentView.__model;
+        componentView.render(componentModel, ecModel, api, payload);
+
+        updateZ(componentModel, componentView);
+    });
+}
+
+/**
+ * Render each chart and component
+ * @private
+ */
+function renderSeries(ecIns, ecModel, api, payload, dirtyMap) {
+    // Render all charts
+    var scheduler = ecIns._scheduler;
+    var unfinished;
+    ecModel.eachSeries(function (seriesModel) {
+        var chartView = ecIns._chartsMap[seriesModel.__viewId];
+        chartView.__alive = true;
+
+        var renderTask = chartView.renderTask;
+        scheduler.updatePayload(renderTask, payload);
+
+        if (dirtyMap && dirtyMap.get(seriesModel.uid)) {
+            renderTask.dirty();
+        }
+
+        unfinished |= renderTask.perform(scheduler.getPerformArgs(renderTask));
+
+        chartView.group.silent = !!seriesModel.get('silent');
+
+        updateZ(seriesModel, chartView);
+
+        updateBlend(seriesModel, chartView);
+    });
+    scheduler.unfinished |= unfinished;
+
+    // If use hover layer
+    updateHoverLayerStatus(ecIns._zr, ecModel);
+
+    // Add aria
+    aria(ecIns._zr.dom, ecModel);
+}
+
+function performPostUpdateFuncs(ecModel, api) {
+    each(postUpdateFuncs, function (func) {
+        func(ecModel, api);
+    });
+}
+
+
+var MOUSE_EVENT_NAMES = [
+    'click', 'dblclick', 'mouseover', 'mouseout', 'mousemove',
+    'mousedown', 'mouseup', 'globalout', 'contextmenu'
+];
+
+/**
+ * @private
+ */
+echartsProto._initEvents = function () {
+    each(MOUSE_EVENT_NAMES, function (eveName) {
+        this._zr.on(eveName, function (e) {
+            var ecModel = this.getModel();
+            var el = e.target;
+            var params;
+
+            // no e.target when 'globalout'.
+            if (eveName === 'globalout') {
+                params = {};
+            }
+            else if (el && el.dataIndex != null) {
+                var dataModel = el.dataModel || ecModel.getSeriesByIndex(el.seriesIndex);
+                params = dataModel && dataModel.getDataParams(el.dataIndex, el.dataType) || {};
+            }
+            // If element has custom eventData of components
+            else if (el && el.eventData) {
+                params = extend({}, el.eventData);
+            }
+
+            if (params) {
+                params.event = e;
+                params.type = eveName;
+                this.trigger(eveName, params);
+            }
+
+        }, this);
+    }, this);
+
+    each(eventActionMap, function (actionType, eventType) {
+        this._messageCenter.on(eventType, function (event) {
+            this.trigger(eventType, event);
+        }, this);
+    }, this);
+};
+
+/**
+ * @return {boolean}
+ */
+echartsProto.isDisposed = function () {
+    return this._disposed;
+};
+
+/**
+ * Clear
+ */
+echartsProto.clear = function () {
+    this.setOption({ series: [] }, true);
+};
+
+/**
+ * Dispose instance
+ */
+echartsProto.dispose = function () {
+    if (this._disposed) {
+        if (__DEV__) {
+            console.warn('Instance ' + this.id + ' has been disposed');
+        }
+        return;
+    }
+    this._disposed = true;
+
+    setAttribute(this.getDom(), DOM_ATTRIBUTE_KEY, '');
+
+    var api = this._api;
+    var ecModel = this._model;
+
+    each(this._componentsViews, function (component) {
+        component.dispose(ecModel, api);
+    });
+    each(this._chartsViews, function (chart) {
+        chart.dispose(ecModel, api);
+    });
+
+    // Dispose after all views disposed
+    this._zr.dispose();
+
+    delete instances[this.id];
+};
+
+mixin(ECharts, Eventful);
+
+function updateHoverLayerStatus(zr, ecModel) {
+    var storage = zr.storage;
+    var elCount = 0;
+    storage.traverse(function (el) {
+        if (!el.isGroup) {
+            elCount++;
+        }
+    });
+    if (elCount > ecModel.get('hoverLayerThreshold') && !env$1.node) {
+        storage.traverse(function (el) {
+            if (!el.isGroup) {
+                // Don't switch back.
+                el.useHoverLayer = true;
+            }
+        });
+    }
+}
+
+/**
+ * Update chart progressive and blend.
+ * @param {module:echarts/model/Series|module:echarts/model/Component} model
+ * @param {module:echarts/view/Component|module:echarts/view/Chart} view
+ */
+function updateBlend(seriesModel, chartView) {
+    var blendMode = seriesModel.get('blendMode') || null;
+    if (__DEV__) {
+        if (!env$1.canvasSupported && blendMode && blendMode !== 'source-over') {
+            console.warn('Only canvas support blendMode');
+        }
+    }
+    chartView.group.traverse(function (el) {
+        // FIXME marker and other components
+        if (!el.isGroup) {
+            // Only set if blendMode is changed. In case element is incremental and don't wan't to rerender.
+            if (el.style.blend !== blendMode) {
+                el.setStyle('blend', blendMode);
+            }
+        }
+        if (el.eachPendingDisplayable) {
+            el.eachPendingDisplayable(function (displayable) {
+                displayable.setStyle('blend', blendMode);
+            });
+        }
+    });
+}
+
+/**
+ * @param {module:echarts/model/Series|module:echarts/model/Component} model
+ * @param {module:echarts/view/Component|module:echarts/view/Chart} view
+ */
+function updateZ(model, view) {
+    var z = model.get('z');
+    var zlevel = model.get('zlevel');
+    // Set z and zlevel
+    view.group.traverse(function (el) {
+        if (el.type !== 'group') {
+            z != null && (el.z = z);
+            zlevel != null && (el.zlevel = zlevel);
+        }
+    });
+}
+
+function createExtensionAPI(ecInstance) {
+    var coordSysMgr = ecInstance._coordSysMgr;
+    return extend(new ExtensionAPI(ecInstance), {
+        // Inject methods
+        getCoordinateSystems: bind(
+            coordSysMgr.getCoordinateSystems, coordSysMgr
+        ),
+        getComponentByElement: function (el) {
+            while (el) {
+                var modelInfo = el.__ecComponentInfo;
+                if (modelInfo != null) {
+                    return ecInstance._model.getComponent(modelInfo.mainType, modelInfo.index);
+                }
+                el = el.parent;
+            }
+        }
+    });
+}
+
+/**
+ * @type {Object} key: actionType.
+ * @inner
+ */
+var actions = {};
+
+/**
+ * Map eventType to actionType
+ * @type {Object}
+ */
+var eventActionMap = {};
+
+/**
+ * Data processor functions of each stage
+ * @type {Array.<Object.<string, Function>>}
+ * @inner
+ */
+var dataProcessorFuncs = [];
+
+/**
+ * @type {Array.<Function>}
+ * @inner
+ */
+var optionPreprocessorFuncs = [];
+
+/**
+ * @type {Array.<Function>}
+ * @inner
+ */
+var postUpdateFuncs = [];
+
+/**
+ * Visual encoding functions of each stage
+ * @type {Array.<Object.<string, Function>>}
+ */
+var visualFuncs = [];
+
+/**
+ * Theme storage
+ * @type {Object.<key, Object>}
+ */
+var themeStorage = {};
+/**
+ * Loading effects
+ */
+var loadingEffects = {};
+
+var instances = {};
+var connectedGroups = {};
+
+var idBase = new Date() - 0;
+var groupIdBase = new Date() - 0;
+var DOM_ATTRIBUTE_KEY = '_echarts_instance_';
+
+var mapDataStores = {};
+
+function enableConnect(chart) {
+    var STATUS_PENDING = 0;
+    var STATUS_UPDATING = 1;
+    var STATUS_UPDATED = 2;
+    var STATUS_KEY = '__connectUpdateStatus';
+
+    function updateConnectedChartsStatus(charts, status) {
+        for (var i = 0; i < charts.length; i++) {
+            var otherChart = charts[i];
+            otherChart[STATUS_KEY] = status;
+        }
+    }
+
+    each(eventActionMap, function (actionType, eventType) {
+        chart._messageCenter.on(eventType, function (event) {
+            if (connectedGroups[chart.group] && chart[STATUS_KEY] !== STATUS_PENDING) {
+                if (event && event.escapeConnect) {
+                    return;
+                }
+
+                var action = chart.makeActionFromEvent(event);
+                var otherCharts = [];
+
+                each(instances, function (otherChart) {
+                    if (otherChart !== chart && otherChart.group === chart.group) {
+                        otherCharts.push(otherChart);
+                    }
+                });
+
+                updateConnectedChartsStatus(otherCharts, STATUS_PENDING);
+                each(otherCharts, function (otherChart) {
+                    if (otherChart[STATUS_KEY] !== STATUS_UPDATING) {
+                        otherChart.dispatchAction(action);
+                    }
+                });
+                updateConnectedChartsStatus(otherCharts, STATUS_UPDATED);
+            }
+        });
+    });
+}
+
+/**
+ * @param {HTMLElement} dom
+ * @param {Object} [theme]
+ * @param {Object} opts
+ * @param {number} [opts.devicePixelRatio] Use window.devicePixelRatio by default
+ * @param {string} [opts.renderer] Currently only 'canvas' is supported.
+ * @param {number} [opts.width] Use clientWidth of the input `dom` by default.
+ *                              Can be 'auto' (the same as null/undefined)
+ * @param {number} [opts.height] Use clientHeight of the input `dom` by default.
+ *                               Can be 'auto' (the same as null/undefined)
+ */
+function init(dom, theme$$1, opts) {
+    if (__DEV__) {
+        // Check version
+        if ((version$1.replace('.', '') - 0) < (dependencies.zrender.replace('.', '') - 0)) {
+            throw new Error(
+                'zrender/src ' + version$1
+                + ' is too old for ECharts ' + version
+                + '. Current version need ZRender '
+                + dependencies.zrender + '+'
+            );
+        }
+
+        if (!dom) {
+            throw new Error('Initialize failed: invalid dom.');
+        }
+    }
+
+    var existInstance = getInstanceByDom(dom);
+    if (existInstance) {
+        if (__DEV__) {
+            console.warn('There is a chart instance already initialized on the dom.');
+        }
+        return existInstance;
+    }
+
+    if (__DEV__) {
+        if (isDom(dom)
+            && dom.nodeName.toUpperCase() !== 'CANVAS'
+            && (
+                (!dom.clientWidth && (!opts || opts.width == null))
+                || (!dom.clientHeight && (!opts || opts.height == null))
+            )
+        ) {
+            console.warn('Can\'t get dom width or height');
+        }
+    }
+
+    var chart = new ECharts(dom, theme$$1, opts);
+    chart.id = 'ec_' + idBase++;
+    instances[chart.id] = chart;
+
+    setAttribute(dom, DOM_ATTRIBUTE_KEY, chart.id);
+
+    enableConnect(chart);
+
+    return chart;
+}
+
+/**
+ * @return {string|Array.<module:echarts~ECharts>} groupId
+ */
+function connect(groupId) {
+    // Is array of charts
+    if (isArray(groupId)) {
+        var charts = groupId;
+        groupId = null;
+        // If any chart has group
+        each(charts, function (chart) {
+            if (chart.group != null) {
+                groupId = chart.group;
+            }
+        });
+        groupId = groupId || ('g_' + groupIdBase++);
+        each(charts, function (chart) {
+            chart.group = groupId;
+        });
+    }
+    connectedGroups[groupId] = true;
+    return groupId;
+}
+
+/**
+ * @DEPRECATED
+ * @return {string} groupId
+ */
+function disConnect(groupId) {
+    connectedGroups[groupId] = false;
+}
+
+/**
+ * @return {string} groupId
+ */
+var disconnect = disConnect;
+
+/**
+ * Dispose a chart instance
+ * @param  {module:echarts~ECharts|HTMLDomElement|string} chart
+ */
+function dispose(chart) {
+    if (typeof chart === 'string') {
+        chart = instances[chart];
+    }
+    else if (!(chart instanceof ECharts)){
+        // Try to treat as dom
+        chart = getInstanceByDom(chart);
+    }
+    if ((chart instanceof ECharts) && !chart.isDisposed()) {
+        chart.dispose();
+    }
+}
+
+/**
+ * @param  {HTMLElement} dom
+ * @return {echarts~ECharts}
+ */
+function getInstanceByDom(dom) {
+    return instances[getAttribute(dom, DOM_ATTRIBUTE_KEY)];
+}
+
+/**
+ * @param {string} key
+ * @return {echarts~ECharts}
+ */
+function getInstanceById(key) {
+    return instances[key];
+}
+
+/**
+ * Register theme
+ */
+function registerTheme(name, theme$$1) {
+    themeStorage[name] = theme$$1;
+}
+
+/**
+ * Register option preprocessor
+ * @param {Function} preprocessorFunc
+ */
+function registerPreprocessor(preprocessorFunc) {
+    optionPreprocessorFuncs.push(preprocessorFunc);
+}
+
+/**
+ * @param {number} [priority=1000]
+ * @param {Object|Function} processor
+ */
+function registerProcessor(priority, processor) {
+    normalizeRegister(dataProcessorFuncs, priority, processor, PRIORITY_PROCESSOR_FILTER);
+}
+
+/**
+ * Register postUpdater
+ * @param {Function} postUpdateFunc
+ */
+function registerPostUpdate(postUpdateFunc) {
+    postUpdateFuncs.push(postUpdateFunc);
+}
+
+/**
+ * Usage:
+ * registerAction('someAction', 'someEvent', function () { ... });
+ * registerAction('someAction', function () { ... });
+ * registerAction(
+ *     {type: 'someAction', event: 'someEvent', update: 'updateView'},
+ *     function () { ... }
+ * );
+ *
+ * @param {(string|Object)} actionInfo
+ * @param {string} actionInfo.type
+ * @param {string} [actionInfo.event]
+ * @param {string} [actionInfo.update]
+ * @param {string} [eventName]
+ * @param {Function} action
+ */
+function registerAction(actionInfo, eventName, action) {
+    if (typeof eventName === 'function') {
+        action = eventName;
+        eventName = '';
+    }
+    var actionType = isObject(actionInfo)
+        ? actionInfo.type
+        : ([actionInfo, actionInfo = {
+            event: eventName
+        }][0]);
+
+    // Event name is all lowercase
+    actionInfo.event = (actionInfo.event || actionType).toLowerCase();
+    eventName = actionInfo.event;
+
+    // Validate action type and event name.
+    assert(ACTION_REG.test(actionType) && ACTION_REG.test(eventName));
+
+    if (!actions[actionType]) {
+        actions[actionType] = {action: action, actionInfo: actionInfo};
+    }
+    eventActionMap[eventName] = actionType;
+}
+
+/**
+ * @param {string} type
+ * @param {*} CoordinateSystem
+ */
+function registerCoordinateSystem(type, CoordinateSystem$$1) {
+    CoordinateSystemManager.register(type, CoordinateSystem$$1);
+}
+
+/**
+ * Get dimensions of specified coordinate system.
+ * @param {string} type
+ * @return {Array.<string|Object>}
+ */
+function getCoordinateSystemDimensions(type) {
+    var coordSysCreator = CoordinateSystemManager.get(type);
+    if (coordSysCreator) {
+        return coordSysCreator.getDimensionsInfo
+                ? coordSysCreator.getDimensionsInfo()
+                : coordSysCreator.dimensions.slice();
+    }
+}
+
+/**
+ * Layout is a special stage of visual encoding
+ * Most visual encoding like color are common for different chart
+ * But each chart has it's own layout algorithm
+ *
+ * @param {number} [priority=1000]
+ * @param {Function} layoutTask
+ */
+function registerLayout(priority, layoutTask) {
+    normalizeRegister(visualFuncs, priority, layoutTask, PRIORITY_VISUAL_LAYOUT, 'layout');
+}
+
+/**
+ * @param {number} [priority=3000]
+ * @param {module:echarts/stream/Task} visualTask
+ */
+function registerVisual(priority, visualTask) {
+    normalizeRegister(visualFuncs, priority, visualTask, PRIORITY_VISUAL_CHART, 'visual');
+}
+
+/**
+ * @param {Object|Function} fn: {seriesType, createOnAllSeries, performRawSeries, reset}
+ */
+function normalizeRegister(targetList, priority, fn, defaultPriority, visualType) {
+    if (isFunction(priority) || isObject(priority)) {
+        fn = priority;
+        priority = defaultPriority;
+    }
+
+    if (__DEV__) {
+        if (isNaN(priority) || priority == null) {
+            throw new Error('Illegal priority');
+        }
+        // Check duplicate
+        each(targetList, function (wrap) {
+            assert(wrap.__raw !== fn);
+        });
+    }
+
+    var stageHandler = Scheduler.wrapStageHandler(fn, visualType);
+
+    stageHandler.__prio = priority;
+    stageHandler.__raw = fn;
+    targetList.push(stageHandler);
+
+    return stageHandler;
+}
+
+/**
+ * @param {string} name
+ */
+function registerLoading(name, loadingFx) {
+    loadingEffects[name] = loadingFx;
+}
+
+/**
+ * @param {Object} opts
+ * @param {string} [superClass]
+ */
+function extendComponentModel(opts/*, superClass*/) {
+    // var Clazz = ComponentModel;
+    // if (superClass) {
+    //     var classType = parseClassType(superClass);
+    //     Clazz = ComponentModel.getClass(classType.main, classType.sub, true);
+    // }
+    return ComponentModel.extend(opts);
+}
+
+/**
+ * @param {Object} opts
+ * @param {string} [superClass]
+ */
+function extendComponentView(opts/*, superClass*/) {
+    // var Clazz = ComponentView;
+    // if (superClass) {
+    //     var classType = parseClassType(superClass);
+    //     Clazz = ComponentView.getClass(classType.main, classType.sub, true);
+    // }
+    return Component.extend(opts);
+}
+
+/**
+ * @param {Object} opts
+ * @param {string} [superClass]
+ */
+function extendSeriesModel(opts/*, superClass*/) {
+    // var Clazz = SeriesModel;
+    // if (superClass) {
+    //     superClass = 'series.' + superClass.replace('series.', '');
+    //     var classType = parseClassType(superClass);
+    //     Clazz = ComponentModel.getClass(classType.main, classType.sub, true);
+    // }
+    return SeriesModel.extend(opts);
+}
+
+/**
+ * @param {Object} opts
+ * @param {string} [superClass]
+ */
+function extendChartView(opts/*, superClass*/) {
+    // var Clazz = ChartView;
+    // if (superClass) {
+    //     superClass = superClass.replace('series.', '');
+    //     var classType = parseClassType(superClass);
+    //     Clazz = ChartView.getClass(classType.main, true);
+    // }
+    return Chart.extend(opts);
+}
+
+/**
+ * ZRender need a canvas context to do measureText.
+ * But in node environment canvas may be created by node-canvas.
+ * So we need to specify how to create a canvas instead of using document.createElement('canvas')
+ *
+ * Be careful of using it in the browser.
+ *
+ * @param {Function} creator
+ * @example
+ *     var Canvas = require('canvas');
+ *     var echarts = require('echarts');
+ *     echarts.setCanvasCreator(function () {
+ *         // Small size is enough.
+ *         return new Canvas(32, 32);
+ *     });
+ */
+function setCanvasCreator(creator) {
+    $override('createCanvas', creator);
+}
+
+/**
+ * @param {string} mapName
+ * @param {Object|string} geoJson
+ * @param {Object} [specialAreas]
+ *
+ * @example
+ *     $.get('USA.json', function (geoJson) {
+ *         echarts.registerMap('USA', geoJson);
+ *         // Or
+ *         echarts.registerMap('USA', {
+ *             geoJson: geoJson,
+ *             specialAreas: {}
+ *         })
+ *     });
+ */
+function registerMap(mapName, geoJson, specialAreas) {
+    if (geoJson.geoJson && !geoJson.features) {
+        specialAreas = geoJson.specialAreas;
+        geoJson = geoJson.geoJson;
+    }
+    if (typeof geoJson === 'string') {
+        geoJson = (typeof JSON !== 'undefined' && JSON.parse)
+            ? JSON.parse(geoJson) : (new Function('return (' + geoJson + ');'))();
+    }
+    mapDataStores[mapName] = {
+        geoJson: geoJson,
+        specialAreas: specialAreas
+    };
+}
+
+/**
+ * @param {string} mapName
+ * @return {Object}
+ */
+function getMap(mapName) {
+    return mapDataStores[mapName];
+}
+
+registerVisual(PRIORITY_VISUAL_GLOBAL, seriesColor);
+registerPreprocessor(backwardCompat);
+registerProcessor(PRIORITY_PROCESSOR_STATISTIC, dataStack);
+registerLoading('default', loadingDefault);
+
+// Default actions
+
+registerAction({
+    type: 'highlight',
+    event: 'highlight',
+    update: 'highlight'
+}, noop);
+
+registerAction({
+    type: 'downplay',
+    event: 'downplay',
+    update: 'downplay'
+}, noop);
+
+// Default theme
+registerTheme('light', lightTheme);
+registerTheme('dark', theme);
+
+// For backward compatibility, where the namespace `dataTool` will
+// be mounted on `echarts` is the extension `dataTool` is imported.
+var dataTool = {};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+function defaultKeyGetter(item) {
+    return item;
+}
+
+/**
+ * @param {Array} oldArr
+ * @param {Array} newArr
+ * @param {Function} oldKeyGetter
+ * @param {Function} newKeyGetter
+ * @param {Object} [context] Can be visited by this.context in callback.
+ */
+function DataDiffer(oldArr, newArr, oldKeyGetter, newKeyGetter, context) {
+    this._old = oldArr;
+    this._new = newArr;
+
+    this._oldKeyGetter = oldKeyGetter || defaultKeyGetter;
+    this._newKeyGetter = newKeyGetter || defaultKeyGetter;
+
+    this.context = context;
+}
+
+DataDiffer.prototype = {
+
+    constructor: DataDiffer,
+
+    /**
+     * Callback function when add a data
+     */
+    add: function (func) {
+        this._add = func;
+        return this;
+    },
+
+    /**
+     * Callback function when update a data
+     */
+    update: function (func) {
+        this._update = func;
+        return this;
+    },
+
+    /**
+     * Callback function when remove a data
+     */
+    remove: function (func) {
+        this._remove = func;
+        return this;
+    },
+
+    execute: function () {
+        var oldArr = this._old;
+        var newArr = this._new;
+
+        var oldDataIndexMap = {};
+        var newDataIndexMap = {};
+        var oldDataKeyArr = [];
+        var newDataKeyArr = [];
+        var i;
+
+        initIndexMap(oldArr, oldDataIndexMap, oldDataKeyArr, '_oldKeyGetter', this);
+        initIndexMap(newArr, newDataIndexMap, newDataKeyArr, '_newKeyGetter', this);
+
+        // Travel by inverted order to make sure order consistency
+        // when duplicate keys exists (consider newDataIndex.pop() below).
+        // For performance consideration, these code below do not look neat.
+        for (i = 0; i < oldArr.length; i++) {
+            var key = oldDataKeyArr[i];
+            var idx = newDataIndexMap[key];
+
+            // idx can never be empty array here. see 'set null' logic below.
+            if (idx != null) {
+                // Consider there is duplicate key (for example, use dataItem.name as key).
+                // We should make sure every item in newArr and oldArr can be visited.
+                var len = idx.length;
+                if (len) {
+                    len === 1 && (newDataIndexMap[key] = null);
+                    idx = idx.unshift();
+                }
+                else {
+                    newDataIndexMap[key] = null;
+                }
+                this._update && this._update(idx, i);
+            }
+            else {
+                this._remove && this._remove(i);
+            }
+        }
+
+        for (var i = 0; i < newDataKeyArr.length; i++) {
+            var key = newDataKeyArr[i];
+            if (newDataIndexMap.hasOwnProperty(key)) {
+                var idx = newDataIndexMap[key];
+                if (idx == null) {
+                    continue;
+                }
+                // idx can never be empty array here. see 'set null' logic above.
+                if (!idx.length) {
+                    this._add && this._add(idx);
+                }
+                else {
+                    for (var j = 0, len = idx.length; j < len; j++) {
+                        this._add && this._add(idx[j]);
+                    }
+                }
+            }
+        }
+    }
+};
+
+function initIndexMap(arr, map, keyArr, keyGetterName, dataDiffer) {
+    for (var i = 0; i < arr.length; i++) {
+        // Add prefix to avoid conflict with Object.prototype.
+        var key = '_ec_' + dataDiffer[keyGetterName](arr[i], i);
+        var existence = map[key];
+        if (existence == null) {
+            keyArr.push(key);
+            map[key] = i;
+        }
+        else {
+            if (!existence.length) {
+                map[key] = existence = [existence];
+            }
+            existence.push(i);
+        }
+    }
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var OTHER_DIMENSIONS = createHashMap([
+    'tooltip', 'label', 'itemName', 'itemId', 'seriesName'
+]);
+
+function summarizeDimensions(data) {
+    var summary = {};
+    var encode = summary.encode = {};
+    var notExtraCoordDimMap = createHashMap();
+    var defaultedLabel = [];
+    var defaultedTooltip = [];
+
+    each$1(data.dimensions, function (dimName) {
+        var dimItem = data.getDimensionInfo(dimName);
+
+        var coordDim = dimItem.coordDim;
+        if (coordDim) {
+            if (__DEV__) {
+                assert$1(OTHER_DIMENSIONS.get(coordDim) == null);
+            }
+            var coordDimArr = encode[coordDim];
+            if (!encode.hasOwnProperty(coordDim)) {
+                coordDimArr = encode[coordDim] = [];
+            }
+            coordDimArr[dimItem.coordDimIndex] = dimName;
+
+            if (!dimItem.isExtraCoord) {
+                notExtraCoordDimMap.set(coordDim, 1);
+
+                // Use the last coord dim (and label friendly) as default label,
+                // because when dataset is used, it is hard to guess which dimension
+                // can be value dimension. If both show x, y on label is not look good,
+                // and conventionally y axis is focused more.
+                if (mayLabelDimType(dimItem.type)) {
+                    defaultedLabel[0] = dimName;
+                }
+            }
+            if (dimItem.defaultTooltip) {
+                defaultedTooltip.push(dimName);
+            }
+        }
+
+        OTHER_DIMENSIONS.each(function (v, otherDim) {
+            var otherDimArr = encode[otherDim];
+            if (!encode.hasOwnProperty(otherDim)) {
+                otherDimArr = encode[otherDim] = [];
+            }
+
+            var dimIndex = dimItem.otherDims[otherDim];
+            if (dimIndex != null && dimIndex !== false) {
+                otherDimArr[dimIndex] = dimItem.name;
+            }
+        });
+    });
+
+    var dataDimsOnCoord = [];
+    var encodeFirstDimNotExtra = {};
+
+    notExtraCoordDimMap.each(function (v, coordDim) {
+        var dimArr = encode[coordDim];
+        // ??? FIXME extra coord should not be set in dataDimsOnCoord.
+        // But should fix the case that radar axes: simplify the logic
+        // of `completeDimension`, remove `extraPrefix`.
+        encodeFirstDimNotExtra[coordDim] = dimArr[0];
+        // Not necessary to remove duplicate, because a data
+        // dim canot on more than one coordDim.
+        dataDimsOnCoord = dataDimsOnCoord.concat(dimArr);
+    });
+
+    summary.dataDimsOnCoord = dataDimsOnCoord;
+    summary.encodeFirstDimNotExtra = encodeFirstDimNotExtra;
+
+    var encodeLabel = encode.label;
+    // FIXME `encode.label` is not recommanded, because formatter can not be set
+    // in this way. Use label.formatter instead. May be remove this approach someday.
+    if (encodeLabel && encodeLabel.length) {
+        defaultedLabel = encodeLabel.slice();
+    }
+
+    var encodeTooltip = encode.tooltip;
+    if (encodeTooltip && encodeTooltip.length) {
+        defaultedTooltip = encodeTooltip.slice();
+    }
+    else if (!defaultedTooltip.length) {
+        defaultedTooltip = defaultedLabel.slice();
+    }
+
+    encode.defaultedLabel = defaultedLabel;
+    encode.defaultedTooltip = defaultedTooltip;
+
+    return summary;
+}
+
+function getDimensionTypeByAxis(axisType) {
+    return axisType === 'category'
+        ? 'ordinal'
+        : axisType === 'time'
+        ? 'time'
+        : 'float';
+}
+
+function mayLabelDimType(dimType) {
+    // In most cases, ordinal and time do not suitable for label.
+    // Ordinal info can be displayed on axis. Time is too long.
+    return !(dimType === 'ordinal' || dimType === 'time');
+}
+
+// function findTheLastDimMayLabel(data) {
+//     // Get last value dim
+//     var dimensions = data.dimensions.slice();
+//     var valueType;
+//     var valueDim;
+//     while (dimensions.length && (
+//         valueDim = dimensions.pop(),
+//         valueType = data.getDimensionInfo(valueDim).type,
+//         valueType === 'ordinal' || valueType === 'time'
+//     )) {} // jshint ignore:line
+//     return valueDim;
+// }
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * List for data storage
+ * @module echarts/data/List
+ */
+
+var isObject$4 = isObject$1;
+
+var UNDEFINED = 'undefined';
+
+// Use prefix to avoid index to be the same as otherIdList[idx],
+// which will cause weird udpate animation.
+var ID_PREFIX = 'e\0\0';
+
+var dataCtors = {
+    'float': typeof Float64Array === UNDEFINED
+        ? Array : Float64Array,
+    'int': typeof Int32Array === UNDEFINED
+        ? Array : Int32Array,
+    // Ordinal data type can be string or int
+    'ordinal': Array,
+    'number': Array,
+    'time': Array
+};
+
+// Caution: MUST not use `new CtorUint32Array(arr, 0, len)`, because the Ctor of array is
+// different from the Ctor of typed array.
+var CtorUint32Array = typeof Uint32Array === UNDEFINED ? Array : Uint32Array;
+var CtorUint16Array = typeof Uint16Array === UNDEFINED ? Array : Uint16Array;
+
+function getIndicesCtor(list) {
+    // The possible max value in this._indicies is always this._rawCount despite of filtering.
+    return list._rawCount > 65535 ? CtorUint32Array : CtorUint16Array;
+}
+
+function cloneChunk(originalChunk) {
+    var Ctor = originalChunk.constructor;
+    // Only shallow clone is enough when Array.
+    return Ctor === Array ? originalChunk.slice() : new Ctor(originalChunk);
+}
+
+var TRANSFERABLE_PROPERTIES = [
+    'hasItemOption', '_nameList', '_idList', '_invertedIndicesMap',
+    '_rawData', '_chunkSize', '_chunkCount', '_dimValueGetter',
+    '_count', '_rawCount', '_nameDimIdx', '_idDimIdx'
+];
+var CLONE_PROPERTIES = [
+    '_extent', '_approximateExtent', '_rawExtent'
+];
+
+function transferProperties(target, source) {
+    each$1(TRANSFERABLE_PROPERTIES.concat(source.__wrappedMethods || []), function (propName) {
+        if (source.hasOwnProperty(propName)) {
+            target[propName] = source[propName];
+        }
+    });
+
+    target.__wrappedMethods = source.__wrappedMethods;
+
+    each$1(CLONE_PROPERTIES, function (propName) {
+        target[propName] = clone(source[propName]);
+    });
+
+    target._calculationInfo = extend(source._calculationInfo);
+}
+
+
+
+
+
+/**
+ * @constructor
+ * @alias module:echarts/data/List
+ *
+ * @param {Array.<string|Object>} dimensions
+ *      For example, ['someDimName', {name: 'someDimName', type: 'someDimType'}, ...].
+ *      Dimensions should be concrete names like x, y, z, lng, lat, angle, radius
+ *      Spetial fields: {
+ *          ordinalMeta: <module:echarts/data/OrdinalMeta>
+ *          createInvertedIndices: <boolean>
+ *      }
+ * @param {module:echarts/model/Model} hostModel
+ */
+var List = function (dimensions, hostModel) {
+
+    dimensions = dimensions || ['x', 'y'];
+
+    var dimensionInfos = {};
+    var dimensionNames = [];
+    var invertedIndicesMap = {};
+
+    for (var i = 0; i < dimensions.length; i++) {
+        // Use the original dimensions[i], where other flag props may exists.
+        var dimensionInfo = dimensions[i];
+
+        if (isString(dimensionInfo)) {
+            dimensionInfo = {name: dimensionInfo};
+        }
+
+        var dimensionName = dimensionInfo.name;
+        dimensionInfo.type = dimensionInfo.type || 'float';
+        if (!dimensionInfo.coordDim) {
+            dimensionInfo.coordDim = dimensionName;
+            dimensionInfo.coordDimIndex = 0;
+        }
+
+        dimensionInfo.otherDims = dimensionInfo.otherDims || {};
+        dimensionNames.push(dimensionName);
+        dimensionInfos[dimensionName] = dimensionInfo;
+
+        dimensionInfo.index = i;
+
+        if (dimensionInfo.createInvertedIndices) {
+            invertedIndicesMap[dimensionName] = [];
+        }
+    }
+
+    /**
+     * @readOnly
+     * @type {Array.<string>}
+     */
+    this.dimensions = dimensionNames;
+
+    /**
+     * Infomation of each data dimension, like data type.
+     * @type {Object}
+     */
+    this._dimensionInfos = dimensionInfos;
+
+    /**
+     * @type {module:echarts/model/Model}
+     */
+    this.hostModel = hostModel;
+
+    /**
+     * @type {module:echarts/model/Model}
+     */
+    this.dataType;
+
+    /**
+     * Indices stores the indices of data subset after filtered.
+     * This data subset will be used in chart.
+     * @type {Array.<number>}
+     * @readOnly
+     */
+    this._indices = null;
+
+    this._count = 0;
+    this._rawCount = 0;
+
+    /**
+     * Data storage
+     * @type {Object.<key, Array.<TypedArray|Array>>}
+     * @private
+     */
+    this._storage = {};
+
+    /**
+     * @type {Array.<string>}
+     */
+    this._nameList = [];
+    /**
+     * @type {Array.<string>}
+     */
+    this._idList = [];
+
+    /**
+     * Models of data option is stored sparse for optimizing memory cost
+     * @type {Array.<module:echarts/model/Model>}
+     * @private
+     */
+    this._optionModels = [];
+
+    /**
+     * Global visual properties after visual coding
+     * @type {Object}
+     * @private
+     */
+    this._visual = {};
+
+    /**
+     * Globel layout properties.
+     * @type {Object}
+     * @private
+     */
+    this._layout = {};
+
+    /**
+     * Item visual properties after visual coding
+     * @type {Array.<Object>}
+     * @private
+     */
+    this._itemVisuals = [];
+
+    /**
+     * Key: visual type, Value: boolean
+     * @type {Object}
+     * @readOnly
+     */
+    this.hasItemVisual = {};
+
+    /**
+     * Item layout properties after layout
+     * @type {Array.<Object>}
+     * @private
+     */
+    this._itemLayouts = [];
+
+    /**
+     * Graphic elemnents
+     * @type {Array.<module:zrender/Element>}
+     * @private
+     */
+    this._graphicEls = [];
+
+    /**
+     * Max size of each chunk.
+     * @type {number}
+     * @private
+     */
+    this._chunkSize = 1e5;
+
+    /**
+     * @type {number}
+     * @private
+     */
+    this._chunkCount = 0;
+
+    /**
+     * @type {Array.<Array|Object>}
+     * @private
+     */
+    this._rawData;
+
+    /**
+     * Raw extent will not be cloned, but only transfered.
+     * It will not be calculated util needed.
+     * key: dim,
+     * value: {end: number, extent: Array.<number>}
+     * @type {Object}
+     * @private
+     */
+    this._rawExtent = {};
+
+    /**
+     * @type {Object}
+     * @private
+     */
+    this._extent = {};
+
+    /**
+     * key: dim
+     * value: extent
+     * @type {Object}
+     * @private
+     */
+    this._approximateExtent = {};
+
+    /**
+     * Cache summary info for fast visit. See "dimensionHelper".
+     * @type {Object}
+     * @private
+     */
+    this._dimensionsSummary = summarizeDimensions(this);
+
+    /**
+     * @type {Object.<Array|TypedArray>}
+     * @private
+     */
+    this._invertedIndicesMap = invertedIndicesMap;
+
+    /**
+     * @type {Object}
+     * @private
+     */
+    this._calculationInfo = {};
+};
+
+var listProto = List.prototype;
+
+listProto.type = 'list';
+
+/**
+ * If each data item has it's own option
+ * @type {boolean}
+ */
+listProto.hasItemOption = true;
+
+/**
+ * Get dimension name
+ * @param {string|number} dim
+ *        Dimension can be concrete names like x, y, z, lng, lat, angle, radius
+ *        Or a ordinal number. For example getDimensionInfo(0) will return 'x' or 'lng' or 'radius'
+ * @return {string} Concrete dim name.
+ */
+listProto.getDimension = function (dim) {
+    if (!isNaN(dim)) {
+        dim = this.dimensions[dim] || dim;
+    }
+    return dim;
+};
+
+/**
+ * Get type and calculation info of particular dimension
+ * @param {string|number} dim
+ *        Dimension can be concrete names like x, y, z, lng, lat, angle, radius
+ *        Or a ordinal number. For example getDimensionInfo(0) will return 'x' or 'lng' or 'radius'
+ */
+listProto.getDimensionInfo = function (dim) {
+    // Do not clone, because there may be categories in dimInfo.
+    return this._dimensionInfos[this.getDimension(dim)];
+};
+
+/**
+ * @return {Array.<string>} concrete dimension name list on coord.
+ */
+listProto.getDimensionsOnCoord = function () {
+    return this._dimensionsSummary.dataDimsOnCoord.slice();
+};
+
+/**
+ * @param {string} coordDim
+ * @param {number} [idx] A coordDim may map to more than one data dim.
+ *        If idx is `true`, return a array of all mapped dims.
+ *        If idx is not specified, return the first dim not extra.
+ * @return {string|Array.<string>} concrete data dim.
+ *        If idx is number, and not found, return null/undefined.
+ *        If idx is `true`, and not found, return empty array (always return array).
+ */
+listProto.mapDimension = function (coordDim, idx) {
+    var dimensionsSummary = this._dimensionsSummary;
+
+    if (idx == null) {
+        return dimensionsSummary.encodeFirstDimNotExtra[coordDim];
+    }
+
+    var dims = dimensionsSummary.encode[coordDim];
+    return idx === true
+        // always return array if idx is `true`
+        ? (dims || []).slice()
+        : (dims && dims[idx]);
+};
+
+/**
+ * Initialize from data
+ * @param {Array.<Object|number|Array>} data source or data or data provider.
+ * @param {Array.<string>} [nameLIst] The name of a datum is used on data diff and
+ *        defualt label/tooltip.
+ *        A name can be specified in encode.itemName,
+ *        or dataItem.name (only for series option data),
+ *        or provided in nameList from outside.
+ * @param {Function} [dimValueGetter] (dataItem, dimName, dataIndex, dimIndex) => number
+ */
+listProto.initData = function (data, nameList, dimValueGetter) {
+
+    var notProvider = Source.isInstance(data) || isArrayLike(data);
+    if (notProvider) {
+        data = new DefaultDataProvider(data, this.dimensions.length);
+    }
+
+    if (__DEV__) {
+        if (!notProvider && (typeof data.getItem != 'function' || typeof data.count != 'function')) {
+            throw new Error('Inavlid data provider.');
+        }
+    }
+
+    this._rawData = data;
+
+    // Clear
+    this._storage = {};
+    this._indices = null;
+
+    this._nameList = nameList || [];
+
+    this._idList = [];
+
+    this._nameRepeatCount = {};
+
+    if (!dimValueGetter) {
+        this.hasItemOption = false;
+    }
+
+    /**
+     * @readOnly
+     */
+    this.defaultDimValueGetter = defaultDimValueGetters[
+        this._rawData.getSource().sourceFormat
+    ];
+
+    // Default dim value getter
+    this._dimValueGetter = dimValueGetter = dimValueGetter
+        || this.defaultDimValueGetter;
+
+    // Reset raw extent.
+    this._rawExtent = {};
+
+    this._initDataFromProvider(0, data.count());
+
+    // If data has no item option.
+    if (data.pure) {
+        this.hasItemOption = false;
+    }
+};
+
+listProto.getProvider = function () {
+    return this._rawData;
+};
+
+listProto.appendData = function (data) {
+    if (__DEV__) {
+        assert$1(!this._indices, 'appendData can only be called on raw data.');
+    }
+
+    var rawData = this._rawData;
+    var start = this.count();
+    rawData.appendData(data);
+    var end = rawData.count();
+    if (!rawData.persistent) {
+        end += start;
+    }
+    this._initDataFromProvider(start, end);
+};
+
+listProto._initDataFromProvider = function (start, end) {
+    // Optimize.
+    if (start >= end) {
+        return;
+    }
+
+    var chunkSize = this._chunkSize;
+    var rawData = this._rawData;
+    var storage = this._storage;
+    var dimensions = this.dimensions;
+    var dimLen = dimensions.length;
+    var dimensionInfoMap = this._dimensionInfos;
+    var nameList = this._nameList;
+    var idList = this._idList;
+    var rawExtent = this._rawExtent;
+    var nameRepeatCount = this._nameRepeatCount = {};
+    var nameDimIdx;
+
+    var chunkCount = this._chunkCount;
+    var lastChunkIndex = chunkCount - 1;
+    for (var i = 0; i < dimLen; i++) {
+        var dim = dimensions[i];
+        if (!rawExtent[dim]) {
+            rawExtent[dim] = getInitialExtent();
+        }
+
+        var dimInfo = dimensionInfoMap[dim];
+        if (dimInfo.otherDims.itemName === 0) {
+            nameDimIdx = this._nameDimIdx = i;
+        }
+        if (dimInfo.otherDims.itemId === 0) {
+            this._idDimIdx = i;
+        }
+        var DataCtor = dataCtors[dimInfo.type];
+
+        if (!storage[dim]) {
+            storage[dim] = [];
+        }
+        var resizeChunkArray = storage[dim][lastChunkIndex];
+        if (resizeChunkArray && resizeChunkArray.length < chunkSize) {
+            var newStore = new DataCtor(Math.min(end - lastChunkIndex * chunkSize, chunkSize));
+            // The cost of the copy is probably inconsiderable
+            // within the initial chunkSize.
+            for (var j = 0; j < resizeChunkArray.length; j++) {
+                newStore[j] = resizeChunkArray[j];
+            }
+            storage[dim][lastChunkIndex] = newStore;
+        }
+
+        // Create new chunks.
+        for (var k = chunkCount * chunkSize; k < end; k += chunkSize) {
+            storage[dim].push(new DataCtor(Math.min(end - k, chunkSize)));
+        }
+        this._chunkCount = storage[dim].length;
+    }
+
+    var dataItem = new Array(dimLen);
+    for (var idx = start; idx < end; idx++) {
+        // NOTICE: Try not to write things into dataItem
+        dataItem = rawData.getItem(idx, dataItem);
+        // Each data item is value
+        // [1, 2]
+        // 2
+        // Bar chart, line chart which uses category axis
+        // only gives the 'y' value. 'x' value is the indices of category
+        // Use a tempValue to normalize the value to be a (x, y) value
+        var chunkIndex = Math.floor(idx / chunkSize);
+        var chunkOffset = idx % chunkSize;
+
+        // Store the data by dimensions
+        for (var k = 0; k < dimLen; k++) {
+            var dim = dimensions[k];
+            var dimStorage = storage[dim][chunkIndex];
+            // PENDING NULL is empty or zero
+            var val = this._dimValueGetter(dataItem, dim, idx, k);
+            dimStorage[chunkOffset] = val;
+
+            var dimRawExtent = rawExtent[dim];
+            if (val < dimRawExtent[0]) {
+                dimRawExtent[0] = val;
+            }
+            if (val > dimRawExtent[1]) {
+                dimRawExtent[1] = val;
+            }
+        }
+
+        // ??? FIXME not check by pure but sourceFormat?
+        // TODO refactor these logic.
+        if (!rawData.pure) {
+            var name = nameList[idx];
+
+            if (dataItem && name == null) {
+                // If dataItem is {name: ...}, it has highest priority.
+                // That is appropriate for many common cases.
+                if (dataItem.name != null) {
+                    // There is no other place to persistent dataItem.name,
+                    // so save it to nameList.
+                    nameList[idx] = name = dataItem.name;
+                }
+                else if (nameDimIdx != null) {
+                    var nameDim = dimensions[nameDimIdx];
+                    var nameDimChunk = storage[nameDim][chunkIndex];
+                    if (nameDimChunk) {
+                        name = nameDimChunk[chunkOffset];
+                        var ordinalMeta = dimensionInfoMap[nameDim].ordinalMeta;
+                        if (ordinalMeta && ordinalMeta.categories.length) {
+                            name = ordinalMeta.categories[name];
+                        }
+                    }
+                }
+            }
+
+            // Try using the id in option
+            // id or name is used on dynamical data, mapping old and new items.
+            var id = dataItem == null ? null : dataItem.id;
+
+            if (id == null && name != null) {
+                // Use name as id and add counter to avoid same name
+                nameRepeatCount[name] = nameRepeatCount[name] || 0;
+                id = name;
+                if (nameRepeatCount[name] > 0) {
+                    id += '__ec__' + nameRepeatCount[name];
+                }
+                nameRepeatCount[name]++;
+            }
+            id != null && (idList[idx] = id);
+        }
+    }
+
+    if (!rawData.persistent && rawData.clean) {
+        // Clean unused data if data source is typed array.
+        rawData.clean();
+    }
+
+    this._rawCount = this._count = end;
+
+    // Reset data extent
+    this._extent = {};
+
+    prepareInvertedIndex(this);
+};
+
+function prepareInvertedIndex(list) {
+    var invertedIndicesMap = list._invertedIndicesMap;
+    each$1(invertedIndicesMap, function (invertedIndices, dim) {
+        var dimInfo = list._dimensionInfos[dim];
+
+        // Currently, only dimensions that has ordinalMeta can create inverted indices.
+        var ordinalMeta = dimInfo.ordinalMeta;
+        if (ordinalMeta) {
+            invertedIndices = invertedIndicesMap[dim] = new CtorUint32Array(
+                ordinalMeta.categories.length
+            );
+            // The default value of TypedArray is 0. To avoid miss
+            // mapping to 0, we should set it as NaN.
+            for (var i = 0; i < invertedIndices.length; i++) {
+                invertedIndices[i] = NaN;
+            }
+            for (var i = 0; i < list._count; i++) {
+                // Only support the case that all values are distinct.
+                invertedIndices[list.get(dim, i)] = i;
+            }
+        }
+    });
+}
+
+function getRawValueFromStore(list, dimIndex, rawIndex) {
+    var val;
+    if (dimIndex != null) {
+        var chunkSize = list._chunkSize;
+        var chunkIndex = Math.floor(rawIndex / chunkSize);
+        var chunkOffset = rawIndex % chunkSize;
+        var dim = list.dimensions[dimIndex];
+        var chunk = list._storage[dim][chunkIndex];
+        if (chunk) {
+            val = chunk[chunkOffset];
+            var ordinalMeta = list._dimensionInfos[dim].ordinalMeta;
+            if (ordinalMeta && ordinalMeta.categories.length) {
+                val = ordinalMeta.categories[val];
+            }
+        }
+    }
+    return val;
+}
+
+/**
+ * @return {number}
+ */
+listProto.count = function () {
+    return this._count;
+};
+
+listProto.getIndices = function () {
+    var newIndices;
+
+    var indices = this._indices;
+    if (indices) {
+        var Ctor = indices.constructor;
+        var thisCount = this._count;
+        // `new Array(a, b, c)` is different from `new Uint32Array(a, b, c)`.
+        if (Ctor === Array) {
+            newIndices = new Ctor(thisCount);
+            for (var i = 0; i < thisCount; i++) {
+                newIndices[i] = indices[i];
+            }
+        }
+        else {
+            newIndices = new Ctor(indices.buffer, 0, thisCount);
+        }
+    }
+    else {
+        var Ctor = getIndicesCtor(this);
+        var newIndices = new Ctor(this.count());
+        for (var i = 0; i < newIndices.length; i++) {
+            newIndices[i] = i;
+        }
+    }
+
+    return newIndices;
+};
+
+/**
+ * Get value. Return NaN if idx is out of range.
+ * @param {string} dim Dim must be concrete name.
+ * @param {number} idx
+ * @param {boolean} stack
+ * @return {number}
+ */
+listProto.get = function (dim, idx /*, stack */) {
+    if (!(idx >= 0 && idx < this._count)) {
+        return NaN;
+    }
+    var storage = this._storage;
+    if (!storage[dim]) {
+        // TODO Warn ?
+        return NaN;
+    }
+
+    idx = this.getRawIndex(idx);
+
+    var chunkIndex = Math.floor(idx / this._chunkSize);
+    var chunkOffset = idx % this._chunkSize;
+
+    var chunkStore = storage[dim][chunkIndex];
+    var value = chunkStore[chunkOffset];
+    // FIXME ordinal data type is not stackable
+    // if (stack) {
+    //     var dimensionInfo = this._dimensionInfos[dim];
+    //     if (dimensionInfo && dimensionInfo.stackable) {
+    //         var stackedOn = this.stackedOn;
+    //         while (stackedOn) {
+    //             // Get no stacked data of stacked on
+    //             var stackedValue = stackedOn.get(dim, idx);
+    //             // Considering positive stack, negative stack and empty data
+    //             if ((value >= 0 && stackedValue > 0)  // Positive stack
+    //                 || (value <= 0 && stackedValue < 0) // Negative stack
+    //             ) {
+    //                 value += stackedValue;
+    //             }
+    //             stackedOn = stackedOn.stackedOn;
+    //         }
+    //     }
+    // }
+
+    return value;
+};
+
+/**
+ * @param {string} dim concrete dim
+ * @param {number} rawIndex
+ * @return {number|string}
+ */
+listProto.getByRawIndex = function (dim, rawIdx) {
+    if (!(rawIdx >= 0 && rawIdx < this._rawCount)) {
+        return NaN;
+    }
+    var dimStore = this._storage[dim];
+    if (!dimStore) {
+        // TODO Warn ?
+        return NaN;
+    }
+
+    var chunkIndex = Math.floor(rawIdx / this._chunkSize);
+    var chunkOffset = rawIdx % this._chunkSize;
+    var chunkStore = dimStore[chunkIndex];
+    return chunkStore[chunkOffset];
+};
+
+/**
+ * FIXME Use `get` on chrome maybe slow(in filterSelf and selectRange).
+ * Hack a much simpler _getFast
+ * @private
+ */
+listProto._getFast = function (dim, rawIdx) {
+    var chunkIndex = Math.floor(rawIdx / this._chunkSize);
+    var chunkOffset = rawIdx % this._chunkSize;
+    var chunkStore = this._storage[dim][chunkIndex];
+    return chunkStore[chunkOffset];
+};
+
+/**
+ * Get value for multi dimensions.
+ * @param {Array.<string>} [dimensions] If ignored, using all dimensions.
+ * @param {number} idx
+ * @return {number}
+ */
+listProto.getValues = function (dimensions, idx /*, stack */) {
+    var values = [];
+
+    if (!isArray(dimensions)) {
+        // stack = idx;
+        idx = dimensions;
+        dimensions = this.dimensions;
+    }
+
+    for (var i = 0, len = dimensions.length; i < len; i++) {
+        values.push(this.get(dimensions[i], idx /*, stack */));
+    }
+
+    return values;
+};
+
+/**
+ * If value is NaN. Inlcuding '-'
+ * Only check the coord dimensions.
+ * @param {string} dim
+ * @param {number} idx
+ * @return {number}
+ */
+listProto.hasValue = function (idx) {
+    var dataDimsOnCoord = this._dimensionsSummary.dataDimsOnCoord;
+    var dimensionInfos = this._dimensionInfos;
+    for (var i = 0, len = dataDimsOnCoord.length; i < len; i++) {
+        if (
+            // Ordinal type can be string or number
+            dimensionInfos[dataDimsOnCoord[i]].type !== 'ordinal'
+            // FIXME check ordinal when using index?
+            && isNaN(this.get(dataDimsOnCoord[i], idx))
+        ) {
+            return false;
+        }
+    }
+    return true;
+};
+
+/**
+ * Get extent of data in one dimension
+ * @param {string} dim
+ * @param {boolean} stack
+ */
+listProto.getDataExtent = function (dim /*, stack */) {
+    // Make sure use concrete dim as cache name.
+    dim = this.getDimension(dim);
+    var dimData = this._storage[dim];
+    var initialExtent = getInitialExtent();
+
+    // stack = !!((stack || false) && this.getCalculationInfo(dim));
+
+    if (!dimData) {
+        return initialExtent;
+    }
+
+    // Make more strict checkings to ensure hitting cache.
+    var currEnd = this.count();
+    // var cacheName = [dim, !!stack].join('_');
+    // var cacheName = dim;
+
+    // Consider the most cases when using data zoom, `getDataExtent`
+    // happened before filtering. We cache raw extent, which is not
+    // necessary to be cleared and recalculated when restore data.
+    var useRaw = !this._indices; // && !stack;
+    var dimExtent;
+
+    if (useRaw) {
+        return this._rawExtent[dim].slice();
+    }
+    dimExtent = this._extent[dim];
+    if (dimExtent) {
+        return dimExtent.slice();
+    }
+    dimExtent = initialExtent;
+
+    var min = dimExtent[0];
+    var max = dimExtent[1];
+
+    for (var i = 0; i < currEnd; i++) {
+        // var value = stack ? this.get(dim, i, true) : this._getFast(dim, this.getRawIndex(i));
+        var value = this._getFast(dim, this.getRawIndex(i));
+        value < min && (min = value);
+        value > max && (max = value);
+    }
+
+    dimExtent = [min, max];
+
+    this._extent[dim] = dimExtent;
+
+    return dimExtent;
+};
+
+/**
+ * Optimize for the scenario that data is filtered by a given extent.
+ * Consider that if data amount is more than hundreds of thousand,
+ * extent calculation will cost more than 10ms and the cache will
+ * be erased because of the filtering.
+ */
+listProto.getApproximateExtent = function (dim /*, stack */) {
+    dim = this.getDimension(dim);
+    return this._approximateExtent[dim] || this.getDataExtent(dim /*, stack */);
+};
+
+listProto.setApproximateExtent = function (extent, dim /*, stack */) {
+    dim = this.getDimension(dim);
+    this._approximateExtent[dim] = extent.slice();
+};
+
+/**
+ * @param {string} key
+ * @return {*}
+ */
+listProto.getCalculationInfo = function (key) {
+    return this._calculationInfo[key];
+};
+
+/**
+ * @param {string|Object} key or k-v object
+ * @param {*} [value]
+ */
+listProto.setCalculationInfo = function (key, value) {
+    isObject$4(key)
+        ? extend(this._calculationInfo, key)
+        : (this._calculationInfo[key] = value);
+};
+
+/**
+ * Get sum of data in one dimension
+ * @param {string} dim
+ */
+listProto.getSum = function (dim /*, stack */) {
+    var dimData = this._storage[dim];
+    var sum = 0;
+    if (dimData) {
+        for (var i = 0, len = this.count(); i < len; i++) {
+            var value = this.get(dim, i /*, stack */);
+            if (!isNaN(value)) {
+                sum += value;
+            }
+        }
+    }
+    return sum;
+};
+
+/**
+ * Get median of data in one dimension
+ * @param {string} dim
+ */
+listProto.getMedian = function (dim /*, stack */) {
+    var dimDataArray = [];
+    // map all data of one dimension
+    this.each(dim, function (val, idx) {
+        if (!isNaN(val)) {
+            dimDataArray.push(val);
+        }
+    });
+
+    // TODO
+    // Use quick select?
+
+    // immutability & sort
+    var sortedDimDataArray = [].concat(dimDataArray).sort(function(a, b) {
+        return a - b;
+    });
+    var len = this.count();
+    // calculate median
+    return len === 0 ? 0 :
+        len % 2 === 1 ? sortedDimDataArray[(len - 1) / 2] :
+            (sortedDimDataArray[len / 2] + sortedDimDataArray[len / 2 - 1]) / 2;
+};
+
+// /**
+//  * Retreive the index with given value
+//  * @param {string} dim Concrete dimension.
+//  * @param {number} value
+//  * @return {number}
+//  */
+// Currently incorrect: should return dataIndex but not rawIndex.
+// Do not fix it until this method is to be used somewhere.
+// FIXME Precision of float value
+// listProto.indexOf = function (dim, value) {
+//     var storage = this._storage;
+//     var dimData = storage[dim];
+//     var chunkSize = this._chunkSize;
+//     if (dimData) {
+//         for (var i = 0, len = this.count(); i < len; i++) {
+//             var chunkIndex = Math.floor(i / chunkSize);
+//             var chunkOffset = i % chunkSize;
+//             if (dimData[chunkIndex][chunkOffset] === value) {
+//                 return i;
+//             }
+//         }
+//     }
+//     return -1;
+// };
+
+/**
+ * Only support the dimension which inverted index created.
+ * Do not support other cases until required.
+ * @param {string} concrete dim
+ * @param {number|string} value
+ * @return {number} rawIndex
+ */
+listProto.rawIndexOf = function (dim, value) {
+    var invertedIndices = dim && this._invertedIndicesMap[dim];
+    if (__DEV__) {
+        if (!invertedIndices) {
+            throw new Error('Do not supported yet');
+        }
+    }
+    var rawIndex = invertedIndices[value];
+    if (rawIndex == null || isNaN(rawIndex)) {
+        return -1;
+    }
+    return rawIndex;
+};
+
+/**
+ * Retreive the index with given name
+ * @param {number} idx
+ * @param {number} name
+ * @return {number}
+ */
+listProto.indexOfName = function (name) {
+    for (var i = 0, len = this.count(); i < len; i++) {
+        if (this.getName(i) === name) {
+            return i;
+        }
+    }
+
+    return -1;
+};
+
+/**
+ * Retreive the index with given raw data index
+ * @param {number} idx
+ * @param {number} name
+ * @return {number}
+ */
+listProto.indexOfRawIndex = function (rawIndex) {
+    if (!this._indices) {
+        return rawIndex;
+    }
+
+    if (rawIndex >= this._rawCount || rawIndex < 0) {
+        return -1;
+    }
+
+    // Indices are ascending
+    var indices = this._indices;
+
+    // If rawIndex === dataIndex
+    var rawDataIndex = indices[rawIndex];
+    if (rawDataIndex != null && rawDataIndex < this._count && rawDataIndex === rawIndex) {
+        return rawIndex;
+    }
+
+    var left = 0;
+    var right = this._count - 1;
+    while (left <= right) {
+        var mid = (left + right) / 2 | 0;
+        if (indices[mid] < rawIndex) {
+            left = mid + 1;
+        }
+        else if (indices[mid] > rawIndex) {
+            right = mid - 1;
+        }
+        else {
+            return mid;
+        }
+    }
+    return -1;
+};
+
+/**
+ * Retreive the index of nearest value
+ * @param {string} dim
+ * @param {number} value
+ * @param {number} [maxDistance=Infinity]
+ * @return {Array.<number>} Considere multiple points has the same value.
+ */
+listProto.indicesOfNearest = function (dim, value, maxDistance) {
+    var storage = this._storage;
+    var dimData = storage[dim];
+    var nearestIndices = [];
+
+    if (!dimData) {
+        return nearestIndices;
+    }
+
+    if (maxDistance == null) {
+        maxDistance = Infinity;
+    }
+
+    var minDist = Number.MAX_VALUE;
+    var minDiff = -1;
+    for (var i = 0, len = this.count(); i < len; i++) {
+        var diff = value - this.get(dim, i /*, stack */);
+        var dist = Math.abs(diff);
+        if (diff <= maxDistance && dist <= minDist) {
+            // For the case of two data are same on xAxis, which has sequence data.
+            // Show the nearest index
+            // https://github.com/ecomfe/echarts/issues/2869
+            if (dist < minDist || (diff >= 0 && minDiff < 0)) {
+                minDist = dist;
+                minDiff = diff;
+                nearestIndices.length = 0;
+            }
+            nearestIndices.push(i);
+        }
+    }
+    return nearestIndices;
+};
+
+/**
+ * Get raw data index
+ * @param {number} idx
+ * @return {number}
+ */
+listProto.getRawIndex = getRawIndexWithoutIndices;
+
+function getRawIndexWithoutIndices(idx) {
+    return idx;
+}
+
+function getRawIndexWithIndices(idx) {
+    if (idx < this._count && idx >= 0) {
+        return this._indices[idx];
+    }
+    return -1;
+}
+
+/**
+ * Get raw data item
+ * @param {number} idx
+ * @return {number}
+ */
+listProto.getRawDataItem = function (idx) {
+    if (!this._rawData.persistent) {
+        var val = [];
+        for (var i = 0; i < this.dimensions.length; i++) {
+            var dim = this.dimensions[i];
+            val.push(this.get(dim, idx));
+        }
+        return val;
+    }
+    else {
+        return this._rawData.getItem(this.getRawIndex(idx));
+    }
+};
+
+/**
+ * @param {number} idx
+ * @param {boolean} [notDefaultIdx=false]
+ * @return {string}
+ */
+listProto.getName = function (idx) {
+    var rawIndex = this.getRawIndex(idx);
+    return this._nameList[rawIndex]
+        || getRawValueFromStore(this, this._nameDimIdx, rawIndex)
+        || '';
+};
+
+/**
+ * @param {number} idx
+ * @param {boolean} [notDefaultIdx=false]
+ * @return {string}
+ */
+listProto.getId = function (idx) {
+    return getId(this, this.getRawIndex(idx));
+};
+
+function getId(list, rawIndex) {
+    var id = list._idList[rawIndex];
+    if (id == null) {
+        id = getRawValueFromStore(list, list._idDimIdx, rawIndex);
+    }
+    if (id == null) {
+        // FIXME Check the usage in graph, should not use prefix.
+        id = ID_PREFIX + rawIndex;
+    }
+    return id;
+}
+
+function normalizeDimensions(dimensions) {
+    if (!isArray(dimensions)) {
+        dimensions = [dimensions];
+    }
+    return dimensions;
+}
+
+function validateDimensions(list, dims) {
+    for (var i = 0; i < dims.length; i++) {
+        // stroage may be empty when no data, so use
+        // dimensionInfos to check.
+        if (!list._dimensionInfos[dims[i]]) {
+            console.error('Unkown dimension ' + dims[i]);
+        }
+    }
+}
+
+/**
+ * Data iteration
+ * @param {string|Array.<string>}
+ * @param {Function} cb
+ * @param {*} [context=this]
+ *
+ * @example
+ *  list.each('x', function (x, idx) {});
+ *  list.each(['x', 'y'], function (x, y, idx) {});
+ *  list.each(function (idx) {})
+ */
+listProto.each = function (dims, cb, context, contextCompat) {
+    'use strict';
+
+    if (!this._count) {
+        return;
+    }
+
+    if (typeof dims === 'function') {
+        contextCompat = context;
+        context = cb;
+        cb = dims;
+        dims = [];
+    }
+
+    // contextCompat just for compat echarts3
+    context = context || contextCompat || this;
+
+    dims = map(normalizeDimensions(dims), this.getDimension, this);
+
+    if (__DEV__) {
+        validateDimensions(this, dims);
+    }
+
+    var dimSize = dims.length;
+
+    for (var i = 0; i < this.count(); i++) {
+        // Simple optimization
+        switch (dimSize) {
+            case 0:
+                cb.call(context, i);
+                break;
+            case 1:
+                cb.call(context, this.get(dims[0], i), i);
+                break;
+            case 2:
+                cb.call(context, this.get(dims[0], i), this.get(dims[1], i), i);
+                break;
+            default:
+                var k = 0;
+                var value = [];
+                for (; k < dimSize; k++) {
+                    value[k] = this.get(dims[k], i);
+                }
+                // Index
+                value[k] = i;
+                cb.apply(context, value);
+        }
+    }
+};
+
+/**
+ * Data filter
+ * @param {string|Array.<string>}
+ * @param {Function} cb
+ * @param {*} [context=this]
+ */
+listProto.filterSelf = function (dimensions, cb, context, contextCompat) {
+    'use strict';
+
+    if (!this._count) {
+        return;
+    }
+
+    if (typeof dimensions === 'function') {
+        contextCompat = context;
+        context = cb;
+        cb = dimensions;
+        dimensions = [];
+    }
+
+    // contextCompat just for compat echarts3
+    context = context || contextCompat || this;
+
+    dimensions = map(
+        normalizeDimensions(dimensions), this.getDimension, this
+    );
+
+    if (__DEV__) {
+        validateDimensions(this, dimensions);
+    }
+
+
+    var count = this.count();
+    var Ctor = getIndicesCtor(this);
+    var newIndices = new Ctor(count);
+    var value = [];
+    var dimSize = dimensions.length;
+
+    var offset = 0;
+    var dim0 = dimensions[0];
+
+    for (var i = 0; i < count; i++) {
+        var keep;
+        var rawIdx = this.getRawIndex(i);
+        // Simple optimization
+        if (dimSize === 0) {
+            keep = cb.call(context, i);
+        }
+        else if (dimSize === 1) {
+            var val = this._getFast(dim0, rawIdx);
+            keep = cb.call(context, val, i);
+        }
+        else {
+            for (var k = 0; k < dimSize; k++) {
+                value[k] = this._getFast(dim0, rawIdx);
+            }
+            value[k] = i;
+            keep = cb.apply(context, value);
+        }
+        if (keep) {
+            newIndices[offset++] = rawIdx;
+        }
+    }
+
+    // Set indices after filtered.
+    if (offset < count) {
+        this._indices = newIndices;
+    }
+    this._count = offset;
+    // Reset data extent
+    this._extent = {};
+
+    this.getRawIndex = this._indices ? getRawIndexWithIndices : getRawIndexWithoutIndices;
+
+    return this;
+};
+
+/**
+ * Select data in range. (For optimization of filter)
+ * (Manually inline code, support 5 million data filtering in data zoom.)
+ */
+listProto.selectRange = function (range) {
+    'use strict';
+
+    if (!this._count) {
+        return;
+    }
+
+    var dimensions = [];
+    for (var dim in range) {
+        if (range.hasOwnProperty(dim)) {
+            dimensions.push(dim);
+        }
+    }
+
+    if (__DEV__) {
+        validateDimensions(this, dimensions);
+    }
+
+    var dimSize = dimensions.length;
+    if (!dimSize) {
+        return;
+    }
+
+    var originalCount = this.count();
+    var Ctor = getIndicesCtor(this);
+    var newIndices = new Ctor(originalCount);
+
+    var offset = 0;
+    var dim0 = dimensions[0];
+
+    var min = range[dim0][0];
+    var max = range[dim0][1];
+
+    var quickFinished = false;
+    if (!this._indices) {
+        // Extreme optimization for common case. About 2x faster in chrome.
+        var idx = 0;
+        if (dimSize === 1) {
+            var dimStorage = this._storage[dimensions[0]];
+            for (var k = 0; k < this._chunkCount; k++) {
+                var chunkStorage = dimStorage[k];
+                var len = Math.min(this._count - k * this._chunkSize, this._chunkSize);
+                for (var i = 0; i < len; i++) {
+                    var val = chunkStorage[i];
+                    // NaN will not be filtered. Consider the case, in line chart, empty
+                    // value indicates the line should be broken. But for the case like
+                    // scatter plot, a data item with empty value will not be rendered,
+                    // but the axis extent may be effected if some other dim of the data
+                    // item has value. Fortunately it is not a significant negative effect.
+                    if (
+                        (val >= min && val <= max) || isNaN(val)
+                    ) {
+                        newIndices[offset++] = idx;
+                    }
+                    idx++;
+                }
+            }
+            quickFinished = true;
+        }
+        else if (dimSize === 2) {
+            var dimStorage = this._storage[dim0];
+            var dimStorage2 = this._storage[dimensions[1]];
+            var min2 = range[dimensions[1]][0];
+            var max2 = range[dimensions[1]][1];
+            for (var k = 0; k < this._chunkCount; k++) {
+                var chunkStorage = dimStorage[k];
+                var chunkStorage2= dimStorage2[k];
+                var len = Math.min(this._count - k * this._chunkSize, this._chunkSize);
+                for (var i = 0; i < len; i++) {
+                    var val = chunkStorage[i];
+                    var val2 = chunkStorage2[i];
+                    // Do not filter NaN, see comment above.
+                    if ((
+                            (val >= min && val <= max) || isNaN(val)
+                        )
+                        && (
+                            (val2 >= min2 && val2 <= max2) || isNaN(val2)
+                        )
+                    ) {
+                        newIndices[offset++] = idx;
+                    }
+                    idx++;
+                }
+            }
+            quickFinished = true;
+        }
+    }
+    if (!quickFinished) {
+        if (dimSize === 1) {
+            for (var i = 0; i < originalCount; i++) {
+                var rawIndex = this.getRawIndex(i);
+                var val = this._getFast(dim0, rawIndex);
+                // Do not filter NaN, see comment above.
+                if (
+                    (val >= min && val <= max) || isNaN(val)
+                ) {
+                    newIndices[offset++] = rawIndex;
+                }
+            }
+        }
+        else {
+            for (var i = 0; i < originalCount; i++) {
+                var keep = true;
+                var rawIndex = this.getRawIndex(i);
+                for (var k = 0; k < dimSize; k++) {
+                    var dimk = dimensions[k];
+                    var val = this._getFast(dim, rawIndex);
+                    // Do not filter NaN, see comment above.
+                    if (val < range[dimk][0] || val > range[dimk][1]) {
+                        keep = false;
+                    }
+                }
+                if (keep) {
+                    newIndices[offset++] = this.getRawIndex(i);
+                }
+            }
+        }
+    }
+
+    // Set indices after filtered.
+    if (offset < originalCount) {
+        this._indices = newIndices;
+    }
+    this._count = offset;
+    // Reset data extent
+    this._extent = {};
+
+    this.getRawIndex = this._indices ? getRawIndexWithIndices : getRawIndexWithoutIndices;
+
+    return this;
+};
+
+/**
+ * Data mapping to a plain array
+ * @param {string|Array.<string>} [dimensions]
+ * @param {Function} cb
+ * @param {*} [context=this]
+ * @return {Array}
+ */
+listProto.mapArray = function (dimensions, cb, context, contextCompat) {
+    'use strict';
+
+    if (typeof dimensions === 'function') {
+        contextCompat = context;
+        context = cb;
+        cb = dimensions;
+        dimensions = [];
+    }
+
+    // contextCompat just for compat echarts3
+    context = context || contextCompat || this;
+
+    var result = [];
+    this.each(dimensions, function () {
+        result.push(cb && cb.apply(this, arguments));
+    }, context);
+    return result;
+};
+
+// Data in excludeDimensions is copied, otherwise transfered.
+function cloneListForMapAndSample(original, excludeDimensions) {
+    var allDimensions = original.dimensions;
+    var list = new List(
+        map(allDimensions, original.getDimensionInfo, original),
+        original.hostModel
+    );
+    // FIXME If needs stackedOn, value may already been stacked
+    transferProperties(list, original);
+
+    var storage = list._storage = {};
+    var originalStorage = original._storage;
+
+    // Init storage
+    for (var i = 0; i < allDimensions.length; i++) {
+        var dim = allDimensions[i];
+        if (originalStorage[dim]) {
+            // Notice that we do not reset invertedIndicesMap here, becuase
+            // there is no scenario of mapping or sampling ordinal dimension.
+            if (indexOf(excludeDimensions, dim) >= 0) {
+                storage[dim] = cloneDimStore(originalStorage[dim]);
+                list._rawExtent[dim] = getInitialExtent();
+                list._extent[dim] = null;
+            }
+            else {
+                // Direct reference for other dimensions
+                storage[dim] = originalStorage[dim];
+            }
+        }
+    }
+    return list;
+}
+
+function cloneDimStore(originalDimStore) {
+    var newDimStore = new Array(originalDimStore.length);
+    for (var j = 0; j < originalDimStore.length; j++) {
+        newDimStore[j] = cloneChunk(originalDimStore[j]);
+    }
+    return newDimStore;
+}
+
+function getInitialExtent() {
+    return [Infinity, -Infinity];
+}
+
+/**
+ * Data mapping to a new List with given dimensions
+ * @param {string|Array.<string>} dimensions
+ * @param {Function} cb
+ * @param {*} [context=this]
+ * @return {Array}
+ */
+listProto.map = function (dimensions, cb, context, contextCompat) {
+    'use strict';
+
+    // contextCompat just for compat echarts3
+    context = context || contextCompat || this;
+
+    dimensions = map(
+        normalizeDimensions(dimensions), this.getDimension, this
+    );
+
+    if (__DEV__) {
+        validateDimensions(this, dimensions);
+    }
+
+    var list = cloneListForMapAndSample(this, dimensions);
+
+    // Following properties are all immutable.
+    // So we can reference to the same value
+    list._indices = this._indices;
+    list.getRawIndex = list._indices ? getRawIndexWithIndices : getRawIndexWithoutIndices;
+
+    var storage = list._storage;
+
+    var tmpRetValue = [];
+    var chunkSize = this._chunkSize;
+    var dimSize = dimensions.length;
+    var dataCount = this.count();
+    var values = [];
+    var rawExtent = list._rawExtent;
+
+    for (var dataIndex = 0; dataIndex < dataCount; dataIndex++) {
+        for (var dimIndex = 0; dimIndex < dimSize; dimIndex++) {
+            values[dimIndex] = this.get(dimensions[dimIndex], dataIndex /*, stack */);
+        }
+        values[dimSize] = dataIndex;
+
+        var retValue = cb && cb.apply(context, values);
+        if (retValue != null) {
+            // a number or string (in oridinal dimension)?
+            if (typeof retValue !== 'object') {
+                tmpRetValue[0] = retValue;
+                retValue = tmpRetValue;
+            }
+
+            var rawIndex = this.getRawIndex(dataIndex);
+            var chunkIndex = Math.floor(rawIndex / chunkSize);
+            var chunkOffset = rawIndex % chunkSize;
+
+            for (var i = 0; i < retValue.length; i++) {
+                var dim = dimensions[i];
+                var val = retValue[i];
+                var rawExtentOnDim = rawExtent[dim];
+
+                var dimStore = storage[dim];
+                if (dimStore) {
+                    dimStore[chunkIndex][chunkOffset] = val;
+                }
+
+                if (val < rawExtentOnDim[0]) {
+                    rawExtentOnDim[0] = val;
+                }
+                if (val > rawExtentOnDim[1]) {
+                    rawExtentOnDim[1] = val;
+                }
+            }
+        }
+    }
+
+    return list;
+};
+
+/**
+ * Large data down sampling on given dimension
+ * @param {string} dimension
+ * @param {number} rate
+ * @param {Function} sampleValue
+ * @param {Function} sampleIndex Sample index for name and id
+ */
+listProto.downSample = function (dimension, rate, sampleValue, sampleIndex) {
+    var list = cloneListForMapAndSample(this, [dimension]);
+    var targetStorage = list._storage;
+
+    var frameValues = [];
+    var frameSize = Math.floor(1 / rate);
+
+    var dimStore = targetStorage[dimension];
+    var len = this.count();
+    var chunkSize = this._chunkSize;
+    var rawExtentOnDim = list._rawExtent[dimension];
+
+    var newIndices = new (getIndicesCtor(this))(len);
+
+    var offset = 0;
+    for (var i = 0; i < len; i += frameSize) {
+        // Last frame
+        if (frameSize > len - i) {
+            frameSize = len - i;
+            frameValues.length = frameSize;
+        }
+        for (var k = 0; k < frameSize; k++) {
+            var dataIdx = this.getRawIndex(i + k);
+            var originalChunkIndex = Math.floor(dataIdx / chunkSize);
+            var originalChunkOffset = dataIdx % chunkSize;
+            frameValues[k] = dimStore[originalChunkIndex][originalChunkOffset];
+        }
+        var value = sampleValue(frameValues);
+        var sampleFrameIdx = this.getRawIndex(
+            Math.min(i + sampleIndex(frameValues, value) || 0, len - 1)
+        );
+        var sampleChunkIndex = Math.floor(sampleFrameIdx / chunkSize);
+        var sampleChunkOffset = sampleFrameIdx % chunkSize;
+        // Only write value on the filtered data
+        dimStore[sampleChunkIndex][sampleChunkOffset] = value;
+
+        if (value < rawExtentOnDim[0]) {
+            rawExtentOnDim[0] = value;
+        }
+        if (value > rawExtentOnDim[1]) {
+            rawExtentOnDim[1] = value;
+        }
+
+        newIndices[offset++] = sampleFrameIdx;
+    }
+
+    list._count = offset;
+    list._indices = newIndices;
+
+    list.getRawIndex = getRawIndexWithIndices;
+
+    return list;
+};
+
+/**
+ * Get model of one data item.
+ *
+ * @param {number} idx
+ */
+// FIXME Model proxy ?
+listProto.getItemModel = function (idx) {
+    var hostModel = this.hostModel;
+    return new Model(this.getRawDataItem(idx), hostModel, hostModel && hostModel.ecModel);
+};
+
+/**
+ * Create a data differ
+ * @param {module:echarts/data/List} otherList
+ * @return {module:echarts/data/DataDiffer}
+ */
+listProto.diff = function (otherList) {
+    var thisList = this;
+
+    return new DataDiffer(
+        otherList ? otherList.getIndices() : [],
+        this.getIndices(),
+        function (idx) {
+            return getId(otherList, idx);
+        },
+        function (idx) {
+            return getId(thisList, idx);
+        }
+    );
+};
+/**
+ * Get visual property.
+ * @param {string} key
+ */
+listProto.getVisual = function (key) {
+    var visual = this._visual;
+    return visual && visual[key];
+};
+
+/**
+ * Set visual property
+ * @param {string|Object} key
+ * @param {*} [value]
+ *
+ * @example
+ *  setVisual('color', color);
+ *  setVisual({
+ *      'color': color
+ *  });
+ */
+listProto.setVisual = function (key, val) {
+    if (isObject$4(key)) {
+        for (var name in key) {
+            if (key.hasOwnProperty(name)) {
+                this.setVisual(name, key[name]);
+            }
+        }
+        return;
+    }
+    this._visual = this._visual || {};
+    this._visual[key] = val;
+};
+
+/**
+ * Set layout property.
+ * @param {string|Object} key
+ * @param {*} [val]
+ */
+listProto.setLayout = function (key, val) {
+    if (isObject$4(key)) {
+        for (var name in key) {
+            if (key.hasOwnProperty(name)) {
+                this.setLayout(name, key[name]);
+            }
+        }
+        return;
+    }
+    this._layout[key] = val;
+};
+
+/**
+ * Get layout property.
+ * @param  {string} key.
+ * @return {*}
+ */
+listProto.getLayout = function (key) {
+    return this._layout[key];
+};
+
+/**
+ * Get layout of single data item
+ * @param {number} idx
+ */
+listProto.getItemLayout = function (idx) {
+    return this._itemLayouts[idx];
+};
+
+/**
+ * Set layout of single data item
+ * @param {number} idx
+ * @param {Object} layout
+ * @param {boolean=} [merge=false]
+ */
+listProto.setItemLayout = function (idx, layout, merge$$1) {
+    this._itemLayouts[idx] = merge$$1
+        ? extend(this._itemLayouts[idx] || {}, layout)
+        : layout;
+};
+
+/**
+ * Clear all layout of single data item
+ */
+listProto.clearItemLayouts = function () {
+    this._itemLayouts.length = 0;
+};
+
+/**
+ * Get visual property of single data item
+ * @param {number} idx
+ * @param {string} key
+ * @param {boolean} [ignoreParent=false]
+ */
+listProto.getItemVisual = function (idx, key, ignoreParent) {
+    var itemVisual = this._itemVisuals[idx];
+    var val = itemVisual && itemVisual[key];
+    if (val == null && !ignoreParent) {
+        // Use global visual property
+        return this.getVisual(key);
+    }
+    return val;
+};
+
+/**
+ * Set visual property of single data item
+ *
+ * @param {number} idx
+ * @param {string|Object} key
+ * @param {*} [value]
+ *
+ * @example
+ *  setItemVisual(0, 'color', color);
+ *  setItemVisual(0, {
+ *      'color': color
+ *  });
+ */
+listProto.setItemVisual = function (idx, key, value) {
+    var itemVisual = this._itemVisuals[idx] || {};
+    var hasItemVisual = this.hasItemVisual;
+    this._itemVisuals[idx] = itemVisual;
+
+    if (isObject$4(key)) {
+        for (var name in key) {
+            if (key.hasOwnProperty(name)) {
+                itemVisual[name] = key[name];
+                hasItemVisual[name] = true;
+            }
+        }
+        return;
+    }
+    itemVisual[key] = value;
+    hasItemVisual[key] = true;
+};
+
+/**
+ * Clear itemVisuals and list visual.
+ */
+listProto.clearAllVisual = function () {
+    this._visual = {};
+    this._itemVisuals = [];
+    this.hasItemVisual = {};
+};
+
+var setItemDataAndSeriesIndex = function (child) {
+    child.seriesIndex = this.seriesIndex;
+    child.dataIndex = this.dataIndex;
+    child.dataType = this.dataType;
+};
+/**
+ * Set graphic element relative to data. It can be set as null
+ * @param {number} idx
+ * @param {module:zrender/Element} [el]
+ */
+listProto.setItemGraphicEl = function (idx, el) {
+    var hostModel = this.hostModel;
+
+    if (el) {
+        // Add data index and series index for indexing the data by element
+        // Useful in tooltip
+        el.dataIndex = idx;
+        el.dataType = this.dataType;
+        el.seriesIndex = hostModel && hostModel.seriesIndex;
+        if (el.type === 'group') {
+            el.traverse(setItemDataAndSeriesIndex, el);
+        }
+    }
+
+    this._graphicEls[idx] = el;
+};
+
+/**
+ * @param {number} idx
+ * @return {module:zrender/Element}
+ */
+listProto.getItemGraphicEl = function (idx) {
+    return this._graphicEls[idx];
+};
+
+/**
+ * @param {Function} cb
+ * @param {*} context
+ */
+listProto.eachItemGraphicEl = function (cb, context) {
+    each$1(this._graphicEls, function (el, idx) {
+        if (el) {
+            cb && cb.call(context, el, idx);
+        }
+    });
+};
+
+/**
+ * Shallow clone a new list except visual and layout properties, and graph elements.
+ * New list only change the indices.
+ */
+listProto.cloneShallow = function (list) {
+    if (!list) {
+        var dimensionInfoList = map(this.dimensions, this.getDimensionInfo, this);
+        list = new List(dimensionInfoList, this.hostModel);
+    }
+
+    // FIXME
+    list._storage = this._storage;
+
+    transferProperties(list, this);
+
+    // Clone will not change the data extent and indices
+    if (this._indices) {
+        var Ctor = this._indices.constructor;
+        list._indices = new Ctor(this._indices);
+    }
+    else {
+        list._indices = null;
+    }
+    list.getRawIndex = list._indices ? getRawIndexWithIndices : getRawIndexWithoutIndices;
+
+    return list;
+};
+
+/**
+ * Wrap some method to add more feature
+ * @param {string} methodName
+ * @param {Function} injectFunction
+ */
+listProto.wrapMethod = function (methodName, injectFunction) {
+    var originalMethod = this[methodName];
+    if (typeof originalMethod !== 'function') {
+        return;
+    }
+    this.__wrappedMethods = this.__wrappedMethods || [];
+    this.__wrappedMethods.push(methodName);
+    this[methodName] = function () {
+        var res = originalMethod.apply(this, arguments);
+        return injectFunction.apply(this, [res].concat(slice(arguments)));
+    };
+};
+
+// Methods that create a new list based on this list should be listed here.
+// Notice that those method should `RETURN` the new list.
+listProto.TRANSFERABLE_METHODS = ['cloneShallow', 'downSample', 'map'];
+// Methods that change indices of this list should be listed here.
+listProto.CHANGABLE_METHODS = ['filterSelf', 'selectRange'];
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @deprecated
+ * Use `echarts/data/helper/createDimensions` instead.
+ */
+
+/**
+ * @see {module:echarts/test/ut/spec/data/completeDimensions}
+ *
+ * Complete the dimensions array, by user defined `dimension` and `encode`,
+ * and guessing from the data structure.
+ * If no 'value' dimension specified, the first no-named dimension will be
+ * named as 'value'.
+ *
+ * @param {Array.<string>} sysDims Necessary dimensions, like ['x', 'y'], which
+ *      provides not only dim template, but also default order.
+ *      properties: 'name', 'type', 'displayName'.
+ *      `name` of each item provides default coord name.
+ *      [{dimsDef: [string|Object, ...]}, ...] dimsDef of sysDim item provides default dim name, and
+ *                                    provide dims count that the sysDim required.
+ *      [{ordinalMeta}] can be specified.
+ * @param {module:echarts/data/Source|Array|Object} source or data (for compatibal with pervious)
+ * @param {Object} [opt]
+ * @param {Array.<Object|string>} [opt.dimsDef] option.series.dimensions User defined dimensions
+ *      For example: ['asdf', {name, type}, ...].
+ * @param {Object|HashMap} [opt.encodeDef] option.series.encode {x: 2, y: [3, 1], tooltip: [1, 2], label: 3}
+ * @param {string} [opt.generateCoord] Generate coord dim with the given name.
+ *                 If not specified, extra dim names will be:
+ *                 'value', 'value0', 'value1', ...
+ * @param {number} [opt.generateCoordCount] By default, the generated dim name is `generateCoord`.
+ *                 If `generateCoordCount` specified, the generated dim names will be:
+ *                 `generateCoord` + 0, `generateCoord` + 1, ...
+ *                 can be Infinity, indicate that use all of the remain columns.
+ * @param {number} [opt.dimCount] If not specified, guess by the first data item.
+ * @param {number} [opt.encodeDefaulter] If not specified, auto find the next available data dim.
+ * @return {Array.<Object>} [{
+ *      name: string mandatory,
+ *      displayName: string, the origin name in dimsDef, see source helper.
+ *                 If displayName given, the tooltip will displayed vertically.
+ *      coordDim: string mandatory,
+ *      coordDimIndex: number mandatory,
+ *      type: string optional,
+ *      otherDims: { never null/undefined
+ *          tooltip: number optional,
+ *          label: number optional,
+ *          itemName: number optional,
+ *          seriesName: number optional,
+ *      },
+ *      isExtraCoord: boolean true if coord is generated
+ *          (not specified in encode and not series specified)
+ *      other props ...
+ * }]
+ */
+function completeDimensions(sysDims, source, opt) {
+    if (!Source.isInstance(source)) {
+        source = Source.seriesDataToSource(source);
+    }
+
+    opt = opt || {};
+    sysDims = (sysDims || []).slice();
+    var dimsDef = (opt.dimsDef || []).slice();
+    var encodeDef = createHashMap(opt.encodeDef);
+    var dataDimNameMap = createHashMap();
+    var coordDimNameMap = createHashMap();
+    // var valueCandidate;
+    var result = [];
+
+    var dimCount = getDimCount(source, sysDims, dimsDef, opt.dimCount);
+
+    // Apply user defined dims (`name` and `type`) and init result.
+    for (var i = 0; i < dimCount; i++) {
+        var dimDefItem = dimsDef[i] = extend(
+            {}, isObject$1(dimsDef[i]) ? dimsDef[i] : {name: dimsDef[i]}
+        );
+        var userDimName = dimDefItem.name;
+        var resultItem = result[i] = {otherDims: {}};
+        // Name will be applied later for avoiding duplication.
+        if (userDimName != null && dataDimNameMap.get(userDimName) == null) {
+            // Only if `series.dimensions` is defined in option
+            // displayName, will be set, and dimension will be diplayed vertically in
+            // tooltip by default.
+            resultItem.name = resultItem.displayName = userDimName;
+            dataDimNameMap.set(userDimName, i);
+        }
+        dimDefItem.type != null && (resultItem.type = dimDefItem.type);
+        dimDefItem.displayName != null && (resultItem.displayName = dimDefItem.displayName);
+    }
+
+    // Set `coordDim` and `coordDimIndex` by `encodeDef` and normalize `encodeDef`.
+    encodeDef.each(function (dataDims, coordDim) {
+        dataDims = normalizeToArray(dataDims).slice();
+        var validDataDims = encodeDef.set(coordDim, []);
+        each$1(dataDims, function (resultDimIdx, idx) {
+            // The input resultDimIdx can be dim name or index.
+            isString(resultDimIdx) && (resultDimIdx = dataDimNameMap.get(resultDimIdx));
+            if (resultDimIdx != null && resultDimIdx < dimCount) {
+                validDataDims[idx] = resultDimIdx;
+                applyDim(result[resultDimIdx], coordDim, idx);
+            }
+        });
+    });
+
+    // Apply templetes and default order from `sysDims`.
+    var availDimIdx = 0;
+    each$1(sysDims, function (sysDimItem, sysDimIndex) {
+        var coordDim;
+        var sysDimItem;
+        var sysDimItemDimsDef;
+        var sysDimItemOtherDims;
+        if (isString(sysDimItem)) {
+            coordDim = sysDimItem;
+            sysDimItem = {};
+        }
+        else {
+            coordDim = sysDimItem.name;
+            var ordinalMeta = sysDimItem.ordinalMeta;
+            sysDimItem.ordinalMeta = null;
+            sysDimItem = clone(sysDimItem);
+            sysDimItem.ordinalMeta = ordinalMeta;
+            // `coordDimIndex` should not be set directly.
+            sysDimItemDimsDef = sysDimItem.dimsDef;
+            sysDimItemOtherDims = sysDimItem.otherDims;
+            sysDimItem.name = sysDimItem.coordDim = sysDimItem.coordDimIndex
+                = sysDimItem.dimsDef = sysDimItem.otherDims = null;
+        }
+
+        var dataDims = normalizeToArray(encodeDef.get(coordDim));
+        // dimensions provides default dim sequences.
+        if (!dataDims.length) {
+            for (var i = 0; i < (sysDimItemDimsDef && sysDimItemDimsDef.length || 1); i++) {
+                while (availDimIdx < result.length && result[availDimIdx].coordDim != null) {
+                    availDimIdx++;
+                }
+                availDimIdx < result.length && dataDims.push(availDimIdx++);
+            }
+        }
+
+        // Apply templates.
+        each$1(dataDims, function (resultDimIdx, coordDimIndex) {
+            var resultItem = result[resultDimIdx];
+            applyDim(defaults(resultItem, sysDimItem), coordDim, coordDimIndex);
+            if (resultItem.name == null && sysDimItemDimsDef) {
+                var sysDimItemDimsDefItem = sysDimItemDimsDef[coordDimIndex];
+                !isObject$1(sysDimItemDimsDefItem) && (sysDimItemDimsDefItem = {name: sysDimItemDimsDefItem});
+                resultItem.name = resultItem.displayName = sysDimItemDimsDefItem.name;
+                resultItem.defaultTooltip = sysDimItemDimsDefItem.defaultTooltip;
+            }
+            // FIXME refactor, currently only used in case: {otherDims: {tooltip: false}}
+            sysDimItemOtherDims && defaults(resultItem.otherDims, sysDimItemOtherDims);
+        });
+    });
+
+    function applyDim(resultItem, coordDim, coordDimIndex) {
+        if (OTHER_DIMENSIONS.get(coordDim) != null) {
+            resultItem.otherDims[coordDim] = coordDimIndex;
+        }
+        else {
+            resultItem.coordDim = coordDim;
+            resultItem.coordDimIndex = coordDimIndex;
+            coordDimNameMap.set(coordDim, true);
+        }
+    }
+
+    // Make sure the first extra dim is 'value'.
+    var generateCoord = opt.generateCoord;
+    var generateCoordCount = opt.generateCoordCount;
+    var fromZero = generateCoordCount != null;
+    generateCoordCount = generateCoord ? (generateCoordCount || 1) : 0;
+    var extra = generateCoord || 'value';
+
+    // Set dim `name` and other `coordDim` and other props.
+    for (var resultDimIdx = 0; resultDimIdx < dimCount; resultDimIdx++) {
+        var resultItem = result[resultDimIdx] = result[resultDimIdx] || {};
+        var coordDim = resultItem.coordDim;
+
+        if (coordDim == null) {
+            resultItem.coordDim = genName(
+                extra, coordDimNameMap, fromZero
+            );
+            resultItem.coordDimIndex = 0;
+            if (!generateCoord || generateCoordCount <= 0) {
+                resultItem.isExtraCoord = true;
+            }
+            generateCoordCount--;
+        }
+
+        resultItem.name == null && (resultItem.name = genName(
+            resultItem.coordDim,
+            dataDimNameMap
+        ));
+
+        if (resultItem.type == null && guessOrdinal(source, resultDimIdx, resultItem.name)) {
+            resultItem.type = 'ordinal';
+        }
+    }
+
+    return result;
+}
+
+// ??? TODO
+// Originally detect dimCount by data[0]. Should we
+// optimize it to only by sysDims and dimensions and encode.
+// So only necessary dims will be initialized.
+// But
+// (1) custom series should be considered. where other dims
+// may be visited.
+// (2) sometimes user need to calcualte bubble size or use visualMap
+// on other dimensions besides coordSys needed.
+// So, dims that is not used by system, should be shared in storage?
+function getDimCount(source, sysDims, dimsDef, optDimCount) {
+    // Note that the result dimCount should not small than columns count
+    // of data, otherwise `dataDimNameMap` checking will be incorrect.
+    var dimCount = Math.max(
+        source.dimensionsDetectCount || 1,
+        sysDims.length,
+        dimsDef.length,
+        optDimCount || 0
+    );
+    each$1(sysDims, function (sysDimItem) {
+        var sysDimItemDimsDef = sysDimItem.dimsDef;
+        sysDimItemDimsDef && (dimCount = Math.max(dimCount, sysDimItemDimsDef.length));
+    });
+    return dimCount;
+}
+
+function genName(name, map$$1, fromZero) {
+    if (fromZero || map$$1.get(name) != null) {
+        var i = 0;
+        while (map$$1.get(name + i) != null) {
+            i++;
+        }
+        name += i;
+    }
+    map$$1.set(name, true);
+    return name;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Substitute `completeDimensions`.
+ * `completeDimensions` is to be deprecated.
+ */
+/**
+ * @param {module:echarts/data/Source|module:echarts/data/List} source or data.
+ * @param {Object|Array} [opt]
+ * @param {Array.<string|Object>} [opt.coordDimensions=[]]
+ * @param {number} [opt.dimensionsCount]
+ * @param {string} [opt.generateCoord]
+ * @param {string} [opt.generateCoordCount]
+ * @param {Array.<string|Object>} [opt.dimensionsDefine=source.dimensionsDefine] Overwrite source define.
+ * @param {Object|HashMap} [opt.encodeDefine=source.encodeDefine] Overwrite source define.
+ * @return {Array.<Object>} dimensionsInfo
+ */
+var createDimensions = function (source, opt) {
+    opt = opt || {};
+    return completeDimensions(opt.coordDimensions || [], source, {
+        dimsDef: opt.dimensionsDefine || source.dimensionsDefine,
+        encodeDef: opt.encodeDefine || source.encodeDefine,
+        dimCount: opt.dimensionsCount,
+        generateCoord: opt.generateCoord,
+        generateCoordCount: opt.generateCoordCount
+    });
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Note that it is too complicated to support 3d stack by value
+ * (have to create two-dimension inverted index), so in 3d case
+ * we just support that stacked by index.
+ *
+ * @param {module:echarts/model/Series} seriesModel
+ * @param {Array.<string|Object>} dimensionInfoList The same as the input of <module:echarts/data/List>.
+ *        The input dimensionInfoList will be modified.
+ * @param {Object} [opt]
+ * @param {boolean} [opt.stackedCoordDimension=''] Specify a coord dimension if needed.
+ * @param {boolean} [opt.byIndex=false]
+ * @return {Object} calculationInfo
+ * {
+ *     stackedDimension: string
+ *     stackedByDimension: string
+ *     isStackedByIndex: boolean
+ *     stackedOverDimension: string
+ *     stackResultDimension: string
+ * }
+ */
+function enableDataStack(seriesModel, dimensionInfoList, opt) {
+    opt = opt || {};
+    var byIndex = opt.byIndex;
+    var stackedCoordDimension = opt.stackedCoordDimension;
+
+    // Compatibal: when `stack` is set as '', do not stack.
+    var mayStack = !!(seriesModel && seriesModel.get('stack'));
+    var stackedByDimInfo;
+    var stackedDimInfo;
+    var stackResultDimension;
+    var stackedOverDimension;
+
+    each$1(dimensionInfoList, function (dimensionInfo, index) {
+        if (isString(dimensionInfo)) {
+            dimensionInfoList[index] = dimensionInfo = {name: dimensionInfo};
+        }
+
+        if (mayStack && !dimensionInfo.isExtraCoord) {
+            // Find the first ordinal dimension as the stackedByDimInfo.
+            if (!byIndex && !stackedByDimInfo && dimensionInfo.ordinalMeta) {
+                stackedByDimInfo = dimensionInfo;
+            }
+            // Find the first stackable dimension as the stackedDimInfo.
+            if (!stackedDimInfo
+                && dimensionInfo.type !== 'ordinal'
+                && dimensionInfo.type !== 'time'
+                && (!stackedCoordDimension || stackedCoordDimension === dimensionInfo.coordDim)
+            ) {
+                stackedDimInfo = dimensionInfo;
+            }
+        }
+    });
+
+    if (stackedDimInfo && !byIndex && !stackedByDimInfo) {
+        // Compatible with previous design, value axis (time axis) only stack by index.
+        // It may make sense if the user provides elaborately constructed data.
+        byIndex = true;
+    }
+
+    // Add stack dimension, they can be both calculated by coordinate system in `unionExtent`.
+    // That put stack logic in List is for using conveniently in echarts extensions, but it
+    // might not be a good way.
+    if (stackedDimInfo) {
+        // Use a weird name that not duplicated with other names.
+        stackResultDimension = '__\0ecstackresult';
+        stackedOverDimension = '__\0ecstackedover';
+
+        // Create inverted index to fast query index by value.
+        if (stackedByDimInfo) {
+            stackedByDimInfo.createInvertedIndices = true;
+        }
+
+        var stackedDimCoordDim = stackedDimInfo.coordDim;
+        var stackedDimType = stackedDimInfo.type;
+        var stackedDimCoordIndex = 0;
+
+        each$1(dimensionInfoList, function (dimensionInfo) {
+            if (dimensionInfo.coordDim === stackedDimCoordDim) {
+                stackedDimCoordIndex++;
+            }
+        });
+
+        dimensionInfoList.push({
+            name: stackResultDimension,
+            coordDim: stackedDimCoordDim,
+            coordDimIndex: stackedDimCoordIndex,
+            type: stackedDimType,
+            isExtraCoord: true,
+            isCalculationCoord: true
+        });
+
+        stackedDimCoordIndex++;
+
+        dimensionInfoList.push({
+            name: stackedOverDimension,
+            // This dimension contains stack base (generally, 0), so do not set it as
+            // `stackedDimCoordDim` to avoid extent calculation, consider log scale.
+            coordDim: stackedOverDimension,
+            coordDimIndex: stackedDimCoordIndex,
+            type: stackedDimType,
+            isExtraCoord: true,
+            isCalculationCoord: true
+        });
+    }
+
+    return {
+        stackedDimension: stackedDimInfo && stackedDimInfo.name,
+        stackedByDimension: stackedByDimInfo && stackedByDimInfo.name,
+        isStackedByIndex: byIndex,
+        stackedOverDimension: stackedOverDimension,
+        stackResultDimension: stackResultDimension
+    };
+}
+
+/**
+ * @param {module:echarts/data/List} data
+ * @param {string} stackedDim
+ */
+function isDimensionStacked(data, stackedDim /*, stackedByDim*/) {
+    // Each single series only maps to one pair of axis. So we do not need to
+    // check stackByDim, whatever stacked by a dimension or stacked by index.
+    return !!stackedDim && stackedDim === data.getCalculationInfo('stackedDimension');
+        // && (
+        //     stackedByDim != null
+        //         ? stackedByDim === data.getCalculationInfo('stackedByDimension')
+        //         : data.getCalculationInfo('isStackedByIndex')
+        // );
+}
+
+/**
+ * @param {module:echarts/data/List} data
+ * @param {string} targetDim
+ * @param {string} [stackedByDim] If not input this parameter, check whether
+ *                                stacked by index.
+ * @return {string} dimension
+ */
+function getStackedDimension(data, targetDim) {
+    return isDimensionStacked(data, targetDim)
+        ? data.getCalculationInfo('stackResultDimension')
+        : targetDim;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @param {module:echarts/data/Source|Array} source Or raw data.
+ * @param {module:echarts/model/Series} seriesModel
+ * @param {Object} [opt]
+ * @param {string} [opt.generateCoord]
+ */
+function createListFromArray(source, seriesModel, opt) {
+    opt = opt || {};
+
+    if (!Source.isInstance(source)) {
+        source = Source.seriesDataToSource(source);
+    }
+
+    var coordSysName = seriesModel.get('coordinateSystem');
+    var registeredCoordSys = CoordinateSystemManager.get(coordSysName);
+
+    var coordSysDefine = getCoordSysDefineBySeries(seriesModel);
+
+    var coordSysDimDefs;
+
+    if (coordSysDefine) {
+        coordSysDimDefs = map(coordSysDefine.coordSysDims, function (dim) {
+            var dimInfo = {name: dim};
+            var axisModel = coordSysDefine.axisMap.get(dim);
+            if (axisModel) {
+                var axisType = axisModel.get('type');
+                dimInfo.type = getDimensionTypeByAxis(axisType);
+                // dimInfo.stackable = isStackable(axisType);
+            }
+            return dimInfo;
+        });
+    }
+
+    if (!coordSysDimDefs) {
+        // Get dimensions from registered coordinate system
+        coordSysDimDefs = (registeredCoordSys && (
+            registeredCoordSys.getDimensionsInfo
+                ? registeredCoordSys.getDimensionsInfo()
+                : registeredCoordSys.dimensions.slice()
+        )) || ['x', 'y'];
+    }
+
+    var dimInfoList = createDimensions(source, {
+        coordDimensions: coordSysDimDefs,
+        generateCoord: opt.generateCoord
+    });
+
+    var firstCategoryDimIndex;
+    var hasNameEncode;
+    coordSysDefine && each$1(dimInfoList, function (dimInfo, dimIndex) {
+        var coordDim = dimInfo.coordDim;
+        var categoryAxisModel = coordSysDefine.categoryAxisMap.get(coordDim);
+        if (categoryAxisModel) {
+            if (firstCategoryDimIndex == null) {
+                firstCategoryDimIndex = dimIndex;
+            }
+            dimInfo.ordinalMeta = categoryAxisModel.getOrdinalMeta();
+        }
+        if (dimInfo.otherDims.itemName != null) {
+            hasNameEncode = true;
+        }
+    });
+    if (!hasNameEncode && firstCategoryDimIndex != null) {
+        dimInfoList[firstCategoryDimIndex].otherDims.itemName = 0;
+    }
+
+    var stackCalculationInfo = enableDataStack(seriesModel, dimInfoList);
+
+    var list = new List(dimInfoList, seriesModel);
+
+    list.setCalculationInfo(stackCalculationInfo);
+
+    var dimValueGetter = (firstCategoryDimIndex != null && isNeedCompleteOrdinalData(source))
+        ? function (itemOpt, dimName, dataIndex, dimIndex) {
+            // Use dataIndex as ordinal value in categoryAxis
+            return dimIndex === firstCategoryDimIndex
+                ? dataIndex
+                : this.defaultDimValueGetter(itemOpt, dimName, dataIndex, dimIndex);
+        }
+        : null;
+
+    list.hasItemOption = false;
+    list.initData(source, null, dimValueGetter);
+
+    return list;
+}
+
+function isNeedCompleteOrdinalData(source) {
+    if (source.sourceFormat === SOURCE_FORMAT_ORIGINAL) {
+        var sampleItem = firstDataNotNull(source.data || []);
+        return sampleItem != null
+            && !isArray(getDataItemValue(sampleItem));
+    }
+}
+
+function firstDataNotNull(data) {
+    var i = 0;
+    while (i < data.length && data[i] == null) {
+        i++;
+    }
+    return data[i];
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * // Scale class management
+ * @module echarts/scale/Scale
+ */
+
+/**
+ * @param {Object} [setting]
+ */
+function Scale(setting) {
+    this._setting = setting || {};
+
+    /**
+     * Extent
+     * @type {Array.<number>}
+     * @protected
+     */
+    this._extent = [Infinity, -Infinity];
+
+    /**
+     * Step is calculated in adjustExtent
+     * @type {Array.<number>}
+     * @protected
+     */
+    this._interval = 0;
+
+    this.init && this.init.apply(this, arguments);
+}
+
+/**
+ * Parse input val to valid inner number.
+ * @param {*} val
+ * @return {number}
+ */
+Scale.prototype.parse = function (val) {
+    // Notice: This would be a trap here, If the implementation
+    // of this method depends on extent, and this method is used
+    // before extent set (like in dataZoom), it would be wrong.
+    // Nevertheless, parse does not depend on extent generally.
+    return val;
+};
+
+Scale.prototype.getSetting = function (name) {
+    return this._setting[name];
+};
+
+Scale.prototype.contain = function (val) {
+    var extent = this._extent;
+    return val >= extent[0] && val <= extent[1];
+};
+
+/**
+ * Normalize value to linear [0, 1], return 0.5 if extent span is 0
+ * @param {number} val
+ * @return {number}
+ */
+Scale.prototype.normalize = function (val) {
+    var extent = this._extent;
+    if (extent[1] === extent[0]) {
+        return 0.5;
+    }
+    return (val - extent[0]) / (extent[1] - extent[0]);
+};
+
+/**
+ * Scale normalized value
+ * @param {number} val
+ * @return {number}
+ */
+Scale.prototype.scale = function (val) {
+    var extent = this._extent;
+    return val * (extent[1] - extent[0]) + extent[0];
+};
+
+/**
+ * Set extent from data
+ * @param {Array.<number>} other
+ */
+Scale.prototype.unionExtent = function (other) {
+    var extent = this._extent;
+    other[0] < extent[0] && (extent[0] = other[0]);
+    other[1] > extent[1] && (extent[1] = other[1]);
+    // not setExtent because in log axis it may transformed to power
+    // this.setExtent(extent[0], extent[1]);
+};
+
+/**
+ * Set extent from data
+ * @param {module:echarts/data/List} data
+ * @param {string} dim
+ */
+Scale.prototype.unionExtentFromData = function (data, dim) {
+    this.unionExtent(data.getApproximateExtent(dim));
+};
+
+/**
+ * Get extent
+ * @return {Array.<number>}
+ */
+Scale.prototype.getExtent = function () {
+    return this._extent.slice();
+};
+
+/**
+ * Set extent
+ * @param {number} start
+ * @param {number} end
+ */
+Scale.prototype.setExtent = function (start, end) {
+    var thisExtent = this._extent;
+    if (!isNaN(start)) {
+        thisExtent[0] = start;
+    }
+    if (!isNaN(end)) {
+        thisExtent[1] = end;
+    }
+};
+
+/**
+ * When axis extent depends on data and no data exists,
+ * axis ticks should not be drawn, which is named 'blank'.
+ */
+Scale.prototype.isBlank = function () {
+    return this._isBlank;
+},
+
+/**
+ * When axis extent depends on data and no data exists,
+ * axis ticks should not be drawn, which is named 'blank'.
+ */
+Scale.prototype.setBlank = function (isBlank) {
+    this._isBlank = isBlank;
+};
+
+/**
+ * @abstract
+ * @param {*} tick
+ * @return {string} label of the tick.
+ */
+Scale.prototype.getLabel = null;
+
+
+enableClassExtend(Scale);
+enableClassManagement(Scale, {
+    registerWhenExtend: true
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @constructor
+ * @param {Object} [opt]
+ * @param {Object} [opt.categories=[]]
+ * @param {Object} [opt.needCollect=false]
+ * @param {Object} [opt.deduplication=false]
+ */
+function OrdinalMeta(opt) {
+
+    /**
+     * @readOnly
+     * @type {Array.<string>}
+     */
+    this.categories = opt.categories || [];
+
+    /**
+     * @private
+     * @type {boolean}
+     */
+    this._needCollect = opt.needCollect;
+
+    /**
+     * @private
+     * @type {boolean}
+     */
+    this._deduplication = opt.deduplication;
+
+    /**
+     * @private
+     * @type {boolean}
+     */
+    this._map;
+}
+
+/**
+ * @param {module:echarts/model/Model} axisModel
+ * @return {module:echarts/data/OrdinalMeta}
+ */
+OrdinalMeta.createByAxisModel = function (axisModel) {
+    var option = axisModel.option;
+    var data = option.data;
+    var categories = data && map(data, getName);
+
+    return new OrdinalMeta({
+        categories: categories,
+        needCollect: !categories,
+        // deduplication is default in axis.
+        deduplication: option.dedplication !== false
+    });
+};
+
+var proto$1 = OrdinalMeta.prototype;
+
+/**
+ * @param {string} category
+ * @return {number} ordinal
+ */
+proto$1.getOrdinal = function (category) {
+    return getOrCreateMap(this).get(category);
+};
+
+/**
+ * @param {*} category
+ * @return {number} The ordinal. If not found, return NaN.
+ */
+proto$1.parseAndCollect = function (category) {
+    var index;
+    var needCollect = this._needCollect;
+
+    // The value of category dim can be the index of the given category set.
+    // This feature is only supported when !needCollect, because we should
+    // consider a common case: a value is 2017, which is a number but is
+    // expected to be tread as a category. This case usually happen in dataset,
+    // where it happent to be no need of the index feature.
+    if (typeof category !== 'string' && !needCollect) {
+        return category;
+    }
+
+    // Optimize for the scenario:
+    // category is ['2012-01-01', '2012-01-02', ...], where the input
+    // data has been ensured not duplicate and is large data.
+    // Notice, if a dataset dimension provide categroies, usually echarts
+    // should remove duplication except user tell echarts dont do that
+    // (set axis.deduplication = false), because echarts do not know whether
+    // the values in the category dimension has duplication (consider the
+    // parallel-aqi example)
+    if (needCollect && !this._deduplication) {
+        index = this.categories.length;
+        this.categories[index] = category;
+        return index;
+    }
+
+    var map$$1 = getOrCreateMap(this);
+    index = map$$1.get(category);
+
+    if (index == null) {
+        if (needCollect) {
+            index = this.categories.length;
+            this.categories[index] = category;
+            map$$1.set(category, index);
+        }
+        else {
+            index = NaN;
+        }
+    }
+
+    return index;
+};
+
+// Consider big data, do not create map until needed.
+function getOrCreateMap(ordinalMeta) {
+    return ordinalMeta._map || (
+        ordinalMeta._map = createHashMap(ordinalMeta.categories)
+    );
+}
+
+function getName(obj) {
+    if (isObject$1(obj) && obj.value != null) {
+        return obj.value;
+    }
+    else {
+        return obj + '';
+    }
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Linear continuous scale
+ * @module echarts/coord/scale/Ordinal
+ *
+ * http://en.wikipedia.org/wiki/Level_of_measurement
+ */
+
+// FIXME only one data
+
+var scaleProto = Scale.prototype;
+
+var OrdinalScale = Scale.extend({
+
+    type: 'ordinal',
+
+    /**
+     * @param {module:echarts/data/OrdianlMeta|Array.<string>} ordinalMeta
+     */
+    init: function (ordinalMeta, extent) {
+        // Caution: Should not use instanceof, consider ec-extensions using
+        // import approach to get OrdinalMeta class.
+        if (!ordinalMeta || isArray(ordinalMeta)) {
+            ordinalMeta = new OrdinalMeta({categories: ordinalMeta});
+        }
+        this._ordinalMeta = ordinalMeta;
+        this._extent = extent || [0, ordinalMeta.categories.length - 1];
+    },
+
+    parse: function (val) {
+        return typeof val === 'string'
+            ? this._ordinalMeta.getOrdinal(val)
+            // val might be float.
+            : Math.round(val);
+    },
+
+    contain: function (rank) {
+        rank = this.parse(rank);
+        return scaleProto.contain.call(this, rank)
+            && this._ordinalMeta.categories[rank] != null;
+    },
+
+    /**
+     * Normalize given rank or name to linear [0, 1]
+     * @param {number|string} [val]
+     * @return {number}
+     */
+    normalize: function (val) {
+        return scaleProto.normalize.call(this, this.parse(val));
+    },
+
+    scale: function (val) {
+        return Math.round(scaleProto.scale.call(this, val));
+    },
+
+    /**
+     * @return {Array}
+     */
+    getTicks: function () {
+        var ticks = [];
+        var extent = this._extent;
+        var rank = extent[0];
+
+        while (rank <= extent[1]) {
+            ticks.push(rank);
+            rank++;
+        }
+
+        return ticks;
+    },
+
+    /**
+     * Get item on rank n
+     * @param {number} n
+     * @return {string}
+     */
+    getLabel: function (n) {
+        if (!this.isBlank()) {
+            // Note that if no data, ordinalMeta.categories is an empty array.
+            return this._ordinalMeta.categories[n];
+        }
+    },
+
+    /**
+     * @return {number}
+     */
+    count: function () {
+        return this._extent[1] - this._extent[0] + 1;
+    },
+
+    /**
+     * @override
+     */
+    unionExtentFromData: function (data, dim) {
+        this.unionExtent(data.getApproximateExtent(dim));
+    },
+
+    getOrdinalMeta: function () {
+        return this._ordinalMeta;
+    },
+
+    niceTicks: noop,
+    niceExtent: noop
+});
+
+/**
+ * @return {module:echarts/scale/Time}
+ */
+OrdinalScale.create = function () {
+    return new OrdinalScale();
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * For testable.
+ */
+
+var roundNumber$1 = round$1;
+
+/**
+ * @param {Array.<number>} extent Both extent[0] and extent[1] should be valid number.
+ *                                Should be extent[0] < extent[1].
+ * @param {number} splitNumber splitNumber should be >= 1.
+ * @param {number} [minInterval]
+ * @param {number} [maxInterval]
+ * @return {Object} {interval, intervalPrecision, niceTickExtent}
+ */
+function intervalScaleNiceTicks(extent, splitNumber, minInterval, maxInterval) {
+    var result = {};
+    var span = extent[1] - extent[0];
+
+    var interval = result.interval = nice(span / splitNumber, true);
+    if (minInterval != null && interval < minInterval) {
+        interval = result.interval = minInterval;
+    }
+    if (maxInterval != null && interval > maxInterval) {
+        interval = result.interval = maxInterval;
+    }
+    // Tow more digital for tick.
+    var precision = result.intervalPrecision = getIntervalPrecision(interval);
+    // Niced extent inside original extent
+    var niceTickExtent = result.niceTickExtent = [
+        roundNumber$1(Math.ceil(extent[0] / interval) * interval, precision),
+        roundNumber$1(Math.floor(extent[1] / interval) * interval, precision)
+    ];
+
+    fixExtent(niceTickExtent, extent);
+
+    return result;
+}
+
+/**
+ * @param {number} interval
+ * @return {number} interval precision
+ */
+function getIntervalPrecision(interval) {
+    // Tow more digital for tick.
+    return getPrecisionSafe(interval) + 2;
+}
+
+function clamp(niceTickExtent, idx, extent) {
+    niceTickExtent[idx] = Math.max(Math.min(niceTickExtent[idx], extent[1]), extent[0]);
+}
+
+// In some cases (e.g., splitNumber is 1), niceTickExtent may be out of extent.
+function fixExtent(niceTickExtent, extent) {
+    !isFinite(niceTickExtent[0]) && (niceTickExtent[0] = extent[0]);
+    !isFinite(niceTickExtent[1]) && (niceTickExtent[1] = extent[1]);
+    clamp(niceTickExtent, 0, extent);
+    clamp(niceTickExtent, 1, extent);
+    if (niceTickExtent[0] > niceTickExtent[1]) {
+        niceTickExtent[0] = niceTickExtent[1];
+    }
+}
+
+function intervalScaleGetTicks(interval, extent, niceTickExtent, intervalPrecision) {
+    var ticks = [];
+
+    // If interval is 0, return [];
+    if (!interval) {
+        return ticks;
+    }
+
+    // Consider this case: using dataZoom toolbox, zoom and zoom.
+    var safeLimit = 10000;
+
+    if (extent[0] < niceTickExtent[0]) {
+        ticks.push(extent[0]);
+    }
+    var tick = niceTickExtent[0];
+
+    while (tick <= niceTickExtent[1]) {
+        ticks.push(tick);
+        // Avoid rounding error
+        tick = roundNumber$1(tick + interval, intervalPrecision);
+        if (tick === ticks[ticks.length - 1]) {
+            // Consider out of safe float point, e.g.,
+            // -3711126.9907707 + 2e-10 === -3711126.9907707
+            break;
+        }
+        if (ticks.length > safeLimit) {
+            return [];
+        }
+    }
+    // Consider this case: the last item of ticks is smaller
+    // than niceTickExtent[1] and niceTickExtent[1] === extent[1].
+    if (extent[1] > (ticks.length ? ticks[ticks.length - 1] : niceTickExtent[1])) {
+        ticks.push(extent[1]);
+    }
+
+    return ticks;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Interval scale
+ * @module echarts/scale/Interval
+ */
+
+
+var roundNumber = round$1;
+
+/**
+ * @alias module:echarts/coord/scale/Interval
+ * @constructor
+ */
+var IntervalScale = Scale.extend({
+
+    type: 'interval',
+
+    _interval: 0,
+
+    _intervalPrecision: 2,
+
+    setExtent: function (start, end) {
+        var thisExtent = this._extent;
+        //start,end may be a Number like '25',so...
+        if (!isNaN(start)) {
+            thisExtent[0] = parseFloat(start);
+        }
+        if (!isNaN(end)) {
+            thisExtent[1] = parseFloat(end);
+        }
+    },
+
+    unionExtent: function (other) {
+        var extent = this._extent;
+        other[0] < extent[0] && (extent[0] = other[0]);
+        other[1] > extent[1] && (extent[1] = other[1]);
+
+        // unionExtent may called by it's sub classes
+        IntervalScale.prototype.setExtent.call(this, extent[0], extent[1]);
+    },
+    /**
+     * Get interval
+     */
+    getInterval: function () {
+        return this._interval;
+    },
+
+    /**
+     * Set interval
+     */
+    setInterval: function (interval) {
+        this._interval = interval;
+        // Dropped auto calculated niceExtent and use user setted extent
+        // We assume user wan't to set both interval, min, max to get a better result
+        this._niceExtent = this._extent.slice();
+
+        this._intervalPrecision = getIntervalPrecision(interval);
+    },
+
+    /**
+     * @return {Array.<number>}
+     */
+    getTicks: function () {
+        return intervalScaleGetTicks(
+            this._interval, this._extent, this._niceExtent, this._intervalPrecision
+        );
+    },
+
+    /**
+     * @param {number} data
+     * @param {Object} [opt]
+     * @param {number|string} [opt.precision] If 'auto', use nice presision.
+     * @param {boolean} [opt.pad] returns 1.50 but not 1.5 if precision is 2.
+     * @return {string}
+     */
+    getLabel: function (data, opt) {
+        if (data == null) {
+            return '';
+        }
+
+        var precision = opt && opt.precision;
+
+        if (precision == null) {
+            precision = getPrecisionSafe(data) || 0;
+        }
+        else if (precision === 'auto') {
+            // Should be more precise then tick.
+            precision = this._intervalPrecision;
+        }
+
+        // (1) If `precision` is set, 12.005 should be display as '12.00500'.
+        // (2) Use roundNumber (toFixed) to avoid scientific notation like '3.5e-7'.
+        data = roundNumber(data, precision, true);
+
+        return addCommas(data);
+    },
+
+    /**
+     * Update interval and extent of intervals for nice ticks
+     *
+     * @param {number} [splitNumber = 5] Desired number of ticks
+     * @param {number} [minInterval]
+     * @param {number} [maxInterval]
+     */
+    niceTicks: function (splitNumber, minInterval, maxInterval) {
+        splitNumber = splitNumber || 5;
+        var extent = this._extent;
+        var span = extent[1] - extent[0];
+        if (!isFinite(span)) {
+            return;
+        }
+        // User may set axis min 0 and data are all negative
+        // FIXME If it needs to reverse ?
+        if (span < 0) {
+            span = -span;
+            extent.reverse();
+        }
+
+        var result = intervalScaleNiceTicks(
+            extent, splitNumber, minInterval, maxInterval
+        );
+
+        this._intervalPrecision = result.intervalPrecision;
+        this._interval = result.interval;
+        this._niceExtent = result.niceTickExtent;
+    },
+
+    /**
+     * Nice extent.
+     * @param {Object} opt
+     * @param {number} [opt.splitNumber = 5] Given approx tick number
+     * @param {boolean} [opt.fixMin=false]
+     * @param {boolean} [opt.fixMax=false]
+     * @param {boolean} [opt.minInterval]
+     * @param {boolean} [opt.maxInterval]
+     */
+    niceExtent: function (opt) {
+        var extent = this._extent;
+        // If extent start and end are same, expand them
+        if (extent[0] === extent[1]) {
+            if (extent[0] !== 0) {
+                // Expand extent
+                var expandSize = extent[0];
+                // In the fowllowing case
+                //      Axis has been fixed max 100
+                //      Plus data are all 100 and axis extent are [100, 100].
+                // Extend to the both side will cause expanded max is larger than fixed max.
+                // So only expand to the smaller side.
+                if (!opt.fixMax) {
+                    extent[1] += expandSize / 2;
+                    extent[0] -= expandSize / 2;
+                }
+                else {
+                    extent[0] -= expandSize / 2;
+                }
+            }
+            else {
+                extent[1] = 1;
+            }
+        }
+        var span = extent[1] - extent[0];
+        // If there are no data and extent are [Infinity, -Infinity]
+        if (!isFinite(span)) {
+            extent[0] = 0;
+            extent[1] = 1;
+        }
+
+        this.niceTicks(opt.splitNumber, opt.minInterval, opt.maxInterval);
+
+        // var extent = this._extent;
+        var interval = this._interval;
+
+        if (!opt.fixMin) {
+            extent[0] = roundNumber(Math.floor(extent[0] / interval) * interval);
+        }
+        if (!opt.fixMax) {
+            extent[1] = roundNumber(Math.ceil(extent[1] / interval) * interval);
+        }
+    }
+});
+
+/**
+ * @return {module:echarts/scale/Time}
+ */
+IntervalScale.create = function () {
+    return new IntervalScale();
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var STACK_PREFIX = '__ec_stack_';
+var LARGE_BAR_MIN_WIDTH = 0.5;
+
+var LargeArr = typeof Float32Array !== 'undefined' ? Float32Array : Array;
+
+function getSeriesStackId(seriesModel) {
+    return seriesModel.get('stack') || STACK_PREFIX + seriesModel.seriesIndex;
+}
+
+function getAxisKey(axis) {
+    return axis.dim + axis.index;
+}
+
+/**
+ * @param {Object} opt
+ * @param {module:echarts/coord/Axis} opt.axis Only support category axis currently.
+ * @param {number} opt.count Positive interger.
+ * @param {number} [opt.barWidth]
+ * @param {number} [opt.barMaxWidth]
+ * @param {number} [opt.barGap]
+ * @param {number} [opt.barCategoryGap]
+ * @return {Object} {width, offset, offsetCenter} If axis.type is not 'category', return undefined.
+ */
+function getLayoutOnAxis(opt) {
+    var params = [];
+    var baseAxis = opt.axis;
+    var axisKey = 'axis0';
+
+    if (baseAxis.type !== 'category') {
+        return;
+    }
+    var bandWidth = baseAxis.getBandWidth();
+
+    for (var i = 0; i < opt.count || 0; i++) {
+        params.push(defaults({
+            bandWidth: bandWidth,
+            axisKey: axisKey,
+            stackId: STACK_PREFIX + i
+        }, opt));
+    }
+    var widthAndOffsets = doCalBarWidthAndOffset(params);
+
+    var result = [];
+    for (var i = 0; i < opt.count; i++) {
+        var item = widthAndOffsets[axisKey][STACK_PREFIX + i];
+        item.offsetCenter = item.offset + item.width / 2;
+        result.push(item);
+    }
+
+    return result;
+}
+
+function prepareLayoutBarSeries(seriesType, ecModel) {
+    var seriesModels = [];
+    ecModel.eachSeriesByType(seriesType, function (seriesModel) {
+        // Check series coordinate, do layout for cartesian2d only
+        if (isOnCartesian(seriesModel) && !isInLargeMode(seriesModel)) {
+            seriesModels.push(seriesModel);
+        }
+    });
+    return seriesModels;
+}
+
+function makeColumnLayout(barSeries) {
+    var seriesInfoList = [];
+    each$1(barSeries, function (seriesModel) {
+        var data = seriesModel.getData();
+        var cartesian = seriesModel.coordinateSystem;
+        var baseAxis = cartesian.getBaseAxis();
+        var axisExtent = baseAxis.getExtent();
+        var bandWidth = baseAxis.type === 'category'
+            ? baseAxis.getBandWidth()
+            : (Math.abs(axisExtent[1] - axisExtent[0]) / data.count());
+
+        var barWidth = parsePercent$1(
+            seriesModel.get('barWidth'), bandWidth
+        );
+        var barMaxWidth = parsePercent$1(
+            seriesModel.get('barMaxWidth'), bandWidth
+        );
+        var barGap = seriesModel.get('barGap');
+        var barCategoryGap = seriesModel.get('barCategoryGap');
+
+        seriesInfoList.push({
+            bandWidth: bandWidth,
+            barWidth: barWidth,
+            barMaxWidth: barMaxWidth,
+            barGap: barGap,
+            barCategoryGap: barCategoryGap,
+            axisKey: getAxisKey(baseAxis),
+            stackId: getSeriesStackId(seriesModel)
+        });
+    });
+
+    return doCalBarWidthAndOffset(seriesInfoList);
+}
+
+function doCalBarWidthAndOffset(seriesInfoList) {
+    // Columns info on each category axis. Key is cartesian name
+    var columnsMap = {};
+
+    each$1(seriesInfoList, function (seriesInfo, idx) {
+        var axisKey = seriesInfo.axisKey;
+        var bandWidth = seriesInfo.bandWidth;
+        var columnsOnAxis = columnsMap[axisKey] || {
+            bandWidth: bandWidth,
+            remainedWidth: bandWidth,
+            autoWidthCount: 0,
+            categoryGap: '20%',
+            gap: '30%',
+            stacks: {}
+        };
+        var stacks = columnsOnAxis.stacks;
+        columnsMap[axisKey] = columnsOnAxis;
+
+        var stackId = seriesInfo.stackId;
+
+        if (!stacks[stackId]) {
+            columnsOnAxis.autoWidthCount++;
+        }
+        stacks[stackId] = stacks[stackId] || {
+            width: 0,
+            maxWidth: 0
+        };
+
+        // Caution: In a single coordinate system, these barGrid attributes
+        // will be shared by series. Consider that they have default values,
+        // only the attributes set on the last series will work.
+        // Do not change this fact unless there will be a break change.
+
+        // TODO
+        var barWidth = seriesInfo.barWidth;
+        if (barWidth && !stacks[stackId].width) {
+            // See #6312, do not restrict width.
+            stacks[stackId].width = barWidth;
+            barWidth = Math.min(columnsOnAxis.remainedWidth, barWidth);
+            columnsOnAxis.remainedWidth -= barWidth;
+        }
+
+        var barMaxWidth = seriesInfo.barMaxWidth;
+        barMaxWidth && (stacks[stackId].maxWidth = barMaxWidth);
+        var barGap = seriesInfo.barGap;
+        (barGap != null) && (columnsOnAxis.gap = barGap);
+        var barCategoryGap = seriesInfo.barCategoryGap;
+        (barCategoryGap != null) && (columnsOnAxis.categoryGap = barCategoryGap);
+    });
+
+    var result = {};
+
+    each$1(columnsMap, function (columnsOnAxis, coordSysName) {
+
+        result[coordSysName] = {};
+
+        var stacks = columnsOnAxis.stacks;
+        var bandWidth = columnsOnAxis.bandWidth;
+        var categoryGap = parsePercent$1(columnsOnAxis.categoryGap, bandWidth);
+        var barGapPercent = parsePercent$1(columnsOnAxis.gap, 1);
+
+        var remainedWidth = columnsOnAxis.remainedWidth;
+        var autoWidthCount = columnsOnAxis.autoWidthCount;
+        var autoWidth = (remainedWidth - categoryGap)
+            / (autoWidthCount + (autoWidthCount - 1) * barGapPercent);
+        autoWidth = Math.max(autoWidth, 0);
+
+        // Find if any auto calculated bar exceeded maxBarWidth
+        each$1(stacks, function (column, stack) {
+            var maxWidth = column.maxWidth;
+            if (maxWidth && maxWidth < autoWidth) {
+                maxWidth = Math.min(maxWidth, remainedWidth);
+                if (column.width) {
+                    maxWidth = Math.min(maxWidth, column.width);
+                }
+                remainedWidth -= maxWidth;
+                column.width = maxWidth;
+                autoWidthCount--;
+            }
+        });
+
+        // Recalculate width again
+        autoWidth = (remainedWidth - categoryGap)
+            / (autoWidthCount + (autoWidthCount - 1) * barGapPercent);
+        autoWidth = Math.max(autoWidth, 0);
+
+        var widthSum = 0;
+        var lastColumn;
+        each$1(stacks, function (column, idx) {
+            if (!column.width) {
+                column.width = autoWidth;
+            }
+            lastColumn = column;
+            widthSum += column.width * (1 + barGapPercent);
+        });
+        if (lastColumn) {
+            widthSum -= lastColumn.width * barGapPercent;
+        }
+
+        var offset = -widthSum / 2;
+        each$1(stacks, function (column, stackId) {
+            result[coordSysName][stackId] = result[coordSysName][stackId] || {
+                offset: offset,
+                width: column.width
+            };
+
+            offset += column.width * (1 + barGapPercent);
+        });
+    });
+
+    return result;
+}
+
+/**
+ * @param {Object} barWidthAndOffset The result of makeColumnLayout
+ * @param {module:echarts/coord/Axis} axis
+ * @param {module:echarts/model/Series} [seriesModel] If not provided, return all.
+ * @return {Object} {stackId: {offset, width}} or {offset, width} if seriesModel provided.
+ */
+function retrieveColumnLayout(barWidthAndOffset, axis, seriesModel) {
+    if (barWidthAndOffset && axis) {
+        var result = barWidthAndOffset[getAxisKey(axis)];
+        if (result != null && seriesModel != null) {
+            result = result[getSeriesStackId(seriesModel)];
+        }
+        return result;
+    }
+}
+
+/**
+ * @param {string} seriesType
+ * @param {module:echarts/model/Global} ecModel
+ */
+function layout(seriesType, ecModel) {
+
+    var seriesModels = prepareLayoutBarSeries(seriesType, ecModel);
+    var barWidthAndOffset = makeColumnLayout(seriesModels);
+
+    var lastStackCoords = {};
+    each$1(seriesModels, function (seriesModel) {
+
+        var data = seriesModel.getData();
+        var cartesian = seriesModel.coordinateSystem;
+        var baseAxis = cartesian.getBaseAxis();
+
+        var stackId = getSeriesStackId(seriesModel);
+        var columnLayoutInfo = barWidthAndOffset[getAxisKey(baseAxis)][stackId];
+        var columnOffset = columnLayoutInfo.offset;
+        var columnWidth = columnLayoutInfo.width;
+        var valueAxis = cartesian.getOtherAxis(baseAxis);
+
+        var barMinHeight = seriesModel.get('barMinHeight') || 0;
+
+        lastStackCoords[stackId] = lastStackCoords[stackId] || [];
+        data.setLayout({
+            offset: columnOffset,
+            size: columnWidth
+        });
+
+        var valueDim = data.mapDimension(valueAxis.dim);
+        var baseDim = data.mapDimension(baseAxis.dim);
+        var stacked = isDimensionStacked(data, valueDim /*, baseDim*/);
+        var isValueAxisH = valueAxis.isHorizontal();
+
+        var valueAxisStart = getValueAxisStart(baseAxis, valueAxis, stacked);
+
+        for (var idx = 0, len = data.count(); idx < len; idx++) {
+            var value = data.get(valueDim, idx);
+            var baseValue = data.get(baseDim, idx);
+
+            if (isNaN(value)) {
+                continue;
+            }
+
+            var sign = value >= 0 ? 'p' : 'n';
+            var baseCoord = valueAxisStart;
+
+            // Because of the barMinHeight, we can not use the value in
+            // stackResultDimension directly.
+            if (stacked) {
+                // Only ordinal axis can be stacked.
+                if (!lastStackCoords[stackId][baseValue]) {
+                    lastStackCoords[stackId][baseValue] = {
+                        p: valueAxisStart, // Positive stack
+                        n: valueAxisStart  // Negative stack
+                    };
+                }
+                // Should also consider #4243
+                baseCoord = lastStackCoords[stackId][baseValue][sign];
+            }
+
+            var x;
+            var y;
+            var width;
+            var height;
+
+            if (isValueAxisH) {
+                var coord = cartesian.dataToPoint([value, baseValue]);
+                x = baseCoord;
+                y = coord[1] + columnOffset;
+                width = coord[0] - valueAxisStart;
+                height = columnWidth;
+
+                if (Math.abs(width) < barMinHeight) {
+                    width = (width < 0 ? -1 : 1) * barMinHeight;
+                }
+                stacked && (lastStackCoords[stackId][baseValue][sign] += width);
+            }
+            else {
+                var coord = cartesian.dataToPoint([baseValue, value]);
+                x = coord[0] + columnOffset;
+                y = baseCoord;
+                width = columnWidth;
+                height = coord[1] - valueAxisStart;
+
+                if (Math.abs(height) < barMinHeight) {
+                    // Include zero to has a positive bar
+                    height = (height <= 0 ? -1 : 1) * barMinHeight;
+                }
+                stacked && (lastStackCoords[stackId][baseValue][sign] += height);
+            }
+
+            data.setItemLayout(idx, {
+                x: x,
+                y: y,
+                width: width,
+                height: height
+            });
+        }
+
+    }, this);
+}
+
+// TODO: Do not support stack in large mode yet.
+var largeLayout = {
+
+    seriesType: 'bar',
+
+    plan: createRenderPlanner(),
+
+    reset: function (seriesModel) {
+        if (!isOnCartesian(seriesModel) || !isInLargeMode(seriesModel)) {
+            return;
+        }
+
+        var data = seriesModel.getData();
+        var cartesian = seriesModel.coordinateSystem;
+        var baseAxis = cartesian.getBaseAxis();
+        var valueAxis = cartesian.getOtherAxis(baseAxis);
+        var valueDim = data.mapDimension(valueAxis.dim);
+        var baseDim = data.mapDimension(baseAxis.dim);
+        var valueAxisHorizontal = valueAxis.isHorizontal();
+        var valueDimIdx = valueAxisHorizontal ? 0 : 1;
+
+        var barWidth = retrieveColumnLayout(
+            makeColumnLayout([seriesModel]), baseAxis, seriesModel
+        ).width;
+        if (!(barWidth > LARGE_BAR_MIN_WIDTH)) { // jshint ignore:line
+            barWidth = LARGE_BAR_MIN_WIDTH;
+        }
+
+        return {progress: progress};
+
+        function progress(params, data) {
+            var largePoints = new LargeArr(params.count * 2);
+            var dataIndex;
+            var coord = [];
+            var valuePair = [];
+            var offset = 0;
+
+            while ((dataIndex = params.next()) != null) {
+                valuePair[valueDimIdx] = data.get(valueDim, dataIndex);
+                valuePair[1 - valueDimIdx] = data.get(baseDim, dataIndex);
+
+                coord = cartesian.dataToPoint(valuePair, null, coord);
+                largePoints[offset++] = coord[0];
+                largePoints[offset++] = coord[1];
+            }
+
+            data.setLayout({
+                largePoints: largePoints,
+                barWidth: barWidth,
+                valueAxisStart: getValueAxisStart(baseAxis, valueAxis, false),
+                valueAxisHorizontal: valueAxisHorizontal
+            });
+        }
+    }
+};
+
+function isOnCartesian(seriesModel) {
+    return seriesModel.coordinateSystem && seriesModel.coordinateSystem.type === 'cartesian2d';
+}
+
+function isInLargeMode(seriesModel) {
+    return seriesModel.pipelineContext && seriesModel.pipelineContext.large;
+}
+
+function getValueAxisStart(baseAxis, valueAxis, stacked) {
+    return (
+        indexOf(baseAxis.getAxesOnZeroOf(), valueAxis) >= 0
+        || stacked
+    )
+    ? valueAxis.toGlobalCoord(valueAxis.dataToCoord(0))
+    : valueAxis.getGlobalExtent()[0];
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/*
+* The `scaleLevels` references to d3.js. The use of the source
+* code of this file is also subject to the terms and consitions
+* of its license (BSD-3Clause, see <echarts/src/licenses/LICENSE-d3>).
+*/
+
+// [About UTC and local time zone]:
+// In most cases, `number.parseDate` will treat input data string as local time
+// (except time zone is specified in time string). And `format.formateTime` returns
+// local time by default. option.useUTC is false by default. This design have
+// concidered these common case:
+// (1) Time that is persistent in server is in UTC, but it is needed to be diplayed
+// in local time by default.
+// (2) By default, the input data string (e.g., '2011-01-02') should be displayed
+// as its original time, without any time difference.
+
+var intervalScaleProto = IntervalScale.prototype;
+
+var mathCeil = Math.ceil;
+var mathFloor = Math.floor;
+var ONE_SECOND = 1000;
+var ONE_MINUTE = ONE_SECOND * 60;
+var ONE_HOUR = ONE_MINUTE * 60;
+var ONE_DAY = ONE_HOUR * 24;
+
+// FIXME å…¬ç”¨ï¼Ÿ
+var bisect = function (a, x, lo, hi) {
+    while (lo < hi) {
+        var mid = lo + hi >>> 1;
+        if (a[mid][1] < x) {
+            lo = mid + 1;
+        }
+        else {
+            hi  = mid;
+        }
+    }
+    return lo;
+};
+
+/**
+ * @alias module:echarts/coord/scale/Time
+ * @constructor
+ */
+var TimeScale = IntervalScale.extend({
+    type: 'time',
+
+    /**
+     * @override
+     */
+    getLabel: function (val) {
+        var stepLvl = this._stepLvl;
+
+        var date = new Date(val);
+
+        return formatTime(stepLvl[0], date, this.getSetting('useUTC'));
+    },
+
+    /**
+     * @override
+     */
+    niceExtent: function (opt) {
+        var extent = this._extent;
+        // If extent start and end are same, expand them
+        if (extent[0] === extent[1]) {
+            // Expand extent
+            extent[0] -= ONE_DAY;
+            extent[1] += ONE_DAY;
+        }
+        // If there are no data and extent are [Infinity, -Infinity]
+        if (extent[1] === -Infinity && extent[0] === Infinity) {
+            var d = new Date();
+            extent[1] = +new Date(d.getFullYear(), d.getMonth(), d.getDate());
+            extent[0] = extent[1] - ONE_DAY;
+        }
+
+        this.niceTicks(opt.splitNumber, opt.minInterval, opt.maxInterval);
+
+        // var extent = this._extent;
+        var interval = this._interval;
+
+        if (!opt.fixMin) {
+            extent[0] = round$1(mathFloor(extent[0] / interval) * interval);
+        }
+        if (!opt.fixMax) {
+            extent[1] = round$1(mathCeil(extent[1] / interval) * interval);
+        }
+    },
+
+    /**
+     * @override
+     */
+    niceTicks: function (approxTickNum, minInterval, maxInterval) {
+        approxTickNum = approxTickNum || 10;
+
+        var extent = this._extent;
+        var span = extent[1] - extent[0];
+        var approxInterval = span / approxTickNum;
+
+        if (minInterval != null && approxInterval < minInterval) {
+            approxInterval = minInterval;
+        }
+        if (maxInterval != null && approxInterval > maxInterval) {
+            approxInterval = maxInterval;
+        }
+
+        var scaleLevelsLen = scaleLevels.length;
+        var idx = bisect(scaleLevels, approxInterval, 0, scaleLevelsLen);
+
+        var level = scaleLevels[Math.min(idx, scaleLevelsLen - 1)];
+        var interval = level[1];
+        // Same with interval scale if span is much larger than 1 year
+        if (level[0] === 'year') {
+            var yearSpan = span / interval;
+
+            // From "Nice Numbers for Graph Labels" of Graphic Gems
+            // var niceYearSpan = numberUtil.nice(yearSpan, false);
+            var yearStep = nice(yearSpan / approxTickNum, true);
+
+            interval *= yearStep;
+        }
+
+        var timezoneOffset = this.getSetting('useUTC')
+            ? 0 : (new Date(+extent[0] || +extent[1])).getTimezoneOffset() * 60 * 1000;
+        var niceExtent = [
+            Math.round(mathCeil((extent[0] - timezoneOffset) / interval) * interval + timezoneOffset),
+            Math.round(mathFloor((extent[1] - timezoneOffset) / interval) * interval + timezoneOffset)
+        ];
+
+        fixExtent(niceExtent, extent);
+
+        this._stepLvl = level;
+        // Interval will be used in getTicks
+        this._interval = interval;
+        this._niceExtent = niceExtent;
+    },
+
+    parse: function (val) {
+        // val might be float.
+        return +parseDate(val);
+    }
+});
+
+each$1(['contain', 'normalize'], function (methodName) {
+    TimeScale.prototype[methodName] = function (val) {
+        return intervalScaleProto[methodName].call(this, this.parse(val));
+    };
+});
+
+// Steps from d3, see the license statement at the top of this file.
+var scaleLevels = [
+    // Format              interval
+    ['hh:mm:ss', ONE_SECOND],          // 1s
+    ['hh:mm:ss', ONE_SECOND * 5],      // 5s
+    ['hh:mm:ss', ONE_SECOND * 10],     // 10s
+    ['hh:mm:ss', ONE_SECOND * 15],     // 15s
+    ['hh:mm:ss', ONE_SECOND * 30],     // 30s
+    ['hh:mm\nMM-dd', ONE_MINUTE],      // 1m
+    ['hh:mm\nMM-dd', ONE_MINUTE * 5],  // 5m
+    ['hh:mm\nMM-dd', ONE_MINUTE * 10], // 10m
+    ['hh:mm\nMM-dd', ONE_MINUTE * 15], // 15m
+    ['hh:mm\nMM-dd', ONE_MINUTE * 30], // 30m
+    ['hh:mm\nMM-dd', ONE_HOUR],        // 1h
+    ['hh:mm\nMM-dd', ONE_HOUR * 2],    // 2h
+    ['hh:mm\nMM-dd', ONE_HOUR * 6],    // 6h
+    ['hh:mm\nMM-dd', ONE_HOUR * 12],   // 12h
+    ['MM-dd\nyyyy', ONE_DAY],          // 1d
+    ['MM-dd\nyyyy', ONE_DAY * 2],      // 2d
+    ['MM-dd\nyyyy', ONE_DAY * 3],      // 3d
+    ['MM-dd\nyyyy', ONE_DAY * 4],      // 4d
+    ['MM-dd\nyyyy', ONE_DAY * 5],      // 5d
+    ['MM-dd\nyyyy', ONE_DAY * 6],      // 6d
+    ['week', ONE_DAY * 7],             // 7d
+    ['MM-dd\nyyyy', ONE_DAY * 10],     // 10d
+    ['week', ONE_DAY * 14],            // 2w
+    ['week', ONE_DAY * 21],            // 3w
+    ['month', ONE_DAY * 31],           // 1M
+    ['week', ONE_DAY * 42],            // 6w
+    ['month', ONE_DAY * 62],           // 2M
+    ['week', ONE_DAY * 42],            // 10w
+    ['quarter', ONE_DAY * 380 / 4],    // 3M
+    ['month', ONE_DAY * 31 * 4],       // 4M
+    ['month', ONE_DAY * 31 * 5],       // 5M
+    ['half-year', ONE_DAY * 380 / 2],  // 6M
+    ['month', ONE_DAY * 31 * 8],       // 8M
+    ['month', ONE_DAY * 31 * 10],      // 10M
+    ['year', ONE_DAY * 380]            // 1Y
+];
+
+/**
+ * @param {module:echarts/model/Model}
+ * @return {module:echarts/scale/Time}
+ */
+TimeScale.create = function (model) {
+    return new TimeScale({useUTC: model.ecModel.get('useUTC')});
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Log scale
+ * @module echarts/scale/Log
+ */
+
+// Use some method of IntervalScale
+var scaleProto$1 = Scale.prototype;
+var intervalScaleProto$1 = IntervalScale.prototype;
+
+var getPrecisionSafe$1 = getPrecisionSafe;
+var roundingErrorFix = round$1;
+
+var mathFloor$1 = Math.floor;
+var mathCeil$1 = Math.ceil;
+var mathPow$1 = Math.pow;
+
+var mathLog = Math.log;
+
+var LogScale = Scale.extend({
+
+    type: 'log',
+
+    base: 10,
+
+    $constructor: function () {
+        Scale.apply(this, arguments);
+        this._originalScale = new IntervalScale();
+    },
+
+    /**
+     * @return {Array.<number>}
+     */
+    getTicks: function () {
+        var originalScale = this._originalScale;
+        var extent = this._extent;
+        var originalExtent = originalScale.getExtent();
+
+        return map(intervalScaleProto$1.getTicks.call(this), function (val) {
+            var powVal = round$1(mathPow$1(this.base, val));
+
+            // Fix #4158
+            powVal = (val === extent[0] && originalScale.__fixMin)
+                ? fixRoundingError(powVal, originalExtent[0])
+                : powVal;
+            powVal = (val === extent[1] && originalScale.__fixMax)
+                ? fixRoundingError(powVal, originalExtent[1])
+                : powVal;
+
+            return powVal;
+        }, this);
+    },
+
+    /**
+     * @param {number} val
+     * @return {string}
+     */
+    getLabel: intervalScaleProto$1.getLabel,
+
+    /**
+     * @param  {number} val
+     * @return {number}
+     */
+    scale: function (val) {
+        val = scaleProto$1.scale.call(this, val);
+        return mathPow$1(this.base, val);
+    },
+
+    /**
+     * @param {number} start
+     * @param {number} end
+     */
+    setExtent: function (start, end) {
+        var base = this.base;
+        start = mathLog(start) / mathLog(base);
+        end = mathLog(end) / mathLog(base);
+        intervalScaleProto$1.setExtent.call(this, start, end);
+    },
+
+    /**
+     * @return {number} end
+     */
+    getExtent: function () {
+        var base = this.base;
+        var extent = scaleProto$1.getExtent.call(this);
+        extent[0] = mathPow$1(base, extent[0]);
+        extent[1] = mathPow$1(base, extent[1]);
+
+        // Fix #4158
+        var originalScale = this._originalScale;
+        var originalExtent = originalScale.getExtent();
+        originalScale.__fixMin && (extent[0] = fixRoundingError(extent[0], originalExtent[0]));
+        originalScale.__fixMax && (extent[1] = fixRoundingError(extent[1], originalExtent[1]));
+
+        return extent;
+    },
+
+    /**
+     * @param  {Array.<number>} extent
+     */
+    unionExtent: function (extent) {
+        this._originalScale.unionExtent(extent);
+
+        var base = this.base;
+        extent[0] = mathLog(extent[0]) / mathLog(base);
+        extent[1] = mathLog(extent[1]) / mathLog(base);
+        scaleProto$1.unionExtent.call(this, extent);
+    },
+
+    /**
+     * @override
+     */
+    unionExtentFromData: function (data, dim) {
+        // TODO
+        // filter value that <= 0
+        this.unionExtent(data.getApproximateExtent(dim));
+    },
+
+    /**
+     * Update interval and extent of intervals for nice ticks
+     * @param  {number} [approxTickNum = 10] Given approx tick number
+     */
+    niceTicks: function (approxTickNum) {
+        approxTickNum = approxTickNum || 10;
+        var extent = this._extent;
+        var span = extent[1] - extent[0];
+        if (span === Infinity || span <= 0) {
+            return;
+        }
+
+        var interval = quantity(span);
+        var err = approxTickNum / span * interval;
+
+        // Filter ticks to get closer to the desired count.
+        if (err <= 0.5) {
+            interval *= 10;
+        }
+
+        // Interval should be integer
+        while (!isNaN(interval) && Math.abs(interval) < 1 && Math.abs(interval) > 0) {
+            interval *= 10;
+        }
+
+        var niceExtent = [
+            round$1(mathCeil$1(extent[0] / interval) * interval),
+            round$1(mathFloor$1(extent[1] / interval) * interval)
+        ];
+
+        this._interval = interval;
+        this._niceExtent = niceExtent;
+    },
+
+    /**
+     * Nice extent.
+     * @override
+     */
+    niceExtent: function (opt) {
+        intervalScaleProto$1.niceExtent.call(this, opt);
+
+        var originalScale = this._originalScale;
+        originalScale.__fixMin = opt.fixMin;
+        originalScale.__fixMax = opt.fixMax;
+    }
+
+});
+
+each$1(['contain', 'normalize'], function (methodName) {
+    LogScale.prototype[methodName] = function (val) {
+        val = mathLog(val) / mathLog(this.base);
+        return scaleProto$1[methodName].call(this, val);
+    };
+});
+
+LogScale.create = function () {
+    return new LogScale();
+};
+
+function fixRoundingError(val, originalVal) {
+    return roundingErrorFix(val, getPrecisionSafe$1(originalVal));
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Get axis scale extent before niced.
+ * Item of returned array can only be number (including Infinity and NaN).
+ */
+function getScaleExtent(scale, model) {
+    var scaleType = scale.type;
+
+    var min = model.getMin();
+    var max = model.getMax();
+    var fixMin = min != null;
+    var fixMax = max != null;
+    var originalExtent = scale.getExtent();
+
+    var axisDataLen;
+    var boundaryGap;
+    var span;
+    if (scaleType === 'ordinal') {
+        axisDataLen = model.getCategories().length;
+    }
+    else {
+        boundaryGap = model.get('boundaryGap');
+        if (!isArray(boundaryGap)) {
+            boundaryGap = [boundaryGap || 0, boundaryGap || 0];
+        }
+        if (typeof boundaryGap[0] === 'boolean') {
+            if (__DEV__) {
+                console.warn('Boolean type for boundaryGap is only '
+                    + 'allowed for ordinal axis. Please use string in '
+                    + 'percentage instead, e.g., "20%". Currently, '
+                    + 'boundaryGap is set to be 0.');
+            }
+            boundaryGap = [0, 0];
+        }
+        boundaryGap[0] = parsePercent$1(boundaryGap[0], 1);
+        boundaryGap[1] = parsePercent$1(boundaryGap[1], 1);
+        span = (originalExtent[1] - originalExtent[0])
+            || Math.abs(originalExtent[0]);
+    }
+
+    // Notice: When min/max is not set (that is, when there are null/undefined,
+    // which is the most common case), these cases should be ensured:
+    // (1) For 'ordinal', show all axis.data.
+    // (2) For others:
+    //      + `boundaryGap` is applied (if min/max set, boundaryGap is
+    //      disabled).
+    //      + If `needCrossZero`, min/max should be zero, otherwise, min/max should
+    //      be the result that originalExtent enlarged by boundaryGap.
+    // (3) If no data, it should be ensured that `scale.setBlank` is set.
+
+    // FIXME
+    // (1) When min/max is 'dataMin' or 'dataMax', should boundaryGap be able to used?
+    // (2) When `needCrossZero` and all data is positive/negative, should it be ensured
+    // that the results processed by boundaryGap are positive/negative?
+
+    if (min == null) {
+        min = scaleType === 'ordinal'
+            ? (axisDataLen ? 0 : NaN)
+            : originalExtent[0] - boundaryGap[0] * span;
+    }
+    if (max == null) {
+        max = scaleType === 'ordinal'
+            ? (axisDataLen ? axisDataLen - 1 : NaN)
+            : originalExtent[1] + boundaryGap[1] * span;
+    }
+
+    if (min === 'dataMin') {
+        min = originalExtent[0];
+    }
+    else if (typeof min === 'function') {
+        min = min({
+            min: originalExtent[0],
+            max: originalExtent[1]
+        });
+    }
+
+    if (max === 'dataMax') {
+        max = originalExtent[1];
+    }
+    else if (typeof max === 'function') {
+        max = max({
+            min: originalExtent[0],
+            max: originalExtent[1]
+        });
+    }
+
+    (min == null || !isFinite(min)) && (min = NaN);
+    (max == null || !isFinite(max)) && (max = NaN);
+
+    scale.setBlank(
+        eqNaN(min)
+        || eqNaN(max)
+        || (scaleType === 'ordinal' && !scale.getOrdinalMeta().categories.length)
+    );
+
+    // Evaluate if axis needs cross zero
+    if (model.getNeedCrossZero()) {
+        // Axis is over zero and min is not set
+        if (min > 0 && max > 0 && !fixMin) {
+            min = 0;
+        }
+        // Axis is under zero and max is not set
+        if (min < 0 && max < 0 && !fixMax) {
+            max = 0;
+        }
+    }
+
+    // If bars are placed on a base axis of type time or interval account for axis boundary overflow and current axis
+    // is base axis
+    // FIXME
+    // (1) Consider support value axis, where below zero and axis `onZero` should be handled properly.
+    // (2) Refactor the logic with `barGrid`. Is it not need to `makeBarWidthAndOffsetInfo` twice with different extent?
+    //     Should not depend on series type `bar`?
+    // (3) Fix that might overlap when using dataZoom.
+    // (4) Consider other chart types using `barGrid`?
+    // See #6728, #4862, `test/bar-overflow-time-plot.html`
+    var ecModel = model.ecModel;
+    if (ecModel && (scaleType === 'time' /*|| scaleType === 'interval' */)) {
+        var barSeriesModels = prepareLayoutBarSeries('bar', ecModel);
+        var isBaseAxisAndHasBarSeries;
+
+        each$1(barSeriesModels, function (seriesModel) {
+            isBaseAxisAndHasBarSeries |= seriesModel.getBaseAxis() === model.axis;
+        });
+
+        if (isBaseAxisAndHasBarSeries) {
+            // Calculate placement of bars on axis
+            var barWidthAndOffset = makeColumnLayout(barSeriesModels);
+
+            // Adjust axis min and max to account for overflow
+            var adjustedScale = adjustScaleForOverflow(min, max, model, barWidthAndOffset);
+            min = adjustedScale.min;
+            max = adjustedScale.max;
+        }
+    }
+
+    return [min, max];
+}
+
+function adjustScaleForOverflow(min, max, model, barWidthAndOffset) {
+
+    // Get Axis Length
+    var axisExtent = model.axis.getExtent();
+    var axisLength = axisExtent[1] - axisExtent[0];
+
+    // Get bars on current base axis and calculate min and max overflow
+    var barsOnCurrentAxis = retrieveColumnLayout(barWidthAndOffset, model.axis);
+    if (barsOnCurrentAxis === undefined) {
+        return {min: min, max: max};
+    }
+
+    var minOverflow = Infinity;
+    each$1(barsOnCurrentAxis, function (item) {
+        minOverflow = Math.min(item.offset, minOverflow);
+    });
+    var maxOverflow = -Infinity;
+    each$1(barsOnCurrentAxis, function (item) {
+        maxOverflow = Math.max(item.offset + item.width, maxOverflow);
+    });
+    minOverflow = Math.abs(minOverflow);
+    maxOverflow = Math.abs(maxOverflow);
+    var totalOverFlow = minOverflow + maxOverflow;
+
+    // Calulate required buffer based on old range and overflow
+    var oldRange = max - min;
+    var oldRangePercentOfNew = (1 - (minOverflow + maxOverflow) / axisLength);
+    var overflowBuffer = ((oldRange / oldRangePercentOfNew) - oldRange);
+
+    max += overflowBuffer * (maxOverflow / totalOverFlow);
+    min -= overflowBuffer * (minOverflow / totalOverFlow);
+
+    return {min: min, max: max};
+}
+
+function niceScaleExtent(scale, model) {
+    var extent = getScaleExtent(scale, model);
+    var fixMin = model.getMin() != null;
+    var fixMax = model.getMax() != null;
+    var splitNumber = model.get('splitNumber');
+
+    if (scale.type === 'log') {
+        scale.base = model.get('logBase');
+    }
+
+    var scaleType = scale.type;
+    scale.setExtent(extent[0], extent[1]);
+    scale.niceExtent({
+        splitNumber: splitNumber,
+        fixMin: fixMin,
+        fixMax: fixMax,
+        minInterval: (scaleType === 'interval' || scaleType === 'time')
+            ? model.get('minInterval') : null,
+        maxInterval: (scaleType === 'interval' || scaleType === 'time')
+            ? model.get('maxInterval') : null
+    });
+
+    // If some one specified the min, max. And the default calculated interval
+    // is not good enough. He can specify the interval. It is often appeared
+    // in angle axis with angle 0 - 360. Interval calculated in interval scale is hard
+    // to be 60.
+    // FIXME
+    var interval = model.get('interval');
+    if (interval != null) {
+        scale.setInterval && scale.setInterval(interval);
+    }
+}
+
+/**
+ * @param {module:echarts/model/Model} model
+ * @param {string} [axisType] Default retrieve from model.type
+ * @return {module:echarts/scale/*}
+ */
+function createScaleByModel(model, axisType) {
+    axisType = axisType || model.get('type');
+    if (axisType) {
+        switch (axisType) {
+            // Buildin scale
+            case 'category':
+                return new OrdinalScale(
+                    model.getOrdinalMeta
+                        ? model.getOrdinalMeta()
+                        : model.getCategories(),
+                    [Infinity, -Infinity]
+                );
+            case 'value':
+                return new IntervalScale();
+            // Extended scale, like time and log
+            default:
+                return (Scale.getClass(axisType) || IntervalScale).create(model);
+        }
+    }
+}
+
+/**
+ * Check if the axis corss 0
+ */
+function ifAxisCrossZero(axis) {
+    var dataExtent = axis.scale.getExtent();
+    var min = dataExtent[0];
+    var max = dataExtent[1];
+    return !((min > 0 && max > 0) || (min < 0 && max < 0));
+}
+
+/**
+ * @param {module:echarts/coord/Axis} axis
+ * @return {Function} Label formatter function.
+ *         param: {number} tickValue,
+ *         param: {number} idx, the index in all ticks.
+ *                         If category axis, this param is not requied.
+ *         return: {string} label string.
+ */
+function makeLabelFormatter(axis) {
+    var labelFormatter = axis.getLabelModel().get('formatter');
+    var categoryTickStart = axis.type === 'category' ? axis.scale.getExtent()[0] : null;
+
+    if (typeof labelFormatter === 'string') {
+        labelFormatter = (function (tpl) {
+            return function (val) {
+                return tpl.replace('{value}', val != null ? val : '');
+            };
+        })(labelFormatter);
+        // Consider empty array
+        return labelFormatter;
+    }
+    else if (typeof labelFormatter === 'function') {
+        return function (tickValue, idx) {
+            // The original intention of `idx` is "the index of the tick in all ticks".
+            // But the previous implementation of category axis do not consider the
+            // `axisLabel.interval`, which cause that, for example, the `interval` is
+            // `1`, then the ticks "name5", "name7", "name9" are displayed, where the
+            // corresponding `idx` are `0`, `2`, `4`, but not `0`, `1`, `2`. So we keep
+            // the definition here for back compatibility.
+            if (categoryTickStart != null) {
+                idx = tickValue - categoryTickStart;
+            }
+            return labelFormatter(getAxisRawValue(axis, tickValue), idx);
+        };
+    }
+    else {
+        return function (tick) {
+            return axis.scale.getLabel(tick);
+        };
+    }
+}
+
+function getAxisRawValue(axis, value) {
+    // In category axis with data zoom, tick is not the original
+    // index of axis.data. So tick should not be exposed to user
+    // in category axis.
+    return axis.type === 'category' ? axis.scale.getLabel(value) : value;
+}
+
+/**
+ * @param {module:echarts/coord/Axis} axis
+ * @return {module:zrender/core/BoundingRect} Be null/undefined if no labels.
+ */
+function estimateLabelUnionRect(axis) {
+    var axisModel = axis.model;
+    var scale = axis.scale;
+
+    if (!axisModel.get('axisLabel.show') || scale.isBlank()) {
+        return;
+    }
+
+    var isCategory = axis.type === 'category';
+
+    var realNumberScaleTicks;
+    var tickCount;
+    var categoryScaleExtent = scale.getExtent();
+
+    // Optimize for large category data, avoid call `getTicks()`.
+    if (isCategory) {
+        tickCount = scale.count();
+    }
+    else {
+        realNumberScaleTicks = scale.getTicks();
+        tickCount = realNumberScaleTicks.length;
+    }
+
+    var axisLabelModel = axis.getLabelModel();
+    var labelFormatter = makeLabelFormatter(axis);
+
+    var rect;
+    var step = 1;
+    // Simple optimization for large amount of labels
+    if (tickCount > 40) {
+        step = Math.ceil(tickCount / 40);
+    }
+    for (var i = 0; i < tickCount; i += step) {
+        var tickValue = realNumberScaleTicks ? realNumberScaleTicks[i] : categoryScaleExtent[0] + i;
+        var label = labelFormatter(tickValue);
+        var unrotatedSingleRect = axisLabelModel.getTextRect(label);
+        var singleRect = rotateTextRect(unrotatedSingleRect, axisLabelModel.get('rotate') || 0);
+
+        rect ? rect.union(singleRect) : (rect = singleRect);
+    }
+
+    return rect;
+}
+
+function rotateTextRect(textRect, rotate) {
+    var rotateRadians = rotate * Math.PI / 180;
+    var boundingBox = textRect.plain();
+    var beforeWidth = boundingBox.width;
+    var beforeHeight = boundingBox.height;
+    var afterWidth = beforeWidth * Math.cos(rotateRadians) + beforeHeight * Math.sin(rotateRadians);
+    var afterHeight = beforeWidth * Math.sin(rotateRadians) + beforeHeight * Math.cos(rotateRadians);
+    var rotatedRect = new BoundingRect(boundingBox.x, boundingBox.y, afterWidth, afterHeight);
+
+    return rotatedRect;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var axisModelCommonMixin = {
+
+    /**
+     * @param {boolean} origin
+     * @return {number|string} min value or 'dataMin' or null/undefined (means auto) or NaN
+     */
+    getMin: function (origin) {
+        var option = this.option;
+        var min = (!origin && option.rangeStart != null)
+            ? option.rangeStart : option.min;
+
+        if (this.axis
+            && min != null
+            && min !== 'dataMin'
+            && typeof min !== 'function'
+            && !eqNaN(min)
+        ) {
+            min = this.axis.scale.parse(min);
+        }
+        return min;
+    },
+
+    /**
+     * @param {boolean} origin
+     * @return {number|string} max value or 'dataMax' or null/undefined (means auto) or NaN
+     */
+    getMax: function (origin) {
+        var option = this.option;
+        var max = (!origin && option.rangeEnd != null)
+            ? option.rangeEnd : option.max;
+
+        if (this.axis
+            && max != null
+            && max !== 'dataMax'
+            && typeof max !== 'function'
+            && !eqNaN(max)
+        ) {
+            max = this.axis.scale.parse(max);
+        }
+        return max;
+    },
+
+    /**
+     * @return {boolean}
+     */
+    getNeedCrossZero: function () {
+        var option = this.option;
+        return (option.rangeStart != null || option.rangeEnd != null)
+            ? false : !option.scale;
+    },
+
+    /**
+     * Should be implemented by each axis model if necessary.
+     * @return {module:echarts/model/Component} coordinate system model
+     */
+    getCoordSysModel: noop,
+
+    /**
+     * @param {number} rangeStart Can only be finite number or null/undefined or NaN.
+     * @param {number} rangeEnd Can only be finite number or null/undefined or NaN.
+     */
+    setRange: function (rangeStart, rangeEnd) {
+        this.option.rangeStart = rangeStart;
+        this.option.rangeEnd = rangeEnd;
+    },
+
+    /**
+     * Reset range
+     */
+    resetRange: function () {
+        // rangeStart and rangeEnd is readonly.
+        this.option.rangeStart = this.option.rangeEnd = null;
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// Symbol factory
+
+/**
+ * Triangle shape
+ * @inner
+ */
+var Triangle = extendShape({
+    type: 'triangle',
+    shape: {
+        cx: 0,
+        cy: 0,
+        width: 0,
+        height: 0
+    },
+    buildPath: function (path, shape) {
+        var cx = shape.cx;
+        var cy = shape.cy;
+        var width = shape.width / 2;
+        var height = shape.height / 2;
+        path.moveTo(cx, cy - height);
+        path.lineTo(cx + width, cy + height);
+        path.lineTo(cx - width, cy + height);
+        path.closePath();
+    }
+});
+
+/**
+ * Diamond shape
+ * @inner
+ */
+var Diamond = extendShape({
+    type: 'diamond',
+    shape: {
+        cx: 0,
+        cy: 0,
+        width: 0,
+        height: 0
+    },
+    buildPath: function (path, shape) {
+        var cx = shape.cx;
+        var cy = shape.cy;
+        var width = shape.width / 2;
+        var height = shape.height / 2;
+        path.moveTo(cx, cy - height);
+        path.lineTo(cx + width, cy);
+        path.lineTo(cx, cy + height);
+        path.lineTo(cx - width, cy);
+        path.closePath();
+    }
+});
+
+/**
+ * Pin shape
+ * @inner
+ */
+var Pin = extendShape({
+    type: 'pin',
+    shape: {
+        // x, y on the cusp
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+    },
+
+    buildPath: function (path, shape) {
+        var x = shape.x;
+        var y = shape.y;
+        var w = shape.width / 5 * 3;
+        // Height must be larger than width
+        var h = Math.max(w, shape.height);
+        var r = w / 2;
+
+        // Dist on y with tangent point and circle center
+        var dy = r * r / (h - r);
+        var cy = y - h + r + dy;
+        var angle = Math.asin(dy / r);
+        // Dist on x with tangent point and circle center
+        var dx = Math.cos(angle) * r;
+
+        var tanX = Math.sin(angle);
+        var tanY = Math.cos(angle);
+
+        var cpLen = r * 0.6;
+        var cpLen2 = r * 0.7;
+
+        path.moveTo(x - dx, cy + dy);
+
+        path.arc(
+            x, cy, r,
+            Math.PI - angle,
+            Math.PI * 2 + angle
+        );
+        path.bezierCurveTo(
+            x + dx - tanX * cpLen, cy + dy + tanY * cpLen,
+            x, y - cpLen2,
+            x, y
+        );
+        path.bezierCurveTo(
+            x, y - cpLen2,
+            x - dx + tanX * cpLen, cy + dy + tanY * cpLen,
+            x - dx, cy + dy
+        );
+        path.closePath();
+    }
+});
+
+/**
+ * Arrow shape
+ * @inner
+ */
+var Arrow = extendShape({
+
+    type: 'arrow',
+
+    shape: {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+    },
+
+    buildPath: function (ctx, shape) {
+        var height = shape.height;
+        var width = shape.width;
+        var x = shape.x;
+        var y = shape.y;
+        var dx = width / 3 * 2;
+        ctx.moveTo(x, y);
+        ctx.lineTo(x + dx, y + height);
+        ctx.lineTo(x, y + height / 4 * 3);
+        ctx.lineTo(x - dx, y + height);
+        ctx.lineTo(x, y);
+        ctx.closePath();
+    }
+});
+
+/**
+ * Map of path contructors
+ * @type {Object.<string, module:zrender/graphic/Path>}
+ */
+var symbolCtors = {
+
+    line: Line,
+
+    rect: Rect,
+
+    roundRect: Rect,
+
+    square: Rect,
+
+    circle: Circle,
+
+    diamond: Diamond,
+
+    pin: Pin,
+
+    arrow: Arrow,
+
+    triangle: Triangle
+};
+
+var symbolShapeMakers = {
+
+    line: function (x, y, w, h, shape) {
+        // FIXME
+        shape.x1 = x;
+        shape.y1 = y + h / 2;
+        shape.x2 = x + w;
+        shape.y2 = y + h / 2;
+    },
+
+    rect: function (x, y, w, h, shape) {
+        shape.x = x;
+        shape.y = y;
+        shape.width = w;
+        shape.height = h;
+    },
+
+    roundRect: function (x, y, w, h, shape) {
+        shape.x = x;
+        shape.y = y;
+        shape.width = w;
+        shape.height = h;
+        shape.r = Math.min(w, h) / 4;
+    },
+
+    square: function (x, y, w, h, shape) {
+        var size = Math.min(w, h);
+        shape.x = x;
+        shape.y = y;
+        shape.width = size;
+        shape.height = size;
+    },
+
+    circle: function (x, y, w, h, shape) {
+        // Put circle in the center of square
+        shape.cx = x + w / 2;
+        shape.cy = y + h / 2;
+        shape.r = Math.min(w, h) / 2;
+    },
+
+    diamond: function (x, y, w, h, shape) {
+        shape.cx = x + w / 2;
+        shape.cy = y + h / 2;
+        shape.width = w;
+        shape.height = h;
+    },
+
+    pin: function (x, y, w, h, shape) {
+        shape.x = x + w / 2;
+        shape.y = y + h / 2;
+        shape.width = w;
+        shape.height = h;
+    },
+
+    arrow: function (x, y, w, h, shape) {
+        shape.x = x + w / 2;
+        shape.y = y + h / 2;
+        shape.width = w;
+        shape.height = h;
+    },
+
+    triangle: function (x, y, w, h, shape) {
+        shape.cx = x + w / 2;
+        shape.cy = y + h / 2;
+        shape.width = w;
+        shape.height = h;
+    }
+};
+
+var symbolBuildProxies = {};
+each$1(symbolCtors, function (Ctor, name) {
+    symbolBuildProxies[name] = new Ctor();
+});
+
+var SymbolClz = extendShape({
+
+    type: 'symbol',
+
+    shape: {
+        symbolType: '',
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+    },
+
+    beforeBrush: function () {
+        var style = this.style;
+        var shape = this.shape;
+        // FIXME
+        if (shape.symbolType === 'pin' && style.textPosition === 'inside') {
+            style.textPosition = ['50%', '40%'];
+            style.textAlign = 'center';
+            style.textVerticalAlign = 'middle';
+        }
+    },
+
+    buildPath: function (ctx, shape, inBundle) {
+        var symbolType = shape.symbolType;
+        var proxySymbol = symbolBuildProxies[symbolType];
+        if (shape.symbolType !== 'none') {
+            if (!proxySymbol) {
+                // Default rect
+                symbolType = 'rect';
+                proxySymbol = symbolBuildProxies[symbolType];
+            }
+            symbolShapeMakers[symbolType](
+                shape.x, shape.y, shape.width, shape.height, proxySymbol.shape
+            );
+            proxySymbol.buildPath(ctx, proxySymbol.shape, inBundle);
+        }
+    }
+});
+
+// Provide setColor helper method to avoid determine if set the fill or stroke outside
+function symbolPathSetColor(color, innerColor) {
+    if (this.type !== 'image') {
+        var symbolStyle = this.style;
+        var symbolShape = this.shape;
+        if (symbolShape && symbolShape.symbolType === 'line') {
+            symbolStyle.stroke = color;
+        }
+        else if (this.__isEmptyBrush) {
+            symbolStyle.stroke = color;
+            symbolStyle.fill = innerColor || '#fff';
+        }
+        else {
+            // FIXME åˆ¤æ–å›¾å½¢é»˜è®¤æ˜¯å¡«å……è¿˜æ˜¯æè¾¹ï¼Œä½¿ç”¨ onlyStroke ?
+            symbolStyle.fill && (symbolStyle.fill = color);
+            symbolStyle.stroke && (symbolStyle.stroke = color);
+        }
+        this.dirty(false);
+    }
+}
+
+/**
+ * Create a symbol element with given symbol configuration: shape, x, y, width, height, color
+ * @param {string} symbolType
+ * @param {number} x
+ * @param {number} y
+ * @param {number} w
+ * @param {number} h
+ * @param {string} color
+ * @param {boolean} [keepAspect=false] whether to keep the ratio of w/h,
+ *                            for path and image only.
+ */
+function createSymbol(symbolType, x, y, w, h, color, keepAspect) {
+    // TODO Support image object, DynamicImage.
+
+    var isEmpty = symbolType.indexOf('empty') === 0;
+    if (isEmpty) {
+        symbolType = symbolType.substr(5, 1).toLowerCase() + symbolType.substr(6);
+    }
+    var symbolPath;
+
+    if (symbolType.indexOf('image://') === 0) {
+        symbolPath = makeImage(
+            symbolType.slice(8),
+            new BoundingRect(x, y, w, h),
+            keepAspect ? 'center' : 'cover'
+        );
+    }
+    else if (symbolType.indexOf('path://') === 0) {
+        symbolPath = makePath(
+            symbolType.slice(7),
+            {},
+            new BoundingRect(x, y, w, h),
+            keepAspect ? 'center' : 'cover'
+        );
+    }
+    else {
+        symbolPath = new SymbolClz({
+            shape: {
+                symbolType: symbolType,
+                x: x,
+                y: y,
+                width: w,
+                height: h
+            }
+        });
+    }
+
+    symbolPath.__isEmptyBrush = isEmpty;
+
+    symbolPath.setColor = symbolPathSetColor;
+
+    symbolPath.setColor(color);
+
+    return symbolPath;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// import createGraphFromNodeEdge from './chart/helper/createGraphFromNodeEdge';
+/**
+ * Create a muti dimension List structure from seriesModel.
+ * @param  {module:echarts/model/Model} seriesModel
+ * @return {module:echarts/data/List} list
+ */
+function createList(seriesModel) {
+    return createListFromArray(seriesModel.getSource(), seriesModel);
+}
+
+var dataStack$1 = {
+    isDimensionStacked: isDimensionStacked,
+    enableDataStack: enableDataStack,
+    getStackedDimension: getStackedDimension
+};
+
+/**
+ * Create scale
+ * @param {Array.<number>} dataExtent
+ * @param {Object|module:echarts/Model} option
+ */
+function createScale(dataExtent, option) {
+    var axisModel = option;
+    if (!Model.isInstance(option)) {
+        axisModel = new Model(option);
+        mixin(axisModel, axisModelCommonMixin);
+    }
+
+    var scale = createScaleByModel(axisModel);
+    scale.setExtent(dataExtent[0], dataExtent[1]);
+
+    niceScaleExtent(scale, axisModel);
+    return scale;
+}
+
+/**
+ * Mixin common methods to axis model,
+ *
+ * Inlcude methods
+ * `getFormattedLabels() => Array.<string>`
+ * `getCategories() => Array.<string>`
+ * `getMin(origin: boolean) => number`
+ * `getMax(origin: boolean) => number`
+ * `getNeedCrossZero() => boolean`
+ * `setRange(start: number, end: number)`
+ * `resetRange()`
+ */
+function mixinAxisModelCommonMethods(Model$$1) {
+    mixin(Model$$1, axisModelCommonMixin);
+}
+
+var helper = (Object.freeze || Object)({
+	createList: createList,
+	getLayoutRect: getLayoutRect,
+	dataStack: dataStack$1,
+	createScale: createScale,
+	mixinAxisModelCommonMethods: mixinAxisModelCommonMethods,
+	completeDimensions: completeDimensions,
+	createDimensions: createDimensions,
+	createSymbol: createSymbol
+});
+
+var EPSILON$3 = 1e-8;
+
+function isAroundEqual$1(a, b) {
+    return Math.abs(a - b) < EPSILON$3;
+}
+
+function contain$1(points, x, y) {
+    var w = 0;
+    var p = points[0];
+
+    if (!p) {
+        return false;
+    }
+
+    for (var i = 1; i < points.length; i++) {
+        var p2 = points[i];
+        w += windingLine(p[0], p[1], p2[0], p2[1], x, y);
+        p = p2;
+    }
+
+    // Close polygon
+    var p0 = points[0];
+    if (!isAroundEqual$1(p[0], p0[0]) || !isAroundEqual$1(p[1], p0[1])) {
+        w += windingLine(p[0], p[1], p0[0], p0[1], x, y);
+    }
+
+    return w !== 0;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @module echarts/coord/geo/Region
+ */
+
+/**
+ * @param {string} name
+ * @param {Array} geometries
+ * @param {Array.<number>} cp
+ */
+function Region(name, geometries, cp) {
+
+    /**
+     * @type {string}
+     * @readOnly
+     */
+    this.name = name;
+
+    /**
+     * @type {Array.<Array>}
+     * @readOnly
+     */
+    this.geometries = geometries;
+
+    if (!cp) {
+        var rect = this.getBoundingRect();
+        cp = [
+            rect.x + rect.width / 2,
+            rect.y + rect.height / 2
+        ];
+    }
+    else {
+        cp = [cp[0], cp[1]];
+    }
+    /**
+     * @type {Array.<number>}
+     */
+    this.center = cp;
+}
+
+Region.prototype = {
+
+    constructor: Region,
+
+    properties: null,
+
+    /**
+     * @return {module:zrender/core/BoundingRect}
+     */
+    getBoundingRect: function () {
+        var rect = this._rect;
+        if (rect) {
+            return rect;
+        }
+
+        var MAX_NUMBER = Number.MAX_VALUE;
+        var min$$1 = [MAX_NUMBER, MAX_NUMBER];
+        var max$$1 = [-MAX_NUMBER, -MAX_NUMBER];
+        var min2 = [];
+        var max2 = [];
+        var geometries = this.geometries;
+        for (var i = 0; i < geometries.length; i++) {
+            // Only support polygon
+            if (geometries[i].type !== 'polygon') {
+                continue;
+            }
+            // Doesn't consider hole
+            var exterior = geometries[i].exterior;
+            fromPoints(exterior, min2, max2);
+            min(min$$1, min$$1, min2);
+            max(max$$1, max$$1, max2);
+        }
+        // No data
+        if (i === 0) {
+            min$$1[0] = min$$1[1] = max$$1[0] = max$$1[1] = 0;
+        }
+
+        return (this._rect = new BoundingRect(
+            min$$1[0], min$$1[1], max$$1[0] - min$$1[0], max$$1[1] - min$$1[1]
+        ));
+    },
+
+    /**
+     * @param {<Array.<number>} coord
+     * @return {boolean}
+     */
+    contain: function (coord) {
+        var rect = this.getBoundingRect();
+        var geometries = this.geometries;
+        if (!rect.contain(coord[0], coord[1])) {
+            return false;
+        }
+        loopGeo: for (var i = 0, len$$1 = geometries.length; i < len$$1; i++) {
+            // Only support polygon.
+            if (geometries[i].type !== 'polygon') {
+                continue;
+            }
+            var exterior = geometries[i].exterior;
+            var interiors = geometries[i].interiors;
+            if (contain$1(exterior, coord[0], coord[1])) {
+                // Not in the region if point is in the hole.
+                for (var k = 0; k < (interiors ? interiors.length : 0); k++) {
+                    if (contain$1(interiors[k])) {
+                        continue loopGeo;
+                    }
+                }
+                return true;
+            }
+        }
+        return false;
+    },
+
+    transformTo: function (x, y, width, height) {
+        var rect = this.getBoundingRect();
+        var aspect = rect.width / rect.height;
+        if (!width) {
+            width = aspect * height;
+        }
+        else if (!height) {
+            height = width / aspect ;
+        }
+        var target = new BoundingRect(x, y, width, height);
+        var transform = rect.calculateTransform(target);
+        var geometries = this.geometries;
+        for (var i = 0; i < geometries.length; i++) {
+            // Only support polygon.
+            if (geometries[i].type !== 'polygon') {
+                continue;
+            }
+            var exterior = geometries[i].exterior;
+            var interiors = geometries[i].interiors;
+            for (var p = 0; p < exterior.length; p++) {
+                applyTransform(exterior[p], exterior[p], transform);
+            }
+            for (var h = 0; h < (interiors ? interiors.length : 0); h++) {
+                for (var p = 0; p < interiors[h].length; p++) {
+                    applyTransform(interiors[h][p], interiors[h][p], transform);
+                }
+            }
+        }
+        rect = this._rect;
+        rect.copy(target);
+        // Update center
+        this.center = [
+            rect.x + rect.width / 2,
+            rect.y + rect.height / 2
+        ];
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Parse and decode geo json
+ * @module echarts/coord/geo/parseGeoJson
+ */
+
+function decode(json) {
+    if (!json.UTF8Encoding) {
+        return json;
+    }
+    var encodeScale = json.UTF8Scale;
+    if (encodeScale == null) {
+        encodeScale = 1024;
+    }
+
+    var features = json.features;
+
+    for (var f = 0; f < features.length; f++) {
+        var feature = features[f];
+        var geometry = feature.geometry;
+        var coordinates = geometry.coordinates;
+        var encodeOffsets = geometry.encodeOffsets;
+
+        for (var c = 0; c < coordinates.length; c++) {
+            var coordinate = coordinates[c];
+
+            if (geometry.type === 'Polygon') {
+                coordinates[c] = decodePolygon(
+                    coordinate,
+                    encodeOffsets[c],
+                    encodeScale
+                );
+            }
+            else if (geometry.type === 'MultiPolygon') {
+                for (var c2 = 0; c2 < coordinate.length; c2++) {
+                    var polygon = coordinate[c2];
+                    coordinate[c2] = decodePolygon(
+                        polygon,
+                        encodeOffsets[c][c2],
+                        encodeScale
+                    );
+                }
+            }
+        }
+    }
+    // Has been decoded
+    json.UTF8Encoding = false;
+    return json;
+}
+
+function decodePolygon(coordinate, encodeOffsets, encodeScale) {
+    var result = [];
+    var prevX = encodeOffsets[0];
+    var prevY = encodeOffsets[1];
+
+    for (var i = 0; i < coordinate.length; i += 2) {
+        var x = coordinate.charCodeAt(i) - 64;
+        var y = coordinate.charCodeAt(i + 1) - 64;
+        // ZigZag decoding
+        x = (x >> 1) ^ (-(x & 1));
+        y = (y >> 1) ^ (-(y & 1));
+        // Delta deocding
+        x += prevX;
+        y += prevY;
+
+        prevX = x;
+        prevY = y;
+        // Dequantize
+        result.push([x / encodeScale, y / encodeScale]);
+    }
+
+    return result;
+}
+
+/**
+ * @alias module:echarts/coord/geo/parseGeoJson
+ * @param {Object} geoJson
+ * @return {module:zrender/container/Group}
+ */
+var parseGeoJson$1 = function (geoJson) {
+
+    decode(geoJson);
+
+    return map(filter(geoJson.features, function (featureObj) {
+        // Output of mapshaper may have geometry null
+        return featureObj.geometry
+            && featureObj.properties
+            && featureObj.geometry.coordinates.length > 0;
+    }), function (featureObj) {
+        var properties = featureObj.properties;
+        var geo = featureObj.geometry;
+
+        var coordinates = geo.coordinates;
+
+        var geometries = [];
+        if (geo.type === 'Polygon') {
+            geometries.push({
+                type: 'polygon',
+                // According to the GeoJSON specification.
+                // First must be exterior, and the rest are all interior(holes).
+                exterior: coordinates[0],
+                interiors: coordinates.slice(1)
+            });
+        }
+        if (geo.type === 'MultiPolygon') {
+            each$1(coordinates, function (item) {
+                if (item[0]) {
+                    geometries.push({
+                        type: 'polygon',
+                        exterior: item[0],
+                        interiors: item.slice(1)
+                    });
+                }
+            });
+        }
+
+        var region = new Region(
+            properties.name,
+            geometries,
+            properties.cp
+        );
+        region.properties = properties;
+        return region;
+    });
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var inner$6 = makeInner();
+
+/**
+ * @param {module:echats/coord/Axis} axis
+ * @return {Object} {
+ *     labels: [{
+ *         formattedLabel: string,
+ *         rawLabel: string,
+ *         tickValue: number
+ *     }, ...],
+ *     labelCategoryInterval: number
+ * }
+ */
+function createAxisLabels(axis) {
+    // Only ordinal scale support tick interval
+    return axis.type === 'category'
+        ? makeCategoryLabels(axis)
+        : makeRealNumberLabels(axis);
+}
+
+/**
+ * @param {module:echats/coord/Axis} axis
+ * @param {module:echarts/model/Model} tickModel For example, can be axisTick, splitLine, splitArea.
+ * @return {Object} {
+ *     ticks: Array.<number>
+ *     tickCategoryInterval: number
+ * }
+ */
+function createAxisTicks(axis, tickModel) {
+    // Only ordinal scale support tick interval
+    return axis.type === 'category'
+        ? makeCategoryTicks(axis, tickModel)
+        : {ticks: axis.scale.getTicks()};
+}
+
+function makeCategoryLabels(axis) {
+    var labelModel = axis.getLabelModel();
+    var result = makeCategoryLabelsActually(axis, labelModel);
+
+    return (!labelModel.get('show') || axis.scale.isBlank())
+        ? {labels: [], labelCategoryInterval: result.labelCategoryInterval}
+        : result;
+}
+
+function makeCategoryLabelsActually(axis, labelModel) {
+    var labelsCache = getListCache(axis, 'labels');
+    var optionLabelInterval = getOptionCategoryInterval(labelModel);
+    var result = listCacheGet(labelsCache, optionLabelInterval);
+
+    if (result) {
+        return result;
+    }
+
+    var labels;
+    var numericLabelInterval;
+
+    if (isFunction$1(optionLabelInterval)) {
+        labels = makeLabelsByCustomizedCategoryInterval(axis, optionLabelInterval);
+    }
+    else {
+        numericLabelInterval = optionLabelInterval === 'auto'
+            ? makeAutoCategoryInterval(axis) : optionLabelInterval;
+        labels = makeLabelsByNumericCategoryInterval(axis, numericLabelInterval);
+    }
+
+    // Cache to avoid calling interval function repeatly.
+    return listCacheSet(labelsCache, optionLabelInterval, {
+        labels: labels, labelCategoryInterval: numericLabelInterval
+    });
+}
+
+function makeCategoryTicks(axis, tickModel) {
+    var ticksCache = getListCache(axis, 'ticks');
+    var optionTickInterval = getOptionCategoryInterval(tickModel);
+    var result = listCacheGet(ticksCache, optionTickInterval);
+
+    if (result) {
+        return result;
+    }
+
+    var ticks;
+    var tickCategoryInterval;
+
+    // Optimize for the case that large category data and no label displayed,
+    // we should not return all ticks.
+    if (!tickModel.get('show') || axis.scale.isBlank()) {
+        ticks = [];
+    }
+
+    if (isFunction$1(optionTickInterval)) {
+        ticks = makeLabelsByCustomizedCategoryInterval(axis, optionTickInterval, true);
+    }
+    // Always use label interval by default despite label show. Consider this
+    // scenario, Use multiple grid with the xAxis sync, and only one xAxis shows
+    // labels. `splitLine` and `axisTick` should be consistent in this case.
+    else if (optionTickInterval === 'auto') {
+        var labelsResult = makeCategoryLabelsActually(axis, axis.getLabelModel());
+        tickCategoryInterval = labelsResult.labelCategoryInterval;
+        ticks = map(labelsResult.labels, function (labelItem) {
+            return labelItem.tickValue;
+        });
+    }
+    else {
+        tickCategoryInterval = optionTickInterval;
+        ticks = makeLabelsByNumericCategoryInterval(axis, tickCategoryInterval, true);
+    }
+
+    // Cache to avoid calling interval function repeatly.
+    return listCacheSet(ticksCache, optionTickInterval, {
+        ticks: ticks, tickCategoryInterval: tickCategoryInterval
+    });
+}
+
+function makeRealNumberLabels(axis) {
+    var ticks = axis.scale.getTicks();
+    var labelFormatter = makeLabelFormatter(axis);
+    return {
+        labels: map(ticks, function (tickValue, idx) {
+            return {
+                formattedLabel: labelFormatter(tickValue, idx),
+                rawLabel: axis.scale.getLabel(tickValue),
+                tickValue: tickValue
+            };
+        })
+    };
+}
+
+// Large category data calculation is performence sensitive, and ticks and label
+// probably be fetched by multiple times. So we cache the result.
+// axis is created each time during a ec process, so we do not need to clear cache.
+function getListCache(axis, prop) {
+    // Because key can be funciton, and cache size always be small, we use array cache.
+    return inner$6(axis)[prop] || (inner$6(axis)[prop] = []);
+}
+
+function listCacheGet(cache, key) {
+    for (var i = 0; i < cache.length; i++) {
+        if (cache[i].key === key) {
+            return cache[i].value;
+        }
+    }
+}
+
+function listCacheSet(cache, key, value) {
+    cache.push({key: key, value: value});
+    return value;
+}
+
+function makeAutoCategoryInterval(axis) {
+    var result = inner$6(axis).autoInterval;
+    return result != null
+        ? result
+        : (inner$6(axis).autoInterval = axis.calculateCategoryInterval());
+}
+
+/**
+ * Calculate interval for category axis ticks and labels.
+ * To get precise result, at least one of `getRotate` and `isHorizontal`
+ * should be implemented in axis.
+ */
+function calculateCategoryInterval(axis) {
+    var params = fetchAutoCategoryIntervalCalculationParams(axis);
+    var labelFormatter = makeLabelFormatter(axis);
+    var rotation = (params.axisRotate - params.labelRotate) / 180 * Math.PI;
+
+    var ordinalScale = axis.scale;
+    var ordinalExtent = ordinalScale.getExtent();
+    // Providing this method is for optimization:
+    // avoid generating a long array by `getTicks`
+    // in large category data case.
+    var tickCount = ordinalScale.count();
+
+    if (ordinalExtent[1] - ordinalExtent[0] < 1) {
+        return 0;
+    }
+
+    var step = 1;
+    // Simple optimization. Empirical value: tick count should less than 40.
+    if (tickCount > 40) {
+        step = Math.max(1, Math.floor(tickCount / 40));
+    }
+    var tickValue = ordinalExtent[0];
+    var unitSpan = axis.dataToCoord(tickValue + 1) - axis.dataToCoord(tickValue);
+    var unitW = Math.abs(unitSpan * Math.cos(rotation));
+    var unitH = Math.abs(unitSpan * Math.sin(rotation));
+
+    var maxW = 0;
+    var maxH = 0;
+
+    // Caution: Performance sensitive for large category data.
+    // Consider dataZoom, we should make appropriate step to avoid O(n) loop.
+    for (; tickValue <= ordinalExtent[1]; tickValue += step) {
+        var width = 0;
+        var height = 0;
+
+        // Polar is also calculated in assumptive linear layout here.
+        // Not precise, do not consider align and vertical align
+        // and each distance from axis line yet.
+        var rect = getBoundingRect(
+            labelFormatter(tickValue), params.font, 'center', 'top'
+        );
+        // Magic number
+        width = rect.width * 1.3;
+        height = rect.height * 1.3;
+
+        // Min size, void long loop.
+        maxW = Math.max(maxW, width, 7);
+        maxH = Math.max(maxH, height, 7);
+    }
+
+    var dw = maxW / unitW;
+    var dh = maxH / unitH;
+    // 0/0 is NaN, 1/0 is Infinity.
+    isNaN(dw) && (dw = Infinity);
+    isNaN(dh) && (dh = Infinity);
+    var interval = Math.max(0, Math.floor(Math.min(dw, dh)));
+
+    var cache = inner$6(axis.model);
+    var lastAutoInterval = cache.lastAutoInterval;
+    var lastTickCount = cache.lastTickCount;
+
+    // Use cache to keep interval stable while moving zoom window,
+    // otherwise the calculated interval might jitter when the zoom
+    // window size is close to the interval-changing size.
+    if (lastAutoInterval != null
+        && lastTickCount != null
+        && Math.abs(lastAutoInterval - interval) <= 1
+        && Math.abs(lastTickCount - tickCount) <= 1
+        // Always choose the bigger one, otherwise the critical
+        // point is not the same when zooming in or zooming out.
+        && lastAutoInterval > interval
+    ) {
+        interval = lastAutoInterval;
+    }
+    // Only update cache if cache not used, otherwise the
+    // changing of interval is too insensitive.
+    else {
+        cache.lastTickCount = tickCount;
+        cache.lastAutoInterval = interval;
+    }
+
+    return interval;
+}
+
+function fetchAutoCategoryIntervalCalculationParams(axis) {
+    var labelModel = axis.getLabelModel();
+    return {
+        axisRotate: axis.getRotate
+            ? axis.getRotate()
+            : (axis.isHorizontal && !axis.isHorizontal())
+            ? 90
+            : 0,
+        labelRotate: labelModel.get('rotate') || 0,
+        font: labelModel.getFont()
+    };
+}
+
+function makeLabelsByNumericCategoryInterval(axis, categoryInterval, onlyTick) {
+    var labelFormatter = makeLabelFormatter(axis);
+    var ordinalScale = axis.scale;
+    var ordinalExtent = ordinalScale.getExtent();
+    var labelModel = axis.getLabelModel();
+    var result = [];
+
+    // TODO: axisType: ordinalTime, pick the tick from each month/day/year/...
+
+    var step = Math.max((categoryInterval || 0) + 1, 1);
+    var startTick = ordinalExtent[0];
+    var tickCount = ordinalScale.count();
+
+    // Calculate start tick based on zero if possible to keep label consistent
+    // while zooming and moving while interval > 0. Otherwise the selection
+    // of displayable ticks and symbols probably keep changing.
+    // 3 is empirical value.
+    if (startTick !== 0 && step > 1 && tickCount / step > 2) {
+        startTick = Math.round(Math.ceil(startTick / step) * step);
+    }
+
+    // (1) Only add min max label here but leave overlap checking
+    // to render stage, which also ensure the returned list
+    // suitable for splitLine and splitArea rendering.
+    // (2) Scales except category always contain min max label so
+    // do not need to perform this process.
+    var showMinMax = {
+        min: labelModel.get('showMinLabel'),
+        max: labelModel.get('showMaxLabel')
+    };
+
+    if (showMinMax.min && startTick !== ordinalExtent[0]) {
+        addItem(ordinalExtent[0]);
+    }
+
+    // Optimize: avoid generating large array by `ordinalScale.getTicks()`.
+    var tickValue = startTick;
+    for (; tickValue <= ordinalExtent[1]; tickValue += step) {
+        addItem(tickValue);
+    }
+
+    if (showMinMax.max && tickValue !== ordinalExtent[1]) {
+        addItem(ordinalExtent[1]);
+    }
+
+    function addItem(tVal) {
+        result.push(onlyTick
+            ? tVal
+            : {
+                formattedLabel: labelFormatter(tVal),
+                rawLabel: ordinalScale.getLabel(tVal),
+                tickValue: tVal
+            }
+        );
+    }
+
+    return result;
+}
+
+// When interval is function, the result `false` means ignore the tick.
+// It is time consuming for large category data.
+function makeLabelsByCustomizedCategoryInterval(axis, categoryInterval, onlyTick) {
+    var ordinalScale = axis.scale;
+    var labelFormatter = makeLabelFormatter(axis);
+    var result = [];
+
+    each$1(ordinalScale.getTicks(), function (tickValue) {
+        var rawLabel = ordinalScale.getLabel(tickValue);
+        if (categoryInterval(tickValue, rawLabel)) {
+            result.push(onlyTick
+                ? tickValue
+                : {
+                    formattedLabel: labelFormatter(tickValue),
+                    rawLabel: rawLabel,
+                    tickValue: tickValue
+                }
+            );
+        }
+    });
+
+    return result;
+}
+
+// Can be null|'auto'|number|function
+function getOptionCategoryInterval(model) {
+    var interval = model.get('interval');
+    return interval == null ? 'auto' : interval;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var NORMALIZED_EXTENT = [0, 1];
+
+/**
+ * Base class of Axis.
+ * @constructor
+ */
+var Axis = function (dim, scale, extent) {
+
+    /**
+     * Axis dimension. Such as 'x', 'y', 'z', 'angle', 'radius'.
+     * @type {string}
+     */
+    this.dim = dim;
+
+    /**
+     * Axis scale
+     * @type {module:echarts/coord/scale/*}
+     */
+    this.scale = scale;
+
+    /**
+     * @type {Array.<number>}
+     * @private
+     */
+    this._extent = extent || [0, 0];
+
+    /**
+     * @type {boolean}
+     */
+    this.inverse = false;
+
+    /**
+     * Usually true when axis has a ordinal scale
+     * @type {boolean}
+     */
+    this.onBand = false;
+};
+
+Axis.prototype = {
+
+    constructor: Axis,
+
+    /**
+     * If axis extent contain given coord
+     * @param {number} coord
+     * @return {boolean}
+     */
+    contain: function (coord) {
+        var extent = this._extent;
+        var min = Math.min(extent[0], extent[1]);
+        var max = Math.max(extent[0], extent[1]);
+        return coord >= min && coord <= max;
+    },
+
+    /**
+     * If axis extent contain given data
+     * @param {number} data
+     * @return {boolean}
+     */
+    containData: function (data) {
+        return this.contain(this.dataToCoord(data));
+    },
+
+    /**
+     * Get coord extent.
+     * @return {Array.<number>}
+     */
+    getExtent: function () {
+        return this._extent.slice();
+    },
+
+    /**
+     * Get precision used for formatting
+     * @param {Array.<number>} [dataExtent]
+     * @return {number}
+     */
+    getPixelPrecision: function (dataExtent) {
+        return getPixelPrecision(
+            dataExtent || this.scale.getExtent(),
+            this._extent
+        );
+    },
+
+    /**
+     * Set coord extent
+     * @param {number} start
+     * @param {number} end
+     */
+    setExtent: function (start, end) {
+        var extent = this._extent;
+        extent[0] = start;
+        extent[1] = end;
+    },
+
+    /**
+     * Convert data to coord. Data is the rank if it has an ordinal scale
+     * @param {number} data
+     * @param  {boolean} clamp
+     * @return {number}
+     */
+    dataToCoord: function (data, clamp) {
+        var extent = this._extent;
+        var scale = this.scale;
+        data = scale.normalize(data);
+
+        if (this.onBand && scale.type === 'ordinal') {
+            extent = extent.slice();
+            fixExtentWithBands(extent, scale.count());
+        }
+
+        return linearMap(data, NORMALIZED_EXTENT, extent, clamp);
+    },
+
+    /**
+     * Convert coord to data. Data is the rank if it has an ordinal scale
+     * @param {number} coord
+     * @param  {boolean} clamp
+     * @return {number}
+     */
+    coordToData: function (coord, clamp) {
+        var extent = this._extent;
+        var scale = this.scale;
+
+        if (this.onBand && scale.type === 'ordinal') {
+            extent = extent.slice();
+            fixExtentWithBands(extent, scale.count());
+        }
+
+        var t = linearMap(coord, extent, NORMALIZED_EXTENT, clamp);
+
+        return this.scale.scale(t);
+    },
+
+    /**
+     * Convert pixel point to data in axis
+     * @param {Array.<number>} point
+     * @param  {boolean} clamp
+     * @return {number} data
+     */
+    pointToData: function (point, clamp) {
+        // Should be implemented in derived class if necessary.
+    },
+
+    /**
+     * Different from `zrUtil.map(axis.getTicks(), axis.dataToCoord, axis)`,
+     * `axis.getTicksCoords` considers `onBand`, which is used by
+     * `boundaryGap:true` of category axis and splitLine and splitArea.
+     * @param {Object} [opt]
+     * @param {number} [opt.tickModel=axis.model.getModel('axisTick')]
+     * @param {boolean} [opt.clamp] If `true`, the first and the last
+     *        tick must be at the axis end points. Otherwise, clip ticks
+     *        that outside the axis extent.
+     * @return {Array.<Object>} [{
+     *     coord: ...,
+     *     tickValue: ...
+     * }, ...]
+     */
+    getTicksCoords: function (opt) {
+        opt = opt || {};
+
+        var tickModel = opt.tickModel || this.getTickModel();
+
+        var result = createAxisTicks(this, tickModel);
+        var ticks = result.ticks;
+
+        var ticksCoords = map(ticks, function (tickValue) {
+            return {
+                coord: this.dataToCoord(tickValue),
+                tickValue: tickValue
+            };
+        }, this);
+
+        var alignWithLabel = tickModel.get('alignWithLabel');
+        fixOnBandTicksCoords(
+            this, ticksCoords, result.tickCategoryInterval, alignWithLabel, opt.clamp
+        );
+
+        return ticksCoords;
+    },
+
+    /**
+     * @return {Array.<Object>} [{
+     *     formattedLabel: string,
+     *     rawLabel: axis.scale.getLabel(tickValue)
+     *     tickValue: number
+     * }, ...]
+     */
+    getViewLabels: function () {
+        return createAxisLabels(this).labels;
+    },
+
+    /**
+     * @return {module:echarts/coord/model/Model}
+     */
+    getLabelModel: function () {
+        return this.model.getModel('axisLabel');
+    },
+
+    /**
+     * Notice here we only get the default tick model. For splitLine
+     * or splitArea, we should pass the splitLineModel or splitAreaModel
+     * manually when calling `getTicksCoords`.
+     * In GL, this method may be overrided to:
+     * `axisModel.getModel('axisTick', grid3DModel.getModel('axisTick'));`
+     * @return {module:echarts/coord/model/Model}
+     */
+    getTickModel: function () {
+        return this.model.getModel('axisTick');
+    },
+
+    /**
+     * Get width of band
+     * @return {number}
+     */
+    getBandWidth: function () {
+        var axisExtent = this._extent;
+        var dataExtent = this.scale.getExtent();
+
+        var len = dataExtent[1] - dataExtent[0] + (this.onBand ? 1 : 0);
+        // Fix #2728, avoid NaN when only one data.
+        len === 0 && (len = 1);
+
+        var size = Math.abs(axisExtent[1] - axisExtent[0]);
+
+        return Math.abs(size) / len;
+    },
+
+    /**
+     * @abstract
+     * @return {boolean} Is horizontal
+     */
+    isHorizontal: null,
+
+    /**
+     * @abstract
+     * @return {number} Get axis rotate, by degree.
+     */
+    getRotate: null,
+
+    /**
+     * Only be called in category axis.
+     * Can be overrided, consider other axes like in 3D.
+     * @return {number} Auto interval for cateogry axis tick and label
+     */
+    calculateCategoryInterval: function () {
+        return calculateCategoryInterval(this);
+    }
+
+};
+
+function fixExtentWithBands(extent, nTick) {
+    var size = extent[1] - extent[0];
+    var len = nTick;
+    var margin = size / len / 2;
+    extent[0] += margin;
+    extent[1] -= margin;
+}
+
+// If axis has labels [1, 2, 3, 4]. Bands on the axis are
+// |---1---|---2---|---3---|---4---|.
+// So the displayed ticks and splitLine/splitArea should between
+// each data item, otherwise cause misleading (e.g., split tow bars
+// of a single data item when there are two bar series).
+// Also consider if tickCategoryInterval > 0 and onBand, ticks and
+// splitLine/spliteArea should layout appropriately corresponding
+// to displayed labels. (So we should not use `getBandWidth` in this
+// case).
+function fixOnBandTicksCoords(axis, ticksCoords, tickCategoryInterval, alignWithLabel, clamp) {
+    var ticksLen = ticksCoords.length;
+
+    if (!axis.onBand || alignWithLabel || !ticksLen) {
+        return;
+    }
+
+    var axisExtent = axis.getExtent();
+    var last;
+    if (ticksLen === 1) {
+        ticksCoords[0].coord = axisExtent[0];
+        last = ticksCoords[1] = {coord: axisExtent[0]};
+    }
+    else {
+        var shift = (ticksCoords[1].coord - ticksCoords[0].coord);
+        each$1(ticksCoords, function (ticksItem) {
+            ticksItem.coord -= shift / 2;
+            var tickCategoryInterval = tickCategoryInterval || 0;
+            // Avoid split a single data item when odd interval.
+            if (tickCategoryInterval % 2 > 0) {
+                ticksItem.coord -= shift / ((tickCategoryInterval + 1) * 2);
+            }
+        });
+        last = {coord: ticksCoords[ticksLen - 1].coord + shift};
+        ticksCoords.push(last);
+    }
+
+    var inverse = axisExtent[0] > axisExtent[1];
+
+    if (littleThan(ticksCoords[0].coord, axisExtent[0])) {
+        clamp ? (ticksCoords[0].coord = axisExtent[0]) : ticksCoords.shift();
+    }
+    if (clamp && littleThan(axisExtent[0], ticksCoords[0].coord)) {
+        ticksCoords.unshift({coord: axisExtent[0]});
+    }
+    if (littleThan(axisExtent[1], last.coord)) {
+        clamp ? (last.coord = axisExtent[1]) : ticksCoords.pop();
+    }
+    if (clamp && littleThan(last.coord, axisExtent[1])) {
+        ticksCoords.push({coord: axisExtent[1]});
+    }
+
+    function littleThan(a, b) {
+        return inverse ? a > b : a < b;
+    }
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Do not mount those modules on 'src/echarts' for better tree shaking.
+ */
+
+var parseGeoJson = parseGeoJson$1;
+
+var ecUtil = {};
+each$1([
+        'map', 'each', 'filter', 'indexOf', 'inherits', 'reduce', 'filter',
+        'bind', 'curry', 'isArray', 'isString', 'isObject', 'isFunction',
+        'extend', 'defaults', 'clone', 'merge'
+    ],
+    function (name) {
+        ecUtil[name] = zrUtil[name];
+    }
+);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+SeriesModel.extend({
+
+    type: 'series.line',
+
+    dependencies: ['grid', 'polar'],
+
+    getInitialData: function (option, ecModel) {
+        if (__DEV__) {
+            var coordSys = option.coordinateSystem;
+            if (coordSys !== 'polar' && coordSys !== 'cartesian2d') {
+                throw new Error('Line not support coordinateSystem besides cartesian and polar');
+            }
+        }
+        return createListFromArray(this.getSource(), this);
+    },
+
+    defaultOption: {
+        zlevel: 0,
+        z: 2,
+        coordinateSystem: 'cartesian2d',
+        legendHoverLink: true,
+
+        hoverAnimation: true,
+        // stack: null
+        // xAxisIndex: 0,
+        // yAxisIndex: 0,
+
+        // polarIndex: 0,
+
+        // If clip the overflow value
+        clipOverflow: true,
+        // cursor: null,
+
+        label: {
+            position: 'top'
+        },
+        // itemStyle: {
+        // },
+
+        lineStyle: {
+            width: 2,
+            type: 'solid'
+        },
+        // areaStyle: {
+            // origin of areaStyle. Valid values:
+            // `'auto'/null/undefined`: from axisLine to data
+            // `'start'`: from min to data
+            // `'end'`: from data to max
+            // origin: 'auto'
+        // },
+        // false, 'start', 'end', 'middle'
+        step: false,
+
+        // Disabled if step is true
+        smooth: false,
+        smoothMonotone: null,
+        symbol: 'emptyCircle',
+        symbolSize: 4,
+        symbolRotate: null,
+
+        showSymbol: true,
+        // `false`: follow the label interval strategy.
+        // `true`: show all symbols.
+        // `'auto'`: If possible, show all symbols, otherwise
+        //           follow the label interval strategy.
+        showAllSymbol: 'auto',
+
+        // Whether to connect break point.
+        connectNulls: false,
+
+        // Sampling for large data. Can be: 'average', 'max', 'min', 'sum'.
+        sampling: 'none',
+
+        animationEasing: 'linear',
+
+        // Disable progressive
+        progressive: 0,
+        hoverLayerThreshold: Infinity
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @param {module:echarts/data/List} data
+ * @param {number} dataIndex
+ * @return {string} label string. Not null/undefined
+ */
+function getDefaultLabel(data, dataIndex) {
+    var labelDims = data.mapDimension('defaultedLabel', true);
+    var len = labelDims.length;
+
+    // Simple optimization (in lots of cases, label dims length is 1)
+    if (len === 1) {
+        return retrieveRawValue(data, dataIndex, labelDims[0]);
+    }
+    else if (len) {
+        var vals = [];
+        for (var i = 0; i < labelDims.length; i++) {
+            var val = retrieveRawValue(data, dataIndex, labelDims[i]);
+            vals.push(val);
+        }
+        return vals.join(' ');
+    }
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @module echarts/chart/helper/Symbol
+ */
+
+/**
+ * @constructor
+ * @alias {module:echarts/chart/helper/Symbol}
+ * @param {module:echarts/data/List} data
+ * @param {number} idx
+ * @extends {module:zrender/graphic/Group}
+ */
+function SymbolClz$1(data, idx, seriesScope) {
+    Group.call(this);
+    this.updateData(data, idx, seriesScope);
+}
+
+var symbolProto = SymbolClz$1.prototype;
+
+/**
+ * @public
+ * @static
+ * @param {module:echarts/data/List} data
+ * @param {number} dataIndex
+ * @return {Array.<number>} [width, height]
+ */
+var getSymbolSize = SymbolClz$1.getSymbolSize = function (data, idx) {
+    var symbolSize = data.getItemVisual(idx, 'symbolSize');
+    return symbolSize instanceof Array
+        ? symbolSize.slice()
+        : [+symbolSize, +symbolSize];
+};
+
+function getScale(symbolSize) {
+    return [symbolSize[0] / 2, symbolSize[1] / 2];
+}
+
+function driftSymbol(dx, dy) {
+    this.parent.drift(dx, dy);
+}
+
+symbolProto._createSymbol = function (
+    symbolType,
+    data,
+    idx,
+    symbolSize,
+    keepAspect
+) {
+    // Remove paths created before
+    this.removeAll();
+
+    var color = data.getItemVisual(idx, 'color');
+
+    // var symbolPath = createSymbol(
+    //     symbolType, -0.5, -0.5, 1, 1, color
+    // );
+    // If width/height are set too small (e.g., set to 1) on ios10
+    // and macOS Sierra, a circle stroke become a rect, no matter what
+    // the scale is set. So we set width/height as 2. See #4150.
+    var symbolPath = createSymbol(
+        symbolType, -1, -1, 2, 2, color, keepAspect
+    );
+
+    symbolPath.attr({
+        z2: 100,
+        culling: true,
+        scale: getScale(symbolSize)
+    });
+    // Rewrite drift method
+    symbolPath.drift = driftSymbol;
+
+    this._symbolType = symbolType;
+
+    this.add(symbolPath);
+};
+
+/**
+ * Stop animation
+ * @param {boolean} toLastFrame
+ */
+symbolProto.stopSymbolAnimation = function (toLastFrame) {
+    this.childAt(0).stopAnimation(toLastFrame);
+};
+
+/**
+ * FIXME:
+ * Caution: This method breaks the encapsulation of this module,
+ * but it indeed brings convenience. So do not use the method
+ * unless you detailedly know all the implements of `Symbol`,
+ * especially animation.
+ *
+ * Get symbol path element.
+ */
+symbolProto.getSymbolPath = function () {
+    return this.childAt(0);
+};
+
+/**
+ * Get scale(aka, current symbol size).
+ * Including the change caused by animation
+ */
+symbolProto.getScale = function () {
+    return this.childAt(0).scale;
+};
+
+/**
+ * Highlight symbol
+ */
+symbolProto.highlight = function () {
+    this.childAt(0).trigger('emphasis');
+};
+
+/**
+ * Downplay symbol
+ */
+symbolProto.downplay = function () {
+    this.childAt(0).trigger('normal');
+};
+
+/**
+ * @param {number} zlevel
+ * @param {number} z
+ */
+symbolProto.setZ = function (zlevel, z) {
+    var symbolPath = this.childAt(0);
+    symbolPath.zlevel = zlevel;
+    symbolPath.z = z;
+};
+
+symbolProto.setDraggable = function (draggable) {
+    var symbolPath = this.childAt(0);
+    symbolPath.draggable = draggable;
+    symbolPath.cursor = draggable ? 'move' : 'pointer';
+};
+
+/**
+ * Update symbol properties
+ * @param {module:echarts/data/List} data
+ * @param {number} idx
+ * @param {Object} [seriesScope]
+ * @param {Object} [seriesScope.itemStyle]
+ * @param {Object} [seriesScope.hoverItemStyle]
+ * @param {Object} [seriesScope.symbolRotate]
+ * @param {Object} [seriesScope.symbolOffset]
+ * @param {module:echarts/model/Model} [seriesScope.labelModel]
+ * @param {module:echarts/model/Model} [seriesScope.hoverLabelModel]
+ * @param {boolean} [seriesScope.hoverAnimation]
+ * @param {Object} [seriesScope.cursorStyle]
+ * @param {module:echarts/model/Model} [seriesScope.itemModel]
+ * @param {string} [seriesScope.symbolInnerColor]
+ * @param {Object} [seriesScope.fadeIn=false]
+ */
+symbolProto.updateData = function (data, idx, seriesScope) {
+    this.silent = false;
+
+    var symbolType = data.getItemVisual(idx, 'symbol') || 'circle';
+    var seriesModel = data.hostModel;
+    var symbolSize = getSymbolSize(data, idx);
+    var isInit = symbolType !== this._symbolType;
+
+    if (isInit) {
+        var keepAspect = data.getItemVisual(idx, 'symbolKeepAspect');
+        this._createSymbol(symbolType, data, idx, symbolSize, keepAspect);
+    }
+    else {
+        var symbolPath = this.childAt(0);
+        symbolPath.silent = false;
+        updateProps(symbolPath, {
+            scale: getScale(symbolSize)
+        }, seriesModel, idx);
+    }
+
+    this._updateCommon(data, idx, symbolSize, seriesScope);
+
+    if (isInit) {
+        var symbolPath = this.childAt(0);
+        var fadeIn = seriesScope && seriesScope.fadeIn;
+
+        var target = {scale: symbolPath.scale.slice()};
+        fadeIn && (target.style = {opacity: symbolPath.style.opacity});
+
+        symbolPath.scale = [0, 0];
+        fadeIn && (symbolPath.style.opacity = 0);
+
+        initProps(symbolPath, target, seriesModel, idx);
+    }
+
+    this._seriesModel = seriesModel;
+};
+
+// Update common properties
+var normalStyleAccessPath = ['itemStyle'];
+var emphasisStyleAccessPath = ['emphasis', 'itemStyle'];
+var normalLabelAccessPath = ['label'];
+var emphasisLabelAccessPath = ['emphasis', 'label'];
+
+/**
+ * @param {module:echarts/data/List} data
+ * @param {number} idx
+ * @param {Array.<number>} symbolSize
+ * @param {Object} [seriesScope]
+ */
+symbolProto._updateCommon = function (data, idx, symbolSize, seriesScope) {
+    var symbolPath = this.childAt(0);
+    var seriesModel = data.hostModel;
+    var color = data.getItemVisual(idx, 'color');
+
+    // Reset style
+    if (symbolPath.type !== 'image') {
+        symbolPath.useStyle({
+            strokeNoScale: true
+        });
+    }
+
+    var itemStyle = seriesScope && seriesScope.itemStyle;
+    var hoverItemStyle = seriesScope && seriesScope.hoverItemStyle;
+    var symbolRotate = seriesScope && seriesScope.symbolRotate;
+    var symbolOffset = seriesScope && seriesScope.symbolOffset;
+    var labelModel = seriesScope && seriesScope.labelModel;
+    var hoverLabelModel = seriesScope && seriesScope.hoverLabelModel;
+    var hoverAnimation = seriesScope && seriesScope.hoverAnimation;
+    var cursorStyle = seriesScope && seriesScope.cursorStyle;
+
+    if (!seriesScope || data.hasItemOption) {
+        var itemModel = (seriesScope && seriesScope.itemModel)
+            ? seriesScope.itemModel : data.getItemModel(idx);
+
+        // Color must be excluded.
+        // Because symbol provide setColor individually to set fill and stroke
+        itemStyle = itemModel.getModel(normalStyleAccessPath).getItemStyle(['color']);
+        hoverItemStyle = itemModel.getModel(emphasisStyleAccessPath).getItemStyle();
+
+        symbolRotate = itemModel.getShallow('symbolRotate');
+        symbolOffset = itemModel.getShallow('symbolOffset');
+
+        labelModel = itemModel.getModel(normalLabelAccessPath);
+        hoverLabelModel = itemModel.getModel(emphasisLabelAccessPath);
+        hoverAnimation = itemModel.getShallow('hoverAnimation');
+        cursorStyle = itemModel.getShallow('cursor');
+    }
+    else {
+        hoverItemStyle = extend({}, hoverItemStyle);
+    }
+
+    var elStyle = symbolPath.style;
+
+    symbolPath.attr('rotation', (symbolRotate || 0) * Math.PI / 180 || 0);
+
+    if (symbolOffset) {
+        symbolPath.attr('position', [
+            parsePercent$1(symbolOffset[0], symbolSize[0]),
+            parsePercent$1(symbolOffset[1], symbolSize[1])
+        ]);
+    }
+
+    cursorStyle && symbolPath.attr('cursor', cursorStyle);
+
+    // PENDING setColor before setStyle!!!
+    symbolPath.setColor(color, seriesScope && seriesScope.symbolInnerColor);
+
+    symbolPath.setStyle(itemStyle);
+
+    var opacity = data.getItemVisual(idx, 'opacity');
+    if (opacity != null) {
+        elStyle.opacity = opacity;
+    }
+
+    var liftZ = data.getItemVisual(idx, 'liftZ');
+    var z2Origin = symbolPath.__z2Origin;
+    if (liftZ != null) {
+        if (z2Origin == null) {
+            symbolPath.__z2Origin = symbolPath.z2;
+            symbolPath.z2 += liftZ;
+        }
+    }
+    else if (z2Origin != null) {
+        symbolPath.z2 = z2Origin;
+        symbolPath.__z2Origin = null;
+    }
+
+    var useNameLabel = seriesScope && seriesScope.useNameLabel;
+
+    setLabelStyle(
+        elStyle, hoverItemStyle, labelModel, hoverLabelModel,
+        {
+            labelFetcher: seriesModel,
+            labelDataIndex: idx,
+            defaultText: getLabelDefaultText,
+            isRectText: true,
+            autoColor: color
+        }
+    );
+
+    // Do not execute util needed.
+    function getLabelDefaultText(idx, opt) {
+        return useNameLabel ? data.getName(idx) : getDefaultLabel(data, idx);
+    }
+
+    symbolPath.off('mouseover')
+        .off('mouseout')
+        .off('emphasis')
+        .off('normal');
+
+    symbolPath.hoverStyle = hoverItemStyle;
+
+    // FIXME
+    // Do not use symbol.trigger('emphasis'), but use symbol.highlight() instead.
+    setHoverStyle(symbolPath);
+
+    var scale = getScale(symbolSize);
+
+    if (hoverAnimation && seriesModel.isAnimationEnabled()) {
+        var onEmphasis = function() {
+            // Do not support this hover animation util some scenario required.
+            // Animation can only be supported in hover layer when using `el.incremetal`.
+            if (this.incremental) {
+                return;
+            }
+            var ratio = scale[1] / scale[0];
+            this.animateTo({
+                scale: [
+                    Math.max(scale[0] * 1.1, scale[0] + 3),
+                    Math.max(scale[1] * 1.1, scale[1] + 3 * ratio)
+                ]
+            }, 400, 'elasticOut');
+        };
+        var onNormal = function() {
+            if (this.incremental) {
+                return;
+            }
+            this.animateTo({
+                scale: scale
+            }, 400, 'elasticOut');
+        };
+        symbolPath.on('mouseover', onEmphasis)
+            .on('mouseout', onNormal)
+            .on('emphasis', onEmphasis)
+            .on('normal', onNormal);
+    }
+};
+
+/**
+ * @param {Function} cb
+ * @param {Object} [opt]
+ * @param {Object} [opt.keepLabel=true]
+ */
+symbolProto.fadeOut = function (cb, opt) {
+    var symbolPath = this.childAt(0);
+    // Avoid mistaken hover when fading out
+    this.silent = symbolPath.silent = true;
+    // Not show text when animating
+    !(opt && opt.keepLabel) && (symbolPath.style.text = null);
+
+    updateProps(
+        symbolPath,
+        {
+            style: {opacity: 0},
+            scale: [0, 0]
+        },
+        this._seriesModel,
+        this.dataIndex,
+        cb
+    );
+};
+
+inherits(SymbolClz$1, Group);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @module echarts/chart/helper/SymbolDraw
+ */
+
+/**
+ * @constructor
+ * @alias module:echarts/chart/helper/SymbolDraw
+ * @param {module:zrender/graphic/Group} [symbolCtor]
+ */
+function SymbolDraw(symbolCtor) {
+    this.group = new Group();
+
+    this._symbolCtor = symbolCtor || SymbolClz$1;
+}
+
+var symbolDrawProto = SymbolDraw.prototype;
+
+function symbolNeedsDraw(data, point, idx, opt) {
+    return point && !isNaN(point[0]) && !isNaN(point[1])
+        && !(opt.isIgnore && opt.isIgnore(idx))
+        // We do not set clipShape on group, because it will cut part of
+        // the symbol element shape. We use the same clip shape here as
+        // the line clip.
+        && !(opt.clipShape && !opt.clipShape.contain(point[0], point[1]))
+        && data.getItemVisual(idx, 'symbol') !== 'none';
+}
+
+/**
+ * Update symbols draw by new data
+ * @param {module:echarts/data/List} data
+ * @param {Object} [opt] Or isIgnore
+ * @param {Function} [opt.isIgnore]
+ * @param {Object} [opt.clipShape]
+ */
+symbolDrawProto.updateData = function (data, opt) {
+    opt = normalizeUpdateOpt(opt);
+
+    var group = this.group;
+    var seriesModel = data.hostModel;
+    var oldData = this._data;
+    var SymbolCtor = this._symbolCtor;
+
+    var seriesScope = makeSeriesScope(data);
+
+    // There is no oldLineData only when first rendering or switching from
+    // stream mode to normal mode, where previous elements should be removed.
+    if (!oldData) {
+        group.removeAll();
+    }
+
+    data.diff(oldData)
+        .add(function (newIdx) {
+            var point = data.getItemLayout(newIdx);
+            if (symbolNeedsDraw(data, point, newIdx, opt)) {
+                var symbolEl = new SymbolCtor(data, newIdx, seriesScope);
+                symbolEl.attr('position', point);
+                data.setItemGraphicEl(newIdx, symbolEl);
+                group.add(symbolEl);
+            }
+        })
+        .update(function (newIdx, oldIdx) {
+            var symbolEl = oldData.getItemGraphicEl(oldIdx);
+            var point = data.getItemLayout(newIdx);
+            if (!symbolNeedsDraw(data, point, newIdx, opt)) {
+                group.remove(symbolEl);
+                return;
+            }
+            if (!symbolEl) {
+                symbolEl = new SymbolCtor(data, newIdx);
+                symbolEl.attr('position', point);
+            }
+            else {
+                symbolEl.updateData(data, newIdx, seriesScope);
+                updateProps(symbolEl, {
+                    position: point
+                }, seriesModel);
+            }
+
+            // Add back
+            group.add(symbolEl);
+
+            data.setItemGraphicEl(newIdx, symbolEl);
+        })
+        .remove(function (oldIdx) {
+            var el = oldData.getItemGraphicEl(oldIdx);
+            el && el.fadeOut(function () {
+                group.remove(el);
+            });
+        })
+        .execute();
+
+    this._data = data;
+};
+
+symbolDrawProto.isPersistent = function () {
+    return true;
+};
+
+symbolDrawProto.updateLayout = function () {
+    var data = this._data;
+    if (data) {
+        // Not use animation
+        data.eachItemGraphicEl(function (el, idx) {
+            var point = data.getItemLayout(idx);
+            el.attr('position', point);
+        });
+    }
+};
+
+symbolDrawProto.incrementalPrepareUpdate = function (data) {
+    this._seriesScope = makeSeriesScope(data);
+    this._data = null;
+    this.group.removeAll();
+};
+
+/**
+ * Update symbols draw by new data
+ * @param {module:echarts/data/List} data
+ * @param {Object} [opt] Or isIgnore
+ * @param {Function} [opt.isIgnore]
+ * @param {Object} [opt.clipShape]
+ */
+symbolDrawProto.incrementalUpdate = function (taskParams, data, opt) {
+    opt = normalizeUpdateOpt(opt);
+
+    function updateIncrementalAndHover(el) {
+        if (!el.isGroup) {
+            el.incremental = el.useHoverLayer = true;
+        }
+    }
+    for (var idx = taskParams.start; idx < taskParams.end; idx++) {
+        var point = data.getItemLayout(idx);
+        if (symbolNeedsDraw(data, point, idx, opt)) {
+            var el = new this._symbolCtor(data, idx, this._seriesScope);
+            el.traverse(updateIncrementalAndHover);
+            el.attr('position', point);
+            this.group.add(el);
+            data.setItemGraphicEl(idx, el);
+        }
+    }
+};
+
+function normalizeUpdateOpt(opt) {
+    if (opt != null && !isObject$1(opt)) {
+        opt = {isIgnore: opt};
+    }
+    return opt || {};
+}
+
+symbolDrawProto.remove = function (enableAnimation) {
+    var group = this.group;
+    var data = this._data;
+    // Incremental model do not have this._data.
+    if (data && enableAnimation) {
+        data.eachItemGraphicEl(function (el) {
+            el.fadeOut(function () {
+                group.remove(el);
+            });
+        });
+    }
+    else {
+        group.removeAll();
+    }
+};
+
+function makeSeriesScope(data) {
+    var seriesModel = data.hostModel;
+    return {
+        itemStyle: seriesModel.getModel('itemStyle').getItemStyle(['color']),
+        hoverItemStyle: seriesModel.getModel('emphasis.itemStyle').getItemStyle(),
+        symbolRotate: seriesModel.get('symbolRotate'),
+        symbolOffset: seriesModel.get('symbolOffset'),
+        hoverAnimation: seriesModel.get('hoverAnimation'),
+        labelModel: seriesModel.getModel('label'),
+        hoverLabelModel: seriesModel.getModel('emphasis.label'),
+        cursorStyle: seriesModel.get('cursor')
+    };
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @param {Object} coordSys
+ * @param {module:echarts/data/List} data
+ * @param {string} valueOrigin lineSeries.option.areaStyle.origin
+ */
+function prepareDataCoordInfo(coordSys, data, valueOrigin) {
+    var baseAxis = coordSys.getBaseAxis();
+    var valueAxis = coordSys.getOtherAxis(baseAxis);
+    var valueStart = getValueStart(valueAxis, valueOrigin);
+
+    var baseAxisDim = baseAxis.dim;
+    var valueAxisDim = valueAxis.dim;
+    var valueDim = data.mapDimension(valueAxisDim);
+    var baseDim = data.mapDimension(baseAxisDim);
+    var baseDataOffset = valueAxisDim === 'x' || valueAxisDim === 'radius' ? 1 : 0;
+
+    var dims = map(coordSys.dimensions, function (coordDim) {
+        return data.mapDimension(coordDim);
+    });
+
+    var stacked;
+    var stackResultDim = data.getCalculationInfo('stackResultDimension');
+    if (stacked |= isDimensionStacked(data, dims[0] /*, dims[1]*/)) { // jshint ignore:line
+        dims[0] = stackResultDim;
+    }
+    if (stacked |= isDimensionStacked(data, dims[1] /*, dims[0]*/)) { // jshint ignore:line
+        dims[1] = stackResultDim;
+    }
+
+    return {
+        dataDimsForPoint: dims,
+        valueStart: valueStart,
+        valueAxisDim: valueAxisDim,
+        baseAxisDim: baseAxisDim,
+        stacked: !!stacked,
+        valueDim: valueDim,
+        baseDim: baseDim,
+        baseDataOffset: baseDataOffset,
+        stackedOverDimension: data.getCalculationInfo('stackedOverDimension')
+    };
+}
+
+function getValueStart(valueAxis, valueOrigin) {
+    var valueStart = 0;
+    var extent = valueAxis.scale.getExtent();
+
+    if (valueOrigin === 'start') {
+        valueStart = extent[0];
+    }
+    else if (valueOrigin === 'end') {
+        valueStart = extent[1];
+    }
+    // auto
+    else {
+        // Both positive
+        if (extent[0] > 0) {
+            valueStart = extent[0];
+        }
+        // Both negative
+        else if (extent[1] < 0) {
+            valueStart = extent[1];
+        }
+        // If is one positive, and one negative, onZero shall be true
+    }
+
+    return valueStart;
+}
+
+function getStackedOnPoint(dataCoordInfo, coordSys, data, idx) {
+    var value = NaN;
+    if (dataCoordInfo.stacked) {
+        value = data.get(data.getCalculationInfo('stackedOverDimension'), idx);
+    }
+    if (isNaN(value)) {
+        value = dataCoordInfo.valueStart;
+    }
+
+    var baseDataOffset = dataCoordInfo.baseDataOffset;
+    var stackedData = [];
+    stackedData[baseDataOffset] = data.get(dataCoordInfo.baseDim, idx);
+    stackedData[1 - baseDataOffset] = value;
+
+    return coordSys.dataToPoint(stackedData);
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// var arrayDiff = require('zrender/src/core/arrayDiff');
+// 'zrender/src/core/arrayDiff' has been used before, but it did
+// not do well in performance when roam with fixed dataZoom window.
+
+// function convertToIntId(newIdList, oldIdList) {
+//     // Generate int id instead of string id.
+//     // Compare string maybe slow in score function of arrDiff
+
+//     // Assume id in idList are all unique
+//     var idIndicesMap = {};
+//     var idx = 0;
+//     for (var i = 0; i < newIdList.length; i++) {
+//         idIndicesMap[newIdList[i]] = idx;
+//         newIdList[i] = idx++;
+//     }
+//     for (var i = 0; i < oldIdList.length; i++) {
+//         var oldId = oldIdList[i];
+//         // Same with newIdList
+//         if (idIndicesMap[oldId]) {
+//             oldIdList[i] = idIndicesMap[oldId];
+//         }
+//         else {
+//             oldIdList[i] = idx++;
+//         }
+//     }
+// }
+
+function diffData(oldData, newData) {
+    var diffResult = [];
+
+    newData.diff(oldData)
+        .add(function (idx) {
+            diffResult.push({cmd: '+', idx: idx});
+        })
+        .update(function (newIdx, oldIdx) {
+            diffResult.push({cmd: '=', idx: oldIdx, idx1: newIdx});
+        })
+        .remove(function (idx) {
+            diffResult.push({cmd: '-', idx: idx});
+        })
+        .execute();
+
+    return diffResult;
+}
+
+var lineAnimationDiff = function (
+    oldData, newData,
+    oldStackedOnPoints, newStackedOnPoints,
+    oldCoordSys, newCoordSys,
+    oldValueOrigin, newValueOrigin
+) {
+    var diff = diffData(oldData, newData);
+
+    // var newIdList = newData.mapArray(newData.getId);
+    // var oldIdList = oldData.mapArray(oldData.getId);
+
+    // convertToIntId(newIdList, oldIdList);
+
+    // // FIXME One data ?
+    // diff = arrayDiff(oldIdList, newIdList);
+
+    var currPoints = [];
+    var nextPoints = [];
+    // Points for stacking base line
+    var currStackedPoints = [];
+    var nextStackedPoints = [];
+
+    var status = [];
+    var sortedIndices = [];
+    var rawIndices = [];
+
+    var newDataOldCoordInfo = prepareDataCoordInfo(oldCoordSys, newData, oldValueOrigin);
+    var oldDataNewCoordInfo = prepareDataCoordInfo(newCoordSys, oldData, newValueOrigin);
+
+    for (var i = 0; i < diff.length; i++) {
+        var diffItem = diff[i];
+        var pointAdded = true;
+
+        // FIXME, animation is not so perfect when dataZoom window moves fast
+        // Which is in case remvoing or add more than one data in the tail or head
+        switch (diffItem.cmd) {
+            case '=':
+                var currentPt = oldData.getItemLayout(diffItem.idx);
+                var nextPt = newData.getItemLayout(diffItem.idx1);
+                // If previous data is NaN, use next point directly
+                if (isNaN(currentPt[0]) || isNaN(currentPt[1])) {
+                    currentPt = nextPt.slice();
+                }
+                currPoints.push(currentPt);
+                nextPoints.push(nextPt);
+
+                currStackedPoints.push(oldStackedOnPoints[diffItem.idx]);
+                nextStackedPoints.push(newStackedOnPoints[diffItem.idx1]);
+
+                rawIndices.push(newData.getRawIndex(diffItem.idx1));
+                break;
+            case '+':
+                var idx = diffItem.idx;
+                currPoints.push(
+                    oldCoordSys.dataToPoint([
+                        newData.get(newDataOldCoordInfo.dataDimsForPoint[0], idx),
+                        newData.get(newDataOldCoordInfo.dataDimsForPoint[1], idx)
+                    ])
+                );
+
+                nextPoints.push(newData.getItemLayout(idx).slice());
+
+                currStackedPoints.push(
+                    getStackedOnPoint(newDataOldCoordInfo, oldCoordSys, newData, idx)
+                );
+                nextStackedPoints.push(newStackedOnPoints[idx]);
+
+                rawIndices.push(newData.getRawIndex(idx));
+                break;
+            case '-':
+                var idx = diffItem.idx;
+                var rawIndex = oldData.getRawIndex(idx);
+                // Data is replaced. In the case of dynamic data queue
+                // FIXME FIXME FIXME
+                if (rawIndex !== idx) {
+                    currPoints.push(oldData.getItemLayout(idx));
+                    nextPoints.push(newCoordSys.dataToPoint([
+                        oldData.get(oldDataNewCoordInfo.dataDimsForPoint[0], idx),
+                        oldData.get(oldDataNewCoordInfo.dataDimsForPoint[1], idx)
+                    ]));
+
+                    currStackedPoints.push(oldStackedOnPoints[idx]);
+                    nextStackedPoints.push(
+                        getStackedOnPoint(oldDataNewCoordInfo, newCoordSys, oldData, idx)
+                    );
+
+                    rawIndices.push(rawIndex);
+                }
+                else {
+                    pointAdded = false;
+                }
+        }
+
+        // Original indices
+        if (pointAdded) {
+            status.push(diffItem);
+            sortedIndices.push(sortedIndices.length);
+        }
+    }
+
+    // Diff result may be crossed if all items are changed
+    // Sort by data index
+    sortedIndices.sort(function (a, b) {
+        return rawIndices[a] - rawIndices[b];
+    });
+
+    var sortedCurrPoints = [];
+    var sortedNextPoints = [];
+
+    var sortedCurrStackedPoints = [];
+    var sortedNextStackedPoints = [];
+
+    var sortedStatus = [];
+    for (var i = 0; i < sortedIndices.length; i++) {
+        var idx = sortedIndices[i];
+        sortedCurrPoints[i] = currPoints[idx];
+        sortedNextPoints[i] = nextPoints[idx];
+
+        sortedCurrStackedPoints[i] = currStackedPoints[idx];
+        sortedNextStackedPoints[i] = nextStackedPoints[idx];
+
+        sortedStatus[i] = status[idx];
+    }
+
+    return {
+        current: sortedCurrPoints,
+        next: sortedNextPoints,
+
+        stackedOnCurrent: sortedCurrStackedPoints,
+        stackedOnNext: sortedNextStackedPoints,
+
+        status: sortedStatus
+    };
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// Poly path support NaN point
+
+var vec2Min = min;
+var vec2Max = max;
+
+var scaleAndAdd$1 = scaleAndAdd;
+var v2Copy = copy;
+
+// Temporary variable
+var v = [];
+var cp0 = [];
+var cp1 = [];
+
+function isPointNull(p) {
+    return isNaN(p[0]) || isNaN(p[1]);
+}
+
+function drawSegment(
+    ctx, points, start, segLen, allLen,
+    dir, smoothMin, smoothMax, smooth, smoothMonotone, connectNulls
+) {
+    // if (smoothMonotone == null) {
+    //     if (isMono(points, 'x')) {
+    //         return drawMono(ctx, points, start, segLen, allLen,
+    //             dir, smoothMin, smoothMax, smooth, 'x', connectNulls);
+    //     }
+    //     else if (isMono(points, 'y')) {
+    //         return drawMono(ctx, points, start, segLen, allLen,
+    //             dir, smoothMin, smoothMax, smooth, 'y', connectNulls);
+    //     }
+    //     else {
+    //         return drawNonMono.apply(this, arguments);
+    //     }
+    // }
+    // else if (smoothMonotone !== 'none' && isMono(points, smoothMonotone)) {
+    //     return drawMono.apply(this, arguments);
+    // }
+    // else {
+    //     return drawNonMono.apply(this, arguments);
+    // }
+    if (smoothMonotone === 'none' || !smoothMonotone) {
+        return drawNonMono.apply(this, arguments);
+    }
+    else {
+        return drawMono.apply(this, arguments);
+    }
+}
+
+/**
+ * Check if points is in monotone.
+ *
+ * @param {number[][]} points         Array of points which is in [x, y] form
+ * @param {string}     smoothMonotone 'x', 'y', or 'none', stating for which
+ *                                    dimension that is checking.
+ *                                    If is 'none', `drawNonMono` should be
+ *                                    called.
+ *                                    If is undefined, either being monotone
+ *                                    in 'x' or 'y' will call `drawMono`.
+ */
+// function isMono(points, smoothMonotone) {
+//     if (points.length <= 1) {
+//         return true;
+//     }
+
+//     var dim = smoothMonotone === 'x' ? 0 : 1;
+//     var last = points[0][dim];
+//     var lastDiff = 0;
+//     for (var i = 1; i < points.length; ++i) {
+//         var diff = points[i][dim] - last;
+//         if (!isNaN(diff) && !isNaN(lastDiff)
+//             && diff !== 0 && lastDiff !== 0
+//             && ((diff >= 0) !== (lastDiff >= 0))
+//         ) {
+//             return false;
+//         }
+//         if (!isNaN(diff) && diff !== 0) {
+//             lastDiff = diff;
+//             last = points[i][dim];
+//         }
+//     }
+//     return true;
+// }
+
+/**
+ * Draw smoothed line in monotone, in which only vertical or horizontal bezier
+ * control points will be used. This should be used when points are monotone
+ * either in x or y dimension.
+ */
+function drawMono(
+    ctx, points, start, segLen, allLen,
+    dir, smoothMin, smoothMax, smooth, smoothMonotone, connectNulls
+) {
+    var prevIdx = 0;
+    var idx = start;
+    for (var k = 0; k < segLen; k++) {
+        var p = points[idx];
+        if (idx >= allLen || idx < 0) {
+            break;
+        }
+        if (isPointNull(p)) {
+            if (connectNulls) {
+                idx += dir;
+                continue;
+            }
+            break;
+        }
+
+        if (idx === start) {
+            ctx[dir > 0 ? 'moveTo' : 'lineTo'](p[0], p[1]);
+        }
+        else {
+            if (smooth > 0) {
+                var prevP = points[prevIdx];
+                var dim = smoothMonotone === 'y' ? 1 : 0;
+
+                // Length of control point to p, either in x or y, but not both
+                var ctrlLen = (p[dim] - prevP[dim]) * smooth;
+
+                v2Copy(cp0, prevP);
+                cp0[dim] = prevP[dim] + ctrlLen;
+
+                v2Copy(cp1, p);
+                cp1[dim] = p[dim] - ctrlLen;
+
+                ctx.bezierCurveTo(
+                    cp0[0], cp0[1],
+                    cp1[0], cp1[1],
+                    p[0], p[1]
+                );
+            }
+            else {
+                ctx.lineTo(p[0], p[1]);
+            }
+        }
+
+        prevIdx = idx;
+        idx += dir;
+    }
+
+    return k;
+}
+
+/**
+ * Draw smoothed line in non-monotone, in may cause undesired curve in extreme
+ * situations. This should be used when points are non-monotone neither in x or
+ * y dimension.
+ */
+function drawNonMono(
+    ctx, points, start, segLen, allLen,
+    dir, smoothMin, smoothMax, smooth, smoothMonotone, connectNulls
+) {
+    var prevIdx = 0;
+    var idx = start;
+    for (var k = 0; k < segLen; k++) {
+        var p = points[idx];
+        if (idx >= allLen || idx < 0) {
+            break;
+        }
+        if (isPointNull(p)) {
+            if (connectNulls) {
+                idx += dir;
+                continue;
+            }
+            break;
+        }
+
+        if (idx === start) {
+            ctx[dir > 0 ? 'moveTo' : 'lineTo'](p[0], p[1]);
+            v2Copy(cp0, p);
+        }
+        else {
+            if (smooth > 0) {
+                var nextIdx = idx + dir;
+                var nextP = points[nextIdx];
+                if (connectNulls) {
+                    // Find next point not null
+                    while (nextP && isPointNull(points[nextIdx])) {
+                        nextIdx += dir;
+                        nextP = points[nextIdx];
+                    }
+                }
+
+                var ratioNextSeg = 0.5;
+                var prevP = points[prevIdx];
+                var nextP = points[nextIdx];
+                // Last point
+                if (!nextP || isPointNull(nextP)) {
+                    v2Copy(cp1, p);
+                }
+                else {
+                    // If next data is null in not connect case
+                    if (isPointNull(nextP) && !connectNulls) {
+                        nextP = p;
+                    }
+
+                    sub(v, nextP, prevP);
+
+                    var lenPrevSeg;
+                    var lenNextSeg;
+                    if (smoothMonotone === 'x' || smoothMonotone === 'y') {
+                        var dim = smoothMonotone === 'x' ? 0 : 1;
+                        lenPrevSeg = Math.abs(p[dim] - prevP[dim]);
+                        lenNextSeg = Math.abs(p[dim] - nextP[dim]);
+                    }
+                    else {
+                        lenPrevSeg = dist(p, prevP);
+                        lenNextSeg = dist(p, nextP);
+                    }
+
+                    // Use ratio of seg length
+                    ratioNextSeg = lenNextSeg / (lenNextSeg + lenPrevSeg);
+
+                    scaleAndAdd$1(cp1, p, v, -smooth * (1 - ratioNextSeg));
+                }
+                // Smooth constraint
+                vec2Min(cp0, cp0, smoothMax);
+                vec2Max(cp0, cp0, smoothMin);
+                vec2Min(cp1, cp1, smoothMax);
+                vec2Max(cp1, cp1, smoothMin);
+
+                ctx.bezierCurveTo(
+                    cp0[0], cp0[1],
+                    cp1[0], cp1[1],
+                    p[0], p[1]
+                );
+                // cp0 of next segment
+                scaleAndAdd$1(cp0, p, v, smooth * ratioNextSeg);
+            }
+            else {
+                ctx.lineTo(p[0], p[1]);
+            }
+        }
+
+        prevIdx = idx;
+        idx += dir;
+    }
+
+    return k;
+}
+
+function getBoundingBox(points, smoothConstraint) {
+    var ptMin = [Infinity, Infinity];
+    var ptMax = [-Infinity, -Infinity];
+    if (smoothConstraint) {
+        for (var i = 0; i < points.length; i++) {
+            var pt = points[i];
+            if (pt[0] < ptMin[0]) { ptMin[0] = pt[0]; }
+            if (pt[1] < ptMin[1]) { ptMin[1] = pt[1]; }
+            if (pt[0] > ptMax[0]) { ptMax[0] = pt[0]; }
+            if (pt[1] > ptMax[1]) { ptMax[1] = pt[1]; }
+        }
+    }
+    return {
+        min: smoothConstraint ? ptMin : ptMax,
+        max: smoothConstraint ? ptMax : ptMin
+    };
+}
+
+var Polyline$1 = Path.extend({
+
+    type: 'ec-polyline',
+
+    shape: {
+        points: [],
+
+        smooth: 0,
+
+        smoothConstraint: true,
+
+        smoothMonotone: null,
+
+        connectNulls: false
+    },
+
+    style: {
+        fill: null,
+
+        stroke: '#000'
+    },
+
+    brush: fixClipWithShadow(Path.prototype.brush),
+
+    buildPath: function (ctx, shape) {
+        var points = shape.points;
+
+        var i = 0;
+        var len$$1 = points.length;
+
+        var result = getBoundingBox(points, shape.smoothConstraint);
+
+        if (shape.connectNulls) {
+            // Must remove first and last null values avoid draw error in polygon
+            for (; len$$1 > 0; len$$1--) {
+                if (!isPointNull(points[len$$1 - 1])) {
+                    break;
+                }
+            }
+            for (; i < len$$1; i++) {
+                if (!isPointNull(points[i])) {
+                    break;
+                }
+            }
+        }
+        while (i < len$$1) {
+            i += drawSegment(
+                ctx, points, i, len$$1, len$$1,
+                1, result.min, result.max, shape.smooth,
+                shape.smoothMonotone, shape.connectNulls
+            ) + 1;
+        }
+    }
+});
+
+var Polygon$1 = Path.extend({
+
+    type: 'ec-polygon',
+
+    shape: {
+        points: [],
+
+        // Offset between stacked base points and points
+        stackedOnPoints: [],
+
+        smooth: 0,
+
+        stackedOnSmooth: 0,
+
+        smoothConstraint: true,
+
+        smoothMonotone: null,
+
+        connectNulls: false
+    },
+
+    brush: fixClipWithShadow(Path.prototype.brush),
+
+    buildPath: function (ctx, shape) {
+        var points = shape.points;
+        var stackedOnPoints = shape.stackedOnPoints;
+
+        var i = 0;
+        var len$$1 = points.length;
+        var smoothMonotone = shape.smoothMonotone;
+        var bbox = getBoundingBox(points, shape.smoothConstraint);
+        var stackedOnBBox = getBoundingBox(stackedOnPoints, shape.smoothConstraint);
+
+        if (shape.connectNulls) {
+            // Must remove first and last null values avoid draw error in polygon
+            for (; len$$1 > 0; len$$1--) {
+                if (!isPointNull(points[len$$1 - 1])) {
+                    break;
+                }
+            }
+            for (; i < len$$1; i++) {
+                if (!isPointNull(points[i])) {
+                    break;
+                }
+            }
+        }
+        while (i < len$$1) {
+            var k = drawSegment(
+                ctx, points, i, len$$1, len$$1,
+                1, bbox.min, bbox.max, shape.smooth,
+                smoothMonotone, shape.connectNulls
+            );
+            drawSegment(
+                ctx, stackedOnPoints, i + k - 1, k, len$$1,
+                -1, stackedOnBBox.min, stackedOnBBox.max, shape.stackedOnSmooth,
+                smoothMonotone, shape.connectNulls
+            );
+            i += k + 1;
+
+            ctx.closePath();
+        }
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// FIXME step not support polar
+
+function isPointsSame(points1, points2) {
+    if (points1.length !== points2.length) {
+        return;
+    }
+    for (var i = 0; i < points1.length; i++) {
+        var p1 = points1[i];
+        var p2 = points2[i];
+        if (p1[0] !== p2[0] || p1[1] !== p2[1]) {
+            return;
+        }
+    }
+    return true;
+}
+
+function getSmooth(smooth) {
+    return typeof (smooth) === 'number' ? smooth : (smooth ? 0.5 : 0);
+}
+
+function getAxisExtentWithGap(axis) {
+    var extent = axis.getGlobalExtent();
+    if (axis.onBand) {
+        // Remove extra 1px to avoid line miter in clipped edge
+        var halfBandWidth = axis.getBandWidth() / 2 - 1;
+        var dir = extent[1] > extent[0] ? 1 : -1;
+        extent[0] += dir * halfBandWidth;
+        extent[1] -= dir * halfBandWidth;
+    }
+    return extent;
+}
+
+/**
+ * @param {module:echarts/coord/cartesian/Cartesian2D|module:echarts/coord/polar/Polar} coordSys
+ * @param {module:echarts/data/List} data
+ * @param {Object} dataCoordInfo
+ * @param {Array.<Array.<number>>} points
+ */
+function getStackedOnPoints(coordSys, data, dataCoordInfo) {
+    if (!dataCoordInfo.valueDim) {
+        return [];
+    }
+
+    var points = [];
+    for (var idx = 0, len = data.count(); idx < len; idx++) {
+        points.push(getStackedOnPoint(dataCoordInfo, coordSys, data, idx));
+    }
+
+    return points;
+}
+
+function createGridClipShape(cartesian, hasAnimation, forSymbol, seriesModel) {
+    var xExtent = getAxisExtentWithGap(cartesian.getAxis('x'));
+    var yExtent = getAxisExtentWithGap(cartesian.getAxis('y'));
+    var isHorizontal = cartesian.getBaseAxis().isHorizontal();
+
+    var x = Math.min(xExtent[0], xExtent[1]);
+    var y = Math.min(yExtent[0], yExtent[1]);
+    var width = Math.max(xExtent[0], xExtent[1]) - x;
+    var height = Math.max(yExtent[0], yExtent[1]) - y;
+
+    // Avoid float number rounding error for symbol on the edge of axis extent.
+    // See #7913 and `test/dataZoom-clip.html`.
+    if (forSymbol) {
+        x -= 0.5;
+        width += 0.5;
+        y -= 0.5;
+        height += 0.5;
+    }
+    else {
+        var lineWidth = seriesModel.get('lineStyle.width') || 2;
+        // Expand clip shape to avoid clipping when line value exceeds axis
+        var expandSize = seriesModel.get('clipOverflow') ? lineWidth / 2 : Math.max(width, height);
+        if (isHorizontal) {
+            y -= expandSize;
+            height += expandSize * 2;
+        }
+        else {
+            x -= expandSize;
+            width += expandSize * 2;
+        }
+    }
+
+    var clipPath = new Rect({
+        shape: {
+            x: x,
+            y: y,
+            width: width,
+            height: height
+        }
+    });
+
+    if (hasAnimation) {
+        clipPath.shape[isHorizontal ? 'width' : 'height'] = 0;
+        initProps(clipPath, {
+            shape: {
+                width: width,
+                height: height
+            }
+        }, seriesModel);
+    }
+
+    return clipPath;
+}
+
+function createPolarClipShape(polar, hasAnimation, forSymbol, seriesModel) {
+    var angleAxis = polar.getAngleAxis();
+    var radiusAxis = polar.getRadiusAxis();
+
+    var radiusExtent = radiusAxis.getExtent().slice();
+    radiusExtent[0] > radiusExtent[1] && radiusExtent.reverse();
+    var angleExtent = angleAxis.getExtent();
+
+    var RADIAN = Math.PI / 180;
+
+    // Avoid float number rounding error for symbol on the edge of axis extent.
+    if (forSymbol) {
+        radiusExtent[0] -= 0.5;
+        radiusExtent[1] += 0.5;
+    }
+
+    var clipPath = new Sector({
+        shape: {
+            cx: round$1(polar.cx, 1),
+            cy: round$1(polar.cy, 1),
+            r0: round$1(radiusExtent[0], 1),
+            r: round$1(radiusExtent[1], 1),
+            startAngle: -angleExtent[0] * RADIAN,
+            endAngle: -angleExtent[1] * RADIAN,
+            clockwise: angleAxis.inverse
+        }
+    });
+
+    if (hasAnimation) {
+        clipPath.shape.endAngle = -angleExtent[0] * RADIAN;
+        initProps(clipPath, {
+            shape: {
+                endAngle: -angleExtent[1] * RADIAN
+            }
+        }, seriesModel);
+    }
+
+    return clipPath;
+}
+
+function createClipShape(coordSys, hasAnimation, forSymbol, seriesModel) {
+    return coordSys.type === 'polar'
+        ? createPolarClipShape(coordSys, hasAnimation, forSymbol, seriesModel)
+        : createGridClipShape(coordSys, hasAnimation, forSymbol, seriesModel);
+}
+
+function turnPointsIntoStep(points, coordSys, stepTurnAt) {
+    var baseAxis = coordSys.getBaseAxis();
+    var baseIndex = baseAxis.dim === 'x' || baseAxis.dim === 'radius' ? 0 : 1;
+
+    var stepPoints = [];
+    for (var i = 0; i < points.length - 1; i++) {
+        var nextPt = points[i + 1];
+        var pt = points[i];
+        stepPoints.push(pt);
+
+        var stepPt = [];
+        switch (stepTurnAt) {
+            case 'end':
+                stepPt[baseIndex] = nextPt[baseIndex];
+                stepPt[1 - baseIndex] = pt[1 - baseIndex];
+                // default is start
+                stepPoints.push(stepPt);
+                break;
+            case 'middle':
+                // default is start
+                var middle = (pt[baseIndex] + nextPt[baseIndex]) / 2;
+                var stepPt2 = [];
+                stepPt[baseIndex] = stepPt2[baseIndex] = middle;
+                stepPt[1 - baseIndex] = pt[1 - baseIndex];
+                stepPt2[1 - baseIndex] = nextPt[1 - baseIndex];
+                stepPoints.push(stepPt);
+                stepPoints.push(stepPt2);
+                break;
+            default:
+                stepPt[baseIndex] = pt[baseIndex];
+                stepPt[1 - baseIndex] = nextPt[1 - baseIndex];
+                // default is start
+                stepPoints.push(stepPt);
+        }
+    }
+    // Last points
+    points[i] && stepPoints.push(points[i]);
+    return stepPoints;
+}
+
+function getVisualGradient(data, coordSys) {
+    var visualMetaList = data.getVisual('visualMeta');
+    if (!visualMetaList || !visualMetaList.length || !data.count()) {
+        // When data.count() is 0, gradient range can not be calculated.
+        return;
+    }
+
+    if (coordSys.type !== 'cartesian2d') {
+        if (__DEV__) {
+            console.warn('Visual map on line style is only supported on cartesian2d.');
+        }
+        return;
+    }
+
+    var coordDim;
+    var visualMeta;
+
+    for (var i = visualMetaList.length - 1; i >= 0; i--) {
+        var dimIndex = visualMetaList[i].dimension;
+        var dimName = data.dimensions[dimIndex];
+        var dimInfo = data.getDimensionInfo(dimName);
+        coordDim = dimInfo && dimInfo.coordDim;
+        // Can only be x or y
+        if (coordDim === 'x' || coordDim === 'y') {
+            visualMeta = visualMetaList[i];
+            break;
+        }
+    }
+
+    if (!visualMeta) {
+        if (__DEV__) {
+            console.warn('Visual map on line style only support x or y dimension.');
+        }
+        return;
+    }
+
+    // If the area to be rendered is bigger than area defined by LinearGradient,
+    // the canvas spec prescribes that the color of the first stop and the last
+    // stop should be used. But if two stops are added at offset 0, in effect
+    // browsers use the color of the second stop to render area outside
+    // LinearGradient. So we can only infinitesimally extend area defined in
+    // LinearGradient to render `outerColors`.
+
+    var axis = coordSys.getAxis(coordDim);
+
+    // dataToCoor mapping may not be linear, but must be monotonic.
+    var colorStops = map(visualMeta.stops, function (stop) {
+        return {
+            coord: axis.toGlobalCoord(axis.dataToCoord(stop.value)),
+            color: stop.color
+        };
+    });
+    var stopLen = colorStops.length;
+    var outerColors = visualMeta.outerColors.slice();
+
+    if (stopLen && colorStops[0].coord > colorStops[stopLen - 1].coord) {
+        colorStops.reverse();
+        outerColors.reverse();
+    }
+
+    var tinyExtent = 10; // Arbitrary value: 10px
+    var minCoord = colorStops[0].coord - tinyExtent;
+    var maxCoord = colorStops[stopLen - 1].coord + tinyExtent;
+    var coordSpan = maxCoord - minCoord;
+
+    if (coordSpan < 1e-3) {
+        return 'transparent';
+    }
+
+    each$1(colorStops, function (stop) {
+        stop.offset = (stop.coord - minCoord) / coordSpan;
+    });
+    colorStops.push({
+        offset: stopLen ? colorStops[stopLen - 1].offset : 0.5,
+        color: outerColors[1] || 'transparent'
+    });
+    colorStops.unshift({ // notice colorStops.length have been changed.
+        offset: stopLen ? colorStops[0].offset : 0.5,
+        color: outerColors[0] || 'transparent'
+    });
+
+    // zrUtil.each(colorStops, function (colorStop) {
+    //     // Make sure each offset has rounded px to avoid not sharp edge
+    //     colorStop.offset = (Math.round(colorStop.offset * (end - start) + start) - start) / (end - start);
+    // });
+
+    var gradient = new LinearGradient(0, 0, 0, 0, colorStops, true);
+    gradient[coordDim] = minCoord;
+    gradient[coordDim + '2'] = maxCoord;
+
+    return gradient;
+}
+
+function getIsIgnoreFunc(seriesModel, data, coordSys) {
+    var showAllSymbol = seriesModel.get('showAllSymbol');
+    var isAuto = showAllSymbol === 'auto';
+
+    if (showAllSymbol && !isAuto) {
+        return;
+    }
+
+    var categoryAxis = coordSys.getAxesByScale('ordinal')[0];
+    if (!categoryAxis) {
+        return;
+    }
+
+    // Note that category label interval strategy might bring some weird effect
+    // in some scenario: users may wonder why some of the symbols are not
+    // displayed. So we show all symbols as possible as we can.
+    if (isAuto
+        // Simplify the logic, do not determine label overlap here.
+        && canShowAllSymbolForCategory(categoryAxis, data)
+    ) {
+        return;
+    }
+
+    // Otherwise follow the label interval strategy on category axis.
+    var categoryDataDim = data.mapDimension(categoryAxis.dim);
+    var labelMap = {};
+
+    each$1(categoryAxis.getViewLabels(), function (labelItem) {
+        labelMap[labelItem.tickValue] = 1;
+    });
+
+    return function (dataIndex) {
+        return !labelMap.hasOwnProperty(data.get(categoryDataDim, dataIndex));
+    };
+}
+
+function canShowAllSymbolForCategory(categoryAxis, data) {
+    // In mose cases, line is monotonous on category axis, and the label size
+    // is close with each other. So we check the symbol size and some of the
+    // label size alone with the category axis to estimate whether all symbol
+    // can be shown without overlap.
+    var axisExtent = categoryAxis.getExtent();
+    var availSize = Math.abs(axisExtent[1] - axisExtent[0]) / categoryAxis.scale.count();
+    isNaN(availSize) && (availSize = 0); // 0/0 is NaN.
+
+    // Sampling some points, max 5.
+    var dataLen = data.count();
+    var step = Math.max(1, Math.round(dataLen / 5));
+    for (var dataIndex = 0; dataIndex < dataLen; dataIndex += step) {
+        if (SymbolClz$1.getSymbolSize(
+                data, dataIndex
+            // Only for cartesian, where `isHorizontal` exists.
+            )[categoryAxis.isHorizontal() ? 1 : 0]
+            // Empirical number
+            * 1.5 > availSize
+        ) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+Chart.extend({
+
+    type: 'line',
+
+    init: function () {
+        var lineGroup = new Group();
+
+        var symbolDraw = new SymbolDraw();
+        this.group.add(symbolDraw.group);
+
+        this._symbolDraw = symbolDraw;
+        this._lineGroup = lineGroup;
+    },
+
+    render: function (seriesModel, ecModel, api) {
+        var coordSys = seriesModel.coordinateSystem;
+        var group = this.group;
+        var data = seriesModel.getData();
+        var lineStyleModel = seriesModel.getModel('lineStyle');
+        var areaStyleModel = seriesModel.getModel('areaStyle');
+
+        var points = data.mapArray(data.getItemLayout);
+
+        var isCoordSysPolar = coordSys.type === 'polar';
+        var prevCoordSys = this._coordSys;
+
+        var symbolDraw = this._symbolDraw;
+        var polyline = this._polyline;
+        var polygon = this._polygon;
+
+        var lineGroup = this._lineGroup;
+
+        var hasAnimation = seriesModel.get('animation');
+
+        var isAreaChart = !areaStyleModel.isEmpty();
+
+        var valueOrigin = areaStyleModel.get('origin');
+        var dataCoordInfo = prepareDataCoordInfo(coordSys, data, valueOrigin);
+
+        var stackedOnPoints = getStackedOnPoints(coordSys, data, dataCoordInfo);
+
+        var showSymbol = seriesModel.get('showSymbol');
+
+        var isIgnoreFunc = showSymbol && !isCoordSysPolar
+            && getIsIgnoreFunc(seriesModel, data, coordSys);
+
+        // Remove temporary symbols
+        var oldData = this._data;
+        oldData && oldData.eachItemGraphicEl(function (el, idx) {
+            if (el.__temp) {
+                group.remove(el);
+                oldData.setItemGraphicEl(idx, null);
+            }
+        });
+
+        // Remove previous created symbols if showSymbol changed to false
+        if (!showSymbol) {
+            symbolDraw.remove();
+        }
+
+        group.add(lineGroup);
+
+        // FIXME step not support polar
+        var step = !isCoordSysPolar && seriesModel.get('step');
+        // Initialization animation or coordinate system changed
+        if (
+            !(polyline && prevCoordSys.type === coordSys.type && step === this._step)
+        ) {
+            showSymbol && symbolDraw.updateData(data, {
+                isIgnore: isIgnoreFunc,
+                clipShape: createClipShape(coordSys, false, true, seriesModel)
+            });
+
+            if (step) {
+                // TODO If stacked series is not step
+                points = turnPointsIntoStep(points, coordSys, step);
+                stackedOnPoints = turnPointsIntoStep(stackedOnPoints, coordSys, step);
+            }
+
+            polyline = this._newPolyline(points, coordSys, hasAnimation);
+            if (isAreaChart) {
+                polygon = this._newPolygon(
+                    points, stackedOnPoints,
+                    coordSys, hasAnimation
+                );
+            }
+            lineGroup.setClipPath(createClipShape(coordSys, true, false, seriesModel));
+        }
+        else {
+            if (isAreaChart && !polygon) {
+                // If areaStyle is added
+                polygon = this._newPolygon(
+                    points, stackedOnPoints,
+                    coordSys, hasAnimation
+                );
+            }
+            else if (polygon && !isAreaChart) {
+                // If areaStyle is removed
+                lineGroup.remove(polygon);
+                polygon = this._polygon = null;
+            }
+
+            // Update clipPath
+            lineGroup.setClipPath(createClipShape(coordSys, false, false, seriesModel));
+
+            // Always update, or it is wrong in the case turning on legend
+            // because points are not changed
+            showSymbol && symbolDraw.updateData(data, {
+                isIgnore: isIgnoreFunc,
+                clipShape: createClipShape(coordSys, false, true, seriesModel)
+            });
+
+            // Stop symbol animation and sync with line points
+            // FIXME performance?
+            data.eachItemGraphicEl(function (el) {
+                el.stopAnimation(true);
+            });
+
+            // In the case data zoom triggerred refreshing frequently
+            // Data may not change if line has a category axis. So it should animate nothing
+            if (!isPointsSame(this._stackedOnPoints, stackedOnPoints)
+                || !isPointsSame(this._points, points)
+            ) {
+                if (hasAnimation) {
+                    this._updateAnimation(
+                        data, stackedOnPoints, coordSys, api, step, valueOrigin
+                    );
+                }
+                else {
+                    // Not do it in update with animation
+                    if (step) {
+                        // TODO If stacked series is not step
+                        points = turnPointsIntoStep(points, coordSys, step);
+                        stackedOnPoints = turnPointsIntoStep(stackedOnPoints, coordSys, step);
+                    }
+
+                    polyline.setShape({
+                        points: points
+                    });
+                    polygon && polygon.setShape({
+                        points: points,
+                        stackedOnPoints: stackedOnPoints
+                    });
+                }
+            }
+        }
+
+        var visualColor = getVisualGradient(data, coordSys) || data.getVisual('color');
+
+        polyline.useStyle(defaults(
+            // Use color in lineStyle first
+            lineStyleModel.getLineStyle(),
+            {
+                fill: 'none',
+                stroke: visualColor,
+                lineJoin: 'bevel'
+            }
+        ));
+
+        var smooth = seriesModel.get('smooth');
+        smooth = getSmooth(seriesModel.get('smooth'));
+        polyline.setShape({
+            smooth: smooth,
+            smoothMonotone: seriesModel.get('smoothMonotone'),
+            connectNulls: seriesModel.get('connectNulls')
+        });
+
+        if (polygon) {
+            var stackedOnSeries = data.getCalculationInfo('stackedOnSeries');
+            var stackedOnSmooth = 0;
+
+            polygon.useStyle(defaults(
+                areaStyleModel.getAreaStyle(),
+                {
+                    fill: visualColor,
+                    opacity: 0.7,
+                    lineJoin: 'bevel'
+                }
+            ));
+
+            if (stackedOnSeries) {
+                stackedOnSmooth = getSmooth(stackedOnSeries.get('smooth'));
+            }
+
+            polygon.setShape({
+                smooth: smooth,
+                stackedOnSmooth: stackedOnSmooth,
+                smoothMonotone: seriesModel.get('smoothMonotone'),
+                connectNulls: seriesModel.get('connectNulls')
+            });
+        }
+
+        this._data = data;
+        // Save the coordinate system for transition animation when data changed
+        this._coordSys = coordSys;
+        this._stackedOnPoints = stackedOnPoints;
+        this._points = points;
+        this._step = step;
+        this._valueOrigin = valueOrigin;
+    },
+
+    dispose: function () {},
+
+    highlight: function (seriesModel, ecModel, api, payload) {
+        var data = seriesModel.getData();
+        var dataIndex = queryDataIndex(data, payload);
+
+        if (!(dataIndex instanceof Array) && dataIndex != null && dataIndex >= 0) {
+            var symbol = data.getItemGraphicEl(dataIndex);
+            if (!symbol) {
+                // Create a temporary symbol if it is not exists
+                var pt = data.getItemLayout(dataIndex);
+                if (!pt) {
+                    // Null data
+                    return;
+                }
+                symbol = new SymbolClz$1(data, dataIndex);
+                symbol.position = pt;
+                symbol.setZ(
+                    seriesModel.get('zlevel'),
+                    seriesModel.get('z')
+                );
+                symbol.ignore = isNaN(pt[0]) || isNaN(pt[1]);
+                symbol.__temp = true;
+                data.setItemGraphicEl(dataIndex, symbol);
+
+                // Stop scale animation
+                symbol.stopSymbolAnimation(true);
+
+                this.group.add(symbol);
+            }
+            symbol.highlight();
+        }
+        else {
+            // Highlight whole series
+            Chart.prototype.highlight.call(
+                this, seriesModel, ecModel, api, payload
+            );
+        }
+    },
+
+    downplay: function (seriesModel, ecModel, api, payload) {
+        var data = seriesModel.getData();
+        var dataIndex = queryDataIndex(data, payload);
+        if (dataIndex != null && dataIndex >= 0) {
+            var symbol = data.getItemGraphicEl(dataIndex);
+            if (symbol) {
+                if (symbol.__temp) {
+                    data.setItemGraphicEl(dataIndex, null);
+                    this.group.remove(symbol);
+                }
+                else {
+                    symbol.downplay();
+                }
+            }
+        }
+        else {
+            // FIXME
+            // can not downplay completely.
+            // Downplay whole series
+            Chart.prototype.downplay.call(
+                this, seriesModel, ecModel, api, payload
+            );
+        }
+    },
+
+    /**
+     * @param {module:zrender/container/Group} group
+     * @param {Array.<Array.<number>>} points
+     * @private
+     */
+    _newPolyline: function (points) {
+        var polyline = this._polyline;
+        // Remove previous created polyline
+        if (polyline) {
+            this._lineGroup.remove(polyline);
+        }
+
+        polyline = new Polyline$1({
+            shape: {
+                points: points
+            },
+            silent: true,
+            z2: 10
+        });
+
+        this._lineGroup.add(polyline);
+
+        this._polyline = polyline;
+
+        return polyline;
+    },
+
+    /**
+     * @param {module:zrender/container/Group} group
+     * @param {Array.<Array.<number>>} stackedOnPoints
+     * @param {Array.<Array.<number>>} points
+     * @private
+     */
+    _newPolygon: function (points, stackedOnPoints) {
+        var polygon = this._polygon;
+        // Remove previous created polygon
+        if (polygon) {
+            this._lineGroup.remove(polygon);
+        }
+
+        polygon = new Polygon$1({
+            shape: {
+                points: points,
+                stackedOnPoints: stackedOnPoints
+            },
+            silent: true
+        });
+
+        this._lineGroup.add(polygon);
+
+        this._polygon = polygon;
+        return polygon;
+    },
+
+    /**
+     * @private
+     */
+    // FIXME Two value axis
+    _updateAnimation: function (data, stackedOnPoints, coordSys, api, step, valueOrigin) {
+        var polyline = this._polyline;
+        var polygon = this._polygon;
+        var seriesModel = data.hostModel;
+
+        var diff = lineAnimationDiff(
+            this._data, data,
+            this._stackedOnPoints, stackedOnPoints,
+            this._coordSys, coordSys,
+            this._valueOrigin, valueOrigin
+        );
+
+        var current = diff.current;
+        var stackedOnCurrent = diff.stackedOnCurrent;
+        var next = diff.next;
+        var stackedOnNext = diff.stackedOnNext;
+        if (step) {
+            // TODO If stacked series is not step
+            current = turnPointsIntoStep(diff.current, coordSys, step);
+            stackedOnCurrent = turnPointsIntoStep(diff.stackedOnCurrent, coordSys, step);
+            next = turnPointsIntoStep(diff.next, coordSys, step);
+            stackedOnNext = turnPointsIntoStep(diff.stackedOnNext, coordSys, step);
+        }
+        // `diff.current` is subset of `current` (which should be ensured by
+        // turnPointsIntoStep), so points in `__points` can be updated when
+        // points in `current` are update during animation.
+        polyline.shape.__points = diff.current;
+        polyline.shape.points = current;
+
+        updateProps(polyline, {
+            shape: {
+                points: next
+            }
+        }, seriesModel);
+
+        if (polygon) {
+            polygon.setShape({
+                points: current,
+                stackedOnPoints: stackedOnCurrent
+            });
+            updateProps(polygon, {
+                shape: {
+                    points: next,
+                    stackedOnPoints: stackedOnNext
+                }
+            }, seriesModel);
+        }
+
+        var updatedDataInfo = [];
+        var diffStatus = diff.status;
+
+        for (var i = 0; i < diffStatus.length; i++) {
+            var cmd = diffStatus[i].cmd;
+            if (cmd === '=') {
+                var el = data.getItemGraphicEl(diffStatus[i].idx1);
+                if (el) {
+                    updatedDataInfo.push({
+                        el: el,
+                        ptIdx: i    // Index of points
+                    });
+                }
+            }
+        }
+
+        if (polyline.animators && polyline.animators.length) {
+            polyline.animators[0].during(function () {
+                for (var i = 0; i < updatedDataInfo.length; i++) {
+                    var el = updatedDataInfo[i].el;
+                    el.attr('position', polyline.shape.__points[updatedDataInfo[i].ptIdx]);
+                }
+            });
+        }
+    },
+
+    remove: function (ecModel) {
+        var group = this.group;
+        var oldData = this._data;
+        this._lineGroup.removeAll();
+        this._symbolDraw.remove(true);
+        // Remove temporary created elements when highlighting
+        oldData && oldData.eachItemGraphicEl(function (el, idx) {
+            if (el.__temp) {
+                group.remove(el);
+                oldData.setItemGraphicEl(idx, null);
+            }
+        });
+
+        this._polyline =
+        this._polygon =
+        this._coordSys =
+        this._points =
+        this._stackedOnPoints =
+        this._data = null;
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+var visualSymbol = function (seriesType, defaultSymbolType, legendSymbol) {
+    // Encoding visual for all series include which is filtered for legend drawing
+    return {
+        seriesType: seriesType,
+
+        // For legend.
+        performRawSeries: true,
+
+        reset: function (seriesModel, ecModel, api) {
+            var data = seriesModel.getData();
+
+            var symbolType = seriesModel.get('symbol') || defaultSymbolType;
+            var symbolSize = seriesModel.get('symbolSize');
+            var keepAspect = seriesModel.get('symbolKeepAspect');
+
+            data.setVisual({
+                legendSymbol: legendSymbol || symbolType,
+                symbol: symbolType,
+                symbolSize: symbolSize,
+                symbolKeepAspect: keepAspect
+            });
+
+            // Only visible series has each data be visual encoded
+            if (ecModel.isSeriesFiltered(seriesModel)) {
+                return;
+            }
+
+            var hasCallback = typeof symbolSize === 'function';
+
+            function dataEach(data, idx) {
+                if (typeof symbolSize === 'function') {
+                    var rawValue = seriesModel.getRawValue(idx);
+                    // FIXME
+                    var params = seriesModel.getDataParams(idx);
+                    data.setItemVisual(idx, 'symbolSize', symbolSize(rawValue, params));
+                }
+
+                if (data.hasItemOption) {
+                    var itemModel = data.getItemModel(idx);
+                    var itemSymbolType = itemModel.getShallow('symbol', true);
+                    var itemSymbolSize = itemModel.getShallow('symbolSize',
+                        true);
+                    var itemSymbolKeepAspect =
+                        itemModel.getShallow('symbolKeepAspect',true);
+
+                    // If has item symbol
+                    if (itemSymbolType != null) {
+                        data.setItemVisual(idx, 'symbol', itemSymbolType);
+                    }
+                    if (itemSymbolSize != null) {
+                        // PENDING Transform symbolSize ?
+                        data.setItemVisual(idx, 'symbolSize', itemSymbolSize);
+                    }
+                    if (itemSymbolKeepAspect != null) {
+                        data.setItemVisual(idx, 'symbolKeepAspect',
+                            itemSymbolKeepAspect);
+                    }
+                }
+            }
+
+            return { dataEach: (data.hasItemOption || hasCallback) ? dataEach : null };
+        }
+    };
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var pointsLayout = function (seriesType) {
+    return {
+        seriesType: seriesType,
+
+        plan: createRenderPlanner(),
+
+        reset: function (seriesModel) {
+            var data = seriesModel.getData();
+            var coordSys = seriesModel.coordinateSystem;
+            var pipelineContext = seriesModel.pipelineContext;
+            var isLargeRender = pipelineContext.large;
+
+            if (!coordSys) {
+                return;
+            }
+
+            var dims = map(coordSys.dimensions, function (dim) {
+                return data.mapDimension(dim);
+            }).slice(0, 2);
+            var dimLen = dims.length;
+
+            var stackResultDim = data.getCalculationInfo('stackResultDimension');
+            if (isDimensionStacked(data, dims[0] /*, dims[1]*/)) {
+                dims[0] = stackResultDim;
+            }
+            if (isDimensionStacked(data, dims[1] /*, dims[0]*/)) {
+                dims[1] = stackResultDim;
+            }
+
+            function progress(params, data) {
+                var segCount = params.end - params.start;
+                var points = isLargeRender && new Float32Array(segCount * dimLen);
+
+                for (var i = params.start, offset = 0, tmpIn = [], tmpOut = []; i < params.end; i++) {
+                    var point;
+
+                    if (dimLen === 1) {
+                        var x = data.get(dims[0], i);
+                        point = !isNaN(x) && coordSys.dataToPoint(x, null, tmpOut);
+                    }
+                    else {
+                        var x = tmpIn[0] = data.get(dims[0], i);
+                        var y = tmpIn[1] = data.get(dims[1], i);
+                        // Also {Array.<number>}, not undefined to avoid if...else... statement
+                        point = !isNaN(x) && !isNaN(y) && coordSys.dataToPoint(tmpIn, null, tmpOut);
+                    }
+
+                    if (isLargeRender) {
+                        points[offset++] = point ? point[0] : NaN;
+                        points[offset++] = point ? point[1] : NaN;
+                    }
+                    else {
+                        data.setItemLayout(i, (point && point.slice()) || [NaN, NaN]);
+                    }
+                }
+
+                isLargeRender && data.setLayout('symbolPoints', points);
+            }
+
+            return dimLen && {progress: progress};
+        }
+    };
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+var samplers = {
+    average: function (frame) {
+        var sum = 0;
+        var count = 0;
+        for (var i = 0; i < frame.length; i++) {
+            if (!isNaN(frame[i])) {
+                sum += frame[i];
+                count++;
+            }
+        }
+        // Return NaN if count is 0
+        return count === 0 ? NaN : sum / count;
+    },
+    sum: function (frame) {
+        var sum = 0;
+        for (var i = 0; i < frame.length; i++) {
+            // Ignore NaN
+            sum += frame[i] || 0;
+        }
+        return sum;
+    },
+    max: function (frame) {
+        var max = -Infinity;
+        for (var i = 0; i < frame.length; i++) {
+            frame[i] > max && (max = frame[i]);
+        }
+        // NaN will cause illegal axis extent.
+        return isFinite(max) ? max : NaN;
+    },
+    min: function (frame) {
+        var min = Infinity;
+        for (var i = 0; i < frame.length; i++) {
+            frame[i] < min && (min = frame[i]);
+        }
+        // NaN will cause illegal axis extent.
+        return isFinite(min) ? min : NaN;
+    },
+    // TODO
+    // Median
+    nearest: function (frame) {
+        return frame[0];
+    }
+};
+
+var indexSampler = function (frame, value) {
+    return Math.round(frame.length / 2);
+};
+
+var dataSample = function (seriesType) {
+    return {
+
+        seriesType: seriesType,
+
+        modifyOutputEnd: true,
+
+        reset: function (seriesModel, ecModel, api) {
+            var data = seriesModel.getData();
+            var sampling = seriesModel.get('sampling');
+            var coordSys = seriesModel.coordinateSystem;
+            // Only cartesian2d support down sampling
+            if (coordSys.type === 'cartesian2d' && sampling) {
+                var baseAxis = coordSys.getBaseAxis();
+                var valueAxis = coordSys.getOtherAxis(baseAxis);
+                var extent = baseAxis.getExtent();
+                // Coordinste system has been resized
+                var size = extent[1] - extent[0];
+                var rate = Math.round(data.count() / size);
+                if (rate > 1) {
+                    var sampler;
+                    if (typeof sampling === 'string') {
+                        sampler = samplers[sampling];
+                    }
+                    else if (typeof sampling === 'function') {
+                        sampler = sampling;
+                    }
+                    if (sampler) {
+                        // Only support sample the first dim mapped from value axis.
+                        seriesModel.setData(data.downSample(
+                            data.mapDimension(valueAxis.dim), 1 / rate, sampler, indexSampler
+                        ));
+                    }
+                }
+            }
+        }
+    };
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Cartesian coordinate system
+ * @module  echarts/coord/Cartesian
+ *
+ */
+
+function dimAxisMapper(dim) {
+    return this._axes[dim];
+}
+
+/**
+ * @alias module:echarts/coord/Cartesian
+ * @constructor
+ */
+var Cartesian = function (name) {
+    this._axes = {};
+
+    this._dimList = [];
+
+    /**
+     * @type {string}
+     */
+    this.name = name || '';
+};
+
+Cartesian.prototype = {
+
+    constructor: Cartesian,
+
+    type: 'cartesian',
+
+    /**
+     * Get axis
+     * @param  {number|string} dim
+     * @return {module:echarts/coord/Cartesian~Axis}
+     */
+    getAxis: function (dim) {
+        return this._axes[dim];
+    },
+
+    /**
+     * Get axes list
+     * @return {Array.<module:echarts/coord/Cartesian~Axis>}
+     */
+    getAxes: function () {
+        return map(this._dimList, dimAxisMapper, this);
+    },
+
+    /**
+     * Get axes list by given scale type
+     */
+    getAxesByScale: function (scaleType) {
+        scaleType = scaleType.toLowerCase();
+        return filter(
+            this.getAxes(),
+            function (axis) {
+                return axis.scale.type === scaleType;
+            }
+        );
+    },
+
+    /**
+     * Add axis
+     * @param {module:echarts/coord/Cartesian.Axis}
+     */
+    addAxis: function (axis) {
+        var dim = axis.dim;
+
+        this._axes[dim] = axis;
+
+        this._dimList.push(dim);
+    },
+
+    /**
+     * Convert data to coord in nd space
+     * @param {Array.<number>|Object.<string, number>} val
+     * @return {Array.<number>|Object.<string, number>}
+     */
+    dataToCoord: function (val) {
+        return this._dataCoordConvert(val, 'dataToCoord');
+    },
+
+    /**
+     * Convert coord in nd space to data
+     * @param  {Array.<number>|Object.<string, number>} val
+     * @return {Array.<number>|Object.<string, number>}
+     */
+    coordToData: function (val) {
+        return this._dataCoordConvert(val, 'coordToData');
+    },
+
+    _dataCoordConvert: function (input, method) {
+        var dimList = this._dimList;
+
+        var output = input instanceof Array ? [] : {};
+
+        for (var i = 0; i < dimList.length; i++) {
+            var dim = dimList[i];
+            var axis = this._axes[dim];
+
+            output[dim] = axis[method](input[dim]);
+        }
+
+        return output;
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+function Cartesian2D(name) {
+
+    Cartesian.call(this, name);
+}
+
+Cartesian2D.prototype = {
+
+    constructor: Cartesian2D,
+
+    type: 'cartesian2d',
+
+    /**
+     * @type {Array.<string>}
+     * @readOnly
+     */
+    dimensions: ['x', 'y'],
+
+    /**
+     * Base axis will be used on stacking.
+     *
+     * @return {module:echarts/coord/cartesian/Axis2D}
+     */
+    getBaseAxis: function () {
+        return this.getAxesByScale('ordinal')[0]
+            || this.getAxesByScale('time')[0]
+            || this.getAxis('x');
+    },
+
+    /**
+     * If contain point
+     * @param {Array.<number>} point
+     * @return {boolean}
+     */
+    containPoint: function (point) {
+        var axisX = this.getAxis('x');
+        var axisY = this.getAxis('y');
+        return axisX.contain(axisX.toLocalCoord(point[0]))
+            && axisY.contain(axisY.toLocalCoord(point[1]));
+    },
+
+    /**
+     * If contain data
+     * @param {Array.<number>} data
+     * @return {boolean}
+     */
+    containData: function (data) {
+        return this.getAxis('x').containData(data[0])
+            && this.getAxis('y').containData(data[1]);
+    },
+
+    /**
+     * @param {Array.<number>} data
+     * @param {Array.<number>} out
+     * @return {Array.<number>}
+     */
+    dataToPoint: function (data, reserved, out) {
+        var xAxis = this.getAxis('x');
+        var yAxis = this.getAxis('y');
+        out = out || [];
+        out[0] = xAxis.toGlobalCoord(xAxis.dataToCoord(data[0]));
+        out[1] = yAxis.toGlobalCoord(yAxis.dataToCoord(data[1]));
+        return out;
+    },
+
+    /**
+     * @param {Array.<number>} data
+     * @param {Array.<number>} out
+     * @return {Array.<number>}
+     */
+    clampData: function (data, out) {
+        var xScale = this.getAxis('x').scale;
+        var yScale = this.getAxis('y').scale;
+        var xAxisExtent = xScale.getExtent();
+        var yAxisExtent = yScale.getExtent();
+        var x = xScale.parse(data[0]);
+        var y = yScale.parse(data[1]);
+        out = out || [];
+        out[0] = Math.min(
+            Math.max(Math.min(xAxisExtent[0], xAxisExtent[1]), x),
+            Math.max(xAxisExtent[0], xAxisExtent[1])
+        );
+        out[1] = Math.min(
+            Math.max(Math.min(yAxisExtent[0], yAxisExtent[1]), y),
+            Math.max(yAxisExtent[0], yAxisExtent[1])
+        );
+
+        return out;
+    },
+
+    /**
+     * @param {Array.<number>} point
+     * @param {Array.<number>} out
+     * @return {Array.<number>}
+     */
+    pointToData: function (point, out) {
+        var xAxis = this.getAxis('x');
+        var yAxis = this.getAxis('y');
+        out = out || [];
+        out[0] = xAxis.coordToData(xAxis.toLocalCoord(point[0]));
+        out[1] = yAxis.coordToData(yAxis.toLocalCoord(point[1]));
+        return out;
+    },
+
+    /**
+     * Get other axis
+     * @param {module:echarts/coord/cartesian/Axis2D} axis
+     */
+    getOtherAxis: function (axis) {
+        return this.getAxis(axis.dim === 'x' ? 'y' : 'x');
+    }
+
+};
+
+inherits(Cartesian2D, Cartesian);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Extend axis 2d
+ * @constructor module:echarts/coord/cartesian/Axis2D
+ * @extends {module:echarts/coord/cartesian/Axis}
+ * @param {string} dim
+ * @param {*} scale
+ * @param {Array.<number>} coordExtent
+ * @param {string} axisType
+ * @param {string} position
+ */
+var Axis2D = function (dim, scale, coordExtent, axisType, position) {
+    Axis.call(this, dim, scale, coordExtent);
+    /**
+     * Axis type
+     *  - 'category'
+     *  - 'value'
+     *  - 'time'
+     *  - 'log'
+     * @type {string}
+     */
+    this.type = axisType || 'value';
+
+    /**
+     * Axis position
+     *  - 'top'
+     *  - 'bottom'
+     *  - 'left'
+     *  - 'right'
+     */
+    this.position = position || 'bottom';
+};
+
+Axis2D.prototype = {
+
+    constructor: Axis2D,
+
+    /**
+     * Index of axis, can be used as key
+     */
+    index: 0,
+
+    /**
+     * Implemented in <module:echarts/coord/cartesian/Grid>.
+     * @return {Array.<module:echarts/coord/cartesian/Axis2D>}
+     *         If not on zero of other axis, return null/undefined.
+     *         If no axes, return an empty array.
+     */
+    getAxesOnZeroOf: null,
+
+    /**
+     * Axis model
+     * @param {module:echarts/coord/cartesian/AxisModel}
+     */
+    model: null,
+
+    isHorizontal: function () {
+        var position = this.position;
+        return position === 'top' || position === 'bottom';
+    },
+
+    /**
+     * Each item cooresponds to this.getExtent(), which
+     * means globalExtent[0] may greater than globalExtent[1],
+     * unless `asc` is input.
+     *
+     * @param {boolean} [asc]
+     * @return {Array.<number>}
+     */
+    getGlobalExtent: function (asc) {
+        var ret = this.getExtent();
+        ret[0] = this.toGlobalCoord(ret[0]);
+        ret[1] = this.toGlobalCoord(ret[1]);
+        asc && ret[0] > ret[1] && ret.reverse();
+        return ret;
+    },
+
+    getOtherAxis: function () {
+        this.grid.getOtherAxis();
+    },
+
+    /**
+     * @override
+     */
+    pointToData: function (point, clamp) {
+        return this.coordToData(this.toLocalCoord(point[this.dim === 'x' ? 0 : 1]), clamp);
+    },
+
+    /**
+     * Transform global coord to local coord,
+     * i.e. var localCoord = axis.toLocalCoord(80);
+     * designate by module:echarts/coord/cartesian/Grid.
+     * @type {Function}
+     */
+    toLocalCoord: null,
+
+    /**
+     * Transform global coord to local coord,
+     * i.e. var globalCoord = axis.toLocalCoord(40);
+     * designate by module:echarts/coord/cartesian/Grid.
+     * @type {Function}
+     */
+    toGlobalCoord: null
+
+};
+
+inherits(Axis2D, Axis);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var defaultOption = {
+    show: true,
+    zlevel: 0,
+    z: 0,
+    // Inverse the axis.
+    inverse: false,
+
+    // Axis name displayed.
+    name: '',
+    // 'start' | 'middle' | 'end'
+    nameLocation: 'end',
+    // By degree. By defualt auto rotate by nameLocation.
+    nameRotate: null,
+    nameTruncate: {
+        maxWidth: null,
+        ellipsis: '...',
+        placeholder: '.'
+    },
+    // Use global text style by default.
+    nameTextStyle: {},
+    // The gap between axisName and axisLine.
+    nameGap: 15,
+
+    // Default `false` to support tooltip.
+    silent: false,
+    // Default `false` to avoid legacy user event listener fail.
+    triggerEvent: false,
+
+    tooltip: {
+        show: false
+    },
+
+    axisPointer: {},
+
+    axisLine: {
+        show: true,
+        onZero: true,
+        onZeroAxisIndex: null,
+        lineStyle: {
+            color: '#333',
+            width: 1,
+            type: 'solid'
+        },
+        // The arrow at both ends the the axis.
+        symbol: ['none', 'none'],
+        symbolSize: [10, 15]
+    },
+    axisTick: {
+        show: true,
+        // Whether axisTick is inside the grid or outside the grid.
+        inside: false,
+        // The length of axisTick.
+        length: 5,
+        lineStyle: {
+            width: 1
+        }
+    },
+    axisLabel: {
+        show: true,
+        // Whether axisLabel is inside the grid or outside the grid.
+        inside: false,
+        rotate: 0,
+        // true | false | null/undefined (auto)
+        showMinLabel: null,
+        // true | false | null/undefined (auto)
+        showMaxLabel: null,
+        margin: 8,
+        // formatter: null,
+        fontSize: 12
+    },
+    splitLine: {
+        show: true,
+        lineStyle: {
+            color: ['#ccc'],
+            width: 1,
+            type: 'solid'
+        }
+    },
+    splitArea: {
+        show: false,
+        areaStyle: {
+            color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
+        }
+    }
+};
+
+var axisDefault = {};
+
+axisDefault.categoryAxis = merge({
+    // The gap at both ends of the axis. For categoryAxis, boolean.
+    boundaryGap: true,
+    // Set false to faster category collection.
+    // Only usefull in the case like: category is
+    // ['2012-01-01', '2012-01-02', ...], where the input
+    // data has been ensured not duplicate and is large data.
+    // null means "auto":
+    // if axis.data provided, do not deduplication,
+    // else do deduplication.
+    deduplication: null,
+    // splitArea: {
+        // show: false
+    // },
+    splitLine: {
+        show: false
+    },
+    axisTick: {
+        // If tick is align with label when boundaryGap is true
+        alignWithLabel: false,
+        interval: 'auto'
+    },
+    axisLabel: {
+        interval: 'auto'
+    }
+}, defaultOption);
+
+axisDefault.valueAxis = merge({
+    // The gap at both ends of the axis. For value axis, [GAP, GAP], where
+    // `GAP` can be an absolute pixel number (like `35`), or percent (like `'30%'`)
+    boundaryGap: [0, 0],
+
+    // TODO
+    // min/max: [30, datamin, 60] or [20, datamin] or [datamin, 60]
+
+    // Min value of the axis. can be:
+    // + a number
+    // + 'dataMin': use the min value in data.
+    // + null/undefined: auto decide min value (consider pretty look and boundaryGap).
+    // min: null,
+
+    // Max value of the axis. can be:
+    // + a number
+    // + 'dataMax': use the max value in data.
+    // + null/undefined: auto decide max value (consider pretty look and boundaryGap).
+    // max: null,
+
+    // Readonly prop, specifies start value of the range when using data zoom.
+    // rangeStart: null
+
+    // Readonly prop, specifies end value of the range when using data zoom.
+    // rangeEnd: null
+
+    // Optional value can be:
+    // + `false`: always include value 0.
+    // + `true`: the extent do not consider value 0.
+    // scale: false,
+
+    // AxisTick and axisLabel and splitLine are caculated based on splitNumber.
+    splitNumber: 5
+
+    // Interval specifies the span of the ticks is mandatorily.
+    // interval: null
+
+    // Specify min interval when auto calculate tick interval.
+    // minInterval: null
+
+    // Specify max interval when auto calculate tick interval.
+    // maxInterval: null
+
+}, defaultOption);
+
+axisDefault.timeAxis = defaults({
+    scale: true,
+    min: 'dataMin',
+    max: 'dataMax'
+}, axisDefault.valueAxis);
+
+axisDefault.logAxis = defaults({
+    scale: true,
+    logBase: 10
+}, axisDefault.valueAxis);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// FIXME axisType is fixed ?
+var AXIS_TYPES = ['value', 'category', 'time', 'log'];
+
+/**
+ * Generate sub axis model class
+ * @param {string} axisName 'x' 'y' 'radius' 'angle' 'parallel'
+ * @param {module:echarts/model/Component} BaseAxisModelClass
+ * @param {Function} axisTypeDefaulter
+ * @param {Object} [extraDefaultOption]
+ */
+var axisModelCreator = function (axisName, BaseAxisModelClass, axisTypeDefaulter, extraDefaultOption) {
+
+    each$1(AXIS_TYPES, function (axisType) {
+
+        BaseAxisModelClass.extend({
+
+            /**
+             * @readOnly
+             */
+            type: axisName + 'Axis.' + axisType,
+
+            mergeDefaultAndTheme: function (option, ecModel) {
+                var layoutMode = this.layoutMode;
+                var inputPositionParams = layoutMode
+                    ? getLayoutParams(option) : {};
+
+                var themeModel = ecModel.getTheme();
+                merge(option, themeModel.get(axisType + 'Axis'));
+                merge(option, this.getDefaultOption());
+
+                option.type = axisTypeDefaulter(axisName, option);
+
+                if (layoutMode) {
+                    mergeLayoutParam(option, inputPositionParams, layoutMode);
+                }
+            },
+
+            /**
+             * @override
+             */
+            optionUpdated: function () {
+                var thisOption = this.option;
+                if (thisOption.type === 'category') {
+                    this.__ordinalMeta = OrdinalMeta.createByAxisModel(this);
+                }
+            },
+
+            /**
+             * Should not be called before all of 'getInitailData' finished.
+             * Because categories are collected during initializing data.
+             */
+            getCategories: function (rawData) {
+                var option = this.option;
+                // FIXME
+                // warning if called before all of 'getInitailData' finished.
+                if (option.type === 'category') {
+                    if (rawData) {
+                        return option.data;
+                    }
+                    return this.__ordinalMeta.categories;
+                }
+            },
+
+            getOrdinalMeta: function () {
+                return this.__ordinalMeta;
+            },
+
+            defaultOption: mergeAll(
+                [
+                    {},
+                    axisDefault[axisType + 'Axis'],
+                    extraDefaultOption
+                ],
+                true
+            )
+        });
+    });
+
+    ComponentModel.registerSubTypeDefaulter(
+        axisName + 'Axis',
+        curry(axisTypeDefaulter, axisName)
+    );
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var AxisModel = ComponentModel.extend({
+
+    type: 'cartesian2dAxis',
+
+    /**
+     * @type {module:echarts/coord/cartesian/Axis2D}
+     */
+    axis: null,
+
+    /**
+     * @override
+     */
+    init: function () {
+        AxisModel.superApply(this, 'init', arguments);
+        this.resetRange();
+    },
+
+    /**
+     * @override
+     */
+    mergeOption: function () {
+        AxisModel.superApply(this, 'mergeOption', arguments);
+        this.resetRange();
+    },
+
+    /**
+     * @override
+     */
+    restoreData: function () {
+        AxisModel.superApply(this, 'restoreData', arguments);
+        this.resetRange();
+    },
+
+    /**
+     * @override
+     * @return {module:echarts/model/Component}
+     */
+    getCoordSysModel: function () {
+        return this.ecModel.queryComponents({
+            mainType: 'grid',
+            index: this.option.gridIndex,
+            id: this.option.gridId
+        })[0];
+    }
+
+});
+
+function getAxisType(axisDim, option) {
+    // Default axis with data is category axis
+    return option.type || (option.data ? 'category' : 'value');
+}
+
+merge(AxisModel.prototype, axisModelCommonMixin);
+
+var extraOption = {
+    // gridIndex: 0,
+    // gridId: '',
+
+    // Offset is for multiple axis on the same position
+    offset: 0
+};
+
+axisModelCreator('x', AxisModel, getAxisType, extraOption);
+axisModelCreator('y', AxisModel, getAxisType, extraOption);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// Grid æ˜¯åœ¨æœ‰ç›´è§’åæ ‡ç³»çš„æ—¶å€™å¿…é¡»è¦å˜åœ¨çš„
+// æ‰€ä»¥è¿™é‡Œä¹Ÿè¦è¢« Cartesian2D ä¾èµ–
+
+ComponentModel.extend({
+
+    type: 'grid',
+
+    dependencies: ['xAxis', 'yAxis'],
+
+    layoutMode: 'box',
+
+    /**
+     * @type {module:echarts/coord/cartesian/Grid}
+     */
+    coordinateSystem: null,
+
+    defaultOption: {
+        show: false,
+        zlevel: 0,
+        z: 0,
+        left: '10%',
+        top: 60,
+        right: '10%',
+        bottom: 60,
+        // If grid size contain label
+        containLabel: false,
+        // width: {totalWidth} - left - right,
+        // height: {totalHeight} - top - bottom,
+        backgroundColor: 'rgba(0,0,0,0)',
+        borderWidth: 1,
+        borderColor: '#ccc'
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Grid is a region which contains at most 4 cartesian systems
+ *
+ * TODO Default cartesian
+ */
+
+// Depends on GridModel, AxisModel, which performs preprocess.
+/**
+ * Check if the axis is used in the specified grid
+ * @inner
+ */
+function isAxisUsedInTheGrid(axisModel, gridModel, ecModel) {
+    return axisModel.getCoordSysModel() === gridModel;
+}
+
+function Grid(gridModel, ecModel, api) {
+    /**
+     * @type {Object.<string, module:echarts/coord/cartesian/Cartesian2D>}
+     * @private
+     */
+    this._coordsMap = {};
+
+    /**
+     * @type {Array.<module:echarts/coord/cartesian/Cartesian>}
+     * @private
+     */
+    this._coordsList = [];
+
+    /**
+     * @type {Object.<string, module:echarts/coord/cartesian/Axis2D>}
+     * @private
+     */
+    this._axesMap = {};
+
+    /**
+     * @type {Array.<module:echarts/coord/cartesian/Axis2D>}
+     * @private
+     */
+    this._axesList = [];
+
+    this._initCartesian(gridModel, ecModel, api);
+
+    this.model = gridModel;
+}
+
+var gridProto = Grid.prototype;
+
+gridProto.type = 'grid';
+
+gridProto.axisPointerEnabled = true;
+
+gridProto.getRect = function () {
+    return this._rect;
+};
+
+gridProto.update = function (ecModel, api) {
+
+    var axesMap = this._axesMap;
+
+    this._updateScale(ecModel, this.model);
+
+    each$1(axesMap.x, function (xAxis) {
+        niceScaleExtent(xAxis.scale, xAxis.model);
+    });
+    each$1(axesMap.y, function (yAxis) {
+        niceScaleExtent(yAxis.scale, yAxis.model);
+    });
+    each$1(axesMap.x, function (xAxis) {
+        fixAxisOnZero(axesMap, 'y', xAxis);
+    });
+    each$1(axesMap.y, function (yAxis) {
+        fixAxisOnZero(axesMap, 'x', yAxis);
+    });
+
+    // Resize again if containLabel is enabled
+    // FIXME It may cause getting wrong grid size in data processing stage
+    this.resize(this.model, api);
+};
+
+function fixAxisOnZero(axesMap, otherAxisDim, axis) {
+
+    axis.getAxesOnZeroOf = function () {
+        // TODO: onZero of multiple axes.
+        return otherAxis ? [otherAxis] : [];
+    };
+
+    // onZero can not be enabled in these two situations:
+    // 1. When any other axis is a category axis.
+    // 2. When no axis is cross 0 point.
+    var otherAxes = axesMap[otherAxisDim];
+
+    var otherAxis;
+    var axisModel = axis.model;
+    var onZero = axisModel.get('axisLine.onZero');
+    var onZeroAxisIndex = axisModel.get('axisLine.onZeroAxisIndex');
+
+    if (!onZero) {
+        return;
+    }
+
+    // If target axis is specified.
+    if (onZeroAxisIndex != null) {
+        if (canOnZeroToAxis(otherAxes[onZeroAxisIndex])) {
+            otherAxis = otherAxes[onZeroAxisIndex];
+        }
+        return;
+    }
+
+    // Find the first available other axis.
+    for (var idx in otherAxes) {
+        if (otherAxes.hasOwnProperty(idx) && canOnZeroToAxis(otherAxes[idx])) {
+            otherAxis = otherAxes[idx];
+            break;
+        }
+    }
+}
+
+function canOnZeroToAxis(axis) {
+    return axis && axis.type !== 'category' && axis.type !== 'time' && ifAxisCrossZero(axis);
+}
+
+/**
+ * Resize the grid
+ * @param {module:echarts/coord/cartesian/GridModel} gridModel
+ * @param {module:echarts/ExtensionAPI} api
+ */
+gridProto.resize = function (gridModel, api, ignoreContainLabel) {
+
+    var gridRect = getLayoutRect(
+        gridModel.getBoxLayoutParams(), {
+            width: api.getWidth(),
+            height: api.getHeight()
+        });
+
+    this._rect = gridRect;
+
+    var axesList = this._axesList;
+
+    adjustAxes();
+
+    // Minus label size
+    if (!ignoreContainLabel && gridModel.get('containLabel')) {
+        each$1(axesList, function (axis) {
+            if (!axis.model.get('axisLabel.inside')) {
+                var labelUnionRect = estimateLabelUnionRect(axis);
+                if (labelUnionRect) {
+                    var dim = axis.isHorizontal() ? 'height' : 'width';
+                    var margin = axis.model.get('axisLabel.margin');
+                    gridRect[dim] -= labelUnionRect[dim] + margin;
+                    if (axis.position === 'top') {
+                        gridRect.y += labelUnionRect.height + margin;
+                    }
+                    else if (axis.position === 'left')  {
+                        gridRect.x += labelUnionRect.width + margin;
+                    }
+                }
+            }
+        });
+
+        adjustAxes();
+    }
+
+    function adjustAxes() {
+        each$1(axesList, function (axis) {
+            var isHorizontal = axis.isHorizontal();
+            var extent = isHorizontal ? [0, gridRect.width] : [0, gridRect.height];
+            var idx = axis.inverse ? 1 : 0;
+            axis.setExtent(extent[idx], extent[1 - idx]);
+            updateAxisTransform(axis, isHorizontal ? gridRect.x : gridRect.y);
+        });
+    }
+};
+
+/**
+ * @param {string} axisType
+ * @param {number} [axisIndex]
+ */
+gridProto.getAxis = function (axisType, axisIndex) {
+    var axesMapOnDim = this._axesMap[axisType];
+    if (axesMapOnDim != null) {
+        if (axisIndex == null) {
+            // Find first axis
+            for (var name in axesMapOnDim) {
+                if (axesMapOnDim.hasOwnProperty(name)) {
+                    return axesMapOnDim[name];
+                }
+            }
+        }
+        return axesMapOnDim[axisIndex];
+    }
+};
+
+/**
+ * @return {Array.<module:echarts/coord/Axis>}
+ */
+gridProto.getAxes = function () {
+    return this._axesList.slice();
+};
+
+/**
+ * Usage:
+ *      grid.getCartesian(xAxisIndex, yAxisIndex);
+ *      grid.getCartesian(xAxisIndex);
+ *      grid.getCartesian(null, yAxisIndex);
+ *      grid.getCartesian({xAxisIndex: ..., yAxisIndex: ...});
+ *
+ * @param {number|Object} [xAxisIndex]
+ * @param {number} [yAxisIndex]
+ */
+gridProto.getCartesian = function (xAxisIndex, yAxisIndex) {
+    if (xAxisIndex != null && yAxisIndex != null) {
+        var key = 'x' + xAxisIndex + 'y' + yAxisIndex;
+        return this._coordsMap[key];
+    }
+
+    if (isObject$1(xAxisIndex)) {
+        yAxisIndex = xAxisIndex.yAxisIndex;
+        xAxisIndex = xAxisIndex.xAxisIndex;
+    }
+    // When only xAxisIndex or yAxisIndex given, find its first cartesian.
+    for (var i = 0, coordList = this._coordsList; i < coordList.length; i++) {
+        if (coordList[i].getAxis('x').index === xAxisIndex
+            || coordList[i].getAxis('y').index === yAxisIndex
+        ) {
+            return coordList[i];
+        }
+    }
+};
+
+gridProto.getCartesians = function () {
+    return this._coordsList.slice();
+};
+
+/**
+ * @implements
+ * see {module:echarts/CoodinateSystem}
+ */
+gridProto.convertToPixel = function (ecModel, finder, value) {
+    var target = this._findConvertTarget(ecModel, finder);
+
+    return target.cartesian
+        ? target.cartesian.dataToPoint(value)
+        : target.axis
+        ? target.axis.toGlobalCoord(target.axis.dataToCoord(value))
+        : null;
+};
+
+/**
+ * @implements
+ * see {module:echarts/CoodinateSystem}
+ */
+gridProto.convertFromPixel = function (ecModel, finder, value) {
+    var target = this._findConvertTarget(ecModel, finder);
+
+    return target.cartesian
+        ? target.cartesian.pointToData(value)
+        : target.axis
+        ? target.axis.coordToData(target.axis.toLocalCoord(value))
+        : null;
+};
+
+/**
+ * @inner
+ */
+gridProto._findConvertTarget = function (ecModel, finder) {
+    var seriesModel = finder.seriesModel;
+    var xAxisModel = finder.xAxisModel
+        || (seriesModel && seriesModel.getReferringComponents('xAxis')[0]);
+    var yAxisModel = finder.yAxisModel
+        || (seriesModel && seriesModel.getReferringComponents('yAxis')[0]);
+    var gridModel = finder.gridModel;
+    var coordsList = this._coordsList;
+    var cartesian;
+    var axis;
+
+    if (seriesModel) {
+        cartesian = seriesModel.coordinateSystem;
+        indexOf(coordsList, cartesian) < 0 && (cartesian = null);
+    }
+    else if (xAxisModel && yAxisModel) {
+        cartesian = this.getCartesian(xAxisModel.componentIndex, yAxisModel.componentIndex);
+    }
+    else if (xAxisModel) {
+        axis = this.getAxis('x', xAxisModel.componentIndex);
+    }
+    else if (yAxisModel) {
+        axis = this.getAxis('y', yAxisModel.componentIndex);
+    }
+    // Lowest priority.
+    else if (gridModel) {
+        var grid = gridModel.coordinateSystem;
+        if (grid === this) {
+            cartesian = this._coordsList[0];
+        }
+    }
+
+    return {cartesian: cartesian, axis: axis};
+};
+
+/**
+ * @implements
+ * see {module:echarts/CoodinateSystem}
+ */
+gridProto.containPoint = function (point) {
+    var coord = this._coordsList[0];
+    if (coord) {
+        return coord.containPoint(point);
+    }
+};
+
+/**
+ * Initialize cartesian coordinate systems
+ * @private
+ */
+gridProto._initCartesian = function (gridModel, ecModel, api) {
+    var axisPositionUsed = {
+        left: false,
+        right: false,
+        top: false,
+        bottom: false
+    };
+
+    var axesMap = {
+        x: {},
+        y: {}
+    };
+    var axesCount = {
+        x: 0,
+        y: 0
+    };
+
+    /// Create axis
+    ecModel.eachComponent('xAxis', createAxisCreator('x'), this);
+    ecModel.eachComponent('yAxis', createAxisCreator('y'), this);
+
+    if (!axesCount.x || !axesCount.y) {
+        // Roll back when there no either x or y axis
+        this._axesMap = {};
+        this._axesList = [];
+        return;
+    }
+
+    this._axesMap = axesMap;
+
+    /// Create cartesian2d
+    each$1(axesMap.x, function (xAxis, xAxisIndex) {
+        each$1(axesMap.y, function (yAxis, yAxisIndex) {
+            var key = 'x' + xAxisIndex + 'y' + yAxisIndex;
+            var cartesian = new Cartesian2D(key);
+
+            cartesian.grid = this;
+            cartesian.model = gridModel;
+
+            this._coordsMap[key] = cartesian;
+            this._coordsList.push(cartesian);
+
+            cartesian.addAxis(xAxis);
+            cartesian.addAxis(yAxis);
+        }, this);
+    }, this);
+
+    function createAxisCreator(axisType) {
+        return function (axisModel, idx) {
+            if (!isAxisUsedInTheGrid(axisModel, gridModel, ecModel)) {
+                return;
+            }
+
+            var axisPosition = axisModel.get('position');
+            if (axisType === 'x') {
+                // Fix position
+                if (axisPosition !== 'top' && axisPosition !== 'bottom') {
+                    // Default bottom of X
+                    axisPosition = 'bottom';
+                    if (axisPositionUsed[axisPosition]) {
+                        axisPosition = axisPosition === 'top' ? 'bottom' : 'top';
+                    }
+                }
+            }
+            else {
+                // Fix position
+                if (axisPosition !== 'left' && axisPosition !== 'right') {
+                    // Default left of Y
+                    axisPosition = 'left';
+                    if (axisPositionUsed[axisPosition]) {
+                        axisPosition = axisPosition === 'left' ? 'right' : 'left';
+                    }
+                }
+            }
+            axisPositionUsed[axisPosition] = true;
+
+            var axis = new Axis2D(
+                axisType, createScaleByModel(axisModel),
+                [0, 0],
+                axisModel.get('type'),
+                axisPosition
+            );
+
+            var isCategory = axis.type === 'category';
+            axis.onBand = isCategory && axisModel.get('boundaryGap');
+            axis.inverse = axisModel.get('inverse');
+
+            // Inject axis into axisModel
+            axisModel.axis = axis;
+
+            // Inject axisModel into axis
+            axis.model = axisModel;
+
+            // Inject grid info axis
+            axis.grid = this;
+
+            // Index of axis, can be used as key
+            axis.index = idx;
+
+            this._axesList.push(axis);
+
+            axesMap[axisType][idx] = axis;
+            axesCount[axisType]++;
+        };
+    }
+};
+
+/**
+ * Update cartesian properties from series
+ * @param  {module:echarts/model/Option} option
+ * @private
+ */
+gridProto._updateScale = function (ecModel, gridModel) {
+    // Reset scale
+    each$1(this._axesList, function (axis) {
+        axis.scale.setExtent(Infinity, -Infinity);
+    });
+    ecModel.eachSeries(function (seriesModel) {
+        if (isCartesian2D(seriesModel)) {
+            var axesModels = findAxesModels(seriesModel, ecModel);
+            var xAxisModel = axesModels[0];
+            var yAxisModel = axesModels[1];
+
+            if (!isAxisUsedInTheGrid(xAxisModel, gridModel, ecModel)
+                || !isAxisUsedInTheGrid(yAxisModel, gridModel, ecModel)
+            ) {
+                return;
+            }
+
+            var cartesian = this.getCartesian(
+                xAxisModel.componentIndex, yAxisModel.componentIndex
+            );
+            var data = seriesModel.getData();
+            var xAxis = cartesian.getAxis('x');
+            var yAxis = cartesian.getAxis('y');
+
+            if (data.type === 'list') {
+                unionExtent(data, xAxis, seriesModel);
+                unionExtent(data, yAxis, seriesModel);
+            }
+        }
+    }, this);
+
+    function unionExtent(data, axis, seriesModel) {
+        each$1(data.mapDimension(axis.dim, true), function (dim) {
+            axis.scale.unionExtentFromData(
+                // For example, the extent of the orginal dimension
+                // is [0.1, 0.5], the extent of the `stackResultDimension`
+                // is [7, 9], the final extent should not include [0.1, 0.5].
+                data, getStackedDimension(data, dim)
+            );
+        });
+    }
+};
+
+/**
+ * @param {string} [dim] 'x' or 'y' or 'auto' or null/undefined
+ * @return {Object} {baseAxes: [], otherAxes: []}
+ */
+gridProto.getTooltipAxes = function (dim) {
+    var baseAxes = [];
+    var otherAxes = [];
+
+    each$1(this.getCartesians(), function (cartesian) {
+        var baseAxis = (dim != null && dim !== 'auto')
+            ? cartesian.getAxis(dim) : cartesian.getBaseAxis();
+        var otherAxis = cartesian.getOtherAxis(baseAxis);
+        indexOf(baseAxes, baseAxis) < 0 && baseAxes.push(baseAxis);
+        indexOf(otherAxes, otherAxis) < 0 && otherAxes.push(otherAxis);
+    });
+
+    return {baseAxes: baseAxes, otherAxes: otherAxes};
+};
+
+/**
+ * @inner
+ */
+function updateAxisTransform(axis, coordBase) {
+    var axisExtent = axis.getExtent();
+    var axisExtentSum = axisExtent[0] + axisExtent[1];
+
+    // Fast transform
+    axis.toGlobalCoord = axis.dim === 'x'
+        ? function (coord) {
+            return coord + coordBase;
+        }
+        : function (coord) {
+            return axisExtentSum - coord + coordBase;
+        };
+    axis.toLocalCoord = axis.dim === 'x'
+        ? function (coord) {
+            return coord - coordBase;
+        }
+        : function (coord) {
+            return axisExtentSum - coord + coordBase;
+        };
+}
+
+var axesTypes = ['xAxis', 'yAxis'];
+/**
+ * @inner
+ */
+function findAxesModels(seriesModel, ecModel) {
+    return map(axesTypes, function (axisType) {
+        var axisModel = seriesModel.getReferringComponents(axisType)[0];
+
+        if (__DEV__) {
+            if (!axisModel) {
+                throw new Error(axisType + ' "' + retrieve(
+                    seriesModel.get(axisType + 'Index'),
+                    seriesModel.get(axisType + 'Id'),
+                    0
+                ) + '" not found');
+            }
+        }
+        return axisModel;
+    });
+}
+
+/**
+ * @inner
+ */
+function isCartesian2D(seriesModel) {
+    return seriesModel.get('coordinateSystem') === 'cartesian2d';
+}
+
+Grid.create = function (ecModel, api) {
+    var grids = [];
+    ecModel.eachComponent('grid', function (gridModel, idx) {
+        var grid = new Grid(gridModel, ecModel, api);
+        grid.name = 'grid_' + idx;
+        // dataSampling requires axis extent, so resize
+        // should be performed in create stage.
+        grid.resize(gridModel, api, true);
+
+        gridModel.coordinateSystem = grid;
+
+        grids.push(grid);
+    });
+
+    // Inject the coordinateSystems into seriesModel
+    ecModel.eachSeries(function (seriesModel) {
+        if (!isCartesian2D(seriesModel)) {
+            return;
+        }
+
+        var axesModels = findAxesModels(seriesModel, ecModel);
+        var xAxisModel = axesModels[0];
+        var yAxisModel = axesModels[1];
+
+        var gridModel = xAxisModel.getCoordSysModel();
+
+        if (__DEV__) {
+            if (!gridModel) {
+                throw new Error(
+                    'Grid "' + retrieve(
+                        xAxisModel.get('gridIndex'),
+                        xAxisModel.get('gridId'),
+                        0
+                    ) + '" not found'
+                );
+            }
+            if (xAxisModel.getCoordSysModel() !== yAxisModel.getCoordSysModel()) {
+                throw new Error('xAxis and yAxis must use the same grid');
+            }
+        }
+
+        var grid = gridModel.coordinateSystem;
+
+        seriesModel.coordinateSystem = grid.getCartesian(
+            xAxisModel.componentIndex, yAxisModel.componentIndex
+        );
+    });
+
+    return grids;
+};
+
+// For deciding which dimensions to use when creating list data
+Grid.dimensions = Grid.prototype.dimensions = Cartesian2D.prototype.dimensions;
+
+CoordinateSystemManager.register('cartesian2d', Grid);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var PI$2 = Math.PI;
+
+function makeAxisEventDataBase(axisModel) {
+    var eventData = {
+        componentType: axisModel.mainType
+    };
+    eventData[axisModel.mainType + 'Index'] = axisModel.componentIndex;
+    return eventData;
+}
+
+/**
+ * A final axis is translated and rotated from a "standard axis".
+ * So opt.position and opt.rotation is required.
+ *
+ * A standard axis is and axis from [0, 0] to [0, axisExtent[1]],
+ * for example: (0, 0) ------------> (0, 50)
+ *
+ * nameDirection or tickDirection or labelDirection is 1 means tick
+ * or label is below the standard axis, whereas is -1 means above
+ * the standard axis. labelOffset means offset between label and axis,
+ * which is useful when 'onZero', where axisLabel is in the grid and
+ * label in outside grid.
+ *
+ * Tips: like always,
+ * positive rotation represents anticlockwise, and negative rotation
+ * represents clockwise.
+ * The direction of position coordinate is the same as the direction
+ * of screen coordinate.
+ *
+ * Do not need to consider axis 'inverse', which is auto processed by
+ * axis extent.
+ *
+ * @param {module:zrender/container/Group} group
+ * @param {Object} axisModel
+ * @param {Object} opt Standard axis parameters.
+ * @param {Array.<number>} opt.position [x, y]
+ * @param {number} opt.rotation by radian
+ * @param {number} [opt.nameDirection=1] 1 or -1 Used when nameLocation is 'middle' or 'center'.
+ * @param {number} [opt.tickDirection=1] 1 or -1
+ * @param {number} [opt.labelDirection=1] 1 or -1
+ * @param {number} [opt.labelOffset=0] Usefull when onZero.
+ * @param {string} [opt.axisLabelShow] default get from axisModel.
+ * @param {string} [opt.axisName] default get from axisModel.
+ * @param {number} [opt.axisNameAvailableWidth]
+ * @param {number} [opt.labelRotate] by degree, default get from axisModel.
+ * @param {number} [opt.strokeContainThreshold] Default label interval when label
+ * @param {number} [opt.nameTruncateMaxWidth]
+ */
+var AxisBuilder = function (axisModel, opt) {
+
+    /**
+     * @readOnly
+     */
+    this.opt = opt;
+
+    /**
+     * @readOnly
+     */
+    this.axisModel = axisModel;
+
+    // Default value
+    defaults(
+        opt,
+        {
+            labelOffset: 0,
+            nameDirection: 1,
+            tickDirection: 1,
+            labelDirection: 1,
+            silent: true
+        }
+    );
+
+    /**
+     * @readOnly
+     */
+    this.group = new Group();
+
+    // FIXME Not use a seperate text group?
+    var dumbGroup = new Group({
+        position: opt.position.slice(),
+        rotation: opt.rotation
+    });
+
+    // this.group.add(dumbGroup);
+    // this._dumbGroup = dumbGroup;
+
+    dumbGroup.updateTransform();
+    this._transform = dumbGroup.transform;
+
+    this._dumbGroup = dumbGroup;
+};
+
+AxisBuilder.prototype = {
+
+    constructor: AxisBuilder,
+
+    hasBuilder: function (name) {
+        return !!builders[name];
+    },
+
+    add: function (name) {
+        builders[name].call(this);
+    },
+
+    getGroup: function () {
+        return this.group;
+    }
+
+};
+
+var builders = {
+
+    /**
+     * @private
+     */
+    axisLine: function () {
+        var opt = this.opt;
+        var axisModel = this.axisModel;
+
+        if (!axisModel.get('axisLine.show')) {
+            return;
+        }
+
+        var extent = this.axisModel.axis.getExtent();
+
+        var matrix = this._transform;
+        var pt1 = [extent[0], 0];
+        var pt2 = [extent[1], 0];
+        if (matrix) {
+            applyTransform(pt1, pt1, matrix);
+            applyTransform(pt2, pt2, matrix);
+        }
+
+        var lineStyle = extend(
+            {
+                lineCap: 'round'
+            },
+            axisModel.getModel('axisLine.lineStyle').getLineStyle()
+        );
+
+        this.group.add(new Line(subPixelOptimizeLine({
+            // Id for animation
+            anid: 'line',
+
+            shape: {
+                x1: pt1[0],
+                y1: pt1[1],
+                x2: pt2[0],
+                y2: pt2[1]
+            },
+            style: lineStyle,
+            strokeContainThreshold: opt.strokeContainThreshold || 5,
+            silent: true,
+            z2: 1
+        })));
+
+        var arrows = axisModel.get('axisLine.symbol');
+        var arrowSize = axisModel.get('axisLine.symbolSize');
+
+        var arrowOffset = axisModel.get('axisLine.symbolOffset') || 0;
+        if (typeof arrowOffset === 'number') {
+            arrowOffset = [arrowOffset, arrowOffset];
+        }
+
+        if (arrows != null) {
+            if (typeof arrows === 'string') {
+                // Use the same arrow for start and end point
+                arrows = [arrows, arrows];
+            }
+            if (typeof arrowSize === 'string'
+                || typeof arrowSize === 'number'
+            ) {
+                // Use the same size for width and height
+                arrowSize = [arrowSize, arrowSize];
+            }
+
+            var symbolWidth = arrowSize[0];
+            var symbolHeight = arrowSize[1];
+
+            each$1([{
+                rotate: opt.rotation + Math.PI / 2,
+                offset: arrowOffset[0],
+                r: 0
+            }, {
+                rotate: opt.rotation - Math.PI / 2,
+                offset: arrowOffset[1],
+                r: Math.sqrt((pt1[0] - pt2[0]) * (pt1[0] - pt2[0])
+                    + (pt1[1] - pt2[1]) * (pt1[1] - pt2[1]))
+            }], function (point, index) {
+                if (arrows[index] !== 'none' && arrows[index] != null) {
+                    var symbol = createSymbol(
+                        arrows[index],
+                        -symbolWidth / 2,
+                        -symbolHeight / 2,
+                        symbolWidth,
+                        symbolHeight,
+                        lineStyle.stroke,
+                        true
+                    );
+
+                    // Calculate arrow position with offset
+                    var r = point.r + point.offset;
+                    var pos = [
+                        pt1[0] + r * Math.cos(opt.rotation),
+                        pt1[1] - r * Math.sin(opt.rotation)
+                    ];
+
+                    symbol.attr({
+                        rotation: point.rotate,
+                        position: pos,
+                        silent: true
+                    });
+                    this.group.add(symbol);
+                }
+            }, this);
+        }
+    },
+
+    /**
+     * @private
+     */
+    axisTickLabel: function () {
+        var axisModel = this.axisModel;
+        var opt = this.opt;
+
+        var tickEls = buildAxisTick(this, axisModel, opt);
+        var labelEls = buildAxisLabel(this, axisModel, opt);
+
+        fixMinMaxLabelShow(axisModel, labelEls, tickEls);
+    },
+
+    /**
+     * @private
+     */
+    axisName: function () {
+        var opt = this.opt;
+        var axisModel = this.axisModel;
+        var name = retrieve(opt.axisName, axisModel.get('name'));
+
+        if (!name) {
+            return;
+        }
+
+        var nameLocation = axisModel.get('nameLocation');
+        var nameDirection = opt.nameDirection;
+        var textStyleModel = axisModel.getModel('nameTextStyle');
+        var gap = axisModel.get('nameGap') || 0;
+
+        var extent = this.axisModel.axis.getExtent();
+        var gapSignal = extent[0] > extent[1] ? -1 : 1;
+        var pos = [
+            nameLocation === 'start'
+                ? extent[0] - gapSignal * gap
+                : nameLocation === 'end'
+                ? extent[1] + gapSignal * gap
+                : (extent[0] + extent[1]) / 2, // 'middle'
+            // Reuse labelOffset.
+            isNameLocationCenter(nameLocation) ? opt.labelOffset + nameDirection * gap : 0
+        ];
+
+        var labelLayout;
+
+        var nameRotation = axisModel.get('nameRotate');
+        if (nameRotation != null) {
+            nameRotation = nameRotation * PI$2 / 180; // To radian.
+        }
+
+        var axisNameAvailableWidth;
+
+        if (isNameLocationCenter(nameLocation)) {
+            labelLayout = innerTextLayout(
+                opt.rotation,
+                nameRotation != null ? nameRotation : opt.rotation, // Adapt to axis.
+                nameDirection
+            );
+        }
+        else {
+            labelLayout = endTextLayout(
+                opt, nameLocation, nameRotation || 0, extent
+            );
+
+            axisNameAvailableWidth = opt.axisNameAvailableWidth;
+            if (axisNameAvailableWidth != null) {
+                axisNameAvailableWidth = Math.abs(
+                    axisNameAvailableWidth / Math.sin(labelLayout.rotation)
+                );
+                !isFinite(axisNameAvailableWidth) && (axisNameAvailableWidth = null);
+            }
+        }
+
+        var textFont = textStyleModel.getFont();
+
+        var truncateOpt = axisModel.get('nameTruncate', true) || {};
+        var ellipsis = truncateOpt.ellipsis;
+        var maxWidth = retrieve(
+            opt.nameTruncateMaxWidth, truncateOpt.maxWidth, axisNameAvailableWidth
+        );
+        // FIXME
+        // truncate rich text? (consider performance)
+        var truncatedText = (ellipsis != null && maxWidth != null)
+            ? truncateText$1(
+                name, maxWidth, textFont, ellipsis,
+                {minChar: 2, placeholder: truncateOpt.placeholder}
+            )
+            : name;
+
+        var tooltipOpt = axisModel.get('tooltip', true);
+
+        var mainType = axisModel.mainType;
+        var formatterParams = {
+            componentType: mainType,
+            name: name,
+            $vars: ['name']
+        };
+        formatterParams[mainType + 'Index'] = axisModel.componentIndex;
+
+        var textEl = new Text({
+            // Id for animation
+            anid: 'name',
+
+            __fullText: name,
+            __truncatedText: truncatedText,
+
+            position: pos,
+            rotation: labelLayout.rotation,
+            silent: isSilent(axisModel),
+            z2: 1,
+            tooltip: (tooltipOpt && tooltipOpt.show)
+                ? extend({
+                    content: name,
+                    formatter: function () {
+                        return name;
+                    },
+                    formatterParams: formatterParams
+                }, tooltipOpt)
+                : null
+        });
+
+        setTextStyle(textEl.style, textStyleModel, {
+            text: truncatedText,
+            textFont: textFont,
+            textFill: textStyleModel.getTextColor()
+                || axisModel.get('axisLine.lineStyle.color'),
+            textAlign: labelLayout.textAlign,
+            textVerticalAlign: labelLayout.textVerticalAlign
+        });
+
+        if (axisModel.get('triggerEvent')) {
+            textEl.eventData = makeAxisEventDataBase(axisModel);
+            textEl.eventData.targetType = 'axisName';
+            textEl.eventData.name = name;
+        }
+
+        // FIXME
+        this._dumbGroup.add(textEl);
+        textEl.updateTransform();
+
+        this.group.add(textEl);
+
+        textEl.decomposeTransform();
+    }
+
+};
+
+/**
+ * @public
+ * @static
+ * @param {Object} opt
+ * @param {number} axisRotation in radian
+ * @param {number} textRotation in radian
+ * @param {number} direction
+ * @return {Object} {
+ *  rotation, // according to axis
+ *  textAlign,
+ *  textVerticalAlign
+ * }
+ */
+var innerTextLayout = AxisBuilder.innerTextLayout = function (axisRotation, textRotation, direction) {
+    var rotationDiff = remRadian(textRotation - axisRotation);
+    var textAlign;
+    var textVerticalAlign;
+
+    if (isRadianAroundZero(rotationDiff)) { // Label is parallel with axis line.
+        textVerticalAlign = direction > 0 ? 'top' : 'bottom';
+        textAlign = 'center';
+    }
+    else if (isRadianAroundZero(rotationDiff - PI$2)) { // Label is inverse parallel with axis line.
+        textVerticalAlign = direction > 0 ? 'bottom' : 'top';
+        textAlign = 'center';
+    }
+    else {
+        textVerticalAlign = 'middle';
+
+        if (rotationDiff > 0 && rotationDiff < PI$2) {
+            textAlign = direction > 0 ? 'right' : 'left';
+        }
+        else {
+            textAlign = direction > 0 ? 'left' : 'right';
+        }
+    }
+
+    return {
+        rotation: rotationDiff,
+        textAlign: textAlign,
+        textVerticalAlign: textVerticalAlign
+    };
+};
+
+function endTextLayout(opt, textPosition, textRotate, extent) {
+    var rotationDiff = remRadian(textRotate - opt.rotation);
+    var textAlign;
+    var textVerticalAlign;
+    var inverse = extent[0] > extent[1];
+    var onLeft = (textPosition === 'start' && !inverse)
+        || (textPosition !== 'start' && inverse);
+
+    if (isRadianAroundZero(rotationDiff - PI$2 / 2)) {
+        textVerticalAlign = onLeft ? 'bottom' : 'top';
+        textAlign = 'center';
+    }
+    else if (isRadianAroundZero(rotationDiff - PI$2 * 1.5)) {
+        textVerticalAlign = onLeft ? 'top' : 'bottom';
+        textAlign = 'center';
+    }
+    else {
+        textVerticalAlign = 'middle';
+        if (rotationDiff < PI$2 * 1.5 && rotationDiff > PI$2 / 2) {
+            textAlign = onLeft ? 'left' : 'right';
+        }
+        else {
+            textAlign = onLeft ? 'right' : 'left';
+        }
+    }
+
+    return {
+        rotation: rotationDiff,
+        textAlign: textAlign,
+        textVerticalAlign: textVerticalAlign
+    };
+}
+
+function isSilent(axisModel) {
+    var tooltipOpt = axisModel.get('tooltip');
+    return axisModel.get('silent')
+        // Consider mouse cursor, add these restrictions.
+        || !(
+            axisModel.get('triggerEvent') || (tooltipOpt && tooltipOpt.show)
+        );
+}
+
+function fixMinMaxLabelShow(axisModel, labelEls, tickEls) {
+    // If min or max are user set, we need to check
+    // If the tick on min(max) are overlap on their neighbour tick
+    // If they are overlapped, we need to hide the min(max) tick label
+    var showMinLabel = axisModel.get('axisLabel.showMinLabel');
+    var showMaxLabel = axisModel.get('axisLabel.showMaxLabel');
+
+    // FIXME
+    // Have not consider onBand yet, where tick els is more than label els.
+
+    labelEls = labelEls || [];
+    tickEls = tickEls || [];
+
+    var firstLabel = labelEls[0];
+    var nextLabel = labelEls[1];
+    var lastLabel = labelEls[labelEls.length - 1];
+    var prevLabel = labelEls[labelEls.length - 2];
+
+    var firstTick = tickEls[0];
+    var nextTick = tickEls[1];
+    var lastTick = tickEls[tickEls.length - 1];
+    var prevTick = tickEls[tickEls.length - 2];
+
+    if (showMinLabel === false) {
+        ignoreEl(firstLabel);
+        ignoreEl(firstTick);
+    }
+    else if (isTwoLabelOverlapped(firstLabel, nextLabel)) {
+        if (showMinLabel) {
+            ignoreEl(nextLabel);
+            ignoreEl(nextTick);
+        }
+        else {
+            ignoreEl(firstLabel);
+            ignoreEl(firstTick);
+        }
+    }
+
+    if (showMaxLabel === false) {
+        ignoreEl(lastLabel);
+        ignoreEl(lastTick);
+    }
+    else if (isTwoLabelOverlapped(prevLabel, lastLabel)) {
+        if (showMaxLabel) {
+            ignoreEl(prevLabel);
+            ignoreEl(prevTick);
+        }
+        else {
+            ignoreEl(lastLabel);
+            ignoreEl(lastTick);
+        }
+    }
+}
+
+function ignoreEl(el) {
+    el && (el.ignore = true);
+}
+
+function isTwoLabelOverlapped(current, next, labelLayout) {
+    // current and next has the same rotation.
+    var firstRect = current && current.getBoundingRect().clone();
+    var nextRect = next && next.getBoundingRect().clone();
+
+    if (!firstRect || !nextRect) {
+        return;
+    }
+
+    // When checking intersect of two rotated labels, we use mRotationBack
+    // to avoid that boundingRect is enlarge when using `boundingRect.applyTransform`.
+    var mRotationBack = identity([]);
+    rotate(mRotationBack, mRotationBack, -current.rotation);
+
+    firstRect.applyTransform(mul$1([], mRotationBack, current.getLocalTransform()));
+    nextRect.applyTransform(mul$1([], mRotationBack, next.getLocalTransform()));
+
+    return firstRect.intersect(nextRect);
+}
+
+function isNameLocationCenter(nameLocation) {
+    return nameLocation === 'middle' || nameLocation === 'center';
+}
+
+function buildAxisTick(axisBuilder, axisModel, opt) {
+    var axis = axisModel.axis;
+
+    if (!axisModel.get('axisTick.show') || axis.scale.isBlank()) {
+        return;
+    }
+
+    var tickModel = axisModel.getModel('axisTick');
+
+    var lineStyleModel = tickModel.getModel('lineStyle');
+    var tickLen = tickModel.get('length');
+
+    var ticksCoords = axis.getTicksCoords();
+
+    var pt1 = [];
+    var pt2 = [];
+    var matrix = axisBuilder._transform;
+
+    var tickEls = [];
+
+    for (var i = 0; i < ticksCoords.length; i++) {
+        var tickCoord = ticksCoords[i].coord;
+
+        pt1[0] = tickCoord;
+        pt1[1] = 0;
+        pt2[0] = tickCoord;
+        pt2[1] = opt.tickDirection * tickLen;
+
+        if (matrix) {
+            applyTransform(pt1, pt1, matrix);
+            applyTransform(pt2, pt2, matrix);
+        }
+        // Tick line, Not use group transform to have better line draw
+        var tickEl = new Line(subPixelOptimizeLine({
+            // Id for animation
+            anid: 'tick_' + ticksCoords[i].tickValue,
+
+            shape: {
+                x1: pt1[0],
+                y1: pt1[1],
+                x2: pt2[0],
+                y2: pt2[1]
+            },
+            style: defaults(
+                lineStyleModel.getLineStyle(),
+                {
+                    stroke: axisModel.get('axisLine.lineStyle.color')
+                }
+            ),
+            z2: 2,
+            silent: true
+        }));
+        axisBuilder.group.add(tickEl);
+        tickEls.push(tickEl);
+    }
+
+    return tickEls;
+}
+
+function buildAxisLabel(axisBuilder, axisModel, opt) {
+    var axis = axisModel.axis;
+    var show = retrieve(opt.axisLabelShow, axisModel.get('axisLabel.show'));
+
+    if (!show || axis.scale.isBlank()) {
+        return;
+    }
+
+    var labelModel = axisModel.getModel('axisLabel');
+    var labelMargin = labelModel.get('margin');
+    var labels = axis.getViewLabels();
+
+    // Special label rotate.
+    var labelRotation = (
+        retrieve(opt.labelRotate, labelModel.get('rotate')) || 0
+    ) * PI$2 / 180;
+
+    var labelLayout = innerTextLayout(opt.rotation, labelRotation, opt.labelDirection);
+    var rawCategoryData = axisModel.getCategories(true);
+
+    var labelEls = [];
+    var silent = isSilent(axisModel);
+    var triggerEvent = axisModel.get('triggerEvent');
+
+    each$1(labels, function (labelItem, index) {
+        var tickValue = labelItem.tickValue;
+        var formattedLabel = labelItem.formattedLabel;
+        var rawLabel = labelItem.rawLabel;
+
+        var itemLabelModel = labelModel;
+        if (rawCategoryData && rawCategoryData[tickValue] && rawCategoryData[tickValue].textStyle) {
+            itemLabelModel = new Model(
+                rawCategoryData[tickValue].textStyle, labelModel, axisModel.ecModel
+            );
+        }
+
+        var textColor = itemLabelModel.getTextColor()
+            || axisModel.get('axisLine.lineStyle.color');
+
+        var tickCoord = axis.dataToCoord(tickValue);
+        var pos = [
+            tickCoord,
+            opt.labelOffset + opt.labelDirection * labelMargin
+        ];
+
+        var textEl = new Text({
+            // Id for animation
+            anid: 'label_' + tickValue,
+            position: pos,
+            rotation: labelLayout.rotation,
+            silent: silent,
+            z2: 10
+        });
+
+        setTextStyle(textEl.style, itemLabelModel, {
+            text: formattedLabel,
+            textAlign: itemLabelModel.getShallow('align', true)
+                || labelLayout.textAlign,
+            textVerticalAlign: itemLabelModel.getShallow('verticalAlign', true)
+                || itemLabelModel.getShallow('baseline', true)
+                || labelLayout.textVerticalAlign,
+            textFill: typeof textColor === 'function'
+                ? textColor(
+                    // (1) In category axis with data zoom, tick is not the original
+                    // index of axis.data. So tick should not be exposed to user
+                    // in category axis.
+                    // (2) Compatible with previous version, which always use formatted label as
+                    // input. But in interval scale the formatted label is like '223,445', which
+                    // maked user repalce ','. So we modify it to return original val but remain
+                    // it as 'string' to avoid error in replacing.
+                    axis.type === 'category'
+                        ? rawLabel
+                        : axis.type === 'value'
+                        ? tickValue + ''
+                        : tickValue,
+                    index
+                )
+                : textColor
+        });
+
+        // Pack data for mouse event
+        if (triggerEvent) {
+            textEl.eventData = makeAxisEventDataBase(axisModel);
+            textEl.eventData.targetType = 'axisLabel';
+            textEl.eventData.value = rawLabel;
+        }
+
+        // FIXME
+        axisBuilder._dumbGroup.add(textEl);
+        textEl.updateTransform();
+
+        labelEls.push(textEl);
+        axisBuilder.group.add(textEl);
+
+        textEl.decomposeTransform();
+
+    });
+
+    return labelEls;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var each$6 = each$1;
+var curry$1 = curry;
+
+// Build axisPointerModel, mergin tooltip.axisPointer model for each axis.
+// allAxesInfo should be updated when setOption performed.
+function collect(ecModel, api) {
+    var result = {
+        /**
+         * key: makeKey(axis.model)
+         * value: {
+         *      axis,
+         *      coordSys,
+         *      axisPointerModel,
+         *      triggerTooltip,
+         *      involveSeries,
+         *      snap,
+         *      seriesModels,
+         *      seriesDataCount
+         * }
+         */
+        axesInfo: {},
+        seriesInvolved: false,
+        /**
+         * key: makeKey(coordSys.model)
+         * value: Object: key makeKey(axis.model), value: axisInfo
+         */
+        coordSysAxesInfo: {},
+        coordSysMap: {}
+    };
+
+    collectAxesInfo(result, ecModel, api);
+
+    // Check seriesInvolved for performance, in case too many series in some chart.
+    result.seriesInvolved && collectSeriesInfo(result, ecModel);
+
+    return result;
+}
+
+function collectAxesInfo(result, ecModel, api) {
+    var globalTooltipModel = ecModel.getComponent('tooltip');
+    var globalAxisPointerModel = ecModel.getComponent('axisPointer');
+    // links can only be set on global.
+    var linksOption = globalAxisPointerModel.get('link', true) || [];
+    var linkGroups = [];
+
+    // Collect axes info.
+    each$6(api.getCoordinateSystems(), function (coordSys) {
+        // Some coordinate system do not support axes, like geo.
+        if (!coordSys.axisPointerEnabled) {
+            return;
+        }
+
+        var coordSysKey = makeKey(coordSys.model);
+        var axesInfoInCoordSys = result.coordSysAxesInfo[coordSysKey] = {};
+        result.coordSysMap[coordSysKey] = coordSys;
+
+        // Set tooltip (like 'cross') is a convienent way to show axisPointer
+        // for user. So we enable seting tooltip on coordSys model.
+        var coordSysModel = coordSys.model;
+        var baseTooltipModel = coordSysModel.getModel('tooltip', globalTooltipModel);
+
+        each$6(coordSys.getAxes(), curry$1(saveTooltipAxisInfo, false, null));
+
+        // If axis tooltip used, choose tooltip axis for each coordSys.
+        // Notice this case: coordSys is `grid` but not `cartesian2D` here.
+        if (coordSys.getTooltipAxes
+            && globalTooltipModel
+            // If tooltip.showContent is set as false, tooltip will not
+            // show but axisPointer will show as normal.
+            && baseTooltipModel.get('show')
+        ) {
+            // Compatible with previous logic. But series.tooltip.trigger: 'axis'
+            // or series.data[n].tooltip.trigger: 'axis' are not support any more.
+            var triggerAxis = baseTooltipModel.get('trigger') === 'axis';
+            var cross = baseTooltipModel.get('axisPointer.type') === 'cross';
+            var tooltipAxes = coordSys.getTooltipAxes(baseTooltipModel.get('axisPointer.axis'));
+            if (triggerAxis || cross) {
+                each$6(tooltipAxes.baseAxes, curry$1(
+                    saveTooltipAxisInfo, cross ? 'cross' : true, triggerAxis
+                ));
+            }
+            if (cross) {
+                each$6(tooltipAxes.otherAxes, curry$1(saveTooltipAxisInfo, 'cross', false));
+            }
+        }
+
+        // fromTooltip: true | false | 'cross'
+        // triggerTooltip: true | false | null
+        function saveTooltipAxisInfo(fromTooltip, triggerTooltip, axis) {
+            var axisPointerModel = axis.model.getModel('axisPointer', globalAxisPointerModel);
+
+            var axisPointerShow = axisPointerModel.get('show');
+            if (!axisPointerShow || (
+                axisPointerShow === 'auto'
+                && !fromTooltip
+                && !isHandleTrigger(axisPointerModel)
+            )) {
+                return;
+            }
+
+            if (triggerTooltip == null) {
+                triggerTooltip = axisPointerModel.get('triggerTooltip');
+            }
+
+            axisPointerModel = fromTooltip
+                ? makeAxisPointerModel(
+                    axis, baseTooltipModel, globalAxisPointerModel, ecModel,
+                    fromTooltip, triggerTooltip
+                )
+                : axisPointerModel;
+
+            var snap = axisPointerModel.get('snap');
+            var key = makeKey(axis.model);
+            var involveSeries = triggerTooltip || snap || axis.type === 'category';
+
+            // If result.axesInfo[key] exist, override it (tooltip has higher priority).
+            var axisInfo = result.axesInfo[key] = {
+                key: key,
+                axis: axis,
+                coordSys: coordSys,
+                axisPointerModel: axisPointerModel,
+                triggerTooltip: triggerTooltip,
+                involveSeries: involveSeries,
+                snap: snap,
+                useHandle: isHandleTrigger(axisPointerModel),
+                seriesModels: []
+            };
+            axesInfoInCoordSys[key] = axisInfo;
+            result.seriesInvolved |= involveSeries;
+
+            var groupIndex = getLinkGroupIndex(linksOption, axis);
+            if (groupIndex != null) {
+                var linkGroup = linkGroups[groupIndex] || (linkGroups[groupIndex] = {axesInfo: {}});
+                linkGroup.axesInfo[key] = axisInfo;
+                linkGroup.mapper = linksOption[groupIndex].mapper;
+                axisInfo.linkGroup = linkGroup;
+            }
+        }
+    });
+}
+
+function makeAxisPointerModel(
+    axis, baseTooltipModel, globalAxisPointerModel, ecModel, fromTooltip, triggerTooltip
+) {
+    var tooltipAxisPointerModel = baseTooltipModel.getModel('axisPointer');
+    var volatileOption = {};
+
+    each$6(
+        [
+            'type', 'snap', 'lineStyle', 'shadowStyle', 'label',
+            'animation', 'animationDurationUpdate', 'animationEasingUpdate', 'z'
+        ],
+        function (field) {
+            volatileOption[field] = clone(tooltipAxisPointerModel.get(field));
+        }
+    );
+
+    // category axis do not auto snap, otherwise some tick that do not
+    // has value can not be hovered. value/time/log axis default snap if
+    // triggered from tooltip and trigger tooltip.
+    volatileOption.snap = axis.type !== 'category' && !!triggerTooltip;
+
+    // Compatibel with previous behavior, tooltip axis do not show label by default.
+    // Only these properties can be overrided from tooltip to axisPointer.
+    if (tooltipAxisPointerModel.get('type') === 'cross') {
+        volatileOption.type = 'line';
+    }
+    var labelOption = volatileOption.label || (volatileOption.label = {});
+    // Follow the convention, do not show label when triggered by tooltip by default.
+    labelOption.show == null && (labelOption.show = false);
+
+    if (fromTooltip === 'cross') {
+        // When 'cross', both axes show labels.
+        var tooltipAxisPointerLabelShow = tooltipAxisPointerModel.get('label.show');
+        labelOption.show = tooltipAxisPointerLabelShow != null ? tooltipAxisPointerLabelShow : true;
+        // If triggerTooltip, this is a base axis, which should better not use cross style
+        // (cross style is dashed by default)
+        if (!triggerTooltip) {
+            var crossStyle = volatileOption.lineStyle = tooltipAxisPointerModel.get('crossStyle');
+            crossStyle && defaults(labelOption, crossStyle.textStyle);
+        }
+    }
+
+    return axis.model.getModel(
+        'axisPointer',
+        new Model(volatileOption, globalAxisPointerModel, ecModel)
+    );
+}
+
+function collectSeriesInfo(result, ecModel) {
+    // Prepare data for axis trigger
+    ecModel.eachSeries(function (seriesModel) {
+
+        // Notice this case: this coordSys is `cartesian2D` but not `grid`.
+        var coordSys = seriesModel.coordinateSystem;
+        var seriesTooltipTrigger = seriesModel.get('tooltip.trigger', true);
+        var seriesTooltipShow = seriesModel.get('tooltip.show', true);
+        if (!coordSys
+            || seriesTooltipTrigger === 'none'
+            || seriesTooltipTrigger === false
+            || seriesTooltipTrigger === 'item'
+            || seriesTooltipShow === false
+            || seriesModel.get('axisPointer.show', true) === false
+        ) {
+            return;
+        }
+
+        each$6(result.coordSysAxesInfo[makeKey(coordSys.model)], function (axisInfo) {
+            var axis = axisInfo.axis;
+            if (coordSys.getAxis(axis.dim) === axis) {
+                axisInfo.seriesModels.push(seriesModel);
+                axisInfo.seriesDataCount == null && (axisInfo.seriesDataCount = 0);
+                axisInfo.seriesDataCount += seriesModel.getData().count();
+            }
+        });
+
+    }, this);
+}
+
+/**
+ * For example:
+ * {
+ *     axisPointer: {
+ *         links: [{
+ *             xAxisIndex: [2, 4],
+ *             yAxisIndex: 'all'
+ *         }, {
+ *             xAxisId: ['a5', 'a7'],
+ *             xAxisName: 'xxx'
+ *         }]
+ *     }
+ * }
+ */
+function getLinkGroupIndex(linksOption, axis) {
+    var axisModel = axis.model;
+    var dim = axis.dim;
+    for (var i = 0; i < linksOption.length; i++) {
+        var linkOption = linksOption[i] || {};
+        if (checkPropInLink(linkOption[dim + 'AxisId'], axisModel.id)
+            || checkPropInLink(linkOption[dim + 'AxisIndex'], axisModel.componentIndex)
+            || checkPropInLink(linkOption[dim + 'AxisName'], axisModel.name)
+        ) {
+            return i;
+        }
+    }
+}
+
+function checkPropInLink(linkPropValue, axisPropValue) {
+    return linkPropValue === 'all'
+        || (isArray(linkPropValue) && indexOf(linkPropValue, axisPropValue) >= 0)
+        || linkPropValue === axisPropValue;
+}
+
+function fixValue(axisModel) {
+    var axisInfo = getAxisInfo(axisModel);
+    if (!axisInfo) {
+        return;
+    }
+
+    var axisPointerModel = axisInfo.axisPointerModel;
+    var scale = axisInfo.axis.scale;
+    var option = axisPointerModel.option;
+    var status = axisPointerModel.get('status');
+    var value = axisPointerModel.get('value');
+
+    // Parse init value for category and time axis.
+    if (value != null) {
+        value = scale.parse(value);
+    }
+
+    var useHandle = isHandleTrigger(axisPointerModel);
+    // If `handle` used, `axisPointer` will always be displayed, so value
+    // and status should be initialized.
+    if (status == null) {
+        option.status = useHandle ? 'show' : 'hide';
+    }
+
+    var extent = scale.getExtent().slice();
+    extent[0] > extent[1] && extent.reverse();
+
+    if (// Pick a value on axis when initializing.
+        value == null
+        // If both `handle` and `dataZoom` are used, value may be out of axis extent,
+        // where we should re-pick a value to keep `handle` displaying normally.
+        || value > extent[1]
+    ) {
+        // Make handle displayed on the end of the axis when init, which looks better.
+        value = extent[1];
+    }
+    if (value < extent[0]) {
+        value = extent[0];
+    }
+
+    option.value = value;
+
+    if (useHandle) {
+        option.status = axisInfo.axis.scale.isBlank() ? 'hide' : 'show';
+    }
+}
+
+function getAxisInfo(axisModel) {
+    var coordSysAxesInfo = (axisModel.ecModel.getComponent('axisPointer') || {}).coordSysAxesInfo;
+    return coordSysAxesInfo && coordSysAxesInfo.axesInfo[makeKey(axisModel)];
+}
+
+function getAxisPointerModel(axisModel) {
+    var axisInfo = getAxisInfo(axisModel);
+    return axisInfo && axisInfo.axisPointerModel;
+}
+
+function isHandleTrigger(axisPointerModel) {
+    return !!axisPointerModel.get('handle.show');
+}
+
+/**
+ * @param {module:echarts/model/Model} model
+ * @return {string} unique key
+ */
+function makeKey(model) {
+    return model.type + '||' + model.id;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Base class of AxisView.
+ */
+var AxisView = extendComponentView({
+
+    type: 'axis',
+
+    /**
+     * @private
+     */
+    _axisPointer: null,
+
+    /**
+     * @protected
+     * @type {string}
+     */
+    axisPointerClass: null,
+
+    /**
+     * @override
+     */
+    render: function (axisModel, ecModel, api, payload) {
+        // FIXME
+        // This process should proformed after coordinate systems updated
+        // (axis scale updated), and should be performed each time update.
+        // So put it here temporarily, although it is not appropriate to
+        // put a model-writing procedure in `view`.
+        this.axisPointerClass && fixValue(axisModel);
+
+        AxisView.superApply(this, 'render', arguments);
+
+        updateAxisPointer(this, axisModel, ecModel, api, payload, true);
+    },
+
+    /**
+     * Action handler.
+     * @public
+     * @param {module:echarts/coord/cartesian/AxisModel} axisModel
+     * @param {module:echarts/model/Global} ecModel
+     * @param {module:echarts/ExtensionAPI} api
+     * @param {Object} payload
+     */
+    updateAxisPointer: function (axisModel, ecModel, api, payload, force) {
+        updateAxisPointer(this, axisModel, ecModel, api, payload, false);
+    },
+
+    /**
+     * @override
+     */
+    remove: function (ecModel, api) {
+        var axisPointer = this._axisPointer;
+        axisPointer && axisPointer.remove(api);
+        AxisView.superApply(this, 'remove', arguments);
+    },
+
+    /**
+     * @override
+     */
+    dispose: function (ecModel, api) {
+        disposeAxisPointer(this, api);
+        AxisView.superApply(this, 'dispose', arguments);
+    }
+
+});
+
+function updateAxisPointer(axisView, axisModel, ecModel, api, payload, forceRender) {
+    var Clazz = AxisView.getAxisPointerClass(axisView.axisPointerClass);
+    if (!Clazz) {
+        return;
+    }
+    var axisPointerModel = getAxisPointerModel(axisModel);
+    axisPointerModel
+        ? (axisView._axisPointer || (axisView._axisPointer = new Clazz()))
+            .render(axisModel, axisPointerModel, api, forceRender)
+        : disposeAxisPointer(axisView, api);
+}
+
+function disposeAxisPointer(axisView, ecModel, api) {
+    var axisPointer = axisView._axisPointer;
+    axisPointer && axisPointer.dispose(ecModel, api);
+    axisView._axisPointer = null;
+}
+
+var axisPointerClazz = [];
+
+AxisView.registerAxisPointerClass = function (type, clazz) {
+    if (__DEV__) {
+        if (axisPointerClazz[type]) {
+            throw new Error('axisPointer ' + type + ' exists');
+        }
+    }
+    axisPointerClazz[type] = clazz;
+};
+
+AxisView.getAxisPointerClass = function (type) {
+    return type && axisPointerClazz[type];
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Can only be called after coordinate system creation stage.
+ * (Can be called before coordinate system update stage).
+ *
+ * @param {Object} opt {labelInside}
+ * @return {Object} {
+ *  position, rotation, labelDirection, labelOffset,
+ *  tickDirection, labelRotate, z2
+ * }
+ */
+function layout$1(gridModel, axisModel, opt) {
+    opt = opt || {};
+    var grid = gridModel.coordinateSystem;
+    var axis = axisModel.axis;
+    var layout = {};
+    var otherAxisOnZeroOf = axis.getAxesOnZeroOf()[0];
+
+    var rawAxisPosition = axis.position;
+    var axisPosition = otherAxisOnZeroOf ? 'onZero' : rawAxisPosition;
+    var axisDim = axis.dim;
+
+    var rect = grid.getRect();
+    var rectBound = [rect.x, rect.x + rect.width, rect.y, rect.y + rect.height];
+    var idx = {left: 0, right: 1, top: 0, bottom: 1, onZero: 2};
+    var axisOffset = axisModel.get('offset') || 0;
+
+    var posBound = axisDim === 'x'
+        ? [rectBound[2] - axisOffset, rectBound[3] + axisOffset]
+        : [rectBound[0] - axisOffset, rectBound[1] + axisOffset];
+
+    if (otherAxisOnZeroOf) {
+        var onZeroCoord = otherAxisOnZeroOf.toGlobalCoord(otherAxisOnZeroOf.dataToCoord(0));
+        posBound[idx['onZero']] = Math.max(Math.min(onZeroCoord, posBound[1]), posBound[0]);
+    }
+
+    // Axis position
+    layout.position = [
+        axisDim === 'y' ? posBound[idx[axisPosition]] : rectBound[0],
+        axisDim === 'x' ? posBound[idx[axisPosition]] : rectBound[3]
+    ];
+
+    // Axis rotation
+    layout.rotation = Math.PI / 2 * (axisDim === 'x' ? 0 : 1);
+
+    // Tick and label direction, x y is axisDim
+    var dirMap = {top: -1, bottom: 1, left: -1, right: 1};
+
+    layout.labelDirection = layout.tickDirection = layout.nameDirection = dirMap[rawAxisPosition];
+    layout.labelOffset = otherAxisOnZeroOf ? posBound[idx[rawAxisPosition]] - posBound[idx['onZero']] : 0;
+
+    if (axisModel.get('axisTick.inside')) {
+        layout.tickDirection = -layout.tickDirection;
+    }
+    if (retrieve(opt.labelInside, axisModel.get('axisLabel.inside'))) {
+        layout.labelDirection = -layout.labelDirection;
+    }
+
+    // Special label rotation
+    var labelRotate = axisModel.get('axisLabel.rotate');
+    layout.labelRotate = axisPosition === 'top' ? -labelRotate : labelRotate;
+
+    // Over splitLine and splitArea
+    layout.z2 = 1;
+
+    return layout;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var axisBuilderAttrs = [
+    'axisLine', 'axisTickLabel', 'axisName'
+];
+var selfBuilderAttrs = [
+    'splitArea', 'splitLine'
+];
+
+// function getAlignWithLabel(model, axisModel) {
+//     var alignWithLabel = model.get('alignWithLabel');
+//     if (alignWithLabel === 'auto') {
+//         alignWithLabel = axisModel.get('axisTick.alignWithLabel');
+//     }
+//     return alignWithLabel;
+// }
+
+var CartesianAxisView = AxisView.extend({
+
+    type: 'cartesianAxis',
+
+    axisPointerClass: 'CartesianAxisPointer',
+
+    /**
+     * @override
+     */
+    render: function (axisModel, ecModel, api, payload) {
+
+        this.group.removeAll();
+
+        var oldAxisGroup = this._axisGroup;
+        this._axisGroup = new Group();
+
+        this.group.add(this._axisGroup);
+
+        if (!axisModel.get('show')) {
+            return;
+        }
+
+        var gridModel = axisModel.getCoordSysModel();
+
+        var layout = layout$1(gridModel, axisModel);
+
+        var axisBuilder = new AxisBuilder(axisModel, layout);
+
+        each$1(axisBuilderAttrs, axisBuilder.add, axisBuilder);
+
+        this._axisGroup.add(axisBuilder.getGroup());
+
+        each$1(selfBuilderAttrs, function (name) {
+            if (axisModel.get(name + '.show')) {
+                this['_' + name](axisModel, gridModel);
+            }
+        }, this);
+
+        groupTransition(oldAxisGroup, this._axisGroup, axisModel);
+
+        CartesianAxisView.superCall(this, 'render', axisModel, ecModel, api, payload);
+    },
+
+    remove: function () {
+        this._splitAreaColors = null;
+    },
+
+    /**
+     * @param {module:echarts/coord/cartesian/AxisModel} axisModel
+     * @param {module:echarts/coord/cartesian/GridModel} gridModel
+     * @private
+     */
+    _splitLine: function (axisModel, gridModel) {
+        var axis = axisModel.axis;
+
+        if (axis.scale.isBlank()) {
+            return;
+        }
+
+        var splitLineModel = axisModel.getModel('splitLine');
+        var lineStyleModel = splitLineModel.getModel('lineStyle');
+        var lineColors = lineStyleModel.get('color');
+
+        lineColors = isArray(lineColors) ? lineColors : [lineColors];
+
+        var gridRect = gridModel.coordinateSystem.getRect();
+        var isHorizontal = axis.isHorizontal();
+
+        var lineCount = 0;
+
+        var ticksCoords = axis.getTicksCoords({
+            tickModel: splitLineModel
+        });
+
+        var p1 = [];
+        var p2 = [];
+
+        // Simple optimization
+        // Batching the lines if color are the same
+        var lineStyle = lineStyleModel.getLineStyle();
+        for (var i = 0; i < ticksCoords.length; i++) {
+            var tickCoord = axis.toGlobalCoord(ticksCoords[i].coord);
+
+            if (isHorizontal) {
+                p1[0] = tickCoord;
+                p1[1] = gridRect.y;
+                p2[0] = tickCoord;
+                p2[1] = gridRect.y + gridRect.height;
+            }
+            else {
+                p1[0] = gridRect.x;
+                p1[1] = tickCoord;
+                p2[0] = gridRect.x + gridRect.width;
+                p2[1] = tickCoord;
+            }
+
+            var colorIndex = (lineCount++) % lineColors.length;
+            var tickValue = ticksCoords[i].tickValue;
+            this._axisGroup.add(new Line(subPixelOptimizeLine({
+                anid: tickValue != null ? 'line_' + ticksCoords[i].tickValue : null,
+                shape: {
+                    x1: p1[0],
+                    y1: p1[1],
+                    x2: p2[0],
+                    y2: p2[1]
+                },
+                style: defaults({
+                    stroke: lineColors[colorIndex]
+                }, lineStyle),
+                silent: true
+            })));
+        }
+    },
+
+    /**
+     * @param {module:echarts/coord/cartesian/AxisModel} axisModel
+     * @param {module:echarts/coord/cartesian/GridModel} gridModel
+     * @private
+     */
+    _splitArea: function (axisModel, gridModel) {
+        var axis = axisModel.axis;
+
+        if (axis.scale.isBlank()) {
+            return;
+        }
+
+        var splitAreaModel = axisModel.getModel('splitArea');
+        var areaStyleModel = splitAreaModel.getModel('areaStyle');
+        var areaColors = areaStyleModel.get('color');
+
+        var gridRect = gridModel.coordinateSystem.getRect();
+
+        var ticksCoords = axis.getTicksCoords({
+            tickModel: splitAreaModel,
+            clamp: true
+        });
+
+        if (!ticksCoords.length) {
+            return;
+        }
+
+        // For Making appropriate splitArea animation, the color and anid
+        // should be corresponding to previous one if possible.
+        var areaColorsLen = areaColors.length;
+        var lastSplitAreaColors = this._splitAreaColors;
+        var newSplitAreaColors = createHashMap();
+        var colorIndex = 0;
+        if (lastSplitAreaColors) {
+            for (var i = 0; i < ticksCoords.length; i++) {
+                var cIndex = lastSplitAreaColors.get(ticksCoords[i].tickValue);
+                if (cIndex != null) {
+                    colorIndex = (cIndex + (areaColorsLen - 1) * i) % areaColorsLen;
+                    break;
+                }
+            }
+        }
+
+        var prev = axis.toGlobalCoord(ticksCoords[0].coord);
+
+        var areaStyle = areaStyleModel.getAreaStyle();
+        areaColors = isArray(areaColors) ? areaColors : [areaColors];
+
+        for (var i = 1; i < ticksCoords.length; i++) {
+            var tickCoord = axis.toGlobalCoord(ticksCoords[i].coord);
+
+            var x;
+            var y;
+            var width;
+            var height;
+            if (axis.isHorizontal()) {
+                x = prev;
+                y = gridRect.y;
+                width = tickCoord - x;
+                height = gridRect.height;
+                prev = x + width;
+            }
+            else {
+                x = gridRect.x;
+                y = prev;
+                width = gridRect.width;
+                height = tickCoord - y;
+                prev = y + height;
+            }
+
+            var tickValue = ticksCoords[i - 1].tickValue;
+            tickValue != null && newSplitAreaColors.set(tickValue, colorIndex);
+
+            this._axisGroup.add(new Rect({
+                anid: tickValue != null ? 'area_' + tickValue : null,
+                shape: {
+                    x: x,
+                    y: y,
+                    width: width,
+                    height: height
+                },
+                style: defaults({
+                    fill: areaColors[colorIndex]
+                }, areaStyle),
+                silent: true
+            }));
+
+            colorIndex = (colorIndex + 1) % areaColorsLen;
+        }
+
+        this._splitAreaColors = newSplitAreaColors;
+    }
+});
+
+CartesianAxisView.extend({
+    type: 'xAxis'
+});
+CartesianAxisView.extend({
+    type: 'yAxis'
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// Grid view
+extendComponentView({
+
+    type: 'grid',
+
+    render: function (gridModel, ecModel) {
+        this.group.removeAll();
+        if (gridModel.get('show')) {
+            this.group.add(new Rect({
+                shape: gridModel.coordinateSystem.getRect(),
+                style: defaults({
+                    fill: gridModel.get('backgroundColor')
+                }, gridModel.getItemStyle()),
+                silent: true,
+                z2: -1
+            }));
+        }
+    }
+
+});
+
+registerPreprocessor(function (option) {
+    // Only create grid when need
+    if (option.xAxis && option.yAxis && !option.grid) {
+        option.grid = {};
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// In case developer forget to include grid component
+registerVisual(visualSymbol('line', 'circle', 'line'));
+registerLayout(pointsLayout('line'));
+
+// Down sample after filter
+registerProcessor(
+    PRIORITY.PROCESSOR.STATISTIC,
+    dataSample('line')
+);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var BaseBarSeries = SeriesModel.extend({
+
+    type: 'series.__base_bar__',
+
+    getInitialData: function (option, ecModel) {
+        return createListFromArray(this.getSource(), this);
+    },
+
+    getMarkerPosition: function (value) {
+        var coordSys = this.coordinateSystem;
+        if (coordSys) {
+            // PENDING if clamp ?
+            var pt = coordSys.dataToPoint(coordSys.clampData(value));
+            var data = this.getData();
+            var offset = data.getLayout('offset');
+            var size = data.getLayout('size');
+            var offsetIndex = coordSys.getBaseAxis().isHorizontal() ? 0 : 1;
+            pt[offsetIndex] += offset + size / 2;
+            return pt;
+        }
+        return [NaN, NaN];
+    },
+
+    defaultOption: {
+        zlevel: 0,                  // ä¸€çº§å±‚å 
+        z: 2,                       // äºŒçº§å±‚å 
+        coordinateSystem: 'cartesian2d',
+        legendHoverLink: true,
+        // stack: null
+
+        // Cartesian coordinate system
+        // xAxisIndex: 0,
+        // yAxisIndex: 0,
+
+        // æœ€å°é«˜åº¦æ”¹ä¸º0
+        barMinHeight: 0,
+        // æœ€å°è§’åº¦ä¸º0ï¼Œä»…å¯¹æžåæ ‡ç³»ä¸‹çš„æŸ±çŠ¶å›¾æœ‰æ•ˆ
+        barMinAngle: 0,
+        // cursor: null,
+
+        large: false,
+        largeThreshold: 400,
+        progressive: 3e3,
+        progressiveChunkMode: 'mod',
+
+        // barMaxWidth: null,
+        // é»˜è®¤è‡ªé€‚åº”
+        // barWidth: null,
+        // æŸ±é—´è·ç¦»ï¼Œé»˜è®¤ä¸ºæŸ±å½¢å®½åº¦çš„30%ï¼Œå¯è®¾å›ºå®šå€¼
+        // barGap: '30%',
+        // ç±»ç›®é—´æŸ±å½¢è·ç¦»ï¼Œé»˜è®¤ä¸ºç±»ç›®é—´è·çš„20%ï¼Œå¯è®¾å›ºå®šå€¼
+        // barCategoryGap: '20%',
+        // label: {
+        //      show: false
+        // },
+        itemStyle: {},
+        emphasis: {}
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+BaseBarSeries.extend({
+
+    type: 'series.bar',
+
+    dependencies: ['grid', 'polar'],
+
+    brushSelector: 'rect',
+
+    /**
+     * @override
+     */
+    getProgressive: function () {
+        // Do not support progressive in normal mode.
+        return this.get('large')
+            ? this.get('progressive')
+            : false;
+    },
+
+    /**
+     * @override
+     */
+    getProgressiveThreshold: function () {
+        // Do not support progressive in normal mode.
+        var progressiveThreshold = this.get('progressiveThreshold');
+        var largeThreshold = this.get('largeThreshold');
+        if (largeThreshold > progressiveThreshold) {
+            progressiveThreshold = largeThreshold;
+        }
+        return progressiveThreshold;
+    }
+
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+function setLabel(
+    normalStyle, hoverStyle, itemModel, color, seriesModel, dataIndex, labelPositionOutside
+) {
+    var labelModel = itemModel.getModel('label');
+    var hoverLabelModel = itemModel.getModel('emphasis.label');
+
+    setLabelStyle(
+        normalStyle, hoverStyle, labelModel, hoverLabelModel,
+        {
+            labelFetcher: seriesModel,
+            labelDataIndex: dataIndex,
+            defaultText: getDefaultLabel(seriesModel.getData(), dataIndex),
+            isRectText: true,
+            autoColor: color
+        }
+    );
+
+    fixPosition(normalStyle);
+    fixPosition(hoverStyle);
+}
+
+function fixPosition(style, labelPositionOutside) {
+    if (style.textPosition === 'outside') {
+        style.textPosition = labelPositionOutside;
+    }
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var getBarItemStyle = makeStyleMapper(
+    [
+        ['fill', 'color'],
+        ['stroke', 'borderColor'],
+        ['lineWidth', 'borderWidth'],
+        // Compatitable with 2
+        ['stroke', 'barBorderColor'],
+        ['lineWidth', 'barBorderWidth'],
+        ['opacity'],
+        ['shadowBlur'],
+        ['shadowOffsetX'],
+        ['shadowOffsetY'],
+        ['shadowColor']
+    ]
+);
+
+var barItemStyle = {
+    getBarItemStyle: function (excludes) {
+        var style = getBarItemStyle(this, excludes);
+        if (this.getBorderLineDash) {
+            var lineDash = this.getBorderLineDash();
+            lineDash && (style.lineDash = lineDash);
+        }
+        return style;
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var BAR_BORDER_WIDTH_QUERY = ['itemStyle', 'barBorderWidth'];
+
+// FIXME
+// Just for compatible with ec2.
+extend(Model.prototype, barItemStyle);
+
+extendChartView({
+
+    type: 'bar',
+
+    render: function (seriesModel, ecModel, api) {
+        this._updateDrawMode(seriesModel);
+
+        var coordinateSystemType = seriesModel.get('coordinateSystem');
+
+        if (coordinateSystemType === 'cartesian2d'
+            || coordinateSystemType === 'polar'
+        ) {
+            this._isLargeDraw
+                ? this._renderLarge(seriesModel, ecModel, api)
+                : this._renderNormal(seriesModel, ecModel, api);
+        }
+        else if (__DEV__) {
+            console.warn('Only cartesian2d and polar supported for bar.');
+        }
+
+        return this.group;
+    },
+
+    incrementalPrepareRender: function (seriesModel, ecModel, api) {
+        this._clear();
+        this._updateDrawMode(seriesModel);
+    },
+
+    incrementalRender: function (params, seriesModel, ecModel, api) {
+        // Do not support progressive in normal mode.
+        this._incrementalRenderLarge(params, seriesModel);
+    },
+
+    _updateDrawMode: function (seriesModel) {
+        var isLargeDraw = seriesModel.pipelineContext.large;
+        if (this._isLargeDraw == null || isLargeDraw ^ this._isLargeDraw) {
+            this._isLargeDraw = isLargeDraw;
+            this._clear();
+        }
+    },
+
+    _renderNormal: function (seriesModel, ecModel, api) {
+        var group = this.group;
+        var data = seriesModel.getData();
+        var oldData = this._data;
+
+        var coord = seriesModel.coordinateSystem;
+        var baseAxis = coord.getBaseAxis();
+        var isHorizontalOrRadial;
+
+        if (coord.type === 'cartesian2d') {
+            isHorizontalOrRadial = baseAxis.isHorizontal();
+        }
+        else if (coord.type === 'polar') {
+            isHorizontalOrRadial = baseAxis.dim === 'angle';
+        }
+
+        var animationModel = seriesModel.isAnimationEnabled() ? seriesModel : null;
+
+        data.diff(oldData)
+            .add(function (dataIndex) {
+                if (!data.hasValue(dataIndex)) {
+                    return;
+                }
+
+                var itemModel = data.getItemModel(dataIndex);
+                var layout = getLayout[coord.type](data, dataIndex, itemModel);
+                var el = elementCreator[coord.type](
+                    data, dataIndex, itemModel, layout, isHorizontalOrRadial, animationModel
+                );
+                data.setItemGraphicEl(dataIndex, el);
+                group.add(el);
+
+                updateStyle(
+                    el, data, dataIndex, itemModel, layout,
+                    seriesModel, isHorizontalOrRadial, coord.type === 'polar'
+                );
+            })
+            .update(function (newIndex, oldIndex) {
+                var el = oldData.getItemGraphicEl(oldIndex);
+
+                if (!data.hasValue(newIndex)) {
+                    group.remove(el);
+                    return;
+                }
+
+                var itemModel = data.getItemModel(newIndex);
+                var layout = getLayout[coord.type](data, newIndex, itemModel);
+
+                if (el) {
+                    updateProps(el, {shape: layout}, animationModel, newIndex);
+                }
+                else {
+                    el = elementCreator[coord.type](
+                        data, newIndex, itemModel, layout, isHorizontalOrRadial, animationModel, true
+                    );
+                }
+
+                data.setItemGraphicEl(newIndex, el);
+                // Add back
+                group.add(el);
+
+                updateStyle(
+                    el, data, newIndex, itemModel, layout,
+                    seriesModel, isHorizontalOrRadial, coord.type === 'polar'
+                );
+            })
+            .remove(function (dataIndex) {
+                var el = oldData.getItemGraphicEl(dataIndex);
+                if (coord.type === 'cartesian2d') {
+                    el && removeRect(dataIndex, animationModel, el);
+                }
+                else {
+                    el && removeSector(dataIndex, animationModel, el);
+                }
+            })
+            .execute();
+
+        this._data = data;
+    },
+
+    _renderLarge: function (seriesModel, ecModel, api) {
+        this._clear();
+        createLarge(seriesModel, this.group);
+    },
+
+    _incrementalRenderLarge: function (params, seriesModel) {
+        createLarge(seriesModel, this.group, true);
+    },
+
+    dispose: noop,
+
+    remove: function (ecModel) {
+        this._clear(ecModel);
+    },
+
+    _clear: function (ecModel) {
+        var group = this.group;
+        var data = this._data;
+        if (ecModel && ecModel.get('animation') && data && !this._isLargeDraw) {
+            data.eachItemGraphicEl(function (el) {
+                if (el.type === 'sector') {
+                    removeSector(el.dataIndex, ecModel, el);
+                }
+                else {
+                    removeRect(el.dataIndex, ecModel, el);
+                }
+            });
+        }
+        else {
+            group.removeAll();
+        }
+        this._data = null;
+    }
+
+});
+
+var elementCreator = {
+
+    cartesian2d: function (
+        data, dataIndex, itemModel, layout, isHorizontal,
+        animationModel, isUpdate
+    ) {
+        var rect = new Rect({shape: extend({}, layout)});
+
+        // Animation
+        if (animationModel) {
+            var rectShape = rect.shape;
+            var animateProperty = isHorizontal ? 'height' : 'width';
+            var animateTarget = {};
+            rectShape[animateProperty] = 0;
+            animateTarget[animateProperty] = layout[animateProperty];
+            graphic[isUpdate ? 'updateProps' : 'initProps'](rect, {
+                shape: animateTarget
+            }, animationModel, dataIndex);
+        }
+
+        return rect;
+    },
+
+    polar: function (
+        data, dataIndex, itemModel, layout, isRadial,
+        animationModel, isUpdate
+    ) {
+        // Keep the same logic with bar in catesion: use end value to control
+        // direction. Notice that if clockwise is true (by default), the sector
+        // will always draw clockwisely, no matter whether endAngle is greater
+        // or less than startAngle.
+        var clockwise = layout.startAngle < layout.endAngle;
+        var sector = new Sector({
+            shape: defaults({clockwise: clockwise}, layout)
+        });
+
+        // Animation
+        if (animationModel) {
+            var sectorShape = sector.shape;
+            var animateProperty = isRadial ? 'r' : 'endAngle';
+            var animateTarget = {};
+            sectorShape[animateProperty] = isRadial ? 0 : layout.startAngle;
+            animateTarget[animateProperty] = layout[animateProperty];
+            graphic[isUpdate ? 'updateProps' : 'initProps'](sector, {
+                shape: animateTarget
+            }, animationModel, dataIndex);
+        }
+
+        return sector;
+    }
+};
+
+function removeRect(dataIndex, animationModel, el) {
+    // Not show text when animating
+    el.style.text = null;
+    updateProps(el, {
+        shape: {
+            width: 0
+        }
+    }, animationModel, dataIndex, function () {
+        el.parent && el.parent.remove(el);
+    });
+}
+
+function removeSector(dataIndex, animationModel, el) {
+    // Not show text when animating
+    el.style.text = null;
+    updateProps(el, {
+        shape: {
+            r: el.shape.r0
+        }
+    }, animationModel, dataIndex, function () {
+        el.parent && el.parent.remove(el);
+    });
+}
+
+var getLayout = {
+    cartesian2d: function (data, dataIndex, itemModel) {
+        var layout = data.getItemLayout(dataIndex);
+        var fixedLineWidth = getLineWidth(itemModel, layout);
+
+        // fix layout with lineWidth
+        var signX = layout.width > 0 ? 1 : -1;
+        var signY = layout.height > 0 ? 1 : -1;
+        return {
+            x: layout.x + signX * fixedLineWidth / 2,
+            y: layout.y + signY * fixedLineWidth / 2,
+            width: layout.width - signX * fixedLineWidth,
+            height: layout.height - signY * fixedLineWidth
+        };
+    },
+
+    polar: function (data, dataIndex, itemModel) {
+        var layout = data.getItemLayout(dataIndex);
+        return {
+            cx: layout.cx,
+            cy: layout.cy,
+            r0: layout.r0,
+            r: layout.r,
+            startAngle: layout.startAngle,
+            endAngle: layout.endAngle
+        };
+    }
+};
+
+function updateStyle(
+    el, data, dataIndex, itemModel, layout, seriesModel, isHorizontal, isPolar
+) {
+    var color = data.getItemVisual(dataIndex, 'color');
+    var opacity = data.getItemVisual(dataIndex, 'opacity');
+    var itemStyleModel = itemModel.getModel('itemStyle');
+    var hoverStyle = itemModel.getModel('emphasis.itemStyle').getBarItemStyle();
+
+    if (!isPolar) {
+        el.setShape('r', itemStyleModel.get('barBorderRadius') || 0);
+    }
+
+    el.useStyle(defaults(
+        {
+            fill: color,
+            opacity: opacity
+        },
+        itemStyleModel.getBarItemStyle()
+    ));
+
+    var cursorStyle = itemModel.getShallow('cursor');
+    cursorStyle && el.attr('cursor', cursorStyle);
+
+    var labelPositionOutside = isHorizontal
+        ? (layout.height > 0 ? 'bottom' : 'top')
+        : (layout.width > 0 ? 'left' : 'right');
+
+    if (!isPolar) {
+        setLabel(
+            el.style, hoverStyle, itemModel, color,
+            seriesModel, dataIndex, labelPositionOutside
+        );
+    }
+
+    setHoverStyle(el, hoverStyle);
+}
+
+// In case width or height are too small.
+function getLineWidth(itemModel, rawLayout) {
+    var lineWidth = itemModel.get(BAR_BORDER_WIDTH_QUERY) || 0;
+    return Math.min(lineWidth, Math.abs(rawLayout.width), Math.abs(rawLayout.height));
+}
+
+
+var LargePath = Path.extend({
+
+    type: 'largeBar',
+
+    shape: {points: []},
+
+    buildPath: function (ctx, shape) {
+        // Drawing lines is more efficient than drawing
+        // a whole line or drawing rects.
+        var points = shape.points;
+        var startPoint = this.__startPoint;
+        var valueIdx = this.__valueIdx;
+
+        for (var i = 0; i < points.length; i += 2) {
+            startPoint[this.__valueIdx] = points[i + valueIdx];
+            ctx.moveTo(startPoint[0], startPoint[1]);
+            ctx.lineTo(points[i], points[i + 1]);
+        }
+    }
+});
+
+function createLarge(seriesModel, group, incremental) {
+    // TODO support polar
+    var data = seriesModel.getData();
+    var startPoint = [];
+    var valueIdx = data.getLayout('valueAxisHorizontal') ? 1 : 0;
+    startPoint[1 - valueIdx] = data.getLayout('valueAxisStart');
+
+    var el = new LargePath({
+        shape: {points: data.getLayout('largePoints')},
+        incremental: !!incremental,
+        __startPoint: startPoint,
+        __valueIdx: valueIdx
+    });
+    group.add(el);
+    setLargeStyle(el, seriesModel, data);
+}
+
+function setLargeStyle(el, seriesModel, data) {
+    var borderColor = data.getVisual('borderColor') || data.getVisual('color');
+    var itemStyle = seriesModel.getModel('itemStyle').getItemStyle(['color', 'borderColor']);
+
+    el.useStyle(itemStyle);
+    el.style.fill = null;
+    el.style.stroke = borderColor;
+    el.style.lineWidth = data.getLayout('barWidth');
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// In case developer forget to include grid component
+registerLayout(curry(layout, 'bar'));
+// Should after normal bar layout, otherwise it is blocked by normal bar layout.
+registerLayout(largeLayout);
+
+registerVisual({
+    seriesType: 'bar',
+    reset: function (seriesModel) {
+        // Visual coding for legend
+        seriesModel.getData().setVisual('legendSymbol', 'roundRect');
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * [Usage]:
+ * (1)
+ * createListSimply(seriesModel, ['value']);
+ * (2)
+ * createListSimply(seriesModel, {
+ *     coordDimensions: ['value'],
+ *     dimensionsCount: 5
+ * });
+ *
+ * @param {module:echarts/model/Series} seriesModel
+ * @param {Object|Array.<string|Object>} opt opt or coordDimensions
+ *        The options in opt, see `echarts/data/helper/createDimensions`
+ * @param {Array.<string>} [nameList]
+ * @return {module:echarts/data/List}
+ */
+var createListSimply = function (seriesModel, opt, nameList) {
+    opt = isArray(opt) && {coordDimensions: opt} || extend({}, opt);
+
+    var source = seriesModel.getSource();
+
+    var dimensionsInfo = createDimensions(source, opt);
+
+    var list = new List(dimensionsInfo, seriesModel);
+    list.initData(source, nameList);
+
+    return list;
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Data selectable mixin for chart series.
+ * To eanble data select, option of series must have `selectedMode`.
+ * And each data item will use `selected` to toggle itself selected status
+ */
+
+var selectableMixin = {
+
+    /**
+     * @param {Array.<Object>} targetList [{name, value, selected}, ...]
+     *        If targetList is an array, it should like [{name: ..., value: ...}, ...].
+     *        If targetList is a "List", it must have coordDim: 'value' dimension and name.
+     */
+    updateSelectedMap: function (targetList) {
+        this._targetList = isArray(targetList) ? targetList.slice() : [];
+
+        this._selectTargetMap = reduce(targetList || [], function (targetMap, target) {
+            targetMap.set(target.name, target);
+            return targetMap;
+        }, createHashMap());
+    },
+
+    /**
+     * Either name or id should be passed as input here.
+     * If both of them are defined, id is used.
+     *
+     * @param {string|undefined} name name of data
+     * @param {number|undefined} id dataIndex of data
+     */
+    // PENGING If selectedMode is null ?
+    select: function (name, id) {
+        var target = id != null
+            ? this._targetList[id]
+            : this._selectTargetMap.get(name);
+        var selectedMode = this.get('selectedMode');
+        if (selectedMode === 'single') {
+            this._selectTargetMap.each(function (target) {
+                target.selected = false;
+            });
+        }
+        target && (target.selected = true);
+    },
+
+    /**
+     * Either name or id should be passed as input here.
+     * If both of them are defined, id is used.
+     *
+     * @param {string|undefined} name name of data
+     * @param {number|undefined} id dataIndex of data
+     */
+    unSelect: function (name, id) {
+        var target = id != null
+            ? this._targetList[id]
+            : this._selectTargetMap.get(name);
+        // var selectedMode = this.get('selectedMode');
+        // selectedMode !== 'single' && target && (target.selected = false);
+        target && (target.selected = false);
+    },
+
+    /**
+     * Either name or id should be passed as input here.
+     * If both of them are defined, id is used.
+     *
+     * @param {string|undefined} name name of data
+     * @param {number|undefined} id dataIndex of data
+     */
+    toggleSelected: function (name, id) {
+        var target = id != null
+            ? this._targetList[id]
+            : this._selectTargetMap.get(name);
+        if (target != null) {
+            this[target.selected ? 'unSelect' : 'select'](name, id);
+            return target.selected;
+        }
+    },
+
+    /**
+     * Either name or id should be passed as input here.
+     * If both of them are defined, id is used.
+     *
+     * @param {string|undefined} name name of data
+     * @param {number|undefined} id dataIndex of data
+     */
+    isSelected: function (name, id) {
+        var target = id != null
+            ? this._targetList[id]
+            : this._selectTargetMap.get(name);
+        return target && target.selected;
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var PieSeries = extendSeriesModel({
+
+    type: 'series.pie',
+
+    // Overwrite
+    init: function (option) {
+        PieSeries.superApply(this, 'init', arguments);
+
+        // Enable legend selection for each data item
+        // Use a function instead of direct access because data reference may changed
+        this.legendDataProvider = function () {
+            return this.getRawData();
+        };
+
+        this.updateSelectedMap(this._createSelectableList());
+
+        this._defaultLabelLine(option);
+    },
+
+    // Overwrite
+    mergeOption: function (newOption) {
+        PieSeries.superCall(this, 'mergeOption', newOption);
+
+        this.updateSelectedMap(this._createSelectableList());
+    },
+
+    getInitialData: function (option, ecModel) {
+        return createListSimply(this, ['value']);
+    },
+
+    _createSelectableList: function () {
+        var data = this.getRawData();
+        var valueDim = data.mapDimension('value');
+        var targetList = [];
+        for (var i = 0, len = data.count(); i < len; i++) {
+            targetList.push({
+                name: data.getName(i),
+                value: data.get(valueDim, i),
+                selected: retrieveRawAttr(data, i, 'selected')
+            });
+        }
+        return targetList;
+    },
+
+    // Overwrite
+    getDataParams: function (dataIndex) {
+        var data = this.getData();
+        var params = PieSeries.superCall(this, 'getDataParams', dataIndex);
+        // FIXME toFixed?
+
+        var valueList = [];
+        data.each(data.mapDimension('value'), function (value) {
+            valueList.push(value);
+        });
+
+        params.percent = getPercentWithPrecision(
+            valueList,
+            dataIndex,
+            data.hostModel.get('percentPrecision')
+        );
+
+        params.$vars.push('percent');
+        return params;
+    },
+
+    _defaultLabelLine: function (option) {
+        // Extend labelLine emphasis
+        defaultEmphasis(option, 'labelLine', ['show']);
+
+        var labelLineNormalOpt = option.labelLine;
+        var labelLineEmphasisOpt = option.emphasis.labelLine;
+        // Not show label line if `label.normal.show = false`
+        labelLineNormalOpt.show = labelLineNormalOpt.show
+            && option.label.show;
+        labelLineEmphasisOpt.show = labelLineEmphasisOpt.show
+            && option.emphasis.label.show;
+    },
+
+    defaultOption: {
+        zlevel: 0,
+        z: 2,
+        legendHoverLink: true,
+
+        hoverAnimation: true,
+        // é»˜è®¤å…¨å±€å±…ä¸
+        center: ['50%', '50%'],
+        radius: [0, '75%'],
+        // é»˜è®¤é¡ºæ—¶é’ˆ
+        clockwise: true,
+        startAngle: 90,
+        // æœ€å°è§’åº¦æ”¹ä¸º0
+        minAngle: 0,
+        // é€‰ä¸æ—¶æ‰‡åŒºåç§»é‡
+        selectedOffset: 10,
+        // é«˜äº®æ‰‡åŒºåç§»é‡
+        hoverOffset: 10,
+
+        // If use strategy to avoid label overlapping
+        avoidLabelOverlap: true,
+        // é€‰æ‹©æ¨¡å¼ï¼Œé»˜è®¤å…³é—ï¼Œå¯é€‰singleï¼Œmultiple
+        // selectedMode: false,
+        // å—ä¸æ ¼å°”çŽ«ç‘°å›¾æ¨¡å¼ï¼Œ'radius'ï¼ˆåŠå¾„ï¼‰ | 'area'ï¼ˆé¢ç§¯ï¼‰
+        // roseType: null,
+
+        percentPrecision: 2,
+
+        // If still show when all data zero.
+        stillShowZeroSum: true,
+
+        // cursor: null,
+
+        label: {
+            // If rotate around circle
+            rotate: false,
+            show: true,
+            // 'outer', 'inside', 'center'
+            position: 'outer'
+            // formatter: æ ‡ç¾æ–‡æœ¬æ ¼å¼å™¨ï¼ŒåŒTooltip.formatterï¼Œä¸æ”¯æŒå¼‚æ¥å›žè°ƒ
+            // é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
+            // distance: å½“positionä¸ºinneræ—¶æœ‰æ•ˆï¼Œä¸ºlabelä½ç½®åˆ°åœ†å¿ƒçš„è·ç¦»ä¸Žåœ†åŠå¾„(çŽ¯çŠ¶å›¾ä¸ºå†…å¤–åŠå¾„å’Œ)çš„æ¯”ä¾‹ç³»æ•°
+        },
+        // Enabled when label.normal.position is 'outer'
+        labelLine: {
+            show: true,
+            // å¼•å¯¼çº¿ä¸¤æ®µä¸çš„ç¬¬ä¸€æ®µé•¿åº¦
+            length: 15,
+            // å¼•å¯¼çº¿ä¸¤æ®µä¸çš„ç¬¬äºŒæ®µé•¿åº¦
+            length2: 15,
+            smooth: false,
+            lineStyle: {
+                // color: å„å¼‚,
+                width: 1,
+                type: 'solid'
+            }
+        },
+        itemStyle: {
+            borderWidth: 1
+        },
+
+        // Animation type canbe expansion, scale
+        animationType: 'expansion',
+
+        animationEasing: 'cubicOut'
+    }
+});
+
+mixin(PieSeries, selectableMixin);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @param {module:echarts/model/Series} seriesModel
+ * @param {boolean} hasAnimation
+ * @inner
+ */
+function updateDataSelected(uid, seriesModel, hasAnimation, api) {
+    var data = seriesModel.getData();
+    var dataIndex = this.dataIndex;
+    var name = data.getName(dataIndex);
+    var selectedOffset = seriesModel.get('selectedOffset');
+
+    api.dispatchAction({
+        type: 'pieToggleSelect',
+        from: uid,
+        name: name,
+        seriesId: seriesModel.id
+    });
+
+    data.each(function (idx) {
+        toggleItemSelected(
+            data.getItemGraphicEl(idx),
+            data.getItemLayout(idx),
+            seriesModel.isSelected(data.getName(idx)),
+            selectedOffset,
+            hasAnimation
+        );
+    });
+}
+
+/**
+ * @param {module:zrender/graphic/Sector} el
+ * @param {Object} layout
+ * @param {boolean} isSelected
+ * @param {number} selectedOffset
+ * @param {boolean} hasAnimation
+ * @inner
+ */
+function toggleItemSelected(el, layout, isSelected, selectedOffset, hasAnimation) {
+    var midAngle = (layout.startAngle + layout.endAngle) / 2;
+
+    var dx = Math.cos(midAngle);
+    var dy = Math.sin(midAngle);
+
+    var offset = isSelected ? selectedOffset : 0;
+    var position = [dx * offset, dy * offset];
+
+    hasAnimation
+        // animateTo will stop revious animation like update transition
+        ? el.animate()
+            .when(200, {
+                position: position
+            })
+            .start('bounceOut')
+        : el.attr('position', position);
+}
+
+/**
+ * Piece of pie including Sector, Label, LabelLine
+ * @constructor
+ * @extends {module:zrender/graphic/Group}
+ */
+function PiePiece(data, idx) {
+
+    Group.call(this);
+
+    var sector = new Sector({
+        z2: 2
+    });
+    var polyline = new Polyline();
+    var text = new Text();
+    this.add(sector);
+    this.add(polyline);
+    this.add(text);
+
+    this.updateData(data, idx, true);
+
+    // Hover to change label and labelLine
+    function onEmphasis() {
+        polyline.ignore = polyline.hoverIgnore;
+        text.ignore = text.hoverIgnore;
+    }
+    function onNormal() {
+        polyline.ignore = polyline.normalIgnore;
+        text.ignore = text.normalIgnore;
+    }
+    this.on('emphasis', onEmphasis)
+        .on('normal', onNormal)
+        .on('mouseover', onEmphasis)
+        .on('mouseout', onNormal);
+}
+
+var piePieceProto = PiePiece.prototype;
+
+piePieceProto.updateData = function (data, idx, firstCreate) {
+
+    var sector = this.childAt(0);
+
+    var seriesModel = data.hostModel;
+    var itemModel = data.getItemModel(idx);
+    var layout = data.getItemLayout(idx);
+    var sectorShape = extend({}, layout);
+    sectorShape.label = null;
+
+    if (firstCreate) {
+        sector.setShape(sectorShape);
+
+        var animationType = seriesModel.getShallow('animationType');
+        if (animationType === 'scale') {
+            sector.shape.r = layout.r0;
+            initProps(sector, {
+                shape: {
+                    r: layout.r
+                }
+            }, seriesModel, idx);
+        }
+        // Expansion
+        else {
+            sector.shape.endAngle = layout.startAngle;
+            updateProps(sector, {
+                shape: {
+                    endAngle: layout.endAngle
+                }
+            }, seriesModel, idx);
+        }
+
+    }
+    else {
+        updateProps(sector, {
+            shape: sectorShape
+        }, seriesModel, idx);
+    }
+
+    // Update common style
+    var visualColor = data.getItemVisual(idx, 'color');
+
+    sector.useStyle(
+        defaults(
+            {
+                lineJoin: 'bevel',
+                fill: visualColor
+            },
+            itemModel.getModel('itemStyle').getItemStyle()
+        )
+    );
+    sector.hoverStyle = itemModel.getModel('emphasis.itemStyle').getItemStyle();
+
+    var cursorStyle = itemModel.getShallow('cursor');
+    cursorStyle && sector.attr('cursor', cursorStyle);
+
+    // Toggle selected
+    toggleItemSelected(
+        this,
+        data.getItemLayout(idx),
+        seriesModel.isSelected(null, idx),
+        seriesModel.get('selectedOffset'),
+        seriesModel.get('animation')
+    );
+
+    function onEmphasis() {
+        // Sector may has animation of updating data. Force to move to the last frame
+        // Or it may stopped on the wrong shape
+        sector.stopAnimation(true);
+        sector.animateTo({
+            shape: {
+                r: layout.r + seriesModel.get('hoverOffset')
+            }
+        }, 300, 'elasticOut');
+    }
+    function onNormal() {
+        sector.stopAnimation(true);
+        sector.animateTo({
+            shape: {
+                r: layout.r
+            }
+        }, 300, 'elasticOut');
+    }
+    sector.off('mouseover').off('mouseout').off('emphasis').off('normal');
+    if (itemModel.get('hoverAnimation') && seriesModel.isAnimationEnabled()) {
+        sector
+            .on('mouseover', onEmphasis)
+            .on('mouseout', onNormal)
+            .on('emphasis', onEmphasis)
+            .on('normal', onNormal);
+    }
+
+    this._updateLabel(data, idx);
+
+    setHoverStyle(this);
+};
+
+piePieceProto._updateLabel = function (data, idx) {
+
+    var labelLine = this.childAt(1);
+    var labelText = this.childAt(2);
+
+    var seriesModel = data.hostModel;
+    var itemModel = data.getItemModel(idx);
+    var layout = data.getItemLayout(idx);
+    var labelLayout = layout.label;
+    var visualColor = data.getItemVisual(idx, 'color');
+
+    updateProps(labelLine, {
+        shape: {
+            points: labelLayout.linePoints || [
+                [labelLayout.x, labelLayout.y], [labelLayout.x, labelLayout.y], [labelLayout.x, labelLayout.y]
+            ]
+        }
+    }, seriesModel, idx);
+
+    updateProps(labelText, {
+        style: {
+            x: labelLayout.x,
+            y: labelLayout.y
+        }
+    }, seriesModel, idx);
+    labelText.attr({
+        rotation: labelLayout.rotation,
+        origin: [labelLayout.x, labelLayout.y],
+        z2: 10
+    });
+
+    var labelModel = itemModel.getModel('label');
+    var labelHoverModel = itemModel.getModel('emphasis.label');
+    var labelLineModel = itemModel.getModel('labelLine');
+    var labelLineHoverModel = itemModel.getModel('emphasis.labelLine');
+    var visualColor = data.getItemVisual(idx, 'color');
+
+    setLabelStyle(
+        labelText.style, labelText.hoverStyle = {}, labelModel, labelHoverModel,
+        {
+            labelFetcher: data.hostModel,
+            labelDataIndex: idx,
+            defaultText: data.getName(idx),
+            autoColor: visualColor,
+            useInsideStyle: !!labelLayout.inside
+        },
+        {
+            textAlign: labelLayout.textAlign,
+            textVerticalAlign: labelLayout.verticalAlign,
+            opacity: data.getItemVisual(idx, 'opacity')
+        }
+    );
+
+    labelText.ignore = labelText.normalIgnore = !labelModel.get('show');
+    labelText.hoverIgnore = !labelHoverModel.get('show');
+
+    labelLine.ignore = labelLine.normalIgnore = !labelLineModel.get('show');
+    labelLine.hoverIgnore = !labelLineHoverModel.get('show');
+
+    // Default use item visual color
+    labelLine.setStyle({
+        stroke: visualColor,
+        opacity: data.getItemVisual(idx, 'opacity')
+    });
+    labelLine.setStyle(labelLineModel.getModel('lineStyle').getLineStyle());
+
+    labelLine.hoverStyle = labelLineHoverModel.getModel('lineStyle').getLineStyle();
+
+    var smooth = labelLineModel.get('smooth');
+    if (smooth && smooth === true) {
+        smooth = 0.4;
+    }
+    labelLine.setShape({
+        smooth: smooth
+    });
+};
+
+inherits(PiePiece, Group);
+
+
+// Pie view
+var PieView = Chart.extend({
+
+    type: 'pie',
+
+    init: function () {
+        var sectorGroup = new Group();
+        this._sectorGroup = sectorGroup;
+    },
+
+    render: function (seriesModel, ecModel, api, payload) {
+        if (payload && (payload.from === this.uid)) {
+            return;
+        }
+
+        var data = seriesModel.getData();
+        var oldData = this._data;
+        var group = this.group;
+
+        var hasAnimation = ecModel.get('animation');
+        var isFirstRender = !oldData;
+        var animationType = seriesModel.get('animationType');
+
+        var onSectorClick = curry(
+            updateDataSelected, this.uid, seriesModel, hasAnimation, api
+        );
+
+        var selectedMode = seriesModel.get('selectedMode');
+
+        data.diff(oldData)
+            .add(function (idx) {
+                var piePiece = new PiePiece(data, idx);
+                // Default expansion animation
+                if (isFirstRender && animationType !== 'scale') {
+                    piePiece.eachChild(function (child) {
+                        child.stopAnimation(true);
+                    });
+                }
+
+                selectedMode && piePiece.on('click', onSectorClick);
+
+                data.setItemGraphicEl(idx, piePiece);
+
+                group.add(piePiece);
+            })
+            .update(function (newIdx, oldIdx) {
+                var piePiece = oldData.getItemGraphicEl(oldIdx);
+
+                piePiece.updateData(data, newIdx);
+
+                piePiece.off('click');
+                selectedMode && piePiece.on('click', onSectorClick);
+                group.add(piePiece);
+                data.setItemGraphicEl(newIdx, piePiece);
+            })
+            .remove(function (idx) {
+                var piePiece = oldData.getItemGraphicEl(idx);
+                group.remove(piePiece);
+            })
+            .execute();
+
+        if (
+            hasAnimation && isFirstRender && data.count() > 0
+            // Default expansion animation
+            && animationType !== 'scale'
+        ) {
+            var shape = data.getItemLayout(0);
+            var r = Math.max(api.getWidth(), api.getHeight()) / 2;
+
+            var removeClipPath = bind(group.removeClipPath, group);
+            group.setClipPath(this._createClipPath(
+                shape.cx, shape.cy, r, shape.startAngle, shape.clockwise, removeClipPath, seriesModel
+            ));
+        }
+
+        this._data = data;
+    },
+
+    dispose: function () {},
+
+    _createClipPath: function (
+        cx, cy, r, startAngle, clockwise, cb, seriesModel
+    ) {
+        var clipPath = new Sector({
+            shape: {
+                cx: cx,
+                cy: cy,
+                r0: 0,
+                r: r,
+                startAngle: startAngle,
+                endAngle: startAngle,
+                clockwise: clockwise
+            }
+        });
+
+        initProps(clipPath, {
+            shape: {
+                endAngle: startAngle + (clockwise ? 1 : -1) * Math.PI * 2
+            }
+        }, seriesModel, cb);
+
+        return clipPath;
+    },
+
+    /**
+     * @implement
+     */
+    containPoint: function (point, seriesModel) {
+        var data = seriesModel.getData();
+        var itemLayout = data.getItemLayout(0);
+        if (itemLayout) {
+            var dx = point[0] - itemLayout.cx;
+            var dy = point[1] - itemLayout.cy;
+            var radius = Math.sqrt(dx * dx + dy * dy);
+            return radius <= itemLayout.r && radius >= itemLayout.r0;
+        }
+    }
+
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var createDataSelectAction = function (seriesType, actionInfos) {
+    each$1(actionInfos, function (actionInfo) {
+        actionInfo.update = 'updateView';
+        /**
+         * @payload
+         * @property {string} seriesName
+         * @property {string} name
+         */
+        registerAction(actionInfo, function (payload, ecModel) {
+            var selected = {};
+            ecModel.eachComponent(
+                {mainType: 'series', subType: seriesType, query: payload},
+                function (seriesModel) {
+                    if (seriesModel[actionInfo.method]) {
+                        seriesModel[actionInfo.method](
+                            payload.name,
+                            payload.dataIndex
+                        );
+                    }
+                    var data = seriesModel.getData();
+                    // Create selected map
+                    data.each(function (idx) {
+                        var name = data.getName(idx);
+                        selected[name] = seriesModel.isSelected(name)
+                            || false;
+                    });
+                }
+            );
+            return {
+                name: payload.name,
+                selected: selected
+            };
+        });
+    });
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// Pick color from palette for each data item.
+// Applicable for charts that require applying color palette
+// in data level (like pie, funnel, chord).
+var dataColor = function (seriesType) {
+    return {
+        getTargetSeries: function (ecModel) {
+            // Pie and funnel may use diferrent scope
+            var paletteScope = {};
+            var seiresModelMap = createHashMap();
+
+            ecModel.eachSeriesByType(seriesType, function (seriesModel) {
+                seriesModel.__paletteScope = paletteScope;
+                seiresModelMap.set(seriesModel.uid, seriesModel);
+            });
+
+            return seiresModelMap;
+        },
+        reset: function (seriesModel, ecModel) {
+            var dataAll = seriesModel.getRawData();
+            var idxMap = {};
+            var data = seriesModel.getData();
+
+            data.each(function (idx) {
+                var rawIdx = data.getRawIndex(idx);
+                idxMap[rawIdx] = idx;
+            });
+
+            dataAll.each(function (rawIdx) {
+                var filteredIdx = idxMap[rawIdx];
+
+                // If series.itemStyle.normal.color is a function. itemVisual may be encoded
+                var singleDataColor = filteredIdx != null
+                    && data.getItemVisual(filteredIdx, 'color', true);
+
+                if (!singleDataColor) {
+                    // FIXME Performance
+                    var itemModel = dataAll.getItemModel(rawIdx);
+
+                    var color = itemModel.get('itemStyle.color')
+                        || seriesModel.getColorFromPalette(
+                            dataAll.getName(rawIdx) || (rawIdx + ''), seriesModel.__paletteScope,
+                            dataAll.count()
+                        );
+                    // Legend may use the visual info in data before processed
+                    dataAll.setItemVisual(rawIdx, 'color', color);
+
+                    // Data is not filtered
+                    if (filteredIdx != null) {
+                        data.setItemVisual(filteredIdx, 'color', color);
+                    }
+                }
+                else {
+                    // Set data all color for legend
+                    dataAll.setItemVisual(rawIdx, 'color', singleDataColor);
+                }
+            });
+        }
+    };
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// FIXME emphasis label position is not same with normal label position
+
+function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight) {
+    list.sort(function (a, b) {
+        return a.y - b.y;
+    });
+
+    // åŽ‹
+    function shiftDown(start, end, delta, dir) {
+        for (var j = start; j < end; j++) {
+            list[j].y += delta;
+            if (j > start
+                && j + 1 < end
+                && list[j + 1].y > list[j].y + list[j].height
+            ) {
+                shiftUp(j, delta / 2);
+                return;
+            }
+        }
+
+        shiftUp(end - 1, delta / 2);
+    }
+
+    // å¼¹
+    function shiftUp(end, delta) {
+        for (var j = end; j >= 0; j--) {
+            list[j].y -= delta;
+            if (j > 0
+                && list[j].y > list[j - 1].y + list[j - 1].height
+            ) {
+                break;
+            }
+        }
+    }
+
+    function changeX(list, isDownList, cx, cy, r, dir) {
+        var lastDeltaX = dir > 0
+            ? isDownList                // å³ä¾§
+                ? Number.MAX_VALUE      // ä¸‹
+                : 0                     // ä¸Š
+            : isDownList                // å·¦ä¾§
+                ? Number.MAX_VALUE      // ä¸‹
+                : 0;                    // ä¸Š
+
+        for (var i = 0, l = list.length; i < l; i++) {
+            // Not change x for center label
+            if (list[i].position === 'center') {
+                continue;
+            }
+            var deltaY = Math.abs(list[i].y - cy);
+            var length = list[i].len;
+            var length2 = list[i].len2;
+            var deltaX = (deltaY < r + length)
+                ? Math.sqrt(
+                        (r + length + length2) * (r + length + length2)
+                        - deltaY * deltaY
+                    )
+                : Math.abs(list[i].x - cx);
+            if (isDownList && deltaX >= lastDeltaX) {
+                // å³ä¸‹ï¼Œå·¦ä¸‹
+                deltaX = lastDeltaX - 10;
+            }
+            if (!isDownList && deltaX <= lastDeltaX) {
+                // å³ä¸Šï¼Œå·¦ä¸Š
+                deltaX = lastDeltaX + 10;
+            }
+
+            list[i].x = cx + deltaX * dir;
+            lastDeltaX = deltaX;
+        }
+    }
+
+    var lastY = 0;
+    var delta;
+    var len = list.length;
+    var upList = [];
+    var downList = [];
+    for (var i = 0; i < len; i++) {
+        delta = list[i].y - lastY;
+        if (delta < 0) {
+            shiftDown(i, len, -delta, dir);
+        }
+        lastY = list[i].y + list[i].height;
+    }
+    if (viewHeight - lastY < 0) {
+        shiftUp(len - 1, lastY - viewHeight);
+    }
+    for (var i = 0; i < len; i++) {
+        if (list[i].y >= cy) {
+            downList.push(list[i]);
+        }
+        else {
+            upList.push(list[i]);
+        }
+    }
+    changeX(upList, false, cx, cy, r, dir);
+    changeX(downList, true, cx, cy, r, dir);
+}
+
+function avoidOverlap(labelLayoutList, cx, cy, r, viewWidth, viewHeight) {
+    var leftList = [];
+    var rightList = [];
+    for (var i = 0; i < labelLayoutList.length; i++) {
+        if (labelLayoutList[i].x < cx) {
+            leftList.push(labelLayoutList[i]);
+        }
+        else {
+            rightList.push(labelLayoutList[i]);
+        }
+    }
+
+    adjustSingleSide(rightList, cx, cy, r, 1, viewWidth, viewHeight);
+    adjustSingleSide(leftList, cx, cy, r, -1, viewWidth, viewHeight);
+
+    for (var i = 0; i < labelLayoutList.length; i++) {
+        var linePoints = labelLayoutList[i].linePoints;
+        if (linePoints) {
+            var dist = linePoints[1][0] - linePoints[2][0];
+            if (labelLayoutList[i].x < cx) {
+                linePoints[2][0] = labelLayoutList[i].x + 3;
+            }
+            else {
+                linePoints[2][0] = labelLayoutList[i].x - 3;
+            }
+            linePoints[1][1] = linePoints[2][1] = labelLayoutList[i].y;
+            linePoints[1][0] = linePoints[2][0] + dist;
+        }
+    }
+}
+
+var labelLayout = function (seriesModel, r, viewWidth, viewHeight) {
+    var data = seriesModel.getData();
+    var labelLayoutList = [];
+    var cx;
+    var cy;
+    var hasLabelRotate = false;
+
+    data.each(function (idx) {
+        var layout = data.getItemLayout(idx);
+
+        var itemModel = data.getItemModel(idx);
+        var labelModel = itemModel.getModel('label');
+        // Use position in normal or emphasis
+        var labelPosition = labelModel.get('position') || itemModel.get('emphasis.label.position');
+
+        var labelLineModel = itemModel.getModel('labelLine');
+        var labelLineLen = labelLineModel.get('length');
+        var labelLineLen2 = labelLineModel.get('length2');
+
+        var midAngle = (layout.startAngle + layout.endAngle) / 2;
+        var dx = Math.cos(midAngle);
+        var dy = Math.sin(midAngle);
+
+        var textX;
+        var textY;
+        var linePoints;
+        var textAlign;
+
+        cx = layout.cx;
+        cy = layout.cy;
+
+        var isLabelInside = labelPosition === 'inside' || labelPosition === 'inner';
+        if (labelPosition === 'center') {
+            textX = layout.cx;
+            textY = layout.cy;
+            textAlign = 'center';
+        }
+        else {
+            var x1 = (isLabelInside ? (layout.r + layout.r0) / 2 * dx : layout.r * dx) + cx;
+            var y1 = (isLabelInside ? (layout.r + layout.r0) / 2 * dy : layout.r * dy) + cy;
+
+            textX = x1 + dx * 3;
+            textY = y1 + dy * 3;
+
+            if (!isLabelInside) {
+                // For roseType
+                var x2 = x1 + dx * (labelLineLen + r - layout.r);
+                var y2 = y1 + dy * (labelLineLen + r - layout.r);
+                var x3 = x2 + ((dx < 0 ? -1 : 1) * labelLineLen2);
+                var y3 = y2;
+
+                textX = x3 + (dx < 0 ? -5 : 5);
+                textY = y3;
+                linePoints = [[x1, y1], [x2, y2], [x3, y3]];
+            }
+
+            textAlign = isLabelInside ? 'center' : (dx > 0 ? 'left' : 'right');
+        }
+        var font = labelModel.getFont();
+
+        var labelRotate = labelModel.get('rotate')
+            ? (dx < 0 ? -midAngle + Math.PI : -midAngle) : 0;
+        var text = seriesModel.getFormattedLabel(idx, 'normal')
+                    || data.getName(idx);
+        var textRect = getBoundingRect(
+            text, font, textAlign, 'top'
+        );
+        hasLabelRotate = !!labelRotate;
+        layout.label = {
+            x: textX,
+            y: textY,
+            position: labelPosition,
+            height: textRect.height,
+            len: labelLineLen,
+            len2: labelLineLen2,
+            linePoints: linePoints,
+            textAlign: textAlign,
+            verticalAlign: 'middle',
+            rotation: labelRotate,
+            inside: isLabelInside
+        };
+
+        // Not layout the inside label
+        if (!isLabelInside) {
+            labelLayoutList.push(layout.label);
+        }
+    });
+    if (!hasLabelRotate && seriesModel.get('avoidLabelOverlap')) {
+        avoidOverlap(labelLayoutList, cx, cy, r, viewWidth, viewHeight);
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+var PI2$4 = Math.PI * 2;
+var RADIAN = Math.PI / 180;
+
+var pieLayout = function (seriesType, ecModel, api, payload) {
+    ecModel.eachSeriesByType(seriesType, function (seriesModel) {
+        var data = seriesModel.getData();
+        var valueDim = data.mapDimension('value');
+
+        var center = seriesModel.get('center');
+        var radius = seriesModel.get('radius');
+
+        if (!isArray(radius)) {
+            radius = [0, radius];
+        }
+        if (!isArray(center)) {
+            center = [center, center];
+        }
+
+        var width = api.getWidth();
+        var height = api.getHeight();
+        var size = Math.min(width, height);
+        var cx = parsePercent$1(center[0], width);
+        var cy = parsePercent$1(center[1], height);
+        var r0 = parsePercent$1(radius[0], size / 2);
+        var r = parsePercent$1(radius[1], size / 2);
+
+        var startAngle = -seriesModel.get('startAngle') * RADIAN;
+
+        var minAngle = seriesModel.get('minAngle') * RADIAN;
+
+        var validDataCount = 0;
+        data.each(valueDim, function (value) {
+            !isNaN(value) && validDataCount++;
+        });
+
+        var sum = data.getSum(valueDim);
+        // Sum may be 0
+        var unitRadian = Math.PI / (sum || validDataCount) * 2;
+
+        var clockwise = seriesModel.get('clockwise');
+
+        var roseType = seriesModel.get('roseType');
+        var stillShowZeroSum = seriesModel.get('stillShowZeroSum');
+
+        // [0...max]
+        var extent = data.getDataExtent(valueDim);
+        extent[0] = 0;
+
+        // In the case some sector angle is smaller than minAngle
+        var restAngle = PI2$4;
+        var valueSumLargerThanMinAngle = 0;
+
+        var currentAngle = startAngle;
+        var dir = clockwise ? 1 : -1;
+
+        data.each(valueDim, function (value, idx) {
+            var angle;
+            if (isNaN(value)) {
+                data.setItemLayout(idx, {
+                    angle: NaN,
+                    startAngle: NaN,
+                    endAngle: NaN,
+                    clockwise: clockwise,
+                    cx: cx,
+                    cy: cy,
+                    r0: r0,
+                    r: roseType
+                        ? NaN
+                        : r
+                });
+                return;
+            }
+
+            // FIXME å…¼å®¹ 2.0 ä½†æ˜¯ roseType æ˜¯ area çš„æ—¶å€™æ‰æ˜¯è¿™æ ·ï¼Ÿ
+            if (roseType !== 'area') {
+                angle = (sum === 0 && stillShowZeroSum)
+                    ? unitRadian : (value * unitRadian);
+            }
+            else {
+                angle = PI2$4 / validDataCount;
+            }
+
+            if (angle < minAngle) {
+                angle = minAngle;
+                restAngle -= minAngle;
+            }
+            else {
+                valueSumLargerThanMinAngle += value;
+            }
+
+            var endAngle = currentAngle + dir * angle;
+            data.setItemLayout(idx, {
+                angle: angle,
+                startAngle: currentAngle,
+                endAngle: endAngle,
+                clockwise: clockwise,
+                cx: cx,
+                cy: cy,
+                r0: r0,
+                r: roseType
+                    ? linearMap(value, extent, [r0, r])
+                    : r
+            });
+
+            currentAngle = endAngle;
+        });
+
+        // Some sector is constrained by minAngle
+        // Rest sectors needs recalculate angle
+        if (restAngle < PI2$4 && validDataCount) {
+            // Average the angle if rest angle is not enough after all angles is
+            // Constrained by minAngle
+            if (restAngle <= 1e-3) {
+                var angle = PI2$4 / validDataCount;
+                data.each(valueDim, function (value, idx) {
+                    if (!isNaN(value)) {
+                        var layout = data.getItemLayout(idx);
+                        layout.angle = angle;
+                        layout.startAngle = startAngle + dir * idx * angle;
+                        layout.endAngle = startAngle + dir * (idx + 1) * angle;
+                    }
+                });
+            }
+            else {
+                unitRadian = restAngle / valueSumLargerThanMinAngle;
+                currentAngle = startAngle;
+                data.each(valueDim, function (value, idx) {
+                    if (!isNaN(value)) {
+                        var layout = data.getItemLayout(idx);
+                        var angle = layout.angle === minAngle
+                            ? minAngle : value * unitRadian;
+                        layout.startAngle = currentAngle;
+                        layout.endAngle = currentAngle + dir * angle;
+                        currentAngle += dir * angle;
+                    }
+                });
+            }
+        }
+
+        labelLayout(seriesModel, r, width, height);
+    });
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var dataFilter = function (seriesType) {
+    return {
+        seriesType: seriesType,
+        reset: function (seriesModel, ecModel) {
+            var legendModels = ecModel.findComponents({
+                mainType: 'legend'
+            });
+            if (!legendModels || !legendModels.length) {
+                return;
+            }
+            var data = seriesModel.getData();
+            data.filterSelf(function (idx) {
+                var name = data.getName(idx);
+                // If in any legend component the status is not selected.
+                for (var i = 0; i < legendModels.length; i++) {
+                    if (!legendModels[i].isSelected(name)) {
+                        return false;
+                    }
+                }
+                return true;
+            });
+        }
+    };
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+createDataSelectAction('pie', [{
+    type: 'pieToggleSelect',
+    event: 'pieselectchanged',
+    method: 'toggleSelected'
+}, {
+    type: 'pieSelect',
+    event: 'pieselected',
+    method: 'select'
+}, {
+    type: 'pieUnSelect',
+    event: 'pieunselected',
+    method: 'unSelect'
+}]);
+
+registerVisual(dataColor('pie'));
+registerLayout(curry(pieLayout, 'pie'));
+registerProcessor(dataFilter('pie'));
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+SeriesModel.extend({
+
+    type: 'series.scatter',
+
+    dependencies: ['grid', 'polar', 'geo', 'singleAxis', 'calendar'],
+
+    getInitialData: function (option, ecModel) {
+        return createListFromArray(this.getSource(), this);
+    },
+
+    brushSelector: 'point',
+
+    getProgressive: function () {
+        var progressive = this.option.progressive;
+        if (progressive == null) {
+            // PENDING
+            return this.option.large ? 5e3 : this.get('progressive');
+        }
+        return progressive;
+    },
+
+    getProgressiveThreshold: function () {
+        var progressiveThreshold = this.option.progressiveThreshold;
+        if (progressiveThreshold == null) {
+            // PENDING
+            return this.option.large ? 1e4 : this.get('progressiveThreshold');
+        }
+        return progressiveThreshold;
+    },
+
+    defaultOption: {
+        coordinateSystem: 'cartesian2d',
+        zlevel: 0,
+        z: 2,
+        legendHoverLink: true,
+
+        hoverAnimation: true,
+        // Cartesian coordinate system
+        // xAxisIndex: 0,
+        // yAxisIndex: 0,
+
+        // Polar coordinate system
+        // polarIndex: 0,
+
+        // Geo coordinate system
+        // geoIndex: 0,
+
+        // symbol: null,        // å›¾å½¢ç±»åž‹
+        symbolSize: 10,          // å›¾å½¢å¤§å°ï¼ŒåŠå®½ï¼ˆåŠå¾„ï¼‰å‚æ•°ï¼Œå½“å›¾å½¢ä¸ºæ–¹å‘æˆ–è±å½¢åˆ™æ€»å®½åº¦ä¸ºsymbolSize * 2
+        // symbolRotate: null,  // å›¾å½¢æ—‹è½¬æŽ§åˆ¶
+
+        large: false,
+        // Available when large is true
+        largeThreshold: 2000,
+        // cursor: null,
+
+        // label: {
+            // show: false
+            // distance: 5,
+            // formatter: æ ‡ç¾æ–‡æœ¬æ ¼å¼å™¨ï¼ŒåŒTooltip.formatterï¼Œä¸æ”¯æŒå¼‚æ¥å›žè°ƒ
+            // position: é»˜è®¤è‡ªé€‚åº”ï¼Œæ°´å¹³å¸ƒå±€ä¸º'top'ï¼Œåž‚ç›´å¸ƒå±€ä¸º'right'ï¼Œå¯é€‰ä¸º
+            //           'inside'|'left'|'right'|'top'|'bottom'
+            // é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
+        // },
+        itemStyle: {
+            opacity: 0.8
+            // color: å„å¼‚
+        }
+
+        // progressive: null
+    }
+
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// TODO Batch by color
+
+var BOOST_SIZE_THRESHOLD = 4;
+
+var LargeSymbolPath = extendShape({
+
+    shape: {
+        points: null
+    },
+
+    symbolProxy: null,
+
+    buildPath: function (path, shape) {
+        var points = shape.points;
+        var size = shape.size;
+
+        var symbolProxy = this.symbolProxy;
+        var symbolProxyShape = symbolProxy.shape;
+        var ctx = path.getContext ? path.getContext() : path;
+        var canBoost = ctx && size[0] < BOOST_SIZE_THRESHOLD;
+
+        // Do draw in afterBrush.
+        if (canBoost) {
+            return;
+        }
+
+        for (var i = 0; i < points.length;) {
+            var x = points[i++];
+            var y = points[i++];
+
+            if (isNaN(x) || isNaN(y)) {
+                continue;
+            }
+
+            symbolProxyShape.x = x - size[0] / 2;
+            symbolProxyShape.y = y - size[1] / 2;
+            symbolProxyShape.width = size[0];
+            symbolProxyShape.height = size[1];
+
+            symbolProxy.buildPath(path, symbolProxyShape, true);
+        }
+    },
+
+    afterBrush: function (ctx) {
+        var shape = this.shape;
+        var points = shape.points;
+        var size = shape.size;
+        var canBoost = size[0] < BOOST_SIZE_THRESHOLD;
+
+        if (!canBoost) {
+            return;
+        }
+
+        this.setTransform(ctx);
+        // PENDING If style or other canvas status changed?
+        for (var i = 0; i < points.length;) {
+            var x = points[i++];
+            var y = points[i++];
+            if (isNaN(x) || isNaN(y)) {
+                continue;
+            }
+            // fillRect is faster than building a rect path and draw.
+            // And it support light globalCompositeOperation.
+            ctx.fillRect(
+                x - size[0] / 2, y - size[1] / 2,
+                size[0], size[1]
+            );
+        }
+
+        this.restoreTransform(ctx);
+    },
+
+    findDataIndex: function (x, y) {
+        // TODO ???
+        // Consider transform
+
+        var shape = this.shape;
+        var points = shape.points;
+        var size = shape.size;
+
+        var w = Math.max(size[0], 4);
+        var h = Math.max(size[1], 4);
+
+        // Not consider transform
+        // Treat each element as a rect
+        // top down traverse
+        for (var idx = points.length / 2 - 1; idx >= 0; idx--) {
+            var i = idx * 2;
+            var x0 = points[i] - w / 2;
+            var y0 = points[i + 1] - h / 2;
+            if (x >= x0 && y >= y0 && x <= x0 + w && y <= y0 + h) {
+                return idx;
+            }
+        }
+
+        return -1;
+    }
+});
+
+function LargeSymbolDraw() {
+    this.group = new Group();
+}
+
+var largeSymbolProto = LargeSymbolDraw.prototype;
+
+largeSymbolProto.isPersistent = function () {
+    return !this._incremental;
+};
+
+/**
+ * Update symbols draw by new data
+ * @param {module:echarts/data/List} data
+ */
+largeSymbolProto.updateData = function (data) {
+    this.group.removeAll();
+    var symbolEl = new LargeSymbolPath({
+        rectHover: true,
+        cursor: 'default'
+    });
+
+    symbolEl.setShape({
+        points: data.getLayout('symbolPoints')
+    });
+    this._setCommon(symbolEl, data);
+    this.group.add(symbolEl);
+
+    this._incremental = null;
+};
+
+largeSymbolProto.updateLayout = function (data) {
+    if (this._incremental) {
+        return;
+    }
+
+    var points = data.getLayout('symbolPoints');
+    this.group.eachChild(function (child) {
+        if (child.startIndex != null) {
+            var len = (child.endIndex - child.startIndex) * 2;
+            var byteOffset = child.startIndex * 4 * 2;
+            points = new Float32Array(points.buffer, byteOffset, len);
+        }
+        child.setShape('points', points);
+    });
+};
+
+largeSymbolProto.incrementalPrepareUpdate = function (data) {
+    this.group.removeAll();
+
+    this._clearIncremental();
+    // Only use incremental displayables when data amount is larger than 2 million.
+    // PENDING Incremental data?
+    if (data.count() > 2e6) {
+        if (!this._incremental) {
+            this._incremental = new IncrementalDisplayble({
+                silent: true
+            });
+        }
+        this.group.add(this._incremental);
+    }
+    else {
+        this._incremental = null;
+    }
+};
+
+largeSymbolProto.incrementalUpdate = function (taskParams, data) {
+    var symbolEl;
+    if (this._incremental) {
+        symbolEl = new LargeSymbolPath();
+        this._incremental.addDisplayable(symbolEl, true);
+    }
+    else {
+        symbolEl = new LargeSymbolPath({
+            rectHover: true,
+            cursor: 'default',
+            startIndex: taskParams.start,
+            endIndex: taskParams.end
+        });
+        symbolEl.incremental = true;
+        this.group.add(symbolEl);
+    }
+
+    symbolEl.setShape({
+        points: data.getLayout('symbolPoints')
+    });
+    this._setCommon(symbolEl, data, !!this._incremental);
+};
+
+largeSymbolProto._setCommon = function (symbolEl, data, isIncremental) {
+    var hostModel = data.hostModel;
+
+    // TODO
+    // if (data.hasItemVisual.symbolSize) {
+    //     // TODO typed array?
+    //     symbolEl.setShape('sizes', data.mapArray(
+    //         function (idx) {
+    //             var size = data.getItemVisual(idx, 'symbolSize');
+    //             return (size instanceof Array) ? size : [size, size];
+    //         }
+    //     ));
+    // }
+    // else {
+    var size = data.getVisual('symbolSize');
+    symbolEl.setShape('size', (size instanceof Array) ? size : [size, size]);
+    // }
+
+    // Create symbolProxy to build path for each data
+    symbolEl.symbolProxy = createSymbol(
+        data.getVisual('symbol'), 0, 0, 0, 0
+    );
+    // Use symbolProxy setColor method
+    symbolEl.setColor = symbolEl.symbolProxy.setColor;
+
+    var extrudeShadow = symbolEl.shape.size[0] < BOOST_SIZE_THRESHOLD;
+    symbolEl.useStyle(
+        // Draw shadow when doing fillRect is extremely slow.
+        hostModel.getModel('itemStyle').getItemStyle(extrudeShadow ? ['color', 'shadowBlur', 'shadowColor'] : ['color'])
+    );
+
+    var visualColor = data.getVisual('color');
+    if (visualColor) {
+        symbolEl.setColor(visualColor);
+    }
+
+    if (!isIncremental) {
+        // Enable tooltip
+        // PENDING May have performance issue when path is extremely large
+        symbolEl.seriesIndex = hostModel.seriesIndex;
+        symbolEl.on('mousemove', function (e) {
+            symbolEl.dataIndex = null;
+            var dataIndex = symbolEl.findDataIndex(e.offsetX, e.offsetY);
+            if (dataIndex >= 0) {
+                // Provide dataIndex for tooltip
+                symbolEl.dataIndex = dataIndex + (symbolEl.startIndex || 0);
+            }
+        });
+    }
+};
+
+largeSymbolProto.remove = function () {
+    this._clearIncremental();
+    this._incremental = null;
+    this.group.removeAll();
+};
+
+largeSymbolProto._clearIncremental = function () {
+    var incremental = this._incremental;
+    if (incremental) {
+        incremental.clearDisplaybles();
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+extendChartView({
+
+    type: 'scatter',
+
+    render: function (seriesModel, ecModel, api) {
+        var data = seriesModel.getData();
+
+        var symbolDraw = this._updateSymbolDraw(data, seriesModel);
+        symbolDraw.updateData(data);
+
+        this._finished = true;
+    },
+
+    incrementalPrepareRender: function (seriesModel, ecModel, api) {
+        var data = seriesModel.getData();
+        var symbolDraw = this._updateSymbolDraw(data, seriesModel);
+
+        symbolDraw.incrementalPrepareUpdate(data);
+
+        this._finished = false;
+    },
+
+    incrementalRender: function (taskParams, seriesModel, ecModel) {
+        this._symbolDraw.incrementalUpdate(taskParams, seriesModel.getData());
+
+        this._finished = taskParams.end === seriesModel.getData().count();
+    },
+
+    updateTransform: function (seriesModel, ecModel, api) {
+        var data = seriesModel.getData();
+        // Must mark group dirty and make sure the incremental layer will be cleared
+        // PENDING
+        this.group.dirty();
+
+        if (!this._finished || data.count() > 1e4 || !this._symbolDraw.isPersistent()) {
+            return {
+                update: true
+            };
+        }
+        else {
+            var res = pointsLayout().reset(seriesModel);
+            if (res.progress) {
+                res.progress({ start: 0, end: data.count() }, data);
+            }
+
+            this._symbolDraw.updateLayout(data);
+        }
+    },
+
+    _updateSymbolDraw: function (data, seriesModel) {
+        var symbolDraw = this._symbolDraw;
+        var pipelineContext = seriesModel.pipelineContext;
+        var isLargeDraw = pipelineContext.large;
+
+        if (!symbolDraw || isLargeDraw !== this._isLargeDraw) {
+            symbolDraw && symbolDraw.remove();
+            symbolDraw = this._symbolDraw = isLargeDraw
+                ? new LargeSymbolDraw()
+                : new SymbolDraw();
+            this._isLargeDraw = isLargeDraw;
+            this.group.removeAll();
+        }
+
+        this.group.add(symbolDraw.group);
+
+        return symbolDraw;
+    },
+
+    remove: function (ecModel, api) {
+        this._symbolDraw && this._symbolDraw.remove(true);
+        this._symbolDraw = null;
+    },
+
+    dispose: function () {}
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// import * as zrUtil from 'zrender/src/core/util';
+
+// In case developer forget to include grid component
+registerVisual(visualSymbol('scatter', 'circle'));
+registerLayout(pointsLayout('scatter'));
+
+// echarts.registerProcessor(function (ecModel, api) {
+//     ecModel.eachSeriesByType('scatter', function (seriesModel) {
+//         var data = seriesModel.getData();
+//         var coordSys = seriesModel.coordinateSystem;
+//         if (coordSys.type !== 'geo') {
+//             return;
+//         }
+//         var startPt = coordSys.pointToData([0, 0]);
+//         var endPt = coordSys.pointToData([api.getWidth(), api.getHeight()]);
+
+//         var dims = zrUtil.map(coordSys.dimensions, function (dim) {
+//             return data.mapDimension(dim);
+//         });
+//         var range = {};
+//         range[dims[0]] = [Math.min(startPt[0], endPt[0]), Math.max(startPt[0], endPt[0])];
+//         range[dims[1]] = [Math.min(startPt[1], endPt[1]), Math.max(startPt[1], endPt[1])];
+
+//         data.selectRange(range);
+//     });
+// });
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+function IndicatorAxis(dim, scale, radiusExtent) {
+    Axis.call(this, dim, scale, radiusExtent);
+
+    /**
+     * Axis type
+     *  - 'category'
+     *  - 'value'
+     *  - 'time'
+     *  - 'log'
+     * @type {string}
+     */
+    this.type = 'value';
+
+    this.angle = 0;
+
+    /**
+     * Indicator name
+     * @type {string}
+     */
+    this.name = '';
+    /**
+     * @type {module:echarts/model/Model}
+     */
+    this.model;
+}
+
+inherits(IndicatorAxis, Axis);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// TODO clockwise
+
+function Radar(radarModel, ecModel, api) {
+
+    this._model = radarModel;
+    /**
+     * Radar dimensions
+     * @type {Array.<string>}
+     */
+    this.dimensions = [];
+
+    this._indicatorAxes = map(radarModel.getIndicatorModels(), function (indicatorModel, idx) {
+        var dim = 'indicator_' + idx;
+        var indicatorAxis = new IndicatorAxis(dim, new IntervalScale());
+        indicatorAxis.name = indicatorModel.get('name');
+        // Inject model and axis
+        indicatorAxis.model = indicatorModel;
+        indicatorModel.axis = indicatorAxis;
+        this.dimensions.push(dim);
+        return indicatorAxis;
+    }, this);
+
+    this.resize(radarModel, api);
+
+    /**
+     * @type {number}
+     * @readOnly
+     */
+    this.cx;
+    /**
+     * @type {number}
+     * @readOnly
+     */
+    this.cy;
+    /**
+     * @type {number}
+     * @readOnly
+     */
+    this.r;
+    /**
+     * @type {number}
+     * @readOnly
+     */
+    this.startAngle;
+}
+
+Radar.prototype.getIndicatorAxes = function () {
+    return this._indicatorAxes;
+};
+
+Radar.prototype.dataToPoint = function (value, indicatorIndex) {
+    var indicatorAxis = this._indicatorAxes[indicatorIndex];
+
+    return this.coordToPoint(indicatorAxis.dataToCoord(value), indicatorIndex);
+};
+
+Radar.prototype.coordToPoint = function (coord, indicatorIndex) {
+    var indicatorAxis = this._indicatorAxes[indicatorIndex];
+    var angle = indicatorAxis.angle;
+    var x = this.cx + coord * Math.cos(angle);
+    var y = this.cy - coord * Math.sin(angle);
+    return [x, y];
+};
+
+Radar.prototype.pointToData = function (pt) {
+    var dx = pt[0] - this.cx;
+    var dy = pt[1] - this.cy;
+    var radius = Math.sqrt(dx * dx + dy * dy);
+    dx /= radius;
+    dy /= radius;
+
+    var radian = Math.atan2(-dy, dx);
+
+    // Find the closest angle
+    // FIXME index can calculated directly
+    var minRadianDiff = Infinity;
+    var closestAxis;
+    var closestAxisIdx = -1;
+    for (var i = 0; i < this._indicatorAxes.length; i++) {
+        var indicatorAxis = this._indicatorAxes[i];
+        var diff = Math.abs(radian - indicatorAxis.angle);
+        if (diff < minRadianDiff) {
+            closestAxis = indicatorAxis;
+            closestAxisIdx = i;
+            minRadianDiff = diff;
+        }
+    }
+
+    return [closestAxisIdx, +(closestAxis && closestAxis.coodToData(radius))];
+};
+
+Radar.prototype.resize = function (radarModel, api) {
+    var center = radarModel.get('center');
+    var viewWidth = api.getWidth();
+    var viewHeight = api.getHeight();
+    var viewSize = Math.min(viewWidth, viewHeight) / 2;
+    this.cx = parsePercent$1(center[0], viewWidth);
+    this.cy = parsePercent$1(center[1], viewHeight);
+
+    this.startAngle = radarModel.get('startAngle') * Math.PI / 180;
+
+    this.r = parsePercent$1(radarModel.get('radius'), viewSize);
+
+    each$1(this._indicatorAxes, function (indicatorAxis, idx) {
+        indicatorAxis.setExtent(0, this.r);
+        var angle = (this.startAngle + idx * Math.PI * 2 / this._indicatorAxes.length);
+        // Normalize to [-PI, PI]
+        angle = Math.atan2(Math.sin(angle), Math.cos(angle));
+        indicatorAxis.angle = angle;
+    }, this);
+};
+
+Radar.prototype.update = function (ecModel, api) {
+    var indicatorAxes = this._indicatorAxes;
+    var radarModel = this._model;
+    each$1(indicatorAxes, function (indicatorAxis) {
+        indicatorAxis.scale.setExtent(Infinity, -Infinity);
+    });
+    ecModel.eachSeriesByType('radar', function (radarSeries, idx) {
+        if (radarSeries.get('coordinateSystem') !== 'radar'
+            || ecModel.getComponent('radar', radarSeries.get('radarIndex')) !== radarModel
+        ) {
+            return;
+        }
+        var data = radarSeries.getData();
+        each$1(indicatorAxes, function (indicatorAxis) {
+            indicatorAxis.scale.unionExtentFromData(data, data.mapDimension(indicatorAxis.dim));
+        });
+    }, this);
+
+    var splitNumber = radarModel.get('splitNumber');
+
+    function increaseInterval(interval) {
+        var exp10 = Math.pow(10, Math.floor(Math.log(interval) / Math.LN10));
+        // Increase interval
+        var f = interval / exp10;
+        if (f === 2) {
+            f = 5;
+        }
+        else { // f is 2 or 5
+            f *= 2;
+        }
+        return f * exp10;
+    }
+    // Force all the axis fixing the maxSplitNumber.
+    each$1(indicatorAxes, function (indicatorAxis, idx) {
+        var rawExtent = getScaleExtent(indicatorAxis.scale, indicatorAxis.model);
+        niceScaleExtent(indicatorAxis.scale, indicatorAxis.model);
+
+        var axisModel = indicatorAxis.model;
+        var scale = indicatorAxis.scale;
+        var fixedMin = axisModel.getMin();
+        var fixedMax = axisModel.getMax();
+        var interval = scale.getInterval();
+
+        if (fixedMin != null && fixedMax != null) {
+            // User set min, max, divide to get new interval
+            scale.setExtent(+fixedMin, +fixedMax);
+            scale.setInterval(
+                (fixedMax - fixedMin) / splitNumber
+            );
+        }
+        else if (fixedMin != null) {
+            var max;
+            // User set min, expand extent on the other side
+            do {
+                max = fixedMin + interval * splitNumber;
+                scale.setExtent(+fixedMin, max);
+                // Interval must been set after extent
+                // FIXME
+                scale.setInterval(interval);
+
+                interval = increaseInterval(interval);
+            } while (max < rawExtent[1] && isFinite(max) && isFinite(rawExtent[1]));
+        }
+        else if (fixedMax != null) {
+            var min;
+            // User set min, expand extent on the other side
+            do {
+                min = fixedMax - interval * splitNumber;
+                scale.setExtent(min, +fixedMax);
+                scale.setInterval(interval);
+                interval = increaseInterval(interval);
+            } while (min > rawExtent[0] && isFinite(min) && isFinite(rawExtent[0]));
+        }
+        else {
+            var nicedSplitNumber = scale.getTicks().length - 1;
+            if (nicedSplitNumber > splitNumber) {
+                interval = increaseInterval(interval);
+            }
+            // PENDING
+            var center = Math.round((rawExtent[0] + rawExtent[1]) / 2 / interval) * interval;
+            var halfSplitNumber = Math.round(splitNumber / 2);
+            scale.setExtent(
+                round$1(center - halfSplitNumber * interval),
+                round$1(center + (splitNumber - halfSplitNumber) * interval)
+            );
+            scale.setInterval(interval);
+        }
+    });
+};
+
+/**
+ * Radar dimensions is based on the data
+ * @type {Array}
+ */
+Radar.dimensions = [];
+
+Radar.create = function (ecModel, api) {
+    var radarList = [];
+    ecModel.eachComponent('radar', function (radarModel) {
+        var radar = new Radar(radarModel, ecModel, api);
+        radarList.push(radar);
+        radarModel.coordinateSystem = radar;
+    });
+    ecModel.eachSeriesByType('radar', function (radarSeries) {
+        if (radarSeries.get('coordinateSystem') === 'radar') {
+            // Inject coordinate system
+            radarSeries.coordinateSystem = radarList[radarSeries.get('radarIndex') || 0];
+        }
+    });
+    return radarList;
+};
+
+CoordinateSystemManager.register('radar', Radar);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var valueAxisDefault = axisDefault.valueAxis;
+
+function defaultsShow(opt, show) {
+    return defaults({
+        show: show
+    }, opt);
+}
+
+var RadarModel = extendComponentModel({
+
+    type: 'radar',
+
+    optionUpdated: function () {
+        var boundaryGap = this.get('boundaryGap');
+        var splitNumber = this.get('splitNumber');
+        var scale = this.get('scale');
+        var axisLine = this.get('axisLine');
+        var axisTick = this.get('axisTick');
+        var axisLabel = this.get('axisLabel');
+        var nameTextStyle = this.get('name');
+        var showName = this.get('name.show');
+        var nameFormatter = this.get('name.formatter');
+        var nameGap = this.get('nameGap');
+        var triggerEvent = this.get('triggerEvent');
+
+        var indicatorModels = map(this.get('indicator') || [], function (indicatorOpt) {
+            // PENDING
+            if (indicatorOpt.max != null && indicatorOpt.max > 0 && !indicatorOpt.min) {
+                indicatorOpt.min = 0;
+            }
+            else if (indicatorOpt.min != null && indicatorOpt.min < 0 && !indicatorOpt.max) {
+                indicatorOpt.max = 0;
+            }
+            var iNameTextStyle = nameTextStyle;
+            if(indicatorOpt.color != null) {
+                iNameTextStyle = defaults({color: indicatorOpt.color}, nameTextStyle);
+            }
+            // Use same configuration
+            indicatorOpt = merge(clone(indicatorOpt), {
+                boundaryGap: boundaryGap,
+                splitNumber: splitNumber,
+                scale: scale,
+                axisLine: axisLine,
+                axisTick: axisTick,
+                axisLabel: axisLabel,
+                // Competitable with 2 and use text
+                name: indicatorOpt.text,
+                nameLocation: 'end',
+                nameGap: nameGap,
+                // min: 0,
+                nameTextStyle: iNameTextStyle,
+                triggerEvent: triggerEvent
+            }, false);
+            if (!showName) {
+                indicatorOpt.name = '';
+            }
+            if (typeof nameFormatter === 'string') {
+                var indName = indicatorOpt.name;
+                indicatorOpt.name = nameFormatter.replace('{value}', indName != null ? indName : '');
+            }
+            else if (typeof nameFormatter === 'function') {
+                indicatorOpt.name = nameFormatter(
+                    indicatorOpt.name, indicatorOpt
+                );
+            }
+            var model = extend(
+                new Model(indicatorOpt, null, this.ecModel),
+                axisModelCommonMixin
+            );
+
+            // For triggerEvent.
+            model.mainType = 'radar';
+            model.componentIndex = this.componentIndex;
+
+            return model;
+        }, this);
+
+        this.getIndicatorModels = function () {
+            return indicatorModels;
+        };
+    },
+
+    defaultOption: {
+
+        zlevel: 0,
+
+        z: 0,
+
+        center: ['50%', '50%'],
+
+        radius: '75%',
+
+        startAngle: 90,
+
+        name: {
+            show: true
+            // formatter: null
+            // textStyle: {}
+        },
+
+        boundaryGap: [0, 0],
+
+        splitNumber: 5,
+
+        nameGap: 15,
+
+        scale: false,
+
+        // Polygon or circle
+        shape: 'polygon',
+
+        axisLine: merge(
+            {
+                lineStyle: {
+                    color: '#bbb'
+                }
+            },
+            valueAxisDefault.axisLine
+        ),
+        axisLabel: defaultsShow(valueAxisDefault.axisLabel, false),
+        axisTick: defaultsShow(valueAxisDefault.axisTick, false),
+        splitLine: defaultsShow(valueAxisDefault.splitLine, true),
+        splitArea: defaultsShow(valueAxisDefault.splitArea, true),
+
+        // {text, min, max}
+        indicator: []
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var axisBuilderAttrs$1 = [
+    'axisLine', 'axisTickLabel', 'axisName'
+];
+
+extendComponentView({
+
+    type: 'radar',
+
+    render: function (radarModel, ecModel, api) {
+        var group = this.group;
+        group.removeAll();
+
+        this._buildAxes(radarModel);
+        this._buildSplitLineAndArea(radarModel);
+    },
+
+    _buildAxes: function (radarModel) {
+        var radar = radarModel.coordinateSystem;
+        var indicatorAxes = radar.getIndicatorAxes();
+        var axisBuilders = map(indicatorAxes, function (indicatorAxis) {
+            var axisBuilder = new AxisBuilder(indicatorAxis.model, {
+                position: [radar.cx, radar.cy],
+                rotation: indicatorAxis.angle,
+                labelDirection: -1,
+                tickDirection: -1,
+                nameDirection: 1
+            });
+            return axisBuilder;
+        });
+
+        each$1(axisBuilders, function (axisBuilder) {
+            each$1(axisBuilderAttrs$1, axisBuilder.add, axisBuilder);
+            this.group.add(axisBuilder.getGroup());
+        }, this);
+    },
+
+    _buildSplitLineAndArea: function (radarModel) {
+        var radar = radarModel.coordinateSystem;
+        var indicatorAxes = radar.getIndicatorAxes();
+        if (!indicatorAxes.length) {
+            return;
+        }
+        var shape = radarModel.get('shape');
+        var splitLineModel = radarModel.getModel('splitLine');
+        var splitAreaModel = radarModel.getModel('splitArea');
+        var lineStyleModel = splitLineModel.getModel('lineStyle');
+        var areaStyleModel = splitAreaModel.getModel('areaStyle');
+
+        var showSplitLine = splitLineModel.get('show');
+        var showSplitArea = splitAreaModel.get('show');
+        var splitLineColors = lineStyleModel.get('color');
+        var splitAreaColors = areaStyleModel.get('color');
+
+        splitLineColors = isArray(splitLineColors) ? splitLineColors : [splitLineColors];
+        splitAreaColors = isArray(splitAreaColors) ? splitAreaColors : [splitAreaColors];
+
+        var splitLines = [];
+        var splitAreas = [];
+
+        function getColorIndex(areaOrLine, areaOrLineColorList, idx) {
+            var colorIndex = idx % areaOrLineColorList.length;
+            areaOrLine[colorIndex] = areaOrLine[colorIndex] || [];
+            return colorIndex;
+        }
+
+        if (shape === 'circle') {
+            var ticksRadius = indicatorAxes[0].getTicksCoords();
+            var cx = radar.cx;
+            var cy = radar.cy;
+            for (var i = 0; i < ticksRadius.length; i++) {
+                if (showSplitLine) {
+                    var colorIndex = getColorIndex(splitLines, splitLineColors, i);
+                    splitLines[colorIndex].push(new Circle({
+                        shape: {
+                            cx: cx,
+                            cy: cy,
+                            r: ticksRadius[i].coord
+                        }
+                    }));
+                }
+                if (showSplitArea && i < ticksRadius.length - 1) {
+                    var colorIndex = getColorIndex(splitAreas, splitAreaColors, i);
+                    splitAreas[colorIndex].push(new Ring({
+                        shape: {
+                            cx: cx,
+                            cy: cy,
+                            r0: ticksRadius[i].coord,
+                            r: ticksRadius[i + 1].coord
+                        }
+                    }));
+                }
+            }
+        }
+        // Polyyon
+        else {
+            var realSplitNumber;
+            var axesTicksPoints = map(indicatorAxes, function (indicatorAxis, idx) {
+                var ticksCoords = indicatorAxis.getTicksCoords();
+                realSplitNumber = realSplitNumber == null
+                    ? ticksCoords.length - 1
+                    : Math.min(ticksCoords.length - 1, realSplitNumber);
+                return map(ticksCoords, function (tickCoord) {
+                    return radar.coordToPoint(tickCoord.coord, idx);
+                });
+            });
+
+            var prevPoints = [];
+            for (var i = 0; i <= realSplitNumber; i++) {
+                var points = [];
+                for (var j = 0; j < indicatorAxes.length; j++) {
+                    points.push(axesTicksPoints[j][i]);
+                }
+                // Close
+                if (points[0]) {
+                    points.push(points[0].slice());
+                }
+                else {
+                    if (__DEV__) {
+                        console.error('Can\'t draw value axis ' + i);
+                    }
+                }
+
+                if (showSplitLine) {
+                    var colorIndex = getColorIndex(splitLines, splitLineColors, i);
+                    splitLines[colorIndex].push(new Polyline({
+                        shape: {
+                            points: points
+                        }
+                    }));
+                }
+                if (showSplitArea && prevPoints) {
+                    var colorIndex = getColorIndex(splitAreas, splitAreaColors, i - 1);
+                    splitAreas[colorIndex].push(new Polygon({
+                        shape: {
+                            points: points.concat(prevPoints)
+                        }
+                    }));
+                }
+                prevPoints = points.slice().reverse();
+            }
+        }
+
+        var lineStyle = lineStyleModel.getLineStyle();
+        var areaStyle = areaStyleModel.getAreaStyle();
+        // Add splitArea before splitLine
+        each$1(splitAreas, function (splitAreas, idx) {
+            this.group.add(mergePath(
+                splitAreas, {
+                    style: defaults({
+                        stroke: 'none',
+                        fill: splitAreaColors[idx % splitAreaColors.length]
+                    }, areaStyle),
+                    silent: true
+                }
+            ));
+        }, this);
+
+        each$1(splitLines, function (splitLines, idx) {
+            this.group.add(mergePath(
+                splitLines, {
+                    style: defaults({
+                        fill: 'none',
+                        stroke: splitLineColors[idx % splitLineColors.length]
+                    }, lineStyle),
+                    silent: true
+                }
+            ));
+        }, this);
+
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var RadarSeries = SeriesModel.extend({
+
+    type: 'series.radar',
+
+    dependencies: ['radar'],
+
+
+    // Overwrite
+    init: function (option) {
+        RadarSeries.superApply(this, 'init', arguments);
+
+        // Enable legend selection for each data item
+        // Use a function instead of direct access because data reference may changed
+        this.legendDataProvider = function () {
+            return this.getRawData();
+        };
+    },
+
+    getInitialData: function (option, ecModel) {
+        return createListSimply(this, {
+            generateCoord: 'indicator_',
+            generateCoordCount: Infinity
+        });
+    },
+
+    formatTooltip: function (dataIndex) {
+        var data = this.getData();
+        var coordSys = this.coordinateSystem;
+        var indicatorAxes = coordSys.getIndicatorAxes();
+        var name = this.getData().getName(dataIndex);
+        return encodeHTML(name === '' ? this.name : name) + '<br/>'
+            + map(indicatorAxes, function (axis, idx) {
+                var val = data.get(data.mapDimension(axis.dim), dataIndex);
+                return encodeHTML(axis.name + ' : ' + val);
+            }).join('<br />');
+    },
+
+    defaultOption: {
+        zlevel: 0,
+        z: 2,
+        coordinateSystem: 'radar',
+        legendHoverLink: true,
+        radarIndex: 0,
+        lineStyle: {
+            width: 2,
+            type: 'solid'
+        },
+        label: {
+            position: 'top'
+        },
+        // areaStyle: {
+        // },
+        // itemStyle: {}
+        symbol: 'emptyCircle',
+        symbolSize: 4
+        // symbolRotate: null
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+function normalizeSymbolSize(symbolSize) {
+    if (!isArray(symbolSize)) {
+        symbolSize = [+symbolSize, +symbolSize];
+    }
+    return symbolSize;
+}
+
+extendChartView({
+
+    type: 'radar',
+
+    render: function (seriesModel, ecModel, api) {
+        var polar = seriesModel.coordinateSystem;
+        var group = this.group;
+
+        var data = seriesModel.getData();
+        var oldData = this._data;
+
+        function createSymbol$$1(data, idx) {
+            var symbolType = data.getItemVisual(idx, 'symbol') || 'circle';
+            var color = data.getItemVisual(idx, 'color');
+            if (symbolType === 'none') {
+                return;
+            }
+            var symbolSize = normalizeSymbolSize(
+                data.getItemVisual(idx, 'symbolSize')
+            );
+            var symbolPath = createSymbol(
+                symbolType, -1, -1, 2, 2, color
+            );
+            symbolPath.attr({
+                style: {
+                    strokeNoScale: true
+                },
+                z2: 100,
+                scale: [symbolSize[0] / 2, symbolSize[1] / 2]
+            });
+            return symbolPath;
+        }
+
+        function updateSymbols(oldPoints, newPoints, symbolGroup, data, idx, isInit) {
+            // Simply rerender all
+            symbolGroup.removeAll();
+            for (var i = 0; i < newPoints.length - 1; i++) {
+                var symbolPath = createSymbol$$1(data, idx);
+                if (symbolPath) {
+                    symbolPath.__dimIdx = i;
+                    if (oldPoints[i]) {
+                        symbolPath.attr('position', oldPoints[i]);
+                        graphic[isInit ? 'initProps' : 'updateProps'](
+                            symbolPath, {
+                                position: newPoints[i]
+                            }, seriesModel, idx
+                        );
+                    }
+                    else {
+                        symbolPath.attr('position', newPoints[i]);
+                    }
+                    symbolGroup.add(symbolPath);
+                }
+            }
+        }
+
+        function getInitialPoints(points) {
+            return map(points, function (pt) {
+                return [polar.cx, polar.cy];
+            });
+        }
+        data.diff(oldData)
+            .add(function (idx) {
+                var points = data.getItemLayout(idx);
+                if (!points) {
+                    return;
+                }
+                var polygon = new Polygon();
+                var polyline = new Polyline();
+                var target = {
+                    shape: {
+                        points: points
+                    }
+                };
+                polygon.shape.points = getInitialPoints(points);
+                polyline.shape.points = getInitialPoints(points);
+                initProps(polygon, target, seriesModel, idx);
+                initProps(polyline, target, seriesModel, idx);
+
+                var itemGroup = new Group();
+                var symbolGroup = new Group();
+                itemGroup.add(polyline);
+                itemGroup.add(polygon);
+                itemGroup.add(symbolGroup);
+
+                updateSymbols(
+                    polyline.shape.points, points, symbolGroup, data, idx, true
+                );
+
+                data.setItemGraphicEl(idx, itemGroup);
+            })
+            .update(function (newIdx, oldIdx) {
+                var itemGroup = oldData.getItemGraphicEl(oldIdx);
+                var polyline = itemGroup.childAt(0);
+                var polygon = itemGroup.childAt(1);
+                var symbolGroup = itemGroup.childAt(2);
+                var target = {
+                    shape: {
+                        points: data.getItemLayout(newIdx)
+                    }
+                };
+                if (!target.shape.points) {
+                    return;
+                }
+                updateSymbols(
+                    polyline.shape.points, target.shape.points, symbolGroup, data, newIdx, false
+                );
+
+                updateProps(polyline, target, seriesModel);
+                updateProps(polygon, target, seriesModel);
+
+                data.setItemGraphicEl(newIdx, itemGroup);
+            })
+            .remove(function (idx) {
+                group.remove(oldData.getItemGraphicEl(idx));
+            })
+            .execute();
+
+        data.eachItemGraphicEl(function (itemGroup, idx) {
+            var itemModel = data.getItemModel(idx);
+            var polyline = itemGroup.childAt(0);
+            var polygon = itemGroup.childAt(1);
+            var symbolGroup = itemGroup.childAt(2);
+            var color = data.getItemVisual(idx, 'color');
+
+            group.add(itemGroup);
+
+            polyline.useStyle(
+                defaults(
+                    itemModel.getModel('lineStyle').getLineStyle(),
+                    {
+                        fill: 'none',
+                        stroke: color
+                    }
+                )
+            );
+            polyline.hoverStyle = itemModel.getModel('emphasis.lineStyle').getLineStyle();
+
+            var areaStyleModel = itemModel.getModel('areaStyle');
+            var hoverAreaStyleModel = itemModel.getModel('emphasis.areaStyle');
+            var polygonIgnore = areaStyleModel.isEmpty() && areaStyleModel.parentModel.isEmpty();
+            var hoverPolygonIgnore = hoverAreaStyleModel.isEmpty() && hoverAreaStyleModel.parentModel.isEmpty();
+
+            hoverPolygonIgnore = hoverPolygonIgnore && polygonIgnore;
+            polygon.ignore = polygonIgnore;
+
+            polygon.useStyle(
+                defaults(
+                    areaStyleModel.getAreaStyle(),
+                    {
+                        fill: color,
+                        opacity: 0.7
+                    }
+                )
+            );
+            polygon.hoverStyle = hoverAreaStyleModel.getAreaStyle();
+
+            var itemStyle = itemModel.getModel('itemStyle').getItemStyle(['color']);
+            var itemHoverStyle = itemModel.getModel('emphasis.itemStyle').getItemStyle();
+            var labelModel = itemModel.getModel('label');
+            var labelHoverModel = itemModel.getModel('emphasis.label');
+            symbolGroup.eachChild(function (symbolPath) {
+                symbolPath.setStyle(itemStyle);
+                symbolPath.hoverStyle = clone(itemHoverStyle);
+
+                setLabelStyle(
+                    symbolPath.style, symbolPath.hoverStyle, labelModel, labelHoverModel,
+                    {
+                        labelFetcher: data.hostModel,
+                        labelDataIndex: idx,
+                        labelDimIndex: symbolPath.__dimIdx,
+                        defaultText: data.get(data.dimensions[symbolPath.__dimIdx], idx),
+                        autoColor: color,
+                        isRectText: true
+                    }
+                );
+            });
+
+            function onEmphasis() {
+                polygon.attr('ignore', hoverPolygonIgnore);
+            }
+
+            function onNormal() {
+                polygon.attr('ignore', polygonIgnore);
+            }
+
+            itemGroup.off('mouseover').off('mouseout').off('normal').off('emphasis');
+            itemGroup.on('emphasis', onEmphasis)
+                .on('mouseover', onEmphasis)
+                .on('normal', onNormal)
+                .on('mouseout', onNormal);
+
+            setHoverStyle(itemGroup);
+        });
+
+        this._data = data;
+    },
+
+    remove: function () {
+        this.group.removeAll();
+        this._data = null;
+    },
+
+    dispose: function () {}
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+var radarLayout = function (ecModel) {
+    ecModel.eachSeriesByType('radar', function (seriesModel) {
+        var data = seriesModel.getData();
+        var points = [];
+        var coordSys = seriesModel.coordinateSystem;
+        if (!coordSys) {
+            return;
+        }
+
+        function pointsConverter(val, idx) {
+            points[idx] = points[idx] || [];
+            points[idx][i] = coordSys.dataToPoint(val, i);
+        }
+        var axes = coordSys.getIndicatorAxes();
+        for (var i = 0; i < axes.length; i++) {
+            data.each(data.mapDimension(axes[i].dim), pointsConverter);
+        }
+
+        data.each(function (idx) {
+            // Close polygon
+            points[idx][0] && points[idx].push(points[idx][0].slice());
+            data.setItemLayout(idx, points[idx]);
+        });
+    });
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// Backward compat for radar chart in 2
+var backwardCompat$1 = function (option) {
+    var polarOptArr = option.polar;
+    if (polarOptArr) {
+        if (!isArray(polarOptArr)) {
+            polarOptArr = [polarOptArr];
+        }
+        var polarNotRadar = [];
+        each$1(polarOptArr, function (polarOpt, idx) {
+            if (polarOpt.indicator) {
+                if (polarOpt.type && !polarOpt.shape) {
+                    polarOpt.shape = polarOpt.type;
+                }
+                option.radar = option.radar || [];
+                if (!isArray(option.radar)) {
+                    option.radar = [option.radar];
+                }
+                option.radar.push(polarOpt);
+            }
+            else {
+                polarNotRadar.push(polarOpt);
+            }
+        });
+        option.polar = polarNotRadar;
+    }
+    each$1(option.series, function (seriesOpt) {
+        if (seriesOpt && seriesOpt.type === 'radar' && seriesOpt.polarIndex) {
+            seriesOpt.radarIndex = seriesOpt.polarIndex;
+        }
+    });
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+// Must use radar component
+registerVisual(dataColor('radar'));
+registerVisual(visualSymbol('radar', 'circle'));
+registerLayout(radarLayout);
+registerProcessor(dataFilter('radar'));
+registerPreprocessor(backwardCompat$1);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Simple view coordinate system
+ * Mapping given x, y to transformd view x, y
+ */
+
+var v2ApplyTransform$1 = applyTransform;
+
+// Dummy transform node
+function TransformDummy() {
+    Transformable.call(this);
+}
+mixin(TransformDummy, Transformable);
+
+function View(name) {
+    /**
+     * @type {string}
+     */
+    this.name = name;
+
+    /**
+     * @type {Object}
+     */
+    this.zoomLimit;
+
+    Transformable.call(this);
+
+    this._roamTransformable = new TransformDummy();
+
+    this._rawTransformable = new TransformDummy();
+
+    this._center;
+    this._zoom;
+}
+
+View.prototype = {
+
+    constructor: View,
+
+    type: 'view',
+
+    /**
+     * @param {Array.<string>}
+     * @readOnly
+     */
+    dimensions: ['x', 'y'],
+
+    /**
+     * Set bounding rect
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
+     */
+
+    // PENDING to getRect
+    setBoundingRect: function (x, y, width, height) {
+        this._rect = new BoundingRect(x, y, width, height);
+        return this._rect;
+    },
+
+    /**
+     * @return {module:zrender/core/BoundingRect}
+     */
+    // PENDING to getRect
+    getBoundingRect: function () {
+        return this._rect;
+    },
+
+    /**
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
+     */
+    setViewRect: function (x, y, width, height) {
+        this.transformTo(x, y, width, height);
+        this._viewRect = new BoundingRect(x, y, width, height);
+    },
+
+    /**
+     * Transformed to particular position and size
+     * @param {number} x
+     * @param {number} y
+     * @param {number} width
+     * @param {number} height
+     */
+    transformTo: function (x, y, width, height) {
+        var rect = this.getBoundingRect();
+        var rawTransform = this._rawTransformable;
+
+        rawTransform.transform = rect.calculateTransform(
+            new BoundingRect(x, y, width, height)
+        );
+
+        rawTransform.decomposeTransform();
+
+        this._updateTransform();
+    },
+
+    /**
+     * Set center of view
+     * @param {Array.<number>} [centerCoord]
+     */
+    setCenter: function (centerCoord) {
+        if (!centerCoord) {
+            return;
+        }
+        this._center = centerCoord;
+
+        this._updateCenterAndZoom();
+    },
+
+    /**
+     * @param {number} zoom
+     */
+    setZoom: function (zoom) {
+        zoom = zoom || 1;
+
+        var zoomLimit = this.zoomLimit;
+        if (zoomLimit) {
+            if (zoomLimit.max != null) {
+                zoom = Math.min(zoomLimit.max, zoom);
+            }
+            if (zoomLimit.min != null) {
+                zoom = Math.max(zoomLimit.min, zoom);
+            }
+        }
+        this._zoom = zoom;
+
+        this._updateCenterAndZoom();
+    },
+
+    /**
+     * Get default center without roam
+     */
+    getDefaultCenter: function () {
+        // Rect before any transform
+        var rawRect = this.getBoundingRect();
+        var cx = rawRect.x + rawRect.width / 2;
+        var cy = rawRect.y + rawRect.height / 2;
+
+        return [cx, cy];
+    },
+
+    getCenter: function () {
+        return this._center || this.getDefaultCenter();
+    },
+
+    getZoom: function () {
+        return this._zoom || 1;
+    },
+
+    /**
+     * @return {Array.<number}
+     */
+    getRoamTransform: function () {
+        return this._roamTransformable.getLocalTransform();
+    },
+
+    /**
+     * Remove roam
+     */
+
+    _updateCenterAndZoom: function () {
+        // Must update after view transform updated
+        var rawTransformMatrix = this._rawTransformable.getLocalTransform();
+        var roamTransform = this._roamTransformable;
+        var defaultCenter = this.getDefaultCenter();
+        var center = this.getCenter();
+        var zoom = this.getZoom();
+
+        center = applyTransform([], center, rawTransformMatrix);
+        defaultCenter = applyTransform([], defaultCenter, rawTransformMatrix);
+
+        roamTransform.origin = center;
+        roamTransform.position = [
+            defaultCenter[0] - center[0],
+            defaultCenter[1] - center[1]
+        ];
+        roamTransform.scale = [zoom, zoom];
+
+        this._updateTransform();
+    },
+
+    /**
+     * Update transform from roam and mapLocation
+     * @private
+     */
+    _updateTransform: function () {
+        var roamTransformable = this._roamTransformable;
+        var rawTransformable = this._rawTransformable;
+
+        rawTransformable.parent = roamTransformable;
+        roamTransformable.updateTransform();
+        rawTransformable.updateTransform();
+
+        copy$1(this.transform || (this.transform = []), rawTransformable.transform || create$1());
+
+        this._rawTransform = rawTransformable.getLocalTransform();
+
+        this.invTransform = this.invTransform || [];
+        invert(this.invTransform, this.transform);
+
+        this.decomposeTransform();
+    },
+
+    /**
+     * @return {module:zrender/core/BoundingRect}
+     */
+    getViewRect: function () {
+        return this._viewRect;
+    },
+
+    /**
+     * Get view rect after roam transform
+     * @return {module:zrender/core/BoundingRect}
+     */
+    getViewRectAfterRoam: function () {
+        var rect = this.getBoundingRect().clone();
+        rect.applyTransform(this.transform);
+        return rect;
+    },
+
+    /**
+     * Convert a single (lon, lat) data item to (x, y) point.
+     * @param {Array.<number>} data
+     * @param {boolean} noRoam
+     * @param {Array.<number>} [out]
+     * @return {Array.<number>}
+     */
+    dataToPoint: function (data, noRoam, out) {
+        var transform = noRoam ? this._rawTransform : this.transform;
+        out = out || [];
+        return transform
+            ? v2ApplyTransform$1(out, data, transform)
+            : copy(out, data);
+    },
+
+    /**
+     * Convert a (x, y) point to (lon, lat) data
+     * @param {Array.<number>} point
+     * @return {Array.<number>}
+     */
+    pointToData: function (point) {
+        var invTransform = this.invTransform;
+        return invTransform
+            ? v2ApplyTransform$1([], point, invTransform)
+            : [point[0], point[1]];
+    },
+
+    /**
+     * @implements
+     * see {module:echarts/CoodinateSystem}
+     */
+    convertToPixel: curry(doConvert$1, 'dataToPoint'),
+
+    /**
+     * @implements
+     * see {module:echarts/CoodinateSystem}
+     */
+    convertFromPixel: curry(doConvert$1, 'pointToData'),
+
+    /**
+     * @implements
+     * see {module:echarts/CoodinateSystem}
+     */
+    containPoint: function (point) {
+        return this.getViewRectAfterRoam().contain(point[0], point[1]);
+    }
+
+    /**
+     * @return {number}
+     */
+    // getScalarScale: function () {
+    //     // Use determinant square root of transform to mutiply scalar
+    //     var m = this.transform;
+    //     var det = Math.sqrt(Math.abs(m[0] * m[3] - m[2] * m[1]));
+    //     return det;
+    // }
+};
+
+mixin(View, Transformable);
+
+function doConvert$1(methodName, ecModel, finder, value) {
+    var seriesModel = finder.seriesModel;
+    var coordSys = seriesModel ? seriesModel.coordinateSystem : null; // e.g., graph.
+    return coordSys === this ? coordSys[methodName](value) : null;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// Fix for å—æµ·è¯¸å²›
+
+var geoCoord = [126, 25];
+
+var points$1 = [
+    [[0,3.5],[7,11.2],[15,11.9],[30,7],[42,0.7],[52,0.7],
+        [56,7.7],[59,0.7],[64,0.7],[64,0],[5,0],[0,3.5]],
+    [[13,16.1],[19,14.7],[16,21.7],[11,23.1],[13,16.1]],
+    [[12,32.2],[14,38.5],[15,38.5],[13,32.2],[12,32.2]],
+    [[16,47.6],[12,53.2],[13,53.2],[18,47.6],[16,47.6]],
+    [[6,64.4],[8,70],[9,70],[8,64.4],[6,64.4]],
+    [[23,82.6],[29,79.8],[30,79.8],[25,82.6],[23,82.6]],
+    [[37,70.7],[43,62.3],[44,62.3],[39,70.7],[37,70.7]],
+    [[48,51.1],[51,45.5],[53,45.5],[50,51.1],[48,51.1]],
+    [[51,35],[51,28.7],[53,28.7],[53,35],[51,35]],
+    [[52,22.4],[55,17.5],[56,17.5],[53,22.4],[52,22.4]],
+    [[58,12.6],[62,7],[63,7],[60,12.6],[58,12.6]],
+    [[0,3.5],[0,93.1],[64,93.1],[64,0],[63,0],[63,92.4],
+        [1,92.4],[1,3.5],[0,3.5]]
+];
+
+for (var i$1 = 0; i$1 < points$1.length; i$1++) {
+    for (var k = 0; k < points$1[i$1].length; k++) {
+        points$1[i$1][k][0] /= 10.5;
+        points$1[i$1][k][1] /= -10.5 / 0.75;
+
+        points$1[i$1][k][0] += geoCoord[0];
+        points$1[i$1][k][1] += geoCoord[1];
+    }
+}
+
+var fixNanhai = function (geo) {
+    if (geo.map === 'china') {
+        geo.regions.push(new Region(
+            'å—æµ·è¯¸å²›',
+            map(points$1, function (exterior) {
+                return {
+                    type: 'polygon',
+                    exterior: exterior
+                };
+            }), geoCoord
+        ));
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var coordsOffsetMap = {
+    'å—æµ·è¯¸å²›' : [32, 80],
+    // å…¨å›½
+    'å¹¿ä¸œ': [0, -10],
+    'é¦™æ¸¯': [10, 5],
+    'æ¾³é—¨': [-10, 10],
+    //'åŒ—äº¬': [-10, 0],
+    'å¤©æ´¥': [5, 5]
+};
+
+var fixTextCoord = function (geo) {
+    each$1(geo.regions, function (region) {
+        var coordFix = coordsOffsetMap[region.name];
+        if (coordFix) {
+            var cp = region.center;
+            cp[0] += coordFix[0] / 10.5;
+            cp[1] += -coordFix[1] / (10.5 / 0.75);
+        }
+    });
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var geoCoordMap = {
+    'Russia': [100, 60],
+    'United States': [-99, 38],
+    'United States of America': [-99, 38]
+};
+
+var fixGeoCoord = function (geo) {
+    each$1(geo.regions, function (region) {
+        var geoCoord = geoCoordMap[region.name];
+        if (geoCoord) {
+            var cp = region.center;
+            cp[0] = geoCoord[0];
+            cp[1] = geoCoord[1];
+        }
+    });
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// Fix for é’“é±¼å²›
+
+// var Region = require('../Region');
+// var zrUtil = require('zrender/src/core/util');
+
+// var geoCoord = [126, 25];
+
+var points$2 = [
+    [
+        [123.45165252685547, 25.73527164402261],
+        [123.49731445312499, 25.73527164402261],
+        [123.49731445312499, 25.750734064600884],
+        [123.45165252685547, 25.750734064600884],
+        [123.45165252685547, 25.73527164402261]
+    ]
+];
+
+var fixDiaoyuIsland = function (geo) {
+    if (geo.map === 'china') {
+        for (var i = 0, len = geo.regions.length; i < len; ++i) {
+            if (geo.regions[i].name === 'å°æ¹¾') {
+                geo.regions[i].geometries.push({
+                    type: 'polygon',
+                    exterior: points$2[0]
+                });
+            }
+        }
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// Geo fix functions
+var geoFixFuncs = [
+    fixNanhai,
+    fixTextCoord,
+    fixGeoCoord,
+    fixDiaoyuIsland
+];
+
+/**
+ * [Geo description]
+ * @param {string} name Geo name
+ * @param {string} map Map type
+ * @param {Object} geoJson
+ * @param {Object} [specialAreas]
+ *        Specify the positioned areas by left, top, width, height
+ * @param {Object.<string, string>} [nameMap]
+ *        Specify name alias
+ */
+function Geo(name, map$$1, geoJson, specialAreas, nameMap) {
+
+    View.call(this, name);
+
+    /**
+     * Map type
+     * @type {string}
+     */
+    this.map = map$$1;
+
+    this._nameCoordMap = createHashMap();
+
+    this.loadGeoJson(geoJson, specialAreas, nameMap);
+}
+
+Geo.prototype = {
+
+    constructor: Geo,
+
+    type: 'geo',
+
+    /**
+     * @param {Array.<string>}
+     * @readOnly
+     */
+    dimensions: ['lng', 'lat'],
+
+    /**
+     * If contain given lng,lat coord
+     * @param {Array.<number>}
+     * @readOnly
+     */
+    containCoord: function (coord) {
+        var regions = this.regions;
+        for (var i = 0; i < regions.length; i++) {
+            if (regions[i].contain(coord)) {
+                return true;
+            }
+        }
+        return false;
+    },
+    /**
+     * @param {Object} geoJson
+     * @param {Object} [specialAreas]
+     *        Specify the positioned areas by left, top, width, height
+     * @param {Object.<string, string>} [nameMap]
+     *        Specify name alias
+     */
+    loadGeoJson: function (geoJson, specialAreas, nameMap) {
+        // https://jsperf.com/try-catch-performance-overhead
+        try {
+            this.regions = geoJson ? parseGeoJson$1(geoJson) : [];
+        }
+        catch (e) {
+            throw 'Invalid geoJson format\n' + e.message;
+        }
+        specialAreas = specialAreas || {};
+        nameMap = nameMap || {};
+        var regions = this.regions;
+        var regionsMap = createHashMap();
+        for (var i = 0; i < regions.length; i++) {
+            var regionName = regions[i].name;
+            // Try use the alias in nameMap
+            regionName = nameMap.hasOwnProperty(regionName) ? nameMap[regionName] : regionName;
+            regions[i].name = regionName;
+
+            regionsMap.set(regionName, regions[i]);
+            // Add geoJson
+            this.addGeoCoord(regionName, regions[i].center);
+
+            // Some area like Alaska in USA map needs to be tansformed
+            // to look better
+            var specialArea = specialAreas[regionName];
+            if (specialArea) {
+                regions[i].transformTo(
+                    specialArea.left, specialArea.top, specialArea.width, specialArea.height
+                );
+            }
+        }
+
+        this._regionsMap = regionsMap;
+
+        this._rect = null;
+
+        each$1(geoFixFuncs, function (fixFunc) {
+            fixFunc(this);
+        }, this);
+    },
+
+    // Overwrite
+    transformTo: function (x, y, width, height) {
+        var rect = this.getBoundingRect();
+
+        rect = rect.clone();
+        // Longitute is inverted
+        rect.y = -rect.y - rect.height;
+
+        var rawTransformable = this._rawTransformable;
+
+        rawTransformable.transform = rect.calculateTransform(
+            new BoundingRect(x, y, width, height)
+        );
+
+        rawTransformable.decomposeTransform();
+
+        var scale = rawTransformable.scale;
+        scale[1] = -scale[1];
+
+        rawTransformable.updateTransform();
+
+        this._updateTransform();
+    },
+
+    /**
+     * @param {string} name
+     * @return {module:echarts/coord/geo/Region}
+     */
+    getRegion: function (name) {
+        return this._regionsMap.get(name);
+    },
+
+    getRegionByCoord: function (coord) {
+        var regions = this.regions;
+        for (var i = 0; i < regions.length; i++) {
+            if (regions[i].contain(coord)) {
+                return regions[i];
+            }
+        }
+    },
+
+    /**
+     * Add geoCoord for indexing by name
+     * @param {string} name
+     * @param {Array.<number>} geoCoord
+     */
+    addGeoCoord: function (name, geoCoord) {
+        this._nameCoordMap.set(name, geoCoord);
+    },
+
+    /**
+     * Get geoCoord by name
+     * @param {string} name
+     * @return {Array.<number>}
+     */
+    getGeoCoord: function (name) {
+        return this._nameCoordMap.get(name);
+    },
+
+    // Overwrite
+    getBoundingRect: function () {
+        if (this._rect) {
+            return this._rect;
+        }
+        var rect;
+
+        var regions = this.regions;
+        for (var i = 0; i < regions.length; i++) {
+            var regionRect = regions[i].getBoundingRect();
+            rect = rect || regionRect.clone();
+            rect.union(regionRect);
+        }
+        // FIXME Always return new ?
+        return (this._rect = rect || new BoundingRect(0, 0, 0, 0));
+    },
+
+    /**
+     * @param {string|Array.<number>} data
+     * @param {boolean} noRoam
+     * @param {Array.<number>} [out]
+     * @return {Array.<number>}
+     */
+    dataToPoint: function (data, noRoam, out) {
+        if (typeof data === 'string') {
+            // Map area name to geoCoord
+            data = this.getGeoCoord(data);
+        }
+        if (data) {
+            return View.prototype.dataToPoint.call(this, data, noRoam, out);
+        }
+    },
+
+    /**
+     * @inheritDoc
+     */
+    convertToPixel: curry(doConvert, 'dataToPoint'),
+
+    /**
+     * @inheritDoc
+     */
+    convertFromPixel: curry(doConvert, 'pointToData')
+
+};
+
+mixin(Geo, View);
+
+function doConvert(methodName, ecModel, finder, value) {
+    var geoModel = finder.geoModel;
+    var seriesModel = finder.seriesModel;
+
+    var coordSys = geoModel
+        ? geoModel.coordinateSystem
+        : seriesModel
+        ? (
+            seriesModel.coordinateSystem // For map.
+            || (seriesModel.getReferringComponents('geo')[0] || {}).coordinateSystem
+        )
+        : null;
+
+    return coordSys === this ? coordSys[methodName](value) : null;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Resize method bound to the geo
+ * @param {module:echarts/coord/geo/GeoModel|module:echarts/chart/map/MapModel} geoModel
+ * @param {module:echarts/ExtensionAPI} api
+ */
+function resizeGeo(geoModel, api) {
+
+    var boundingCoords = geoModel.get('boundingCoords');
+    if (boundingCoords != null) {
+        var leftTop = boundingCoords[0];
+        var rightBottom = boundingCoords[1];
+        if (isNaN(leftTop[0]) || isNaN(leftTop[1]) || isNaN(rightBottom[0]) || isNaN(rightBottom[1])) {
+            if (__DEV__) {
+                console.error('Invalid boundingCoords');
+            }
+        }
+        else {
+            this.setBoundingRect(leftTop[0], leftTop[1], rightBottom[0] - leftTop[0], rightBottom[1] - leftTop[1]);
+        }
+    }
+
+    var rect = this.getBoundingRect();
+
+    var boxLayoutOption;
+
+    var center = geoModel.get('layoutCenter');
+    var size = geoModel.get('layoutSize');
+
+    var viewWidth = api.getWidth();
+    var viewHeight = api.getHeight();
+
+    var aspectScale = geoModel.get('aspectScale') || 0.75;
+    var aspect = rect.width / rect.height * aspectScale;
+
+    var useCenterAndSize = false;
+
+    if (center && size) {
+        center = [
+            parsePercent$1(center[0], viewWidth),
+            parsePercent$1(center[1], viewHeight)
+        ];
+        size = parsePercent$1(size, Math.min(viewWidth, viewHeight));
+
+        if (!isNaN(center[0]) && !isNaN(center[1]) && !isNaN(size)) {
+            useCenterAndSize = true;
+        }
+        else {
+            if (__DEV__) {
+                console.warn('Given layoutCenter or layoutSize data are invalid. Use left/top/width/height instead.');
+            }
+        }
+    }
+
+    var viewRect;
+    if (useCenterAndSize) {
+        var viewRect = {};
+        if (aspect > 1) {
+            // Width is same with size
+            viewRect.width = size;
+            viewRect.height = size / aspect;
+        }
+        else {
+            viewRect.height = size;
+            viewRect.width = size * aspect;
+        }
+        viewRect.y = center[1] - viewRect.height / 2;
+        viewRect.x = center[0] - viewRect.width / 2;
+    }
+    else {
+        // Use left/top/width/height
+        boxLayoutOption = geoModel.getBoxLayoutParams();
+
+        // 0.75 rate
+        boxLayoutOption.aspect = aspect;
+
+        viewRect = getLayoutRect(boxLayoutOption, {
+            width: viewWidth,
+            height: viewHeight
+        });
+    }
+
+    this.setViewRect(viewRect.x, viewRect.y, viewRect.width, viewRect.height);
+
+    this.setCenter(geoModel.get('center'));
+    this.setZoom(geoModel.get('zoom'));
+}
+
+/**
+ * @param {module:echarts/coord/Geo} geo
+ * @param {module:echarts/model/Model} model
+ * @inner
+ */
+function setGeoCoords(geo, model) {
+    each$1(model.get('geoCoord'), function (geoCoord, name) {
+        geo.addGeoCoord(name, geoCoord);
+    });
+}
+
+if (__DEV__) {
+    var mapNotExistsError = function (name) {
+        console.error('Map ' + name + ' not exists. You can download map file on http://echarts.baidu.com/download-map.html');
+    };
+}
+
+var geoCreator = {
+
+    // For deciding which dimensions to use when creating list data
+    dimensions: Geo.prototype.dimensions,
+
+    create: function (ecModel, api) {
+        var geoList = [];
+
+        // FIXME Create each time may be slow
+        ecModel.eachComponent('geo', function (geoModel, idx) {
+            var name = geoModel.get('map');
+            var mapData = getMap(name);
+            if (__DEV__) {
+                if (!mapData) {
+                    mapNotExistsError(name);
+                }
+            }
+            var geo = new Geo(
+                name + idx, name,
+                mapData && mapData.geoJson, mapData && mapData.specialAreas,
+                geoModel.get('nameMap')
+            );
+            geo.zoomLimit = geoModel.get('scaleLimit');
+            geoList.push(geo);
+
+            setGeoCoords(geo, geoModel);
+
+            geoModel.coordinateSystem = geo;
+            geo.model = geoModel;
+
+            // Inject resize method
+            geo.resize = resizeGeo;
+
+            geo.resize(geoModel, api);
+        });
+
+        ecModel.eachSeries(function (seriesModel) {
+            var coordSys = seriesModel.get('coordinateSystem');
+            if (coordSys === 'geo') {
+                var geoIndex = seriesModel.get('geoIndex') || 0;
+                seriesModel.coordinateSystem = geoList[geoIndex];
+            }
+        });
+
+        // If has map series
+        var mapModelGroupBySeries = {};
+
+        ecModel.eachSeriesByType('map', function (seriesModel) {
+            if (!seriesModel.getHostGeoModel()) {
+                var mapType = seriesModel.getMapType();
+                mapModelGroupBySeries[mapType] = mapModelGroupBySeries[mapType] || [];
+                mapModelGroupBySeries[mapType].push(seriesModel);
+            }
+        });
+
+        each$1(mapModelGroupBySeries, function (mapSeries, mapType) {
+            var mapData = getMap(mapType);
+            if (__DEV__) {
+                if (!mapData) {
+                    mapNotExistsError(mapSeries[0].get('map'));
+                }
+            }
+
+            var nameMapList = map(mapSeries, function (singleMapSeries) {
+                return singleMapSeries.get('nameMap');
+            });
+            var geo = new Geo(
+                mapType, mapType,
+                mapData && mapData.geoJson, mapData && mapData.specialAreas,
+                mergeAll(nameMapList)
+            );
+            geo.zoomLimit = retrieve.apply(null, map(mapSeries, function (singleMapSeries) {
+                return singleMapSeries.get('scaleLimit');
+            }));
+            geoList.push(geo);
+
+            // Inject resize method
+            geo.resize = resizeGeo;
+
+            geo.resize(mapSeries[0], api);
+
+            each$1(mapSeries, function (singleMapSeries) {
+                singleMapSeries.coordinateSystem = geo;
+
+                setGeoCoords(geo, singleMapSeries);
+            });
+        });
+
+        return geoList;
+    },
+
+    /**
+     * Fill given regions array
+     * @param  {Array.<Object>} originRegionArr
+     * @param  {string} mapName
+     * @param  {Object} [nameMap]
+     * @return {Array}
+     */
+    getFilledRegions: function (originRegionArr, mapName, nameMap) {
+        // Not use the original
+        var regionsArr = (originRegionArr || []).slice();
+        nameMap = nameMap || {};
+
+        var map$$1 = getMap(mapName);
+        var geoJson = map$$1 && map$$1.geoJson;
+        if (!geoJson) {
+            if (__DEV__) {
+                mapNotExistsError(mapName);
+            }
+            return originRegionArr;
+        }
+
+        var dataNameMap = createHashMap();
+        var features = geoJson.features;
+        for (var i = 0; i < regionsArr.length; i++) {
+            dataNameMap.set(regionsArr[i].name, regionsArr[i]);
+        }
+
+        for (var i = 0; i < features.length; i++) {
+            var name = features[i].properties.name;
+            if (!dataNameMap.get(name)) {
+                if (nameMap.hasOwnProperty(name)) {
+                    name = nameMap[name];
+                }
+                regionsArr.push({
+                    name: name
+                });
+            }
+        }
+        return regionsArr;
+    }
+};
+
+registerCoordinateSystem('geo', geoCreator);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var MapSeries = SeriesModel.extend({
+
+    type: 'series.map',
+
+    dependencies: ['geo'],
+
+    layoutMode: 'box',
+
+    /**
+     * Only first map series of same mapType will drawMap
+     * @type {boolean}
+     */
+    needsDrawMap: false,
+
+    /**
+     * Group of all map series with same mapType
+     * @type {boolean}
+     */
+    seriesGroup: [],
+
+    init: function (option) {
+
+        // this._fillOption(option, this.getMapType());
+        // this.option = option;
+
+        MapSeries.superApply(this, 'init', arguments);
+
+        this.updateSelectedMap(this._createSelectableList());
+    },
+
+    getInitialData: function (option) {
+        return createListSimply(this, ['value']);
+    },
+
+    mergeOption: function (newOption) {
+        // this._fillOption(newOption, this.getMapType());
+
+        MapSeries.superApply(this, 'mergeOption', arguments);
+
+        this.updateSelectedMap(this._createSelectableList());
+    },
+
+    _createSelectableList: function () {
+        var data = this.getRawData();
+        var valueDim = data.mapDimension('value');
+        var targetList = [];
+        for (var i = 0, len = data.count(); i < len; i++) {
+            targetList.push({
+                name: data.getName(i),
+                value: data.get(valueDim, i),
+                selected: retrieveRawAttr(data, i, 'selected')
+            });
+        }
+
+        targetList = geoCreator.getFilledRegions(targetList, this.getMapType(), this.option.nameMap);
+
+        return targetList;
+    },
+
+    /**
+     * If no host geo model, return null, which means using a
+     * inner exclusive geo model.
+     */
+    getHostGeoModel: function () {
+        var geoIndex = this.option.geoIndex;
+        return geoIndex != null
+            ? this.dependentModels.geo[geoIndex]
+            : null;
+    },
+
+    getMapType: function () {
+        return (this.getHostGeoModel() || this).option.map;
+    },
+
+    _fillOption: function (option, mapName) {
+        // Shallow clone
+        // option = zrUtil.extend({}, option);
+
+        // option.data = geoCreator.getFilledRegions(option.data, mapName, option.nameMap);
+
+        // return option;
+    },
+
+    getRawValue: function (dataIndex) {
+        // Use value stored in data instead because it is calculated from multiple series
+        // FIXME Provide all value of multiple series ?
+        var data = this.getData();
+        return data.get(data.mapDimension('value'), dataIndex);
+    },
+
+    /**
+     * Get model of region
+     * @param  {string} name
+     * @return {module:echarts/model/Model}
+     */
+    getRegionModel: function (regionName) {
+        var data = this.getData();
+        return data.getItemModel(data.indexOfName(regionName));
+    },
+
+    /**
+     * Map tooltip formatter
+     *
+     * @param {number} dataIndex
+     */
+    formatTooltip: function (dataIndex) {
+        // FIXME orignalData and data is a bit confusing
+        var data = this.getData();
+        var formattedValue = addCommas(this.getRawValue(dataIndex));
+        var name = data.getName(dataIndex);
+
+        var seriesGroup = this.seriesGroup;
+        var seriesNames = [];
+        for (var i = 0; i < seriesGroup.length; i++) {
+            var otherIndex = seriesGroup[i].originalData.indexOfName(name);
+            var valueDim = data.mapDimension('value');
+            if (!isNaN(seriesGroup[i].originalData.get(valueDim, otherIndex))) {
+                seriesNames.push(
+                    encodeHTML(seriesGroup[i].name)
+                );
+            }
+        }
+
+        return seriesNames.join(', ') + '<br />'
+            + encodeHTML(name + ' : ' + formattedValue);
+    },
+
+    /**
+     * @implement
+     */
+    getTooltipPosition: function (dataIndex) {
+        if (dataIndex != null) {
+            var name = this.getData().getName(dataIndex);
+            var geo = this.coordinateSystem;
+            var region = geo.getRegion(name);
+
+            return region && geo.dataToPoint(region.center);
+        }
+    },
+
+    setZoom: function (zoom) {
+        this.option.zoom = zoom;
+    },
+
+    setCenter: function (center) {
+        this.option.center = center;
+    },
+
+    defaultOption: {
+        // ä¸€çº§å±‚å 
+        zlevel: 0,
+        // äºŒçº§å±‚å 
+        z: 2,
+
+        coordinateSystem: 'geo',
+
+        // map should be explicitly specified since ec3.
+        map: '',
+
+        // If `geoIndex` is not specified, a exclusive geo will be
+        // created. Otherwise use the specified geo component, and
+        // `map` and `mapType` are ignored.
+        // geoIndex: 0,
+
+        // 'center' | 'left' | 'right' | 'x%' | {number}
+        left: 'center',
+        // 'center' | 'top' | 'bottom' | 'x%' | {number}
+        top: 'center',
+        // right
+        // bottom
+        // width:
+        // height
+
+        // Aspect is width / height. Inited to be geoJson bbox aspect
+        // This parameter is used for scale this aspect
+        aspectScale: 0.75,
+
+        ///// Layout with center and size
+        // If you wan't to put map in a fixed size box with right aspect ratio
+        // This two properties may more conveninet
+        // layoutCenter: [50%, 50%]
+        // layoutSize: 100
+
+
+        // æ•°å€¼åˆå¹¶æ–¹å¼ï¼Œé»˜è®¤åŠ å’Œï¼Œå¯é€‰ä¸ºï¼š
+        // 'sum' | 'average' | 'max' | 'min'
+        // mapValueCalculation: 'sum',
+        // åœ°å›¾æ•°å€¼è®¡ç®—ç»“æžœå°æ•°ç²¾åº¦
+        // mapValuePrecision: 0,
+
+
+        // æ˜¾ç¤ºå›¾ä¾‹é¢œè‰²æ ‡è¯†ï¼ˆç³»åˆ—æ ‡è¯†çš„å°åœ†ç‚¹ï¼‰ï¼Œå›¾ä¾‹å¼€å¯æ—¶æœ‰æ•ˆ
+        showLegendSymbol: true,
+        // é€‰æ‹©æ¨¡å¼ï¼Œé»˜è®¤å…³é—ï¼Œå¯é€‰singleï¼Œmultiple
+        // selectedMode: false,
+        dataRangeHoverLink: true,
+        // æ˜¯å¦å¼€å¯ç¼©æ”¾åŠæ¼«æ¸¸æ¨¡å¼
+        // roam: false,
+
+        // Define left-top, right-bottom coords to control view
+        // For example, [ [180, 90], [-180, -90] ],
+        // higher priority than center and zoom
+        boundingCoords: null,
+
+        // Default on center of map
+        center: null,
+
+        zoom: 1,
+
+        scaleLimit: null,
+
+        label: {
+            show: false,
+            color: '#000'
+        },
+        // scaleLimit: null,
+        itemStyle: {
+            borderWidth: 0.5,
+            borderColor: '#444',
+            areaColor: '#eee'
+        },
+
+        emphasis: {
+            label: {
+                show: true,
+                color: 'rgb(100,0,0)'
+            },
+            itemStyle: {
+                areaColor: 'rgba(255,215,0,0.8)'
+            }
+        }
+    }
+
+});
+
+mixin(MapSeries, selectableMixin);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var ATTR = '\0_ec_interaction_mutex';
+
+function take(zr, resourceKey, userKey) {
+    var store = getStore(zr);
+    store[resourceKey] = userKey;
+}
+
+function release(zr, resourceKey, userKey) {
+    var store = getStore(zr);
+    var uKey = store[resourceKey];
+
+    if (uKey === userKey) {
+        store[resourceKey] = null;
+    }
+}
+
+function isTaken(zr, resourceKey) {
+    return !!getStore(zr)[resourceKey];
+}
+
+function getStore(zr) {
+    return zr[ATTR] || (zr[ATTR] = {});
+}
+
+/**
+ * payload: {
+ *     type: 'takeGlobalCursor',
+ *     key: 'dataZoomSelect', or 'brush', or ...,
+ *         If no userKey, release global cursor.
+ * }
+ */
+registerAction(
+    {type: 'takeGlobalCursor', event: 'globalCursorTaken', update: 'update'},
+    function () {}
+);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @alias module:echarts/component/helper/RoamController
+ * @constructor
+ * @mixin {module:zrender/mixin/Eventful}
+ *
+ * @param {module:zrender/zrender~ZRender} zr
+ */
+function RoamController(zr) {
+
+    /**
+     * @type {Function}
+     */
+    this.pointerChecker;
+
+    /**
+     * @type {module:zrender}
+     */
+    this._zr = zr;
+
+    /**
+     * @type {Object}
+     */
+    this._opt = {};
+
+    // Avoid two roamController bind the same handler
+    var bind$$1 = bind;
+    var mousedownHandler = bind$$1(mousedown, this);
+    var mousemoveHandler = bind$$1(mousemove, this);
+    var mouseupHandler = bind$$1(mouseup, this);
+    var mousewheelHandler = bind$$1(mousewheel, this);
+    var pinchHandler = bind$$1(pinch, this);
+
+    Eventful.call(this);
+
+    /**
+     * @param {Function} pointerChecker
+     *                   input: x, y
+     *                   output: boolean
+     */
+    this.setPointerChecker = function (pointerChecker) {
+        this.pointerChecker = pointerChecker;
+    };
+
+    /**
+     * Notice: only enable needed types. For example, if 'zoom'
+     * is not needed, 'zoom' should not be enabled, otherwise
+     * default mousewheel behaviour (scroll page) will be disabled.
+     *
+     * @param  {boolean|string} [controlType=true] Specify the control type,
+     *                          which can be null/undefined or true/false
+     *                          or 'pan/move' or 'zoom'/'scale'
+     * @param {Object} [opt]
+     * @param {Object} [opt.zoomOnMouseWheel=true]
+     * @param {Object} [opt.moveOnMouseMove=true]
+     * @param {Object} [opt.preventDefaultMouseMove=true] When pan.
+     */
+    this.enable = function (controlType, opt) {
+
+        // Disable previous first
+        this.disable();
+
+        this._opt = defaults(clone(opt) || {}, {
+            zoomOnMouseWheel: true,
+            moveOnMouseMove: true,
+            preventDefaultMouseMove: true
+        });
+
+        if (controlType == null) {
+            controlType = true;
+        }
+
+        if (controlType === true || (controlType === 'move' || controlType === 'pan')) {
+            zr.on('mousedown', mousedownHandler);
+            zr.on('mousemove', mousemoveHandler);
+            zr.on('mouseup', mouseupHandler);
+        }
+        if (controlType === true || (controlType === 'scale' || controlType === 'zoom')) {
+            zr.on('mousewheel', mousewheelHandler);
+            zr.on('pinch', pinchHandler);
+        }
+    };
+
+    this.disable = function () {
+        zr.off('mousedown', mousedownHandler);
+        zr.off('mousemove', mousemoveHandler);
+        zr.off('mouseup', mouseupHandler);
+        zr.off('mousewheel', mousewheelHandler);
+        zr.off('pinch', pinchHandler);
+    };
+
+    this.dispose = this.disable;
+
+    this.isDragging = function () {
+        return this._dragging;
+    };
+
+    this.isPinching = function () {
+        return this._pinching;
+    };
+}
+
+mixin(RoamController, Eventful);
+
+
+function mousedown(e) {
+    if (notLeftMouse(e)
+        || (e.target && e.target.draggable)
+    ) {
+        return;
+    }
+
+    var x = e.offsetX;
+    var y = e.offsetY;
+
+    // Only check on mosedown, but not mousemove.
+    // Mouse can be out of target when mouse moving.
+    if (this.pointerChecker && this.pointerChecker(e, x, y)) {
+        this._x = x;
+        this._y = y;
+        this._dragging = true;
+    }
+}
+
+function mousemove(e) {
+    if (notLeftMouse(e)
+        || !checkKeyBinding(this, 'moveOnMouseMove', e)
+        || !this._dragging
+        || e.gestureEvent === 'pinch'
+        || isTaken(this._zr, 'globalPan')
+    ) {
+        return;
+    }
+
+    var x = e.offsetX;
+    var y = e.offsetY;
+
+    var oldX = this._x;
+    var oldY = this._y;
+
+    var dx = x - oldX;
+    var dy = y - oldY;
+
+    this._x = x;
+    this._y = y;
+
+    this._opt.preventDefaultMouseMove && stop(e.event);
+
+    this.trigger('pan', dx, dy, oldX, oldY, x, y);
+}
+
+function mouseup(e) {
+    if (!notLeftMouse(e)) {
+        this._dragging = false;
+    }
+}
+
+function mousewheel(e) {
+    // wheelDelta maybe -0 in chrome mac.
+    if (!checkKeyBinding(this, 'zoomOnMouseWheel', e) || e.wheelDelta === 0) {
+        return;
+    }
+
+    // Convenience:
+    // Mac and VM Windows on Mac: scroll up: zoom out.
+    // Windows: scroll up: zoom in.
+    var zoomDelta = e.wheelDelta > 0 ? 1.1 : 1 / 1.1;
+    zoom.call(this, e, zoomDelta, e.offsetX, e.offsetY);
+}
+
+function pinch(e) {
+    if (isTaken(this._zr, 'globalPan')) {
+        return;
+    }
+    var zoomDelta = e.pinchScale > 1 ? 1.1 : 1 / 1.1;
+    zoom.call(this, e, zoomDelta, e.pinchX, e.pinchY);
+}
+
+function zoom(e, zoomDelta, zoomX, zoomY) {
+    if (this.pointerChecker && this.pointerChecker(e, zoomX, zoomY)) {
+        // When mouse is out of roamController rect,
+        // default befavoius should not be be disabled, otherwise
+        // page sliding is disabled, contrary to expectation.
+        stop(e.event);
+
+        this.trigger('zoom', zoomDelta, zoomX, zoomY);
+    }
+}
+
+function checkKeyBinding(roamController, prop, e) {
+    var setting = roamController._opt[prop];
+    return setting
+        && (!isString(setting) || e.event[setting + 'Key']);
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * For geo and graph.
+ *
+ * @param {Object} controllerHost
+ * @param {module:zrender/Element} controllerHost.target
+ */
+function updateViewOnPan(controllerHost, dx, dy) {
+    var target = controllerHost.target;
+    var pos = target.position;
+    pos[0] += dx;
+    pos[1] += dy;
+    target.dirty();
+}
+
+/**
+ * For geo and graph.
+ *
+ * @param {Object} controllerHost
+ * @param {module:zrender/Element} controllerHost.target
+ * @param {number} controllerHost.zoom
+ * @param {number} controllerHost.zoomLimit like: {min: 1, max: 2}
+ */
+function updateViewOnZoom(controllerHost, zoomDelta, zoomX, zoomY) {
+    var target = controllerHost.target;
+    var zoomLimit = controllerHost.zoomLimit;
+    var pos = target.position;
+    var scale = target.scale;
+
+    var newZoom = controllerHost.zoom = controllerHost.zoom || 1;
+    newZoom *= zoomDelta;
+    if (zoomLimit) {
+        var zoomMin = zoomLimit.min || 0;
+        var zoomMax = zoomLimit.max || Infinity;
+        newZoom = Math.max(
+            Math.min(zoomMax, newZoom),
+            zoomMin
+        );
+    }
+    var zoomScale = newZoom / controllerHost.zoom;
+    controllerHost.zoom = newZoom;
+    // Keep the mouse center when scaling
+    pos[0] -= (zoomX - pos[0]) * (zoomScale - 1);
+    pos[1] -= (zoomY - pos[1]) * (zoomScale - 1);
+    scale[0] *= zoomScale;
+    scale[1] *= zoomScale;
+
+    target.dirty();
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+var IRRELEVANT_EXCLUDES = {'axisPointer': 1, 'tooltip': 1, 'brush': 1};
+
+/**
+ * Avoid that: mouse click on a elements that is over geo or graph,
+ * but roam is triggered.
+ */
+function onIrrelevantElement(e, api, targetCoordSysModel) {
+    var model = api.getComponentByElement(e.topTarget);
+    // If model is axisModel, it works only if it is injected with coordinateSystem.
+    var coordSys = model && model.coordinateSystem;
+    return model
+        && model !== targetCoordSysModel
+        && !IRRELEVANT_EXCLUDES[model.mainType]
+        && (coordSys && coordSys.model !== targetCoordSysModel);
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+function getFixedItemStyle(model, scale) {
+    var itemStyle = model.getItemStyle();
+    var areaColor = model.get('areaColor');
+
+    // If user want the color not to be changed when hover,
+    // they should both set areaColor and color to be null.
+    if (areaColor != null) {
+        itemStyle.fill = areaColor;
+    }
+
+    return itemStyle;
+}
+
+function updateMapSelectHandler(mapDraw, mapOrGeoModel, group, api, fromView) {
+    group.off('click');
+    group.off('mousedown');
+
+    if (mapOrGeoModel.get('selectedMode')) {
+
+        group.on('mousedown', function () {
+            mapDraw._mouseDownFlag = true;
+        });
+
+        group.on('click', function (e) {
+            if (!mapDraw._mouseDownFlag) {
+                return;
+            }
+            mapDraw._mouseDownFlag = false;
+
+            var el = e.target;
+            while (!el.__regions) {
+                el = el.parent;
+            }
+            if (!el) {
+                return;
+            }
+
+            var action = {
+                type: (mapOrGeoModel.mainType === 'geo' ? 'geo' : 'map') + 'ToggleSelect',
+                batch: map(el.__regions, function (region) {
+                    return {
+                        name: region.name,
+                        from: fromView.uid
+                    };
+                })
+            };
+            action[mapOrGeoModel.mainType + 'Id'] = mapOrGeoModel.id;
+
+            api.dispatchAction(action);
+
+            updateMapSelected(mapOrGeoModel, group);
+        });
+    }
+}
+
+function updateMapSelected(mapOrGeoModel, group) {
+    // FIXME
+    group.eachChild(function (otherRegionEl) {
+        each$1(otherRegionEl.__regions, function (region) {
+            otherRegionEl.trigger(mapOrGeoModel.isSelected(region.name) ? 'emphasis' : 'normal');
+        });
+    });
+}
+
+/**
+ * @alias module:echarts/component/helper/MapDraw
+ * @param {module:echarts/ExtensionAPI} api
+ * @param {boolean} updateGroup
+ */
+function MapDraw(api, updateGroup) {
+
+    var group = new Group();
+
+    /**
+     * @type {module:echarts/component/helper/RoamController}
+     * @private
+     */
+    this._controller = new RoamController(api.getZr());
+
+    /**
+     * @type {Object} {target, zoom, zoomLimit}
+     * @private
+     */
+    this._controllerHost = {target: updateGroup ? group : null};
+
+    /**
+     * @type {module:zrender/container/Group}
+     * @readOnly
+     */
+    this.group = group;
+
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._updateGroup = updateGroup;
+
+    /**
+     * This flag is used to make sure that only one among
+     * `pan`, `zoom`, `click` can occurs, otherwise 'selected'
+     * action may be triggered when `pan`, which is unexpected.
+     * @type {booelan}
+     */
+    this._mouseDownFlag;
+}
+
+MapDraw.prototype = {
+
+    constructor: MapDraw,
+
+    draw: function (mapOrGeoModel, ecModel, api, fromView, payload) {
+
+        var isGeo = mapOrGeoModel.mainType === 'geo';
+
+        // Map series has data. GEO model that controlled by map series
+        // will be assigned with map data. Other GEO model has no data.
+        var data = mapOrGeoModel.getData && mapOrGeoModel.getData();
+        isGeo && ecModel.eachComponent({mainType: 'series', subType: 'map'}, function (mapSeries) {
+            if (!data && mapSeries.getHostGeoModel() === mapOrGeoModel) {
+                data = mapSeries.getData();
+            }
+        });
+
+        var geo = mapOrGeoModel.coordinateSystem;
+
+        var group = this.group;
+
+        var scale = geo.scale;
+        var groupNewProp = {
+            position: geo.position,
+            scale: scale
+        };
+
+        // No animation when first draw or in action
+        if (!group.childAt(0) || payload) {
+            group.attr(groupNewProp);
+        }
+        else {
+            updateProps(group, groupNewProp, mapOrGeoModel);
+        }
+
+        group.removeAll();
+
+        var itemStyleAccessPath = ['itemStyle'];
+        var hoverItemStyleAccessPath = ['emphasis', 'itemStyle'];
+        var labelAccessPath = ['label'];
+        var hoverLabelAccessPath = ['emphasis', 'label'];
+        var nameMap = createHashMap();
+
+        each$1(geo.regions, function (region) {
+
+            // Consider in GeoJson properties.name may be duplicated, for example,
+            // there is multiple region named "United Kindom" or "France" (so many
+            // colonies). And it is not appropriate to merge them in geo, which
+            // will make them share the same label and bring trouble in label
+            // location calculation.
+            var regionGroup = nameMap.get(region.name)
+                || nameMap.set(region.name, new Group());
+
+            var compoundPath = new CompoundPath({
+                shape: {
+                    paths: []
+                }
+            });
+            regionGroup.add(compoundPath);
+
+            var regionModel = mapOrGeoModel.getRegionModel(region.name) || mapOrGeoModel;
+
+            var itemStyleModel = regionModel.getModel(itemStyleAccessPath);
+            var hoverItemStyleModel = regionModel.getModel(hoverItemStyleAccessPath);
+            var itemStyle = getFixedItemStyle(itemStyleModel, scale);
+            var hoverItemStyle = getFixedItemStyle(hoverItemStyleModel, scale);
+
+            var labelModel = regionModel.getModel(labelAccessPath);
+            var hoverLabelModel = regionModel.getModel(hoverLabelAccessPath);
+
+            var dataIdx;
+            // Use the itemStyle in data if has data
+            if (data) {
+                dataIdx = data.indexOfName(region.name);
+                // Only visual color of each item will be used. It can be encoded by dataRange
+                // But visual color of series is used in symbol drawing
+                //
+                // Visual color for each series is for the symbol draw
+                var visualColor = data.getItemVisual(dataIdx, 'color', true);
+                if (visualColor) {
+                    itemStyle.fill = visualColor;
+                }
+            }
+
+            each$1(region.geometries, function (geometry) {
+                if (geometry.type !== 'polygon') {
+                    return;
+                }
+                compoundPath.shape.paths.push(new Polygon({
+                    shape: {
+                        points: geometry.exterior
+                    }
+                }));
+
+                for (var i = 0; i < (geometry.interiors ? geometry.interiors.length : 0); i++) {
+                    compoundPath.shape.paths.push(new Polygon({
+                        shape: {
+                            points: geometry.interiors[i]
+                        }
+                    }));
+                }
+            });
+
+            compoundPath.setStyle(itemStyle);
+            compoundPath.style.strokeNoScale = true;
+            compoundPath.culling = true;
+            // Label
+            var showLabel = labelModel.get('show');
+            var hoverShowLabel = hoverLabelModel.get('show');
+
+            var isDataNaN = data && isNaN(data.get(data.mapDimension('value'), dataIdx));
+            var itemLayout = data && data.getItemLayout(dataIdx);
+            // In the following cases label will be drawn
+            // 1. In map series and data value is NaN
+            // 2. In geo component
+            // 4. Region has no series legendSymbol, which will be add a showLabel flag in mapSymbolLayout
+            if (
+                (isGeo || isDataNaN && (showLabel || hoverShowLabel))
+                || (itemLayout && itemLayout.showLabel)
+                ) {
+                var query = !isGeo ? dataIdx : region.name;
+                var labelFetcher;
+
+                // Consider dataIdx not found.
+                if (!data || dataIdx >= 0) {
+                    labelFetcher = mapOrGeoModel;
+                }
+
+                var textEl = new Text({
+                    position: region.center.slice(),
+                    scale: [1 / scale[0], 1 / scale[1]],
+                    z2: 10,
+                    silent: true
+                });
+
+                setLabelStyle(
+                    textEl.style, textEl.hoverStyle = {}, labelModel, hoverLabelModel,
+                    {
+                        labelFetcher: labelFetcher,
+                        labelDataIndex: query,
+                        defaultText: region.name,
+                        useInsideStyle: false
+                    },
+                    {
+                        textAlign: 'center',
+                        textVerticalAlign: 'middle'
+                    }
+                );
+
+                regionGroup.add(textEl);
+            }
+
+            // setItemGraphicEl, setHoverStyle after all polygons and labels
+            // are added to the rigionGroup
+            if (data) {
+                data.setItemGraphicEl(dataIdx, regionGroup);
+            }
+            else {
+                var regionModel = mapOrGeoModel.getRegionModel(region.name);
+                // Package custom mouse event for geo component
+                compoundPath.eventData = {
+                    componentType: 'geo',
+                    geoIndex: mapOrGeoModel.componentIndex,
+                    name: region.name,
+                    region: (regionModel && regionModel.option) || {}
+                };
+            }
+
+            var groupRegions = regionGroup.__regions || (regionGroup.__regions = []);
+            groupRegions.push(region);
+
+            setHoverStyle(
+                regionGroup,
+                hoverItemStyle,
+                {hoverSilentOnTouch: !!mapOrGeoModel.get('selectedMode')}
+            );
+
+            group.add(regionGroup);
+        });
+
+        this._updateController(mapOrGeoModel, ecModel, api);
+
+        updateMapSelectHandler(this, mapOrGeoModel, group, api, fromView);
+
+        updateMapSelected(mapOrGeoModel, group);
+    },
+
+    remove: function () {
+        this.group.removeAll();
+        this._controller.dispose();
+        this._controllerHost = {};
+    },
+
+    _updateController: function (mapOrGeoModel, ecModel, api) {
+        var geo = mapOrGeoModel.coordinateSystem;
+        var controller = this._controller;
+        var controllerHost = this._controllerHost;
+
+        controllerHost.zoomLimit = mapOrGeoModel.get('scaleLimit');
+        controllerHost.zoom = geo.getZoom();
+
+        // roamType is will be set default true if it is null
+        controller.enable(mapOrGeoModel.get('roam') || false);
+        var mainType = mapOrGeoModel.mainType;
+
+        function makeActionBase() {
+            var action = {
+                type: 'geoRoam',
+                componentType: mainType
+            };
+            action[mainType + 'Id'] = mapOrGeoModel.id;
+            return action;
+        }
+
+        controller.off('pan').on('pan', function (dx, dy) {
+            this._mouseDownFlag = false;
+
+            updateViewOnPan(controllerHost, dx, dy);
+
+            api.dispatchAction(extend(makeActionBase(), {
+                dx: dx,
+                dy: dy
+            }));
+        }, this);
+
+        controller.off('zoom').on('zoom', function (zoom, mouseX, mouseY) {
+            this._mouseDownFlag = false;
+
+            updateViewOnZoom(controllerHost, zoom, mouseX, mouseY);
+
+            api.dispatchAction(extend(makeActionBase(), {
+                zoom: zoom,
+                originX: mouseX,
+                originY: mouseY
+            }));
+
+            if (this._updateGroup) {
+                var group = this.group;
+                var scale = group.scale;
+                group.traverse(function (el) {
+                    if (el.type === 'text') {
+                        el.attr('scale', [1 / scale[0], 1 / scale[1]]);
+                    }
+                });
+            }
+        }, this);
+
+        controller.setPointerChecker(function (e, x, y) {
+            return geo.getViewRectAfterRoam().contain(x, y)
+                && !onIrrelevantElement(e, api, mapOrGeoModel);
+        });
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+extendChartView({
+
+    type: 'map',
+
+    render: function (mapModel, ecModel, api, payload) {
+        // Not render if it is an toggleSelect action from self
+        if (payload && payload.type === 'mapToggleSelect'
+            && payload.from === this.uid
+        ) {
+            return;
+        }
+
+        var group = this.group;
+        group.removeAll();
+
+        if (mapModel.getHostGeoModel()) {
+            return;
+        }
+
+        // Not update map if it is an roam action from self
+        if (!(payload && payload.type === 'geoRoam'
+                && payload.componentType === 'series'
+                && payload.seriesId === mapModel.id
+            )
+        ) {
+            if (mapModel.needsDrawMap) {
+                var mapDraw = this._mapDraw || new MapDraw(api, true);
+                group.add(mapDraw.group);
+
+                mapDraw.draw(mapModel, ecModel, api, this, payload);
+
+                this._mapDraw = mapDraw;
+            }
+            else {
+                // Remove drawed map
+                this._mapDraw && this._mapDraw.remove();
+                this._mapDraw = null;
+            }
+        }
+        else {
+            var mapDraw = this._mapDraw;
+            mapDraw && group.add(mapDraw.group);
+        }
+
+        mapModel.get('showLegendSymbol') && ecModel.getComponent('legend')
+            && this._renderSymbols(mapModel, ecModel, api);
+    },
+
+    remove: function () {
+        this._mapDraw && this._mapDraw.remove();
+        this._mapDraw = null;
+        this.group.removeAll();
+    },
+
+    dispose: function () {
+        this._mapDraw && this._mapDraw.remove();
+        this._mapDraw = null;
+    },
+
+    _renderSymbols: function (mapModel, ecModel, api) {
+        var originalData = mapModel.originalData;
+        var group = this.group;
+
+        originalData.each(originalData.mapDimension('value'), function (value, idx) {
+            if (isNaN(value)) {
+                return;
+            }
+
+            var layout = originalData.getItemLayout(idx);
+
+            if (!layout || !layout.point) {
+                // Not exists in map
+                return;
+            }
+
+            var point = layout.point;
+            var offset = layout.offset;
+
+            var circle = new Circle({
+                style: {
+                    // Because the special of map draw.
+                    // Which needs statistic of multiple series and draw on one map.
+                    // And each series also need a symbol with legend color
+                    //
+                    // Layout and visual are put one the different data
+                    fill: mapModel.getData().getVisual('color')
+                },
+                shape: {
+                    cx: point[0] + offset * 9,
+                    cy: point[1],
+                    r: 3
+                },
+                silent: true,
+                // Do not overlap the first series, on which labels are displayed.
+                z2: !offset ? 10 : 8
+            });
+
+            // First data on the same region
+            if (!offset) {
+                var fullData = mapModel.mainSeries.getData();
+                var name = originalData.getName(idx);
+
+                var fullIndex = fullData.indexOfName(name);
+
+                var itemModel = originalData.getItemModel(idx);
+                var labelModel = itemModel.getModel('label');
+                var hoverLabelModel = itemModel.getModel('emphasis.label');
+
+                var polygonGroups = fullData.getItemGraphicEl(fullIndex);
+
+                var normalText = retrieve2(
+                    mapModel.getFormattedLabel(idx, 'normal'),
+                    name
+                );
+                var emphasisText = retrieve2(
+                    mapModel.getFormattedLabel(idx, 'emphasis'),
+                    normalText
+                );
+
+                var onEmphasis = function () {
+                    var hoverStyle = setTextStyle({}, hoverLabelModel, {
+                        text: hoverLabelModel.get('show') ? emphasisText : null
+                    }, {isRectText: true, useInsideStyle: false}, true);
+                    circle.style.extendFrom(hoverStyle);
+                    // Make label upper than others if overlaps.
+                    circle.__mapOriginalZ2 = circle.z2;
+                    circle.z2 += 1;
+                };
+
+                var onNormal = function () {
+                    setTextStyle(circle.style, labelModel, {
+                        text: labelModel.get('show') ? normalText : null,
+                        textPosition: labelModel.getShallow('position') || 'bottom'
+                    }, {isRectText: true, useInsideStyle: false});
+
+                    if (circle.__mapOriginalZ2 != null) {
+                        circle.z2 = circle.__mapOriginalZ2;
+                        circle.__mapOriginalZ2 = null;
+                    }
+                };
+
+                polygonGroups.on('mouseover', onEmphasis)
+                    .on('mouseout', onNormal)
+                    .on('emphasis', onEmphasis)
+                    .on('normal', onNormal);
+
+                onNormal();
+            }
+
+            group.add(circle);
+        });
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @param {module:echarts/coord/View} view
+ * @param {Object} payload
+ * @param {Object} [zoomLimit]
+ */
+function updateCenterAndZoom(
+    view, payload, zoomLimit
+) {
+    var previousZoom = view.getZoom();
+    var center = view.getCenter();
+    var zoom = payload.zoom;
+
+    var point = view.dataToPoint(center);
+
+    if (payload.dx != null && payload.dy != null) {
+        point[0] -= payload.dx;
+        point[1] -= payload.dy;
+
+        var center = view.pointToData(point);
+        view.setCenter(center);
+    }
+    if (zoom != null) {
+        if (zoomLimit) {
+            var zoomMin = zoomLimit.min || 0;
+            var zoomMax = zoomLimit.max || Infinity;
+            zoom = Math.max(
+                Math.min(previousZoom * zoom, zoomMax),
+                zoomMin
+            ) / previousZoom;
+        }
+
+        // Zoom on given point(originX, originY)
+        view.scale[0] *= zoom;
+        view.scale[1] *= zoom;
+        var position = view.position;
+        var fixX = (payload.originX - position[0]) * (zoom - 1);
+        var fixY = (payload.originY - position[1]) * (zoom - 1);
+
+        position[0] -= fixX;
+        position[1] -= fixY;
+
+        view.updateTransform();
+        // Get the new center
+        var center = view.pointToData(point);
+        view.setCenter(center);
+        view.setZoom(zoom * previousZoom);
+    }
+
+    return {
+        center: view.getCenter(),
+        zoom: view.getZoom()
+    };
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @payload
+ * @property {string} [componentType=series]
+ * @property {number} [dx]
+ * @property {number} [dy]
+ * @property {number} [zoom]
+ * @property {number} [originX]
+ * @property {number} [originY]
+ */
+registerAction({
+    type: 'geoRoam',
+    event: 'geoRoam',
+    update: 'updateTransform'
+}, function (payload, ecModel) {
+    var componentType = payload.componentType || 'series';
+
+    ecModel.eachComponent(
+        { mainType: componentType, query: payload },
+        function (componentModel) {
+            var geo = componentModel.coordinateSystem;
+            if (geo.type !== 'geo') {
+                return;
+            }
+
+            var res = updateCenterAndZoom(
+                geo, payload, componentModel.get('scaleLimit')
+            );
+
+            componentModel.setCenter
+                && componentModel.setCenter(res.center);
+
+            componentModel.setZoom
+                && componentModel.setZoom(res.zoom);
+
+            // All map series with same `map` use the same geo coordinate system
+            // So the center and zoom must be in sync. Include the series not selected by legend
+            if (componentType === 'series') {
+                each$1(componentModel.seriesGroup, function (seriesModel) {
+                    seriesModel.setCenter(res.center);
+                    seriesModel.setZoom(res.zoom);
+                });
+            }
+        }
+    );
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var mapSymbolLayout = function (ecModel) {
+
+    var processedMapType = {};
+
+    ecModel.eachSeriesByType('map', function (mapSeries) {
+        var mapType = mapSeries.getMapType();
+        if (mapSeries.getHostGeoModel() || processedMapType[mapType]) {
+            return;
+        }
+
+        var mapSymbolOffsets = {};
+
+        each$1(mapSeries.seriesGroup, function (subMapSeries) {
+            var geo = subMapSeries.coordinateSystem;
+            var data = subMapSeries.originalData;
+            if (subMapSeries.get('showLegendSymbol') && ecModel.getComponent('legend')) {
+                data.each(data.mapDimension('value'), function (value, idx) {
+                    var name = data.getName(idx);
+                    var region = geo.getRegion(name);
+
+                    // If input series.data is [11, 22, '-'/null/undefined, 44],
+                    // it will be filled with NaN: [11, 22, NaN, 44] and NaN will
+                    // not be drawn. So here must validate if value is NaN.
+                    if (!region || isNaN(value)) {
+                        return;
+                    }
+
+                    var offset = mapSymbolOffsets[name] || 0;
+
+                    var point = geo.dataToPoint(region.center);
+
+                    mapSymbolOffsets[name] = offset + 1;
+
+                    data.setItemLayout(idx, {
+                        point: point,
+                        offset: offset
+                    });
+                });
+            }
+        });
+
+        // Show label of those region not has legendSymbol(which is offset 0)
+        var data = mapSeries.getData();
+        data.each(function (idx) {
+            var name = data.getName(idx);
+            var layout = data.getItemLayout(idx) || {};
+            layout.showLabel = !mapSymbolOffsets[name];
+            data.setItemLayout(idx, layout);
+        });
+
+        processedMapType[mapType] = true;
+    });
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+var mapVisual = function (ecModel) {
+    ecModel.eachSeriesByType('map', function (seriesModel) {
+        var colorList = seriesModel.get('color');
+        var itemStyleModel = seriesModel.getModel('itemStyle');
+
+        var areaColor = itemStyleModel.get('areaColor');
+        var color = itemStyleModel.get('color')
+            || colorList[seriesModel.seriesIndex % colorList.length];
+
+        seriesModel.getData().setVisual({
+            'areaColor': areaColor,
+            'color': color
+        });
+    });
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// FIXME å…¬ç”¨ï¼Ÿ
+/**
+ * @param {Array.<module:echarts/data/List>} datas
+ * @param {string} statisticType 'average' 'sum'
+ * @inner
+ */
+function dataStatistics(datas, statisticType) {
+    var dataNameMap = {};
+
+    each$1(datas, function (data) {
+        data.each(data.mapDimension('value'), function (value, idx) {
+            // Add prefix to avoid conflict with Object.prototype.
+            var mapKey = 'ec-' + data.getName(idx);
+            dataNameMap[mapKey] = dataNameMap[mapKey] || [];
+            if (!isNaN(value)) {
+                dataNameMap[mapKey].push(value);
+            }
+        });
+    });
+
+    return datas[0].map(datas[0].mapDimension('value'), function (value, idx) {
+        var mapKey = 'ec-' + datas[0].getName(idx);
+        var sum = 0;
+        var min = Infinity;
+        var max = -Infinity;
+        var len = dataNameMap[mapKey].length;
+        for (var i = 0; i < len; i++) {
+            min = Math.min(min, dataNameMap[mapKey][i]);
+            max = Math.max(max, dataNameMap[mapKey][i]);
+            sum += dataNameMap[mapKey][i];
+        }
+        var result;
+        if (statisticType === 'min') {
+            result = min;
+        }
+        else if (statisticType === 'max') {
+            result = max;
+        }
+        else if (statisticType === 'average') {
+            result = sum / len;
+        }
+        else {
+            result = sum;
+        }
+        return len === 0 ? NaN : result;
+    });
+}
+
+var mapDataStatistic = function (ecModel) {
+    var seriesGroups = {};
+    ecModel.eachSeriesByType('map', function (seriesModel) {
+        var hostGeoModel = seriesModel.getHostGeoModel();
+        var key = hostGeoModel ? 'o' + hostGeoModel.id : 'i' + seriesModel.getMapType();
+        (seriesGroups[key] = seriesGroups[key] || []).push(seriesModel);
+    });
+
+    each$1(seriesGroups, function (seriesList, key) {
+        var data = dataStatistics(
+            map(seriesList, function (seriesModel) {
+                return seriesModel.getData();
+            }),
+            seriesList[0].get('mapValueCalculation')
+        );
+
+        for (var i = 0; i < seriesList.length; i++) {
+            seriesList[i].originalData = seriesList[i].getData();
+        }
+
+        // FIXME Put where?
+        for (var i = 0; i < seriesList.length; i++) {
+            seriesList[i].seriesGroup = seriesList;
+            seriesList[i].needsDrawMap = i === 0 && !seriesList[i].getHostGeoModel();
+
+            seriesList[i].setData(data.cloneShallow());
+            seriesList[i].mainSeries = seriesList[0];
+        }
+    });
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var backwardCompat$2 = function (option) {
+    // Save geoCoord
+    var mapSeries = [];
+    each$1(option.series, function (seriesOpt) {
+        if (seriesOpt && seriesOpt.type === 'map') {
+            mapSeries.push(seriesOpt);
+            seriesOpt.map = seriesOpt.map || seriesOpt.mapType;
+            // Put x, y, width, height, x2, y2 in the top level
+            defaults(seriesOpt, seriesOpt.mapLocation);
+        }
+    });
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+registerLayout(mapSymbolLayout);
+registerVisual(mapVisual);
+registerProcessor(PRIORITY.PROCESSOR.STATISTIC, mapDataStatistic);
+registerPreprocessor(backwardCompat$2);
+
+createDataSelectAction('map', [{
+    type: 'mapToggleSelect',
+    event: 'mapselectchanged',
+    method: 'toggleSelected'
+}, {
+    type: 'mapSelect',
+    event: 'mapselected',
+    method: 'select'
+}, {
+    type: 'mapUnSelect',
+    event: 'mapunselected',
+    method: 'unSelect'
+}]);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Link lists and struct (graph or tree)
+ */
+
+var each$7 = each$1;
+
+var DATAS = '\0__link_datas';
+var MAIN_DATA = '\0__link_mainData';
+
+// Caution:
+// In most case, either list or its shallow clones (see list.cloneShallow)
+// is active in echarts process. So considering heap memory consumption,
+// we do not clone tree or graph, but share them among list and its shallow clones.
+// But in some rare case, we have to keep old list (like do animation in chart). So
+// please take care that both the old list and the new list share the same tree/graph.
+
+/**
+ * @param {Object} opt
+ * @param {module:echarts/data/List} opt.mainData
+ * @param {Object} [opt.struct] For example, instance of Graph or Tree.
+ * @param {string} [opt.structAttr] designation: list[structAttr] = struct;
+ * @param {Object} [opt.datas] {dataType: data},
+ *                 like: {node: nodeList, edge: edgeList}.
+ *                 Should contain mainData.
+ * @param {Object} [opt.datasAttr] {dataType: attr},
+ *                 designation: struct[datasAttr[dataType]] = list;
+ */
+function linkList(opt) {
+    var mainData = opt.mainData;
+    var datas = opt.datas;
+
+    if (!datas) {
+        datas = {main: mainData};
+        opt.datasAttr = {main: 'data'};
+    }
+    opt.datas = opt.mainData = null;
+
+    linkAll(mainData, datas, opt);
+
+    // Porxy data original methods.
+    each$7(datas, function (data) {
+        each$7(mainData.TRANSFERABLE_METHODS, function (methodName) {
+            data.wrapMethod(methodName, curry(transferInjection, opt));
+        });
+
+    });
+
+    // Beyond transfer, additional features should be added to `cloneShallow`.
+    mainData.wrapMethod('cloneShallow', curry(cloneShallowInjection, opt));
+
+    // Only mainData trigger change, because struct.update may trigger
+    // another changable methods, which may bring about dead lock.
+    each$7(mainData.CHANGABLE_METHODS, function (methodName) {
+        mainData.wrapMethod(methodName, curry(changeInjection, opt));
+    });
+
+    // Make sure datas contains mainData.
+    assert$1(datas[mainData.dataType] === mainData);
+}
+
+function transferInjection(opt, res) {
+    if (isMainData(this)) {
+        // Transfer datas to new main data.
+        var datas = extend({}, this[DATAS]);
+        datas[this.dataType] = res;
+        linkAll(res, datas, opt);
+    }
+    else {
+        // Modify the reference in main data to point newData.
+        linkSingle(res, this.dataType, this[MAIN_DATA], opt);
+    }
+    return res;
+}
+
+function changeInjection(opt, res) {
+    opt.struct && opt.struct.update(this);
+    return res;
+}
+
+function cloneShallowInjection(opt, res) {
+    // cloneShallow, which brings about some fragilities, may be inappropriate
+    // to be exposed as an API. So for implementation simplicity we can make
+    // the restriction that cloneShallow of not-mainData should not be invoked
+    // outside, but only be invoked here.
+    each$7(res[DATAS], function (data, dataType) {
+        data !== res && linkSingle(data.cloneShallow(), dataType, res, opt);
+    });
+    return res;
+}
+
+/**
+ * Supplement method to List.
+ *
+ * @public
+ * @param {string} [dataType] If not specified, return mainData.
+ * @return {module:echarts/data/List}
+ */
+function getLinkedData(dataType) {
+    var mainData = this[MAIN_DATA];
+    return (dataType == null || mainData == null)
+        ? mainData
+        : mainData[DATAS][dataType];
+}
+
+function isMainData(data) {
+    return data[MAIN_DATA] === data;
+}
+
+function linkAll(mainData, datas, opt) {
+    mainData[DATAS] = {};
+    each$7(datas, function (data, dataType) {
+        linkSingle(data, dataType, mainData, opt);
+    });
+}
+
+function linkSingle(data, dataType, mainData, opt) {
+    mainData[DATAS][dataType] = data;
+    data[MAIN_DATA] = mainData;
+    data.dataType = dataType;
+
+    if (opt.struct) {
+        data[opt.structAttr] = opt.struct;
+        opt.struct[opt.datasAttr[dataType]] = data;
+    }
+
+    // Supplement method.
+    data.getLinkedData = getLinkedData;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Tree data structure
+ *
+ * @module echarts/data/Tree
+ */
+
+/**
+ * @constructor module:echarts/data/Tree~TreeNode
+ * @param {string} name
+ * @param {module:echarts/data/Tree} hostTree
+ */
+var TreeNode = function (name, hostTree) {
+    /**
+     * @type {string}
+     */
+    this.name = name || '';
+
+    /**
+     * Depth of node
+     *
+     * @type {number}
+     * @readOnly
+     */
+    this.depth = 0;
+
+    /**
+     * Height of the subtree rooted at this node.
+     * @type {number}
+     * @readOnly
+     */
+    this.height = 0;
+
+    /**
+     * @type {module:echarts/data/Tree~TreeNode}
+     * @readOnly
+     */
+    this.parentNode = null;
+
+    /**
+     * Reference to list item.
+     * Do not persistent dataIndex outside,
+     * besause it may be changed by list.
+     * If dataIndex -1,
+     * this node is logical deleted (filtered) in list.
+     *
+     * @type {Object}
+     * @readOnly
+     */
+    this.dataIndex = -1;
+
+    /**
+     * @type {Array.<module:echarts/data/Tree~TreeNode>}
+     * @readOnly
+     */
+    this.children = [];
+
+    /**
+     * @type {Array.<module:echarts/data/Tree~TreeNode>}
+     * @pubilc
+     */
+    this.viewChildren = [];
+
+    /**
+     * @type {moduel:echarts/data/Tree}
+     * @readOnly
+     */
+    this.hostTree = hostTree;
+};
+
+TreeNode.prototype = {
+
+    constructor: TreeNode,
+
+    /**
+     * The node is removed.
+     * @return {boolean} is removed.
+     */
+    isRemoved: function () {
+        return this.dataIndex < 0;
+    },
+
+    /**
+     * Travel this subtree (include this node).
+     * Usage:
+     *    node.eachNode(function () { ... }); // preorder
+     *    node.eachNode('preorder', function () { ... }); // preorder
+     *    node.eachNode('postorder', function () { ... }); // postorder
+     *    node.eachNode(
+     *        {order: 'postorder', attr: 'viewChildren'},
+     *        function () { ... }
+     *    ); // postorder
+     *
+     * @param {(Object|string)} options If string, means order.
+     * @param {string=} options.order 'preorder' or 'postorder'
+     * @param {string=} options.attr 'children' or 'viewChildren'
+     * @param {Function} cb If in preorder and return false,
+     *                      its subtree will not be visited.
+     * @param {Object} [context]
+     */
+    eachNode: function (options, cb, context) {
+        if (typeof options === 'function') {
+            context = cb;
+            cb = options;
+            options = null;
+        }
+
+        options = options || {};
+        if (isString(options)) {
+            options = {order: options};
+        }
+
+        var order = options.order || 'preorder';
+        var children = this[options.attr || 'children'];
+
+        var suppressVisitSub;
+        order === 'preorder' && (suppressVisitSub = cb.call(context, this));
+
+        for (var i = 0; !suppressVisitSub && i < children.length; i++) {
+            children[i].eachNode(options, cb, context);
+        }
+
+        order === 'postorder' && cb.call(context, this);
+    },
+
+    /**
+     * Update depth and height of this subtree.
+     *
+     * @param  {number} depth
+     */
+    updateDepthAndHeight: function (depth) {
+        var height = 0;
+        this.depth = depth;
+        for (var i = 0; i < this.children.length; i++) {
+            var child = this.children[i];
+            child.updateDepthAndHeight(depth + 1);
+            if (child.height > height) {
+                height = child.height;
+            }
+        }
+        this.height = height + 1;
+    },
+
+    /**
+     * @param  {string} id
+     * @return {module:echarts/data/Tree~TreeNode}
+     */
+    getNodeById: function (id) {
+        if (this.getId() === id) {
+            return this;
+        }
+        for (var i = 0, children = this.children, len = children.length; i < len; i++) {
+            var res = children[i].getNodeById(id);
+            if (res) {
+                return res;
+            }
+        }
+    },
+
+    /**
+     * @param {module:echarts/data/Tree~TreeNode} node
+     * @return {boolean}
+     */
+    contains: function (node) {
+        if (node === this) {
+            return true;
+        }
+        for (var i = 0, children = this.children, len = children.length; i < len; i++) {
+            var res = children[i].contains(node);
+            if (res) {
+                return res;
+            }
+        }
+    },
+
+    /**
+     * @param {boolean} includeSelf Default false.
+     * @return {Array.<module:echarts/data/Tree~TreeNode>} order: [root, child, grandchild, ...]
+     */
+    getAncestors: function (includeSelf) {
+        var ancestors = [];
+        var node = includeSelf ? this : this.parentNode;
+        while (node) {
+            ancestors.push(node);
+            node = node.parentNode;
+        }
+        ancestors.reverse();
+        return ancestors;
+    },
+
+    /**
+     * @param {string|Array=} [dimension='value'] Default 'value'. can be 0, 1, 2, 3
+     * @return {number} Value.
+     */
+    getValue: function (dimension) {
+        var data = this.hostTree.data;
+        return data.get(data.getDimension(dimension || 'value'), this.dataIndex);
+    },
+
+    /**
+     * @param {Object} layout
+     * @param {boolean=} [merge=false]
+     */
+    setLayout: function (layout, merge$$1) {
+        this.dataIndex >= 0
+            && this.hostTree.data.setItemLayout(this.dataIndex, layout, merge$$1);
+    },
+
+    /**
+     * @return {Object} layout
+     */
+    getLayout: function () {
+        return this.hostTree.data.getItemLayout(this.dataIndex);
+    },
+
+    /**
+     * @param {string} [path]
+     * @return {module:echarts/model/Model}
+     */
+    getModel: function (path) {
+        if (this.dataIndex < 0) {
+            return;
+        }
+        var hostTree = this.hostTree;
+        var itemModel = hostTree.data.getItemModel(this.dataIndex);
+        var levelModel = this.getLevelModel();
+        var leavesModel;
+        if (!levelModel && (this.children.length === 0 || (this.children.length !== 0 && this.isExpand === false))) {
+            leavesModel = this.getLeavesModel();
+        }
+        return itemModel.getModel(path, (levelModel || leavesModel || hostTree.hostModel).getModel(path));
+    },
+
+    /**
+     * @return {module:echarts/model/Model}
+     */
+    getLevelModel: function () {
+        return (this.hostTree.levelModels || [])[this.depth];
+    },
+
+    /**
+     * @return {module:echarts/model/Model}
+     */
+    getLeavesModel: function () {
+        return this.hostTree.leavesModel;
+    },
+
+    /**
+     * @example
+     *  setItemVisual('color', color);
+     *  setItemVisual({
+     *      'color': color
+     *  });
+     */
+    setVisual: function (key, value) {
+        this.dataIndex >= 0
+            && this.hostTree.data.setItemVisual(this.dataIndex, key, value);
+    },
+
+    /**
+     * Get item visual
+     */
+    getVisual: function (key, ignoreParent) {
+        return this.hostTree.data.getItemVisual(this.dataIndex, key, ignoreParent);
+    },
+
+    /**
+     * @public
+     * @return {number}
+     */
+    getRawIndex: function () {
+        return this.hostTree.data.getRawIndex(this.dataIndex);
+    },
+
+    /**
+     * @public
+     * @return {string}
+     */
+    getId: function () {
+        return this.hostTree.data.getId(this.dataIndex);
+    },
+
+    /**
+     * if this is an ancestor of another node
+     *
+     * @public
+     * @param {TreeNode} node another node
+     * @return {boolean} if is ancestor
+     */
+    isAncestorOf: function (node) {
+        var parent = node.parentNode;
+        while (parent) {
+            if (parent === this) {
+                return true;
+            }
+            parent = parent.parentNode;
+        }
+        return false;
+    },
+
+    /**
+     * if this is an descendant of another node
+     *
+     * @public
+     * @param {TreeNode} node another node
+     * @return {boolean} if is descendant
+     */
+    isDescendantOf: function (node) {
+        return node !== this && node.isAncestorOf(this);
+    }
+};
+
+/**
+ * @constructor
+ * @alias module:echarts/data/Tree
+ * @param {module:echarts/model/Model} hostModel
+ * @param {Array.<Object>} levelOptions
+ * @param {Object} leavesOption
+ */
+function Tree(hostModel, levelOptions, leavesOption) {
+    /**
+     * @type {module:echarts/data/Tree~TreeNode}
+     * @readOnly
+     */
+    this.root;
+
+    /**
+     * @type {module:echarts/data/List}
+     * @readOnly
+     */
+    this.data;
+
+    /**
+     * Index of each item is the same as the raw index of coresponding list item.
+     * @private
+     * @type {Array.<module:echarts/data/Tree~TreeNode}
+     */
+    this._nodes = [];
+
+    /**
+     * @private
+     * @readOnly
+     * @type {module:echarts/model/Model}
+     */
+    this.hostModel = hostModel;
+
+    /**
+     * @private
+     * @readOnly
+     * @type {Array.<module:echarts/model/Model}
+     */
+    this.levelModels = map(levelOptions || [], function (levelDefine) {
+        return new Model(levelDefine, hostModel, hostModel.ecModel);
+    });
+
+    this.leavesModel = new Model(leavesOption || {}, hostModel, hostModel.ecModel);
+}
+
+Tree.prototype = {
+
+    constructor: Tree,
+
+    type: 'tree',
+
+    /**
+     * Travel this subtree (include this node).
+     * Usage:
+     *    node.eachNode(function () { ... }); // preorder
+     *    node.eachNode('preorder', function () { ... }); // preorder
+     *    node.eachNode('postorder', function () { ... }); // postorder
+     *    node.eachNode(
+     *        {order: 'postorder', attr: 'viewChildren'},
+     *        function () { ... }
+     *    ); // postorder
+     *
+     * @param {(Object|string)} options If string, means order.
+     * @param {string=} options.order 'preorder' or 'postorder'
+     * @param {string=} options.attr 'children' or 'viewChildren'
+     * @param {Function} cb
+     * @param {Object}   [context]
+     */
+    eachNode: function(options, cb, context) {
+        this.root.eachNode(options, cb, context);
+    },
+
+    /**
+     * @param {number} dataIndex
+     * @return {module:echarts/data/Tree~TreeNode}
+     */
+    getNodeByDataIndex: function (dataIndex) {
+        var rawIndex = this.data.getRawIndex(dataIndex);
+        return this._nodes[rawIndex];
+    },
+
+    /**
+     * @param {string} name
+     * @return {module:echarts/data/Tree~TreeNode}
+     */
+    getNodeByName: function (name) {
+        return this.root.getNodeByName(name);
+    },
+
+    /**
+     * Update item available by list,
+     * when list has been performed options like 'filterSelf' or 'map'.
+     */
+    update: function () {
+        var data = this.data;
+        var nodes = this._nodes;
+
+        for (var i = 0, len = nodes.length; i < len; i++) {
+            nodes[i].dataIndex = -1;
+        }
+
+        for (var i = 0, len = data.count(); i < len; i++) {
+            nodes[data.getRawIndex(i)].dataIndex = i;
+        }
+    },
+
+    /**
+     * Clear all layouts
+     */
+    clearLayouts: function () {
+        this.data.clearItemLayouts();
+    }
+};
+
+/**
+ * data node format:
+ * {
+ *     name: ...
+ *     value: ...
+ *     children: [
+ *         {
+ *             name: ...
+ *             value: ...
+ *             children: ...
+ *         },
+ *         ...
+ *     ]
+ * }
+ *
+ * @static
+ * @param {Object} dataRoot Root node.
+ * @param {module:echarts/model/Model} hostModel
+ * @param {Object} treeOptions
+ * @param {Array.<Object>} treeOptions.levels
+ * @param {Array.<Object>} treeOptions.leaves
+ * @return module:echarts/data/Tree
+ */
+Tree.createTree = function (dataRoot, hostModel, treeOptions) {
+
+    var tree = new Tree(hostModel, treeOptions.levels, treeOptions.leaves);
+    var listData = [];
+    var dimMax = 1;
+
+    buildHierarchy(dataRoot);
+
+    function buildHierarchy(dataNode, parentNode) {
+        var value = dataNode.value;
+        dimMax = Math.max(dimMax, isArray(value) ? value.length : 1);
+
+        listData.push(dataNode);
+
+        var node = new TreeNode(dataNode.name, tree);
+        parentNode
+            ? addChild(node, parentNode)
+            : (tree.root = node);
+
+        tree._nodes.push(node);
+
+        var children = dataNode.children;
+        if (children) {
+            for (var i = 0; i < children.length; i++) {
+                buildHierarchy(children[i], node);
+            }
+        }
+    }
+
+    tree.root.updateDepthAndHeight(0);
+
+    var dimensionsInfo = createDimensions(listData, {
+        coordDimensions: ['value'],
+        dimensionsCount: dimMax
+    });
+
+    var list = new List(dimensionsInfo, hostModel);
+    list.initData(listData);
+
+    linkList({
+        mainData: list,
+        struct: tree,
+        structAttr: 'tree'
+    });
+
+    tree.update();
+
+    return tree;
+};
+
+/**
+ * It is needed to consider the mess of 'list', 'hostModel' when creating a TreeNote,
+ * so this function is not ready and not necessary to be public.
+ *
+ * @param {(module:echarts/data/Tree~TreeNode|Object)} child
+ */
+function addChild(child, node) {
+    var children = node.children;
+    if (child.parentNode === node) {
+        return;
+    }
+
+    children.push(child);
+    child.parentNode = node;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @file Create data struct and define tree view's series model
+ */
+
+SeriesModel.extend({
+
+    type: 'series.tree',
+
+    layoutInfo: null,
+
+    // can support the position parameters 'left', 'top','right','bottom', 'width',
+    // 'height' in the setOption() with 'merge' mode normal.
+    layoutMode: 'box',
+
+    /**
+     * Init a tree data structure from data in option series
+     * @param  {Object} option  the object used to config echarts view
+     * @return {module:echarts/data/List} storage initial data
+     */
+    getInitialData: function (option) {
+
+        //create an virtual root
+        var root = {name: option.name, children: option.data};
+
+        var leaves = option.leaves || {};
+
+        var treeOption = {};
+
+        treeOption.leaves = leaves;
+
+        var tree = Tree.createTree(root, this, treeOption);
+
+        var treeDepth = 0;
+
+        tree.eachNode('preorder', function (node) {
+            if (node.depth > treeDepth) {
+                treeDepth = node.depth;
+            }
+        });
+
+        var expandAndCollapse = option.expandAndCollapse;
+        var expandTreeDepth = (expandAndCollapse && option.initialTreeDepth >= 0)
+            ? option.initialTreeDepth : treeDepth;
+
+        tree.root.eachNode('preorder', function (node) {
+            var item = node.hostTree.data.getRawDataItem(node.dataIndex);
+            // add item.collapsed != null, because users can collapse node original in the series.data.
+            node.isExpand = (item && item.collapsed != null)
+                ? !item.collapsed
+                : node.depth <= expandTreeDepth;
+        });
+
+        return tree.data;
+    },
+    
+    /**
+     * Make the configuration 'orient' backward compatibly, with 'horizontal = LR', 'vertical = TB'.
+     * @returns {string} orient
+     */
+    getOrient: function () {
+        var orient = this.get('orient');
+        if (orient === 'horizontal') {
+            orient = 'LR';
+        }
+        else if (orient === 'vertical') {
+            orient = 'TB';
+        }
+        return orient;
+    },
+
+    /**
+     * @override
+     * @param {number} dataIndex
+     */
+    formatTooltip: function (dataIndex) {
+        var tree = this.getData().tree;
+        var realRoot = tree.root.children[0];
+        var node = tree.getNodeByDataIndex(dataIndex);
+        var value = node.getValue();
+        var name = node.name;
+        while (node && (node !== realRoot)) {
+            name = node.parentNode.name + '.' + name;
+            node = node.parentNode;
+        }
+        return encodeHTML(name + (
+            (isNaN(value) || value == null) ? '' : ' : ' + value
+        ));
+    },
+
+    defaultOption: {
+        zlevel: 0,
+        z: 2,
+
+        // the position of the whole view
+        left: '12%',
+        top: '12%',
+        right: '12%',
+        bottom: '12%',
+
+        // the layout of the tree, two value can be selected, 'orthogonal' or 'radial'
+        layout: 'orthogonal',
+
+        // The orient of orthoginal layout, can be setted to 'LR', 'TB', 'RL', 'BT'.
+        // and the backward compatibility configuration 'horizontal = LR', 'vertical = TB'.
+        orient: 'LR',
+
+        symbol: 'emptyCircle',
+
+        symbolSize: 7,
+
+        expandAndCollapse: true,
+
+        initialTreeDepth: 2,
+
+        lineStyle: {
+            color: '#ccc',
+            width: 1.5,
+            curveness: 0.5
+        },
+
+        itemStyle: {
+            color: 'lightsteelblue',
+            borderColor: '#c23531',
+            borderWidth: 1.5
+        },
+
+        label: {
+            show: true,
+            color: '#555'
+        },
+
+        leaves: {
+            label: {
+                show: true
+            }
+        },
+
+        animationEasing: 'linear',
+
+        animationDuration: 700,
+
+        animationDurationUpdate: 1000
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/*
+* The tree layout implementation references to d3.js
+* (https://github.com/d3/d3-hierarchy). The use of the source
+* code of this file is also subject to the terms and consitions
+* of its license (BSD-3Clause, see <echarts/src/licenses/LICENSE-d3>).
+*/
+
+/**
+ * @file The layout algorithm of node-link tree diagrams. Here we using Reingold-Tilford algorithm to drawing
+ *       the tree.
+ * @see https://github.com/d3/d3-hierarchy
+ */
+
+/**
+ * Initialize all computational message for following algorithm
+ * @param  {module:echarts/data/Tree~TreeNode} root   The virtual root of the tree
+ */
+function init$2(root) {
+    root.hierNode = {
+        defaultAncestor: null,
+        ancestor: root,
+        prelim: 0,
+        modifier: 0,
+        change: 0,
+        shift: 0,
+        i: 0,
+        thread: null
+    };
+
+    var nodes = [root];
+    var node;
+    var children;
+
+    while (node = nodes.pop()) { // jshint ignore:line
+        children = node.children;
+        if (node.isExpand && children.length) {
+            var n = children.length;
+            for (var i = n - 1; i >= 0; i--) {
+                var child = children[i];
+                child.hierNode = {
+                    defaultAncestor: null,
+                    ancestor: child,
+                    prelim: 0,
+                    modifier: 0,
+                    change: 0,
+                    shift: 0,
+                    i: i,
+                    thread: null
+                };
+                nodes.push(child);
+            }
+        }
+    }
+}
+
+/**
+ * Computes a preliminary x coordinate for node. Before that, this function is
+ * applied recursively to the children of node, as well as the function
+ * apportion(). After spacing out the children by calling executeShifts(), the
+ * node is placed to the midpoint of its outermost children.
+ * @param  {module:echarts/data/Tree~TreeNode} node
+ * @param {Function} separation
+ */
+function firstWalk(node, separation) {
+    var children = node.isExpand ? node.children : [];
+    var siblings = node.parentNode.children;
+    var subtreeW = node.hierNode.i ? siblings[node.hierNode.i -1] : null;
+    if (children.length) {
+        executeShifts(node);
+        var midPoint = (children[0].hierNode.prelim + children[children.length - 1].hierNode.prelim) / 2;
+        if (subtreeW) {
+            node.hierNode.prelim = subtreeW.hierNode.prelim + separation(node, subtreeW);
+            node.hierNode.modifier = node.hierNode.prelim - midPoint;
+        }
+        else {
+            node.hierNode.prelim = midPoint;
+        }
+    }
+    else if (subtreeW) {
+        node.hierNode.prelim = subtreeW.hierNode.prelim + separation(node, subtreeW);
+    }
+    node.parentNode.hierNode.defaultAncestor = apportion(node, subtreeW, node.parentNode.hierNode.defaultAncestor || siblings[0], separation);
+}
+
+
+/**
+ * Computes all real x-coordinates by summing up the modifiers recursively.
+ * @param  {module:echarts/data/Tree~TreeNode} node
+ */
+function secondWalk(node) {
+    var nodeX = node.hierNode.prelim + node.parentNode.hierNode.modifier;
+    node.setLayout({x: nodeX}, true);
+    node.hierNode.modifier += node.parentNode.hierNode.modifier;
+}
+
+
+function separation(cb) {
+    return arguments.length ? cb : defaultSeparation;
+}
+
+/**
+ * Transform the common coordinate to radial coordinate
+ * @param  {number} x
+ * @param  {number} y
+ * @return {Object}
+ */
+function radialCoordinate(x, y) {
+    var radialCoor = {};
+    x -= Math.PI / 2;
+    radialCoor.x = y * Math.cos(x);
+    radialCoor.y = y * Math.sin(x);
+    return radialCoor;
+}
+
+/**
+ * Get the layout position of the whole view
+ * @param {module:echarts/model/Series} seriesModel  the model object of sankey series
+ * @param {module:echarts/ExtensionAPI} api  provide the API list that the developer can call
+ * @return {module:zrender/core/BoundingRect}  size of rect to draw the sankey view
+ */
+function getViewRect(seriesModel, api) {
+    return getLayoutRect(
+        seriesModel.getBoxLayoutParams(), {
+            width: api.getWidth(),
+            height: api.getHeight()
+        }
+    );
+}
+
+/**
+ * All other shifts, applied to the smaller subtrees between w- and w+, are
+ * performed by this function.
+ * @param  {module:echarts/data/Tree~TreeNode} node
+ */
+function executeShifts(node) {
+    var children = node.children;
+    var n = children.length;
+    var shift = 0;
+    var change = 0;
+    while (--n >= 0) {
+        var child = children[n];
+        child.hierNode.prelim += shift;
+        child.hierNode.modifier += shift;
+        change += child.hierNode.change;
+        shift += child.hierNode.shift + change;
+    }
+}
+
+/**
+ * The core of the algorithm. Here, a new subtree is combined with the
+ * previous subtrees. Threads are used to traverse the inside and outside
+ * contours of the left and right subtree up to the highest common level.
+ * Whenever two nodes of the inside contours conflict, we compute the left
+ * one of the greatest uncommon ancestors using the function nextAncestor()
+ * and call moveSubtree() to shift the subtree and prepare the shifts of
+ * smaller subtrees. Finally, we add a new thread (if necessary).
+ * @param  {module:echarts/data/Tree~TreeNode} subtreeV
+ * @param  {module:echarts/data/Tree~TreeNode} subtreeW
+ * @param  {module:echarts/data/Tree~TreeNode} ancestor
+ * @param  {Function} separation
+ * @return {module:echarts/data/Tree~TreeNode}
+ */
+function apportion(subtreeV, subtreeW, ancestor, separation) {
+
+    if (subtreeW) {
+        var nodeOutRight = subtreeV;
+        var nodeInRight = subtreeV;
+        var nodeOutLeft = nodeInRight.parentNode.children[0];
+        var nodeInLeft = subtreeW;
+
+        var sumOutRight = nodeOutRight.hierNode.modifier;
+        var sumInRight = nodeInRight.hierNode.modifier;
+        var sumOutLeft = nodeOutLeft.hierNode.modifier;
+        var sumInLeft = nodeInLeft.hierNode.modifier;
+
+        while (nodeInLeft = nextRight(nodeInLeft), nodeInRight = nextLeft(nodeInRight), nodeInLeft && nodeInRight) {
+            nodeOutRight = nextRight(nodeOutRight);
+            nodeOutLeft = nextLeft(nodeOutLeft);
+            nodeOutRight.hierNode.ancestor = subtreeV;
+            var shift = nodeInLeft.hierNode.prelim + sumInLeft - nodeInRight.hierNode.prelim
+                    - sumInRight + separation(nodeInLeft, nodeInRight);
+            if (shift > 0) {
+                moveSubtree(nextAncestor(nodeInLeft, subtreeV, ancestor), subtreeV, shift);
+                sumInRight += shift;
+                sumOutRight += shift;
+            }
+            sumInLeft += nodeInLeft.hierNode.modifier;
+            sumInRight += nodeInRight.hierNode.modifier;
+            sumOutRight += nodeOutRight.hierNode.modifier;
+            sumOutLeft += nodeOutLeft.hierNode.modifier;
+        }
+        if (nodeInLeft && !nextRight(nodeOutRight)) {
+            nodeOutRight.hierNode.thread = nodeInLeft;
+            nodeOutRight.hierNode.modifier += sumInLeft - sumOutRight;
+
+        }
+        if (nodeInRight && !nextLeft(nodeOutLeft)) {
+            nodeOutLeft.hierNode.thread = nodeInRight;
+            nodeOutLeft.hierNode.modifier += sumInRight - sumOutLeft;
+            ancestor = subtreeV;
+        }
+    }
+    return ancestor;
+}
+
+/**
+ * This function is used to traverse the right contour of a subtree.
+ * It returns the rightmost child of node or the thread of node. The function
+ * returns null if and only if node is on the highest depth of its subtree.
+ * @param  {module:echarts/data/Tree~TreeNode} node
+ * @return {module:echarts/data/Tree~TreeNode}
+ */
+function nextRight(node) {
+    var children = node.children;
+    return children.length && node.isExpand ? children[children.length - 1] : node.hierNode.thread;
+}
+
+/**
+ * This function is used to traverse the left contour of a subtree (or a subforest).
+ * It returns the leftmost child of node or the thread of node. The function
+ * returns null if and only if node is on the highest depth of its subtree.
+ * @param  {module:echarts/data/Tree~TreeNode} node
+ * @return {module:echarts/data/Tree~TreeNode}
+ */
+function nextLeft(node) {
+    var children = node.children;
+    return children.length && node.isExpand ? children[0] : node.hierNode.thread;
+}
+
+/**
+ * If nodeInLeftâ€™s ancestor is a sibling of node, returns nodeInLeftâ€™s ancestor.
+ * Otherwise, returns the specified ancestor.
+ * @param  {module:echarts/data/Tree~TreeNode} nodeInLeft
+ * @param  {module:echarts/data/Tree~TreeNode} node
+ * @param  {module:echarts/data/Tree~TreeNode} ancestor
+ * @return {module:echarts/data/Tree~TreeNode}
+ */
+function nextAncestor(nodeInLeft, node, ancestor) {
+    return nodeInLeft.hierNode.ancestor.parentNode === node.parentNode
+        ? nodeInLeft.hierNode.ancestor : ancestor;
+}
+
+/**
+ * Shifts the current subtree rooted at wr. This is done by increasing prelim(w+) and modifier(w+) by shift.
+ * @param  {module:echarts/data/Tree~TreeNode} wl
+ * @param  {module:echarts/data/Tree~TreeNode} wr
+ * @param  {number} shift [description]
+ */
+function moveSubtree(wl, wr,shift) {
+    var change = shift / (wr.hierNode.i - wl.hierNode.i);
+    wr.hierNode.change -= change;
+    wr.hierNode.shift += shift;
+    wr.hierNode.modifier += shift;
+    wr.hierNode.prelim += shift;
+    wl.hierNode.change += change;
+}
+
+function defaultSeparation(node1, node2) {
+    return node1.parentNode === node2.parentNode ? 1 : 2;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @file  This file used to draw tree view
+ */
+
+extendChartView({
+
+    type: 'tree',
+
+    /**
+     * Init the chart
+     * @override
+     * @param  {module:echarts/model/Global} ecModel
+     * @param  {module:echarts/ExtensionAPI} api
+     */
+    init: function (ecModel, api) {
+
+        /**
+         * @private
+         * @type {module:echarts/data/Tree}
+         */
+        this._oldTree;
+
+        /**
+         * @private
+         * @type {module:zrender/container/Group}
+         */
+        this._mainGroup = new Group();
+
+        this.group.add(this._mainGroup);
+    },
+
+    render: function (seriesModel, ecModel, api, payload) {
+
+        var data = seriesModel.getData();
+
+        var layoutInfo = seriesModel.layoutInfo;
+
+        var group = this._mainGroup;
+
+        var layout = seriesModel.get('layout');
+
+        if (layout === 'radial') {
+            group.attr('position', [layoutInfo.x + layoutInfo.width / 2, layoutInfo.y + layoutInfo.height / 2]);
+        }
+        else {
+            group.attr('position', [layoutInfo.x, layoutInfo.y]);
+        }
+
+        var oldData = this._data;
+
+        var seriesScope = {
+            expandAndCollapse: seriesModel.get('expandAndCollapse'),
+            layout: layout,
+            orient: seriesModel.getOrient(),
+            curvature: seriesModel.get('lineStyle.curveness'),
+            symbolRotate: seriesModel.get('symbolRotate'),
+            symbolOffset: seriesModel.get('symbolOffset'),
+            hoverAnimation: seriesModel.get('hoverAnimation'),
+            useNameLabel: true,
+            fadeIn: true
+        };
+
+        data.diff(oldData)
+            .add(function (newIdx) {
+                if (symbolNeedsDraw$1(data, newIdx)) {
+                    // create node and edge
+                    updateNode(data, newIdx, null, group, seriesModel, seriesScope);
+                }
+            })
+            .update(function (newIdx, oldIdx) {
+                var symbolEl = oldData.getItemGraphicEl(oldIdx);
+                if (!symbolNeedsDraw$1(data, newIdx)) {
+                    symbolEl && removeNode(oldData, oldIdx, symbolEl, group, seriesModel, seriesScope);
+                    return;
+                }
+                // update  node and edge
+                updateNode(data, newIdx, symbolEl, group, seriesModel, seriesScope);
+            })
+            .remove(function (oldIdx) {
+                var symbolEl = oldData.getItemGraphicEl(oldIdx);
+                // When remove a collapsed node of subtree, since the collapsed
+                // node haven't been initialized with a symbol element,
+                // you can't found it's symbol element through index.
+                // so if we want to remove the symbol element we should insure
+                // that the symbol element is not null.
+                if (symbolEl) {
+                    removeNode(oldData, oldIdx, symbolEl, group, seriesModel, seriesScope);
+                }
+            })
+            .execute();
+
+        if (seriesScope.expandAndCollapse === true) {
+            data.eachItemGraphicEl(function (el, dataIndex) {
+                el.off('click').on('click', function () {
+                    api.dispatchAction({
+                        type: 'treeExpandAndCollapse',
+                        seriesId: seriesModel.id,
+                        dataIndex: dataIndex
+                    });
+                });
+            });
+        }
+
+        this._data = data;
+    },
+
+    dispose: function () {},
+
+    remove: function () {
+        this._mainGroup.removeAll();
+        this._data = null;
+    }
+
+});
+
+function symbolNeedsDraw$1(data, dataIndex) {
+    var layout = data.getItemLayout(dataIndex);
+
+    return layout
+        && !isNaN(layout.x) && !isNaN(layout.y)
+        && data.getItemVisual(dataIndex, 'symbol') !== 'none';
+}
+
+function getTreeNodeStyle(node, itemModel, seriesScope) {
+    seriesScope.itemModel = itemModel;
+    seriesScope.itemStyle = itemModel.getModel('itemStyle').getItemStyle();
+    seriesScope.hoverItemStyle = itemModel.getModel('emphasis.itemStyle').getItemStyle();
+    seriesScope.lineStyle = itemModel.getModel('lineStyle').getLineStyle();
+    seriesScope.labelModel = itemModel.getModel('label');
+    seriesScope.hoverLabelModel = itemModel.getModel('emphasis.label');
+
+    if (node.isExpand === false && node.children.length !== 0) {
+        seriesScope.symbolInnerColor = seriesScope.itemStyle.fill;
+    }
+    else {
+        seriesScope.symbolInnerColor = '#fff';
+    }
+
+    return seriesScope;
+}
+
+function updateNode(data, dataIndex, symbolEl, group, seriesModel, seriesScope) {
+    var isInit = !symbolEl;
+    var node = data.tree.getNodeByDataIndex(dataIndex);
+    var itemModel = node.getModel();
+    var seriesScope = getTreeNodeStyle(node, itemModel, seriesScope);
+    var virtualRoot = data.tree.root;
+
+    var source = node.parentNode === virtualRoot ? node : node.parentNode || node;
+    var sourceSymbolEl = data.getItemGraphicEl(source.dataIndex);
+    var sourceLayout = source.getLayout();
+    var sourceOldLayout = sourceSymbolEl
+        ? {
+            x: sourceSymbolEl.position[0],
+            y: sourceSymbolEl.position[1],
+            rawX: sourceSymbolEl.__radialOldRawX,
+            rawY: sourceSymbolEl.__radialOldRawY
+        }
+        : sourceLayout;
+    var targetLayout = node.getLayout();
+
+    if (isInit) {
+        symbolEl = new SymbolClz$1(data, dataIndex, seriesScope);
+        symbolEl.attr('position', [sourceOldLayout.x, sourceOldLayout.y]);
+    }
+    else {
+        symbolEl.updateData(data, dataIndex, seriesScope);
+    }
+
+    symbolEl.__radialOldRawX = symbolEl.__radialRawX;
+    symbolEl.__radialOldRawY = symbolEl.__radialRawY;
+    symbolEl.__radialRawX = targetLayout.rawX;
+    symbolEl.__radialRawY = targetLayout.rawY;
+
+    group.add(symbolEl);
+    data.setItemGraphicEl(dataIndex, symbolEl);
+    updateProps(symbolEl, {
+        position: [targetLayout.x, targetLayout.y]
+    }, seriesModel);
+
+    var symbolPath = symbolEl.getSymbolPath();
+
+    if (seriesScope.layout === 'radial') {
+        var realRoot = virtualRoot.children[0];
+        var rootLayout = realRoot.getLayout();
+        var length = realRoot.children.length;
+        var rad;
+        var isLeft;
+
+        if (targetLayout.x === rootLayout.x && node.isExpand === true) {
+            var center = {};
+            center.x = (realRoot.children[0].getLayout().x + realRoot.children[length - 1].getLayout().x) / 2;
+            center.y = (realRoot.children[0].getLayout().y + realRoot.children[length - 1].getLayout().y) / 2;
+            rad = Math.atan2(center.y - rootLayout.y, center.x - rootLayout.x);
+            if (rad < 0) {
+                rad = Math.PI * 2 + rad;
+            }
+            isLeft = center.x < rootLayout.x;
+            if (isLeft) {
+                rad = rad - Math.PI;
+            }
+        }
+        else {
+            rad = Math.atan2(targetLayout.y - rootLayout.y, targetLayout.x - rootLayout.x);
+            if (rad < 0) {
+                rad = Math.PI * 2 + rad;
+            }
+            if (node.children.length === 0 || (node.children.length !== 0 && node.isExpand === false)) {
+                isLeft = targetLayout.x < rootLayout.x;
+                if (isLeft) {
+                    rad = rad - Math.PI;
+                }
+            }
+            else {
+                isLeft = targetLayout.x > rootLayout.x;
+                if (!isLeft) {
+                    rad = rad - Math.PI;
+                }
+            }
+        }
+
+        var textPosition = isLeft ? 'left' : 'right';
+        symbolPath.setStyle({
+            textPosition: textPosition,
+            textRotation: -rad,
+            textOrigin: 'center',
+            verticalAlign: 'middle'
+        });
+    }
+
+    if (node.parentNode && node.parentNode !== virtualRoot) {
+        var edge = symbolEl.__edge;
+        if (!edge) {
+            edge = symbolEl.__edge = new BezierCurve({
+                shape: getEdgeShape(seriesScope, sourceOldLayout, sourceOldLayout),
+                style: defaults({opacity: 0}, seriesScope.lineStyle)
+            });
+        }
+
+        updateProps(edge, {
+            shape: getEdgeShape(seriesScope, sourceLayout, targetLayout),
+            style: {opacity: 1}
+        }, seriesModel);
+
+        group.add(edge);
+    }
+}
+
+function removeNode(data, dataIndex, symbolEl, group, seriesModel, seriesScope) {
+    var node = data.tree.getNodeByDataIndex(dataIndex);
+    var virtualRoot = data.tree.root;
+    var itemModel = node.getModel();
+    var seriesScope = getTreeNodeStyle(node, itemModel, seriesScope);
+
+    var source = node.parentNode === virtualRoot ? node : node.parentNode || node;
+    var sourceLayout;
+    while (sourceLayout = source.getLayout(), sourceLayout == null) {
+        source = source.parentNode === virtualRoot ? source : source.parentNode || source;
+    }
+
+    updateProps(symbolEl, {
+        position: [sourceLayout.x + 1, sourceLayout.y + 1]
+    }, seriesModel, function () {
+        group.remove(symbolEl);
+        data.setItemGraphicEl(dataIndex, null);
+    });
+
+    symbolEl.fadeOut(null, {keepLabel: true});
+
+    var edge = symbolEl.__edge;
+    if (edge) {
+        updateProps(edge, {
+            shape: getEdgeShape(seriesScope, sourceLayout, sourceLayout),
+            style: {
+                opacity: 0
+            }
+        }, seriesModel, function () {
+            group.remove(edge);
+        });
+    }
+}
+
+function getEdgeShape(seriesScope, sourceLayout, targetLayout) {
+    var cpx1;
+    var cpy1;
+    var cpx2;
+    var cpy2;
+    var orient = seriesScope.orient;
+
+    if (seriesScope.layout === 'radial') {
+        var x1 = sourceLayout.rawX;
+        var y1 = sourceLayout.rawY;
+        var x2 = targetLayout.rawX;
+        var y2 = targetLayout.rawY;
+
+        var radialCoor1 = radialCoordinate(x1, y1);
+        var radialCoor2 = radialCoordinate(x1, y1 + (y2 - y1) * seriesScope.curvature);
+        var radialCoor3 = radialCoordinate(x2, y2 + (y1 - y2) * seriesScope.curvature);
+        var radialCoor4 = radialCoordinate(x2, y2);
+
+        return {
+            x1: radialCoor1.x,
+            y1: radialCoor1.y,
+            x2: radialCoor4.x,
+            y2: radialCoor4.y,
+            cpx1: radialCoor2.x,
+            cpy1: radialCoor2.y,
+            cpx2: radialCoor3.x,
+            cpy2: radialCoor3.y
+        };
+    }
+    else {
+        var x1 = sourceLayout.x;
+        var y1 = sourceLayout.y;
+        var x2 = targetLayout.x;
+        var y2 = targetLayout.y;
+
+        if (orient === 'LR' || orient === 'RL') {
+            cpx1 = x1 + (x2 - x1) * seriesScope.curvature;
+            cpy1 = y1;
+            cpx2 = x2 + (x1 - x2) * seriesScope.curvature;
+            cpy2 = y2;
+        }
+        if (orient === 'TB' || orient === 'BT') {
+            cpx1 = x1;
+            cpy1 = y1 + (y2 - y1) * seriesScope.curvature;
+            cpx2 = x2;
+            cpy2 = y2 + (y1 - y2) * seriesScope.curvature;
+        }
+        return {
+            x1: x1,
+            y1: y1,
+            x2: x2,
+            y2: y2,
+            cpx1: cpx1,
+            cpy1: cpy1,
+            cpx2: cpx2,
+            cpy2: cpy2
+        };
+    }
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+registerAction({
+    type: 'treeExpandAndCollapse',
+    event: 'treeExpandAndCollapse',
+    update: 'update'
+}, function (payload, ecModel) {
+    ecModel.eachComponent({mainType: 'series', subType: 'tree', query: payload}, function (seriesModel) {
+        var dataIndex = payload.dataIndex;
+        var tree = seriesModel.getData().tree;
+        var node = tree.getNodeByDataIndex(dataIndex);
+        node.isExpand = !node.isExpand;
+
+    });
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * Traverse the tree from bottom to top and do something
+ * @param  {module:echarts/data/Tree~TreeNode} root  The real root of the tree
+ * @param  {Function} callback
+ */
+function eachAfter (root, callback, separation) {
+    var nodes = [root];
+    var next = [];
+    var node;
+
+    while (node = nodes.pop()) { // jshint ignore:line
+        next.push(node);
+        if (node.isExpand) {
+            var children = node.children;
+            if (children.length) {
+                for (var i = 0; i < children.length; i++) {
+                    nodes.push(children[i]);
+                }
+            }
+        }
+    }
+
+    while (node = next.pop()) { // jshint ignore:line
+        callback(node, separation);
+    }
+}
+
+/**
+ * Traverse the tree from top to bottom and do something
+ * @param  {module:echarts/data/Tree~TreeNode} root  The real root of the tree
+ * @param  {Function} callback
+ */
+function eachBefore (root, callback) {
+    var nodes = [root];
+    var node;
+    while (node = nodes.pop()) { // jshint ignore:line
+        callback(node);
+        if (node.isExpand) {
+            var children = node.children;
+            if (children.length) {
+                for (var i = children.length - 1; i >= 0; i--) {
+                    nodes.push(children[i]);
+                }
+            }
+        }
+    }
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var treeLayout = function (ecModel, api) {
+    ecModel.eachSeriesByType('tree', function (seriesModel) {
+        commonLayout(seriesModel, api);
+    });
+};
+
+function commonLayout(seriesModel, api) {
+    var layoutInfo = getViewRect(seriesModel, api);
+    seriesModel.layoutInfo = layoutInfo;
+    var layout = seriesModel.get('layout');
+    var width = 0;
+    var height = 0;
+    var separation$$1 = null;
+    
+    if (layout === 'radial') {
+        width = 2 * Math.PI;
+        height = Math.min(layoutInfo.height, layoutInfo.width) / 2;
+        separation$$1 = separation(function (node1, node2) {
+            return (node1.parentNode === node2.parentNode ? 1 : 2) / node1.depth;
+        });
+    }
+    else {
+        width = layoutInfo.width;
+        height = layoutInfo.height;
+        separation$$1 = separation();
+    }
+
+    var virtualRoot = seriesModel.getData().tree.root;
+    var realRoot = virtualRoot.children[0];
+
+    if (realRoot) {
+        init$2(virtualRoot);
+        eachAfter(realRoot, firstWalk, separation$$1);
+        virtualRoot.hierNode.modifier = - realRoot.hierNode.prelim;
+        eachBefore(realRoot, secondWalk);
+
+        var left = realRoot;
+        var right = realRoot;
+        var bottom = realRoot;
+        eachBefore(realRoot, function (node) {
+            var x = node.getLayout().x;
+            if (x < left.getLayout().x) {
+                left = node;
+            }
+            if (x > right.getLayout().x) {
+                right = node;
+            }
+            if (node.depth > bottom.depth) {
+                bottom = node;
+            }
+        });
+
+        var delta = left === right ? 1 : separation$$1(left, right) / 2;
+        var tx = delta - left.getLayout().x;
+        var kx = 0;
+        var ky = 0;
+        var coorX = 0;
+        var coorY = 0;
+        if (layout === 'radial') {
+            kx = width / (right.getLayout().x + delta + tx);
+            // here we use (node.depth - 1), bucause the real root's depth is 1
+            ky = height / ((bottom.depth - 1) || 1);
+            eachBefore(realRoot, function (node) {
+                coorX = (node.getLayout().x + tx) * kx;
+                coorY = (node.depth - 1) * ky;
+                var finalCoor = radialCoordinate(coorX, coorY);
+                node.setLayout({x: finalCoor.x, y: finalCoor.y, rawX: coorX, rawY: coorY}, true);
+            });
+        }
+        else {
+            var orient = seriesModel.getOrient(); 
+            if (orient === 'RL' || orient === 'LR') {
+                ky = height / (right.getLayout().x + delta + tx);
+                kx = width / ((bottom.depth - 1) || 1);
+                eachBefore(realRoot, function (node) {
+                    coorY = (node.getLayout().x + tx) * ky;
+                    coorX = orient === 'LR'
+                        ? (node.depth - 1) * kx
+                        : width - (node.depth - 1) * kx;
+                    node.setLayout({x: coorX, y: coorY}, true);
+                });
+            }
+            else if (orient === 'TB' || orient === 'BT') {
+                kx = width / (right.getLayout().x + delta + tx);
+                ky = height / ((bottom.depth - 1) || 1);
+                eachBefore(realRoot, function (node) {
+                    coorX = (node.getLayout().x + tx) * kx;
+                    coorY = orient === 'TB'
+                        ? (node.depth - 1) * ky
+                        : height - (node.depth - 1) * ky;
+                    node.setLayout({x: coorX, y: coorY}, true);
+                });
+            }
+        }
+    } 
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+registerVisual(visualSymbol('tree', 'circle'));
+registerLayout(treeLayout);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+function retrieveTargetInfo(payload, validPayloadTypes, seriesModel) {
+    if (payload && indexOf(validPayloadTypes, payload.type) >= 0) {
+        var root = seriesModel.getData().tree.root;
+        var targetNode = payload.targetNode;
+        if (targetNode && root.contains(targetNode)) {
+            return {node: targetNode};
+        }
+
+        var targetNodeId = payload.targetNodeId;
+        if (targetNodeId != null && (targetNode = root.getNodeById(targetNodeId))) {
+            return {node: targetNode};
+        }
+    }
+}
+
+// Not includes the given node at the last item.
+function getPathToRoot(node) {
+    var path = [];
+    while (node) {
+        node = node.parentNode;
+        node && path.push(node);
+    }
+    return path.reverse();
+}
+
+function aboveViewRoot(viewRoot, node) {
+    var viewPath = getPathToRoot(viewRoot);
+    return indexOf(viewPath, node) >= 0;
+}
+
+// From root to the input node (the input node will be included).
+function wrapTreePathInfo(node, seriesModel) {
+    var treePathInfo = [];
+
+    while (node) {
+        var nodeDataIndex = node.dataIndex;
+        treePathInfo.push({
+            name: node.name,
+            dataIndex: nodeDataIndex,
+            value: seriesModel.getRawValue(nodeDataIndex)
+        });
+        node = node.parentNode;
+    }
+
+    treePathInfo.reverse();
+
+    return treePathInfo;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+SeriesModel.extend({
+
+    type: 'series.treemap',
+
+    layoutMode: 'box',
+
+    dependencies: ['grid', 'polar'],
+
+    /**
+     * @type {module:echarts/data/Tree~Node}
+     */
+    _viewRoot: null,
+
+    defaultOption: {
+        // Disable progressive rendering
+        progressive: 0,
+        hoverLayerThreshold: Infinity,
+        // center: ['50%', '50%'],          // not supported in ec3.
+        // size: ['80%', '80%'],            // deprecated, compatible with ec2.
+        left: 'center',
+        top: 'middle',
+        right: null,
+        bottom: null,
+        width: '80%',
+        height: '80%',
+        sort: true,                         // Can be null or false or true
+                                            // (order by desc default, asc not supported yet (strange effect))
+        clipWindow: 'origin',               // Size of clipped window when zooming. 'origin' or 'fullscreen'
+        squareRatio: 0.5 * (1 + Math.sqrt(5)), // golden ratio
+        leafDepth: null,                    // Nodes on depth from root are regarded as leaves.
+                                            // Count from zero (zero represents only view root).
+        drillDownIcon: 'â–¶',                 // Use html character temporarily because it is complicated
+                                            // to align specialized icon. â–·â–¶â’ââ–¼âœš
+
+        zoomToNodeRatio: 0.32 * 0.32,       // Be effective when using zoomToNode. Specify the proportion of the
+                                            // target node area in the view area.
+        roam: true,                         // true, false, 'scale' or 'zoom', 'move'.
+        nodeClick: 'zoomToNode',            // Leaf node click behaviour: 'zoomToNode', 'link', false.
+                                            // If leafDepth is set and clicking a node which has children but
+                                            // be on left depth, the behaviour would be changing root. Otherwise
+                                            // use behavious defined above.
+        animation: true,
+        animationDurationUpdate: 900,
+        animationEasing: 'quinticInOut',
+        breadcrumb: {
+            show: true,
+            height: 22,
+            left: 'center',
+            top: 'bottom',
+            // right
+            // bottom
+            emptyItemWidth: 25,             // Width of empty node.
+            itemStyle: {
+                color: 'rgba(0,0,0,0.7)', //'#5793f3',
+                borderColor: 'rgba(255,255,255,0.7)',
+                borderWidth: 1,
+                shadowColor: 'rgba(150,150,150,1)',
+                shadowBlur: 3,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                textStyle: {
+                    color: '#fff'
+                }
+            },
+            emphasis: {
+                textStyle: {}
+            }
+        },
+        label: {
+            show: true,
+            // Do not use textDistance, for ellipsis rect just the same as treemap node rect.
+            distance: 0,
+            padding: 5,
+            position: 'inside', // Can be [5, '5%'] or position stirng like 'insideTopLeft', ...
+            // formatter: null,
+            color: '#fff',
+            ellipsis: true
+            // align
+            // verticalAlign
+        },
+        upperLabel: {                   // Label when node is parent.
+            show: false,
+            position: [0, '50%'],
+            height: 20,
+            // formatter: null,
+            color: '#fff',
+            ellipsis: true,
+            // align: null,
+            verticalAlign: 'middle'
+        },
+        itemStyle: {
+            color: null,            // Can be 'none' if not necessary.
+            colorAlpha: null,       // Can be 'none' if not necessary.
+            colorSaturation: null,  // Can be 'none' if not necessary.
+            borderWidth: 0,
+            gapWidth: 0,
+            borderColor: '#fff',
+            borderColorSaturation: null // If specified, borderColor will be ineffective, and the
+                                        // border color is evaluated by color of current node and
+                                        // borderColorSaturation.
+        },
+        emphasis: {
+            upperLabel: {
+                show: true,
+                position: [0, '50%'],
+                color: '#fff',
+                ellipsis: true,
+                verticalAlign: 'middle'
+            }
+        },
+
+        visualDimension: 0,                 // Can be 0, 1, 2, 3.
+        visualMin: null,
+        visualMax: null,
+
+        color: [],                  // + treemapSeries.color should not be modified. Please only modified
+                                    // level[n].color (if necessary).
+                                    // + Specify color list of each level. level[0].color would be global
+                                    // color list if not specified. (see method `setDefault`).
+                                    // + But set as a empty array to forbid fetch color from global palette
+                                    // when using nodeModel.get('color'), otherwise nodes on deep level
+                                    // will always has color palette set and are not able to inherit color
+                                    // from parent node.
+                                    // + TreemapSeries.color can not be set as 'none', otherwise effect
+                                    // legend color fetching (see seriesColor.js).
+        colorAlpha: null,           // Array. Specify color alpha range of each level, like [0.2, 0.8]
+        colorSaturation: null,      // Array. Specify color saturation of each level, like [0.2, 0.5]
+        colorMappingBy: 'index',    // 'value' or 'index' or 'id'.
+        visibleMin: 10,             // If area less than this threshold (unit: pixel^2), node will not
+                                    // be rendered. Only works when sort is 'asc' or 'desc'.
+        childrenVisibleMin: null,   // If area of a node less than this threshold (unit: pixel^2),
+                                    // grandchildren will not show.
+                                    // Why grandchildren? If not grandchildren but children,
+                                    // some siblings show children and some not,
+                                    // the appearance may be mess and not consistent,
+        levels: []                  // Each item: {
+                                    //     visibleMin, itemStyle, visualDimension, label
+                                    // }
+        // data: {
+        //      value: [],
+        //      children: [],
+        //      link: 'http://xxx.xxx.xxx',
+        //      target: 'blank' or 'self'
+        // }
+    },
+
+    /**
+     * @override
+     */
+    getInitialData: function (option, ecModel) {
+        // Create a virtual root.
+        var root = {name: option.name, children: option.data};
+
+        completeTreeValue(root);
+
+        var levels = option.levels || [];
+
+        levels = option.levels = setDefault(levels, ecModel);
+
+        var treeOption = {};
+
+        treeOption.levels = levels;
+
+        // Make sure always a new tree is created when setOption,
+        // in TreemapView, we check whether oldTree === newTree
+        // to choose mappings approach among old shapes and new shapes.
+        return Tree.createTree(root, this, treeOption).data;
+    },
+
+    optionUpdated: function () {
+        this.resetViewRoot();
+    },
+
+    /**
+     * @override
+     * @param {number} dataIndex
+     * @param {boolean} [mutipleSeries=false]
+     */
+    formatTooltip: function (dataIndex) {
+        var data = this.getData();
+        var value = this.getRawValue(dataIndex);
+        var formattedValue = isArray(value)
+            ? addCommas(value[0]) : addCommas(value);
+        var name = data.getName(dataIndex);
+
+        return encodeHTML(name + ': ' + formattedValue);
+    },
+
+    /**
+     * Add tree path to tooltip param
+     *
+     * @override
+     * @param {number} dataIndex
+     * @return {Object}
+     */
+    getDataParams: function (dataIndex) {
+        var params = SeriesModel.prototype.getDataParams.apply(this, arguments);
+
+        var node = this.getData().tree.getNodeByDataIndex(dataIndex);
+        params.treePathInfo = wrapTreePathInfo(node, this);
+
+        return params;
+    },
+
+    /**
+     * @public
+     * @param {Object} layoutInfo {
+     *                                x: containerGroup x
+     *                                y: containerGroup y
+     *                                width: containerGroup width
+     *                                height: containerGroup height
+     *                            }
+     */
+    setLayoutInfo: function (layoutInfo) {
+        /**
+         * @readOnly
+         * @type {Object}
+         */
+        this.layoutInfo = this.layoutInfo || {};
+        extend(this.layoutInfo, layoutInfo);
+    },
+
+    /**
+     * @param  {string} id
+     * @return {number} index
+     */
+    mapIdToIndex: function (id) {
+        // A feature is implemented:
+        // index is monotone increasing with the sequence of
+        // input id at the first time.
+        // This feature can make sure that each data item and its
+        // mapped color have the same index between data list and
+        // color list at the beginning, which is useful for user
+        // to adjust data-color mapping.
+
+        /**
+         * @private
+         * @type {Object}
+         */
+        var idIndexMap = this._idIndexMap;
+
+        if (!idIndexMap) {
+            idIndexMap = this._idIndexMap = createHashMap();
+            /**
+             * @private
+             * @type {number}
+             */
+            this._idIndexMapCount = 0;
+        }
+
+        var index = idIndexMap.get(id);
+        if (index == null) {
+            idIndexMap.set(id, index = this._idIndexMapCount++);
+        }
+
+        return index;
+    },
+
+    getViewRoot: function () {
+        return this._viewRoot;
+    },
+
+    /**
+     * @param {module:echarts/data/Tree~Node} [viewRoot]
+     */
+    resetViewRoot: function (viewRoot) {
+        viewRoot
+            ? (this._viewRoot = viewRoot)
+            : (viewRoot = this._viewRoot);
+
+        var root = this.getRawData().tree.root;
+
+        if (!viewRoot
+            || (viewRoot !== root && !root.contains(viewRoot))
+        ) {
+            this._viewRoot = root;
+        }
+    }
+});
+
+/**
+ * @param {Object} dataNode
+ */
+function completeTreeValue(dataNode) {
+    // Postorder travel tree.
+    // If value of none-leaf node is not set,
+    // calculate it by suming up the value of all children.
+    var sum = 0;
+
+    each$1(dataNode.children, function (child) {
+
+        completeTreeValue(child);
+
+        var childValue = child.value;
+        isArray(childValue) && (childValue = childValue[0]);
+
+        sum += childValue;
+    });
+
+    var thisValue = dataNode.value;
+    if (isArray(thisValue)) {
+        thisValue = thisValue[0];
+    }
+
+    if (thisValue == null || isNaN(thisValue)) {
+        thisValue = sum;
+    }
+    // Value should not less than 0.
+    if (thisValue < 0) {
+        thisValue = 0;
+    }
+
+    isArray(dataNode.value)
+        ? (dataNode.value[0] = thisValue)
+        : (dataNode.value = thisValue);
+}
+
+/**
+ * set default to level configuration
+ */
+function setDefault(levels, ecModel) {
+    var globalColorList = ecModel.get('color');
+
+    if (!globalColorList) {
+        return;
+    }
+
+    levels = levels || [];
+    var hasColorDefine;
+    each$1(levels, function (levelDefine) {
+        var model = new Model(levelDefine);
+        var modelColor = model.get('color');
+
+        if (model.get('itemStyle.color')
+            || (modelColor && modelColor !== 'none')
+        ) {
+            hasColorDefine = true;
+        }
+    });
+
+    if (!hasColorDefine) {
+        var level0 = levels[0] || (levels[0] = {});
+        level0.color = globalColorList.slice();
+    }
+
+    return levels;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var TEXT_PADDING = 8;
+var ITEM_GAP = 8;
+var ARRAY_LENGTH = 5;
+
+function Breadcrumb(containerGroup) {
+    /**
+     * @private
+     * @type {module:zrender/container/Group}
+     */
+    this.group = new Group();
+
+    containerGroup.add(this.group);
+}
+
+Breadcrumb.prototype = {
+
+    constructor: Breadcrumb,
+
+    render: function (seriesModel, api, targetNode, onSelect) {
+        var model = seriesModel.getModel('breadcrumb');
+        var thisGroup = this.group;
+
+        thisGroup.removeAll();
+
+        if (!model.get('show') || !targetNode) {
+            return;
+        }
+
+        var normalStyleModel = model.getModel('itemStyle');
+        // var emphasisStyleModel = model.getModel('emphasis.itemStyle');
+        var textStyleModel = normalStyleModel.getModel('textStyle');
+
+        var layoutParam = {
+            pos: {
+                left: model.get('left'),
+                right: model.get('right'),
+                top: model.get('top'),
+                bottom: model.get('bottom')
+            },
+            box: {
+                width: api.getWidth(),
+                height: api.getHeight()
+            },
+            emptyItemWidth: model.get('emptyItemWidth'),
+            totalWidth: 0,
+            renderList: []
+        };
+
+        this._prepare(targetNode, layoutParam, textStyleModel);
+        this._renderContent(seriesModel, layoutParam, normalStyleModel, textStyleModel, onSelect);
+
+        positionElement(thisGroup, layoutParam.pos, layoutParam.box);
+    },
+
+    /**
+     * Prepare render list and total width
+     * @private
+     */
+    _prepare: function (targetNode, layoutParam, textStyleModel) {
+        for (var node = targetNode; node; node = node.parentNode) {
+            var text = node.getModel().get('name');
+            var textRect = textStyleModel.getTextRect(text);
+            var itemWidth = Math.max(
+                textRect.width + TEXT_PADDING * 2,
+                layoutParam.emptyItemWidth
+            );
+            layoutParam.totalWidth += itemWidth + ITEM_GAP;
+            layoutParam.renderList.push({node: node, text: text, width: itemWidth});
+        }
+    },
+
+    /**
+     * @private
+     */
+    _renderContent: function (
+        seriesModel, layoutParam, normalStyleModel, textStyleModel, onSelect
+    ) {
+        // Start rendering.
+        var lastX = 0;
+        var emptyItemWidth = layoutParam.emptyItemWidth;
+        var height = seriesModel.get('breadcrumb.height');
+        var availableSize = getAvailableSize(layoutParam.pos, layoutParam.box);
+        var totalWidth = layoutParam.totalWidth;
+        var renderList = layoutParam.renderList;
+
+        for (var i = renderList.length - 1; i >= 0; i--) {
+            var item = renderList[i];
+            var itemNode = item.node;
+            var itemWidth = item.width;
+            var text = item.text;
+
+            // Hdie text and shorten width if necessary.
+            if (totalWidth > availableSize.width) {
+                totalWidth -= itemWidth - emptyItemWidth;
+                itemWidth = emptyItemWidth;
+                text = null;
+            }
+
+            var el = new Polygon({
+                shape: {
+                    points: makeItemPoints(
+                        lastX, 0, itemWidth, height,
+                        i === renderList.length - 1, i === 0
+                    )
+                },
+                style: defaults(
+                    normalStyleModel.getItemStyle(),
+                    {
+                        lineJoin: 'bevel',
+                        text: text,
+                        textFill: textStyleModel.getTextColor(),
+                        textFont: textStyleModel.getFont()
+                    }
+                ),
+                z: 10,
+                onclick: curry(onSelect, itemNode)
+            });
+            this.group.add(el);
+
+            packEventData(el, seriesModel, itemNode);
+
+            lastX += itemWidth + ITEM_GAP;
+        }
+    },
+
+    /**
+     * @override
+     */
+    remove: function () {
+        this.group.removeAll();
+    }
+};
+
+function makeItemPoints(x, y, itemWidth, itemHeight, head, tail) {
+    var points = [
+        [head ? x : x - ARRAY_LENGTH, y],
+        [x + itemWidth, y],
+        [x + itemWidth, y + itemHeight],
+        [head ? x : x - ARRAY_LENGTH, y + itemHeight]
+    ];
+    !tail && points.splice(2, 0, [x + itemWidth + ARRAY_LENGTH, y + itemHeight / 2]);
+    !head && points.push([x, y + itemHeight / 2]);
+    return points;
+}
+
+// Package custom mouse event.
+function packEventData(el, seriesModel, itemNode) {
+    el.eventData = {
+        componentType: 'series',
+        componentSubType: 'treemap',
+        seriesIndex: seriesModel.componentIndex,
+        seriesName: seriesModel.name,
+        seriesType: 'treemap',
+        selfType: 'breadcrumb', // Distinguish with click event on treemap node.
+        nodeData: {
+            dataIndex: itemNode && itemNode.dataIndex,
+            name: itemNode && itemNode.name
+        },
+        treePathInfo: itemNode && wrapTreePathInfo(itemNode, seriesModel)
+    };
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @param {number} [time=500] Time in ms
+ * @param {string} [easing='linear']
+ * @param {number} [delay=0]
+ * @param {Function} [callback]
+ *
+ * @example
+ *  // Animate position
+ *  animation
+ *      .createWrap()
+ *      .add(el1, {position: [10, 10]})
+ *      .add(el2, {shape: {width: 500}, style: {fill: 'red'}}, 400)
+ *      .done(function () { // done })
+ *      .start('cubicOut');
+ */
+function createWrap() {
+
+    var storage = [];
+    var elExistsMap = {};
+    var doneCallback;
+
+    return {
+
+        /**
+         * Caution: a el can only be added once, otherwise 'done'
+         * might not be called. This method checks this (by el.id),
+         * suppresses adding and returns false when existing el found.
+         *
+         * @param {modele:zrender/Element} el
+         * @param {Object} target
+         * @param {number} [time=500]
+         * @param {number} [delay=0]
+         * @param {string} [easing='linear']
+         * @return {boolean} Whether adding succeeded.
+         *
+         * @example
+         *     add(el, target, time, delay, easing);
+         *     add(el, target, time, easing);
+         *     add(el, target, time);
+         *     add(el, target);
+         */
+        add: function (el, target, time, delay, easing) {
+            if (isString(delay)) {
+                easing = delay;
+                delay = 0;
+            }
+
+            if (elExistsMap[el.id]) {
+                return false;
+            }
+            elExistsMap[el.id] = 1;
+
+            storage.push(
+                {el: el, target: target, time: time, delay: delay, easing: easing}
+            );
+
+            return true;
+        },
+
+        /**
+         * Only execute when animation finished. Will not execute when any
+         * of 'stop' or 'stopAnimation' called.
+         *
+         * @param {Function} callback
+         */
+        done: function (callback) {
+            doneCallback = callback;
+            return this;
+        },
+
+        /**
+         * Will stop exist animation firstly.
+         */
+        start: function () {
+            var count = storage.length;
+
+            for (var i = 0, len = storage.length; i < len; i++) {
+                var item = storage[i];
+                item.el.animateTo(item.target, item.time, item.delay, item.easing, done);
+            }
+
+            return this;
+
+            function done() {
+                count--;
+                if (!count) {
+                    storage.length = 0;
+                    elExistsMap = {};
+                    doneCallback && doneCallback();
+                }
+            }
+        }
+    };
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var bind$1 = bind;
+var Group$2 = Group;
+var Rect$1 = Rect;
+var each$8 = each$1;
+
+var DRAG_THRESHOLD = 3;
+var PATH_LABEL_NOAMAL = ['label'];
+var PATH_LABEL_EMPHASIS = ['emphasis', 'label'];
+var PATH_UPPERLABEL_NORMAL = ['upperLabel'];
+var PATH_UPPERLABEL_EMPHASIS = ['emphasis', 'upperLabel'];
+var Z_BASE = 10; // Should bigger than every z.
+var Z_BG = 1;
+var Z_CONTENT = 2;
+
+var getItemStyleEmphasis = makeStyleMapper([
+    ['fill', 'color'],
+    // `borderColor` and `borderWidth` has been occupied,
+    // so use `stroke` to indicate the stroke of the rect.
+    ['stroke', 'strokeColor'],
+    ['lineWidth', 'strokeWidth'],
+    ['shadowBlur'],
+    ['shadowOffsetX'],
+    ['shadowOffsetY'],
+    ['shadowColor']
+]);
+var getItemStyleNormal = function (model) {
+    // Normal style props should include emphasis style props.
+    var itemStyle = getItemStyleEmphasis(model);
+    // Clear styles set by emphasis.
+    itemStyle.stroke = itemStyle.fill = itemStyle.lineWidth = null;
+    return itemStyle;
+};
+
+extendChartView({
+
+    type: 'treemap',
+
+    /**
+     * @override
+     */
+    init: function (o, api) {
+
+        /**
+         * @private
+         * @type {module:zrender/container/Group}
+         */
+        this._containerGroup;
+
+        /**
+         * @private
+         * @type {Object.<string, Array.<module:zrender/container/Group>>}
+         */
+        this._storage = createStorage();
+
+        /**
+         * @private
+         * @type {module:echarts/data/Tree}
+         */
+        this._oldTree;
+
+        /**
+         * @private
+         * @type {module:echarts/chart/treemap/Breadcrumb}
+         */
+        this._breadcrumb;
+
+        /**
+         * @private
+         * @type {module:echarts/component/helper/RoamController}
+         */
+        this._controller;
+
+        /**
+         * 'ready', 'animating'
+         * @private
+         */
+        this._state = 'ready';
+    },
+
+    /**
+     * @override
+     */
+    render: function (seriesModel, ecModel, api, payload) {
+
+        var models = ecModel.findComponents({
+            mainType: 'series', subType: 'treemap', query: payload
+        });
+        if (indexOf(models, seriesModel) < 0) {
+            return;
+        }
+
+        this.seriesModel = seriesModel;
+        this.api = api;
+        this.ecModel = ecModel;
+
+        var types = ['treemapZoomToNode', 'treemapRootToNode'];
+        var targetInfo = retrieveTargetInfo(payload, types, seriesModel);
+        var payloadType = payload && payload.type;
+        var layoutInfo = seriesModel.layoutInfo;
+        var isInit = !this._oldTree;
+        var thisStorage = this._storage;
+
+        // Mark new root when action is treemapRootToNode.
+        var reRoot = (payloadType === 'treemapRootToNode' && targetInfo && thisStorage)
+            ? {
+                rootNodeGroup: thisStorage.nodeGroup[targetInfo.node.getRawIndex()],
+                direction: payload.direction
+            }
+            : null;
+
+        var containerGroup = this._giveContainerGroup(layoutInfo);
+
+        var renderResult = this._doRender(containerGroup, seriesModel, reRoot);
+        (
+            !isInit && (
+                !payloadType
+                || payloadType === 'treemapZoomToNode'
+                || payloadType === 'treemapRootToNode'
+            )
+        )
+            ? this._doAnimation(containerGroup, renderResult, seriesModel, reRoot)
+            : renderResult.renderFinally();
+
+        this._resetController(api);
+
+        this._renderBreadcrumb(seriesModel, api, targetInfo);
+    },
+
+    /**
+     * @private
+     */
+    _giveContainerGroup: function (layoutInfo) {
+        var containerGroup = this._containerGroup;
+        if (!containerGroup) {
+            // FIXME
+            // åŠ ä¸€å±‚containerGroupæ˜¯ä¸ºäº†clipï¼Œä½†æ˜¯çŽ°åœ¨clipåŠŸèƒ½å¹¶æ²¡æœ‰å®žçŽ°ã€‚
+            containerGroup = this._containerGroup = new Group$2();
+            this._initEvents(containerGroup);
+            this.group.add(containerGroup);
+        }
+        containerGroup.attr('position', [layoutInfo.x, layoutInfo.y]);
+
+        return containerGroup;
+    },
+
+    /**
+     * @private
+     */
+    _doRender: function (containerGroup, seriesModel, reRoot) {
+        var thisTree = seriesModel.getData().tree;
+        var oldTree = this._oldTree;
+
+        // Clear last shape records.
+        var lastsForAnimation = createStorage();
+        var thisStorage = createStorage();
+        var oldStorage = this._storage;
+        var willInvisibleEls = [];
+        var doRenderNode = curry(
+            renderNode, seriesModel,
+            thisStorage, oldStorage, reRoot,
+            lastsForAnimation, willInvisibleEls
+        );
+
+        // Notice: when thisTree and oldTree are the same tree (see list.cloneShallow),
+        // the oldTree is actually losted, so we can not find all of the old graphic
+        // elements from tree. So we use this stragegy: make element storage, move
+        // from old storage to new storage, clear old storage.
+
+        dualTravel(
+            thisTree.root ? [thisTree.root] : [],
+            (oldTree && oldTree.root) ? [oldTree.root] : [],
+            containerGroup,
+            thisTree === oldTree || !oldTree,
+            0
+        );
+
+        // Process all removing.
+        var willDeleteEls = clearStorage(oldStorage);
+
+        this._oldTree = thisTree;
+        this._storage = thisStorage;
+
+        return {
+            lastsForAnimation: lastsForAnimation,
+            willDeleteEls: willDeleteEls,
+            renderFinally: renderFinally
+        };
+
+        function dualTravel(thisViewChildren, oldViewChildren, parentGroup, sameTree, depth) {
+            // When 'render' is triggered by action,
+            // 'this' and 'old' may be the same tree,
+            // we use rawIndex in that case.
+            if (sameTree) {
+                oldViewChildren = thisViewChildren;
+                each$8(thisViewChildren, function (child, index) {
+                    !child.isRemoved() && processNode(index, index);
+                });
+            }
+            // Diff hierarchically (diff only in each subtree, but not whole).
+            // because, consistency of view is important.
+            else {
+                (new DataDiffer(oldViewChildren, thisViewChildren, getKey, getKey))
+                    .add(processNode)
+                    .update(processNode)
+                    .remove(curry(processNode, null))
+                    .execute();
+            }
+
+            function getKey(node) {
+                // Identify by name or raw index.
+                return node.getId();
+            }
+
+            function processNode(newIndex, oldIndex) {
+                var thisNode = newIndex != null ? thisViewChildren[newIndex] : null;
+                var oldNode = oldIndex != null ? oldViewChildren[oldIndex] : null;
+
+                var group = doRenderNode(thisNode, oldNode, parentGroup, depth);
+
+                group && dualTravel(
+                    thisNode && thisNode.viewChildren || [],
+                    oldNode && oldNode.viewChildren || [],
+                    group,
+                    sameTree,
+                    depth + 1
+                );
+            }
+        }
+
+        function clearStorage(storage) {
+            var willDeleteEls = createStorage();
+            storage && each$8(storage, function (store, storageName) {
+                var delEls = willDeleteEls[storageName];
+                each$8(store, function (el) {
+                    el && (delEls.push(el), el.__tmWillDelete = 1);
+                });
+            });
+            return willDeleteEls;
+        }
+
+        function renderFinally() {
+            each$8(willDeleteEls, function (els) {
+                each$8(els, function (el) {
+                    el.parent && el.parent.remove(el);
+                });
+            });
+            each$8(willInvisibleEls, function (el) {
+                el.invisible = true;
+                // Setting invisible is for optimizing, so no need to set dirty,
+                // just mark as invisible.
+                el.dirty();
+            });
+        }
+    },
+
+    /**
+     * @private
+     */
+    _doAnimation: function (containerGroup, renderResult, seriesModel, reRoot) {
+        if (!seriesModel.get('animation')) {
+            return;
+        }
+
+        var duration = seriesModel.get('animationDurationUpdate');
+        var easing = seriesModel.get('animationEasing');
+        var animationWrap = createWrap();
+
+        // Make delete animations.
+        each$8(renderResult.willDeleteEls, function (store, storageName) {
+            each$8(store, function (el, rawIndex) {
+                if (el.invisible) {
+                    return;
+                }
+
+                var parent = el.parent; // Always has parent, and parent is nodeGroup.
+                var target;
+
+                if (reRoot && reRoot.direction === 'drillDown') {
+                    target = parent === reRoot.rootNodeGroup
+                        // This is the content element of view root.
+                        // Only `content` will enter this branch, because
+                        // `background` and `nodeGroup` will not be deleted.
+                        ? {
+                            shape: {
+                                x: 0,
+                                y: 0,
+                                width: parent.__tmNodeWidth,
+                                height: parent.__tmNodeHeight
+                            },
+                            style: {
+                                opacity: 0
+                            }
+                        }
+                        // Others.
+                        : {style: {opacity: 0}};
+                }
+                else {
+                    var targetX = 0;
+                    var targetY = 0;
+
+                    if (!parent.__tmWillDelete) {
+                        // Let node animate to right-bottom corner, cooperating with fadeout,
+                        // which is appropriate for user understanding.
+                        // Divided by 2 for reRoot rolling up effect.
+                        targetX = parent.__tmNodeWidth / 2;
+                        targetY = parent.__tmNodeHeight / 2;
+                    }
+
+                    target = storageName === 'nodeGroup'
+                        ? {position: [targetX, targetY], style: {opacity: 0}}
+                        : {
+                            shape: {x: targetX, y: targetY, width: 0, height: 0},
+                            style: {opacity: 0}
+                        };
+                }
+
+                target && animationWrap.add(el, target, duration, easing);
+            });
+        });
+
+        // Make other animations
+        each$8(this._storage, function (store, storageName) {
+            each$8(store, function (el, rawIndex) {
+                var last = renderResult.lastsForAnimation[storageName][rawIndex];
+                var target = {};
+
+                if (!last) {
+                    return;
+                }
+
+                if (storageName === 'nodeGroup') {
+                    if (last.old) {
+                        target.position = el.position.slice();
+                        el.attr('position', last.old);
+                    }
+                }
+                else {
+                    if (last.old) {
+                        target.shape = extend({}, el.shape);
+                        el.setShape(last.old);
+                    }
+
+                    if (last.fadein) {
+                        el.setStyle('opacity', 0);
+                        target.style = {opacity: 1};
+                    }
+                    // When animation is stopped for succedent animation starting,
+                    // el.style.opacity might not be 1
+                    else if (el.style.opacity !== 1) {
+                        target.style = {opacity: 1};
+                    }
+                }
+
+                animationWrap.add(el, target, duration, easing);
+            });
+        }, this);
+
+        this._state = 'animating';
+
+        animationWrap
+            .done(bind$1(function () {
+                this._state = 'ready';
+                renderResult.renderFinally();
+            }, this))
+            .start();
+    },
+
+    /**
+     * @private
+     */
+    _resetController: function (api) {
+        var controller = this._controller;
+
+        // Init controller.
+        if (!controller) {
+            controller = this._controller = new RoamController(api.getZr());
+            controller.enable(this.seriesModel.get('roam'));
+            controller.on('pan', bind$1(this._onPan, this));
+            controller.on('zoom', bind$1(this._onZoom, this));
+        }
+
+        var rect = new BoundingRect(0, 0, api.getWidth(), api.getHeight());
+        controller.setPointerChecker(function (e, x, y) {
+            return rect.contain(x, y);
+        });
+    },
+
+    /**
+     * @private
+     */
+    _clearController: function () {
+        var controller = this._controller;
+        if (controller) {
+            controller.dispose();
+            controller = null;
+        }
+    },
+
+    /**
+     * @private
+     */
+    _onPan: function (dx, dy) {
+        if (this._state !== 'animating'
+            && (Math.abs(dx) > DRAG_THRESHOLD || Math.abs(dy) > DRAG_THRESHOLD)
+        ) {
+            // These param must not be cached.
+            var root = this.seriesModel.getData().tree.root;
+
+            if (!root) {
+                return;
+            }
+
+            var rootLayout = root.getLayout();
+
+            if (!rootLayout) {
+                return;
+            }
+
+            this.api.dispatchAction({
+                type: 'treemapMove',
+                from: this.uid,
+                seriesId: this.seriesModel.id,
+                rootRect: {
+                    x: rootLayout.x + dx, y: rootLayout.y + dy,
+                    width: rootLayout.width, height: rootLayout.height
+                }
+            });
+        }
+    },
+
+    /**
+     * @private
+     */
+    _onZoom: function (scale, mouseX, mouseY) {
+        if (this._state !== 'animating') {
+            // These param must not be cached.
+            var root = this.seriesModel.getData().tree.root;
+
+            if (!root) {
+                return;
+            }
+
+            var rootLayout = root.getLayout();
+
+            if (!rootLayout) {
+                return;
+            }
+
+            var rect = new BoundingRect(
+                rootLayout.x, rootLayout.y, rootLayout.width, rootLayout.height
+            );
+            var layoutInfo = this.seriesModel.layoutInfo;
+
+            // Transform mouse coord from global to containerGroup.
+            mouseX -= layoutInfo.x;
+            mouseY -= layoutInfo.y;
+
+            // Scale root bounding rect.
+            var m = create$1();
+            translate(m, m, [-mouseX, -mouseY]);
+            scale$1(m, m, [scale, scale]);
+            translate(m, m, [mouseX, mouseY]);
+
+            rect.applyTransform(m);
+
+            this.api.dispatchAction({
+                type: 'treemapRender',
+                from: this.uid,
+                seriesId: this.seriesModel.id,
+                rootRect: {
+                    x: rect.x, y: rect.y,
+                    width: rect.width, height: rect.height
+                }
+            });
+        }
+    },
+
+    /**
+     * @private
+     */
+    _initEvents: function (containerGroup) {
+        containerGroup.on('click', function (e) {
+            if (this._state !== 'ready') {
+                return;
+            }
+
+            var nodeClick = this.seriesModel.get('nodeClick', true);
+
+            if (!nodeClick) {
+                return;
+            }
+
+            var targetInfo = this.findTarget(e.offsetX, e.offsetY);
+
+            if (!targetInfo) {
+                return;
+            }
+
+            var node = targetInfo.node;
+            if (node.getLayout().isLeafRoot) {
+                this._rootToNode(targetInfo);
+            }
+            else {
+                if (nodeClick === 'zoomToNode') {
+                    this._zoomToNode(targetInfo);
+                }
+                else if (nodeClick === 'link') {
+                    var itemModel = node.hostTree.data.getItemModel(node.dataIndex);
+                    var link = itemModel.get('link', true);
+                    var linkTarget = itemModel.get('target', true) || 'blank';
+                    link && window.open(link, linkTarget);
+                }
+            }
+
+        }, this);
+    },
+
+    /**
+     * @private
+     */
+    _renderBreadcrumb: function (seriesModel, api, targetInfo) {
+        if (!targetInfo) {
+            targetInfo = seriesModel.get('leafDepth', true) != null
+                ? {node: seriesModel.getViewRoot()}
+                // FIXME
+                // better way?
+                // Find breadcrumb tail on center of containerGroup.
+                : this.findTarget(api.getWidth() / 2, api.getHeight() / 2);
+
+            if (!targetInfo) {
+                targetInfo = {node: seriesModel.getData().tree.root};
+            }
+        }
+
+        (this._breadcrumb || (this._breadcrumb = new Breadcrumb(this.group)))
+            .render(seriesModel, api, targetInfo.node, bind$1(onSelect, this));
+
+        function onSelect(node) {
+            if (this._state !== 'animating') {
+                aboveViewRoot(seriesModel.getViewRoot(), node)
+                    ? this._rootToNode({node: node})
+                    : this._zoomToNode({node: node});
+            }
+        }
+    },
+
+    /**
+     * @override
+     */
+    remove: function () {
+        this._clearController();
+        this._containerGroup && this._containerGroup.removeAll();
+        this._storage = createStorage();
+        this._state = 'ready';
+        this._breadcrumb && this._breadcrumb.remove();
+    },
+
+    dispose: function () {
+        this._clearController();
+    },
+
+    /**
+     * @private
+     */
+    _zoomToNode: function (targetInfo) {
+        this.api.dispatchAction({
+            type: 'treemapZoomToNode',
+            from: this.uid,
+            seriesId: this.seriesModel.id,
+            targetNode: targetInfo.node
+        });
+    },
+
+    /**
+     * @private
+     */
+    _rootToNode: function (targetInfo) {
+        this.api.dispatchAction({
+            type: 'treemapRootToNode',
+            from: this.uid,
+            seriesId: this.seriesModel.id,
+            targetNode: targetInfo.node
+        });
+    },
+
+    /**
+     * @public
+     * @param {number} x Global coord x.
+     * @param {number} y Global coord y.
+     * @return {Object} info If not found, return undefined;
+     * @return {number} info.node Target node.
+     * @return {number} info.offsetX x refer to target node.
+     * @return {number} info.offsetY y refer to target node.
+     */
+    findTarget: function (x, y) {
+        var targetInfo;
+        var viewRoot = this.seriesModel.getViewRoot();
+
+        viewRoot.eachNode({attr: 'viewChildren', order: 'preorder'}, function (node) {
+            var bgEl = this._storage.background[node.getRawIndex()];
+            // If invisible, there might be no element.
+            if (bgEl) {
+                var point = bgEl.transformCoordToLocal(x, y);
+                var shape = bgEl.shape;
+
+                // For performance consideration, dont use 'getBoundingRect'.
+                if (shape.x <= point[0]
+                    && point[0] <= shape.x + shape.width
+                    && shape.y <= point[1]
+                    && point[1] <= shape.y + shape.height
+                ) {
+                    targetInfo = {node: node, offsetX: point[0], offsetY: point[1]};
+                }
+                else {
+                    return false; // Suppress visit subtree.
+                }
+            }
+        }, this);
+
+        return targetInfo;
+    }
+
+});
+
+/**
+ * @inner
+ */
+function createStorage() {
+    return {nodeGroup: [], background: [], content: []};
+}
+
+/**
+ * @inner
+ * @return Return undefined means do not travel further.
+ */
+function renderNode(
+    seriesModel, thisStorage, oldStorage, reRoot,
+    lastsForAnimation, willInvisibleEls,
+    thisNode, oldNode, parentGroup, depth
+) {
+    // Whether under viewRoot.
+    if (!thisNode) {
+        // Deleting nodes will be performed finally. This method just find
+        // element from old storage, or create new element, set them to new
+        // storage, and set styles.
+        return;
+    }
+
+    // -------------------------------------------------------------------
+    // Start of closure variables available in "Procedures in renderNode".
+
+    var thisLayout = thisNode.getLayout();
+
+    if (!thisLayout || !thisLayout.isInView) {
+        return;
+    }
+
+    var thisWidth = thisLayout.width;
+    var thisHeight = thisLayout.height;
+    var borderWidth = thisLayout.borderWidth;
+    var thisInvisible = thisLayout.invisible;
+
+    var thisRawIndex = thisNode.getRawIndex();
+    var oldRawIndex = oldNode && oldNode.getRawIndex();
+
+    var thisViewChildren = thisNode.viewChildren;
+    var upperHeight = thisLayout.upperHeight;
+    var isParent = thisViewChildren && thisViewChildren.length;
+    var itemStyleNormalModel = thisNode.getModel('itemStyle');
+    var itemStyleEmphasisModel = thisNode.getModel('emphasis.itemStyle');
+
+    // End of closure ariables available in "Procedures in renderNode".
+    // -----------------------------------------------------------------
+
+    // Node group
+    var group = giveGraphic('nodeGroup', Group$2);
+
+    if (!group) {
+        return;
+    }
+
+    parentGroup.add(group);
+    // x,y are not set when el is above view root.
+    group.attr('position', [thisLayout.x || 0, thisLayout.y || 0]);
+    group.__tmNodeWidth = thisWidth;
+    group.__tmNodeHeight = thisHeight;
+
+    if (thisLayout.isAboveViewRoot) {
+        return group;
+    }
+
+    // Background
+    var bg = giveGraphic('background', Rect$1, depth, Z_BG);
+    bg && renderBackground(group, bg, isParent && thisLayout.upperHeight);
+
+    // No children, render content.
+    if (!isParent) {
+        var content = giveGraphic('content', Rect$1, depth, Z_CONTENT);
+        content && renderContent(group, content);
+    }
+
+    return group;
+
+    // ----------------------------
+    // | Procedures in renderNode |
+    // ----------------------------
+
+    function renderBackground(group, bg, useUpperLabel) {
+        // For tooltip.
+        bg.dataIndex = thisNode.dataIndex;
+        bg.seriesIndex = seriesModel.seriesIndex;
+
+        bg.setShape({x: 0, y: 0, width: thisWidth, height: thisHeight});
+        var visualBorderColor = thisNode.getVisual('borderColor', true);
+        var emphasisBorderColor = itemStyleEmphasisModel.get('borderColor');
+
+        updateStyle(bg, function () {
+            var normalStyle = getItemStyleNormal(itemStyleNormalModel);
+            normalStyle.fill = visualBorderColor;
+            var emphasisStyle = getItemStyleEmphasis(itemStyleEmphasisModel);
+            emphasisStyle.fill = emphasisBorderColor;
+
+            if (useUpperLabel) {
+                var upperLabelWidth = thisWidth - 2 * borderWidth;
+
+                prepareText(
+                    normalStyle, emphasisStyle, visualBorderColor, upperLabelWidth, upperHeight,
+                    {x: borderWidth, y: 0, width: upperLabelWidth, height: upperHeight}
+                );
+            }
+            // For old bg.
+            else {
+                normalStyle.text = emphasisStyle.text = null;
+            }
+
+            bg.setStyle(normalStyle);
+            setHoverStyle(bg, emphasisStyle);
+        });
+
+        group.add(bg);
+    }
+
+    function renderContent(group, content) {
+        // For tooltip.
+        content.dataIndex = thisNode.dataIndex;
+        content.seriesIndex = seriesModel.seriesIndex;
+
+        var contentWidth = Math.max(thisWidth - 2 * borderWidth, 0);
+        var contentHeight = Math.max(thisHeight - 2 * borderWidth, 0);
+
+        content.culling = true;
+        content.setShape({
+            x: borderWidth,
+            y: borderWidth,
+            width: contentWidth,
+            height: contentHeight
+        });
+
+        var visualColor = thisNode.getVisual('color', true);
+        updateStyle(content, function () {
+            var normalStyle = getItemStyleNormal(itemStyleNormalModel);
+            normalStyle.fill = visualColor;
+            var emphasisStyle = getItemStyleEmphasis(itemStyleEmphasisModel);
+
+            prepareText(normalStyle, emphasisStyle, visualColor, contentWidth, contentHeight);
+
+            content.setStyle(normalStyle);
+            setHoverStyle(content, emphasisStyle);
+        });
+
+        group.add(content);
+    }
+
+    function updateStyle(element, cb) {
+        if (!thisInvisible) {
+            // If invisible, do not set visual, otherwise the element will
+            // change immediately before animation. We think it is OK to
+            // remain its origin color when moving out of the view window.
+            cb();
+
+            if (!element.__tmWillVisible) {
+                element.invisible = false;
+            }
+        }
+        else {
+            // Delay invisible setting utill animation finished,
+            // avoid element vanish suddenly before animation.
+            !element.invisible && willInvisibleEls.push(element);
+        }
+    }
+
+    function prepareText(normalStyle, emphasisStyle, visualColor, width, height, upperLabelRect) {
+        var nodeModel = thisNode.getModel();
+        var text = retrieve(
+            seriesModel.getFormattedLabel(
+                thisNode.dataIndex, 'normal', null, null, upperLabelRect ? 'upperLabel' : 'label'
+            ),
+            nodeModel.get('name')
+        );
+        if (!upperLabelRect && thisLayout.isLeafRoot) {
+            var iconChar = seriesModel.get('drillDownIcon', true);
+            text = iconChar ? iconChar + ' ' + text : text;
+        }
+
+        var normalLabelModel = nodeModel.getModel(
+            upperLabelRect ? PATH_UPPERLABEL_NORMAL : PATH_LABEL_NOAMAL
+        );
+        var emphasisLabelModel = nodeModel.getModel(
+            upperLabelRect ? PATH_UPPERLABEL_EMPHASIS : PATH_LABEL_EMPHASIS
+        );
+
+        var isShow = normalLabelModel.getShallow('show');
+
+        setLabelStyle(
+            normalStyle, emphasisStyle, normalLabelModel, emphasisLabelModel,
+            {
+                defaultText: isShow ? text : null,
+                autoColor: visualColor,
+                isRectText: true
+            }
+        );
+
+        upperLabelRect && (normalStyle.textRect = clone(upperLabelRect));
+
+        normalStyle.truncate = (isShow && normalLabelModel.get('ellipsis'))
+            ? {
+                outerWidth: width,
+                outerHeight: height,
+                minChar: 2
+            }
+            : null;
+    }
+
+    function giveGraphic(storageName, Ctor, depth, z) {
+        var element = oldRawIndex != null && oldStorage[storageName][oldRawIndex];
+        var lasts = lastsForAnimation[storageName];
+
+        if (element) {
+            // Remove from oldStorage
+            oldStorage[storageName][oldRawIndex] = null;
+            prepareAnimationWhenHasOld(lasts, element, storageName);
+        }
+        // If invisible and no old element, do not create new element (for optimizing).
+        else if (!thisInvisible) {
+            element = new Ctor({z: calculateZ(depth, z)});
+            element.__tmDepth = depth;
+            element.__tmStorageName = storageName;
+            prepareAnimationWhenNoOld(lasts, element, storageName);
+        }
+
+        // Set to thisStorage
+        return (thisStorage[storageName][thisRawIndex] = element);
+    }
+
+    function prepareAnimationWhenHasOld(lasts, element, storageName) {
+        var lastCfg = lasts[thisRawIndex] = {};
+        lastCfg.old = storageName === 'nodeGroup'
+            ? element.position.slice()
+            : extend({}, element.shape);
+    }
+
+    // If a element is new, we need to find the animation start point carefully,
+    // otherwise it will looks strange when 'zoomToNode'.
+    function prepareAnimationWhenNoOld(lasts, element, storageName) {
+        var lastCfg = lasts[thisRawIndex] = {};
+        var parentNode = thisNode.parentNode;
+
+        if (parentNode && (!reRoot || reRoot.direction === 'drillDown')) {
+            var parentOldX = 0;
+            var parentOldY = 0;
+
+            // New nodes appear from right-bottom corner in 'zoomToNode' animation.
+            // For convenience, get old bounding rect from background.
+            var parentOldBg = lastsForAnimation.background[parentNode.getRawIndex()];
+            if (!reRoot && parentOldBg && parentOldBg.old) {
+                parentOldX = parentOldBg.old.width;
+                parentOldY = parentOldBg.old.height;
+            }
+
+            // When no parent old shape found, its parent is new too,
+            // so we can just use {x:0, y:0}.
+            lastCfg.old = storageName === 'nodeGroup'
+                ? [0, parentOldY]
+                : {x: parentOldX, y: parentOldY, width: 0, height: 0};
+        }
+
+        // Fade in, user can be aware that these nodes are new.
+        lastCfg.fadein = storageName !== 'nodeGroup';
+    }
+}
+
+// We can not set all backgroud with the same z, Because the behaviour of
+// drill down and roll up differ background creation sequence from tree
+// hierarchy sequence, which cause that lowser background element overlap
+// upper ones. So we calculate z based on depth.
+// Moreover, we try to shrink down z interval to [0, 1] to avoid that
+// treemap with large z overlaps other components.
+function calculateZ(depth, zInLevel) {
+    var zb = depth * Z_BASE + zInLevel;
+    return (zb - 1) / zb;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @file Treemap action
+ */
+
+var noop$1 = function () {};
+
+var actionTypes = [
+    'treemapZoomToNode',
+    'treemapRender',
+    'treemapMove'
+];
+
+for (var i$2 = 0; i$2 < actionTypes.length; i$2++) {
+    registerAction({type: actionTypes[i$2], update: 'updateView'}, noop$1);
+}
+
+registerAction(
+    {type: 'treemapRootToNode', update: 'updateView'},
+    function (payload, ecModel) {
+
+        ecModel.eachComponent(
+            {mainType: 'series', subType: 'treemap', query: payload},
+            handleRootToNode
+        );
+
+        function handleRootToNode(model, index) {
+            var types = ['treemapZoomToNode', 'treemapRootToNode'];
+            var targetInfo = retrieveTargetInfo(payload, types, model);
+
+            if (targetInfo) {
+                var originViewRoot = model.getViewRoot();
+                if (originViewRoot) {
+                    payload.direction = aboveViewRoot(originViewRoot, targetInfo.node)
+                        ? 'rollUp' : 'drillDown';
+                }
+                model.resetViewRoot(targetInfo.node);
+            }
+        }
+    }
+);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var each$9 = each$1;
+var isObject$5 = isObject$1;
+
+var CATEGORY_DEFAULT_VISUAL_INDEX = -1;
+
+/**
+ * @param {Object} option
+ * @param {string} [option.type] See visualHandlers.
+ * @param {string} [option.mappingMethod] 'linear' or 'piecewise' or 'category' or 'fixed'
+ * @param {Array.<number>=} [option.dataExtent] [minExtent, maxExtent],
+ *                                              required when mappingMethod is 'linear'
+ * @param {Array.<Object>=} [option.pieceList] [
+ *                                             {value: someValue},
+ *                                             {interval: [min1, max1], visual: {...}},
+ *                                             {interval: [min2, max2]}
+ *                                             ],
+ *                                            required when mappingMethod is 'piecewise'.
+ *                                            Visual for only each piece can be specified.
+ * @param {Array.<string|Object>=} [option.categories] ['cate1', 'cate2']
+ *                                            required when mappingMethod is 'category'.
+ *                                            If no option.categories, categories is set
+ *                                            as [0, 1, 2, ...].
+ * @param {boolean} [option.loop=false] Whether loop mapping when mappingMethod is 'category'.
+ * @param {(Array|Object|*)} [option.visual]  Visual data.
+ *                                            when mappingMethod is 'category',
+ *                                            visual data can be array or object
+ *                                            (like: {cate1: '#222', none: '#fff'})
+ *                                            or primary types (which represents
+ *                                            defualt category visual), otherwise visual
+ *                                            can be array or primary (which will be
+ *                                            normalized to array).
+ *
+ */
+var VisualMapping = function (option) {
+    var mappingMethod = option.mappingMethod;
+    var visualType = option.type;
+
+    /**
+     * @readOnly
+     * @type {Object}
+     */
+    var thisOption = this.option = clone(option);
+
+    /**
+     * @readOnly
+     * @type {string}
+     */
+    this.type = visualType;
+
+    /**
+     * @readOnly
+     * @type {string}
+     */
+    this.mappingMethod = mappingMethod;
+
+    /**
+     * @private
+     * @type {Function}
+     */
+    this._normalizeData = normalizers[mappingMethod];
+
+    var visualHandler = visualHandlers[visualType];
+
+    /**
+     * @public
+     * @type {Function}
+     */
+    this.applyVisual = visualHandler.applyVisual;
+
+    /**
+     * @public
+     * @type {Function}
+     */
+    this.getColorMapper = visualHandler.getColorMapper;
+
+    /**
+     * @private
+     * @type {Function}
+     */
+    this._doMap = visualHandler._doMap[mappingMethod];
+
+    if (mappingMethod === 'piecewise') {
+        normalizeVisualRange(thisOption);
+        preprocessForPiecewise(thisOption);
+    }
+    else if (mappingMethod === 'category') {
+        thisOption.categories
+            ? preprocessForSpecifiedCategory(thisOption)
+            // categories is ordinal when thisOption.categories not specified,
+            // which need no more preprocess except normalize visual.
+            : normalizeVisualRange(thisOption, true);
+    }
+    else { // mappingMethod === 'linear' or 'fixed'
+        assert$1(mappingMethod !== 'linear' || thisOption.dataExtent);
+        normalizeVisualRange(thisOption);
+    }
+};
+
+VisualMapping.prototype = {
+
+    constructor: VisualMapping,
+
+    mapValueToVisual: function (value) {
+        var normalized = this._normalizeData(value);
+        return this._doMap(normalized, value);
+    },
+
+    getNormalizer: function () {
+        return bind(this._normalizeData, this);
+    }
+};
+
+var visualHandlers = VisualMapping.visualHandlers = {
+
+    color: {
+
+        applyVisual: makeApplyVisual('color'),
+
+        /**
+         * Create a mapper function
+         * @return {Function}
+         */
+        getColorMapper: function () {
+            var thisOption = this.option;
+
+            return bind(
+                thisOption.mappingMethod === 'category'
+                    ? function (value, isNormalized) {
+                        !isNormalized && (value = this._normalizeData(value));
+                        return doMapCategory.call(this, value);
+                    }
+                    : function (value, isNormalized, out) {
+                        // If output rgb array
+                        // which will be much faster and useful in pixel manipulation
+                        var returnRGBArray = !!out;
+                        !isNormalized && (value = this._normalizeData(value));
+                        out = fastLerp(value, thisOption.parsedVisual, out);
+                        return returnRGBArray ? out : stringify(out, 'rgba');
+                    },
+                this
+            );
+        },
+
+        _doMap: {
+            linear: function (normalized) {
+                return stringify(
+                    fastLerp(normalized, this.option.parsedVisual),
+                    'rgba'
+                );
+            },
+            category: doMapCategory,
+            piecewise: function (normalized, value) {
+                var result = getSpecifiedVisual.call(this, value);
+                if (result == null) {
+                    result = stringify(
+                        fastLerp(normalized, this.option.parsedVisual),
+                        'rgba'
+                    );
+                }
+                return result;
+            },
+            fixed: doMapFixed
+        }
+    },
+
+    colorHue: makePartialColorVisualHandler(function (color, value) {
+        return modifyHSL(color, value);
+    }),
+
+    colorSaturation: makePartialColorVisualHandler(function (color, value) {
+        return modifyHSL(color, null, value);
+    }),
+
+    colorLightness: makePartialColorVisualHandler(function (color, value) {
+        return modifyHSL(color, null, null, value);
+    }),
+
+    colorAlpha: makePartialColorVisualHandler(function (color, value) {
+        return modifyAlpha(color, value);
+    }),
+
+    opacity: {
+        applyVisual: makeApplyVisual('opacity'),
+        _doMap: makeDoMap([0, 1])
+    },
+
+    liftZ: {
+        applyVisual: makeApplyVisual('liftZ'),
+        _doMap: {
+            linear: doMapFixed,
+            category: doMapFixed,
+            piecewise: doMapFixed,
+            fixed: doMapFixed
+        }
+    },
+
+    symbol: {
+        applyVisual: function (value, getter, setter) {
+            var symbolCfg = this.mapValueToVisual(value);
+            if (isString(symbolCfg)) {
+                setter('symbol', symbolCfg);
+            }
+            else if (isObject$5(symbolCfg)) {
+                for (var name in symbolCfg) {
+                    if (symbolCfg.hasOwnProperty(name)) {
+                        setter(name, symbolCfg[name]);
+                    }
+                }
+            }
+        },
+        _doMap: {
+            linear: doMapToArray,
+            category: doMapCategory,
+            piecewise: function (normalized, value) {
+                var result = getSpecifiedVisual.call(this, value);
+                if (result == null) {
+                    result = doMapToArray.call(this, normalized);
+                }
+                return result;
+            },
+            fixed: doMapFixed
+        }
+    },
+
+    symbolSize: {
+        applyVisual: makeApplyVisual('symbolSize'),
+        _doMap: makeDoMap([0, 1])
+    }
+};
+
+
+function preprocessForPiecewise(thisOption) {
+    var pieceList = thisOption.pieceList;
+    thisOption.hasSpecialVisual = false;
+
+    each$1(pieceList, function (piece, index) {
+        piece.originIndex = index;
+        // piece.visual is "result visual value" but not
+        // a visual range, so it does not need to be normalized.
+        if (piece.visual != null) {
+            thisOption.hasSpecialVisual = true;
+        }
+    });
+}
+
+function preprocessForSpecifiedCategory(thisOption) {
+    // Hash categories.
+    var categories = thisOption.categories;
+    var visual = thisOption.visual;
+
+    var categoryMap = thisOption.categoryMap = {};
+    each$9(categories, function (cate, index) {
+        categoryMap[cate] = index;
+    });
+
+    // Process visual map input.
+    if (!isArray(visual)) {
+        var visualArr = [];
+
+        if (isObject$1(visual)) {
+            each$9(visual, function (v, cate) {
+                var index = categoryMap[cate];
+                visualArr[index != null ? index : CATEGORY_DEFAULT_VISUAL_INDEX] = v;
+            });
+        }
+        else { // Is primary type, represents default visual.
+            visualArr[CATEGORY_DEFAULT_VISUAL_INDEX] = visual;
+        }
+
+        visual = setVisualToOption(thisOption, visualArr);
+    }
+
+    // Remove categories that has no visual,
+    // then we can mapping them to CATEGORY_DEFAULT_VISUAL_INDEX.
+    for (var i = categories.length - 1; i >= 0; i--) {
+        if (visual[i] == null) {
+            delete categoryMap[categories[i]];
+            categories.pop();
+        }
+    }
+}
+
+function normalizeVisualRange(thisOption, isCategory) {
+    var visual = thisOption.visual;
+    var visualArr = [];
+
+    if (isObject$1(visual)) {
+        each$9(visual, function (v) {
+            visualArr.push(v);
+        });
+    }
+    else if (visual != null) {
+        visualArr.push(visual);
+    }
+
+    var doNotNeedPair = {color: 1, symbol: 1};
+
+    if (!isCategory
+        && visualArr.length === 1
+        && !doNotNeedPair.hasOwnProperty(thisOption.type)
+    ) {
+        // Do not care visualArr.length === 0, which is illegal.
+        visualArr[1] = visualArr[0];
+    }
+
+    setVisualToOption(thisOption, visualArr);
+}
+
+function makePartialColorVisualHandler(applyValue) {
+    return {
+        applyVisual: function (value, getter, setter) {
+            value = this.mapValueToVisual(value);
+            // Must not be array value
+            setter('color', applyValue(getter('color'), value));
+        },
+        _doMap: makeDoMap([0, 1])
+    };
+}
+
+function doMapToArray(normalized) {
+    var visual = this.option.visual;
+    return visual[
+        Math.round(linearMap(normalized, [0, 1], [0, visual.length - 1], true))
+    ] || {};
+}
+
+function makeApplyVisual(visualType) {
+    return function (value, getter, setter) {
+        setter(visualType, this.mapValueToVisual(value));
+    };
+}
+
+function doMapCategory(normalized) {
+    var visual = this.option.visual;
+    return visual[
+        (this.option.loop && normalized !== CATEGORY_DEFAULT_VISUAL_INDEX)
+            ? normalized % visual.length
+            : normalized
+    ];
+}
+
+function doMapFixed() {
+    return this.option.visual[0];
+}
+
+function makeDoMap(sourceExtent) {
+    return {
+        linear: function (normalized) {
+            return linearMap(normalized, sourceExtent, this.option.visual, true);
+        },
+        category: doMapCategory,
+        piecewise: function (normalized, value) {
+            var result = getSpecifiedVisual.call(this, value);
+            if (result == null) {
+                result = linearMap(normalized, sourceExtent, this.option.visual, true);
+            }
+            return result;
+        },
+        fixed: doMapFixed
+    };
+}
+
+function getSpecifiedVisual(value) {
+    var thisOption = this.option;
+    var pieceList = thisOption.pieceList;
+    if (thisOption.hasSpecialVisual) {
+        var pieceIndex = VisualMapping.findPieceIndex(value, pieceList);
+        var piece = pieceList[pieceIndex];
+        if (piece && piece.visual) {
+            return piece.visual[this.type];
+        }
+    }
+}
+
+function setVisualToOption(thisOption, visualArr) {
+    thisOption.visual = visualArr;
+    if (thisOption.type === 'color') {
+        thisOption.parsedVisual = map(visualArr, function (item) {
+            return parse(item);
+        });
+    }
+    return visualArr;
+}
+
+
+/**
+ * Normalizers by mapping methods.
+ */
+var normalizers = {
+
+    linear: function (value) {
+        return linearMap(value, this.option.dataExtent, [0, 1], true);
+    },
+
+    piecewise: function (value) {
+        var pieceList = this.option.pieceList;
+        var pieceIndex = VisualMapping.findPieceIndex(value, pieceList, true);
+        if (pieceIndex != null) {
+            return linearMap(pieceIndex, [0, pieceList.length - 1], [0, 1], true);
+        }
+    },
+
+    category: function (value) {
+        var index = this.option.categories
+            ? this.option.categoryMap[value]
+            : value; // ordinal
+        return index == null ? CATEGORY_DEFAULT_VISUAL_INDEX : index;
+    },
+
+    fixed: noop
+};
+
+
+
+/**
+ * List available visual types.
+ *
+ * @public
+ * @return {Array.<string>}
+ */
+VisualMapping.listVisualTypes = function () {
+    var visualTypes = [];
+    each$1(visualHandlers, function (handler, key) {
+        visualTypes.push(key);
+    });
+    return visualTypes;
+};
+
+/**
+ * @public
+ */
+VisualMapping.addVisualHandler = function (name, handler) {
+    visualHandlers[name] = handler;
+};
+
+/**
+ * @public
+ */
+VisualMapping.isValidType = function (visualType) {
+    return visualHandlers.hasOwnProperty(visualType);
+};
+
+/**
+ * Convinent method.
+ * Visual can be Object or Array or primary type.
+ *
+ * @public
+ */
+VisualMapping.eachVisual = function (visual, callback, context) {
+    if (isObject$1(visual)) {
+        each$1(visual, callback, context);
+    }
+    else {
+        callback.call(context, visual);
+    }
+};
+
+VisualMapping.mapVisual = function (visual, callback, context) {
+    var isPrimary;
+    var newVisual = isArray(visual)
+        ? []
+        : isObject$1(visual)
+        ? {}
+        : (isPrimary = true, null);
+
+    VisualMapping.eachVisual(visual, function (v, key) {
+        var newVal = callback.call(context, v, key);
+        isPrimary ? (newVisual = newVal) : (newVisual[key] = newVal);
+    });
+    return newVisual;
+};
+
+/**
+ * @public
+ * @param {Object} obj
+ * @return {Object} new object containers visual values.
+ *                 If no visuals, return null.
+ */
+VisualMapping.retrieveVisuals = function (obj) {
+    var ret = {};
+    var hasVisual;
+
+    obj && each$9(visualHandlers, function (h, visualType) {
+        if (obj.hasOwnProperty(visualType)) {
+            ret[visualType] = obj[visualType];
+            hasVisual = true;
+        }
+    });
+
+    return hasVisual ? ret : null;
+};
+
+/**
+ * Give order to visual types, considering colorSaturation, colorAlpha depends on color.
+ *
+ * @public
+ * @param {(Object|Array)} visualTypes If Object, like: {color: ..., colorSaturation: ...}
+ *                                     IF Array, like: ['color', 'symbol', 'colorSaturation']
+ * @return {Array.<string>} Sorted visual types.
+ */
+VisualMapping.prepareVisualTypes = function (visualTypes) {
+    if (isObject$5(visualTypes)) {
+        var types = [];
+        each$9(visualTypes, function (item, type) {
+            types.push(type);
+        });
+        visualTypes = types;
+    }
+    else if (isArray(visualTypes)) {
+        visualTypes = visualTypes.slice();
+    }
+    else {
+        return [];
+    }
+
+    visualTypes.sort(function (type1, type2) {
+        // color should be front of colorSaturation, colorAlpha, ...
+        // symbol and symbolSize do not matter.
+        return (type2 === 'color' && type1 !== 'color' && type1.indexOf('color') === 0)
+            ? 1 : -1;
+    });
+
+    return visualTypes;
+};
+
+/**
+ * 'color', 'colorSaturation', 'colorAlpha', ... are depends on 'color'.
+ * Other visuals are only depends on themself.
+ *
+ * @public
+ * @param {string} visualType1
+ * @param {string} visualType2
+ * @return {boolean}
+ */
+VisualMapping.dependsOn = function (visualType1, visualType2) {
+    return visualType2 === 'color'
+        ? !!(visualType1 && visualType1.indexOf(visualType2) === 0)
+        : visualType1 === visualType2;
+};
+
+/**
+ * @param {number} value
+ * @param {Array.<Object>} pieceList [{value: ..., interval: [min, max]}, ...]
+ *                         Always from small to big.
+ * @param {boolean} [findClosestWhenOutside=false]
+ * @return {number} index
+ */
+VisualMapping.findPieceIndex = function (value, pieceList, findClosestWhenOutside) {
+    var possibleI;
+    var abs = Infinity;
+
+    // value has the higher priority.
+    for (var i = 0, len = pieceList.length; i < len; i++) {
+        var pieceValue = pieceList[i].value;
+        if (pieceValue != null) {
+            if (pieceValue === value
+                // FIXME
+                // It is supposed to compare value according to value type of dimension,
+                // but currently value type can exactly be string or number.
+                // Compromise for numeric-like string (like '12'), especially
+                // in the case that visualMap.categories is ['22', '33'].
+                || (typeof pieceValue === 'string' && pieceValue === value + '')
+            ) {
+                return i;
+            }
+            findClosestWhenOutside && updatePossible(pieceValue, i);
+        }
+    }
+
+    for (var i = 0, len = pieceList.length; i < len; i++) {
+        var piece = pieceList[i];
+        var interval = piece.interval;
+        var close = piece.close;
+
+        if (interval) {
+            if (interval[0] === -Infinity) {
+                if (littleThan(close[1], value, interval[1])) {
+                    return i;
+                }
+            }
+            else if (interval[1] === Infinity) {
+                if (littleThan(close[0], interval[0], value)) {
+                    return i;
+                }
+            }
+            else if (
+                littleThan(close[0], interval[0], value)
+                && littleThan(close[1], value, interval[1])
+            ) {
+                return i;
+            }
+            findClosestWhenOutside && updatePossible(interval[0], i);
+            findClosestWhenOutside && updatePossible(interval[1], i);
+        }
+    }
+
+    if (findClosestWhenOutside) {
+        return value === Infinity
+            ? pieceList.length - 1
+            : value === -Infinity
+            ? 0
+            : possibleI;
+    }
+
+    function updatePossible(val, index) {
+        var newAbs = Math.abs(val - value);
+        if (newAbs < abs) {
+            abs = newAbs;
+            possibleI = index;
+        }
+    }
+
+};
+
+function littleThan(close, a, b) {
+    return close ? a <= b : a < b;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var isArray$2 = isArray;
+
+var ITEM_STYLE_NORMAL = 'itemStyle';
+
+var treemapVisual = {
+    seriesType: 'treemap',
+    reset: function (seriesModel, ecModel, api, payload) {
+        var tree = seriesModel.getData().tree;
+        var root = tree.root;
+        var seriesItemStyleModel = seriesModel.getModel(ITEM_STYLE_NORMAL);
+
+        if (root.isRemoved()) {
+            return;
+        }
+
+        var levelItemStyles = map(tree.levelModels, function (levelModel) {
+            return levelModel ? levelModel.get(ITEM_STYLE_NORMAL) : null;
+        });
+
+        travelTree(
+            root, // Visual should calculate from tree root but not view root.
+            {},
+            levelItemStyles,
+            seriesItemStyleModel,
+            seriesModel.getViewRoot().getAncestors(),
+            seriesModel
+        );
+    }
+};
+
+function travelTree(
+    node, designatedVisual, levelItemStyles, seriesItemStyleModel,
+    viewRootAncestors, seriesModel
+) {
+    var nodeModel = node.getModel();
+    var nodeLayout = node.getLayout();
+
+    // Optimize
+    if (!nodeLayout || nodeLayout.invisible || !nodeLayout.isInView) {
+        return;
+    }
+
+    var nodeItemStyleModel = node.getModel(ITEM_STYLE_NORMAL);
+    var levelItemStyle = levelItemStyles[node.depth];
+    var visuals = buildVisuals(
+        nodeItemStyleModel, designatedVisual, levelItemStyle, seriesItemStyleModel
+    );
+
+    // calculate border color
+    var borderColor = nodeItemStyleModel.get('borderColor');
+    var borderColorSaturation = nodeItemStyleModel.get('borderColorSaturation');
+    var thisNodeColor;
+    if (borderColorSaturation != null) {
+        // For performance, do not always execute 'calculateColor'.
+        thisNodeColor = calculateColor(visuals, node);
+        borderColor = calculateBorderColor(borderColorSaturation, thisNodeColor);
+    }
+    node.setVisual('borderColor', borderColor);
+
+    var viewChildren = node.viewChildren;
+    if (!viewChildren || !viewChildren.length) {
+        thisNodeColor = calculateColor(visuals, node);
+        // Apply visual to this node.
+        node.setVisual('color', thisNodeColor);
+    }
+    else {
+        var mapping = buildVisualMapping(
+            node, nodeModel, nodeLayout, nodeItemStyleModel, visuals, viewChildren
+        );
+
+        // Designate visual to children.
+        each$1(viewChildren, function (child, index) {
+            // If higher than viewRoot, only ancestors of viewRoot is needed to visit.
+            if (child.depth >= viewRootAncestors.length
+                || child === viewRootAncestors[child.depth]
+            ) {
+                var childVisual = mapVisual$1(
+                    nodeModel, visuals, child, index, mapping, seriesModel
+                );
+                travelTree(
+                    child, childVisual, levelItemStyles, seriesItemStyleModel,
+                    viewRootAncestors, seriesModel
+                );
+            }
+        });
+    }
+}
+
+function buildVisuals(
+    nodeItemStyleModel, designatedVisual, levelItemStyle, seriesItemStyleModel
+) {
+    var visuals = extend({}, designatedVisual);
+
+    each$1(['color', 'colorAlpha', 'colorSaturation'], function (visualName) {
+        // Priority: thisNode > thisLevel > parentNodeDesignated > seriesModel
+        var val = nodeItemStyleModel.get(visualName, true); // Ignore parent
+        val == null && levelItemStyle && (val = levelItemStyle[visualName]);
+        val == null && (val = designatedVisual[visualName]);
+        val == null && (val = seriesItemStyleModel.get(visualName));
+
+        val != null && (visuals[visualName] = val);
+    });
+
+    return visuals;
+}
+
+function calculateColor(visuals) {
+    var color = getValueVisualDefine(visuals, 'color');
+
+    if (color) {
+        var colorAlpha = getValueVisualDefine(visuals, 'colorAlpha');
+        var colorSaturation = getValueVisualDefine(visuals, 'colorSaturation');
+        if (colorSaturation) {
+            color = modifyHSL(color, null, null, colorSaturation);
+        }
+        if (colorAlpha) {
+            color = modifyAlpha(color, colorAlpha);
+        }
+
+        return color;
+    }
+}
+
+function calculateBorderColor(borderColorSaturation, thisNodeColor) {
+    return thisNodeColor != null
+            ? modifyHSL(thisNodeColor, null, null, borderColorSaturation)
+            : null;
+}
+
+function getValueVisualDefine(visuals, name) {
+    var value = visuals[name];
+    if (value != null && value !== 'none') {
+        return value;
+    }
+}
+
+function buildVisualMapping(
+    node, nodeModel, nodeLayout, nodeItemStyleModel, visuals, viewChildren
+) {
+    if (!viewChildren || !viewChildren.length) {
+        return;
+    }
+
+    var rangeVisual = getRangeVisual(nodeModel, 'color')
+        || (
+            visuals.color != null
+            && visuals.color !== 'none'
+            && (
+                getRangeVisual(nodeModel, 'colorAlpha')
+                || getRangeVisual(nodeModel, 'colorSaturation')
+            )
+        );
+
+    if (!rangeVisual) {
+        return;
+    }
+
+    var visualMin = nodeModel.get('visualMin');
+    var visualMax = nodeModel.get('visualMax');
+    var dataExtent = nodeLayout.dataExtent.slice();
+    visualMin != null && visualMin < dataExtent[0] && (dataExtent[0] = visualMin);
+    visualMax != null && visualMax > dataExtent[1] && (dataExtent[1] = visualMax);
+
+    var colorMappingBy = nodeModel.get('colorMappingBy');
+    var opt = {
+        type: rangeVisual.name,
+        dataExtent: dataExtent,
+        visual: rangeVisual.range
+    };
+    if (opt.type === 'color'
+        && (colorMappingBy === 'index' || colorMappingBy === 'id')
+    ) {
+        opt.mappingMethod = 'category';
+        opt.loop = true;
+        // categories is ordinal, so do not set opt.categories.
+    }
+    else {
+        opt.mappingMethod = 'linear';
+    }
+
+    var mapping = new VisualMapping(opt);
+    mapping.__drColorMappingBy = colorMappingBy;
+
+    return mapping;
+}
+
+// Notice: If we dont have the attribute 'colorRange', but only use
+// attribute 'color' to represent both concepts of 'colorRange' and 'color',
+// (It means 'colorRange' when 'color' is Array, means 'color' when not array),
+// this problem will be encountered:
+// If a level-1 node dont have children, and its siblings has children,
+// and colorRange is set on level-1, then the node can not be colored.
+// So we separate 'colorRange' and 'color' to different attributes.
+function getRangeVisual(nodeModel, name) {
+    // 'colorRange', 'colorARange', 'colorSRange'.
+    // If not exsits on this node, fetch from levels and series.
+    var range = nodeModel.get(name);
+    return (isArray$2(range) && range.length) ? {name: name, range: range} : null;
+}
+
+function mapVisual$1(nodeModel, visuals, child, index, mapping, seriesModel) {
+    var childVisuals = extend({}, visuals);
+
+    if (mapping) {
+        var mappingType = mapping.type;
+        var colorMappingBy = mappingType === 'color' && mapping.__drColorMappingBy;
+        var value =
+            colorMappingBy === 'index'
+            ? index
+            : colorMappingBy === 'id'
+            ? seriesModel.mapIdToIndex(child.getId())
+            : child.getValue(nodeModel.get('visualDimension'));
+
+        childVisuals[mappingType] = mapping.mapValueToVisual(value);
+    }
+
+    return childVisuals;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/*
+* The treemap layout implementation references to the treemap
+* layout of d3.js (d3/src/layout/treemap.js in v3). The use of
+* the source code of this file is also subject to the terms
+* and consitions of its license (BSD-3Clause, see
+* <echarts/src/licenses/LICENSE-d3>).
+*/
+
+var mathMax$4 = Math.max;
+var mathMin$4 = Math.min;
+var retrieveValue = retrieve;
+var each$10 = each$1;
+
+var PATH_BORDER_WIDTH = ['itemStyle', 'borderWidth'];
+var PATH_GAP_WIDTH = ['itemStyle', 'gapWidth'];
+var PATH_UPPER_LABEL_SHOW = ['upperLabel', 'show'];
+var PATH_UPPER_LABEL_HEIGHT = ['upperLabel', 'height'];
+
+/**
+ * @public
+ */
+var treemapLayout = {
+    seriesType: 'treemap',
+    reset: function (seriesModel, ecModel, api, payload) {
+        // Layout result in each node:
+        // {x, y, width, height, area, borderWidth}
+        var ecWidth = api.getWidth();
+        var ecHeight = api.getHeight();
+        var seriesOption = seriesModel.option;
+
+        var layoutInfo = getLayoutRect(
+            seriesModel.getBoxLayoutParams(),
+            {
+                width: api.getWidth(),
+                height: api.getHeight()
+            }
+        );
+
+        var size = seriesOption.size || []; // Compatible with ec2.
+        var containerWidth = parsePercent$1(
+            retrieveValue(layoutInfo.width, size[0]),
+            ecWidth
+        );
+        var containerHeight = parsePercent$1(
+            retrieveValue(layoutInfo.height, size[1]),
+            ecHeight
+        );
+
+        // Fetch payload info.
+        var payloadType = payload && payload.type;
+        var types = ['treemapZoomToNode', 'treemapRootToNode'];
+        var targetInfo = retrieveTargetInfo(payload, types, seriesModel);
+        var rootRect = (payloadType === 'treemapRender' || payloadType === 'treemapMove')
+            ? payload.rootRect : null;
+        var viewRoot = seriesModel.getViewRoot();
+        var viewAbovePath = getPathToRoot(viewRoot);
+
+        if (payloadType !== 'treemapMove') {
+            var rootSize = payloadType === 'treemapZoomToNode'
+                ? estimateRootSize(
+                    seriesModel, targetInfo, viewRoot, containerWidth, containerHeight
+                )
+                : rootRect
+                ? [rootRect.width, rootRect.height]
+                : [containerWidth, containerHeight];
+
+            var sort = seriesOption.sort;
+            if (sort && sort !== 'asc' && sort !== 'desc') {
+                sort = 'desc';
+            }
+            var options = {
+                squareRatio: seriesOption.squareRatio,
+                sort: sort,
+                leafDepth: seriesOption.leafDepth
+            };
+
+            // layout should be cleared because using updateView but not update.
+            viewRoot.hostTree.clearLayouts();
+
+            // TODO
+            // optimize: if out of view clip, do not layout.
+            // But take care that if do not render node out of view clip,
+            // how to calculate start po
+
+            var viewRootLayout = {
+                x: 0, y: 0,
+                width: rootSize[0], height: rootSize[1],
+                area: rootSize[0] * rootSize[1]
+            };
+            viewRoot.setLayout(viewRootLayout);
+
+            squarify(viewRoot, options, false, 0);
+            // Supplement layout.
+            var viewRootLayout = viewRoot.getLayout();
+            each$10(viewAbovePath, function (node, index) {
+                var childValue = (viewAbovePath[index + 1] || viewRoot).getValue();
+                node.setLayout(extend(
+                    {dataExtent: [childValue, childValue], borderWidth: 0, upperHeight: 0},
+                    viewRootLayout
+                ));
+            });
+        }
+
+        var treeRoot = seriesModel.getData().tree.root;
+
+        treeRoot.setLayout(
+            calculateRootPosition(layoutInfo, rootRect, targetInfo),
+            true
+        );
+
+        seriesModel.setLayoutInfo(layoutInfo);
+
+        // FIXME
+        // çŽ°åœ¨æ²¡æœ‰clipåŠŸèƒ½ï¼Œæš‚æ—¶å–ecé«˜å®½ã€‚
+        prunning(
+            treeRoot,
+            // Transform to base element coordinate system.
+            new BoundingRect(-layoutInfo.x, -layoutInfo.y, ecWidth, ecHeight),
+            viewAbovePath,
+            viewRoot,
+            0
+        );
+    }
+};
+
+/**
+ * Layout treemap with squarify algorithm.
+ * @see https://graphics.ethz.ch/teaching/scivis_common/Literature/squarifiedTreeMaps.pdf
+ * The implementation references to the treemap layout of d3.js.
+ * See the license statement at the head of this file.
+ *
+ * @protected
+ * @param {module:echarts/data/Tree~TreeNode} node
+ * @param {Object} options
+ * @param {string} options.sort 'asc' or 'desc'
+ * @param {number} options.squareRatio
+ * @param {boolean} hideChildren
+ * @param {number} depth
+ */
+function squarify(node, options, hideChildren, depth) {
+    var width;
+    var height;
+
+    if (node.isRemoved()) {
+        return;
+    }
+
+    var thisLayout = node.getLayout();
+    width = thisLayout.width;
+    height = thisLayout.height;
+
+    // Considering border and gap
+    var nodeModel = node.getModel();
+    var borderWidth = nodeModel.get(PATH_BORDER_WIDTH);
+    var halfGapWidth = nodeModel.get(PATH_GAP_WIDTH) / 2;
+    var upperLabelHeight = getUpperLabelHeight(nodeModel);
+    var upperHeight = Math.max(borderWidth, upperLabelHeight);
+    var layoutOffset = borderWidth - halfGapWidth;
+    var layoutOffsetUpper = upperHeight - halfGapWidth;
+    var nodeModel = node.getModel();
+
+    node.setLayout({
+        borderWidth: borderWidth,
+        upperHeight: upperHeight,
+        upperLabelHeight: upperLabelHeight
+    }, true);
+
+    width = mathMax$4(width - 2 * layoutOffset, 0);
+    height = mathMax$4(height - layoutOffset - layoutOffsetUpper, 0);
+
+    var totalArea = width * height;
+    var viewChildren = initChildren(
+        node, nodeModel, totalArea, options, hideChildren, depth
+    );
+
+    if (!viewChildren.length) {
+        return;
+    }
+
+    var rect = {x: layoutOffset, y: layoutOffsetUpper, width: width, height: height};
+    var rowFixedLength = mathMin$4(width, height);
+    var best = Infinity; // the best row score so far
+    var row = [];
+    row.area = 0;
+
+    for (var i = 0, len = viewChildren.length; i < len;) {
+        var child = viewChildren[i];
+
+        row.push(child);
+        row.area += child.getLayout().area;
+        var score = worst(row, rowFixedLength, options.squareRatio);
+
+        // continue with this orientation
+        if (score <= best) {
+            i++;
+            best = score;
+        }
+        // abort, and try a different orientation
+        else {
+            row.area -= row.pop().getLayout().area;
+            position(row, rowFixedLength, rect, halfGapWidth, false);
+            rowFixedLength = mathMin$4(rect.width, rect.height);
+            row.length = row.area = 0;
+            best = Infinity;
+        }
+    }
+
+    if (row.length) {
+        position(row, rowFixedLength, rect, halfGapWidth, true);
+    }
+
+    if (!hideChildren) {
+        var childrenVisibleMin = nodeModel.get('childrenVisibleMin');
+        if (childrenVisibleMin != null && totalArea < childrenVisibleMin) {
+            hideChildren = true;
+        }
+    }
+
+    for (var i = 0, len = viewChildren.length; i < len; i++) {
+        squarify(viewChildren[i], options, hideChildren, depth + 1);
+    }
+}
+
+/**
+ * Set area to each child, and calculate data extent for visual coding.
+ */
+function initChildren(node, nodeModel, totalArea, options, hideChildren, depth) {
+    var viewChildren = node.children || [];
+    var orderBy = options.sort;
+    orderBy !== 'asc' && orderBy !== 'desc' && (orderBy = null);
+
+    var overLeafDepth = options.leafDepth != null && options.leafDepth <= depth;
+
+    // leafDepth has higher priority.
+    if (hideChildren && !overLeafDepth) {
+        return (node.viewChildren = []);
+    }
+
+    // Sort children, order by desc.
+    viewChildren = filter(viewChildren, function (child) {
+        return !child.isRemoved();
+    });
+
+    sort$1(viewChildren, orderBy);
+
+    var info = statistic(nodeModel, viewChildren, orderBy);
+
+    if (info.sum === 0) {
+        return (node.viewChildren = []);
+    }
+
+    info.sum = filterByThreshold(nodeModel, totalArea, info.sum, orderBy, viewChildren);
+
+    if (info.sum === 0) {
+        return (node.viewChildren = []);
+    }
+
+    // Set area to each child.
+    for (var i = 0, len = viewChildren.length; i < len; i++) {
+        var area = viewChildren[i].getValue() / info.sum * totalArea;
+        // Do not use setLayout({...}, true), because it is needed to clear last layout.
+        viewChildren[i].setLayout({area: area});
+    }
+
+    if (overLeafDepth) {
+        viewChildren.length && node.setLayout({isLeafRoot: true}, true);
+        viewChildren.length = 0;
+    }
+
+    node.viewChildren = viewChildren;
+    node.setLayout({dataExtent: info.dataExtent}, true);
+
+    return viewChildren;
+}
+
+/**
+ * Consider 'visibleMin'. Modify viewChildren and get new sum.
+ */
+function filterByThreshold(nodeModel, totalArea, sum, orderBy, orderedChildren) {
+
+    // visibleMin is not supported yet when no option.sort.
+    if (!orderBy) {
+        return sum;
+    }
+
+    var visibleMin = nodeModel.get('visibleMin');
+    var len = orderedChildren.length;
+    var deletePoint = len;
+
+    // Always travel from little value to big value.
+    for (var i = len - 1; i >= 0; i--) {
+        var value = orderedChildren[
+            orderBy === 'asc' ? len - i - 1 : i
+        ].getValue();
+
+        if (value / sum * totalArea < visibleMin) {
+            deletePoint = i;
+            sum -= value;
+        }
+    }
+
+    orderBy === 'asc'
+        ? orderedChildren.splice(0, len - deletePoint)
+        : orderedChildren.splice(deletePoint, len - deletePoint);
+
+    return sum;
+}
+
+/**
+ * Sort
+ */
+function sort$1(viewChildren, orderBy) {
+    if (orderBy) {
+        viewChildren.sort(function (a, b) {
+            var diff = orderBy === 'asc'
+                ?  a.getValue() - b.getValue() : b.getValue() - a.getValue();
+            return diff === 0
+                ? (orderBy === 'asc'
+                    ? a.dataIndex - b.dataIndex : b.dataIndex - a.dataIndex
+                )
+                : diff;
+        });
+    }
+    return viewChildren;
+}
+
+/**
+ * Statistic
+ */
+function statistic(nodeModel, children, orderBy) {
+    // Calculate sum.
+    var sum = 0;
+    for (var i = 0, len = children.length; i < len; i++) {
+        sum += children[i].getValue();
+    }
+
+    // Statistic data extent for latter visual coding.
+    // Notice: data extent should be calculate based on raw children
+    // but not filtered view children, otherwise visual mapping will not
+    // be stable when zoom (where children is filtered by visibleMin).
+
+    var dimension = nodeModel.get('visualDimension');
+    var dataExtent;
+
+    // The same as area dimension.
+    if (!children || !children.length) {
+        dataExtent = [NaN, NaN];
+    }
+    else if (dimension === 'value' && orderBy) {
+        dataExtent = [
+            children[children.length - 1].getValue(),
+            children[0].getValue()
+        ];
+        orderBy === 'asc' && dataExtent.reverse();
+    }
+    // Other dimension.
+    else {
+        var dataExtent = [Infinity, -Infinity];
+        each$10(children, function (child) {
+            var value = child.getValue(dimension);
+            value < dataExtent[0] && (dataExtent[0] = value);
+            value > dataExtent[1] && (dataExtent[1] = value);
+        });
+    }
+
+    return {sum: sum, dataExtent: dataExtent};
+}
+
+/**
+ * Computes the score for the specified row,
+ * as the worst aspect ratio.
+ */
+function worst(row, rowFixedLength, ratio) {
+    var areaMax = 0;
+    var areaMin = Infinity;
+
+    for (var i = 0, area, len = row.length; i < len; i++) {
+        area = row[i].getLayout().area;
+        if (area) {
+            area < areaMin && (areaMin = area);
+            area > areaMax && (areaMax = area);
+        }
+    }
+
+    var squareArea = row.area * row.area;
+    var f = rowFixedLength * rowFixedLength * ratio;
+
+    return squareArea
+        ? mathMax$4(
+            (f * areaMax) / squareArea,
+            squareArea / (f * areaMin)
+        )
+        : Infinity;
+}
+
+/**
+ * Positions the specified row of nodes. Modifies `rect`.
+ */
+function position(row, rowFixedLength, rect, halfGapWidth, flush) {
+    // When rowFixedLength === rect.width,
+    // it is horizontal subdivision,
+    // rowFixedLength is the width of the subdivision,
+    // rowOtherLength is the height of the subdivision,
+    // and nodes will be positioned from left to right.
+
+    // wh[idx0WhenH] means: when horizontal,
+    //      wh[idx0WhenH] => wh[0] => 'width'.
+    //      xy[idx1WhenH] => xy[1] => 'y'.
+    var idx0WhenH = rowFixedLength === rect.width ? 0 : 1;
+    var idx1WhenH = 1 - idx0WhenH;
+    var xy = ['x', 'y'];
+    var wh = ['width', 'height'];
+
+    var last = rect[xy[idx0WhenH]];
+    var rowOtherLength = rowFixedLength
+        ? row.area / rowFixedLength : 0;
+
+    if (flush || rowOtherLength > rect[wh[idx1WhenH]]) {
+        rowOtherLength = rect[wh[idx1WhenH]]; // over+underflow
+    }
+    for (var i = 0, rowLen = row.length; i < rowLen; i++) {
+        var node = row[i];
+        var nodeLayout = {};
+        var step = rowOtherLength
+            ? node.getLayout().area / rowOtherLength : 0;
+
+        var wh1 = nodeLayout[wh[idx1WhenH]] = mathMax$4(rowOtherLength - 2 * halfGapWidth, 0);
+
+        // We use Math.max/min to avoid negative width/height when considering gap width.
+        var remain = rect[xy[idx0WhenH]] + rect[wh[idx0WhenH]] - last;
+        var modWH = (i === rowLen - 1 || remain < step) ? remain : step;
+        var wh0 = nodeLayout[wh[idx0WhenH]] = mathMax$4(modWH - 2 * halfGapWidth, 0);
+
+        nodeLayout[xy[idx1WhenH]] = rect[xy[idx1WhenH]] + mathMin$4(halfGapWidth, wh1 / 2);
+        nodeLayout[xy[idx0WhenH]] = last + mathMin$4(halfGapWidth, wh0 / 2);
+
+        last += modWH;
+        node.setLayout(nodeLayout, true);
+    }
+
+    rect[xy[idx1WhenH]] += rowOtherLength;
+    rect[wh[idx1WhenH]] -= rowOtherLength;
+}
+
+// Return [containerWidth, containerHeight] as defualt.
+function estimateRootSize(seriesModel, targetInfo, viewRoot, containerWidth, containerHeight) {
+    // If targetInfo.node exists, we zoom to the node,
+    // so estimate whold width and heigth by target node.
+    var currNode = (targetInfo || {}).node;
+    var defaultSize = [containerWidth, containerHeight];
+
+    if (!currNode || currNode === viewRoot) {
+        return defaultSize;
+    }
+
+    var parent;
+    var viewArea = containerWidth * containerHeight;
+    var area = viewArea * seriesModel.option.zoomToNodeRatio;
+
+    while (parent = currNode.parentNode) { // jshint ignore:line
+        var sum = 0;
+        var siblings = parent.children;
+
+        for (var i = 0, len = siblings.length; i < len; i++) {
+            sum += siblings[i].getValue();
+        }
+        var currNodeValue = currNode.getValue();
+        if (currNodeValue === 0) {
+            return defaultSize;
+        }
+        area *= sum / currNodeValue;
+
+        // Considering border, suppose aspect ratio is 1.
+        var parentModel = parent.getModel();
+        var borderWidth = parentModel.get(PATH_BORDER_WIDTH);
+        var upperHeight = Math.max(borderWidth, getUpperLabelHeight(parentModel, borderWidth));
+        area += 4 * borderWidth * borderWidth
+            + (3 * borderWidth + upperHeight) * Math.pow(area, 0.5);
+
+        area > MAX_SAFE_INTEGER && (area = MAX_SAFE_INTEGER);
+
+        currNode = parent;
+    }
+
+    area < viewArea && (area = viewArea);
+    var scale = Math.pow(area / viewArea, 0.5);
+
+    return [containerWidth * scale, containerHeight * scale];
+}
+
+// Root postion base on coord of containerGroup
+function calculateRootPosition(layoutInfo, rootRect, targetInfo) {
+    if (rootRect) {
+        return {x: rootRect.x, y: rootRect.y};
+    }
+
+    var defaultPosition = {x: 0, y: 0};
+    if (!targetInfo) {
+        return defaultPosition;
+    }
+
+    // If targetInfo is fetched by 'retrieveTargetInfo',
+    // old tree and new tree are the same tree,
+    // so the node still exists and we can visit it.
+
+    var targetNode = targetInfo.node;
+    var layout = targetNode.getLayout();
+
+    if (!layout) {
+        return defaultPosition;
+    }
+
+    // Transform coord from local to container.
+    var targetCenter = [layout.width / 2, layout.height / 2];
+    var node = targetNode;
+    while (node) {
+        var nodeLayout = node.getLayout();
+        targetCenter[0] += nodeLayout.x;
+        targetCenter[1] += nodeLayout.y;
+        node = node.parentNode;
+    }
+
+    return {
+        x: layoutInfo.width / 2 - targetCenter[0],
+        y: layoutInfo.height / 2 - targetCenter[1]
+    };
+}
+
+// Mark nodes visible for prunning when visual coding and rendering.
+// Prunning depends on layout and root position, so we have to do it after layout.
+function prunning(node, clipRect, viewAbovePath, viewRoot, depth) {
+    var nodeLayout = node.getLayout();
+    var nodeInViewAbovePath = viewAbovePath[depth];
+    var isAboveViewRoot = nodeInViewAbovePath && nodeInViewAbovePath === node;
+
+    if (
+        (nodeInViewAbovePath && !isAboveViewRoot)
+        || (depth === viewAbovePath.length && node !== viewRoot)
+    ) {
+        return;
+    }
+
+    node.setLayout({
+        // isInView means: viewRoot sub tree + viewAbovePath
+        isInView: true,
+        // invisible only means: outside view clip so that the node can not
+        // see but still layout for animation preparation but not render.
+        invisible: !isAboveViewRoot && !clipRect.intersect(nodeLayout),
+        isAboveViewRoot: isAboveViewRoot
+    }, true);
+
+    // Transform to child coordinate.
+    var childClipRect = new BoundingRect(
+        clipRect.x - nodeLayout.x,
+        clipRect.y - nodeLayout.y,
+        clipRect.width,
+        clipRect.height
+    );
+
+    each$10(node.viewChildren || [], function (child) {
+        prunning(child, childClipRect, viewAbovePath, viewRoot, depth + 1);
+    });
+}
+
+function getUpperLabelHeight(model) {
+    return model.get(PATH_UPPER_LABEL_SHOW) ? model.get(PATH_UPPER_LABEL_HEIGHT) : 0;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+registerVisual(treemapVisual);
+registerLayout(treemapLayout);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Graph data structure
+ *
+ * @module echarts/data/Graph
+ * @author Yi Shen(https://www.github.com/pissang)
+ */
+
+// id may be function name of Object, add a prefix to avoid this problem.
+function generateNodeKey (id) {
+    return '_EC_' + id;
+}
+/**
+ * @alias module:echarts/data/Graph
+ * @constructor
+ * @param {boolean} directed
+ */
+var Graph = function(directed) {
+    /**
+     * æ˜¯å¦æ˜¯æœ‰å‘å›¾
+     * @type {boolean}
+     * @private
+     */
+    this._directed = directed || false;
+
+    /**
+     * @type {Array.<module:echarts/data/Graph.Node>}
+     * @readOnly
+     */
+    this.nodes = [];
+
+    /**
+     * @type {Array.<module:echarts/data/Graph.Edge>}
+     * @readOnly
+     */
+    this.edges = [];
+
+    /**
+     * @type {Object.<string, module:echarts/data/Graph.Node>}
+     * @private
+     */
+    this._nodesMap = {};
+    /**
+     * @type {Object.<string, module:echarts/data/Graph.Edge>}
+     * @private
+     */
+    this._edgesMap = {};
+
+    /**
+     * @type {module:echarts/data/List}
+     * @readOnly
+     */
+    this.data;
+
+    /**
+     * @type {module:echarts/data/List}
+     * @readOnly
+     */
+    this.edgeData;
+};
+
+var graphProto = Graph.prototype;
+/**
+ * @type {string}
+ */
+graphProto.type = 'graph';
+
+/**
+ * If is directed graph
+ * @return {boolean}
+ */
+graphProto.isDirected = function () {
+    return this._directed;
+};
+
+/**
+ * Add a new node
+ * @param {string} id
+ * @param {number} [dataIndex]
+ */
+graphProto.addNode = function (id, dataIndex) {
+    id = id || ('' + dataIndex);
+
+    var nodesMap = this._nodesMap;
+
+    if (nodesMap[generateNodeKey(id)]) {
+        if (__DEV__) {
+            console.error('Graph nodes have duplicate name or id');
+        }
+        return;
+    }
+
+    var node = new Node(id, dataIndex);
+    node.hostGraph = this;
+
+    this.nodes.push(node);
+
+    nodesMap[generateNodeKey(id)] = node;
+    return node;
+};
+
+/**
+ * Get node by data index
+ * @param  {number} dataIndex
+ * @return {module:echarts/data/Graph~Node}
+ */
+graphProto.getNodeByIndex = function (dataIndex) {
+    var rawIdx = this.data.getRawIndex(dataIndex);
+    return this.nodes[rawIdx];
+};
+/**
+ * Get node by id
+ * @param  {string} id
+ * @return {module:echarts/data/Graph.Node}
+ */
+graphProto.getNodeById = function (id) {
+    return this._nodesMap[generateNodeKey(id)];
+};
+
+/**
+ * Add a new edge
+ * @param {number|string|module:echarts/data/Graph.Node} n1
+ * @param {number|string|module:echarts/data/Graph.Node} n2
+ * @param {number} [dataIndex=-1]
+ * @return {module:echarts/data/Graph.Edge}
+ */
+graphProto.addEdge = function (n1, n2, dataIndex) {
+    var nodesMap = this._nodesMap;
+    var edgesMap = this._edgesMap;
+
+    // PNEDING
+    if (typeof n1 === 'number') {
+        n1 = this.nodes[n1];
+    }
+    if (typeof n2 === 'number') {
+        n2 = this.nodes[n2];
+    }
+
+    if (!Node.isInstance(n1)) {
+        n1 = nodesMap[generateNodeKey(n1)];
+    }
+    if (!Node.isInstance(n2)) {
+        n2 = nodesMap[generateNodeKey(n2)];
+    }
+    if (!n1 || !n2) {
+        return;
+    }
+
+    var key = n1.id + '-' + n2.id;
+    // PENDING
+    if (edgesMap[key]) {
+        return;
+    }
+
+    var edge = new Edge(n1, n2, dataIndex);
+    edge.hostGraph = this;
+
+    if (this._directed) {
+        n1.outEdges.push(edge);
+        n2.inEdges.push(edge);
+    }
+    n1.edges.push(edge);
+    if (n1 !== n2) {
+        n2.edges.push(edge);
+    }
+
+    this.edges.push(edge);
+    edgesMap[key] = edge;
+
+    return edge;
+};
+
+/**
+ * Get edge by data index
+ * @param  {number} dataIndex
+ * @return {module:echarts/data/Graph~Node}
+ */
+graphProto.getEdgeByIndex = function (dataIndex) {
+    var rawIdx = this.edgeData.getRawIndex(dataIndex);
+    return this.edges[rawIdx];
+};
+/**
+ * Get edge by two linked nodes
+ * @param  {module:echarts/data/Graph.Node|string} n1
+ * @param  {module:echarts/data/Graph.Node|string} n2
+ * @return {module:echarts/data/Graph.Edge}
+ */
+graphProto.getEdge = function (n1, n2) {
+    if (Node.isInstance(n1)) {
+        n1 = n1.id;
+    }
+    if (Node.isInstance(n2)) {
+        n2 = n2.id;
+    }
+
+    var edgesMap = this._edgesMap;
+
+    if (this._directed) {
+        return edgesMap[n1 + '-' + n2];
+    } else {
+        return edgesMap[n1 + '-' + n2]
+            || edgesMap[n2 + '-' + n1];
+    }
+};
+
+/**
+ * Iterate all nodes
+ * @param  {Function} cb
+ * @param  {*} [context]
+ */
+graphProto.eachNode = function (cb, context) {
+    var nodes = this.nodes;
+    var len = nodes.length;
+    for (var i = 0; i < len; i++) {
+        if (nodes[i].dataIndex >= 0) {
+            cb.call(context, nodes[i], i);
+        }
+    }
+};
+
+/**
+ * Iterate all edges
+ * @param  {Function} cb
+ * @param  {*} [context]
+ */
+graphProto.eachEdge = function (cb, context) {
+    var edges = this.edges;
+    var len = edges.length;
+    for (var i = 0; i < len; i++) {
+        if (edges[i].dataIndex >= 0
+            && edges[i].node1.dataIndex >= 0
+            && edges[i].node2.dataIndex >= 0
+        ) {
+            cb.call(context, edges[i], i);
+        }
+    }
+};
+
+/**
+ * Breadth first traverse
+ * @param {Function} cb
+ * @param {module:echarts/data/Graph.Node} startNode
+ * @param {string} [direction='none'] 'none'|'in'|'out'
+ * @param {*} [context]
+ */
+graphProto.breadthFirstTraverse = function (
+    cb, startNode, direction, context
+) {
+    if (!Node.isInstance(startNode)) {
+        startNode = this._nodesMap[generateNodeKey(startNode)];
+    }
+    if (!startNode) {
+        return;
+    }
+
+    var edgeType = direction === 'out'
+        ? 'outEdges' : (direction === 'in' ? 'inEdges' : 'edges');
+
+    for (var i = 0; i < this.nodes.length; i++) {
+        this.nodes[i].__visited = false;
+    }
+
+    if (cb.call(context, startNode, null)) {
+        return;
+    }
+
+    var queue = [startNode];
+    while (queue.length) {
+        var currentNode = queue.shift();
+        var edges = currentNode[edgeType];
+
+        for (var i = 0; i < edges.length; i++) {
+            var e = edges[i];
+            var otherNode = e.node1 === currentNode
+                ? e.node2 : e.node1;
+            if (!otherNode.__visited) {
+                if (cb.call(context, otherNode, currentNode)) {
+                    // Stop traversing
+                    return;
+                }
+                queue.push(otherNode);
+                otherNode.__visited = true;
+            }
+        }
+    }
+};
+
+// TODO
+// graphProto.depthFirstTraverse = function (
+//     cb, startNode, direction, context
+// ) {
+
+// };
+
+// Filter update
+graphProto.update = function () {
+    var data = this.data;
+    var edgeData = this.edgeData;
+    var nodes = this.nodes;
+    var edges = this.edges;
+
+    for (var i = 0, len = nodes.length; i < len; i++) {
+        nodes[i].dataIndex = -1;
+    }
+    for (var i = 0, len = data.count(); i < len; i++) {
+        nodes[data.getRawIndex(i)].dataIndex = i;
+    }
+
+    edgeData.filterSelf(function (idx) {
+        var edge = edges[edgeData.getRawIndex(idx)];
+        return edge.node1.dataIndex >= 0 && edge.node2.dataIndex >= 0;
+    });
+
+    // Update edge
+    for (var i = 0, len = edges.length; i < len; i++) {
+        edges[i].dataIndex = -1;
+    }
+    for (var i = 0, len = edgeData.count(); i < len; i++) {
+        edges[edgeData.getRawIndex(i)].dataIndex = i;
+    }
+};
+
+/**
+ * @return {module:echarts/data/Graph}
+ */
+graphProto.clone = function () {
+    var graph = new Graph(this._directed);
+    var nodes = this.nodes;
+    var edges = this.edges;
+    for (var i = 0; i < nodes.length; i++) {
+        graph.addNode(nodes[i].id, nodes[i].dataIndex);
+    }
+    for (var i = 0; i < edges.length; i++) {
+        var e = edges[i];
+        graph.addEdge(e.node1.id, e.node2.id, e.dataIndex);
+    }
+    return graph;
+};
+
+
+/**
+ * @alias module:echarts/data/Graph.Node
+ */
+function Node(id, dataIndex) {
+    /**
+    * @type {string}
+    */
+    this.id = id == null ? '' : id;
+
+    /**
+    * @type {Array.<module:echarts/data/Graph.Edge>}
+    */
+    this.inEdges = [];
+    /**
+    * @type {Array.<module:echarts/data/Graph.Edge>}
+    */
+    this.outEdges = [];
+    /**
+    * @type {Array.<module:echarts/data/Graph.Edge>}
+    */
+    this.edges = [];
+    /**
+     * @type {module:echarts/data/Graph}
+     */
+    this.hostGraph;
+
+    /**
+     * @type {number}
+     */
+    this.dataIndex = dataIndex == null ? -1 : dataIndex;
+}
+
+Node.prototype = {
+
+    constructor: Node,
+
+    /**
+     * @return {number}
+     */
+    degree: function () {
+        return this.edges.length;
+    },
+
+    /**
+     * @return {number}
+     */
+    inDegree: function () {
+        return this.inEdges.length;
+    },
+
+    /**
+    * @return {number}
+    */
+    outDegree: function () {
+        return this.outEdges.length;
+    },
+
+    /**
+     * @param {string} [path]
+     * @return {module:echarts/model/Model}
+     */
+    getModel: function (path) {
+        if (this.dataIndex < 0) {
+            return;
+        }
+        var graph = this.hostGraph;
+        var itemModel = graph.data.getItemModel(this.dataIndex);
+
+        return itemModel.getModel(path);
+    }
+};
+
+/**
+ * å›¾è¾¹
+ * @alias module:echarts/data/Graph.Edge
+ * @param {module:echarts/data/Graph.Node} n1
+ * @param {module:echarts/data/Graph.Node} n2
+ * @param {number} [dataIndex=-1]
+ */
+function Edge(n1, n2, dataIndex) {
+
+    /**
+     * èŠ‚ç‚¹1ï¼Œå¦‚æžœæ˜¯æœ‰å‘å›¾åˆ™ä¸ºæºèŠ‚ç‚¹
+     * @type {module:echarts/data/Graph.Node}
+     */
+    this.node1 = n1;
+
+    /**
+     * èŠ‚ç‚¹2ï¼Œå¦‚æžœæ˜¯æœ‰å‘å›¾åˆ™ä¸ºç›®æ ‡èŠ‚ç‚¹
+     * @type {module:echarts/data/Graph.Node}
+     */
+    this.node2 = n2;
+
+    this.dataIndex = dataIndex == null ? -1 : dataIndex;
+}
+
+/**
+ * @param {string} [path]
+ * @return {module:echarts/model/Model}
+ */
+Edge.prototype.getModel = function (path) {
+    if (this.dataIndex < 0) {
+        return;
+    }
+    var graph = this.hostGraph;
+    var itemModel = graph.edgeData.getItemModel(this.dataIndex);
+
+    return itemModel.getModel(path);
+};
+
+var createGraphDataProxyMixin = function (hostName, dataName) {
+    return {
+        /**
+         * @param {string=} [dimension='value'] Default 'value'. can be 'a', 'b', 'c', 'd', 'e'.
+         * @return {number}
+         */
+        getValue: function (dimension) {
+            var data = this[hostName][dataName];
+            return data.get(data.getDimension(dimension || 'value'), this.dataIndex);
+        },
+
+        /**
+         * @param {Object|string} key
+         * @param {*} [value]
+         */
+        setVisual: function (key, value) {
+            this.dataIndex >= 0
+                && this[hostName][dataName].setItemVisual(this.dataIndex, key, value);
+        },
+
+        /**
+         * @param {string} key
+         * @return {boolean}
+         */
+        getVisual: function (key, ignoreParent) {
+            return this[hostName][dataName].getItemVisual(this.dataIndex, key, ignoreParent);
+        },
+
+        /**
+         * @param {Object} layout
+         * @return {boolean} [merge=false]
+         */
+        setLayout: function (layout, merge$$1) {
+            this.dataIndex >= 0
+                && this[hostName][dataName].setItemLayout(this.dataIndex, layout, merge$$1);
+        },
+
+        /**
+         * @return {Object}
+         */
+        getLayout: function () {
+            return this[hostName][dataName].getItemLayout(this.dataIndex);
+        },
+
+        /**
+         * @return {module:zrender/Element}
+         */
+        getGraphicEl: function () {
+            return this[hostName][dataName].getItemGraphicEl(this.dataIndex);
+        },
+
+        /**
+         * @return {number}
+         */
+        getRawIndex: function () {
+            return this[hostName][dataName].getRawIndex(this.dataIndex);
+        }
+    };
+};
+
+mixin(Node, createGraphDataProxyMixin('hostGraph', 'data'));
+mixin(Edge, createGraphDataProxyMixin('hostGraph', 'edgeData'));
+
+Graph.Node = Node;
+Graph.Edge = Edge;
+
+enableClassCheck(Node);
+enableClassCheck(Edge);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var createGraphFromNodeEdge = function (nodes, edges, seriesModel, directed, beforeLink) {
+    // ??? TODO
+    // support dataset?
+    var graph = new Graph(directed);
+    for (var i = 0; i < nodes.length; i++) {
+        graph.addNode(retrieve(
+            // Id, name, dataIndex
+            nodes[i].id, nodes[i].name, i
+        ), i);
+    }
+
+    var linkNameList = [];
+    var validEdges = [];
+    var linkCount = 0;
+    for (var i = 0; i < edges.length; i++) {
+        var link = edges[i];
+        var source = link.source;
+        var target = link.target;
+        // addEdge may fail when source or target not exists
+        if (graph.addEdge(source, target, linkCount)) {
+            validEdges.push(link);
+            linkNameList.push(retrieve(link.id, source + ' > ' + target));
+            linkCount++;
+        }
+    }
+
+    var coordSys = seriesModel.get('coordinateSystem');
+    var nodeData;
+    if (coordSys === 'cartesian2d' || coordSys === 'polar') {
+        nodeData = createListFromArray(nodes, seriesModel);
+    }
+    else {
+        var coordSysCtor = CoordinateSystemManager.get(coordSys);
+        var coordDimensions = (coordSysCtor && coordSysCtor.type !== 'view')
+            ? (coordSysCtor.dimensions || []) : [];
+        // FIXME: Some geo do not need `value` dimenson, whereas `calendar` needs
+        // `value` dimension, but graph need `value` dimension. It's better to
+        // uniform this behavior.
+        if (indexOf(coordDimensions, 'value') < 0) {
+            coordDimensions.concat(['value']);
+        }
+
+        var dimensionNames = createDimensions(nodes, {
+            coordDimensions: coordDimensions
+        });
+        nodeData = new List(dimensionNames, seriesModel);
+        nodeData.initData(nodes);
+    }
+
+    var edgeData = new List(['value'], seriesModel);
+    edgeData.initData(validEdges, linkNameList);
+
+    beforeLink && beforeLink(nodeData, edgeData);
+
+    linkList({
+        mainData: nodeData,
+        struct: graph,
+        structAttr: 'graph',
+        datas: {node: nodeData, edge: edgeData},
+        datasAttr: {node: 'data', edge: 'edgeData'}
+    });
+
+    // Update dataIndex of nodes and edges because invalid edge may be removed
+    graph.update();
+
+    return graph;
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var GraphSeries = extendSeriesModel({
+
+    type: 'series.graph',
+
+    init: function (option) {
+        GraphSeries.superApply(this, 'init', arguments);
+
+        // Provide data for legend select
+        this.legendDataProvider = function () {
+            return this._categoriesData;
+        };
+
+        this.fillDataTextStyle(option.edges || option.links);
+
+        this._updateCategoriesData();
+    },
+
+    mergeOption: function (option) {
+        GraphSeries.superApply(this, 'mergeOption', arguments);
+
+        this.fillDataTextStyle(option.edges || option.links);
+
+        this._updateCategoriesData();
+    },
+
+    mergeDefaultAndTheme: function (option) {
+        GraphSeries.superApply(this, 'mergeDefaultAndTheme', arguments);
+        defaultEmphasis(option, ['edgeLabel'], ['show']);
+    },
+
+    getInitialData: function (option, ecModel) {
+        var edges = option.edges || option.links || [];
+        var nodes = option.data || option.nodes || [];
+        var self = this;
+
+        if (nodes && edges) {
+            return createGraphFromNodeEdge(nodes, edges, this, true, beforeLink).data;
+        }
+
+        function beforeLink(nodeData, edgeData) {
+            // Overwrite nodeData.getItemModel to
+            nodeData.wrapMethod('getItemModel', function (model) {
+                var categoriesModels = self._categoriesModels;
+                var categoryIdx = model.getShallow('category');
+                var categoryModel = categoriesModels[categoryIdx];
+                if (categoryModel) {
+                    categoryModel.parentModel = model.parentModel;
+                    model.parentModel = categoryModel;
+                }
+                return model;
+            });
+
+            var edgeLabelModel = self.getModel('edgeLabel');
+            // For option `edgeLabel` can be found by label.xxx.xxx on item mode.
+            var fakeSeriesModel = new Model(
+                {label: edgeLabelModel.option},
+                edgeLabelModel.parentModel,
+                ecModel
+            );
+            var emphasisEdgeLabelModel = self.getModel('emphasis.edgeLabel');
+            var emphasisFakeSeriesModel = new Model(
+                {emphasis: {label: emphasisEdgeLabelModel.option}},
+                emphasisEdgeLabelModel.parentModel,
+                ecModel
+            );
+
+            edgeData.wrapMethod('getItemModel', function (model) {
+                model.customizeGetParent(edgeGetParent);
+                return model;
+            });
+
+            function edgeGetParent(path) {
+                path = this.parsePath(path);
+                return (path && path[0] === 'label')
+                    ? fakeSeriesModel
+                    : (path && path[0] === 'emphasis' && path[1] === 'label')
+                    ? emphasisFakeSeriesModel
+                    : this.parentModel;
+            }
+        }
+    },
+
+    /**
+     * @return {module:echarts/data/Graph}
+     */
+    getGraph: function () {
+        return this.getData().graph;
+    },
+
+    /**
+     * @return {module:echarts/data/List}
+     */
+    getEdgeData: function () {
+        return this.getGraph().edgeData;
+    },
+
+    /**
+     * @return {module:echarts/data/List}
+     */
+    getCategoriesData: function () {
+        return this._categoriesData;
+    },
+
+    /**
+     * @override
+     */
+    formatTooltip: function (dataIndex, multipleSeries, dataType) {
+        if (dataType === 'edge') {
+            var nodeData = this.getData();
+            var params = this.getDataParams(dataIndex, dataType);
+            var edge = nodeData.graph.getEdgeByIndex(dataIndex);
+            var sourceName = nodeData.getName(edge.node1.dataIndex);
+            var targetName = nodeData.getName(edge.node2.dataIndex);
+
+            var html = [];
+            sourceName != null && html.push(sourceName);
+            targetName != null && html.push(targetName);
+            html = encodeHTML(html.join(' > '));
+
+            if (params.value) {
+                html += ' : ' + encodeHTML(params.value);
+            }
+            return html;
+        }
+        else { // dataType === 'node' or empty
+            return GraphSeries.superApply(this, 'formatTooltip', arguments);
+        }
+    },
+
+    _updateCategoriesData: function () {
+        var categories = map(this.option.categories || [], function (category) {
+            // Data must has value
+            return category.value != null ? category : extend({
+                value: 0
+            }, category);
+        });
+        var categoriesData = new List(['value'], this);
+        categoriesData.initData(categories);
+
+        this._categoriesData = categoriesData;
+
+        this._categoriesModels = categoriesData.mapArray(function (idx) {
+            return categoriesData.getItemModel(idx, true);
+        });
+    },
+
+    setZoom: function (zoom) {
+        this.option.zoom = zoom;
+    },
+
+    setCenter: function (center) {
+        this.option.center = center;
+    },
+
+    isAnimationEnabled: function () {
+        return GraphSeries.superCall(this, 'isAnimationEnabled')
+            // Not enable animation when do force layout
+            && !(this.get('layout') === 'force' && this.get('force.layoutAnimation'));
+    },
+
+    defaultOption: {
+        zlevel: 0,
+        z: 2,
+
+        coordinateSystem: 'view',
+
+        // Default option for all coordinate systems
+        // xAxisIndex: 0,
+        // yAxisIndex: 0,
+        // polarIndex: 0,
+        // geoIndex: 0,
+
+        legendHoverLink: true,
+
+        hoverAnimation: true,
+
+        layout: null,
+
+        focusNodeAdjacency: false,
+
+        // Configuration of circular layout
+        circular: {
+            rotateLabel: false
+        },
+        // Configuration of force directed layout
+        force: {
+            initLayout: null,
+            // Node repulsion. Can be an array to represent range.
+            repulsion: [0, 50],
+            gravity: 0.1,
+
+            // Edge length. Can be an array to represent range.
+            edgeLength: 30,
+
+            layoutAnimation: true
+        },
+
+        left: 'center',
+        top: 'center',
+        // right: null,
+        // bottom: null,
+        // width: '80%',
+        // height: '80%',
+
+        symbol: 'circle',
+        symbolSize: 10,
+
+        edgeSymbol: ['none', 'none'],
+        edgeSymbolSize: 10,
+        edgeLabel: {
+            position: 'middle'
+        },
+
+        draggable: false,
+
+        roam: false,
+
+        // Default on center of graph
+        center: null,
+
+        zoom: 1,
+        // Symbol size scale ratio in roam
+        nodeScaleRatio: 0.6,
+        // cursor: null,
+
+        // categories: [],
+
+        // data: []
+        // Or
+        // nodes: []
+        //
+        // links: []
+        // Or
+        // edges: []
+
+        label: {
+            show: false,
+            formatter: '{b}'
+        },
+
+        itemStyle: {},
+
+        lineStyle: {
+            color: '#aaa',
+            width: 1,
+            curveness: 0,
+            opacity: 0.5
+        },
+        emphasis: {
+            label: {
+                show: true
+            }
+        }
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Line path for bezier and straight line draw
+ */
+
+var straightLineProto = Line.prototype;
+var bezierCurveProto = BezierCurve.prototype;
+
+function isLine(shape) {
+    return isNaN(+shape.cpx1) || isNaN(+shape.cpy1);
+}
+
+var LinePath = extendShape({
+
+    type: 'ec-line',
+
+    style: {
+        stroke: '#000',
+        fill: null
+    },
+
+    shape: {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: 0,
+        percent: 1,
+        cpx1: null,
+        cpy1: null
+    },
+
+    buildPath: function (ctx, shape) {
+        (isLine(shape) ? straightLineProto : bezierCurveProto).buildPath(ctx, shape);
+    },
+
+    pointAt: function (t) {
+        return isLine(this.shape)
+            ? straightLineProto.pointAt.call(this, t)
+            : bezierCurveProto.pointAt.call(this, t);
+    },
+
+    tangentAt: function (t) {
+        var shape = this.shape;
+        var p = isLine(shape)
+            ? [shape.x2 - shape.x1, shape.y2 - shape.y1]
+            : bezierCurveProto.tangentAt.call(this, t);
+        return normalize(p, p);
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @module echarts/chart/helper/Line
+ */
+
+var SYMBOL_CATEGORIES = ['fromSymbol', 'toSymbol'];
+
+function makeSymbolTypeKey(symbolCategory) {
+    return '_' + symbolCategory + 'Type';
+}
+/**
+ * @inner
+ */
+function createSymbol$1(name, lineData, idx) {
+    var color = lineData.getItemVisual(idx, 'color');
+    var symbolType = lineData.getItemVisual(idx, name);
+    var symbolSize = lineData.getItemVisual(idx, name + 'Size');
+
+    if (!symbolType || symbolType === 'none') {
+        return;
+    }
+
+    if (!isArray(symbolSize)) {
+        symbolSize = [symbolSize, symbolSize];
+    }
+    var symbolPath = createSymbol(
+        symbolType, -symbolSize[0] / 2, -symbolSize[1] / 2,
+        symbolSize[0], symbolSize[1], color
+    );
+
+    symbolPath.name = name;
+
+    return symbolPath;
+}
+
+function createLine(points) {
+    var line = new LinePath({
+        name: 'line'
+    });
+    setLinePoints(line.shape, points);
+    return line;
+}
+
+function setLinePoints(targetShape, points) {
+    var p1 = points[0];
+    var p2 = points[1];
+    var cp1 = points[2];
+    targetShape.x1 = p1[0];
+    targetShape.y1 = p1[1];
+    targetShape.x2 = p2[0];
+    targetShape.y2 = p2[1];
+    targetShape.percent = 1;
+
+    if (cp1) {
+        targetShape.cpx1 = cp1[0];
+        targetShape.cpy1 = cp1[1];
+    }
+    else {
+        targetShape.cpx1 = NaN;
+        targetShape.cpy1 = NaN;
+    }
+}
+
+function updateSymbolAndLabelBeforeLineUpdate () {
+    var lineGroup = this;
+    var symbolFrom = lineGroup.childOfName('fromSymbol');
+    var symbolTo = lineGroup.childOfName('toSymbol');
+    var label = lineGroup.childOfName('label');
+    // Quick reject
+    if (!symbolFrom && !symbolTo && label.ignore) {
+        return;
+    }
+
+    var invScale = 1;
+    var parentNode = this.parent;
+    while (parentNode) {
+        if (parentNode.scale) {
+            invScale /= parentNode.scale[0];
+        }
+        parentNode = parentNode.parent;
+    }
+
+    var line = lineGroup.childOfName('line');
+    // If line not changed
+    // FIXME Parent scale changed
+    if (!this.__dirty && !line.__dirty) {
+        return;
+    }
+
+    var percent = line.shape.percent;
+    var fromPos = line.pointAt(0);
+    var toPos = line.pointAt(percent);
+
+    var d = sub([], toPos, fromPos);
+    normalize(d, d);
+
+    if (symbolFrom) {
+        symbolFrom.attr('position', fromPos);
+        var tangent = line.tangentAt(0);
+        symbolFrom.attr('rotation', Math.PI / 2 - Math.atan2(
+            tangent[1], tangent[0]
+        ));
+        symbolFrom.attr('scale', [invScale * percent, invScale * percent]);
+    }
+    if (symbolTo) {
+        symbolTo.attr('position', toPos);
+        var tangent = line.tangentAt(1);
+        symbolTo.attr('rotation', -Math.PI / 2 - Math.atan2(
+            tangent[1], tangent[0]
+        ));
+        symbolTo.attr('scale', [invScale * percent, invScale * percent]);
+    }
+
+    if (!label.ignore) {
+        label.attr('position', toPos);
+
+        var textPosition;
+        var textAlign;
+        var textVerticalAlign;
+
+        var distance$$1 = 5 * invScale;
+        // End
+        if (label.__position === 'end') {
+            textPosition = [d[0] * distance$$1 + toPos[0], d[1] * distance$$1 + toPos[1]];
+            textAlign = d[0] > 0.8 ? 'left' : (d[0] < -0.8 ? 'right' : 'center');
+            textVerticalAlign = d[1] > 0.8 ? 'top' : (d[1] < -0.8 ? 'bottom' : 'middle');
+        }
+        // Middle
+        else if (label.__position === 'middle') {
+            var halfPercent = percent / 2;
+            var tangent = line.tangentAt(halfPercent);
+            var n = [tangent[1], -tangent[0]];
+            var cp = line.pointAt(halfPercent);
+            if (n[1] > 0) {
+                n[0] = -n[0];
+                n[1] = -n[1];
+            }
+            textPosition = [cp[0] + n[0] * distance$$1, cp[1] + n[1] * distance$$1];
+            textAlign = 'center';
+            textVerticalAlign = 'bottom';
+            var rotation = -Math.atan2(tangent[1], tangent[0]);
+            if (toPos[0] < fromPos[0]) {
+                rotation = Math.PI + rotation;
+            }
+            label.attr('rotation', rotation);
+        }
+        // Start
+        else {
+            textPosition = [-d[0] * distance$$1 + fromPos[0], -d[1] * distance$$1 + fromPos[1]];
+            textAlign = d[0] > 0.8 ? 'right' : (d[0] < -0.8 ? 'left' : 'center');
+            textVerticalAlign = d[1] > 0.8 ? 'bottom' : (d[1] < -0.8 ? 'top' : 'middle');
+        }
+        label.attr({
+            style: {
+                // Use the user specified text align and baseline first
+                textVerticalAlign: label.__verticalAlign || textVerticalAlign,
+                textAlign: label.__textAlign || textAlign
+            },
+            position: textPosition,
+            scale: [invScale, invScale]
+        });
+    }
+}
+
+/**
+ * @constructor
+ * @extends {module:zrender/graphic/Group}
+ * @alias {module:echarts/chart/helper/Line}
+ */
+function Line$1(lineData, idx, seriesScope) {
+    Group.call(this);
+
+    this._createLine(lineData, idx, seriesScope);
+}
+
+var lineProto = Line$1.prototype;
+
+// Update symbol position and rotation
+lineProto.beforeUpdate = updateSymbolAndLabelBeforeLineUpdate;
+
+lineProto._createLine = function (lineData, idx, seriesScope) {
+    var seriesModel = lineData.hostModel;
+    var linePoints = lineData.getItemLayout(idx);
+
+    var line = createLine(linePoints);
+    line.shape.percent = 0;
+    initProps(line, {
+        shape: {
+            percent: 1
+        }
+    }, seriesModel, idx);
+
+    this.add(line);
+
+    var label = new Text({
+        name: 'label'
+    });
+    this.add(label);
+
+    each$1(SYMBOL_CATEGORIES, function (symbolCategory) {
+        var symbol = createSymbol$1(symbolCategory, lineData, idx);
+        // symbols must added after line to make sure
+        // it will be updated after line#update.
+        // Or symbol position and rotation update in line#beforeUpdate will be one frame slow
+        this.add(symbol);
+        this[makeSymbolTypeKey(symbolCategory)] = lineData.getItemVisual(idx, symbolCategory);
+    }, this);
+
+    this._updateCommonStl(lineData, idx, seriesScope);
+};
+
+lineProto.updateData = function (lineData, idx, seriesScope) {
+    var seriesModel = lineData.hostModel;
+
+    var line = this.childOfName('line');
+    var linePoints = lineData.getItemLayout(idx);
+    var target = {
+        shape: {}
+    };
+    setLinePoints(target.shape, linePoints);
+    updateProps(line, target, seriesModel, idx);
+
+    each$1(SYMBOL_CATEGORIES, function (symbolCategory) {
+        var symbolType = lineData.getItemVisual(idx, symbolCategory);
+        var key = makeSymbolTypeKey(symbolCategory);
+        // Symbol changed
+        if (this[key] !== symbolType) {
+            this.remove(this.childOfName(symbolCategory));
+            var symbol = createSymbol$1(symbolCategory, lineData, idx);
+            this.add(symbol);
+        }
+        this[key] = symbolType;
+    }, this);
+
+    this._updateCommonStl(lineData, idx, seriesScope);
+};
+
+lineProto._updateCommonStl = function (lineData, idx, seriesScope) {
+    var seriesModel = lineData.hostModel;
+
+    var line = this.childOfName('line');
+
+    var lineStyle = seriesScope && seriesScope.lineStyle;
+    var hoverLineStyle = seriesScope && seriesScope.hoverLineStyle;
+    var labelModel = seriesScope && seriesScope.labelModel;
+    var hoverLabelModel = seriesScope && seriesScope.hoverLabelModel;
+
+    // Optimization for large dataset
+    if (!seriesScope || lineData.hasItemOption) {
+        var itemModel = lineData.getItemModel(idx);
+
+        lineStyle = itemModel.getModel('lineStyle').getLineStyle();
+        hoverLineStyle = itemModel.getModel('emphasis.lineStyle').getLineStyle();
+
+        labelModel = itemModel.getModel('label');
+        hoverLabelModel = itemModel.getModel('emphasis.label');
+    }
+
+    var visualColor = lineData.getItemVisual(idx, 'color');
+    var visualOpacity = retrieve3(
+        lineData.getItemVisual(idx, 'opacity'),
+        lineStyle.opacity,
+        1
+    );
+
+    line.useStyle(defaults(
+        {
+            strokeNoScale: true,
+            fill: 'none',
+            stroke: visualColor,
+            opacity: visualOpacity
+        },
+        lineStyle
+    ));
+    line.hoverStyle = hoverLineStyle;
+
+    // Update symbol
+    each$1(SYMBOL_CATEGORIES, function (symbolCategory) {
+        var symbol = this.childOfName(symbolCategory);
+        if (symbol) {
+            symbol.setColor(visualColor);
+            symbol.setStyle({
+                opacity: visualOpacity
+            });
+        }
+    }, this);
+
+    var showLabel = labelModel.getShallow('show');
+    var hoverShowLabel = hoverLabelModel.getShallow('show');
+
+    var label = this.childOfName('label');
+    var defaultLabelColor;
+    var baseText;
+
+    // FIXME: the logic below probably should be merged to `graphic.setLabelStyle`.
+    if (showLabel || hoverShowLabel) {
+        defaultLabelColor = visualColor || '#000';
+
+        baseText = seriesModel.getFormattedLabel(idx, 'normal', lineData.dataType);
+        if (baseText == null) {
+            var rawVal = seriesModel.getRawValue(idx);
+            baseText = rawVal == null
+                ? lineData.getName(idx)
+                : isFinite(rawVal)
+                ? round$1(rawVal)
+                : rawVal;
+        }
+    }
+    var normalText = showLabel ? baseText : null;
+    var emphasisText = hoverShowLabel
+        ? retrieve2(
+            seriesModel.getFormattedLabel(idx, 'emphasis', lineData.dataType),
+            baseText
+        )
+        : null;
+
+    var labelStyle = label.style;
+
+    // Always set `textStyle` even if `normalStyle.text` is null, because default
+    // values have to be set on `normalStyle`.
+    if (normalText != null || emphasisText != null) {
+        setTextStyle(label.style, labelModel, {
+            text: normalText
+        }, {
+            autoColor: defaultLabelColor
+        });
+
+        label.__textAlign = labelStyle.textAlign;
+        label.__verticalAlign = labelStyle.textVerticalAlign;
+        // 'start', 'middle', 'end'
+        label.__position = labelModel.get('position') || 'middle';
+    }
+
+    if (emphasisText != null) {
+        // Only these properties supported in this emphasis style here.
+        label.hoverStyle = {
+            text: emphasisText,
+            textFill: hoverLabelModel.getTextColor(true),
+            // For merging hover style to normal style, do not use
+            // `hoverLabelModel.getFont()` here.
+            fontStyle: hoverLabelModel.getShallow('fontStyle'),
+            fontWeight: hoverLabelModel.getShallow('fontWeight'),
+            fontSize: hoverLabelModel.getShallow('fontSize'),
+            fontFamily: hoverLabelModel.getShallow('fontFamily')
+        };
+    }
+    else {
+        label.hoverStyle = {
+            text: null
+        };
+    }
+
+    label.ignore = !showLabel && !hoverShowLabel;
+
+    setHoverStyle(this);
+};
+
+lineProto.highlight = function () {
+    this.trigger('emphasis');
+};
+
+lineProto.downplay = function () {
+    this.trigger('normal');
+};
+
+lineProto.updateLayout = function (lineData, idx) {
+    this.setLinePoints(lineData.getItemLayout(idx));
+};
+
+lineProto.setLinePoints = function (points) {
+    var linePath = this.childOfName('line');
+    setLinePoints(linePath.shape, points);
+    linePath.dirty();
+};
+
+inherits(Line$1, Group);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @module echarts/chart/helper/LineDraw
+ */
+
+// import IncrementalDisplayable from 'zrender/src/graphic/IncrementalDisplayable';
+
+/**
+ * @alias module:echarts/component/marker/LineDraw
+ * @constructor
+ */
+function LineDraw(ctor) {
+    this._ctor = ctor || Line$1;
+
+    this.group = new Group();
+}
+
+var lineDrawProto = LineDraw.prototype;
+
+lineDrawProto.isPersistent = function () {
+    return true;
+};
+
+/**
+ * @param {module:echarts/data/List} lineData
+ */
+lineDrawProto.updateData = function (lineData) {
+    var lineDraw = this;
+    var group = lineDraw.group;
+
+    var oldLineData = lineDraw._lineData;
+    lineDraw._lineData = lineData;
+
+    // There is no oldLineData only when first rendering or switching from
+    // stream mode to normal mode, where previous elements should be removed.
+    if (!oldLineData) {
+        group.removeAll();
+    }
+
+    var seriesScope = makeSeriesScope$1(lineData);
+
+    lineData.diff(oldLineData)
+        .add(function (idx) {
+            doAdd(lineDraw, lineData, idx, seriesScope);
+        })
+        .update(function (newIdx, oldIdx) {
+            doUpdate(lineDraw, oldLineData, lineData, oldIdx, newIdx, seriesScope);
+        })
+        .remove(function (idx) {
+            group.remove(oldLineData.getItemGraphicEl(idx));
+        })
+        .execute();
+};
+
+function doAdd(lineDraw, lineData, idx, seriesScope) {
+    var itemLayout = lineData.getItemLayout(idx);
+
+    if (!lineNeedsDraw(itemLayout)) {
+        return;
+    }
+
+    var el = new lineDraw._ctor(lineData, idx, seriesScope);
+    lineData.setItemGraphicEl(idx, el);
+    lineDraw.group.add(el);
+}
+
+function doUpdate(lineDraw, oldLineData, newLineData, oldIdx, newIdx, seriesScope) {
+    var itemEl = oldLineData.getItemGraphicEl(oldIdx);
+
+    if (!lineNeedsDraw(newLineData.getItemLayout(newIdx))) {
+        lineDraw.group.remove(itemEl);
+        return;
+    }
+
+    if (!itemEl) {
+        itemEl = new lineDraw._ctor(newLineData, newIdx, seriesScope);
+    }
+    else {
+        itemEl.updateData(newLineData, newIdx, seriesScope);
+    }
+
+    newLineData.setItemGraphicEl(newIdx, itemEl);
+
+    lineDraw.group.add(itemEl);
+}
+
+lineDrawProto.updateLayout = function () {
+    var lineData = this._lineData;
+
+    // Do not support update layout in incremental mode.
+    if (!lineData) {
+        return;
+    }
+
+    lineData.eachItemGraphicEl(function (el, idx) {
+        el.updateLayout(lineData, idx);
+    }, this);
+};
+
+lineDrawProto.incrementalPrepareUpdate = function (lineData) {
+    this._seriesScope = makeSeriesScope$1(lineData);
+    this._lineData = null;
+    this.group.removeAll();
+};
+
+lineDrawProto.incrementalUpdate = function (taskParams, lineData) {
+    function updateIncrementalAndHover(el) {
+        if (!el.isGroup) {
+            el.incremental = el.useHoverLayer = true;
+        }
+    }
+
+    for (var idx = taskParams.start; idx < taskParams.end; idx++) {
+        var itemLayout = lineData.getItemLayout(idx);
+
+        if (lineNeedsDraw(itemLayout)) {
+            var el = new this._ctor(lineData, idx, this._seriesScope);
+            el.traverse(updateIncrementalAndHover);
+
+            this.group.add(el);
+            lineData.setItemGraphicEl(idx, el);
+        }
+    }
+};
+
+function makeSeriesScope$1(lineData) {
+    var hostModel = lineData.hostModel;
+    return {
+        lineStyle: hostModel.getModel('lineStyle').getLineStyle(),
+        hoverLineStyle: hostModel.getModel('emphasis.lineStyle').getLineStyle(),
+        labelModel: hostModel.getModel('label'),
+        hoverLabelModel: hostModel.getModel('emphasis.label')
+    };
+}
+
+lineDrawProto.remove = function () {
+    this._clearIncremental();
+    this._incremental = null;
+    this.group.removeAll();
+};
+
+lineDrawProto._clearIncremental = function () {
+    var incremental = this._incremental;
+    if (incremental) {
+        incremental.clearDisplaybles();
+    }
+};
+
+function isPointNaN(pt) {
+    return isNaN(pt[0]) || isNaN(pt[1]);
+}
+
+function lineNeedsDraw(pts) {
+    return !isPointNaN(pts[0]) && !isPointNaN(pts[1]);
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var v1 = [];
+var v2 = [];
+var v3 = [];
+var quadraticAt$1 = quadraticAt;
+var v2DistSquare = distSquare;
+var mathAbs$1 = Math.abs;
+function intersectCurveCircle(curvePoints, center, radius) {
+    var p0 = curvePoints[0];
+    var p1 = curvePoints[1];
+    var p2 = curvePoints[2];
+
+    var d = Infinity;
+    var t;
+    var radiusSquare = radius * radius;
+    var interval = 0.1;
+
+    for (var _t = 0.1; _t <= 0.9; _t += 0.1) {
+        v1[0] = quadraticAt$1(p0[0], p1[0], p2[0], _t);
+        v1[1] = quadraticAt$1(p0[1], p1[1], p2[1], _t);
+        var diff = mathAbs$1(v2DistSquare(v1, center) - radiusSquare);
+        if (diff < d) {
+            d = diff;
+            t = _t;
+        }
+    }
+
+    // Assume the segment is monotoneï¼ŒFind root through Bisection method
+    // At most 32 iteration
+    for (var i = 0; i < 32; i++) {
+        // var prev = t - interval;
+        var next = t + interval;
+        // v1[0] = quadraticAt(p0[0], p1[0], p2[0], prev);
+        // v1[1] = quadraticAt(p0[1], p1[1], p2[1], prev);
+        v2[0] = quadraticAt$1(p0[0], p1[0], p2[0], t);
+        v2[1] = quadraticAt$1(p0[1], p1[1], p2[1], t);
+        v3[0] = quadraticAt$1(p0[0], p1[0], p2[0], next);
+        v3[1] = quadraticAt$1(p0[1], p1[1], p2[1], next);
+
+        var diff = v2DistSquare(v2, center) - radiusSquare;
+        if (mathAbs$1(diff) < 1e-2) {
+            break;
+        }
+
+        // var prevDiff = v2DistSquare(v1, center) - radiusSquare;
+        var nextDiff = v2DistSquare(v3, center) - radiusSquare;
+
+        interval /= 2;
+        if (diff < 0) {
+            if (nextDiff >= 0) {
+                t = t + interval;
+            }
+            else {
+                t = t - interval;
+            }
+        }
+        else {
+            if (nextDiff >= 0) {
+                t = t - interval;
+            }
+            else {
+                t = t + interval;
+            }
+        }
+    }
+
+    return t;
+}
+
+// Adjust edge to avoid
+var adjustEdge = function (graph, scale$$1) {
+    var tmp0 = [];
+    var quadraticSubdivide$$1 = quadraticSubdivide;
+    var pts = [[], [], []];
+    var pts2 = [[], []];
+    var v = [];
+    scale$$1 /= 2;
+
+    function getSymbolSize(node) {
+        var symbolSize = node.getVisual('symbolSize');
+        if (symbolSize instanceof Array) {
+            symbolSize = (symbolSize[0] + symbolSize[1]) / 2;
+        }
+        return symbolSize;
+    }
+    graph.eachEdge(function (edge, idx) {
+        var linePoints = edge.getLayout();
+        var fromSymbol = edge.getVisual('fromSymbol');
+        var toSymbol = edge.getVisual('toSymbol');
+
+        if (!linePoints.__original) {
+            linePoints.__original = [
+                clone$1(linePoints[0]),
+                clone$1(linePoints[1])
+            ];
+            if (linePoints[2]) {
+                linePoints.__original.push(clone$1(linePoints[2]));
+            }
+        }
+        var originalPoints = linePoints.__original;
+        // Quadratic curve
+        if (linePoints[2] != null) {
+            copy(pts[0], originalPoints[0]);
+            copy(pts[1], originalPoints[2]);
+            copy(pts[2], originalPoints[1]);
+            if (fromSymbol && fromSymbol != 'none') {
+                var symbolSize = getSymbolSize(edge.node1);
+
+                var t = intersectCurveCircle(pts, originalPoints[0], symbolSize * scale$$1);
+                // Subdivide and get the second
+                quadraticSubdivide$$1(pts[0][0], pts[1][0], pts[2][0], t, tmp0);
+                pts[0][0] = tmp0[3];
+                pts[1][0] = tmp0[4];
+                quadraticSubdivide$$1(pts[0][1], pts[1][1], pts[2][1], t, tmp0);
+                pts[0][1] = tmp0[3];
+                pts[1][1] = tmp0[4];
+            }
+            if (toSymbol && toSymbol != 'none') {
+                var symbolSize = getSymbolSize(edge.node2);
+
+                var t = intersectCurveCircle(pts, originalPoints[1], symbolSize * scale$$1);
+                // Subdivide and get the first
+                quadraticSubdivide$$1(pts[0][0], pts[1][0], pts[2][0], t, tmp0);
+                pts[1][0] = tmp0[1];
+                pts[2][0] = tmp0[2];
+                quadraticSubdivide$$1(pts[0][1], pts[1][1], pts[2][1], t, tmp0);
+                pts[1][1] = tmp0[1];
+                pts[2][1] = tmp0[2];
+            }
+            // Copy back to layout
+            copy(linePoints[0], pts[0]);
+            copy(linePoints[1], pts[2]);
+            copy(linePoints[2], pts[1]);
+        }
+        // Line
+        else {
+            copy(pts2[0], originalPoints[0]);
+            copy(pts2[1], originalPoints[1]);
+
+            sub(v, pts2[1], pts2[0]);
+            normalize(v, v);
+            if (fromSymbol && fromSymbol != 'none') {
+
+                var symbolSize = getSymbolSize(edge.node1);
+
+                scaleAndAdd(pts2[0], pts2[0], v, symbolSize * scale$$1);
+            }
+            if (toSymbol && toSymbol != 'none') {
+                var symbolSize = getSymbolSize(edge.node2);
+
+                scaleAndAdd(pts2[1], pts2[1], v, -symbolSize * scale$$1);
+            }
+            copy(linePoints[0], pts2[0]);
+            copy(linePoints[1], pts2[1]);
+        }
+    });
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var nodeOpacityPath = ['itemStyle', 'opacity'];
+var lineOpacityPath = ['lineStyle', 'opacity'];
+
+function getItemOpacity(item, opacityPath) {
+    return item.getVisual('opacity') || item.getModel().get(opacityPath);
+}
+
+function fadeOutItem(item, opacityPath, opacityRatio) {
+    var el = item.getGraphicEl();
+
+    var opacity = getItemOpacity(item, opacityPath);
+    if (opacityRatio != null) {
+        opacity == null && (opacity = 1);
+        opacity *= opacityRatio;
+    }
+
+    el.downplay && el.downplay();
+    el.traverse(function (child) {
+        if (child.type !== 'group') {
+            child.setStyle('opacity', opacity);
+        }
+    });
+}
+
+function fadeInItem(item, opacityPath) {
+    var opacity = getItemOpacity(item, opacityPath);
+    var el = item.getGraphicEl();
+
+    el.highlight && el.highlight();
+    el.traverse(function (child) {
+        if (child.type !== 'group') {
+            child.setStyle('opacity', opacity);
+        }
+    });
+}
+
+extendChartView({
+
+    type: 'graph',
+
+    init: function (ecModel, api) {
+        var symbolDraw = new SymbolDraw();
+        var lineDraw = new LineDraw();
+        var group = this.group;
+
+        this._controller = new RoamController(api.getZr());
+        this._controllerHost = {target: group};
+
+        group.add(symbolDraw.group);
+        group.add(lineDraw.group);
+
+        this._symbolDraw = symbolDraw;
+        this._lineDraw = lineDraw;
+
+        this._firstRender = true;
+    },
+
+    render: function (seriesModel, ecModel, api) {
+        var coordSys = seriesModel.coordinateSystem;
+
+        this._model = seriesModel;
+        this._nodeScaleRatio = seriesModel.get('nodeScaleRatio');
+
+        var symbolDraw = this._symbolDraw;
+        var lineDraw = this._lineDraw;
+
+        var group = this.group;
+
+        if (coordSys.type === 'view') {
+            var groupNewProp = {
+                position: coordSys.position,
+                scale: coordSys.scale
+            };
+            if (this._firstRender) {
+                group.attr(groupNewProp);
+            }
+            else {
+                updateProps(group, groupNewProp, seriesModel);
+            }
+        }
+        // Fix edge contact point with node
+        adjustEdge(seriesModel.getGraph(), this._getNodeGlobalScale(seriesModel));
+
+        var data = seriesModel.getData();
+        symbolDraw.updateData(data);
+
+        var edgeData = seriesModel.getEdgeData();
+        lineDraw.updateData(edgeData);
+
+        this._updateNodeAndLinkScale();
+
+        this._updateController(seriesModel, ecModel, api);
+
+        clearTimeout(this._layoutTimeout);
+        var forceLayout = seriesModel.forceLayout;
+        var layoutAnimation = seriesModel.get('force.layoutAnimation');
+        if (forceLayout) {
+            this._startForceLayoutIteration(forceLayout, layoutAnimation);
+        }
+
+        data.eachItemGraphicEl(function (el, idx) {
+            var itemModel = data.getItemModel(idx);
+            // Update draggable
+            el.off('drag').off('dragend');
+            var draggable = data.getItemModel(idx).get('draggable');
+            if (draggable) {
+                el.on('drag', function () {
+                    if (forceLayout) {
+                        forceLayout.warmUp();
+                        !this._layouting
+                            && this._startForceLayoutIteration(forceLayout, layoutAnimation);
+                        forceLayout.setFixed(idx);
+                        // Write position back to layout
+                        data.setItemLayout(idx, el.position);
+                    }
+                }, this).on('dragend', function () {
+                    if (forceLayout) {
+                        forceLayout.setUnfixed(idx);
+                    }
+                }, this);
+            }
+            el.setDraggable(draggable && forceLayout);
+
+            el.off('mouseover', el.__focusNodeAdjacency);
+            el.off('mouseout', el.__unfocusNodeAdjacency);
+
+            if (itemModel.get('focusNodeAdjacency')) {
+                el.on('mouseover', el.__focusNodeAdjacency = function () {
+                    api.dispatchAction({
+                        type: 'focusNodeAdjacency',
+                        seriesId: seriesModel.id,
+                        dataIndex: el.dataIndex
+                    });
+                });
+                el.on('mouseout', el.__unfocusNodeAdjacency = function () {
+                    api.dispatchAction({
+                        type: 'unfocusNodeAdjacency',
+                        seriesId: seriesModel.id
+                    });
+                });
+
+            }
+
+        }, this);
+
+        data.graph.eachEdge(function (edge) {
+            var el = edge.getGraphicEl();
+
+            el.off('mouseover', el.__focusNodeAdjacency);
+            el.off('mouseout', el.__unfocusNodeAdjacency);
+
+            if (edge.getModel().get('focusNodeAdjacency')) {
+                el.on('mouseover', el.__focusNodeAdjacency = function () {
+                    api.dispatchAction({
+                        type: 'focusNodeAdjacency',
+                        seriesId: seriesModel.id,
+                        edgeDataIndex: edge.dataIndex
+                    });
+                });
+                el.on('mouseout', el.__unfocusNodeAdjacency = function () {
+                    api.dispatchAction({
+                        type: 'unfocusNodeAdjacency',
+                        seriesId: seriesModel.id
+                    });
+                });
+            }
+        });
+
+        var circularRotateLabel = seriesModel.get('layout') === 'circular'
+            && seriesModel.get('circular.rotateLabel');
+        var cx = data.getLayout('cx');
+        var cy = data.getLayout('cy');
+        data.eachItemGraphicEl(function (el, idx) {
+            var symbolPath = el.getSymbolPath();
+            if (circularRotateLabel) {
+                var pos = data.getItemLayout(idx);
+                var rad = Math.atan2(pos[1] - cy, pos[0] - cx);
+                if (rad < 0) {
+                    rad = Math.PI * 2 + rad;
+                }
+                var isLeft = pos[0] < cx;
+                if (isLeft) {
+                    rad = rad - Math.PI;
+                }
+                var textPosition = isLeft ? 'left' : 'right';
+                symbolPath.setStyle({
+                    textRotation: -rad,
+                    textPosition: textPosition,
+                    textOrigin: 'center'
+                });
+                symbolPath.hoverStyle && (symbolPath.hoverStyle.textPosition = textPosition);
+            }
+            else {
+                symbolPath.setStyle({
+                    textRotation: 0
+                });
+            }
+        });
+
+        this._firstRender = false;
+    },
+
+    dispose: function () {
+        this._controller && this._controller.dispose();
+        this._controllerHost = {};
+    },
+
+    focusNodeAdjacency: function (seriesModel, ecModel, api, payload) {
+        var data = this._model.getData();
+        var graph = data.graph;
+        var dataIndex = payload.dataIndex;
+        var edgeDataIndex = payload.edgeDataIndex;
+
+        var node = graph.getNodeByIndex(dataIndex);
+        var edge = graph.getEdgeByIndex(edgeDataIndex);
+
+        if (!node && !edge) {
+            return;
+        }
+
+        graph.eachNode(function (node) {
+            fadeOutItem(node, nodeOpacityPath, 0.1);
+        });
+        graph.eachEdge(function (edge) {
+            fadeOutItem(edge, lineOpacityPath, 0.1);
+        });
+
+        if (node) {
+            fadeInItem(node, nodeOpacityPath);
+            each$1(node.edges, function (adjacentEdge) {
+                if (adjacentEdge.dataIndex < 0) {
+                    return;
+                }
+                fadeInItem(adjacentEdge, lineOpacityPath);
+                fadeInItem(adjacentEdge.node1, nodeOpacityPath);
+                fadeInItem(adjacentEdge.node2, nodeOpacityPath);
+            });
+        }
+        if (edge) {
+            fadeInItem(edge, lineOpacityPath);
+            fadeInItem(edge.node1, nodeOpacityPath);
+            fadeInItem(edge.node2, nodeOpacityPath);
+        }
+    },
+
+    unfocusNodeAdjacency: function (seriesModel, ecModel, api, payload) {
+        var graph = this._model.getData().graph;
+
+        graph.eachNode(function (node) {
+            fadeOutItem(node, nodeOpacityPath);
+        });
+        graph.eachEdge(function (edge) {
+            fadeOutItem(edge, lineOpacityPath);
+        });
+    },
+
+    _startForceLayoutIteration: function (forceLayout, layoutAnimation) {
+        var self = this;
+        (function step() {
+            forceLayout.step(function (stopped) {
+                self.updateLayout(self._model);
+                (self._layouting = !stopped) && (
+                    layoutAnimation
+                        ? (self._layoutTimeout = setTimeout(step, 16))
+                        : step()
+                );
+            });
+        })();
+    },
+
+    _updateController: function (seriesModel, ecModel, api) {
+        var controller = this._controller;
+        var controllerHost = this._controllerHost;
+        var group = this.group;
+
+        controller.setPointerChecker(function (e, x, y) {
+            var rect = group.getBoundingRect();
+            rect.applyTransform(group.transform);
+            return rect.contain(x, y)
+                && !onIrrelevantElement(e, api, seriesModel);
+        });
+
+        if (seriesModel.coordinateSystem.type !== 'view') {
+            controller.disable();
+            return;
+        }
+        controller.enable(seriesModel.get('roam'));
+        controllerHost.zoomLimit = seriesModel.get('scaleLimit');
+        controllerHost.zoom = seriesModel.coordinateSystem.getZoom();
+
+        controller
+            .off('pan')
+            .off('zoom')
+            .on('pan', function (dx, dy) {
+                updateViewOnPan(controllerHost, dx, dy);
+                api.dispatchAction({
+                    seriesId: seriesModel.id,
+                    type: 'graphRoam',
+                    dx: dx,
+                    dy: dy
+                });
+            })
+            .on('zoom', function (zoom, mouseX, mouseY) {
+                updateViewOnZoom(controllerHost, zoom, mouseX, mouseY);
+                api.dispatchAction({
+                    seriesId: seriesModel.id,
+                    type: 'graphRoam',
+                    zoom:  zoom,
+                    originX: mouseX,
+                    originY: mouseY
+                });
+                this._updateNodeAndLinkScale();
+                adjustEdge(seriesModel.getGraph(), this._getNodeGlobalScale(seriesModel));
+                this._lineDraw.updateLayout();
+            }, this);
+    },
+
+    _updateNodeAndLinkScale: function () {
+        var seriesModel = this._model;
+        var data = seriesModel.getData();
+
+        var nodeScale = this._getNodeGlobalScale(seriesModel);
+        var invScale = [nodeScale, nodeScale];
+
+        data.eachItemGraphicEl(function (el, idx) {
+            el.attr('scale', invScale);
+        });
+    },
+
+    _getNodeGlobalScale: function (seriesModel) {
+        var coordSys = seriesModel.coordinateSystem;
+        if (coordSys.type !== 'view') {
+            return 1;
+        }
+
+        var nodeScaleRatio = this._nodeScaleRatio;
+
+        var groupScale = coordSys.scale;
+        var groupZoom = (groupScale && groupScale[0]) || 1;
+        // Scale node when zoom changes
+        var roamZoom = coordSys.getZoom();
+        var nodeScale = (roamZoom - 1) * nodeScaleRatio + 1;
+
+        return nodeScale / groupZoom;
+    },
+
+    updateLayout: function (seriesModel) {
+        adjustEdge(seriesModel.getGraph(), this._getNodeGlobalScale(seriesModel));
+
+        this._symbolDraw.updateLayout();
+        this._lineDraw.updateLayout();
+    },
+
+    remove: function (ecModel, api) {
+        this._symbolDraw && this._symbolDraw.remove();
+        this._lineDraw && this._lineDraw.remove();
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var actionInfo = {
+    type: 'graphRoam',
+    event: 'graphRoam',
+    update: 'none'
+};
+
+/**
+ * @payload
+ * @property {string} name Series name
+ * @property {number} [dx]
+ * @property {number} [dy]
+ * @property {number} [zoom]
+ * @property {number} [originX]
+ * @property {number} [originY]
+ */
+registerAction(actionInfo, function (payload, ecModel) {
+    ecModel.eachComponent({mainType: 'series', query: payload}, function (seriesModel) {
+        var coordSys = seriesModel.coordinateSystem;
+
+        var res = updateCenterAndZoom(coordSys, payload);
+
+        seriesModel.setCenter
+            && seriesModel.setCenter(res.center);
+
+        seriesModel.setZoom
+            && seriesModel.setZoom(res.zoom);
+    });
+});
+
+
+/**
+ * @payload
+ * @property {number} [seriesIndex]
+ * @property {string} [seriesId]
+ * @property {string} [seriesName]
+ * @property {number} [dataIndex]
+ */
+registerAction({
+    type: 'focusNodeAdjacency',
+    event: 'focusNodeAdjacency',
+    update: 'series.graph:focusNodeAdjacency'
+}, function () {});
+
+/**
+ * @payload
+ * @property {number} [seriesIndex]
+ * @property {string} [seriesId]
+ * @property {string} [seriesName]
+ */
+registerAction({
+    type: 'unfocusNodeAdjacency',
+    event: 'unfocusNodeAdjacency',
+    update: 'series.graph:unfocusNodeAdjacency'
+}, function () {});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+var categoryFilter = function (ecModel) {
+    var legendModels = ecModel.findComponents({
+        mainType: 'legend'
+    });
+    if (!legendModels || !legendModels.length) {
+        return;
+    }
+    ecModel.eachSeriesByType('graph', function (graphSeries) {
+        var categoriesData = graphSeries.getCategoriesData();
+        var graph = graphSeries.getGraph();
+        var data = graph.data;
+
+        var categoryNames = categoriesData.mapArray(categoriesData.getName);
+
+        data.filterSelf(function (idx) {
+            var model = data.getItemModel(idx);
+            var category = model.getShallow('category');
+            if (category != null) {
+                if (typeof category === 'number') {
+                    category = categoryNames[category];
+                }
+                // If in any legend component the status is not selected.
+                for (var i = 0; i < legendModels.length; i++) {
+                    if (!legendModels[i].isSelected(category)) {
+                        return false;
+                    }
+                }
+            }
+            return true;
+        });
+    }, this);
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+var categoryVisual = function (ecModel) {
+
+    var paletteScope = {};
+    ecModel.eachSeriesByType('graph', function (seriesModel) {
+        var categoriesData = seriesModel.getCategoriesData();
+        var data = seriesModel.getData();
+
+        var categoryNameIdxMap = {};
+
+        categoriesData.each(function (idx) {
+            var name = categoriesData.getName(idx);
+            // Add prefix to avoid conflict with Object.prototype.
+            categoryNameIdxMap['ec-' + name] = idx;
+
+            var itemModel = categoriesData.getItemModel(idx);
+            var color = itemModel.get('itemStyle.color')
+                || seriesModel.getColorFromPalette(name, paletteScope);
+            categoriesData.setItemVisual(idx, 'color', color);
+        });
+
+        // Assign category color to visual
+        if (categoriesData.count()) {
+            data.each(function (idx) {
+                var model = data.getItemModel(idx);
+                var category = model.getShallow('category');
+                if (category != null) {
+                    if (typeof category === 'string') {
+                        category = categoryNameIdxMap['ec-' + category];
+                    }
+                    if (!data.getItemVisual(idx, 'color', true)) {
+                        data.setItemVisual(
+                            idx, 'color',
+                            categoriesData.getItemVisual(category, 'color')
+                        );
+                    }
+                }
+            });
+        }
+    });
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+function normalize$1(a) {
+    if (!(a instanceof Array)) {
+        a = [a, a];
+    }
+    return a;
+}
+
+var edgeVisual = function (ecModel) {
+    ecModel.eachSeriesByType('graph', function (seriesModel) {
+        var graph = seriesModel.getGraph();
+        var edgeData = seriesModel.getEdgeData();
+        var symbolType = normalize$1(seriesModel.get('edgeSymbol'));
+        var symbolSize = normalize$1(seriesModel.get('edgeSymbolSize'));
+
+        var colorQuery = 'lineStyle.color'.split('.');
+        var opacityQuery = 'lineStyle.opacity'.split('.');
+
+        edgeData.setVisual('fromSymbol', symbolType && symbolType[0]);
+        edgeData.setVisual('toSymbol', symbolType && symbolType[1]);
+        edgeData.setVisual('fromSymbolSize', symbolSize && symbolSize[0]);
+        edgeData.setVisual('toSymbolSize', symbolSize && symbolSize[1]);
+        edgeData.setVisual('color', seriesModel.get(colorQuery));
+        edgeData.setVisual('opacity', seriesModel.get(opacityQuery));
+
+        edgeData.each(function (idx) {
+            var itemModel = edgeData.getItemModel(idx);
+            var edge = graph.getEdgeByIndex(idx);
+            var symbolType = normalize$1(itemModel.getShallow('symbol', true));
+            var symbolSize = normalize$1(itemModel.getShallow('symbolSize', true));
+            // Edge visual must after node visual
+            var color = itemModel.get(colorQuery);
+            var opacity = itemModel.get(opacityQuery);
+            switch (color) {
+                case 'source':
+                    color = edge.node1.getVisual('color');
+                    break;
+                case 'target':
+                    color = edge.node2.getVisual('color');
+                    break;
+            }
+
+            symbolType[0] && edge.setVisual('fromSymbol', symbolType[0]);
+            symbolType[1] && edge.setVisual('toSymbol', symbolType[1]);
+            symbolSize[0] && edge.setVisual('fromSymbolSize', symbolSize[0]);
+            symbolSize[1] && edge.setVisual('toSymbolSize', symbolSize[1]);
+
+            edge.setVisual('color', color);
+            edge.setVisual('opacity', opacity);
+        });
+    });
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+function simpleLayout$1(seriesModel) {
+    var coordSys = seriesModel.coordinateSystem;
+    if (coordSys && coordSys.type !== 'view') {
+        return;
+    }
+    var graph = seriesModel.getGraph();
+
+    graph.eachNode(function (node) {
+        var model = node.getModel();
+        node.setLayout([+model.get('x'), +model.get('y')]);
+    });
+
+    simpleLayoutEdge(graph);
+}
+
+function simpleLayoutEdge(graph) {
+    graph.eachEdge(function (edge) {
+        var curveness = edge.getModel().get('lineStyle.curveness') || 0;
+        var p1 = clone$1(edge.node1.getLayout());
+        var p2 = clone$1(edge.node2.getLayout());
+        var points = [p1, p2];
+        if (+curveness) {
+            points.push([
+                (p1[0] + p2[0]) / 2 - (p1[1] - p2[1]) * curveness,
+                (p1[1] + p2[1]) / 2 - (p2[0] - p1[0]) * curveness
+            ]);
+        }
+        edge.setLayout(points);
+    });
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var simpleLayout = function (ecModel, api) {
+    ecModel.eachSeriesByType('graph', function (seriesModel) {
+        var layout = seriesModel.get('layout');
+        var coordSys = seriesModel.coordinateSystem;
+        if (coordSys && coordSys.type !== 'view') {
+            var data = seriesModel.getData();
+
+            var dimensions = [];
+            each$1(coordSys.dimensions, function (coordDim) {
+                dimensions = dimensions.concat(data.mapDimension(coordDim, true));
+            });
+
+            for (var dataIndex = 0; dataIndex < data.count(); dataIndex++) {
+                var value = [];
+                var hasValue = false;
+                for (var i = 0; i < dimensions.length; i++) {
+                    var val = data.get(dimensions[i], dataIndex);
+                    if (!isNaN(val)) {
+                        hasValue = true;
+                    }
+                    value.push(val);
+                }
+                if (hasValue) {
+                    data.setItemLayout(dataIndex, coordSys.dataToPoint(value));
+                }
+                else {
+                    // Also {Array.<number>}, not undefined to avoid if...else... statement
+                    data.setItemLayout(dataIndex, [NaN, NaN]);
+                }
+            }
+
+            simpleLayoutEdge(data.graph);
+        }
+        else if (!layout || layout === 'none') {
+            simpleLayout$1(seriesModel);
+        }
+    });
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+function circularLayout$1(seriesModel) {
+    var coordSys = seriesModel.coordinateSystem;
+    if (coordSys && coordSys.type !== 'view') {
+        return;
+    }
+
+    var rect = coordSys.getBoundingRect();
+
+    var nodeData = seriesModel.getData();
+    var graph = nodeData.graph;
+
+    var angle = 0;
+    var sum = nodeData.getSum('value');
+    var unitAngle = Math.PI * 2 / (sum || nodeData.count());
+
+    var cx = rect.width / 2 + rect.x;
+    var cy = rect.height / 2 + rect.y;
+
+    var r = Math.min(rect.width, rect.height) / 2;
+
+    graph.eachNode(function (node) {
+        var value = node.getValue('value');
+
+        angle += unitAngle * (sum ? value : 1) / 2;
+
+        node.setLayout([
+            r * Math.cos(angle) + cx,
+            r * Math.sin(angle) + cy
+        ]);
+
+        angle += unitAngle * (sum ? value : 1) / 2;
+    });
+
+    nodeData.setLayout({
+        cx: cx,
+        cy: cy
+    });
+
+    graph.eachEdge(function (edge) {
+        var curveness = edge.getModel().get('lineStyle.curveness') || 0;
+        var p1 = clone$1(edge.node1.getLayout());
+        var p2 = clone$1(edge.node2.getLayout());
+        var cp1;
+        var x12 = (p1[0] + p2[0]) / 2;
+        var y12 = (p1[1] + p2[1]) / 2;
+        if (+curveness) {
+            curveness *= 3;
+            cp1 = [
+                cx * curveness + x12 * (1 - curveness),
+                cy * curveness + y12 * (1 - curveness)
+            ];
+        }
+        edge.setLayout([p1, p2, cp1]);
+    });
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var circularLayout = function (ecModel) {
+    ecModel.eachSeriesByType('graph', function (seriesModel) {
+        if (seriesModel.get('layout') === 'circular') {
+            circularLayout$1(seriesModel);
+        }
+    });
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/*
+* The layout implementation references to d3.js. The use of
+* the source code of this file is also subject to the terms
+* and consitions of its license (BSD-3Clause, see
+* <echarts/src/licenses/LICENSE-d3>).
+*/
+
+var scaleAndAdd$2 = scaleAndAdd;
+
+// function adjacentNode(n, e) {
+//     return e.n1 === n ? e.n2 : e.n1;
+// }
+
+function forceLayout$1(nodes, edges, opts) {
+    var rect = opts.rect;
+    var width = rect.width;
+    var height = rect.height;
+    var center = [rect.x + width / 2, rect.y + height / 2];
+    // var scale = opts.scale || 1;
+    var gravity = opts.gravity == null ? 0.1 : opts.gravity;
+
+    // for (var i = 0; i < edges.length; i++) {
+    //     var e = edges[i];
+    //     var n1 = e.n1;
+    //     var n2 = e.n2;
+    //     n1.edges = n1.edges || [];
+    //     n2.edges = n2.edges || [];
+    //     n1.edges.push(e);
+    //     n2.edges.push(e);
+    // }
+    // Init position
+    for (var i = 0; i < nodes.length; i++) {
+        var n = nodes[i];
+        if (!n.p) {
+            // Use the position from first adjecent node with defined position
+            // Or use a random position
+            // From d3
+            // if (n.edges) {
+            //     var j = -1;
+            //     while (++j < n.edges.length) {
+            //         var e = n.edges[j];
+            //         var other = adjacentNode(n, e);
+            //         if (other.p) {
+            //             n.p = vec2.clone(other.p);
+            //             break;
+            //         }
+            //     }
+            // }
+            // if (!n.p) {
+                n.p = create(
+                    width * (Math.random() - 0.5) + center[0],
+                    height * (Math.random() - 0.5) + center[1]
+                );
+            // }
+        }
+        n.pp = clone$1(n.p);
+        n.edges = null;
+    }
+
+    // Formula in 'Graph Drawing by Force-directed Placement'
+    // var k = scale * Math.sqrt(width * height / nodes.length);
+    // var k2 = k * k;
+
+    var friction = 0.6;
+
+    return {
+        warmUp: function () {
+            friction = 0.5;
+        },
+
+        setFixed: function (idx) {
+            nodes[idx].fixed = true;
+        },
+
+        setUnfixed: function (idx) {
+            nodes[idx].fixed = false;
+        },
+
+        step: function (cb) {
+            var v12 = [];
+            var nLen = nodes.length;
+            for (var i = 0; i < edges.length; i++) {
+                var e = edges[i];
+                var n1 = e.n1;
+                var n2 = e.n2;
+
+                sub(v12, n2.p, n1.p);
+                var d = len(v12) - e.d;
+                var w = n2.w / (n1.w + n2.w);
+
+                if (isNaN(w)) {
+                    w = 0;
+                }
+
+                normalize(v12, v12);
+
+                !n1.fixed && scaleAndAdd$2(n1.p, n1.p, v12, w * d * friction);
+                !n2.fixed && scaleAndAdd$2(n2.p, n2.p, v12, -(1 - w) * d * friction);
+            }
+            // Gravity
+            for (var i = 0; i < nLen; i++) {
+                var n = nodes[i];
+                if (!n.fixed) {
+                    sub(v12, center, n.p);
+                    // var d = vec2.len(v12);
+                    // vec2.scale(v12, v12, 1 / d);
+                    // var gravityFactor = gravity;
+                    scaleAndAdd$2(n.p, n.p, v12, gravity * friction);
+                }
+            }
+
+            // Repulsive
+            // PENDING
+            for (var i = 0; i < nLen; i++) {
+                var n1 = nodes[i];
+                for (var j = i + 1; j < nLen; j++) {
+                    var n2 = nodes[j];
+                    sub(v12, n2.p, n1.p);
+                    var d = len(v12);
+                    if (d === 0) {
+                        // Random repulse
+                        set(v12, Math.random() - 0.5, Math.random() - 0.5);
+                        d = 1;
+                    }
+                    var repFact = (n1.rep + n2.rep) / d / d;
+                    !n1.fixed && scaleAndAdd$2(n1.pp, n1.pp, v12, repFact);
+                    !n2.fixed && scaleAndAdd$2(n2.pp, n2.pp, v12, -repFact);
+                }
+            }
+            var v = [];
+            for (var i = 0; i < nLen; i++) {
+                var n = nodes[i];
+                if (!n.fixed) {
+                    sub(v, n.p, n.pp);
+                    scaleAndAdd$2(n.p, n.p, v, friction);
+                    copy(n.pp, n.p);
+                }
+            }
+
+            friction = friction * 0.992;
+
+            cb && cb(nodes, edges, friction < 0.01);
+        }
+    };
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var forceLayout = function (ecModel) {
+    ecModel.eachSeriesByType('graph', function (graphSeries) {
+        var coordSys = graphSeries.coordinateSystem;
+        if (coordSys && coordSys.type !== 'view') {
+            return;
+        }
+        if (graphSeries.get('layout') === 'force') {
+            var preservedPoints = graphSeries.preservedPoints || {};
+            var graph = graphSeries.getGraph();
+            var nodeData = graph.data;
+            var edgeData = graph.edgeData;
+            var forceModel = graphSeries.getModel('force');
+            var initLayout = forceModel.get('initLayout');
+            if (graphSeries.preservedPoints) {
+                nodeData.each(function (idx) {
+                    var id = nodeData.getId(idx);
+                    nodeData.setItemLayout(idx, preservedPoints[id] || [NaN, NaN]);
+                });
+            }
+            else if (!initLayout || initLayout === 'none') {
+                simpleLayout$1(graphSeries);
+            }
+            else if (initLayout === 'circular') {
+                circularLayout$1(graphSeries);
+            }
+
+            var nodeDataExtent = nodeData.getDataExtent('value');
+            var edgeDataExtent = edgeData.getDataExtent('value');
+            // var edgeDataExtent = edgeData.getDataExtent('value');
+            var repulsion = forceModel.get('repulsion');
+            var edgeLength = forceModel.get('edgeLength');
+            if (!isArray(repulsion)) {
+                repulsion = [repulsion, repulsion];
+            }
+            if (!isArray(edgeLength)) {
+                edgeLength = [edgeLength, edgeLength];
+            }
+            // Larger value has smaller length
+            edgeLength = [edgeLength[1], edgeLength[0]];
+
+            var nodes = nodeData.mapArray('value', function (value, idx) {
+                var point = nodeData.getItemLayout(idx);
+                var rep = linearMap(value, nodeDataExtent, repulsion);
+                if (isNaN(rep)) {
+                    rep = (repulsion[0] + repulsion[1]) / 2;
+                }
+                return {
+                    w: rep,
+                    rep: rep,
+                    fixed: nodeData.getItemModel(idx).get('fixed'),
+                    p: (!point || isNaN(point[0]) || isNaN(point[1])) ? null : point
+                };
+            });
+            var edges = edgeData.mapArray('value', function (value, idx) {
+                var edge = graph.getEdgeByIndex(idx);
+                var d = linearMap(value, edgeDataExtent, edgeLength);
+                if (isNaN(d)) {
+                    d = (edgeLength[0] + edgeLength[1]) / 2;
+                }
+                return {
+                    n1: nodes[edge.node1.dataIndex],
+                    n2: nodes[edge.node2.dataIndex],
+                    d: d,
+                    curveness: edge.getModel().get('lineStyle.curveness') || 0
+                };
+            });
+
+            var coordSys = graphSeries.coordinateSystem;
+            var rect = coordSys.getBoundingRect();
+            var forceInstance = forceLayout$1(nodes, edges, {
+                rect: rect,
+                gravity: forceModel.get('gravity')
+            });
+            var oldStep = forceInstance.step;
+            forceInstance.step = function (cb) {
+                for (var i = 0, l = nodes.length; i < l; i++) {
+                    if (nodes[i].fixed) {
+                        // Write back to layout instance
+                        copy(nodes[i].p, graph.getNodeByIndex(i).getLayout());
+                    }
+                }
+                oldStep(function (nodes, edges, stopped) {
+                    for (var i = 0, l = nodes.length; i < l; i++) {
+                        if (!nodes[i].fixed) {
+                            graph.getNodeByIndex(i).setLayout(nodes[i].p);
+                        }
+                        preservedPoints[nodeData.getId(i)] = nodes[i].p;
+                    }
+                    for (var i = 0, l = edges.length; i < l; i++) {
+                        var e = edges[i];
+                        var edge = graph.getEdgeByIndex(i);
+                        var p1 = e.n1.p;
+                        var p2 = e.n2.p;
+                        var points = edge.getLayout();
+                        points = points ? points.slice() : [];
+                        points[0] = points[0] || [];
+                        points[1] = points[1] || [];
+                        copy(points[0], p1);
+                        copy(points[1], p2);
+                        if (+e.curveness) {
+                            points[2] = [
+                                (p1[0] + p2[0]) / 2 - (p1[1] - p2[1]) * e.curveness,
+                                (p1[1] + p2[1]) / 2 - (p2[0] - p1[0]) * e.curveness
+                            ];
+                        }
+                        edge.setLayout(points);
+                    }
+                    // Update layout
+
+                    cb && cb(stopped);
+                });
+            };
+            graphSeries.forceLayout = forceInstance;
+            graphSeries.preservedPoints = preservedPoints;
+
+            // Step to get the layout
+            forceInstance.step();
+        }
+        else {
+            // Remove prev injected forceLayout instance
+            graphSeries.forceLayout = null;
+        }
+    });
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// FIXME Where to create the simple view coordinate system
+function getViewRect$1(seriesModel, api, aspect) {
+    var option = seriesModel.getBoxLayoutParams();
+    option.aspect = aspect;
+    return getLayoutRect(option, {
+        width: api.getWidth(),
+        height: api.getHeight()
+    });
+}
+
+var createView = function (ecModel, api) {
+    var viewList = [];
+    ecModel.eachSeriesByType('graph', function (seriesModel) {
+        var coordSysType = seriesModel.get('coordinateSystem');
+        if (!coordSysType || coordSysType === 'view') {
+
+            var data = seriesModel.getData();
+            var positions = data.mapArray(function (idx) {
+                var itemModel = data.getItemModel(idx);
+                return [+itemModel.get('x'), +itemModel.get('y')];
+            });
+
+            var min = [];
+            var max = [];
+
+            fromPoints(positions, min, max);
+
+            // If width or height is 0
+            if (max[0] - min[0] === 0) {
+                max[0] += 1;
+                min[0] -= 1;
+            }
+            if (max[1] - min[1] === 0) {
+                max[1] += 1;
+                min[1] -= 1;
+            }
+            var aspect = (max[0] - min[0]) / (max[1] - min[1]);
+            // FIXME If get view rect after data processed?
+            var viewRect = getViewRect$1(seriesModel, api, aspect);
+            // Position may be NaN, use view rect instead
+            if (isNaN(aspect)) {
+                min = [viewRect.x, viewRect.y];
+                max = [viewRect.x + viewRect.width, viewRect.y + viewRect.height];
+            }
+
+            var bbWidth = max[0] - min[0];
+            var bbHeight = max[1] - min[1];
+
+            var viewWidth = viewRect.width;
+            var viewHeight = viewRect.height;
+
+            var viewCoordSys = seriesModel.coordinateSystem = new View();
+            viewCoordSys.zoomLimit = seriesModel.get('scaleLimit');
+
+            viewCoordSys.setBoundingRect(
+                min[0], min[1], bbWidth, bbHeight
+            );
+            viewCoordSys.setViewRect(
+                viewRect.x, viewRect.y, viewWidth, viewHeight
+            );
+
+            // Update roam info
+            viewCoordSys.setCenter(seriesModel.get('center'));
+            viewCoordSys.setZoom(seriesModel.get('zoom'));
+
+            viewList.push(viewCoordSys);
+        }
+    });
+
+    return viewList;
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+registerProcessor(categoryFilter);
+
+registerVisual(visualSymbol('graph', 'circle', null));
+registerVisual(categoryVisual);
+registerVisual(edgeVisual);
+
+registerLayout(simpleLayout);
+registerLayout(circularLayout);
+registerLayout(forceLayout);
+
+// Graph view coordinate system
+registerCoordinateSystem('graphView', {
+    create: createView
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var GaugeSeries = SeriesModel.extend({
+
+    type: 'series.gauge',
+
+    getInitialData: function (option, ecModel) {
+        var dataOpt = option.data || [];
+        if (!isArray(dataOpt)) {
+            dataOpt = [dataOpt];
+        }
+        option.data = dataOpt;
+        return createListSimply(this, ['value']);
+    },
+
+    defaultOption: {
+        zlevel: 0,
+        z: 2,
+        // é»˜è®¤å…¨å±€å±…ä¸
+        center: ['50%', '50%'],
+        legendHoverLink: true,
+        radius: '75%',
+        startAngle: 225,
+        endAngle: -45,
+        clockwise: true,
+        // æœ€å°å€¼
+        min: 0,
+        // æœ€å¤§å€¼
+        max: 100,
+        // åˆ†å‰²æ®µæ•°ï¼Œé»˜è®¤ä¸º10
+        splitNumber: 10,
+        // åæ ‡è½´çº¿
+        axisLine: {
+            // é»˜è®¤æ˜¾ç¤ºï¼Œå±žæ€§showæŽ§åˆ¶æ˜¾ç¤ºä¸Žå¦
+            show: true,
+            lineStyle: {       // å±žæ€§lineStyleæŽ§åˆ¶çº¿æ¡æ ·å¼
+                color: [[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']],
+                width: 30
+            }
+        },
+        // åˆ†éš”çº¿
+        splitLine: {
+            // é»˜è®¤æ˜¾ç¤ºï¼Œå±žæ€§showæŽ§åˆ¶æ˜¾ç¤ºä¸Žå¦
+            show: true,
+            // å±žæ€§lengthæŽ§åˆ¶çº¿é•¿
+            length: 30,
+            // å±žæ€§lineStyleï¼ˆè¯¦è§lineStyleï¼‰æŽ§åˆ¶çº¿æ¡æ ·å¼
+            lineStyle: {
+                color: '#eee',
+                width: 2,
+                type: 'solid'
+            }
+        },
+        // åæ ‡è½´å°æ ‡è®°
+        axisTick: {
+            // å±žæ€§showæŽ§åˆ¶æ˜¾ç¤ºä¸Žå¦ï¼Œé»˜è®¤ä¸æ˜¾ç¤º
+            show: true,
+            // æ¯ä»½splitç»†åˆ†å¤šå°‘æ®µ
+            splitNumber: 5,
+            // å±žæ€§lengthæŽ§åˆ¶çº¿é•¿
+            length: 8,
+            // å±žæ€§lineStyleæŽ§åˆ¶çº¿æ¡æ ·å¼
+            lineStyle: {
+                color: '#eee',
+                width: 1,
+                type: 'solid'
+            }
+        },
+        axisLabel: {
+            show: true,
+            distance: 5,
+            // formatter: null,
+            color: 'auto'
+        },
+        pointer: {
+            show: true,
+            length: '80%',
+            width: 8
+        },
+        itemStyle: {
+            color: 'auto'
+        },
+        title: {
+            show: true,
+            // x, yï¼Œå•ä½px
+            offsetCenter: [0, '-40%'],
+            // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
+            color: '#333',
+            fontSize: 15
+        },
+        detail: {
+            show: true,
+            backgroundColor: 'rgba(0,0,0,0)',
+            borderWidth: 0,
+            borderColor: '#ccc',
+            width: 100,
+            height: null, // self-adaption
+            padding: [5, 10],
+            // x, yï¼Œå•ä½px
+            offsetCenter: [0, '40%'],
+            // formatter: null,
+            // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
+            color: 'auto',
+            fontSize: 30
+        }
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var PointerPath = Path.extend({
+
+    type: 'echartsGaugePointer',
+
+    shape: {
+        angle: 0,
+
+        width: 10,
+
+        r: 10,
+
+        x: 0,
+
+        y: 0
+    },
+
+    buildPath: function (ctx, shape) {
+        var mathCos = Math.cos;
+        var mathSin = Math.sin;
+
+        var r = shape.r;
+        var width = shape.width;
+        var angle = shape.angle;
+        var x = shape.x - mathCos(angle) * width * (width >= r / 3 ? 1 : 2);
+        var y = shape.y - mathSin(angle) * width * (width >= r / 3 ? 1 : 2);
+
+        angle = shape.angle - Math.PI / 2;
+        ctx.moveTo(x, y);
+        ctx.lineTo(
+            shape.x + mathCos(angle) * width,
+            shape.y + mathSin(angle) * width
+        );
+        ctx.lineTo(
+            shape.x + mathCos(shape.angle) * r,
+            shape.y + mathSin(shape.angle) * r
+        );
+        ctx.lineTo(
+            shape.x - mathCos(angle) * width,
+            shape.y - mathSin(angle) * width
+        );
+        ctx.lineTo(x, y);
+        return;
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+function parsePosition(seriesModel, api) {
+    var center = seriesModel.get('center');
+    var width = api.getWidth();
+    var height = api.getHeight();
+    var size = Math.min(width, height);
+    var cx = parsePercent$1(center[0], api.getWidth());
+    var cy = parsePercent$1(center[1], api.getHeight());
+    var r = parsePercent$1(seriesModel.get('radius'), size / 2);
+
+    return {
+        cx: cx,
+        cy: cy,
+        r: r
+    };
+}
+
+function formatLabel(label, labelFormatter) {
+    if (labelFormatter) {
+        if (typeof labelFormatter === 'string') {
+            label = labelFormatter.replace('{value}', label != null ? label : '');
+        }
+        else if (typeof labelFormatter === 'function') {
+            label = labelFormatter(label);
+        }
+    }
+
+    return label;
+}
+
+var PI2$5 = Math.PI * 2;
+
+var GaugeView = Chart.extend({
+
+    type: 'gauge',
+
+    render: function (seriesModel, ecModel, api) {
+
+        this.group.removeAll();
+
+        var colorList = seriesModel.get('axisLine.lineStyle.color');
+        var posInfo = parsePosition(seriesModel, api);
+
+        this._renderMain(
+            seriesModel, ecModel, api, colorList, posInfo
+        );
+    },
+
+    dispose: function () {},
+
+    _renderMain: function (seriesModel, ecModel, api, colorList, posInfo) {
+        var group = this.group;
+
+        var axisLineModel = seriesModel.getModel('axisLine');
+        var lineStyleModel = axisLineModel.getModel('lineStyle');
+
+        var clockwise = seriesModel.get('clockwise');
+        var startAngle = -seriesModel.get('startAngle') / 180 * Math.PI;
+        var endAngle = -seriesModel.get('endAngle') / 180 * Math.PI;
+
+        var angleRangeSpan = (endAngle - startAngle) % PI2$5;
+
+        var prevEndAngle = startAngle;
+        var axisLineWidth = lineStyleModel.get('width');
+
+        for (var i = 0; i < colorList.length; i++) {
+            // Clamp
+            var percent = Math.min(Math.max(colorList[i][0], 0), 1);
+            var endAngle = startAngle + angleRangeSpan * percent;
+            var sector = new Sector({
+                shape: {
+                    startAngle: prevEndAngle,
+                    endAngle: endAngle,
+                    cx: posInfo.cx,
+                    cy: posInfo.cy,
+                    clockwise: clockwise,
+                    r0: posInfo.r - axisLineWidth,
+                    r: posInfo.r
+                },
+                silent: true
+            });
+
+            sector.setStyle({
+                fill: colorList[i][1]
+            });
+
+            sector.setStyle(lineStyleModel.getLineStyle(
+                // Because we use sector to simulate arc
+                // so the properties for stroking are useless
+                ['color', 'borderWidth', 'borderColor']
+            ));
+
+            group.add(sector);
+
+            prevEndAngle = endAngle;
+        }
+
+        var getColor = function (percent) {
+            // Less than 0
+            if (percent <= 0) {
+                return colorList[0][1];
+            }
+            for (var i = 0; i < colorList.length; i++) {
+                if (colorList[i][0] >= percent
+                    && (i === 0 ? 0 : colorList[i - 1][0]) < percent
+                ) {
+                    return colorList[i][1];
+                }
+            }
+            // More than 1
+            return colorList[i - 1][1];
+        };
+
+        if (!clockwise) {
+            var tmp = startAngle;
+            startAngle = endAngle;
+            endAngle = tmp;
+        }
+
+        this._renderTicks(
+            seriesModel, ecModel, api, getColor, posInfo,
+            startAngle, endAngle, clockwise
+        );
+
+        this._renderPointer(
+            seriesModel, ecModel, api, getColor, posInfo,
+            startAngle, endAngle, clockwise
+        );
+
+        this._renderTitle(
+            seriesModel, ecModel, api, getColor, posInfo
+        );
+        this._renderDetail(
+            seriesModel, ecModel, api, getColor, posInfo
+        );
+    },
+
+    _renderTicks: function (
+        seriesModel, ecModel, api, getColor, posInfo,
+        startAngle, endAngle, clockwise
+    ) {
+        var group = this.group;
+        var cx = posInfo.cx;
+        var cy = posInfo.cy;
+        var r = posInfo.r;
+
+        var minVal = +seriesModel.get('min');
+        var maxVal = +seriesModel.get('max');
+
+        var splitLineModel = seriesModel.getModel('splitLine');
+        var tickModel = seriesModel.getModel('axisTick');
+        var labelModel = seriesModel.getModel('axisLabel');
+
+        var splitNumber = seriesModel.get('splitNumber');
+        var subSplitNumber = tickModel.get('splitNumber');
+
+        var splitLineLen = parsePercent$1(
+            splitLineModel.get('length'), r
+        );
+        var tickLen = parsePercent$1(
+            tickModel.get('length'), r
+        );
+
+        var angle = startAngle;
+        var step = (endAngle - startAngle) / splitNumber;
+        var subStep = step / subSplitNumber;
+
+        var splitLineStyle = splitLineModel.getModel('lineStyle').getLineStyle();
+        var tickLineStyle = tickModel.getModel('lineStyle').getLineStyle();
+
+        for (var i = 0; i <= splitNumber; i++) {
+            var unitX = Math.cos(angle);
+            var unitY = Math.sin(angle);
+            // Split line
+            if (splitLineModel.get('show')) {
+                var splitLine = new Line({
+                    shape: {
+                        x1: unitX * r + cx,
+                        y1: unitY * r + cy,
+                        x2: unitX * (r - splitLineLen) + cx,
+                        y2: unitY * (r - splitLineLen) + cy
+                    },
+                    style: splitLineStyle,
+                    silent: true
+                });
+                if (splitLineStyle.stroke === 'auto') {
+                    splitLine.setStyle({
+                        stroke: getColor(i / splitNumber)
+                    });
+                }
+
+                group.add(splitLine);
+            }
+
+            // Label
+            if (labelModel.get('show')) {
+                var label = formatLabel(
+                    round$1(i / splitNumber * (maxVal - minVal) + minVal),
+                    labelModel.get('formatter')
+                );
+                var distance = labelModel.get('distance');
+                var autoColor = getColor(i / splitNumber);
+
+                group.add(new Text({
+                    style: setTextStyle({}, labelModel, {
+                        text: label,
+                        x: unitX * (r - splitLineLen - distance) + cx,
+                        y: unitY * (r - splitLineLen - distance) + cy,
+                        textVerticalAlign: unitY < -0.4 ? 'top' : (unitY > 0.4 ? 'bottom' : 'middle'),
+                        textAlign: unitX < -0.4 ? 'left' : (unitX > 0.4 ? 'right' : 'center')
+                    }, {autoColor: autoColor}),
+                    silent: true
+                }));
+            }
+
+            // Axis tick
+            if (tickModel.get('show') && i !== splitNumber) {
+                for (var j = 0; j <= subSplitNumber; j++) {
+                    var unitX = Math.cos(angle);
+                    var unitY = Math.sin(angle);
+                    var tickLine = new Line({
+                        shape: {
+                            x1: unitX * r + cx,
+                            y1: unitY * r + cy,
+                            x2: unitX * (r - tickLen) + cx,
+                            y2: unitY * (r - tickLen) + cy
+                        },
+                        silent: true,
+                        style: tickLineStyle
+                    });
+
+                    if (tickLineStyle.stroke === 'auto') {
+                        tickLine.setStyle({
+                            stroke: getColor((i + j / subSplitNumber) / splitNumber)
+                        });
+                    }
+
+                    group.add(tickLine);
+                    angle += subStep;
+                }
+                angle -= subStep;
+            }
+            else {
+                angle += step;
+            }
+        }
+    },
+
+    _renderPointer: function (
+        seriesModel, ecModel, api, getColor, posInfo,
+        startAngle, endAngle, clockwise
+    ) {
+
+        var group = this.group;
+        var oldData = this._data;
+
+        if (!seriesModel.get('pointer.show')) {
+            // Remove old element
+            oldData && oldData.eachItemGraphicEl(function (el) {
+                group.remove(el);
+            });
+            return;
+        }
+
+        var valueExtent = [+seriesModel.get('min'), +seriesModel.get('max')];
+        var angleExtent = [startAngle, endAngle];
+
+        var data = seriesModel.getData();
+        var valueDim = data.mapDimension('value');
+
+        data.diff(oldData)
+            .add(function (idx) {
+                var pointer = new PointerPath({
+                    shape: {
+                        angle: startAngle
+                    }
+                });
+
+                initProps(pointer, {
+                    shape: {
+                        angle: linearMap(data.get(valueDim, idx), valueExtent, angleExtent, true)
+                    }
+                }, seriesModel);
+
+                group.add(pointer);
+                data.setItemGraphicEl(idx, pointer);
+            })
+            .update(function (newIdx, oldIdx) {
+                var pointer = oldData.getItemGraphicEl(oldIdx);
+
+                updateProps(pointer, {
+                    shape: {
+                        angle: linearMap(data.get(valueDim, newIdx), valueExtent, angleExtent, true)
+                    }
+                }, seriesModel);
+
+                group.add(pointer);
+                data.setItemGraphicEl(newIdx, pointer);
+            })
+            .remove(function (idx) {
+                var pointer = oldData.getItemGraphicEl(idx);
+                group.remove(pointer);
+            })
+            .execute();
+
+        data.eachItemGraphicEl(function (pointer, idx) {
+            var itemModel = data.getItemModel(idx);
+            var pointerModel = itemModel.getModel('pointer');
+
+            pointer.setShape({
+                x: posInfo.cx,
+                y: posInfo.cy,
+                width: parsePercent$1(
+                    pointerModel.get('width'), posInfo.r
+                ),
+                r: parsePercent$1(pointerModel.get('length'), posInfo.r)
+            });
+
+            pointer.useStyle(itemModel.getModel('itemStyle').getItemStyle());
+
+            if (pointer.style.fill === 'auto') {
+                pointer.setStyle('fill', getColor(
+                    linearMap(data.get(valueDim, idx), valueExtent, [0, 1], true)
+                ));
+            }
+
+            setHoverStyle(
+                pointer, itemModel.getModel('emphasis.itemStyle').getItemStyle()
+            );
+        });
+
+        this._data = data;
+    },
+
+    _renderTitle: function (
+        seriesModel, ecModel, api, getColor, posInfo
+    ) {
+        var data = seriesModel.getData();
+        var valueDim = data.mapDimension('value');
+        var titleModel = seriesModel.getModel('title');
+        if (titleModel.get('show')) {
+            var offsetCenter = titleModel.get('offsetCenter');
+            var x = posInfo.cx + parsePercent$1(offsetCenter[0], posInfo.r);
+            var y = posInfo.cy + parsePercent$1(offsetCenter[1], posInfo.r);
+
+            var minVal = +seriesModel.get('min');
+            var maxVal = +seriesModel.get('max');
+            var value = seriesModel.getData().get(valueDim, 0);
+            var autoColor = getColor(
+                linearMap(value, [minVal, maxVal], [0, 1], true)
+            );
+
+            this.group.add(new Text({
+                silent: true,
+                style: setTextStyle({}, titleModel, {
+                    x: x,
+                    y: y,
+                    // FIXME First data name ?
+                    text: data.getName(0),
+                    textAlign: 'center',
+                    textVerticalAlign: 'middle'
+                }, {autoColor: autoColor, forceRich: true})
+            }));
+        }
+    },
+
+    _renderDetail: function (
+        seriesModel, ecModel, api, getColor, posInfo
+    ) {
+        var detailModel = seriesModel.getModel('detail');
+        var minVal = +seriesModel.get('min');
+        var maxVal = +seriesModel.get('max');
+        if (detailModel.get('show')) {
+            var offsetCenter = detailModel.get('offsetCenter');
+            var x = posInfo.cx + parsePercent$1(offsetCenter[0], posInfo.r);
+            var y = posInfo.cy + parsePercent$1(offsetCenter[1], posInfo.r);
+            var width = parsePercent$1(detailModel.get('width'), posInfo.r);
+            var height = parsePercent$1(detailModel.get('height'), posInfo.r);
+            var data = seriesModel.getData();
+            var value = data.get(data.mapDimension('value'), 0);
+            var autoColor = getColor(
+                linearMap(value, [minVal, maxVal], [0, 1], true)
+            );
+
+            this.group.add(new Text({
+                silent: true,
+                style: setTextStyle({}, detailModel, {
+                    x: x,
+                    y: y,
+                    text: formatLabel(
+                        // FIXME First data name ?
+                        value, detailModel.get('formatter')
+                    ),
+                    textWidth: isNaN(width) ? null : width,
+                    textHeight: isNaN(height) ? null : height,
+                    textAlign: 'center',
+                    textVerticalAlign: 'middle'
+                }, {autoColor: autoColor, forceRich: true})
+            }));
+        }
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var FunnelSeries = extendSeriesModel({
+
+    type: 'series.funnel',
+
+    init: function (option) {
+        FunnelSeries.superApply(this, 'init', arguments);
+
+        // Enable legend selection for each data item
+        // Use a function instead of direct access because data reference may changed
+        this.legendDataProvider = function () {
+            return this.getRawData();
+        };
+        // Extend labelLine emphasis
+        this._defaultLabelLine(option);
+    },
+
+    getInitialData: function (option, ecModel) {
+        return createListSimply(this, ['value']);
+    },
+
+    _defaultLabelLine: function (option) {
+        // Extend labelLine emphasis
+        defaultEmphasis(option, 'labelLine', ['show']);
+
+        var labelLineNormalOpt = option.labelLine;
+        var labelLineEmphasisOpt = option.emphasis.labelLine;
+        // Not show label line if `label.normal.show = false`
+        labelLineNormalOpt.show = labelLineNormalOpt.show
+            && option.label.show;
+        labelLineEmphasisOpt.show = labelLineEmphasisOpt.show
+            && option.emphasis.label.show;
+    },
+
+    // Overwrite
+    getDataParams: function (dataIndex) {
+        var data = this.getData();
+        var params = FunnelSeries.superCall(this, 'getDataParams', dataIndex);
+        var valueDim = data.mapDimension('value');
+        var sum = data.getSum(valueDim);
+        // Percent is 0 if sum is 0
+        params.percent = !sum ? 0 : +(data.get(valueDim, dataIndex) / sum * 100).toFixed(2);
+
+        params.$vars.push('percent');
+        return params;
+    },
+
+    defaultOption: {
+        zlevel: 0,                  // ä¸€çº§å±‚å 
+        z: 2,                       // äºŒçº§å±‚å 
+        legendHoverLink: true,
+        left: 80,
+        top: 60,
+        right: 80,
+        bottom: 60,
+        // width: {totalWidth} - left - right,
+        // height: {totalHeight} - top - bottom,
+
+        // é»˜è®¤å–æ•°æ®æœ€å°æœ€å¤§å€¼
+        // min: 0,
+        // max: 100,
+        minSize: '0%',
+        maxSize: '100%',
+        sort: 'descending', // 'ascending', 'descending'
+        gap: 0,
+        funnelAlign: 'center',
+        label: {
+            show: true,
+            position: 'outer'
+            // formatter: æ ‡ç¾æ–‡æœ¬æ ¼å¼å™¨ï¼ŒåŒTooltip.formatterï¼Œä¸æ”¯æŒå¼‚æ¥å›žè°ƒ
+        },
+        labelLine: {
+            show: true,
+            length: 20,
+            lineStyle: {
+                // color: å„å¼‚,
+                width: 1,
+                type: 'solid'
+            }
+        },
+        itemStyle: {
+            // color: å„å¼‚,
+            borderColor: '#fff',
+            borderWidth: 1
+        },
+        emphasis: {
+            label: {
+                show: true
+            }
+        }
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Piece of pie including Sector, Label, LabelLine
+ * @constructor
+ * @extends {module:zrender/graphic/Group}
+ */
+function FunnelPiece(data, idx) {
+
+    Group.call(this);
+
+    var polygon = new Polygon();
+    var labelLine = new Polyline();
+    var text = new Text();
+    this.add(polygon);
+    this.add(labelLine);
+    this.add(text);
+
+    this.updateData(data, idx, true);
+
+    // Hover to change label and labelLine
+    function onEmphasis() {
+        labelLine.ignore = labelLine.hoverIgnore;
+        text.ignore = text.hoverIgnore;
+    }
+    function onNormal() {
+        labelLine.ignore = labelLine.normalIgnore;
+        text.ignore = text.normalIgnore;
+    }
+    this.on('emphasis', onEmphasis)
+        .on('normal', onNormal)
+        .on('mouseover', onEmphasis)
+        .on('mouseout', onNormal);
+}
+
+var funnelPieceProto = FunnelPiece.prototype;
+
+var opacityAccessPath = ['itemStyle', 'opacity'];
+funnelPieceProto.updateData = function (data, idx, firstCreate) {
+
+    var polygon = this.childAt(0);
+
+    var seriesModel = data.hostModel;
+    var itemModel = data.getItemModel(idx);
+    var layout = data.getItemLayout(idx);
+    var opacity = data.getItemModel(idx).get(opacityAccessPath);
+    opacity = opacity == null ? 1 : opacity;
+
+    // Reset style
+    polygon.useStyle({});
+
+    if (firstCreate) {
+        polygon.setShape({
+            points: layout.points
+        });
+        polygon.setStyle({ opacity : 0 });
+        initProps(polygon, {
+            style: {
+                opacity: opacity
+            }
+        }, seriesModel, idx);
+    }
+    else {
+        updateProps(polygon, {
+            style: {
+                opacity: opacity
+            },
+            shape: {
+                points: layout.points
+            }
+        }, seriesModel, idx);
+    }
+
+    // Update common style
+    var itemStyleModel = itemModel.getModel('itemStyle');
+    var visualColor = data.getItemVisual(idx, 'color');
+
+    polygon.setStyle(
+        defaults(
+            {
+                lineJoin: 'round',
+                fill: visualColor
+            },
+            itemStyleModel.getItemStyle(['opacity'])
+        )
+    );
+    polygon.hoverStyle = itemStyleModel.getModel('emphasis').getItemStyle();
+
+    this._updateLabel(data, idx);
+
+    setHoverStyle(this);
+};
+
+funnelPieceProto._updateLabel = function (data, idx) {
+
+    var labelLine = this.childAt(1);
+    var labelText = this.childAt(2);
+
+    var seriesModel = data.hostModel;
+    var itemModel = data.getItemModel(idx);
+    var layout = data.getItemLayout(idx);
+    var labelLayout = layout.label;
+    var visualColor = data.getItemVisual(idx, 'color');
+
+    updateProps(labelLine, {
+        shape: {
+            points: labelLayout.linePoints || labelLayout.linePoints
+        }
+    }, seriesModel, idx);
+
+    updateProps(labelText, {
+        style: {
+            x: labelLayout.x,
+            y: labelLayout.y
+        }
+    }, seriesModel, idx);
+    labelText.attr({
+        rotation: labelLayout.rotation,
+        origin: [labelLayout.x, labelLayout.y],
+        z2: 10
+    });
+
+    var labelModel = itemModel.getModel('label');
+    var labelHoverModel = itemModel.getModel('emphasis.label');
+    var labelLineModel = itemModel.getModel('labelLine');
+    var labelLineHoverModel = itemModel.getModel('emphasis.labelLine');
+    var visualColor = data.getItemVisual(idx, 'color');
+
+    setLabelStyle(
+        labelText.style, labelText.hoverStyle = {}, labelModel, labelHoverModel,
+        {
+            labelFetcher: data.hostModel,
+            labelDataIndex: idx,
+            defaultText: data.getName(idx),
+            autoColor: visualColor,
+            useInsideStyle: !!labelLayout.inside
+        },
+        {
+            textAlign: labelLayout.textAlign,
+            textVerticalAlign: labelLayout.verticalAlign
+        }
+    );
+
+    labelText.ignore = labelText.normalIgnore = !labelModel.get('show');
+    labelText.hoverIgnore = !labelHoverModel.get('show');
+
+    labelLine.ignore = labelLine.normalIgnore = !labelLineModel.get('show');
+    labelLine.hoverIgnore = !labelLineHoverModel.get('show');
+
+    // Default use item visual color
+    labelLine.setStyle({
+        stroke: visualColor
+    });
+    labelLine.setStyle(labelLineModel.getModel('lineStyle').getLineStyle());
+
+    labelLine.hoverStyle = labelLineHoverModel.getModel('lineStyle').getLineStyle();
+};
+
+inherits(FunnelPiece, Group);
+
+
+var FunnelView = Chart.extend({
+
+    type: 'funnel',
+
+    render: function (seriesModel, ecModel, api) {
+        var data = seriesModel.getData();
+        var oldData = this._data;
+
+        var group = this.group;
+
+        data.diff(oldData)
+            .add(function (idx) {
+                var funnelPiece = new FunnelPiece(data, idx);
+
+                data.setItemGraphicEl(idx, funnelPiece);
+
+                group.add(funnelPiece);
+            })
+            .update(function (newIdx, oldIdx) {
+                var piePiece = oldData.getItemGraphicEl(oldIdx);
+
+                piePiece.updateData(data, newIdx);
+
+                group.add(piePiece);
+                data.setItemGraphicEl(newIdx, piePiece);
+            })
+            .remove(function (idx) {
+                var piePiece = oldData.getItemGraphicEl(idx);
+                group.remove(piePiece);
+            })
+            .execute();
+
+        this._data = data;
+    },
+
+    remove: function () {
+        this.group.removeAll();
+        this._data = null;
+    },
+
+    dispose: function () {}
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+function getViewRect$2(seriesModel, api) {
+    return getLayoutRect(
+        seriesModel.getBoxLayoutParams(), {
+            width: api.getWidth(),
+            height: api.getHeight()
+        }
+    );
+}
+
+function getSortedIndices(data, sort) {
+    var valueDim = data.mapDimension('value');
+    var valueArr = data.mapArray(valueDim, function (val) {
+        return val;
+    });
+    var indices = [];
+    var isAscending = sort === 'ascending';
+    for (var i = 0, len = data.count(); i < len; i++) {
+        indices[i] = i;
+    }
+
+    // Add custom sortable function & none sortable opetion by "options.sort"
+    if (typeof sort === 'function') {
+        indices.sort(sort);
+    } else if (sort !== 'none') {
+        indices.sort(function (a, b) {
+            return isAscending ? valueArr[a] - valueArr[b] : valueArr[b] - valueArr[a];
+        });
+    }
+    return indices;
+}
+
+function labelLayout$1(data) {
+    data.each(function (idx) {
+        var itemModel = data.getItemModel(idx);
+        var labelModel = itemModel.getModel('label');
+        var labelPosition = labelModel.get('position');
+
+        var labelLineModel = itemModel.getModel('labelLine');
+
+        var layout = data.getItemLayout(idx);
+        var points = layout.points;
+
+        var isLabelInside = labelPosition === 'inner'
+            || labelPosition === 'inside' || labelPosition === 'center';
+
+        var textAlign;
+        var textX;
+        var textY;
+        var linePoints;
+
+        if (isLabelInside) {
+            textX = (points[0][0] + points[1][0] + points[2][0] + points[3][0]) / 4;
+            textY = (points[0][1] + points[1][1] + points[2][1] + points[3][1]) / 4;
+            textAlign = 'center';
+            linePoints = [
+                [textX, textY], [textX, textY]
+            ];
+        }
+        else {
+            var x1;
+            var y1;
+            var x2;
+            var labelLineLen = labelLineModel.get('length');
+            if (labelPosition === 'left') {
+                // Left side
+                x1 = (points[3][0] + points[0][0]) / 2;
+                y1 = (points[3][1] + points[0][1]) / 2;
+                x2 = x1 - labelLineLen;
+                textX = x2 - 5;
+                textAlign = 'right';
+            }
+            else {
+                // Right side
+                x1 = (points[1][0] + points[2][0]) / 2;
+                y1 = (points[1][1] + points[2][1]) / 2;
+                x2 = x1 + labelLineLen;
+                textX = x2 + 5;
+                textAlign = 'left';
+            }
+            var y2 = y1;
+
+            linePoints = [[x1, y1], [x2, y2]];
+            textY = y2;
+        }
+
+        layout.label = {
+            linePoints: linePoints,
+            x: textX,
+            y: textY,
+            verticalAlign: 'middle',
+            textAlign: textAlign,
+            inside: isLabelInside
+        };
+    });
+}
+
+var funnelLayout = function (ecModel, api, payload) {
+    ecModel.eachSeriesByType('funnel', function (seriesModel) {
+        var data = seriesModel.getData();
+        var valueDim = data.mapDimension('value');
+        var sort = seriesModel.get('sort');
+        var viewRect = getViewRect$2(seriesModel, api);
+        var indices = getSortedIndices(data, sort);
+
+        var sizeExtent = [
+            parsePercent$1(seriesModel.get('minSize'), viewRect.width),
+            parsePercent$1(seriesModel.get('maxSize'), viewRect.width)
+        ];
+        var dataExtent = data.getDataExtent(valueDim);
+        var min = seriesModel.get('min');
+        var max = seriesModel.get('max');
+        if (min == null) {
+            min = Math.min(dataExtent[0], 0);
+        }
+        if (max == null) {
+            max = dataExtent[1];
+        }
+
+        var funnelAlign = seriesModel.get('funnelAlign');
+        var gap = seriesModel.get('gap');
+        var itemHeight = (viewRect.height - gap * (data.count() - 1)) / data.count();
+
+        var y = viewRect.y;
+
+        var getLinePoints = function (idx, offY) {
+            // End point index is data.count() and we assign it 0
+            var val = data.get(valueDim, idx) || 0;
+            var itemWidth = linearMap(val, [min, max], sizeExtent, true);
+            var x0;
+            switch (funnelAlign) {
+                case 'left':
+                    x0 = viewRect.x;
+                    break;
+                case 'center':
+                    x0 = viewRect.x + (viewRect.width - itemWidth) / 2;
+                    break;
+                case 'right':
+                    x0 = viewRect.x + viewRect.width - itemWidth;
+                    break;
+            }
+            return [
+                [x0, offY],
+                [x0 + itemWidth, offY]
+            ];
+        };
+
+        if (sort === 'ascending') {
+            // From bottom to top
+            itemHeight = -itemHeight;
+            gap = -gap;
+            y += viewRect.height;
+            indices = indices.reverse();
+        }
+
+        for (var i = 0; i < indices.length; i++) {
+            var idx = indices[i];
+            var nextIdx = indices[i + 1];
+
+            var itemModel = data.getItemModel(idx);
+            var height = itemModel.get('itemStyle.height');
+            if (height == null) {
+                height = itemHeight;
+            }
+            else {
+                height = parsePercent$1(height, viewRect.height);
+                if (sort === 'ascending') {
+                    height = -height;
+                }
+            }
+
+            var start = getLinePoints(idx, y);
+            var end = getLinePoints(nextIdx, y + height);
+
+            y += height + gap;
+
+            data.setItemLayout(idx, {
+                points: start.concat(end.slice().reverse())
+            });
+        }
+
+        labelLayout$1(data);
+    });
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+registerVisual(dataColor('funnel'));
+registerLayout(funnelLayout);
+registerProcessor(dataFilter('funnel'));
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var parallelPreprocessor = function (option) {
+    createParallelIfNeeded(option);
+    mergeAxisOptionFromParallel(option);
+};
+
+/**
+ * Create a parallel coordinate if not exists.
+ * @inner
+ */
+function createParallelIfNeeded(option) {
+    if (option.parallel) {
+        return;
+    }
+
+    var hasParallelSeries = false;
+
+    each$1(option.series, function (seriesOpt) {
+        if (seriesOpt && seriesOpt.type === 'parallel') {
+            hasParallelSeries = true;
+        }
+    });
+
+    if (hasParallelSeries) {
+        option.parallel = [{}];
+    }
+}
+
+/**
+ * Merge aixs definition from parallel option (if exists) to axis option.
+ * @inner
+ */
+function mergeAxisOptionFromParallel(option) {
+    var axes = normalizeToArray(option.parallelAxis);
+
+    each$1(axes, function (axisOption) {
+        if (!isObject$1(axisOption)) {
+            return;
+        }
+
+        var parallelIndex = axisOption.parallelIndex || 0;
+        var parallelOption = normalizeToArray(option.parallel)[parallelIndex];
+
+        if (parallelOption && parallelOption.parallelAxisDefault) {
+            merge(axisOption, parallelOption.parallelAxisDefault, false);
+        }
+    });
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @constructor module:echarts/coord/parallel/ParallelAxis
+ * @extends {module:echarts/coord/Axis}
+ * @param {string} dim
+ * @param {*} scale
+ * @param {Array.<number>} coordExtent
+ * @param {string} axisType
+ */
+var ParallelAxis = function (dim, scale, coordExtent, axisType, axisIndex) {
+
+    Axis.call(this, dim, scale, coordExtent);
+
+    /**
+     * Axis type
+     *  - 'category'
+     *  - 'value'
+     *  - 'time'
+     *  - 'log'
+     * @type {string}
+     */
+    this.type = axisType || 'value';
+
+    /**
+     * @type {number}
+     * @readOnly
+     */
+    this.axisIndex = axisIndex;
+};
+
+ParallelAxis.prototype = {
+
+    constructor: ParallelAxis,
+
+    /**
+     * Axis model
+     * @param {module:echarts/coord/parallel/AxisModel}
+     */
+    model: null,
+
+    /**
+     * @override
+     */
+    isHorizontal: function () {
+        return this.coordinateSystem.getModel().get('layout') !== 'horizontal';
+    }
+
+};
+
+inherits(ParallelAxis, Axis);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Calculate slider move result.
+ * Usage:
+ * (1) If both handle0 and handle1 are needed to be moved, set minSpan the same as
+ * maxSpan and the same as `Math.abs(handleEnd[1] - handleEnds[0])`.
+ * (2) If handle0 is forbidden to cross handle1, set minSpan as `0`.
+ *
+ * @param {number} delta Move length.
+ * @param {Array.<number>} handleEnds handleEnds[0] can be bigger then handleEnds[1].
+ *              handleEnds will be modified in this method.
+ * @param {Array.<number>} extent handleEnds is restricted by extent.
+ *              extent[0] should less or equals than extent[1].
+ * @param {number|string} handleIndex Can be 'all', means that both move the two handleEnds,
+ *              where the input minSpan and maxSpan will not work.
+ * @param {number} [minSpan] The range of dataZoom can not be smaller than that.
+ *              If not set, handle0 and cross handle1. If set as a non-negative
+ *              number (including `0`), handles will push each other when reaching
+ *              the minSpan.
+ * @param {number} [maxSpan] The range of dataZoom can not be larger than that.
+ * @return {Array.<number>} The input handleEnds.
+ */
+var sliderMove = function (delta, handleEnds, extent, handleIndex, minSpan, maxSpan) {
+    // Normalize firstly.
+    handleEnds[0] = restrict$1(handleEnds[0], extent);
+    handleEnds[1] = restrict$1(handleEnds[1], extent);
+
+    delta = delta || 0;
+
+    var extentSpan = extent[1] - extent[0];
+
+    // Notice maxSpan and minSpan can be null/undefined.
+    if (minSpan != null) {
+        minSpan = restrict$1(minSpan, [0, extentSpan]);
+    }
+    if (maxSpan != null) {
+        maxSpan = Math.max(maxSpan, minSpan != null ? minSpan : 0);
+    }
+    if (handleIndex === 'all') {
+        minSpan = maxSpan = Math.abs(handleEnds[1] - handleEnds[0]);
+        handleIndex = 0;
+    }
+
+    var originalDistSign = getSpanSign(handleEnds, handleIndex);
+
+    handleEnds[handleIndex] += delta;
+
+    // Restrict in extent.
+    var extentMinSpan = minSpan || 0;
+    var realExtent = extent.slice();
+    originalDistSign.sign < 0 ? (realExtent[0] += extentMinSpan) : (realExtent[1] -= extentMinSpan);
+    handleEnds[handleIndex] = restrict$1(handleEnds[handleIndex], realExtent);
+
+    // Expand span.
+    var currDistSign = getSpanSign(handleEnds, handleIndex);
+    if (minSpan != null && (
+        currDistSign.sign !== originalDistSign.sign || currDistSign.span < minSpan
+    )) {
+        // If minSpan exists, 'cross' is forbinden.
+        handleEnds[1 - handleIndex] = handleEnds[handleIndex] + originalDistSign.sign * minSpan;
+    }
+
+    // Shrink span.
+    var currDistSign = getSpanSign(handleEnds, handleIndex);
+    if (maxSpan != null && currDistSign.span > maxSpan) {
+        handleEnds[1 - handleIndex] = handleEnds[handleIndex] + currDistSign.sign * maxSpan;
+    }
+
+    return handleEnds;
+};
+
+function getSpanSign(handleEnds, handleIndex) {
+    var dist = handleEnds[handleIndex] - handleEnds[1 - handleIndex];
+    // If `handleEnds[0] === handleEnds[1]`, always believe that handleEnd[0]
+    // is at left of handleEnds[1] for non-cross case.
+    return {span: Math.abs(dist), sign: dist > 0 ? -1 : dist < 0 ? 1 : handleIndex ? -1 : 1};
+}
+
+function restrict$1(value, extend) {
+    return Math.min(extend[1], Math.max(extend[0], value));
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Parallel Coordinates
+ * <https://en.wikipedia.org/wiki/Parallel_coordinates>
+ */
+
+var each$11 = each$1;
+var mathMin$5 = Math.min;
+var mathMax$5 = Math.max;
+var mathFloor$2 = Math.floor;
+var mathCeil$2 = Math.ceil;
+var round$2 = round$1;
+
+var PI$3 = Math.PI;
+
+function Parallel(parallelModel, ecModel, api) {
+
+    /**
+     * key: dimension
+     * @type {Object.<string, module:echarts/coord/parallel/Axis>}
+     * @private
+     */
+    this._axesMap = createHashMap();
+
+    /**
+     * key: dimension
+     * value: {position: [], rotation, }
+     * @type {Object.<string, Object>}
+     * @private
+     */
+    this._axesLayout = {};
+
+    /**
+     * Always follow axis order.
+     * @type {Array.<string>}
+     * @readOnly
+     */
+    this.dimensions = parallelModel.dimensions;
+
+    /**
+     * @type {module:zrender/core/BoundingRect}
+     */
+    this._rect;
+
+    /**
+     * @type {module:echarts/coord/parallel/ParallelModel}
+     */
+    this._model = parallelModel;
+
+    this._init(parallelModel, ecModel, api);
+}
+
+Parallel.prototype = {
+
+    type: 'parallel',
+
+    constructor: Parallel,
+
+    /**
+     * Initialize cartesian coordinate systems
+     * @private
+     */
+    _init: function (parallelModel, ecModel, api) {
+
+        var dimensions = parallelModel.dimensions;
+        var parallelAxisIndex = parallelModel.parallelAxisIndex;
+
+        each$11(dimensions, function (dim, idx) {
+
+            var axisIndex = parallelAxisIndex[idx];
+            var axisModel = ecModel.getComponent('parallelAxis', axisIndex);
+
+            var axis = this._axesMap.set(dim, new ParallelAxis(
+                dim,
+                createScaleByModel(axisModel),
+                [0, 0],
+                axisModel.get('type'),
+                axisIndex
+            ));
+
+            var isCategory = axis.type === 'category';
+            axis.onBand = isCategory && axisModel.get('boundaryGap');
+            axis.inverse = axisModel.get('inverse');
+
+            // Injection
+            axisModel.axis = axis;
+            axis.model = axisModel;
+            axis.coordinateSystem = axisModel.coordinateSystem = this;
+
+        }, this);
+    },
+
+    /**
+     * Update axis scale after data processed
+     * @param  {module:echarts/model/Global} ecModel
+     * @param  {module:echarts/ExtensionAPI} api
+     */
+    update: function (ecModel, api) {
+        this._updateAxesFromSeries(this._model, ecModel);
+    },
+
+    /**
+     * @override
+     */
+    containPoint: function (point) {
+        var layoutInfo = this._makeLayoutInfo();
+        var axisBase = layoutInfo.axisBase;
+        var layoutBase = layoutInfo.layoutBase;
+        var pixelDimIndex = layoutInfo.pixelDimIndex;
+        var pAxis = point[1 - pixelDimIndex];
+        var pLayout = point[pixelDimIndex];
+
+        return pAxis >= axisBase
+            && pAxis <= axisBase + layoutInfo.axisLength
+            && pLayout >= layoutBase
+            && pLayout <= layoutBase + layoutInfo.layoutLength;
+    },
+
+    getModel: function () {
+        return this._model;
+    },
+
+    /**
+     * Update properties from series
+     * @private
+     */
+    _updateAxesFromSeries: function (parallelModel, ecModel) {
+        ecModel.eachSeries(function (seriesModel) {
+
+            if (!parallelModel.contains(seriesModel, ecModel)) {
+                return;
+            }
+
+            var data = seriesModel.getData();
+
+            each$11(this.dimensions, function (dim) {
+                var axis = this._axesMap.get(dim);
+                axis.scale.unionExtentFromData(data, data.mapDimension(dim));
+                niceScaleExtent(axis.scale, axis.model);
+            }, this);
+        }, this);
+    },
+
+    /**
+     * Resize the parallel coordinate system.
+     * @param {module:echarts/coord/parallel/ParallelModel} parallelModel
+     * @param {module:echarts/ExtensionAPI} api
+     */
+    resize: function (parallelModel, api) {
+        this._rect = getLayoutRect(
+            parallelModel.getBoxLayoutParams(),
+            {
+                width: api.getWidth(),
+                height: api.getHeight()
+            }
+        );
+
+        this._layoutAxes();
+    },
+
+    /**
+     * @return {module:zrender/core/BoundingRect}
+     */
+    getRect: function () {
+        return this._rect;
+    },
+
+    /**
+     * @private
+     */
+    _makeLayoutInfo: function () {
+        var parallelModel = this._model;
+        var rect = this._rect;
+        var xy = ['x', 'y'];
+        var wh = ['width', 'height'];
+        var layout = parallelModel.get('layout');
+        var pixelDimIndex = layout === 'horizontal' ? 0 : 1;
+        var layoutLength = rect[wh[pixelDimIndex]];
+        var layoutExtent = [0, layoutLength];
+        var axisCount = this.dimensions.length;
+
+        var axisExpandWidth = restrict(parallelModel.get('axisExpandWidth'), layoutExtent);
+        var axisExpandCount = restrict(parallelModel.get('axisExpandCount') || 0, [0, axisCount]);
+        var axisExpandable = parallelModel.get('axisExpandable')
+            && axisCount > 3
+            && axisCount > axisExpandCount
+            && axisExpandCount > 1
+            && axisExpandWidth > 0
+            && layoutLength > 0;
+
+        // `axisExpandWindow` is According to the coordinates of [0, axisExpandLength],
+        // for sake of consider the case that axisCollapseWidth is 0 (when screen is narrow),
+        // where collapsed axes should be overlapped.
+        var axisExpandWindow = parallelModel.get('axisExpandWindow');
+        var winSize;
+        if (!axisExpandWindow) {
+            winSize = restrict(axisExpandWidth * (axisExpandCount - 1), layoutExtent);
+            var axisExpandCenter = parallelModel.get('axisExpandCenter') || mathFloor$2(axisCount / 2);
+            axisExpandWindow = [axisExpandWidth * axisExpandCenter - winSize / 2];
+            axisExpandWindow[1] = axisExpandWindow[0] + winSize;
+        }
+        else {
+                winSize = restrict(axisExpandWindow[1] - axisExpandWindow[0], layoutExtent);
+                axisExpandWindow[1] = axisExpandWindow[0] + winSize;
+        }
+
+        var axisCollapseWidth = (layoutLength - winSize) / (axisCount - axisExpandCount);
+        // Avoid axisCollapseWidth is too small.
+        axisCollapseWidth < 3 && (axisCollapseWidth = 0);
+
+        // Find the first and last indices > ewin[0] and < ewin[1].
+        var winInnerIndices = [
+            mathFloor$2(round$2(axisExpandWindow[0] / axisExpandWidth, 1)) + 1,
+            mathCeil$2(round$2(axisExpandWindow[1] / axisExpandWidth, 1)) - 1
+        ];
+
+        // Pos in ec coordinates.
+        var axisExpandWindow0Pos = axisCollapseWidth / axisExpandWidth * axisExpandWindow[0];
+
+        return {
+            layout: layout,
+            pixelDimIndex: pixelDimIndex,
+            layoutBase: rect[xy[pixelDimIndex]],
+            layoutLength: layoutLength,
+            axisBase: rect[xy[1 - pixelDimIndex]],
+            axisLength: rect[wh[1 - pixelDimIndex]],
+            axisExpandable: axisExpandable,
+            axisExpandWidth: axisExpandWidth,
+            axisCollapseWidth: axisCollapseWidth,
+            axisExpandWindow: axisExpandWindow,
+            axisCount: axisCount,
+            winInnerIndices: winInnerIndices,
+            axisExpandWindow0Pos: axisExpandWindow0Pos
+        };
+    },
+
+    /**
+     * @private
+     */
+    _layoutAxes: function () {
+        var rect = this._rect;
+        var axes = this._axesMap;
+        var dimensions = this.dimensions;
+        var layoutInfo = this._makeLayoutInfo();
+        var layout = layoutInfo.layout;
+
+        axes.each(function (axis) {
+            var axisExtent = [0, layoutInfo.axisLength];
+            var idx = axis.inverse ? 1 : 0;
+            axis.setExtent(axisExtent[idx], axisExtent[1 - idx]);
+        });
+
+        each$11(dimensions, function (dim, idx) {
+            var posInfo = (layoutInfo.axisExpandable
+                ? layoutAxisWithExpand : layoutAxisWithoutExpand
+            )(idx, layoutInfo);
+
+            var positionTable = {
+                horizontal: {
+                    x: posInfo.position,
+                    y: layoutInfo.axisLength
+                },
+                vertical: {
+                    x: 0,
+                    y: posInfo.position
+                }
+            };
+            var rotationTable = {
+                horizontal: PI$3 / 2,
+                vertical: 0
+            };
+
+            var position = [
+                positionTable[layout].x + rect.x,
+                positionTable[layout].y + rect.y
+            ];
+
+            var rotation = rotationTable[layout];
+            var transform = create$1();
+            rotate(transform, transform, rotation);
+            translate(transform, transform, position);
+
+            // TODO
+            // tickç‰æŽ’å¸ƒä¿¡æ¯ã€‚
+
+            // TODO
+            // æ ¹æ®axis order æ›´æ–° dimensionsé¡ºåºã€‚
+
+            this._axesLayout[dim] = {
+                position: position,
+                rotation: rotation,
+                transform: transform,
+                axisNameAvailableWidth: posInfo.axisNameAvailableWidth,
+                axisLabelShow: posInfo.axisLabelShow,
+                nameTruncateMaxWidth: posInfo.nameTruncateMaxWidth,
+                tickDirection: 1,
+                labelDirection: 1
+            };
+        }, this);
+    },
+
+    /**
+     * Get axis by dim.
+     * @param {string} dim
+     * @return {module:echarts/coord/parallel/ParallelAxis} [description]
+     */
+    getAxis: function (dim) {
+        return this._axesMap.get(dim);
+    },
+
+    /**
+     * Convert a dim value of a single item of series data to Point.
+     * @param {*} value
+     * @param {string} dim
+     * @return {Array}
+     */
+    dataToPoint: function (value, dim) {
+        return this.axisCoordToPoint(
+            this._axesMap.get(dim).dataToCoord(value),
+            dim
+        );
+    },
+
+    /**
+     * Travel data for one time, get activeState of each data item.
+     * @param {module:echarts/data/List} data
+     * @param {Functio} cb param: {string} activeState 'active' or 'inactive' or 'normal'
+     *                            {number} dataIndex
+     * @param {number} [start=0] the start dataIndex that travel from.
+     * @param {number} [end=data.count()] the next dataIndex of the last dataIndex will be travel.
+     */
+    eachActiveState: function (data, callback, start, end) {
+        start == null && (start = 0);
+        end == null && (end = data.count());
+
+        var axesMap = this._axesMap;
+        var dimensions = this.dimensions;
+        var dataDimensions = [];
+        var axisModels = [];
+
+        each$1(dimensions, function (axisDim) {
+            dataDimensions.push(data.mapDimension(axisDim));
+            axisModels.push(axesMap.get(axisDim).model);
+        });
+
+        var hasActiveSet = this.hasAxisBrushed();
+
+        for (var dataIndex = start; dataIndex < end; dataIndex++) {
+            var activeState;
+
+            if (!hasActiveSet) {
+                activeState = 'normal';
+            }
+            else {
+                activeState = 'active';
+                var values = data.getValues(dataDimensions, dataIndex);
+                for (var j = 0, lenj = dimensions.length; j < lenj; j++) {
+                    var state = axisModels[j].getActiveState(values[j]);
+
+                    if (state === 'inactive') {
+                        activeState = 'inactive';
+                        break;
+                    }
+                }
+            }
+
+            callback(activeState, dataIndex);
+        }
+    },
+
+    /**
+     * Whether has any activeSet.
+     * @return {boolean}
+     */
+    hasAxisBrushed: function () {
+        var dimensions = this.dimensions;
+        var axesMap = this._axesMap;
+        var hasActiveSet = false;
+
+        for (var j = 0, lenj = dimensions.length; j < lenj; j++) {
+            if (axesMap.get(dimensions[j]).model.getActiveState() !== 'normal') {
+                hasActiveSet = true;
+            }
+        }
+
+        return hasActiveSet;
+    },
+
+    /**
+     * Convert coords of each axis to Point.
+     *  Return point. For example: [10, 20]
+     * @param {Array.<number>} coords
+     * @param {string} dim
+     * @return {Array.<number>}
+     */
+    axisCoordToPoint: function (coord, dim) {
+        var axisLayout = this._axesLayout[dim];
+        return applyTransform$1([coord, 0], axisLayout.transform);
+    },
+
+    /**
+     * Get axis layout.
+     */
+    getAxisLayout: function (dim) {
+        return clone(this._axesLayout[dim]);
+    },
+
+    /**
+     * @param {Array.<number>} point
+     * @return {Object} {axisExpandWindow, delta, behavior: 'jump' | 'slide' | 'none'}.
+     */
+    getSlidedAxisExpandWindow: function (point) {
+        var layoutInfo = this._makeLayoutInfo();
+        var pixelDimIndex = layoutInfo.pixelDimIndex;
+        var axisExpandWindow = layoutInfo.axisExpandWindow.slice();
+        var winSize = axisExpandWindow[1] - axisExpandWindow[0];
+        var extent = [0, layoutInfo.axisExpandWidth * (layoutInfo.axisCount - 1)];
+
+        // Out of the area of coordinate system.
+        if (!this.containPoint(point)) {
+            return {behavior: 'none', axisExpandWindow: axisExpandWindow};
+        }
+
+        // Conver the point from global to expand coordinates.
+        var pointCoord = point[pixelDimIndex] - layoutInfo.layoutBase - layoutInfo.axisExpandWindow0Pos;
+
+        // For dragging operation convenience, the window should not be
+        // slided when mouse is the center area of the window.
+        var delta;
+        var behavior = 'slide';
+        var axisCollapseWidth = layoutInfo.axisCollapseWidth;
+        var triggerArea = this._model.get('axisExpandSlideTriggerArea');
+        // But consider touch device, jump is necessary.
+        var useJump = triggerArea[0] != null;
+
+        if (axisCollapseWidth) {
+            if (useJump && axisCollapseWidth && pointCoord < winSize * triggerArea[0]) {
+                behavior = 'jump';
+                delta = pointCoord - winSize * triggerArea[2];
+            }
+            else if (useJump && axisCollapseWidth && pointCoord > winSize * (1 - triggerArea[0])) {
+                behavior = 'jump';
+                delta = pointCoord - winSize * (1 - triggerArea[2]);
+            }
+            else {
+                (delta = pointCoord - winSize * triggerArea[1]) >= 0
+                    && (delta = pointCoord - winSize * (1 - triggerArea[1])) <= 0
+                    && (delta = 0);
+            }
+            delta *= layoutInfo.axisExpandWidth / axisCollapseWidth;
+            delta
+                ? sliderMove(delta, axisExpandWindow, extent, 'all')
+                // Avoid nonsense triger on mousemove.
+                : (behavior = 'none');
+        }
+        // When screen is too narrow, make it visible and slidable, although it is hard to interact.
+        else {
+            var winSize = axisExpandWindow[1] - axisExpandWindow[0];
+            var pos = extent[1] * pointCoord / winSize;
+            axisExpandWindow = [mathMax$5(0, pos - winSize / 2)];
+            axisExpandWindow[1] = mathMin$5(extent[1], axisExpandWindow[0] + winSize);
+            axisExpandWindow[0] = axisExpandWindow[1] - winSize;
+        }
+
+        return {
+            axisExpandWindow: axisExpandWindow,
+            behavior: behavior
+        };
+    }
+};
+
+function restrict(len, extent) {
+    return mathMin$5(mathMax$5(len, extent[0]), extent[1]);
+}
+
+function layoutAxisWithoutExpand(axisIndex, layoutInfo) {
+    var step = layoutInfo.layoutLength / (layoutInfo.axisCount - 1);
+    return {
+        position: step * axisIndex,
+        axisNameAvailableWidth: step,
+        axisLabelShow: true
+    };
+}
+
+function layoutAxisWithExpand(axisIndex, layoutInfo) {
+    var layoutLength = layoutInfo.layoutLength;
+    var axisExpandWidth = layoutInfo.axisExpandWidth;
+    var axisCount = layoutInfo.axisCount;
+    var axisCollapseWidth = layoutInfo.axisCollapseWidth;
+    var winInnerIndices = layoutInfo.winInnerIndices;
+
+    var position;
+    var axisNameAvailableWidth = axisCollapseWidth;
+    var axisLabelShow = false;
+    var nameTruncateMaxWidth;
+
+    if (axisIndex < winInnerIndices[0]) {
+        position = axisIndex * axisCollapseWidth;
+        nameTruncateMaxWidth = axisCollapseWidth;
+    }
+    else if (axisIndex <= winInnerIndices[1]) {
+        position = layoutInfo.axisExpandWindow0Pos
+            + axisIndex * axisExpandWidth - layoutInfo.axisExpandWindow[0];
+        axisNameAvailableWidth = axisExpandWidth;
+        axisLabelShow = true;
+    }
+    else {
+        position = layoutLength - (axisCount - 1 - axisIndex) * axisCollapseWidth;
+        nameTruncateMaxWidth = axisCollapseWidth;
+    }
+
+    return {
+        position: position,
+        axisNameAvailableWidth: axisNameAvailableWidth,
+        axisLabelShow: axisLabelShow,
+        nameTruncateMaxWidth: nameTruncateMaxWidth
+    };
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Parallel coordinate system creater.
+ */
+
+function create$2(ecModel, api) {
+    var coordSysList = [];
+
+    ecModel.eachComponent('parallel', function (parallelModel, idx) {
+        var coordSys = new Parallel(parallelModel, ecModel, api);
+
+        coordSys.name = 'parallel_' + idx;
+        coordSys.resize(parallelModel, api);
+
+        parallelModel.coordinateSystem = coordSys;
+        coordSys.model = parallelModel;
+
+        coordSysList.push(coordSys);
+    });
+
+    // Inject the coordinateSystems into seriesModel
+    ecModel.eachSeries(function (seriesModel) {
+        if (seriesModel.get('coordinateSystem') === 'parallel') {
+            var parallelModel = ecModel.queryComponents({
+                mainType: 'parallel',
+                index: seriesModel.get('parallelIndex'),
+                id: seriesModel.get('parallelId')
+            })[0];
+            seriesModel.coordinateSystem = parallelModel.coordinateSystem;
+        }
+    });
+
+    return coordSysList;
+}
+
+CoordinateSystemManager.register('parallel', {create: create$2});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var AxisModel$2 = ComponentModel.extend({
+
+    type: 'baseParallelAxis',
+
+    /**
+     * @type {module:echarts/coord/parallel/Axis}
+     */
+    axis: null,
+
+    /**
+     * @type {Array.<Array.<number>}
+     * @readOnly
+     */
+    activeIntervals: [],
+
+    /**
+     * @return {Object}
+     */
+    getAreaSelectStyle: function () {
+        return makeStyleMapper(
+            [
+                ['fill', 'color'],
+                ['lineWidth', 'borderWidth'],
+                ['stroke', 'borderColor'],
+                ['width', 'width'],
+                ['opacity', 'opacity']
+            ]
+        )(this.getModel('areaSelectStyle'));
+    },
+
+    /**
+     * The code of this feature is put on AxisModel but not ParallelAxis,
+     * because axisModel can be alive after echarts updating but instance of
+     * ParallelAxis having been disposed. this._activeInterval should be kept
+     * when action dispatched (i.e. legend click).
+     *
+     * @param {Array.<Array<number>>} intervals interval.length === 0
+     *                                          means set all active.
+     * @public
+     */
+    setActiveIntervals: function (intervals) {
+        var activeIntervals = this.activeIntervals = clone(intervals);
+
+        // Normalize
+        if (activeIntervals) {
+            for (var i = activeIntervals.length - 1; i >= 0; i--) {
+                asc(activeIntervals[i]);
+            }
+        }
+    },
+
+    /**
+     * @param {number|string} [value] When attempting to detect 'no activeIntervals set',
+     *                         value can not be input.
+     * @return {string} 'normal': no activeIntervals set,
+     *                  'active',
+     *                  'inactive'.
+     * @public
+     */
+    getActiveState: function (value) {
+        var activeIntervals = this.activeIntervals;
+
+        if (!activeIntervals.length) {
+            return 'normal';
+        }
+
+        if (value == null || isNaN(value)) {
+            return 'inactive';
+        }
+
+        // Simple optimization
+        if (activeIntervals.length === 1) {
+            var interval = activeIntervals[0];
+            if (interval[0] <= value && value <= interval[1]) {
+                return 'active';
+            }
+        }
+        else {
+            for (var i = 0, len = activeIntervals.length; i < len; i++) {
+                if (activeIntervals[i][0] <= value && value <= activeIntervals[i][1]) {
+                    return 'active';
+                }
+            }
+        }
+
+        return 'inactive';
+    }
+
+});
+
+var defaultOption$1 = {
+
+    type: 'value',
+
+    /**
+     * @type {Array.<number>}
+     */
+    dim: null, // 0, 1, 2, ...
+
+    // parallelIndex: null,
+
+    areaSelectStyle: {
+        width: 20,
+        borderWidth: 1,
+        borderColor: 'rgba(160,197,232)',
+        color: 'rgba(160,197,232)',
+        opacity: 0.3
+    },
+
+    realtime: true, // Whether realtime update view when select.
+
+    z: 10
+};
+
+merge(AxisModel$2.prototype, axisModelCommonMixin);
+
+function getAxisType$1(axisName, option) {
+    return option.type || (option.data ? 'category' : 'value');
+}
+
+axisModelCreator('parallel', AxisModel$2, getAxisType$1, defaultOption$1);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+ComponentModel.extend({
+
+    type: 'parallel',
+
+    dependencies: ['parallelAxis'],
+
+    /**
+     * @type {module:echarts/coord/parallel/Parallel}
+     */
+    coordinateSystem: null,
+
+    /**
+     * Each item like: 'dim0', 'dim1', 'dim2', ...
+     * @type {Array.<string>}
+     * @readOnly
+     */
+    dimensions: null,
+
+    /**
+     * Coresponding to dimensions.
+     * @type {Array.<number>}
+     * @readOnly
+     */
+    parallelAxisIndex: null,
+
+    layoutMode: 'box',
+
+    defaultOption: {
+        zlevel: 0,
+        z: 0,
+        left: 80,
+        top: 60,
+        right: 80,
+        bottom: 60,
+        // width: {totalWidth} - left - right,
+        // height: {totalHeight} - top - bottom,
+
+        layout: 'horizontal',      // 'horizontal' or 'vertical'
+
+        // FIXME
+        // naming?
+        axisExpandable: false,
+        axisExpandCenter: null,
+        axisExpandCount: 0,
+        axisExpandWidth: 50,      // FIXME '10%' ?
+        axisExpandRate: 17,
+        axisExpandDebounce: 50,
+        // [out, in, jumpTarget]. In percentage. If use [null, 0.05], null means full.
+        // Do not doc to user until necessary.
+        axisExpandSlideTriggerArea: [-0.15, 0.05, 0.4],
+        axisExpandTriggerOn: 'click', // 'mousemove' or 'click'
+
+        parallelAxisDefault: null
+    },
+
+    /**
+     * @override
+     */
+    init: function () {
+        ComponentModel.prototype.init.apply(this, arguments);
+
+        this.mergeOption({});
+    },
+
+    /**
+     * @override
+     */
+    mergeOption: function (newOption) {
+        var thisOption = this.option;
+
+        newOption && merge(thisOption, newOption, true);
+
+        this._initDimensions();
+    },
+
+    /**
+     * Whether series or axis is in this coordinate system.
+     * @param {module:echarts/model/Series|module:echarts/coord/parallel/AxisModel} model
+     * @param {module:echarts/model/Global} ecModel
+     */
+    contains: function (model, ecModel) {
+        var parallelIndex = model.get('parallelIndex');
+        return parallelIndex != null
+            && ecModel.getComponent('parallel', parallelIndex) === this;
+    },
+
+    setAxisExpand: function (opt) {
+        each$1(
+            ['axisExpandable', 'axisExpandCenter', 'axisExpandCount', 'axisExpandWidth', 'axisExpandWindow'],
+            function (name) {
+                if (opt.hasOwnProperty(name)) {
+                    this.option[name] = opt[name];
+                }
+            },
+            this
+        );
+    },
+
+    /**
+     * @private
+     */
+    _initDimensions: function () {
+        var dimensions = this.dimensions = [];
+        var parallelAxisIndex = this.parallelAxisIndex = [];
+
+        var axisModels = filter(this.dependentModels.parallelAxis, function (axisModel) {
+            // Can not use this.contains here, because
+            // initialization has not been completed yet.
+            return (axisModel.get('parallelIndex') || 0) === this.componentIndex;
+        }, this);
+
+        each$1(axisModels, function (axisModel) {
+            dimensions.push('dim' + axisModel.get('dim'));
+            parallelAxisIndex.push(axisModel.componentIndex);
+        });
+    }
+
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @payload
+ * @property {string} parallelAxisId
+ * @property {Array.<Array.<number>>} intervals
+ */
+var actionInfo$1 = {
+    type: 'axisAreaSelect',
+    event: 'axisAreaSelected'
+    // update: 'updateVisual'
+};
+
+registerAction(actionInfo$1, function (payload, ecModel) {
+    ecModel.eachComponent(
+        {mainType: 'parallelAxis', query: payload},
+        function (parallelAxisModel) {
+            parallelAxisModel.axis.model.setActiveIntervals(payload.intervals);
+        }
+    );
+});
+
+/**
+ * @payload
+ */
+registerAction('parallelAxisExpand', function (payload, ecModel) {
+    ecModel.eachComponent(
+        {mainType: 'parallel', query: payload},
+        function (parallelModel) {
+            parallelModel.setAxisExpand(payload);
+        }
+    );
+
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var curry$2 = curry;
+var each$12 = each$1;
+var map$2 = map;
+var mathMin$6 = Math.min;
+var mathMax$6 = Math.max;
+var mathPow$2 = Math.pow;
+
+var COVER_Z = 10000;
+var UNSELECT_THRESHOLD = 6;
+var MIN_RESIZE_LINE_WIDTH = 6;
+var MUTEX_RESOURCE_KEY = 'globalPan';
+
+var DIRECTION_MAP = {
+    w: [0, 0],
+    e: [0, 1],
+    n: [1, 0],
+    s: [1, 1]
+};
+var CURSOR_MAP = {
+    w: 'ew',
+    e: 'ew',
+    n: 'ns',
+    s: 'ns',
+    ne: 'nesw',
+    sw: 'nesw',
+    nw: 'nwse',
+    se: 'nwse'
+};
+var DEFAULT_BRUSH_OPT = {
+    brushStyle: {
+        lineWidth: 2,
+        stroke: 'rgba(0,0,0,0.3)',
+        fill: 'rgba(0,0,0,0.1)'
+    },
+    transformable: true,
+    brushMode: 'single',
+    removeOnClick: false
+};
+
+var baseUID = 0;
+
+/**
+ * @alias module:echarts/component/helper/BrushController
+ * @constructor
+ * @mixin {module:zrender/mixin/Eventful}
+ * @event module:echarts/component/helper/BrushController#brush
+ *        params:
+ *            areas: Array.<Array>, coord relates to container group,
+ *                                    If no container specified, to global.
+ *            opt {
+ *                isEnd: boolean,
+ *                removeOnClick: boolean
+ *            }
+ *
+ * @param {module:zrender/zrender~ZRender} zr
+ */
+function BrushController(zr) {
+
+    if (__DEV__) {
+        assert$1(zr);
+    }
+
+    Eventful.call(this);
+
+    /**
+     * @type {module:zrender/zrender~ZRender}
+     * @private
+     */
+    this._zr = zr;
+
+    /**
+     * @type {module:zrender/container/Group}
+     * @readOnly
+     */
+    this.group = new Group();
+
+    /**
+     * Only for drawing (after enabledBrush).
+     *     'line', 'rect', 'polygon' or false
+     *     If passing false/null/undefined, disable brush.
+     *     If passing 'auto', determined by panel.defaultBrushType
+     * @private
+     * @type {string}
+     */
+    this._brushType;
+
+    /**
+     * Only for drawing (after enabledBrush).
+     *
+     * @private
+     * @type {Object}
+     */
+    this._brushOption;
+
+    /**
+     * @private
+     * @type {Object}
+     */
+    this._panels;
+
+    /**
+     * @private
+     * @type {Array.<nubmer>}
+     */
+    this._track = [];
+
+    /**
+     * @private
+     * @type {boolean}
+     */
+    this._dragging;
+
+    /**
+     * @private
+     * @type {Array}
+     */
+    this._covers = [];
+
+    /**
+     * @private
+     * @type {moudule:zrender/container/Group}
+     */
+    this._creatingCover;
+
+    /**
+     * `true` means global panel
+     * @private
+     * @type {module:zrender/container/Group|boolean}
+     */
+    this._creatingPanel;
+
+    /**
+     * @private
+     * @type {boolean}
+     */
+    this._enableGlobalPan;
+
+    /**
+     * @private
+     * @type {boolean}
+     */
+    if (__DEV__) {
+        this._mounted;
+    }
+
+    /**
+     * @private
+     * @type {string}
+     */
+    this._uid = 'brushController_' + baseUID++;
+
+    /**
+     * @private
+     * @type {Object}
+     */
+    this._handlers = {};
+    each$12(mouseHandlers, function (handler, eventName) {
+        this._handlers[eventName] = bind(handler, this);
+    }, this);
+}
+
+BrushController.prototype = {
+
+    constructor: BrushController,
+
+    /**
+     * If set to null/undefined/false, select disabled.
+     * @param {Object} brushOption
+     * @param {string|boolean} brushOption.brushType 'line', 'rect', 'polygon' or false
+     *                          If passing false/null/undefined, disable brush.
+     *                          If passing 'auto', determined by panel.defaultBrushType.
+     *                              ('auto' can not be used in global panel)
+     * @param {number} [brushOption.brushMode='single'] 'single' or 'multiple'
+     * @param {boolean} [brushOption.transformable=true]
+     * @param {boolean} [brushOption.removeOnClick=false]
+     * @param {Object} [brushOption.brushStyle]
+     * @param {number} [brushOption.brushStyle.width]
+     * @param {number} [brushOption.brushStyle.lineWidth]
+     * @param {string} [brushOption.brushStyle.stroke]
+     * @param {string} [brushOption.brushStyle.fill]
+     * @param {number} [brushOption.z]
+     */
+    enableBrush: function (brushOption) {
+        if (__DEV__) {
+            assert$1(this._mounted);
+        }
+
+        this._brushType && doDisableBrush(this);
+        brushOption.brushType && doEnableBrush(this, brushOption);
+
+        return this;
+    },
+
+    /**
+     * @param {Array.<Object>} panelOpts If not pass, it is global brush.
+     *        Each items: {
+     *            panelId, // mandatory.
+     *            clipPath, // mandatory. function.
+     *            isTargetByCursor, // mandatory. function.
+     *            defaultBrushType, // optional, only used when brushType is 'auto'.
+     *            getLinearBrushOtherExtent, // optional. function.
+     *        }
+     */
+    setPanels: function (panelOpts) {
+        if (panelOpts && panelOpts.length) {
+            var panels = this._panels = {};
+            each$1(panelOpts, function (panelOpts) {
+                panels[panelOpts.panelId] = clone(panelOpts);
+            });
+        }
+        else {
+            this._panels = null;
+        }
+        return this;
+    },
+
+    /**
+     * @param {Object} [opt]
+     * @return {boolean} [opt.enableGlobalPan=false]
+     */
+    mount: function (opt) {
+        opt = opt || {};
+
+        if (__DEV__) {
+            this._mounted = true; // should be at first.
+        }
+
+        this._enableGlobalPan = opt.enableGlobalPan;
+
+        var thisGroup = this.group;
+        this._zr.add(thisGroup);
+
+        thisGroup.attr({
+            position: opt.position || [0, 0],
+            rotation: opt.rotation || 0,
+            scale: opt.scale || [1, 1]
+        });
+        this._transform = thisGroup.getLocalTransform();
+
+        return this;
+    },
+
+    eachCover: function (cb, context) {
+        each$12(this._covers, cb, context);
+    },
+
+    /**
+     * Update covers.
+     * @param {Array.<Object>} brushOptionList Like:
+     *        [
+     *            {id: 'xx', brushType: 'line', range: [23, 44], brushStyle, transformable},
+     *            {id: 'yy', brushType: 'rect', range: [[23, 44], [23, 54]]},
+     *            ...
+     *        ]
+     *        `brushType` is required in each cover info. (can not be 'auto')
+     *        `id` is not mandatory.
+     *        `brushStyle`, `transformable` is not mandatory, use DEFAULT_BRUSH_OPT by default.
+     *        If brushOptionList is null/undefined, all covers removed.
+     */
+    updateCovers: function (brushOptionList) {
+        if (__DEV__) {
+            assert$1(this._mounted);
+        }
+
+        brushOptionList = map(brushOptionList, function (brushOption) {
+            return merge(clone(DEFAULT_BRUSH_OPT), brushOption, true);
+        });
+
+        var tmpIdPrefix = '\0-brush-index-';
+        var oldCovers = this._covers;
+        var newCovers = this._covers = [];
+        var controller = this;
+        var creatingCover = this._creatingCover;
+
+        (new DataDiffer(oldCovers, brushOptionList, oldGetKey, getKey))
+            .add(addOrUpdate)
+            .update(addOrUpdate)
+            .remove(remove)
+            .execute();
+
+        return this;
+
+        function getKey(brushOption, index) {
+            return (brushOption.id != null ? brushOption.id : tmpIdPrefix + index)
+                + '-' + brushOption.brushType;
+        }
+
+        function oldGetKey(cover, index) {
+            return getKey(cover.__brushOption, index);
+        }
+
+        function addOrUpdate(newIndex, oldIndex) {
+            var newBrushOption = brushOptionList[newIndex];
+            // Consider setOption in event listener of brushSelect,
+            // where updating cover when creating should be forbiden.
+            if (oldIndex != null && oldCovers[oldIndex] === creatingCover) {
+                newCovers[newIndex] = oldCovers[oldIndex];
+            }
+            else {
+                var cover = newCovers[newIndex] = oldIndex != null
+                    ? (
+                        oldCovers[oldIndex].__brushOption = newBrushOption,
+                        oldCovers[oldIndex]
+                    )
+                    : endCreating(controller, createCover(controller, newBrushOption));
+                updateCoverAfterCreation(controller, cover);
+            }
+        }
+
+        function remove(oldIndex) {
+            if (oldCovers[oldIndex] !== creatingCover) {
+                controller.group.remove(oldCovers[oldIndex]);
+            }
+        }
+    },
+
+    unmount: function () {
+        if (__DEV__) {
+            if (!this._mounted) {
+                return;
+            }
+        }
+
+        this.enableBrush(false);
+
+        // container may 'removeAll' outside.
+        clearCovers(this);
+        this._zr.remove(this.group);
+
+        if (__DEV__) {
+            this._mounted = false; // should be at last.
+        }
+
+        return this;
+    },
+
+    dispose: function () {
+        this.unmount();
+        this.off();
+    }
+};
+
+mixin(BrushController, Eventful);
+
+function doEnableBrush(controller, brushOption) {
+    var zr = controller._zr;
+
+    // Consider roam, which takes globalPan too.
+    if (!controller._enableGlobalPan) {
+        take(zr, MUTEX_RESOURCE_KEY, controller._uid);
+    }
+
+    each$12(controller._handlers, function (handler, eventName) {
+        zr.on(eventName, handler);
+    });
+
+    controller._brushType = brushOption.brushType;
+    controller._brushOption = merge(clone(DEFAULT_BRUSH_OPT), brushOption, true);
+}
+
+function doDisableBrush(controller) {
+    var zr = controller._zr;
+
+    release(zr, MUTEX_RESOURCE_KEY, controller._uid);
+
+    each$12(controller._handlers, function (handler, eventName) {
+        zr.off(eventName, handler);
+    });
+
+    controller._brushType = controller._brushOption = null;
+}
+
+function createCover(controller, brushOption) {
+    var cover = coverRenderers[brushOption.brushType].createCover(controller, brushOption);
+    cover.__brushOption = brushOption;
+    updateZ$1(cover, brushOption);
+    controller.group.add(cover);
+    return cover;
+}
+
+function endCreating(controller, creatingCover) {
+    var coverRenderer = getCoverRenderer(creatingCover);
+    if (coverRenderer.endCreating) {
+        coverRenderer.endCreating(controller, creatingCover);
+        updateZ$1(creatingCover, creatingCover.__brushOption);
+    }
+    return creatingCover;
+}
+
+function updateCoverShape(controller, cover) {
+    var brushOption = cover.__brushOption;
+    getCoverRenderer(cover).updateCoverShape(
+        controller, cover, brushOption.range, brushOption
+    );
+}
+
+function updateZ$1(cover, brushOption) {
+    var z = brushOption.z;
+    z == null && (z = COVER_Z);
+    cover.traverse(function (el) {
+        el.z = z;
+        el.z2 = z; // Consider in given container.
+    });
+}
+
+function updateCoverAfterCreation(controller, cover) {
+    getCoverRenderer(cover).updateCommon(controller, cover);
+    updateCoverShape(controller, cover);
+}
+
+function getCoverRenderer(cover) {
+    return coverRenderers[cover.__brushOption.brushType];
+}
+
+// return target panel or `true` (means global panel)
+function getPanelByPoint(controller, e, localCursorPoint) {
+    var panels = controller._panels;
+    if (!panels) {
+        return true; // Global panel
+    }
+    var panel;
+    var transform = controller._transform;
+    each$12(panels, function (pn) {
+        pn.isTargetByCursor(e, localCursorPoint, transform) && (panel = pn);
+    });
+    return panel;
+}
+
+// Return a panel or true
+function getPanelByCover(controller, cover) {
+    var panels = controller._panels;
+    if (!panels) {
+        return true; // Global panel
+    }
+    var panelId = cover.__brushOption.panelId;
+    // User may give cover without coord sys info,
+    // which is then treated as global panel.
+    return panelId != null ? panels[panelId] : true;
+}
+
+function clearCovers(controller) {
+    var covers = controller._covers;
+    var originalLength = covers.length;
+    each$12(covers, function (cover) {
+        controller.group.remove(cover);
+    }, controller);
+    covers.length = 0;
+
+    return !!originalLength;
+}
+
+function trigger(controller, opt) {
+    var areas = map$2(controller._covers, function (cover) {
+        var brushOption = cover.__brushOption;
+        var range = clone(brushOption.range);
+        return {
+            brushType: brushOption.brushType,
+            panelId: brushOption.panelId,
+            range: range
+        };
+    });
+
+    controller.trigger('brush', areas, {
+        isEnd: !!opt.isEnd,
+        removeOnClick: !!opt.removeOnClick
+    });
+}
+
+function shouldShowCover(controller) {
+    var track = controller._track;
+
+    if (!track.length) {
+        return false;
+    }
+
+    var p2 = track[track.length - 1];
+    var p1 = track[0];
+    var dx = p2[0] - p1[0];
+    var dy = p2[1] - p1[1];
+    var dist = mathPow$2(dx * dx + dy * dy, 0.5);
+
+    return dist > UNSELECT_THRESHOLD;
+}
+
+function getTrackEnds(track) {
+    var tail = track.length - 1;
+    tail < 0 && (tail = 0);
+    return [track[0], track[tail]];
+}
+
+function createBaseRectCover(doDrift, controller, brushOption, edgeNames) {
+    var cover = new Group();
+
+    cover.add(new Rect({
+        name: 'main',
+        style: makeStyle(brushOption),
+        silent: true,
+        draggable: true,
+        cursor: 'move',
+        drift: curry$2(doDrift, controller, cover, 'nswe'),
+        ondragend: curry$2(trigger, controller, {isEnd: true})
+    }));
+
+    each$12(
+        edgeNames,
+        function (name) {
+            cover.add(new Rect({
+                name: name,
+                style: {opacity: 0},
+                draggable: true,
+                silent: true,
+                invisible: true,
+                drift: curry$2(doDrift, controller, cover, name),
+                ondragend: curry$2(trigger, controller, {isEnd: true})
+            }));
+        }
+    );
+
+    return cover;
+}
+
+function updateBaseRect(controller, cover, localRange, brushOption) {
+    var lineWidth = brushOption.brushStyle.lineWidth || 0;
+    var handleSize = mathMax$6(lineWidth, MIN_RESIZE_LINE_WIDTH);
+    var x = localRange[0][0];
+    var y = localRange[1][0];
+    var xa = x - lineWidth / 2;
+    var ya = y - lineWidth / 2;
+    var x2 = localRange[0][1];
+    var y2 = localRange[1][1];
+    var x2a = x2 - handleSize + lineWidth / 2;
+    var y2a = y2 - handleSize + lineWidth / 2;
+    var width = x2 - x;
+    var height = y2 - y;
+    var widtha = width + lineWidth;
+    var heighta = height + lineWidth;
+
+    updateRectShape(controller, cover, 'main', x, y, width, height);
+
+    if (brushOption.transformable) {
+        updateRectShape(controller, cover, 'w', xa, ya, handleSize, heighta);
+        updateRectShape(controller, cover, 'e', x2a, ya, handleSize, heighta);
+        updateRectShape(controller, cover, 'n', xa, ya, widtha, handleSize);
+        updateRectShape(controller, cover, 's', xa, y2a, widtha, handleSize);
+
+        updateRectShape(controller, cover, 'nw', xa, ya, handleSize, handleSize);
+        updateRectShape(controller, cover, 'ne', x2a, ya, handleSize, handleSize);
+        updateRectShape(controller, cover, 'sw', xa, y2a, handleSize, handleSize);
+        updateRectShape(controller, cover, 'se', x2a, y2a, handleSize, handleSize);
+    }
+}
+
+function updateCommon(controller, cover) {
+    var brushOption = cover.__brushOption;
+    var transformable = brushOption.transformable;
+
+    var mainEl = cover.childAt(0);
+    mainEl.useStyle(makeStyle(brushOption));
+    mainEl.attr({
+        silent: !transformable,
+        cursor: transformable ? 'move' : 'default'
+    });
+
+    each$12(
+        ['w', 'e', 'n', 's', 'se', 'sw', 'ne', 'nw'],
+        function (name) {
+            var el = cover.childOfName(name);
+            var globalDir = getGlobalDirection(controller, name);
+
+            el && el.attr({
+                silent: !transformable,
+                invisible: !transformable,
+                cursor: transformable ? CURSOR_MAP[globalDir] + '-resize' : null
+            });
+        }
+    );
+}
+
+function updateRectShape(controller, cover, name, x, y, w, h) {
+    var el = cover.childOfName(name);
+    el && el.setShape(pointsToRect(
+        clipByPanel(controller, cover, [[x, y], [x + w, y + h]])
+    ));
+}
+
+function makeStyle(brushOption) {
+    return defaults({strokeNoScale: true}, brushOption.brushStyle);
+}
+
+function formatRectRange(x, y, x2, y2) {
+    var min = [mathMin$6(x, x2), mathMin$6(y, y2)];
+    var max = [mathMax$6(x, x2), mathMax$6(y, y2)];
+
+    return [
+        [min[0], max[0]], // x range
+        [min[1], max[1]] // y range
+    ];
+}
+
+function getTransform$1(controller) {
+    return getTransform(controller.group);
+}
+
+function getGlobalDirection(controller, localDirection) {
+    if (localDirection.length > 1) {
+        localDirection = localDirection.split('');
+        var globalDir = [
+            getGlobalDirection(controller, localDirection[0]),
+            getGlobalDirection(controller, localDirection[1])
+        ];
+        (globalDir[0] === 'e' || globalDir[0] === 'w') && globalDir.reverse();
+        return globalDir.join('');
+    }
+    else {
+        var map$$1 = {w: 'left', e: 'right', n: 'top', s: 'bottom'};
+        var inverseMap = {left: 'w', right: 'e', top: 'n', bottom: 's'};
+        var globalDir = transformDirection(
+            map$$1[localDirection], getTransform$1(controller)
+        );
+        return inverseMap[globalDir];
+    }
+}
+
+function driftRect(toRectRange, fromRectRange, controller, cover, name, dx, dy, e) {
+    var brushOption = cover.__brushOption;
+    var rectRange = toRectRange(brushOption.range);
+    var localDelta = toLocalDelta(controller, dx, dy);
+
+    each$12(name.split(''), function (namePart) {
+        var ind = DIRECTION_MAP[namePart];
+        rectRange[ind[0]][ind[1]] += localDelta[ind[0]];
+    });
+
+    brushOption.range = fromRectRange(formatRectRange(
+        rectRange[0][0], rectRange[1][0], rectRange[0][1], rectRange[1][1]
+    ));
+
+    updateCoverAfterCreation(controller, cover);
+    trigger(controller, {isEnd: false});
+}
+
+function driftPolygon(controller, cover, dx, dy, e) {
+    var range = cover.__brushOption.range;
+    var localDelta = toLocalDelta(controller, dx, dy);
+
+    each$12(range, function (point) {
+        point[0] += localDelta[0];
+        point[1] += localDelta[1];
+    });
+
+    updateCoverAfterCreation(controller, cover);
+    trigger(controller, {isEnd: false});
+}
+
+function toLocalDelta(controller, dx, dy) {
+    var thisGroup = controller.group;
+    var localD = thisGroup.transformCoordToLocal(dx, dy);
+    var localZero = thisGroup.transformCoordToLocal(0, 0);
+
+    return [localD[0] - localZero[0], localD[1] - localZero[1]];
+}
+
+function clipByPanel(controller, cover, data) {
+    var panel = getPanelByCover(controller, cover);
+
+    return (panel && panel !== true)
+        ? panel.clipPath(data, controller._transform)
+        : clone(data);
+}
+
+function pointsToRect(points) {
+    var xmin = mathMin$6(points[0][0], points[1][0]);
+    var ymin = mathMin$6(points[0][1], points[1][1]);
+    var xmax = mathMax$6(points[0][0], points[1][0]);
+    var ymax = mathMax$6(points[0][1], points[1][1]);
+
+    return {
+        x: xmin,
+        y: ymin,
+        width: xmax - xmin,
+        height: ymax - ymin
+    };
+}
+
+function resetCursor(controller, e, localCursorPoint) {
+    // Check active
+    if (!controller._brushType) {
+        return;
+    }
+
+    var zr = controller._zr;
+    var covers = controller._covers;
+    var currPanel = getPanelByPoint(controller, e, localCursorPoint);
+
+    // Check whether in covers.
+    if (!controller._dragging) {
+        for (var i = 0; i < covers.length; i++) {
+            var brushOption = covers[i].__brushOption;
+            if (currPanel
+                && (currPanel === true || brushOption.panelId === currPanel.panelId)
+                && coverRenderers[brushOption.brushType].contain(
+                    covers[i], localCursorPoint[0], localCursorPoint[1]
+                )
+            ) {
+                // Use cursor style set on cover.
+                return;
+            }
+        }
+    }
+
+    currPanel && zr.setCursorStyle('crosshair');
+}
+
+function preventDefault(e) {
+    var rawE = e.event;
+    rawE.preventDefault && rawE.preventDefault();
+}
+
+function mainShapeContain(cover, x, y) {
+    return cover.childOfName('main').contain(x, y);
+}
+
+function updateCoverByMouse(controller, e, localCursorPoint, isEnd) {
+    var creatingCover = controller._creatingCover;
+    var panel = controller._creatingPanel;
+    var thisBrushOption = controller._brushOption;
+    var eventParams;
+
+    controller._track.push(localCursorPoint.slice());
+
+    if (shouldShowCover(controller) || creatingCover) {
+
+        if (panel && !creatingCover) {
+            thisBrushOption.brushMode === 'single' && clearCovers(controller);
+            var brushOption = clone(thisBrushOption);
+            brushOption.brushType = determineBrushType(brushOption.brushType, panel);
+            brushOption.panelId = panel === true ? null : panel.panelId;
+            creatingCover = controller._creatingCover = createCover(controller, brushOption);
+            controller._covers.push(creatingCover);
+        }
+
+        if (creatingCover) {
+            var coverRenderer = coverRenderers[determineBrushType(controller._brushType, panel)];
+            var coverBrushOption = creatingCover.__brushOption;
+
+            coverBrushOption.range = coverRenderer.getCreatingRange(
+                clipByPanel(controller, creatingCover, controller._track)
+            );
+
+            if (isEnd) {
+                endCreating(controller, creatingCover);
+                coverRenderer.updateCommon(controller, creatingCover);
+            }
+
+            updateCoverShape(controller, creatingCover);
+
+            eventParams = {isEnd: isEnd};
+        }
+    }
+    else if (
+        isEnd
+        && thisBrushOption.brushMode === 'single'
+        && thisBrushOption.removeOnClick
+    ) {
+        // Help user to remove covers easily, only by a tiny drag, in 'single' mode.
+        // But a single click do not clear covers, because user may have casual
+        // clicks (for example, click on other component and do not expect covers
+        // disappear).
+        // Only some cover removed, trigger action, but not every click trigger action.
+        if (getPanelByPoint(controller, e, localCursorPoint) && clearCovers(controller)) {
+            eventParams = {isEnd: isEnd, removeOnClick: true};
+        }
+    }
+
+    return eventParams;
+}
+
+function determineBrushType(brushType, panel) {
+    if (brushType === 'auto') {
+        if (__DEV__) {
+            assert$1(
+                panel && panel.defaultBrushType,
+                'MUST have defaultBrushType when brushType is "atuo"'
+            );
+        }
+        return panel.defaultBrushType;
+    }
+    return brushType;
+}
+
+var mouseHandlers = {
+
+    mousedown: function (e) {
+        if (this._dragging) {
+            // In case some browser do not support globalOut,
+            // and release mose out side the browser.
+            handleDragEnd.call(this, e);
+        }
+        else if (!e.target || !e.target.draggable) {
+
+            preventDefault(e);
+
+            var localCursorPoint = this.group.transformCoordToLocal(e.offsetX, e.offsetY);
+
+            this._creatingCover = null;
+            var panel = this._creatingPanel = getPanelByPoint(this, e, localCursorPoint);
+
+            if (panel) {
+                this._dragging = true;
+                this._track = [localCursorPoint.slice()];
+            }
+        }
+    },
+
+    mousemove: function (e) {
+        var localCursorPoint = this.group.transformCoordToLocal(e.offsetX, e.offsetY);
+
+        resetCursor(this, e, localCursorPoint);
+
+        if (this._dragging) {
+
+            preventDefault(e);
+
+            var eventParams = updateCoverByMouse(this, e, localCursorPoint, false);
+
+            eventParams && trigger(this, eventParams);
+        }
+    },
+
+    mouseup: handleDragEnd //,
+
+    // FIXME
+    // in tooltip, globalout should not be triggered.
+    // globalout: handleDragEnd
+};
+
+function handleDragEnd(e) {
+    if (this._dragging) {
+
+        preventDefault(e);
+
+        var localCursorPoint = this.group.transformCoordToLocal(e.offsetX, e.offsetY);
+        var eventParams = updateCoverByMouse(this, e, localCursorPoint, true);
+
+        this._dragging = false;
+        this._track = [];
+        this._creatingCover = null;
+
+        // trigger event shoule be at final, after procedure will be nested.
+        eventParams && trigger(this, eventParams);
+    }
+}
+
+/**
+ * key: brushType
+ * @type {Object}
+ */
+var coverRenderers = {
+
+    lineX: getLineRenderer(0),
+
+    lineY: getLineRenderer(1),
+
+    rect: {
+        createCover: function (controller, brushOption) {
+            return createBaseRectCover(
+                curry$2(
+                    driftRect,
+                    function (range) {
+                        return range;
+                    },
+                    function (range) {
+                        return range;
+                    }
+                ),
+                controller,
+                brushOption,
+                ['w', 'e', 'n', 's', 'se', 'sw', 'ne', 'nw']
+            );
+        },
+        getCreatingRange: function (localTrack) {
+            var ends = getTrackEnds(localTrack);
+            return formatRectRange(ends[1][0], ends[1][1], ends[0][0], ends[0][1]);
+        },
+        updateCoverShape: function (controller, cover, localRange, brushOption) {
+            updateBaseRect(controller, cover, localRange, brushOption);
+        },
+        updateCommon: updateCommon,
+        contain: mainShapeContain
+    },
+
+    polygon: {
+        createCover: function (controller, brushOption) {
+            var cover = new Group();
+
+            // Do not use graphic.Polygon because graphic.Polyline do not close the
+            // border of the shape when drawing, which is a better experience for user.
+            cover.add(new Polyline({
+                name: 'main',
+                style: makeStyle(brushOption),
+                silent: true
+            }));
+
+            return cover;
+        },
+        getCreatingRange: function (localTrack) {
+            return localTrack;
+        },
+        endCreating: function (controller, cover) {
+            cover.remove(cover.childAt(0));
+            // Use graphic.Polygon close the shape.
+            cover.add(new Polygon({
+                name: 'main',
+                draggable: true,
+                drift: curry$2(driftPolygon, controller, cover),
+                ondragend: curry$2(trigger, controller, {isEnd: true})
+            }));
+        },
+        updateCoverShape: function (controller, cover, localRange, brushOption) {
+            cover.childAt(0).setShape({
+                points: clipByPanel(controller, cover, localRange)
+            });
+        },
+        updateCommon: updateCommon,
+        contain: mainShapeContain
+    }
+};
+
+function getLineRenderer(xyIndex) {
+    return {
+        createCover: function (controller, brushOption) {
+            return createBaseRectCover(
+                curry$2(
+                    driftRect,
+                    function (range) {
+                        var rectRange = [range, [0, 100]];
+                        xyIndex && rectRange.reverse();
+                        return rectRange;
+                    },
+                    function (rectRange) {
+                        return rectRange[xyIndex];
+                    }
+                ),
+                controller,
+                brushOption,
+                [['w', 'e'], ['n', 's']][xyIndex]
+            );
+        },
+        getCreatingRange: function (localTrack) {
+            var ends = getTrackEnds(localTrack);
+            var min = mathMin$6(ends[0][xyIndex], ends[1][xyIndex]);
+            var max = mathMax$6(ends[0][xyIndex], ends[1][xyIndex]);
+
+            return [min, max];
+        },
+        updateCoverShape: function (controller, cover, localRange, brushOption) {
+            var otherExtent;
+            // If brushWidth not specified, fit the panel.
+            var panel = getPanelByCover(controller, cover);
+            if (panel !== true && panel.getLinearBrushOtherExtent) {
+                otherExtent = panel.getLinearBrushOtherExtent(
+                    xyIndex, controller._transform
+                );
+            }
+            else {
+                var zr = controller._zr;
+                otherExtent = [0, [zr.getWidth(), zr.getHeight()][1 - xyIndex]];
+            }
+            var rectRange = [localRange, otherExtent];
+            xyIndex && rectRange.reverse();
+
+            updateBaseRect(controller, cover, rectRange, brushOption);
+        },
+        updateCommon: updateCommon,
+        contain: mainShapeContain
+    };
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+function makeRectPanelClipPath(rect) {
+    rect = normalizeRect(rect);
+    return function (localPoints, transform) {
+        return clipPointsByRect(localPoints, rect);
+    };
+}
+
+function makeLinearBrushOtherExtent(rect, specifiedXYIndex) {
+    rect = normalizeRect(rect);
+    return function (xyIndex) {
+        var idx = specifiedXYIndex != null ? specifiedXYIndex : xyIndex;
+        var brushWidth = idx ? rect.width : rect.height;
+        var base = idx ? rect.x : rect.y;
+        return [base, base + (brushWidth || 0)];
+    };
+}
+
+function makeRectIsTargetByCursor(rect, api, targetModel) {
+    rect = normalizeRect(rect);
+    return function (e, localCursorPoint, transform) {
+        return rect.contain(localCursorPoint[0], localCursorPoint[1])
+            && !onIrrelevantElement(e, api, targetModel);
+    };
+}
+
+// Consider width/height is negative.
+function normalizeRect(rect) {
+    return BoundingRect.create(rect);
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var elementList = ['axisLine', 'axisTickLabel', 'axisName'];
+
+var AxisView$2 = extendComponentView({
+
+    type: 'parallelAxis',
+
+    /**
+     * @override
+     */
+    init: function (ecModel, api) {
+        AxisView$2.superApply(this, 'init', arguments);
+
+        /**
+         * @type {module:echarts/component/helper/BrushController}
+         */
+        (this._brushController = new BrushController(api.getZr()))
+            .on('brush', bind(this._onBrush, this));
+    },
+
+    /**
+     * @override
+     */
+    render: function (axisModel, ecModel, api, payload) {
+        if (fromAxisAreaSelect(axisModel, ecModel, payload)) {
+            return;
+        }
+
+        this.axisModel = axisModel;
+        this.api = api;
+
+        this.group.removeAll();
+
+        var oldAxisGroup = this._axisGroup;
+        this._axisGroup = new Group();
+        this.group.add(this._axisGroup);
+
+        if (!axisModel.get('show')) {
+            return;
+        }
+
+        var coordSysModel = getCoordSysModel(axisModel, ecModel);
+        var coordSys = coordSysModel.coordinateSystem;
+
+        var areaSelectStyle = axisModel.getAreaSelectStyle();
+        var areaWidth = areaSelectStyle.width;
+
+        var dim = axisModel.axis.dim;
+        var axisLayout = coordSys.getAxisLayout(dim);
+
+        var builderOpt = extend(
+            {strokeContainThreshold: areaWidth},
+            axisLayout
+        );
+
+        var axisBuilder = new AxisBuilder(axisModel, builderOpt);
+
+        each$1(elementList, axisBuilder.add, axisBuilder);
+
+        this._axisGroup.add(axisBuilder.getGroup());
+
+        this._refreshBrushController(
+            builderOpt, areaSelectStyle, axisModel, coordSysModel, areaWidth, api
+        );
+
+        var animationModel = (payload && payload.animation === false) ? null : axisModel;
+        groupTransition(oldAxisGroup, this._axisGroup, animationModel);
+    },
+
+    // /**
+    //  * @override
+    //  */
+    // updateVisual: function (axisModel, ecModel, api, payload) {
+    //     this._brushController && this._brushController
+    //         .updateCovers(getCoverInfoList(axisModel));
+    // },
+
+    _refreshBrushController: function (
+        builderOpt, areaSelectStyle, axisModel, coordSysModel, areaWidth, api
+    ) {
+        // After filtering, axis may change, select area needs to be update.
+        var extent = axisModel.axis.getExtent();
+        var extentLen = extent[1] - extent[0];
+        var extra = Math.min(30, Math.abs(extentLen) * 0.1); // Arbitrary value.
+
+        // width/height might be negative, which will be
+        // normalized in BoundingRect.
+        var rect = BoundingRect.create({
+            x: extent[0],
+            y: -areaWidth / 2,
+            width: extentLen,
+            height: areaWidth
+        });
+        rect.x -= extra;
+        rect.width += 2 * extra;
+
+        this._brushController
+            .mount({
+                enableGlobalPan: true,
+                rotation: builderOpt.rotation,
+                position: builderOpt.position
+            })
+            .setPanels([{
+                panelId: 'pl',
+                clipPath: makeRectPanelClipPath(rect),
+                isTargetByCursor: makeRectIsTargetByCursor(rect, api, coordSysModel),
+                getLinearBrushOtherExtent: makeLinearBrushOtherExtent(rect, 0)
+            }])
+            .enableBrush({
+                brushType: 'lineX',
+                brushStyle: areaSelectStyle,
+                removeOnClick: true
+            })
+            .updateCovers(getCoverInfoList(axisModel));
+    },
+
+    _onBrush: function (coverInfoList, opt) {
+        // Do not cache these object, because the mey be changed.
+        var axisModel = this.axisModel;
+        var axis = axisModel.axis;
+        var intervals = map(coverInfoList, function (coverInfo) {
+            return [
+                axis.coordToData(coverInfo.range[0], true),
+                axis.coordToData(coverInfo.range[1], true)
+            ];
+        });
+
+        // If realtime is true, action is not dispatched on drag end, because
+        // the drag end emits the same params with the last drag move event,
+        // and may have some delay when using touch pad.
+        if (!axisModel.option.realtime === opt.isEnd || opt.removeOnClick) { // jshint ignore:line
+            this.api.dispatchAction({
+                type: 'axisAreaSelect',
+                parallelAxisId: axisModel.id,
+                intervals: intervals
+            });
+        }
+    },
+
+    /**
+     * @override
+     */
+    dispose: function () {
+        this._brushController.dispose();
+    }
+});
+
+function fromAxisAreaSelect(axisModel, ecModel, payload) {
+    return payload
+        && payload.type === 'axisAreaSelect'
+        && ecModel.findComponents(
+            {mainType: 'parallelAxis', query: payload}
+        )[0] === axisModel;
+}
+
+function getCoverInfoList(axisModel) {
+    var axis = axisModel.axis;
+    return map(axisModel.activeIntervals, function (interval) {
+        return {
+            brushType: 'lineX',
+            panelId: 'pl',
+            range: [
+                axis.dataToCoord(interval[0], true),
+                axis.dataToCoord(interval[1], true)
+            ]
+        };
+    });
+}
+
+function getCoordSysModel(axisModel, ecModel) {
+    return ecModel.getComponent(
+        'parallel', axisModel.get('parallelIndex')
+    );
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var CLICK_THRESHOLD = 5; // > 4
+
+// Parallel view
+extendComponentView({
+    type: 'parallel',
+
+    render: function (parallelModel, ecModel, api) {
+        this._model = parallelModel;
+        this._api = api;
+
+        if (!this._handlers) {
+            this._handlers = {};
+            each$1(handlers, function (handler, eventName) {
+                api.getZr().on(eventName, this._handlers[eventName] = bind(handler, this));
+            }, this);
+        }
+
+        createOrUpdate(
+            this,
+            '_throttledDispatchExpand',
+            parallelModel.get('axisExpandRate'),
+            'fixRate'
+        );
+    },
+
+    dispose: function (ecModel, api) {
+        each$1(this._handlers, function (handler, eventName) {
+            api.getZr().off(eventName, handler);
+        });
+        this._handlers = null;
+    },
+
+    /**
+     * @param {Object} [opt] If null, cancle the last action triggering for debounce.
+     */
+    _throttledDispatchExpand: function (opt) {
+        this._dispatchExpand(opt);
+    },
+
+    _dispatchExpand: function (opt) {
+        opt && this._api.dispatchAction(
+            extend({type: 'parallelAxisExpand'}, opt)
+        );
+    }
+
+});
+
+var handlers = {
+
+    mousedown: function (e) {
+        if (checkTrigger(this, 'click')) {
+            this._mouseDownPoint = [e.offsetX, e.offsetY];
+        }
+    },
+
+    mouseup: function (e) {
+        var mouseDownPoint = this._mouseDownPoint;
+
+        if (checkTrigger(this, 'click') && mouseDownPoint) {
+            var point = [e.offsetX, e.offsetY];
+            var dist = Math.pow(mouseDownPoint[0] - point[0], 2)
+                + Math.pow(mouseDownPoint[1] - point[1], 2);
+
+            if (dist > CLICK_THRESHOLD) {
+                return;
+            }
+
+            var result = this._model.coordinateSystem.getSlidedAxisExpandWindow(
+                [e.offsetX, e.offsetY]
+            );
+
+            result.behavior !== 'none' && this._dispatchExpand({
+                axisExpandWindow: result.axisExpandWindow
+            });
+        }
+
+        this._mouseDownPoint = null;
+    },
+
+    mousemove: function (e) {
+        // Should do nothing when brushing.
+        if (this._mouseDownPoint || !checkTrigger(this, 'mousemove')) {
+            return;
+        }
+        var model = this._model;
+        var result = model.coordinateSystem.getSlidedAxisExpandWindow(
+            [e.offsetX, e.offsetY]
+        );
+
+        var behavior = result.behavior;
+        behavior === 'jump' && this._throttledDispatchExpand.debounceNextCall(model.get('axisExpandDebounce'));
+        this._throttledDispatchExpand(
+            behavior === 'none'
+                ? null // Cancle the last trigger, in case that mouse slide out of the area quickly.
+                : {
+                    axisExpandWindow: result.axisExpandWindow,
+                    // Jumping uses animation, and sliding suppresses animation.
+                    animation: behavior === 'jump'  ? null : false
+                }
+        );
+    }
+};
+
+function checkTrigger(view, triggerOn) {
+    var model = view._model;
+    return model.get('axisExpandable') && model.get('axisExpandTriggerOn') === triggerOn;
+}
+
+registerPreprocessor(parallelPreprocessor);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+SeriesModel.extend({
+
+    type: 'series.parallel',
+
+    dependencies: ['parallel'],
+
+    visualColorAccessPath: 'lineStyle.color',
+
+    getInitialData: function (option, ecModel) {
+        var source = this.getSource();
+
+        setEncodeAndDimensions(source, this);
+
+        return createListFromArray(source, this);
+    },
+
+    /**
+     * User can get data raw indices on 'axisAreaSelected' event received.
+     *
+     * @public
+     * @param {string} activeState 'active' or 'inactive' or 'normal'
+     * @return {Array.<number>} Raw indices
+     */
+    getRawIndicesByActiveState: function (activeState) {
+        var coordSys = this.coordinateSystem;
+        var data = this.getData();
+        var indices = [];
+
+        coordSys.eachActiveState(data, function (theActiveState, dataIndex) {
+            if (activeState === theActiveState) {
+                indices.push(data.getRawIndex(dataIndex));
+            }
+        });
+
+        return indices;
+    },
+
+    defaultOption: {
+        zlevel: 0,                  // ä¸€çº§å±‚å 
+        z: 2,                       // äºŒçº§å±‚å 
+
+        coordinateSystem: 'parallel',
+        parallelIndex: 0,
+
+        label: {
+            show: false
+        },
+
+        inactiveOpacity: 0.05,
+        activeOpacity: 1,
+
+        lineStyle: {
+            width: 1,
+            opacity: 0.45,
+            type: 'solid'
+        },
+        emphasis: {
+            label: {
+                show: false
+            }
+        },
+
+        progressive: 500,
+        smooth: false, // true | false | number
+
+        animationEasing: 'linear'
+    }
+});
+
+function setEncodeAndDimensions(source, seriesModel) {
+    // The mapping of parallelAxis dimension to data dimension can
+    // be specified in parallelAxis.option.dim. For example, if
+    // parallelAxis.option.dim is 'dim3', it mapping to the third
+    // dimension of data. But `data.encode` has higher priority.
+    // Moreover, parallelModel.dimension should not be regarded as data
+    // dimensions. Consider dimensions = ['dim4', 'dim2', 'dim6'];
+
+    if (source.encodeDefine) {
+        return;
+    }
+
+    var parallelModel = seriesModel.ecModel.getComponent(
+        'parallel', seriesModel.get('parallelIndex')
+    );
+    if (!parallelModel) {
+        return;
+    }
+
+    var encodeDefine = source.encodeDefine = createHashMap();
+    each$1(parallelModel.dimensions, function (axisDim) {
+        var dataDimIndex = convertDimNameToNumber(axisDim);
+        encodeDefine.set(axisDim, dataDimIndex);
+    });
+}
+
+function convertDimNameToNumber(dimName) {
+    return +dimName.replace('dim', '');
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var DEFAULT_SMOOTH = 0.3;
+
+var ParallelView = Chart.extend({
+
+    type: 'parallel',
+
+    init: function () {
+
+        /**
+         * @type {module:zrender/container/Group}
+         * @private
+         */
+        this._dataGroup = new Group();
+
+        this.group.add(this._dataGroup);
+
+        /**
+         * @type {module:echarts/data/List}
+         */
+        this._data;
+
+        /**
+         * @type {boolean}
+         */
+        this._initialized;
+    },
+
+    /**
+     * @override
+     */
+    render: function (seriesModel, ecModel, api, payload) {
+        var dataGroup = this._dataGroup;
+        var data = seriesModel.getData();
+        var oldData = this._data;
+        var coordSys = seriesModel.coordinateSystem;
+        var dimensions = coordSys.dimensions;
+        var seriesScope = makeSeriesScope$2(seriesModel);
+
+        data.diff(oldData)
+            .add(add)
+            .update(update)
+            .remove(remove)
+            .execute();
+
+        function add(newDataIndex) {
+            var line = addEl(data, dataGroup, newDataIndex, dimensions, coordSys);
+            updateElCommon(line, data, newDataIndex, seriesScope);
+        }
+
+        function update(newDataIndex, oldDataIndex) {
+            var line = oldData.getItemGraphicEl(oldDataIndex);
+            var points = createLinePoints(data, newDataIndex, dimensions, coordSys);
+            data.setItemGraphicEl(newDataIndex, line);
+            var animationModel = (payload && payload.animation === false) ? null : seriesModel;
+            updateProps(line, {shape: {points: points}}, animationModel, newDataIndex);
+
+            updateElCommon(line, data, newDataIndex, seriesScope);
+        }
+
+        function remove(oldDataIndex) {
+            var line = oldData.getItemGraphicEl(oldDataIndex);
+            dataGroup.remove(line);
+        }
+
+        // First create
+        if (!this._initialized) {
+            this._initialized = true;
+            var clipPath = createGridClipShape$1(
+                coordSys, seriesModel, function () {
+                    // Callback will be invoked immediately if there is no animation
+                    setTimeout(function () {
+                        dataGroup.removeClipPath();
+                    });
+                }
+            );
+            dataGroup.setClipPath(clipPath);
+        }
+
+        this._data = data;
+    },
+
+    incrementalPrepareRender: function (seriesModel, ecModel, api) {
+        this._initialized = true;
+        this._data = null;
+        this._dataGroup.removeAll();
+    },
+
+    incrementalRender: function (taskParams, seriesModel, ecModel) {
+        var data = seriesModel.getData();
+        var coordSys = seriesModel.coordinateSystem;
+        var dimensions = coordSys.dimensions;
+        var seriesScope = makeSeriesScope$2(seriesModel);
+
+        for (var dataIndex = taskParams.start; dataIndex < taskParams.end; dataIndex++) {
+            var line = addEl(data, this._dataGroup, dataIndex, dimensions, coordSys);
+            line.incremental = true;
+            updateElCommon(line, data, dataIndex, seriesScope);
+        }
+    },
+
+    dispose: function () {},
+
+    // _renderForProgressive: function (seriesModel) {
+    //     var dataGroup = this._dataGroup;
+    //     var data = seriesModel.getData();
+    //     var oldData = this._data;
+    //     var coordSys = seriesModel.coordinateSystem;
+    //     var dimensions = coordSys.dimensions;
+    //     var option = seriesModel.option;
+    //     var progressive = option.progressive;
+    //     var smooth = option.smooth ? SMOOTH : null;
+
+    //     // In progressive animation is disabled, so use simple data diff,
+    //     // which effects performance less.
+    //     // (Typically performance for data with length 7000+ like:
+    //     // simpleDiff: 60ms, addEl: 184ms,
+    //     // in RMBP 2.4GHz intel i7, OSX 10.9 chrome 50.0.2661.102 (64-bit))
+    //     if (simpleDiff(oldData, data, dimensions)) {
+    //         dataGroup.removeAll();
+    //         data.each(function (dataIndex) {
+    //             addEl(data, dataGroup, dataIndex, dimensions, coordSys);
+    //         });
+    //     }
+
+    //     updateElCommon(data, progressive, smooth);
+
+    //     // Consider switch between progressive and not.
+    //     data.__plProgressive = true;
+    //     this._data = data;
+    // },
+
+    /**
+     * @override
+     */
+    remove: function () {
+        this._dataGroup && this._dataGroup.removeAll();
+        this._data = null;
+    }
+});
+
+function createGridClipShape$1(coordSys, seriesModel, cb) {
+    var parallelModel = coordSys.model;
+    var rect = coordSys.getRect();
+    var rectEl = new Rect({
+        shape: {
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height
+        }
+    });
+
+    var dim = parallelModel.get('layout') === 'horizontal' ? 'width' : 'height';
+    rectEl.setShape(dim, 0);
+    initProps(rectEl, {
+        shape: {
+            width: rect.width,
+            height: rect.height
+        }
+    }, seriesModel, cb);
+    return rectEl;
+}
+
+function createLinePoints(data, dataIndex, dimensions, coordSys) {
+    var points = [];
+    for (var i = 0; i < dimensions.length; i++) {
+        var dimName = dimensions[i];
+        var value = data.get(data.mapDimension(dimName), dataIndex);
+        if (!isEmptyValue(value, coordSys.getAxis(dimName).type)) {
+            points.push(coordSys.dataToPoint(value, dimName));
+        }
+    }
+    return points;
+}
+
+function addEl(data, dataGroup, dataIndex, dimensions, coordSys) {
+    var points = createLinePoints(data, dataIndex, dimensions, coordSys);
+    var line = new Polyline({
+        shape: {points: points},
+        silent: true,
+        z2: 10
+    });
+    dataGroup.add(line);
+    data.setItemGraphicEl(dataIndex, line);
+    return line;
+}
+
+function makeSeriesScope$2(seriesModel) {
+    var smooth = seriesModel.get('smooth', true);
+    smooth === true && (smooth = DEFAULT_SMOOTH);
+    return {
+        lineStyle: seriesModel.getModel('lineStyle').getLineStyle(),
+        smooth: smooth != null ? smooth : DEFAULT_SMOOTH
+    };
+}
+
+function updateElCommon(el, data, dataIndex, seriesScope) {
+    var lineStyle = seriesScope.lineStyle;
+
+    if (data.hasItemOption) {
+        var lineStyleModel = data.getItemModel(dataIndex).getModel('lineStyle');
+        lineStyle = lineStyleModel.getLineStyle();
+    }
+
+    el.useStyle(lineStyle);
+
+    var elStyle = el.style;
+    elStyle.fill = null;
+    // lineStyle.color have been set to itemVisual in module:echarts/visual/seriesColor.
+    elStyle.stroke = data.getItemVisual(dataIndex, 'color');
+    // lineStyle.opacity have been set to itemVisual in parallelVisual.
+    elStyle.opacity = data.getItemVisual(dataIndex, 'opacity');
+
+    seriesScope.smooth && (el.shape.smooth = seriesScope.smooth);
+}
+
+// function simpleDiff(oldData, newData, dimensions) {
+//     var oldLen;
+//     if (!oldData
+//         || !oldData.__plProgressive
+//         || (oldLen = oldData.count()) !== newData.count()
+//     ) {
+//         return true;
+//     }
+
+//     var dimLen = dimensions.length;
+//     for (var i = 0; i < oldLen; i++) {
+//         for (var j = 0; j < dimLen; j++) {
+//             if (oldData.get(dimensions[j], i) !== newData.get(dimensions[j], i)) {
+//                 return true;
+//             }
+//         }
+//     }
+
+//     return false;
+// }
+
+// FIXME
+// å…¬ç”¨æ–¹æ³•?
+function isEmptyValue(val, axisType) {
+    return axisType === 'category'
+        ? val == null
+        : (val == null || isNaN(val)); // axisType === 'value'
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+var opacityAccessPath$1 = ['lineStyle', 'normal', 'opacity'];
+
+var parallelVisual = {
+
+    seriesType: 'parallel',
+
+    reset: function (seriesModel, ecModel, api) {
+
+        var itemStyleModel = seriesModel.getModel('itemStyle');
+        var lineStyleModel = seriesModel.getModel('lineStyle');
+        var globalColors = ecModel.get('color');
+
+        var color = lineStyleModel.get('color')
+            || itemStyleModel.get('color')
+            || globalColors[seriesModel.seriesIndex % globalColors.length];
+        var inactiveOpacity = seriesModel.get('inactiveOpacity');
+        var activeOpacity = seriesModel.get('activeOpacity');
+        var lineStyle = seriesModel.getModel('lineStyle').getLineStyle();
+
+        var coordSys = seriesModel.coordinateSystem;
+        var data = seriesModel.getData();
+
+        var opacityMap = {
+            normal: lineStyle.opacity,
+            active: activeOpacity,
+            inactive: inactiveOpacity
+        };
+
+        data.setVisual('color', color);
+
+        function progress(params, data) {
+            coordSys.eachActiveState(data, function (activeState, dataIndex) {
+                var opacity = opacityMap[activeState];
+                if (activeState === 'normal' && data.hasItemOption) {
+                    var itemOpacity = data.getItemModel(dataIndex).get(opacityAccessPath$1, true);
+                    itemOpacity != null && (opacity = itemOpacity);
+                }
+                data.setItemVisual(dataIndex, 'opacity', opacity);
+            }, params.start, params.end);
+        }
+
+        return {progress: progress};
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+registerVisual(parallelVisual);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @file Get initial data and define sankey view's series model
+ * @author Deqing Li(annong035@gmail.com)
+ */
+
+var SankeySeries = SeriesModel.extend({
+
+    type: 'series.sankey',
+
+    layoutInfo: null,
+
+    /**
+     * Init a graph data structure from data in option series
+     *
+     * @param  {Object} option  the object used to config echarts view
+     * @return {module:echarts/data/List} storage initial data
+     */
+    getInitialData: function (option) {
+        var links = option.edges || option.links;
+        var nodes = option.data || option.nodes;
+        if (nodes && links) {
+            var graph = createGraphFromNodeEdge(nodes, links, this, true);
+            return graph.data;
+        }
+    },
+
+    setNodePosition: function (dataIndex, localPosition) {
+        var dataItem = this.option.data[dataIndex];
+        dataItem.localX = localPosition[0];
+        dataItem.localY = localPosition[1];
+    },
+
+    /**
+     * Return the graphic data structure
+     *
+     * @return {module:echarts/data/Graph} graphic data structure
+     */
+    getGraph: function () {
+        return this.getData().graph;
+    },
+
+    /**
+     * Get edge data of graphic data structure
+     *
+     * @return {module:echarts/data/List} data structure of list
+     */
+    getEdgeData: function () {
+        return this.getGraph().edgeData;
+    },
+
+    /**
+     * @override
+     */
+    formatTooltip: function (dataIndex, multipleSeries, dataType) {
+        // dataType === 'node' or empty do not show tooltip by default
+        if (dataType === 'edge') {
+            var params = this.getDataParams(dataIndex, dataType);
+            var rawDataOpt = params.data;
+            var html = rawDataOpt.source + ' -- ' + rawDataOpt.target;
+            if (params.value) {
+                html += ' : ' + params.value;
+            }
+            return encodeHTML(html);
+        }
+
+        return SankeySeries.superCall(this, 'formatTooltip', dataIndex, multipleSeries);
+    },
+
+    defaultOption: {
+        zlevel: 0,
+        z: 2,
+
+        coordinateSystem: 'view',
+
+        layout: null,
+
+        // the position of the whole view
+        left: '5%',
+        top: '5%',
+        right: '20%',
+        bottom: '5%',
+
+        // the dx of the node
+        nodeWidth: 20,
+
+        // the vertical distance between two nodes
+        nodeGap: 8,
+
+        // control if the node can move or not
+        draggable: true,
+
+        // the number of iterations to change the position of the node
+        layoutIterations: 32,
+
+        label: {
+            show: true,
+            position: 'right',
+            color: '#000',
+            fontSize: 12
+        },
+
+        itemStyle: {
+            borderWidth: 1,
+            borderColor: '#333'
+        },
+
+        lineStyle: {
+            color: '#314656',
+            opacity: 0.2,
+            curveness: 0.5
+        },
+
+        emphasis: {
+            label: {
+                show: true
+            },
+            lineStyle: {
+                opacity: 0.6
+            }
+        },
+
+        animationEasing: 'linear',
+
+        animationDuration: 1000
+    }
+
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @file  The file used to draw sankey view
+ * @author  Deqing Li(annong035@gmail.com)
+ */
+
+var SankeyShape = extendShape({
+    shape: {
+        x1: 0, y1: 0,
+        x2: 0, y2: 0,
+        cpx1: 0, cpy1: 0,
+        cpx2: 0, cpy2: 0,
+
+        extent: 0
+    },
+
+    buildPath: function (ctx, shape) {
+        var halfExtent = shape.extent / 2;
+        ctx.moveTo(shape.x1, shape.y1 - halfExtent);
+        ctx.bezierCurveTo(
+            shape.cpx1, shape.cpy1 - halfExtent,
+            shape.cpx2, shape.cpy2 - halfExtent,
+            shape.x2, shape.y2 - halfExtent
+        );
+        ctx.lineTo(shape.x2, shape.y2 + halfExtent);
+        ctx.bezierCurveTo(
+            shape.cpx2, shape.cpy2 + halfExtent,
+            shape.cpx1, shape.cpy1 + halfExtent,
+            shape.x1, shape.y1 + halfExtent
+        );
+        ctx.closePath();
+    }
+});
+
+extendChartView({
+
+    type: 'sankey',
+
+    /**
+     * @private
+     * @type {module:echarts/chart/sankey/SankeySeries}
+     */
+    _model: null,
+
+    render: function (seriesModel, ecModel, api) {
+        var graph = seriesModel.getGraph();
+        var group = this.group;
+        var layoutInfo = seriesModel.layoutInfo;
+        // view width
+        var width = layoutInfo.width;
+        // view height
+        var height = layoutInfo.height;
+        
+        var nodeData = seriesModel.getData();
+        var edgeData = seriesModel.getData('edge');
+
+        this._model = seriesModel;
+
+        group.removeAll();
+
+        group.attr('position', [layoutInfo.x, layoutInfo.y]);
+
+        // generate a bezire Curve for each edge
+        graph.eachEdge(function (edge) {
+            var curve = new SankeyShape();
+            curve.dataIndex = edge.dataIndex;
+            curve.seriesIndex = seriesModel.seriesIndex;
+            curve.dataType = 'edge';
+            var lineStyleModel = edge.getModel('lineStyle');
+            var curvature = lineStyleModel.get('curveness');
+            var n1Layout = edge.node1.getLayout();
+            var node1Model =edge.node1.getModel();
+            var dragX1 = node1Model.get('localX');
+            var dragY1 = node1Model.get('localY');
+            var n2Layout = edge.node2.getLayout();
+            var node2Model = edge.node2.getModel();
+            var dragX2 = node2Model.get('localX');
+            var dragY2 = node2Model.get('localY');
+            var edgeLayout = edge.getLayout();
+
+            curve.shape.extent = Math.max(1, edgeLayout.dy);
+
+            var x1 = (dragX1 != null ? dragX1 * width : n1Layout.x) + n1Layout.dx;
+            var y1 = (dragY1 != null ? dragY1 * height : n1Layout.y) + edgeLayout.sy + edgeLayout.dy / 2;
+            var x2 = dragX2 != null ? dragX2 * width : n2Layout.x;
+            var y2 = (dragY2 != null ? dragY2 * height : n2Layout.y) + edgeLayout.ty + edgeLayout.dy / 2;
+            var cpx1 = x1 * (1 - curvature) + x2 * curvature;
+            var cpy1 = y1;
+            var cpx2 = x1 * curvature + x2 * (1 - curvature);
+            var cpy2 = y2;
+
+            curve.setShape({
+                x1: x1,
+                y1: y1,
+                x2: x2,
+                y2: y2,
+                cpx1: cpx1,
+                cpy1: cpy1,
+                cpx2: cpx2,
+                cpy2: cpy2
+            });
+
+            curve.setStyle(lineStyleModel.getItemStyle());
+            // Special color, use source node color or target node color
+            switch (curve.style.fill) {
+                case 'source':
+                    curve.style.fill = edge.node1.getVisual('color');
+                    break;
+                case 'target':
+                    curve.style.fill = edge.node2.getVisual('color');
+                    break;
+            }
+
+            setHoverStyle(curve, edge.getModel('emphasis.lineStyle').getItemStyle());
+
+            group.add(curve);
+
+            edgeData.setItemGraphicEl(edge.dataIndex, curve);
+        });
+
+        // generate a rect for each node
+        graph.eachNode(function (node) {
+            var layout = node.getLayout();
+            var itemModel = node.getModel();
+            var dragX = itemModel.get('localX');
+            var dragY = itemModel.get('localY');
+            var labelModel = itemModel.getModel('label');
+            var labelHoverModel = itemModel.getModel('emphasis.label');
+
+            var rect = new Rect({
+                shape: {
+                    x: dragX != null ? dragX * width : layout.x,
+                    y: dragY != null ? dragY * height : layout.y,
+                    width: layout.dx,
+                    height: layout.dy
+                },
+                style: itemModel.getModel('itemStyle').getItemStyle()
+            });
+
+            var hoverStyle = node.getModel('emphasis.itemStyle').getItemStyle();
+
+            setLabelStyle(
+                rect.style, hoverStyle, labelModel, labelHoverModel,
+                {
+                    labelFetcher: seriesModel,
+                    labelDataIndex: node.dataIndex,
+                    defaultText: node.id,
+                    isRectText: true
+                }
+            );
+
+            rect.setStyle('fill', node.getVisual('color'));
+
+            setHoverStyle(rect, hoverStyle);
+
+            group.add(rect);
+
+            nodeData.setItemGraphicEl(node.dataIndex, rect);
+
+            rect.dataType = 'node';
+        });
+
+        var draggable = seriesModel.get('draggable');
+        if (draggable) {
+            nodeData.eachItemGraphicEl(function (el, dataIndex) {
+                el.drift = function (dx, dy) {
+                    this.shape.x += dx;
+                    this.shape.y += dy;
+                    this.dirty();
+                    api.dispatchAction({
+                        type: 'dragNode',
+                        seriesId: seriesModel.id,
+                        dataIndex: nodeData.getRawIndex(dataIndex),
+                        localX: this.shape.x / width,
+                        localY: this.shape.y / height
+                    });
+                };
+        
+                el.draggable = true;
+                el.cursor = 'move';
+            });
+        }
+        
+        if (!this._data && seriesModel.get('animation')) {
+            group.setClipPath(createGridClipShape$2(group.getBoundingRect(), seriesModel, function () {
+                group.removeClipPath();
+            }));
+        }
+
+        this._data = seriesModel.getData();
+    },
+
+    dispose: function () {}
+});
+
+// add animation to the view
+function createGridClipShape$2(rect, seriesModel, cb) {
+    var rectEl = new Rect({
+        shape: {
+            x: rect.x - 10,
+            y: rect.y - 10,
+            width: 0,
+            height: rect.height + 20
+        }
+    });
+    initProps(rectEl, {
+        shape: {
+            width: rect.width + 20,
+            height: rect.height + 20
+        }
+    }, seriesModel, cb);
+
+    return rectEl;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+registerAction({
+    type: 'dragNode',
+    event: 'dragNode',
+    // here can only use 'update' now, other value is not support in echarts.
+    update: 'update'
+}, function (payload, ecModel) {
+    ecModel.eachComponent({mainType: 'series', subType: 'sankey', query: payload}, function (seriesModel) {
+        seriesModel.setNodePosition(payload.dataIndex, [payload.localX, payload.localY]);
+    });
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/*
+* The implementation references to d3.js. The use of the source
+* code of this file is also subject to the terms and consitions
+* of its license (BSD-3Clause, see <echarts/src/licenses/LICENSE-d3>).
+*/
+
+
+/**
+ * nest helper used to group by the array.
+ * can specified the keys and sort the keys.
+ */
+function nest() {
+
+    var keysFunction = [];
+    var sortKeysFunction = [];
+
+    /**
+     * map an Array into the mapObject.
+     * @param {Array} array
+     * @param {number} depth
+     */
+    function map$$1(array, depth) {
+        if (depth >= keysFunction.length) {
+            return array;
+        }
+        var i = -1;
+        var n = array.length;
+        var keyFunction = keysFunction[depth++];
+        var mapObject = {};
+        var valuesByKey = {};
+
+        while (++i < n) {
+            var keyValue = keyFunction(array[i]);
+            var values = valuesByKey[keyValue];
+
+            if (values) {
+                values.push(array[i]);
+            }
+            else {
+                valuesByKey[keyValue] = [array[i]];
+            }
+        }
+
+        each$1(valuesByKey, function (value, key) {
+            mapObject[key] = map$$1(value, depth);
+        });
+
+        return mapObject;
+    }
+
+    /**
+     * transform the Map Object to multidimensional Array
+     * @param {Object} map
+     * @param {number} depth
+     */
+    function entriesMap(mapObject, depth) {
+        if (depth >= keysFunction.length) {
+            return mapObject;
+        }
+        var array = [];
+        var sortKeyFunction = sortKeysFunction[depth++];
+
+        each$1(mapObject, function (value, key) {
+            array.push({
+                key: key, values: entriesMap(value, depth)
+            });
+        });
+
+        if (sortKeyFunction) {
+            return array.sort(function (a, b) {
+                return sortKeyFunction(a.key, b.key);
+            });
+        }
+        else {
+            return array;
+        }
+    }
+
+    return {
+        /**
+         * specified the key to groupby the arrays.
+         * users can specified one more keys.
+         * @param {Function} d
+         */
+        key: function (d) {
+            keysFunction.push(d);
+            return this;
+        },
+
+        /**
+         * specified the comparator to sort the keys
+         * @param {Function} order
+         */
+        sortKeys: function (order) {
+            sortKeysFunction[keysFunction.length - 1] = order;
+            return this;
+        },
+
+        /**
+         * the array to be grouped by.
+         * @param {Array} array
+         */
+        entries: function (array) {
+            return entriesMap(map$$1(array, 0), 0);
+        }
+    };
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @file The layout algorithm of sankey view
+ * @author Deqing Li(annong035@gmail.com)
+ */
+
+var sankeyLayout = function (ecModel, api, payload) {
+
+    ecModel.eachSeriesByType('sankey', function (seriesModel) {
+
+        var nodeWidth = seriesModel.get('nodeWidth');
+        var nodeGap = seriesModel.get('nodeGap');
+
+        var layoutInfo = getViewRect$3(seriesModel, api);
+
+        seriesModel.layoutInfo = layoutInfo;
+
+        var width = layoutInfo.width;
+        var height = layoutInfo.height;
+
+        var graph = seriesModel.getGraph();
+
+        var nodes = graph.nodes;
+        var edges = graph.edges;
+
+        computeNodeValues(nodes);
+
+        var filteredNodes = filter(nodes, function (node) {
+            return node.getLayout().value === 0;
+        });
+
+        var iterations = filteredNodes.length !== 0
+            ? 0 : seriesModel.get('layoutIterations');
+
+        layoutSankey(nodes, edges, nodeWidth, nodeGap, width, height, iterations);
+    });
+};
+
+/**
+ * Get the layout position of the whole view
+ *
+ * @param {module:echarts/model/Series} seriesModel  the model object of sankey series
+ * @param {module:echarts/ExtensionAPI} api  provide the API list that the developer can call
+ * @return {module:zrender/core/BoundingRect}  size of rect to draw the sankey view
+ */
+function getViewRect$3(seriesModel, api) {
+    return getLayoutRect(
+        seriesModel.getBoxLayoutParams(), {
+            width: api.getWidth(),
+            height: api.getHeight()
+        }
+    );
+}
+
+function layoutSankey(nodes, edges, nodeWidth, nodeGap, width, height, iterations) {
+    computeNodeBreadths(nodes, edges, nodeWidth, width);
+    computeNodeDepths(nodes, edges, height, nodeGap, iterations);
+    computeEdgeDepths(nodes);
+}
+
+/**
+ * Compute the value of each node by summing the associated edge's value
+ *
+ * @param {module:echarts/data/Graph~Node} nodes  node of sankey view
+ */
+function computeNodeValues(nodes) {
+    each$1(nodes, function (node) {
+        var value1 = sum(node.outEdges, getEdgeValue);
+        var value2 = sum(node.inEdges, getEdgeValue);
+        var value = Math.max(value1, value2);
+        node.setLayout({value: value}, true);
+    });
+}
+
+/**
+ * Compute the x-position for each node.
+ * 
+ * Here we use Kahn algorithm to detect cycle when we traverse
+ * the node to computer the initial x position.
+ *
+ * @param {module:echarts/data/Graph~Node} nodes  node of sankey view
+ * @param  {number} nodeWidth  the dx of the node
+ * @param  {number} width  the whole width of the area to draw the view
+ */
+function computeNodeBreadths(nodes, edges, nodeWidth, width) {
+    // Used to mark whether the edge is deleted. if it is deleted,
+    // the value is 0, otherwise it is 1.
+    var remainEdges = [];
+    // Storage each node's indegree.
+    var indegreeArr = [];
+    //Used to storage the node with indegree is equal to 0.
+    var zeroIndegrees = [];
+    var nextNode = [];
+    var x = 0;
+    var kx = 0;
+
+    for (var i = 0; i < edges.length; i++) {
+        remainEdges[i] = 1;
+    }
+
+    for (var i = 0; i < nodes.length; i++) {
+        indegreeArr[i] = nodes[i].inEdges.length;
+        if (indegreeArr[i] === 0) {
+            zeroIndegrees.push(nodes[i]);
+        }
+    }
+    
+    while (zeroIndegrees.length) {
+        each$1(zeroIndegrees, function (node) {
+            node.setLayout({x: x}, true);
+            node.setLayout({dx: nodeWidth}, true);
+            each$1(node.outEdges, function (edge) {
+                var indexEdge = edges.indexOf(edge);
+                remainEdges[indexEdge] = 0;
+                var targetNode = edge.node2;
+                var nodeIndex = nodes.indexOf(targetNode);
+                if (--indegreeArr[nodeIndex] === 0) {
+                    nextNode.push(targetNode);
+                }
+            });
+        });
+       
+        ++x;
+        zeroIndegrees = nextNode;
+        nextNode = [];
+    }
+    
+    for (var i = 0; i < remainEdges.length; i++) {
+        if (__DEV__) {
+            if (remainEdges[i] === 1) {
+                throw new Error('Sankey is a DAG, the original data has cycle!');
+            }
+        } 
+    }
+
+    moveSinksRight(nodes, x);
+    kx = (width - nodeWidth) / (x - 1);
+
+    scaleNodeBreadths(nodes, kx);
+}
+
+/**
+ * All the node without outEgdes are assigned maximum x-position and
+ *     be aligned in the last column.
+ *
+ * @param {module:echarts/data/Graph~Node} nodes  node of sankey view
+ * @param {number} x  value (x-1) use to assign to node without outEdges
+ *     as x-position
+ */
+function moveSinksRight(nodes, x) {
+    each$1(nodes, function (node) {
+        if (!node.outEdges.length) {
+            node.setLayout({x: x - 1}, true);
+        }
+    });
+}
+
+/**
+ * Scale node x-position to the width
+ *
+ * @param {module:echarts/data/Graph~Node} nodes  node of sankey view
+ * @param {number} kx   multiple used to scale nodes
+ */
+function scaleNodeBreadths(nodes, kx) {
+    each$1(nodes, function (node) {
+        var nodeX = node.getLayout().x * kx;
+        node.setLayout({x: nodeX}, true);
+    });
+}
+
+/**
+ * Using Gauss-Seidel iterations method to compute the node depth(y-position)
+ *
+ * @param {module:echarts/data/Graph~Node} nodes  node of sankey view
+ * @param {module:echarts/data/Graph~Edge} edges  edge of sankey view
+ * @param {number} height  the whole height of the area to draw the view
+ * @param {number} nodeGap  the vertical distance between two nodes
+ *     in the same column.
+ * @param {number} iterations  the number of iterations for the algorithm
+ */
+function computeNodeDepths(nodes, edges, height, nodeGap, iterations) {
+    var nodesByBreadth = nest()
+        .key(function (d) {
+            return d.getLayout().x;
+        })
+        .sortKeys(ascending)
+        .entries(nodes)
+        .map(function (d) {
+            return d.values;
+        });
+
+    initializeNodeDepth(nodes, nodesByBreadth, edges, height, nodeGap);
+    resolveCollisions(nodesByBreadth, nodeGap, height);
+
+    for (var alpha = 1; iterations > 0; iterations--) {
+        // 0.99 is a experience parameter, ensure that each iterations of
+        // changes as small as possible.
+        alpha *= 0.99;
+        relaxRightToLeft(nodesByBreadth, alpha);
+        resolveCollisions(nodesByBreadth, nodeGap, height);
+        relaxLeftToRight(nodesByBreadth, alpha);
+        resolveCollisions(nodesByBreadth, nodeGap, height);
+    }
+}
+
+/**
+ * Compute the original y-position for each node
+ *
+ * @param {module:echarts/data/Graph~Node} nodes  node of sankey view
+ * @param {Array.<Array.<module:echarts/data/Graph~Node>>} nodesByBreadth
+ *     group by the array of all sankey nodes based on the nodes x-position.
+ * @param {module:echarts/data/Graph~Edge} edges  edge of sankey view
+ * @param {number} height  the whole height of the area to draw the view
+ * @param {number} nodeGap  the vertical distance between two nodes
+ */
+function initializeNodeDepth(nodes, nodesByBreadth, edges, height, nodeGap) {
+    var kyArray = [];
+    each$1(nodesByBreadth, function (nodes) {
+        var n = nodes.length;
+        var sum = 0;
+        each$1(nodes, function (node) {
+            sum += node.getLayout().value;
+        });
+        var ky = (height - (n - 1) * nodeGap) / sum;
+        kyArray.push(ky);
+    });
+
+    kyArray.sort(function (a, b) {
+        return a - b;
+    });
+    var ky0 = kyArray[0];
+
+    each$1(nodesByBreadth, function (nodes) {
+        each$1(nodes, function (node, i) {
+            node.setLayout({y: i}, true);
+            var nodeDy = node.getLayout().value * ky0;
+            node.setLayout({dy: nodeDy}, true);
+        });
+    });
+
+    each$1(edges, function (edge) {
+        var edgeDy = +edge.getValue() * ky0;
+        edge.setLayout({dy: edgeDy}, true);
+    });
+}
+
+/**
+ * Resolve the collision of initialized depth (y-position)
+ *
+ * @param {Array.<Array.<module:echarts/data/Graph~Node>>} nodesByBreadth
+ *     group by the array of all sankey nodes based on the nodes x-position.
+ * @param {number} nodeGap  the vertical distance between two nodes
+ * @param {number} height  the whole height of the area to draw the view
+ */
+function resolveCollisions(nodesByBreadth, nodeGap, height) {
+    each$1(nodesByBreadth, function (nodes) {
+        var node;
+        var dy;
+        var y0 = 0;
+        var n = nodes.length;
+        var i;
+
+        nodes.sort(ascendingDepth);
+
+        for (i = 0; i < n; i++) {
+            node = nodes[i];
+            dy = y0 - node.getLayout().y;
+            if (dy > 0) {
+                var nodeY = node.getLayout().y + dy;
+                node.setLayout({y: nodeY}, true);
+            }
+            y0 = node.getLayout().y + node.getLayout().dy + nodeGap;
+        }
+
+        // If the bottommost node goes outside the bounds, push it back up
+        dy = y0 - nodeGap - height;
+        if (dy > 0) {
+            var nodeY = node.getLayout().y - dy;
+            node.setLayout({y: nodeY}, true);
+            y0 = node.getLayout().y;
+            for (i = n - 2; i >= 0; --i) {
+                node = nodes[i];
+                dy = node.getLayout().y + node.getLayout().dy + nodeGap - y0;
+                if (dy > 0) {
+                    nodeY = node.getLayout().y - dy;
+                    node.setLayout({y: nodeY}, true);
+                }
+                y0 = node.getLayout().y;
+            }
+        }
+    });
+}
+
+/**
+ * Change the y-position of the nodes, except most the right side nodes
+ *
+ * @param {Array.<Array.<module:echarts/data/Graph~Node>>} nodesByBreadth
+ *     group by the array of all sankey nodes based on the node x-position.
+ * @param {number} alpha  parameter used to adjust the nodes y-position
+ */
+function relaxRightToLeft(nodesByBreadth, alpha) {
+    each$1(nodesByBreadth.slice().reverse(), function (nodes) {
+        each$1(nodes, function (node) {
+            if (node.outEdges.length) {
+                var y = sum(node.outEdges, weightedTarget) / sum(node.outEdges, getEdgeValue);
+                var nodeY = node.getLayout().y + (y - center$1(node)) * alpha;
+                node.setLayout({y: nodeY}, true);
+            }
+        });
+    });
+}
+
+function weightedTarget(edge) {
+    return center$1(edge.node2) * edge.getValue();
+}
+
+/**
+ * Change the y-position of the nodes, except most the left side nodes
+ *
+ * @param {Array.<Array.<module:echarts/data/Graph~Node>>} nodesByBreadth
+ *     group by the array of all sankey nodes based on the node x-position.
+ * @param {number} alpha  parameter used to adjust the nodes y-position
+ */
+function relaxLeftToRight(nodesByBreadth, alpha) {
+    each$1(nodesByBreadth, function (nodes) {
+        each$1(nodes, function (node) {
+            if (node.inEdges.length) {
+                var y = sum(node.inEdges, weightedSource) / sum(node.inEdges, getEdgeValue);
+                var nodeY = node.getLayout().y + (y - center$1(node)) * alpha;
+                node.setLayout({y: nodeY}, true);
+            }
+        });
+    });
+}
+
+function weightedSource(edge) {
+    return center$1(edge.node1) * edge.getValue();
+}
+
+/**
+ * Compute the depth(y-position) of each edge
+ *
+ * @param {module:echarts/data/Graph~Node} nodes  node of sankey view
+ */
+function computeEdgeDepths(nodes) {
+    each$1(nodes, function (node) {
+        node.outEdges.sort(ascendingTargetDepth);
+        node.inEdges.sort(ascendingSourceDepth);
+    });
+    each$1(nodes, function (node) {
+        var sy = 0;
+        var ty = 0;
+        each$1(node.outEdges, function (edge) {
+            edge.setLayout({sy: sy}, true);
+            sy += edge.getLayout().dy;
+        });
+        each$1(node.inEdges, function (edge) {
+            edge.setLayout({ty: ty}, true);
+            ty += edge.getLayout().dy;
+        });
+    });
+}
+
+function ascendingTargetDepth(a, b) {
+    return a.node2.getLayout().y - b.node2.getLayout().y;
+}
+
+function ascendingSourceDepth(a, b) {
+    return a.node1.getLayout().y - b.node1.getLayout().y;
+}
+
+function sum(array, f) {
+    var sum = 0;
+    var len = array.length;
+    var i = -1;
+    while (++i < len) {
+        var value = +f.call(array, array[i], i);
+        if (!isNaN(value)) {
+            sum += value;
+        }
+    }
+    return sum;
+}
+
+function center$1(node) {
+    return node.getLayout().y + node.getLayout().dy / 2;
+}
+
+function ascendingDepth(a, b) {
+    return a.getLayout().y - b.getLayout().y;
+}
+
+function ascending(a, b) {
+    return a - b;
+}
+
+function getEdgeValue(edge) {
+    return edge.getValue();
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @file Visual encoding for sankey view
+ * @author  Deqing Li(annong035@gmail.com)
+ */
+
+var sankeyVisual = function (ecModel, payload) {
+    ecModel.eachSeriesByType('sankey', function (seriesModel) {
+        var graph = seriesModel.getGraph();
+        var nodes = graph.nodes;
+        if (nodes.length) {
+            var minValue = Infinity;
+            var maxValue = -Infinity;
+            each$1(nodes, function (node) {
+                var nodeValue = node.getLayout().value;
+                if (nodeValue < minValue) {
+                    minValue = nodeValue;
+                }
+                if (nodeValue > maxValue) {
+                    maxValue = nodeValue;
+                }
+            });
+            
+            each$1(nodes, function (node) {
+                var mapping = new VisualMapping({
+                    type: 'color',
+                    mappingMethod: 'linear',
+                    dataExtent: [minValue, maxValue],
+                    visual: seriesModel.get('color')
+                });
+    
+                var mapValueToColor = mapping.mapValueToVisual(node.getLayout().value);
+                node.setVisual('color', mapValueToColor);
+                // If set itemStyle.normal.color
+                var itemModel = node.getModel();
+                var customColor = itemModel.get('itemStyle.color');
+                if (customColor != null) {
+                    node.setVisual('color', customColor);
+                }
+            });
+        }
+    });
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+registerLayout(sankeyLayout);
+registerVisual(sankeyVisual);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+var seriesModelMixin = {
+
+    /**
+     * @private
+     * @type {string}
+     */
+    _baseAxisDim: null,
+
+    /**
+     * @override
+     */
+    getInitialData: function (option, ecModel) {
+        // When both types of xAxis and yAxis are 'value', layout is
+        // needed to be specified by user. Otherwise, layout can be
+        // judged by which axis is category.
+
+        var ordinalMeta;
+
+        var xAxisModel = ecModel.getComponent('xAxis', this.get('xAxisIndex'));
+        var yAxisModel = ecModel.getComponent('yAxis', this.get('yAxisIndex'));
+        var xAxisType = xAxisModel.get('type');
+        var yAxisType = yAxisModel.get('type');
+        var addOrdinal;
+
+        // FIXME
+        // è€ƒè™‘æ—¶é—´è½´
+
+        if (xAxisType === 'category') {
+            option.layout = 'horizontal';
+            ordinalMeta = xAxisModel.getOrdinalMeta();
+            addOrdinal = true;
+        }
+        else if (yAxisType  === 'category') {
+            option.layout = 'vertical';
+            ordinalMeta = yAxisModel.getOrdinalMeta();
+            addOrdinal = true;
+        }
+        else {
+            option.layout = option.layout || 'horizontal';
+        }
+
+        var coordDims = ['x', 'y'];
+        var baseAxisDimIndex = option.layout === 'horizontal' ? 0 : 1;
+        var baseAxisDim = this._baseAxisDim = coordDims[baseAxisDimIndex];
+        var otherAxisDim = coordDims[1 - baseAxisDimIndex];
+        var axisModels = [xAxisModel, yAxisModel];
+        var baseAxisType = axisModels[baseAxisDimIndex].get('type');
+        var otherAxisType = axisModels[1 - baseAxisDimIndex].get('type');
+        var data = option.data;
+
+        // ??? FIXME make a stage to perform data transfrom.
+        // MUST create a new data, consider setOption({}) again.
+        if (data && addOrdinal) {
+            var newOptionData = [];
+            each$1(data, function (item, index) {
+                var newItem;
+                if (item.value && isArray(item.value)) {
+                    newItem = item.value.slice();
+                    item.value.unshift(index);
+                }
+                else if (isArray(item)) {
+                    newItem = item.slice();
+                    item.unshift(index);
+                }
+                else {
+                    newItem = item;
+                }
+                newOptionData.push(newItem);
+            });
+            option.data = newOptionData;
+        }
+
+        var defaultValueDimensions = this.defaultValueDimensions;
+
+        return createListSimply(
+            this,
+            {
+                coordDimensions: [{
+                    name: baseAxisDim,
+                    type: getDimensionTypeByAxis(baseAxisType),
+                    ordinalMeta: ordinalMeta,
+                    otherDims: {
+                        tooltip: false,
+                        itemName: 0
+                    },
+                    dimsDef: ['base']
+                }, {
+                    name: otherAxisDim,
+                    type: getDimensionTypeByAxis(otherAxisType),
+                    dimsDef: defaultValueDimensions.slice()
+                }],
+                dimensionsCount: defaultValueDimensions.length + 1
+            }
+        );
+    },
+
+    /**
+     * If horizontal, base axis is x, otherwise y.
+     * @override
+     */
+    getBaseAxis: function () {
+        var dim = this._baseAxisDim;
+        return this.ecModel.getComponent(dim + 'Axis', this.get(dim + 'AxisIndex')).axis;
+    }
+
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var BoxplotSeries = SeriesModel.extend({
+
+    type: 'series.boxplot',
+
+    dependencies: ['xAxis', 'yAxis', 'grid'],
+
+    // TODO
+    // box width represents group size, so dimension should have 'size'.
+
+    /**
+     * @see <https://en.wikipedia.org/wiki/Box_plot>
+     * The meanings of 'min' and 'max' depend on user,
+     * and echarts do not need to know it.
+     * @readOnly
+     */
+    defaultValueDimensions: [
+        {name: 'min', defaultTooltip: true},
+        {name: 'Q1', defaultTooltip: true},
+        {name: 'median', defaultTooltip: true},
+        {name: 'Q3', defaultTooltip: true},
+        {name: 'max', defaultTooltip: true}
+    ],
+
+    /**
+     * @type {Array.<string>}
+     * @readOnly
+     */
+    dimensions: null,
+
+    /**
+     * @override
+     */
+    defaultOption: {
+        zlevel: 0,                  // ä¸€çº§å±‚å 
+        z: 2,                       // äºŒçº§å±‚å 
+        coordinateSystem: 'cartesian2d',
+        legendHoverLink: true,
+
+        hoverAnimation: true,
+
+        // xAxisIndex: 0,
+        // yAxisIndex: 0,
+
+        layout: null,               // 'horizontal' or 'vertical'
+        boxWidth: [7, 50],       // [min, max] can be percent of band width.
+
+        itemStyle: {
+            color: '#fff',
+            borderWidth: 1
+        },
+
+        emphasis: {
+            itemStyle: {
+                borderWidth: 2,
+                shadowBlur: 5,
+                shadowOffsetX: 2,
+                shadowOffsetY: 2,
+                shadowColor: 'rgba(0,0,0,0.4)'
+            }
+        },
+
+        animationEasing: 'elasticOut',
+        animationDuration: 800
+    }
+});
+
+mixin(BoxplotSeries, seriesModelMixin, true);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// Update common properties
+var NORMAL_ITEM_STYLE_PATH = ['itemStyle'];
+var EMPHASIS_ITEM_STYLE_PATH = ['emphasis', 'itemStyle'];
+
+var BoxplotView = Chart.extend({
+
+    type: 'boxplot',
+
+    render: function (seriesModel, ecModel, api) {
+        var data = seriesModel.getData();
+        var group = this.group;
+        var oldData = this._data;
+
+        // There is no old data only when first rendering or switching from
+        // stream mode to normal mode, where previous elements should be removed.
+        if (!this._data) {
+            group.removeAll();
+        }
+
+        var constDim = seriesModel.get('layout') === 'horizontal' ? 1 : 0;
+
+        data.diff(oldData)
+            .add(function (newIdx) {
+                if (data.hasValue(newIdx)) {
+                    var itemLayout = data.getItemLayout(newIdx);
+                    var symbolEl = createNormalBox(itemLayout, data, newIdx, constDim, true);
+                    data.setItemGraphicEl(newIdx, symbolEl);
+                    group.add(symbolEl);
+                }
+            })
+            .update(function (newIdx, oldIdx) {
+                var symbolEl = oldData.getItemGraphicEl(oldIdx);
+
+                // Empty data
+                if (!data.hasValue(newIdx)) {
+                    group.remove(symbolEl);
+                    return;
+                }
+
+                var itemLayout = data.getItemLayout(newIdx);
+                if (!symbolEl) {
+                    symbolEl = createNormalBox(itemLayout, data, newIdx, constDim);
+                }
+                else {
+                    updateNormalBoxData(itemLayout, symbolEl, data, newIdx);
+                }
+
+                group.add(symbolEl);
+
+                data.setItemGraphicEl(newIdx, symbolEl);
+            })
+            .remove(function (oldIdx) {
+                var el = oldData.getItemGraphicEl(oldIdx);
+                el && group.remove(el);
+            })
+            .execute();
+
+        this._data = data;
+    },
+
+    remove: function (ecModel) {
+        var group = this.group;
+        var data = this._data;
+        this._data = null;
+        data && data.eachItemGraphicEl(function (el) {
+            el && group.remove(el);
+        });
+    },
+
+    dispose: noop
+
+});
+
+
+var BoxPath = Path.extend({
+
+    type: 'boxplotBoxPath',
+
+    shape: {},
+
+    buildPath: function (ctx, shape) {
+        var ends = shape.points;
+
+        var i = 0;
+        ctx.moveTo(ends[i][0], ends[i][1]);
+        i++;
+        for (; i < 4; i++) {
+            ctx.lineTo(ends[i][0], ends[i][1]);
+        }
+        ctx.closePath();
+
+        for (; i < ends.length; i++) {
+            ctx.moveTo(ends[i][0], ends[i][1]);
+            i++;
+            ctx.lineTo(ends[i][0], ends[i][1]);
+        }
+    }
+});
+
+
+function createNormalBox(itemLayout, data, dataIndex, constDim, isInit) {
+    var ends = itemLayout.ends;
+
+    var el = new BoxPath({
+        shape: {
+            points: isInit
+                ? transInit(ends, constDim, itemLayout)
+                : ends
+        }
+    });
+
+    updateNormalBoxData(itemLayout, el, data, dataIndex, isInit);
+
+    return el;
+}
+
+function updateNormalBoxData(itemLayout, el, data, dataIndex, isInit) {
+    var seriesModel = data.hostModel;
+    var updateMethod = graphic[isInit ? 'initProps' : 'updateProps'];
+
+    updateMethod(
+        el,
+        {shape: {points: itemLayout.ends}},
+        seriesModel,
+        dataIndex
+    );
+
+    var itemModel = data.getItemModel(dataIndex);
+    var normalItemStyleModel = itemModel.getModel(NORMAL_ITEM_STYLE_PATH);
+    var borderColor = data.getItemVisual(dataIndex, 'color');
+
+    // Exclude borderColor.
+    var itemStyle = normalItemStyleModel.getItemStyle(['borderColor']);
+    itemStyle.stroke = borderColor;
+    itemStyle.strokeNoScale = true;
+    el.useStyle(itemStyle);
+
+    el.z2 = 100;
+
+    var hoverStyle = itemModel.getModel(EMPHASIS_ITEM_STYLE_PATH).getItemStyle();
+    setHoverStyle(el, hoverStyle);
+}
+
+function transInit(points, dim, itemLayout) {
+    return map(points, function (point) {
+        point = point.slice();
+        point[dim] = itemLayout.initBaseline;
+        return point;
+    });
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+var borderColorQuery = ['itemStyle', 'borderColor'];
+
+var boxplotVisual = function (ecModel, api) {
+
+    var globalColors = ecModel.get('color');
+
+    ecModel.eachRawSeriesByType('boxplot', function (seriesModel) {
+
+        var defaulColor = globalColors[seriesModel.seriesIndex % globalColors.length];
+        var data = seriesModel.getData();
+
+        data.setVisual({
+            legendSymbol: 'roundRect',
+            // Use name 'color' but not 'borderColor' for legend usage and
+            // visual coding from other component like dataRange.
+            color: seriesModel.get(borderColorQuery) || defaulColor
+        });
+
+        // Only visible series has each data be visual encoded
+        if (!ecModel.isSeriesFiltered(seriesModel)) {
+            data.each(function (idx) {
+                var itemModel = data.getItemModel(idx);
+                data.setItemVisual(
+                    idx,
+                    {color: itemModel.get(borderColorQuery, true)}
+                );
+            });
+        }
+    });
+
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var each$13 = each$1;
+
+var boxplotLayout = function (ecModel) {
+
+    var groupResult = groupSeriesByAxis(ecModel);
+
+    each$13(groupResult, function (groupItem) {
+        var seriesModels = groupItem.seriesModels;
+
+        if (!seriesModels.length) {
+            return;
+        }
+
+        calculateBase(groupItem);
+
+        each$13(seriesModels, function (seriesModel, idx) {
+            layoutSingleSeries(
+                seriesModel,
+                groupItem.boxOffsetList[idx],
+                groupItem.boxWidthList[idx]
+            );
+        });
+    });
+};
+
+/**
+ * Group series by axis.
+ */
+function groupSeriesByAxis(ecModel) {
+    var result = [];
+    var axisList = [];
+
+    ecModel.eachSeriesByType('boxplot', function (seriesModel) {
+        var baseAxis = seriesModel.getBaseAxis();
+        var idx = indexOf(axisList, baseAxis);
+
+        if (idx < 0) {
+            idx = axisList.length;
+            axisList[idx] = baseAxis;
+            result[idx] = {axis: baseAxis, seriesModels: []};
+        }
+
+        result[idx].seriesModels.push(seriesModel);
+    });
+
+    return result;
+}
+
+/**
+ * Calculate offset and box width for each series.
+ */
+function calculateBase(groupItem) {
+    var extent;
+    var baseAxis = groupItem.axis;
+    var seriesModels = groupItem.seriesModels;
+    var seriesCount = seriesModels.length;
+
+    var boxWidthList = groupItem.boxWidthList = [];
+    var boxOffsetList = groupItem.boxOffsetList = [];
+    var boundList = [];
+
+    var bandWidth;
+    if (baseAxis.type === 'category') {
+        bandWidth = baseAxis.getBandWidth();
+    }
+    else {
+        var maxDataCount = 0;
+        each$13(seriesModels, function (seriesModel) {
+            maxDataCount = Math.max(maxDataCount, seriesModel.getData().count());
+        });
+        extent = baseAxis.getExtent(),
+        Math.abs(extent[1] - extent[0]) / maxDataCount;
+    }
+
+    each$13(seriesModels, function (seriesModel) {
+        var boxWidthBound = seriesModel.get('boxWidth');
+        if (!isArray(boxWidthBound)) {
+            boxWidthBound = [boxWidthBound, boxWidthBound];
+        }
+        boundList.push([
+            parsePercent$1(boxWidthBound[0], bandWidth) || 0,
+            parsePercent$1(boxWidthBound[1], bandWidth) || 0
+        ]);
+    });
+
+    var availableWidth = bandWidth * 0.8 - 2;
+    var boxGap = availableWidth / seriesCount * 0.3;
+    var boxWidth = (availableWidth - boxGap * (seriesCount - 1)) / seriesCount;
+    var base = boxWidth / 2 - availableWidth / 2;
+
+    each$13(seriesModels, function (seriesModel, idx) {
+        boxOffsetList.push(base);
+        base += boxGap + boxWidth;
+
+        boxWidthList.push(
+            Math.min(Math.max(boxWidth, boundList[idx][0]), boundList[idx][1])
+        );
+    });
+}
+
+/**
+ * Calculate points location for each series.
+ */
+function layoutSingleSeries(seriesModel, offset, boxWidth) {
+    var coordSys = seriesModel.coordinateSystem;
+    var data = seriesModel.getData();
+    var halfWidth = boxWidth / 2;
+    var cDimIdx = seriesModel.get('layout') === 'horizontal' ? 0 : 1;
+    var vDimIdx = 1 - cDimIdx;
+    var coordDims = ['x', 'y'];
+    var cDim = data.mapDimension(coordDims[cDimIdx]);
+    var vDims = data.mapDimension(coordDims[vDimIdx], true);
+
+    if (cDim == null || vDims.length < 5) {
+        return;
+    }
+
+    for (var dataIndex = 0; dataIndex < data.count(); dataIndex++) {
+        var axisDimVal = data.get(cDim, dataIndex);
+
+        var median = getPoint(axisDimVal, vDims[2], dataIndex);
+        var end1 = getPoint(axisDimVal, vDims[0], dataIndex);
+        var end2 = getPoint(axisDimVal, vDims[1], dataIndex);
+        var end4 = getPoint(axisDimVal, vDims[3], dataIndex);
+        var end5 = getPoint(axisDimVal, vDims[4], dataIndex);
+
+        var ends = [];
+        addBodyEnd(ends, end2, 0);
+        addBodyEnd(ends, end4, 1);
+
+        ends.push(end1, end2, end5, end4);
+        layEndLine(ends, end1);
+        layEndLine(ends, end5);
+        layEndLine(ends, median);
+
+        data.setItemLayout(dataIndex, {
+            initBaseline: median[vDimIdx],
+            ends: ends
+        });
+    }
+
+    function getPoint(axisDimVal, dimIdx, dataIndex) {
+        var val = data.get(dimIdx, dataIndex);
+        var p = [];
+        p[cDimIdx] = axisDimVal;
+        p[vDimIdx] = val;
+        var point;
+        if (isNaN(axisDimVal) || isNaN(val)) {
+            point = [NaN, NaN];
+        }
+        else {
+            point = coordSys.dataToPoint(p);
+            point[cDimIdx] += offset;
+        }
+        return point;
+    }
+
+    function addBodyEnd(ends, point, start) {
+        var point1 = point.slice();
+        var point2 = point.slice();
+        point1[cDimIdx] += halfWidth;
+        point2[cDimIdx] -= halfWidth;
+        start
+            ? ends.push(point1, point2)
+            : ends.push(point2, point1);
+    }
+
+    function layEndLine(ends, endCenter) {
+        var from = endCenter.slice();
+        var to = endCenter.slice();
+        from[cDimIdx] -= halfWidth;
+        to[cDimIdx] += halfWidth;
+        ends.push(from, to);
+    }
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+registerVisual(boxplotVisual);
+registerLayout(boxplotLayout);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var CandlestickSeries = SeriesModel.extend({
+
+    type: 'series.candlestick',
+
+    dependencies: ['xAxis', 'yAxis', 'grid'],
+
+    /**
+     * @readOnly
+     */
+    defaultValueDimensions: [
+        {name: 'open', defaultTooltip: true},
+        {name: 'close', defaultTooltip: true},
+        {name: 'lowest', defaultTooltip: true},
+        {name: 'highest', defaultTooltip: true}
+    ],
+
+    /**
+     * @type {Array.<string>}
+     * @readOnly
+     */
+    dimensions: null,
+
+    /**
+     * @override
+     */
+    defaultOption: {
+        zlevel: 0,
+        z: 2,
+        coordinateSystem: 'cartesian2d',
+        legendHoverLink: true,
+
+        hoverAnimation: true,
+
+        // xAxisIndex: 0,
+        // yAxisIndex: 0,
+
+        layout: null, // 'horizontal' or 'vertical'
+
+        itemStyle: {
+            color: '#c23531', // é˜³çº¿ positive
+            color0: '#314656', // é˜´çº¿ negative     '#c23531', '#314656'
+            borderWidth: 1,
+            // FIXME
+            // ec2ä¸ä½¿ç”¨çš„æ˜¯lineStyle.color å’Œ lineStyle.color0
+            borderColor: '#c23531',
+            borderColor0: '#314656'
+        },
+
+        emphasis: {
+            itemStyle: {
+                borderWidth: 2
+            }
+        },
+
+        barMaxWidth: null,
+        barMinWidth: null,
+        barWidth: null,
+
+        large: true,
+        largeThreshold: 600,
+
+        progressive: 3e3,
+        progressiveThreshold: 1e4,
+        progressiveChunkMode: 'mod',
+
+        animationUpdate: false,
+        animationEasing: 'linear',
+        animationDuration: 300
+    },
+
+    /**
+     * Get dimension for shadow in dataZoom
+     * @return {string} dimension name
+     */
+    getShadowDim: function () {
+        return 'open';
+    },
+
+    brushSelector: function (dataIndex, data, selectors) {
+        var itemLayout = data.getItemLayout(dataIndex);
+        return itemLayout && selectors.rect(itemLayout.brushRect);
+    }
+
+});
+
+mixin(CandlestickSeries, seriesModelMixin, true);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var NORMAL_ITEM_STYLE_PATH$1 = ['itemStyle'];
+var EMPHASIS_ITEM_STYLE_PATH$1 = ['emphasis', 'itemStyle'];
+var SKIP_PROPS = ['color', 'color0', 'borderColor', 'borderColor0'];
+
+
+var CandlestickView = Chart.extend({
+
+    type: 'candlestick',
+
+    render: function (seriesModel, ecModel, api) {
+        this._updateDrawMode(seriesModel);
+
+        this._isLargeDraw
+            ? this._renderLarge(seriesModel)
+            : this._renderNormal(seriesModel);
+    },
+
+    incrementalPrepareRender: function (seriesModel, ecModel, api) {
+        this._clear();
+        this._updateDrawMode(seriesModel);
+    },
+
+    incrementalRender: function (params, seriesModel, ecModel, api) {
+        this._isLargeDraw
+             ? this._incrementalRenderLarge(params, seriesModel)
+             : this._incrementalRenderNormal(params, seriesModel);
+    },
+
+    _updateDrawMode: function (seriesModel) {
+        var isLargeDraw = seriesModel.pipelineContext.large;
+        if (this._isLargeDraw == null || isLargeDraw ^ this._isLargeDraw) {
+            this._isLargeDraw = isLargeDraw;
+            this._clear();
+        }
+    },
+
+    _renderNormal: function (seriesModel) {
+        var data = seriesModel.getData();
+        var oldData = this._data;
+        var group = this.group;
+        var isSimpleBox = data.getLayout('isSimpleBox');
+
+        // There is no old data only when first rendering or switching from
+        // stream mode to normal mode, where previous elements should be removed.
+        if (!this._data) {
+            group.removeAll();
+        }
+
+        data.diff(oldData)
+            .add(function (newIdx) {
+                if (data.hasValue(newIdx)) {
+                    var el;
+
+                    var itemLayout = data.getItemLayout(newIdx);
+                    el = createNormalBox$1(itemLayout, newIdx, true);
+                    initProps(el, {shape: {points: itemLayout.ends}}, seriesModel, newIdx);
+
+                    setBoxCommon(el, data, newIdx, isSimpleBox);
+
+                    group.add(el);
+                    data.setItemGraphicEl(newIdx, el);
+                }
+            })
+            .update(function (newIdx, oldIdx) {
+                var el = oldData.getItemGraphicEl(oldIdx);
+
+                // Empty data
+                if (!data.hasValue(newIdx)) {
+                    group.remove(el);
+                    return;
+                }
+
+                var itemLayout = data.getItemLayout(newIdx);
+                if (!el) {
+                    el = createNormalBox$1(itemLayout, newIdx);
+                }
+                else {
+                    updateProps(el, {shape: {points: itemLayout.ends}}, seriesModel, newIdx);
+                }
+
+                setBoxCommon(el, data, newIdx, isSimpleBox);
+
+                group.add(el);
+                data.setItemGraphicEl(newIdx, el);
+            })
+            .remove(function (oldIdx) {
+                var el = oldData.getItemGraphicEl(oldIdx);
+                el && group.remove(el);
+            })
+            .execute();
+
+        this._data = data;
+    },
+
+    _renderLarge: function (seriesModel) {
+        this._clear();
+        createLarge$1(seriesModel, this.group);
+    },
+
+    _incrementalRenderNormal: function (params, seriesModel) {
+        var data = seriesModel.getData();
+        var isSimpleBox = data.getLayout('isSimpleBox');
+
+        var dataIndex;
+        while ((dataIndex = params.next()) != null) {
+            var el;
+
+            var itemLayout = data.getItemLayout(dataIndex);
+            el = createNormalBox$1(itemLayout, dataIndex);
+            setBoxCommon(el, data, dataIndex, isSimpleBox);
+
+            el.incremental = true;
+            this.group.add(el);
+        }
+    },
+
+    _incrementalRenderLarge: function (params, seriesModel) {
+        createLarge$1(seriesModel, this.group, true);
+    },
+
+    remove: function (ecModel) {
+        this._clear();
+    },
+
+    _clear: function () {
+        this.group.removeAll();
+        this._data = null;
+    },
+
+    dispose: noop
+
+});
+
+
+var NormalBoxPath = Path.extend({
+
+    type: 'normalCandlestickBox',
+
+    shape: {},
+
+    buildPath: function (ctx, shape) {
+        var ends = shape.points;
+
+        if (this.__simpleBox) {
+            ctx.moveTo(ends[4][0], ends[4][1]);
+            ctx.lineTo(ends[6][0], ends[6][1]);
+        }
+        else {
+            ctx.moveTo(ends[0][0], ends[0][1]);
+            ctx.lineTo(ends[1][0], ends[1][1]);
+            ctx.lineTo(ends[2][0], ends[2][1]);
+            ctx.lineTo(ends[3][0], ends[3][1]);
+            ctx.closePath();
+
+            ctx.moveTo(ends[4][0], ends[4][1]);
+            ctx.lineTo(ends[5][0], ends[5][1]);
+            ctx.moveTo(ends[6][0], ends[6][1]);
+            ctx.lineTo(ends[7][0], ends[7][1]);
+        }
+    }
+});
+
+function createNormalBox$1(itemLayout, dataIndex, isInit) {
+    var ends = itemLayout.ends;
+    return new NormalBoxPath({
+        shape: {
+            points: isInit
+                ? transInit$1(ends, itemLayout)
+                : ends
+        },
+        z2: 100
+    });
+}
+
+function setBoxCommon(el, data, dataIndex, isSimpleBox) {
+    var itemModel = data.getItemModel(dataIndex);
+    var normalItemStyleModel = itemModel.getModel(NORMAL_ITEM_STYLE_PATH$1);
+    var color = data.getItemVisual(dataIndex, 'color');
+    var borderColor = data.getItemVisual(dataIndex, 'borderColor') || color;
+
+    // Color must be excluded.
+    // Because symbol provide setColor individually to set fill and stroke
+    var itemStyle = normalItemStyleModel.getItemStyle(SKIP_PROPS);
+
+    el.useStyle(itemStyle);
+    el.style.strokeNoScale = true;
+    el.style.fill = color;
+    el.style.stroke = borderColor;
+
+    el.__simpleBox = isSimpleBox;
+
+    var hoverStyle = itemModel.getModel(EMPHASIS_ITEM_STYLE_PATH$1).getItemStyle();
+    setHoverStyle(el, hoverStyle);
+}
+
+function transInit$1(points, itemLayout) {
+    return map(points, function (point) {
+        point = point.slice();
+        point[1] = itemLayout.initBaseline;
+        return point;
+    });
+}
+
+
+
+var LargeBoxPath = Path.extend({
+
+    type: 'largeCandlestickBox',
+
+    shape: {},
+
+    buildPath: function (ctx, shape) {
+        // Drawing lines is more efficient than drawing
+        // a whole line or drawing rects.
+        var points = shape.points;
+        for (var i = 0; i < points.length;) {
+            if (this.__sign === points[i++]) {
+                var x = points[i++];
+                ctx.moveTo(x, points[i++]);
+                ctx.lineTo(x, points[i++]);
+            }
+            else {
+                i += 3;
+            }
+        }
+    }
+});
+
+function createLarge$1(seriesModel, group, incremental) {
+    var data = seriesModel.getData();
+    var largePoints = data.getLayout('largePoints');
+
+    var elP = new LargeBoxPath({
+        shape: {points: largePoints},
+        __sign: 1
+    });
+    group.add(elP);
+    var elN = new LargeBoxPath({
+        shape: {points: largePoints},
+        __sign: -1
+    });
+    group.add(elN);
+
+    setLargeStyle$1(1, elP, seriesModel, data);
+    setLargeStyle$1(-1, elN, seriesModel, data);
+
+    if (incremental) {
+        elP.incremental = true;
+        elN.incremental = true;
+    }
+}
+
+function setLargeStyle$1(sign, el, seriesModel, data) {
+    var suffix = sign > 0 ? 'P' : 'N';
+    var borderColor = data.getVisual('borderColor' + suffix)
+        || data.getVisual('color' + suffix);
+
+    // Color must be excluded.
+    // Because symbol provide setColor individually to set fill and stroke
+    var itemStyle = seriesModel.getModel(NORMAL_ITEM_STYLE_PATH$1).getItemStyle(SKIP_PROPS);
+
+    el.useStyle(itemStyle);
+    el.style.fill = null;
+    el.style.stroke = borderColor;
+    // No different
+    // el.style.lineWidth = .5;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var preprocessor = function (option) {
+    if (!option || !isArray(option.series)) {
+        return;
+    }
+
+    // Translate 'k' to 'candlestick'.
+    each$1(option.series, function (seriesItem) {
+        if (isObject$1(seriesItem) && seriesItem.type === 'k') {
+            seriesItem.type = 'candlestick';
+        }
+    });
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var positiveBorderColorQuery = ['itemStyle', 'borderColor'];
+var negativeBorderColorQuery = ['itemStyle', 'borderColor0'];
+var positiveColorQuery = ['itemStyle', 'color'];
+var negativeColorQuery = ['itemStyle', 'color0'];
+
+var candlestickVisual = {
+
+    seriesType: 'candlestick',
+
+    plan: createRenderPlanner(),
+
+    // For legend.
+    performRawSeries: true,
+
+    reset: function (seriesModel, ecModel) {
+
+        var data = seriesModel.getData();
+        var isLargeRender = seriesModel.pipelineContext.large;
+
+        data.setVisual({
+            legendSymbol: 'roundRect',
+            colorP: getColor(1, seriesModel),
+            colorN: getColor(-1, seriesModel),
+            borderColorP: getBorderColor(1, seriesModel),
+            borderColorN: getBorderColor(-1, seriesModel)
+        });
+
+        // Only visible series has each data be visual encoded
+        if (ecModel.isSeriesFiltered(seriesModel)) {
+            return;
+        }
+
+        return !isLargeRender && {progress: progress};
+
+
+        function progress(params, data) {
+            var dataIndex;
+            while ((dataIndex = params.next()) != null) {
+                var itemModel = data.getItemModel(dataIndex);
+                var sign = data.getItemLayout(dataIndex).sign;
+
+                data.setItemVisual(
+                    dataIndex,
+                    {
+                        color: getColor(sign, itemModel),
+                        borderColor: getBorderColor(sign, itemModel)
+                    }
+                );
+            }
+        }
+
+        function getColor(sign, model) {
+            return model.get(
+                sign > 0 ? positiveColorQuery : negativeColorQuery
+            );
+        }
+
+        function getBorderColor(sign, model) {
+            return model.get(
+                sign > 0 ? positiveBorderColorQuery : negativeBorderColorQuery
+            );
+        }
+
+    }
+
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var LargeArr$1 = typeof Float32Array !== 'undefined' ? Float32Array : Array;
+
+var candlestickLayout = {
+
+    seriesType: 'candlestick',
+
+    plan: createRenderPlanner(),
+
+    reset: function (seriesModel) {
+
+        var coordSys = seriesModel.coordinateSystem;
+        var data = seriesModel.getData();
+        var candleWidth = calculateCandleWidth(seriesModel, data);
+        var cDimIdx = 0;
+        var vDimIdx = 1;
+        var coordDims = ['x', 'y'];
+        var cDim = data.mapDimension(coordDims[cDimIdx]);
+        var vDims = data.mapDimension(coordDims[vDimIdx], true);
+        var openDim = vDims[0];
+        var closeDim = vDims[1];
+        var lowestDim = vDims[2];
+        var highestDim = vDims[3];
+
+        data.setLayout({
+            candleWidth: candleWidth,
+            // The value is experimented visually.
+            isSimpleBox: candleWidth <= 1.3
+        });
+
+        if (cDim == null || vDims.length < 4) {
+            return;
+        }
+
+        return {
+            progress: seriesModel.pipelineContext.large
+                ? largeProgress : normalProgress
+        };
+
+        function normalProgress(params, data) {
+            var dataIndex;
+            while ((dataIndex = params.next()) != null) {
+
+                var axisDimVal = data.get(cDim, dataIndex);
+                var openVal = data.get(openDim, dataIndex);
+                var closeVal = data.get(closeDim, dataIndex);
+                var lowestVal = data.get(lowestDim, dataIndex);
+                var highestVal = data.get(highestDim, dataIndex);
+
+                var ocLow = Math.min(openVal, closeVal);
+                var ocHigh = Math.max(openVal, closeVal);
+
+                var ocLowPoint = getPoint(ocLow, axisDimVal);
+                var ocHighPoint = getPoint(ocHigh, axisDimVal);
+                var lowestPoint = getPoint(lowestVal, axisDimVal);
+                var highestPoint = getPoint(highestVal, axisDimVal);
+
+                var ends = [];
+                addBodyEnd(ends, ocHighPoint, 0);
+                addBodyEnd(ends, ocLowPoint, 1);
+
+                ends.push(
+                    subPixelOptimizePoint(highestPoint),
+                    subPixelOptimizePoint(ocHighPoint),
+                    subPixelOptimizePoint(lowestPoint),
+                    subPixelOptimizePoint(ocLowPoint)
+                );
+
+                data.setItemLayout(dataIndex, {
+                    sign: getSign(data, dataIndex, openVal, closeVal, closeDim),
+                    initBaseline: openVal > closeVal
+                        ? ocHighPoint[vDimIdx] : ocLowPoint[vDimIdx], // open point.
+                    ends: ends,
+                    brushRect: makeBrushRect(lowestVal, highestVal, axisDimVal)
+                });
+            }
+
+            function getPoint(val, axisDimVal) {
+                var p = [];
+                p[cDimIdx] = axisDimVal;
+                p[vDimIdx] = val;
+                return (isNaN(axisDimVal) || isNaN(val))
+                    ? [NaN, NaN]
+                    : coordSys.dataToPoint(p);
+            }
+
+            function addBodyEnd(ends, point, start) {
+                var point1 = point.slice();
+                var point2 = point.slice();
+
+                point1[cDimIdx] = subPixelOptimize(
+                    point1[cDimIdx] + candleWidth / 2, 1, false
+                );
+                point2[cDimIdx] = subPixelOptimize(
+                    point2[cDimIdx] - candleWidth / 2, 1, true
+                );
+
+                start
+                    ? ends.push(point1, point2)
+                    : ends.push(point2, point1);
+            }
+
+            function makeBrushRect(lowestVal, highestVal, axisDimVal) {
+                var pmin = getPoint(lowestVal, axisDimVal);
+                var pmax = getPoint(highestVal, axisDimVal);
+
+                pmin[cDimIdx] -= candleWidth / 2;
+                pmax[cDimIdx] -= candleWidth / 2;
+
+                return {
+                    x: pmin[0],
+                    y: pmin[1],
+                    width: vDimIdx ? candleWidth : pmax[0] - pmin[0],
+                    height: vDimIdx ? pmax[1] - pmin[1] : candleWidth
+                };
+            }
+
+            function subPixelOptimizePoint(point) {
+                point[cDimIdx] = subPixelOptimize(point[cDimIdx], 1);
+                return point;
+            }
+        }
+
+        function largeProgress(params, data) {
+            // Structure: [sign, x, yhigh, ylow, sign, x, yhigh, ylow, ...]
+            var points = new LargeArr$1(params.count * 5);
+            var offset = 0;
+            var point;
+            var tmpIn = [];
+            var tmpOut = [];
+            var dataIndex;
+
+            while ((dataIndex = params.next()) != null) {
+                var axisDimVal = data.get(cDim, dataIndex);
+                var openVal = data.get(openDim, dataIndex);
+                var closeVal = data.get(closeDim, dataIndex);
+                var lowestVal = data.get(lowestDim, dataIndex);
+                var highestVal = data.get(highestDim, dataIndex);
+
+                if (isNaN(axisDimVal) || isNaN(lowestVal) || isNaN(highestVal)) {
+                    points[offset++] = NaN;
+                    offset += 4;
+                    continue;
+                }
+
+                points[offset++] = getSign(data, dataIndex, openVal, closeVal, closeDim);
+
+                tmpIn[cDimIdx] = axisDimVal;
+
+                tmpIn[vDimIdx] = lowestVal;
+                point = coordSys.dataToPoint(tmpIn, null, tmpOut);
+                points[offset++] = point ? point[0] : NaN;
+                points[offset++] = point ? point[1] : NaN;
+                tmpIn[vDimIdx] = highestVal;
+                point = coordSys.dataToPoint(tmpIn, null, tmpOut);
+                points[offset++] = point ? point[1] : NaN;
+            }
+
+            data.setLayout('largePoints', points);
+        }
+    }
+};
+
+function getSign(data, dataIndex, openVal, closeVal, closeDim) {
+    var sign;
+    if (openVal > closeVal) {
+        sign = -1;
+    }
+    else if (openVal < closeVal) {
+        sign = 1;
+    }
+    else {
+        sign = dataIndex > 0
+            // If close === open, compare with close of last record
+            ? (data.get(closeDim, dataIndex - 1) <= closeVal ? 1 : -1)
+            // No record of previous, set to be positive
+            : 1;
+    }
+
+    return sign;
+}
+
+function calculateCandleWidth(seriesModel, data) {
+    var baseAxis = seriesModel.getBaseAxis();
+    var extent;
+
+    var bandWidth = baseAxis.type === 'category'
+        ? baseAxis.getBandWidth()
+        : (
+            extent = baseAxis.getExtent(),
+            Math.abs(extent[1] - extent[0]) / data.count()
+        );
+
+    var barMaxWidth = parsePercent$1(
+        retrieve2(seriesModel.get('barMaxWidth'), bandWidth),
+        bandWidth
+    );
+    var barMinWidth = parsePercent$1(
+        retrieve2(seriesModel.get('barMinWidth'), 1),
+        bandWidth
+    );
+    var barWidth = seriesModel.get('barWidth');
+
+    return barWidth != null
+        ? parsePercent$1(barWidth, bandWidth)
+        // Put max outer to ensure bar visible in spite of overlap.
+        : Math.max(Math.min(bandWidth / 2, barMaxWidth), barMinWidth);
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+registerPreprocessor(preprocessor);
+registerVisual(candlestickVisual);
+registerLayout(candlestickLayout);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+SeriesModel.extend({
+
+    type: 'series.effectScatter',
+
+    dependencies: ['grid', 'polar'],
+
+    getInitialData: function (option, ecModel) {
+        return createListFromArray(this.getSource(), this);
+    },
+
+    brushSelector: 'point',
+
+    defaultOption: {
+        coordinateSystem: 'cartesian2d',
+        zlevel: 0,
+        z: 2,
+        legendHoverLink: true,
+
+        effectType: 'ripple',
+
+        progressive: 0,
+
+        // When to show the effect, option: 'render'|'emphasis'
+        showEffectOn: 'render',
+
+        // Ripple effect config
+        rippleEffect: {
+            period: 4,
+            // Scale of ripple
+            scale: 2.5,
+            // Brush type can be fill or stroke
+            brushType: 'fill'
+        },
+
+        // Cartesian coordinate system
+        // xAxisIndex: 0,
+        // yAxisIndex: 0,
+
+        // Polar coordinate system
+        // polarIndex: 0,
+
+        // Geo coordinate system
+        // geoIndex: 0,
+
+        // symbol: null,        // å›¾å½¢ç±»åž‹
+        symbolSize: 10          // å›¾å½¢å¤§å°ï¼ŒåŠå®½ï¼ˆåŠå¾„ï¼‰å‚æ•°ï¼Œå½“å›¾å½¢ä¸ºæ–¹å‘æˆ–è±å½¢åˆ™æ€»å®½åº¦ä¸ºsymbolSize * 2
+        // symbolRotate: null,  // å›¾å½¢æ—‹è½¬æŽ§åˆ¶
+
+        // large: false,
+        // Available when large is true
+        // largeThreshold: 2000,
+
+        // itemStyle: {
+        //     opacity: 1
+        // }
+    }
+
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Symbol with ripple effect
+ * @module echarts/chart/helper/EffectSymbol
+ */
+
+var EFFECT_RIPPLE_NUMBER = 3;
+
+function normalizeSymbolSize$1(symbolSize) {
+    if (!isArray(symbolSize)) {
+        symbolSize = [+symbolSize, +symbolSize];
+    }
+    return symbolSize;
+}
+
+function updateRipplePath(rippleGroup, effectCfg) {
+    rippleGroup.eachChild(function (ripplePath) {
+        ripplePath.attr({
+            z: effectCfg.z,
+            zlevel: effectCfg.zlevel,
+            style: {
+                stroke: effectCfg.brushType === 'stroke' ? effectCfg.color : null,
+                fill: effectCfg.brushType === 'fill' ? effectCfg.color : null
+            }
+        });
+    });
+}
+/**
+ * @constructor
+ * @param {module:echarts/data/List} data
+ * @param {number} idx
+ * @extends {module:zrender/graphic/Group}
+ */
+function EffectSymbol(data, idx) {
+    Group.call(this);
+
+    var symbol = new SymbolClz$1(data, idx);
+    var rippleGroup = new Group();
+    this.add(symbol);
+    this.add(rippleGroup);
+
+    rippleGroup.beforeUpdate = function () {
+        this.attr(symbol.getScale());
+    };
+    this.updateData(data, idx);
+}
+
+var effectSymbolProto = EffectSymbol.prototype;
+
+effectSymbolProto.stopEffectAnimation = function () {
+    this.childAt(1).removeAll();
+};
+
+effectSymbolProto.startEffectAnimation = function (effectCfg) {
+    var symbolType = effectCfg.symbolType;
+    var color = effectCfg.color;
+    var rippleGroup = this.childAt(1);
+
+    for (var i = 0; i < EFFECT_RIPPLE_NUMBER; i++) {
+        // var ripplePath = createSymbol(
+        //     symbolType, -0.5, -0.5, 1, 1, color
+        // );
+        // If width/height are set too small (e.g., set to 1) on ios10
+        // and macOS Sierra, a circle stroke become a rect, no matter what
+        // the scale is set. So we set width/height as 2. See #4136.
+        var ripplePath = createSymbol(
+            symbolType, -1, -1, 2, 2, color
+        );
+        ripplePath.attr({
+            style: {
+                strokeNoScale: true
+            },
+            z2: 99,
+            silent: true,
+            scale: [0.5, 0.5]
+        });
+
+        var delay = -i / EFFECT_RIPPLE_NUMBER * effectCfg.period + effectCfg.effectOffset;
+        // TODO Configurable effectCfg.period
+        ripplePath.animate('', true)
+            .when(effectCfg.period, {
+                scale: [effectCfg.rippleScale / 2, effectCfg.rippleScale / 2]
+            })
+            .delay(delay)
+            .start();
+        ripplePath.animateStyle(true)
+            .when(effectCfg.period, {
+                opacity: 0
+            })
+            .delay(delay)
+            .start();
+
+        rippleGroup.add(ripplePath);
+    }
+
+    updateRipplePath(rippleGroup, effectCfg);
+};
+
+/**
+ * Update effect symbol
+ */
+effectSymbolProto.updateEffectAnimation = function (effectCfg) {
+    var oldEffectCfg = this._effectCfg;
+    var rippleGroup = this.childAt(1);
+
+    // Must reinitialize effect if following configuration changed
+    var DIFFICULT_PROPS = ['symbolType', 'period', 'rippleScale'];
+    for (var i = 0; i < DIFFICULT_PROPS.length; i++) {
+        var propName = DIFFICULT_PROPS[i];
+        if (oldEffectCfg[propName] !== effectCfg[propName]) {
+            this.stopEffectAnimation();
+            this.startEffectAnimation(effectCfg);
+            return;
+        }
+    }
+
+    updateRipplePath(rippleGroup, effectCfg);
+};
+
+/**
+ * Highlight symbol
+ */
+effectSymbolProto.highlight = function () {
+    this.trigger('emphasis');
+};
+
+/**
+ * Downplay symbol
+ */
+effectSymbolProto.downplay = function () {
+    this.trigger('normal');
+};
+
+/**
+ * Update symbol properties
+ * @param  {module:echarts/data/List} data
+ * @param  {number} idx
+ */
+effectSymbolProto.updateData = function (data, idx) {
+    var seriesModel = data.hostModel;
+
+    this.childAt(0).updateData(data, idx);
+
+    var rippleGroup = this.childAt(1);
+    var itemModel = data.getItemModel(idx);
+    var symbolType = data.getItemVisual(idx, 'symbol');
+    var symbolSize = normalizeSymbolSize$1(data.getItemVisual(idx, 'symbolSize'));
+    var color = data.getItemVisual(idx, 'color');
+
+    rippleGroup.attr('scale', symbolSize);
+
+    rippleGroup.traverse(function (ripplePath) {
+        ripplePath.attr({
+            fill: color
+        });
+    });
+
+    var symbolOffset = itemModel.getShallow('symbolOffset');
+    if (symbolOffset) {
+        var pos = rippleGroup.position;
+        pos[0] = parsePercent$1(symbolOffset[0], symbolSize[0]);
+        pos[1] = parsePercent$1(symbolOffset[1], symbolSize[1]);
+    }
+    rippleGroup.rotation = (itemModel.getShallow('symbolRotate') || 0) * Math.PI / 180 || 0;
+
+    var effectCfg = {};
+
+    effectCfg.showEffectOn = seriesModel.get('showEffectOn');
+    effectCfg.rippleScale = itemModel.get('rippleEffect.scale');
+    effectCfg.brushType = itemModel.get('rippleEffect.brushType');
+    effectCfg.period = itemModel.get('rippleEffect.period') * 1000;
+    effectCfg.effectOffset = idx / data.count();
+    effectCfg.z = itemModel.getShallow('z') || 0;
+    effectCfg.zlevel = itemModel.getShallow('zlevel') || 0;
+    effectCfg.symbolType = symbolType;
+    effectCfg.color = color;
+
+    this.off('mouseover').off('mouseout').off('emphasis').off('normal');
+
+    if (effectCfg.showEffectOn === 'render') {
+        this._effectCfg
+            ? this.updateEffectAnimation(effectCfg)
+            : this.startEffectAnimation(effectCfg);
+
+        this._effectCfg = effectCfg;
+    }
+    else {
+        // Not keep old effect config
+        this._effectCfg = null;
+
+        this.stopEffectAnimation();
+        var symbol = this.childAt(0);
+        var onEmphasis = function () {
+            symbol.highlight();
+            if (effectCfg.showEffectOn !== 'render') {
+                this.startEffectAnimation(effectCfg);
+            }
+        };
+        var onNormal = function () {
+            symbol.downplay();
+            if (effectCfg.showEffectOn !== 'render') {
+                this.stopEffectAnimation();
+            }
+        };
+        this.on('mouseover', onEmphasis, this)
+            .on('mouseout', onNormal, this)
+            .on('emphasis', onEmphasis, this)
+            .on('normal', onNormal, this);
+    }
+
+    this._effectCfg = effectCfg;
+};
+
+effectSymbolProto.fadeOut = function (cb) {
+    this.off('mouseover').off('mouseout').off('emphasis').off('normal');
+    cb && cb();
+};
+
+inherits(EffectSymbol, Group);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+extendChartView({
+
+    type: 'effectScatter',
+
+    init: function () {
+        this._symbolDraw = new SymbolDraw(EffectSymbol);
+    },
+
+    render: function (seriesModel, ecModel, api) {
+        var data = seriesModel.getData();
+        var effectSymbolDraw = this._symbolDraw;
+        effectSymbolDraw.updateData(data);
+        this.group.add(effectSymbolDraw.group);
+    },
+
+    updateTransform: function (seriesModel, ecModel, api) {
+        var data = seriesModel.getData();
+
+        this.group.dirty();
+
+        var res = pointsLayout().reset(seriesModel);
+        if (res.progress) {
+            res.progress({ start: 0, end: data.count() }, data);
+        }
+
+        this._symbolDraw.updateLayout(data);
+    },
+
+    _updateGroupTransform: function (seriesModel) {
+        var coordSys = seriesModel.coordinateSystem;
+        if (coordSys && coordSys.getRoamTransform) {
+            this.group.transform = clone$2(coordSys.getRoamTransform());
+            this.group.decomposeTransform();
+        }
+    },
+
+    remove: function (ecModel, api) {
+        this._symbolDraw && this._symbolDraw.remove(api);
+    },
+
+    dispose: function () {}
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+registerVisual(visualSymbol('effectScatter', 'circle'));
+registerLayout(pointsLayout('effectScatter'));
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var Uint32Arr = typeof Uint32Array === 'undefined' ? Array : Uint32Array;
+var Float64Arr = typeof Float64Array === 'undefined' ? Array : Float64Array;
+
+function compatEc2(seriesOpt) {
+    var data = seriesOpt.data;
+    if (data && data[0] && data[0][0] && data[0][0].coord) {
+        if (__DEV__) {
+            console.warn('Lines data configuration has been changed to'
+                + ' { coords:[[1,2],[2,3]] }');
+        }
+        seriesOpt.data = map(data, function (itemOpt) {
+            var coords = [
+                itemOpt[0].coord, itemOpt[1].coord
+            ];
+            var target = {
+                coords: coords
+            };
+            if (itemOpt[0].name) {
+                target.fromName = itemOpt[0].name;
+            }
+            if (itemOpt[1].name) {
+                target.toName = itemOpt[1].name;
+            }
+            return mergeAll([target, itemOpt[0], itemOpt[1]]);
+        });
+    }
+}
+
+var LinesSeries = SeriesModel.extend({
+
+    type: 'series.lines',
+
+    dependencies: ['grid', 'polar'],
+
+    visualColorAccessPath: 'lineStyle.color',
+
+    init: function (option) {
+        // The input data may be null/undefined.
+        option.data = option.data || [];
+
+        // Not using preprocessor because mergeOption may not have series.type
+        compatEc2(option);
+
+        var result = this._processFlatCoordsArray(option.data);
+        this._flatCoords = result.flatCoords;
+        this._flatCoordsOffset = result.flatCoordsOffset;
+        if (result.flatCoords) {
+            option.data = new Float32Array(result.count);
+        }
+
+        LinesSeries.superApply(this, 'init', arguments);
+    },
+
+    mergeOption: function (option) {
+        // The input data may be null/undefined.
+        option.data = option.data || [];
+
+        compatEc2(option);
+
+        if (option.data) {
+            // Only update when have option data to merge.
+            var result = this._processFlatCoordsArray(option.data);
+            this._flatCoords = result.flatCoords;
+            this._flatCoordsOffset = result.flatCoordsOffset;
+            if (result.flatCoords) {
+                option.data = new Float32Array(result.count);
+            }
+        }
+
+        LinesSeries.superApply(this, 'mergeOption', arguments);
+    },
+
+    appendData: function (params) {
+        var result = this._processFlatCoordsArray(params.data);
+        if (result.flatCoords) {
+            if (!this._flatCoords) {
+                this._flatCoords = result.flatCoords;
+                this._flatCoordsOffset = result.flatCoordsOffset;
+            }
+            else {
+                this._flatCoords = concatArray(this._flatCoords, result.flatCoords);
+                this._flatCoordsOffset = concatArray(this._flatCoordsOffset, result.flatCoordsOffset);
+            }
+            params.data = new Float32Array(result.count);
+        }
+
+        this.getRawData().appendData(params.data);
+    },
+
+    _getCoordsFromItemModel: function (idx) {
+        var itemModel = this.getData().getItemModel(idx);
+        var coords = (itemModel.option instanceof Array)
+            ? itemModel.option : itemModel.getShallow('coords');
+
+        if (__DEV__) {
+            if (!(coords instanceof Array && coords.length > 0 && coords[0] instanceof Array)) {
+                throw new Error('Invalid coords ' + JSON.stringify(coords) + '. Lines must have 2d coords array in data item.');
+            }
+        }
+        return coords;
+    },
+
+    getLineCoordsCount: function (idx) {
+        if (this._flatCoordsOffset) {
+            return this._flatCoordsOffset[idx * 2 + 1];
+        }
+        else {
+            return this._getCoordsFromItemModel(idx).length;
+        }
+    },
+
+    getLineCoords: function (idx, out) {
+        if (this._flatCoordsOffset) {
+            var offset = this._flatCoordsOffset[idx * 2];
+            var len = this._flatCoordsOffset[idx * 2 + 1];
+            for (var i = 0; i < len; i++) {
+                out[i] = out[i] || [];
+                out[i][0] = this._flatCoords[offset + i * 2];
+                out[i][1] = this._flatCoords[offset + i * 2 + 1];
+            }
+            return len;
+        }
+        else {
+            var coords = this._getCoordsFromItemModel(idx);
+            for (var i = 0; i < coords.length; i++) {
+                out[i] = out[i] || [];
+                out[i][0] = coords[i][0];
+                out[i][1] = coords[i][1];
+            }
+            return coords.length;
+        }
+    },
+
+    _processFlatCoordsArray: function (data) {
+        var startOffset = 0;
+        if (this._flatCoords) {
+            startOffset = this._flatCoords.length;
+        }
+        // Stored as a typed array. In format
+        // Points Count(2) | x | y | x | y | Points Count(3) | x |  y | x | y | x | y |
+        if (typeof data[0] === 'number') {
+            var len = data.length;
+            // Store offset and len of each segment
+            var coordsOffsetAndLenStorage = new Uint32Arr(len);
+            var coordsStorage = new Float64Arr(len);
+            var coordsCursor = 0;
+            var offsetCursor = 0;
+            var dataCount = 0;
+            for (var i = 0; i < len;) {
+                dataCount++;
+                var count = data[i++];
+                // Offset
+                coordsOffsetAndLenStorage[offsetCursor++] = coordsCursor + startOffset;
+                // Len
+                coordsOffsetAndLenStorage[offsetCursor++] = count;
+                for (var k = 0; k < count; k++) {
+                    var x = data[i++];
+                    var y = data[i++];
+                    coordsStorage[coordsCursor++] = x;
+                    coordsStorage[coordsCursor++] = y;
+
+                    if (i > len) {
+                        if (__DEV__) {
+                            throw new Error('Invalid data format.');
+                        }
+                    }
+                }
+            }
+
+            return {
+                flatCoordsOffset: new Uint32Array(coordsOffsetAndLenStorage.buffer, 0, offsetCursor),
+                flatCoords: coordsStorage,
+                count: dataCount
+            };
+        }
+
+        return {
+            flatCoordsOffset: null,
+            flatCoords: null,
+            count: data.length
+        };
+    },
+
+    getInitialData: function (option, ecModel) {
+        if (__DEV__) {
+            var CoordSys = CoordinateSystemManager.get(option.coordinateSystem);
+            if (!CoordSys) {
+                throw new Error('Unkown coordinate system ' + option.coordinateSystem);
+            }
+        }
+
+        var lineData = new List(['value'], this);
+        lineData.hasItemOption = false;
+
+        lineData.initData(option.data, [], function (dataItem, dimName, dataIndex, dimIndex) {
+            // dataItem is simply coords
+            if (dataItem instanceof Array) {
+                return NaN;
+            }
+            else {
+                lineData.hasItemOption = true;
+                var value = dataItem.value;
+                if (value != null) {
+                    return value instanceof Array ? value[dimIndex] : value;
+                }
+            }
+        });
+
+        return lineData;
+    },
+
+    formatTooltip: function (dataIndex) {
+        var data = this.getData();
+        var itemModel = data.getItemModel(dataIndex);
+        var name = itemModel.get('name');
+        if (name) {
+            return name;
+        }
+        var fromName = itemModel.get('fromName');
+        var toName = itemModel.get('toName');
+        var html = [];
+        fromName != null && html.push(fromName);
+        toName != null && html.push(toName);
+
+        return encodeHTML(html.join(' > '));
+    },
+
+    preventIncremental: function () {
+        return !!this.get('effect.show');
+    },
+
+    getProgressive: function () {
+        var progressive = this.option.progressive;
+        if (progressive == null) {
+            return this.option.large ? 1e4 : this.get('progressive');
+        }
+        return progressive;
+    },
+
+    getProgressiveThreshold: function () {
+        var progressiveThreshold = this.option.progressiveThreshold;
+        if (progressiveThreshold == null) {
+            return this.option.large ? 2e4 : this.get('progressiveThreshold');
+        }
+        return progressiveThreshold;
+    },
+
+    defaultOption: {
+        coordinateSystem: 'geo',
+        zlevel: 0,
+        z: 2,
+        legendHoverLink: true,
+
+        hoverAnimation: true,
+        // Cartesian coordinate system
+        xAxisIndex: 0,
+        yAxisIndex: 0,
+
+        symbol: ['none', 'none'],
+        symbolSize: [10, 10],
+        // Geo coordinate system
+        geoIndex: 0,
+
+        effect: {
+            show: false,
+            period: 4,
+            // Animation delay. support callback
+            // delay: 0,
+            // If move with constant speed px/sec
+            // period will be ignored if this property is > 0,
+            constantSpeed: 0,
+            symbol: 'circle',
+            symbolSize: 3,
+            loop: true,
+            // Length of trail, 0 - 1
+            trailLength: 0.2
+            // Same with lineStyle.color
+            // color
+        },
+
+        large: false,
+        // Available when large is true
+        largeThreshold: 2000,
+
+        // If lines are polyline
+        // polyline not support curveness, label, animation
+        polyline: false,
+
+        label: {
+            show: false,
+            position: 'end'
+            // distance: 5,
+            // formatter: æ ‡ç¾æ–‡æœ¬æ ¼å¼å™¨ï¼ŒåŒTooltip.formatterï¼Œä¸æ”¯æŒå¼‚æ¥å›žè°ƒ
+        },
+
+        lineStyle: {
+            opacity: 0.5
+        }
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Provide effect for line
+ * @module echarts/chart/helper/EffectLine
+ */
+
+/**
+ * @constructor
+ * @extends {module:zrender/graphic/Group}
+ * @alias {module:echarts/chart/helper/Line}
+ */
+function EffectLine(lineData, idx, seriesScope) {
+    Group.call(this);
+
+    this.add(this.createLine(lineData, idx, seriesScope));
+
+    this._updateEffectSymbol(lineData, idx);
+}
+
+var effectLineProto = EffectLine.prototype;
+
+effectLineProto.createLine = function (lineData, idx, seriesScope) {
+    return new Line$1(lineData, idx, seriesScope);
+};
+
+effectLineProto._updateEffectSymbol = function (lineData, idx) {
+    var itemModel = lineData.getItemModel(idx);
+    var effectModel = itemModel.getModel('effect');
+    var size = effectModel.get('symbolSize');
+    var symbolType = effectModel.get('symbol');
+    if (!isArray(size)) {
+        size = [size, size];
+    }
+    var color = effectModel.get('color') || lineData.getItemVisual(idx, 'color');
+    var symbol = this.childAt(1);
+
+    if (this._symbolType !== symbolType) {
+        // Remove previous
+        this.remove(symbol);
+
+        symbol = createSymbol(
+            symbolType, -0.5, -0.5, 1, 1, color
+        );
+        symbol.z2 = 100;
+        symbol.culling = true;
+
+        this.add(symbol);
+    }
+
+    // Symbol may be removed if loop is false
+    if (!symbol) {
+        return;
+    }
+
+    // Shadow color is same with color in default
+    symbol.setStyle('shadowColor', color);
+    symbol.setStyle(effectModel.getItemStyle(['color']));
+
+    symbol.attr('scale', size);
+
+    symbol.setColor(color);
+    symbol.attr('scale', size);
+
+    this._symbolType = symbolType;
+
+    this._updateEffectAnimation(lineData, effectModel, idx);
+};
+
+effectLineProto._updateEffectAnimation = function (lineData, effectModel, idx) {
+
+    var symbol = this.childAt(1);
+    if (!symbol) {
+        return;
+    }
+
+    var self = this;
+
+    var points = lineData.getItemLayout(idx);
+
+    var period = effectModel.get('period') * 1000;
+    var loop = effectModel.get('loop');
+    var constantSpeed = effectModel.get('constantSpeed');
+    var delayExpr = retrieve(effectModel.get('delay'), function (idx) {
+        return idx / lineData.count() * period / 3;
+    });
+    var isDelayFunc = typeof delayExpr === 'function';
+
+    // Ignore when updating
+    symbol.ignore = true;
+
+    this.updateAnimationPoints(symbol, points);
+
+    if (constantSpeed > 0) {
+        period = this.getLineLength(symbol) / constantSpeed * 1000;
+    }
+
+    if (period !== this._period || loop !== this._loop) {
+
+        symbol.stopAnimation();
+
+        var delay = delayExpr;
+        if (isDelayFunc) {
+            delay = delayExpr(idx);
+        }
+        if (symbol.__t > 0) {
+            delay = -period * symbol.__t;
+        }
+        symbol.__t = 0;
+        var animator = symbol.animate('', loop)
+            .when(period, {
+                __t: 1
+            })
+            .delay(delay)
+            .during(function () {
+                self.updateSymbolPosition(symbol);
+            });
+        if (!loop) {
+            animator.done(function () {
+                self.remove(symbol);
+            });
+        }
+        animator.start();
+    }
+
+    this._period = period;
+    this._loop = loop;
+};
+
+effectLineProto.getLineLength = function (symbol) {
+    // Not so accurate
+    return (dist(symbol.__p1, symbol.__cp1)
+        + dist(symbol.__cp1, symbol.__p2));
+};
+
+effectLineProto.updateAnimationPoints = function (symbol, points) {
+    symbol.__p1 = points[0];
+    symbol.__p2 = points[1];
+    symbol.__cp1 = points[2] || [
+        (points[0][0] + points[1][0]) / 2,
+        (points[0][1] + points[1][1]) / 2
+    ];
+};
+
+effectLineProto.updateData = function (lineData, idx, seriesScope) {
+    this.childAt(0).updateData(lineData, idx, seriesScope);
+    this._updateEffectSymbol(lineData, idx);
+};
+
+effectLineProto.updateSymbolPosition = function (symbol) {
+    var p1 = symbol.__p1;
+    var p2 = symbol.__p2;
+    var cp1 = symbol.__cp1;
+    var t = symbol.__t;
+    var pos = symbol.position;
+    var quadraticAt$$1 = quadraticAt;
+    var quadraticDerivativeAt$$1 = quadraticDerivativeAt;
+    pos[0] = quadraticAt$$1(p1[0], cp1[0], p2[0], t);
+    pos[1] = quadraticAt$$1(p1[1], cp1[1], p2[1], t);
+
+    // Tangent
+    var tx = quadraticDerivativeAt$$1(p1[0], cp1[0], p2[0], t);
+    var ty = quadraticDerivativeAt$$1(p1[1], cp1[1], p2[1], t);
+
+    symbol.rotation = -Math.atan2(ty, tx) - Math.PI / 2;
+
+    symbol.ignore = false;
+};
+
+
+effectLineProto.updateLayout = function (lineData, idx) {
+    this.childAt(0).updateLayout(lineData, idx);
+
+    var effectModel = lineData.getItemModel(idx).getModel('effect');
+    this._updateEffectAnimation(lineData, effectModel, idx);
+};
+
+inherits(EffectLine, Group);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @module echarts/chart/helper/Line
+ */
+
+/**
+ * @constructor
+ * @extends {module:zrender/graphic/Group}
+ * @alias {module:echarts/chart/helper/Polyline}
+ */
+function Polyline$2(lineData, idx, seriesScope) {
+    Group.call(this);
+
+    this._createPolyline(lineData, idx, seriesScope);
+}
+
+var polylineProto = Polyline$2.prototype;
+
+polylineProto._createPolyline = function (lineData, idx, seriesScope) {
+    // var seriesModel = lineData.hostModel;
+    var points = lineData.getItemLayout(idx);
+
+    var line = new Polyline({
+        shape: {
+            points: points
+        }
+    });
+
+    this.add(line);
+
+    this._updateCommonStl(lineData, idx, seriesScope);
+};
+
+polylineProto.updateData = function (lineData, idx, seriesScope) {
+    var seriesModel = lineData.hostModel;
+
+    var line = this.childAt(0);
+    var target = {
+        shape: {
+            points: lineData.getItemLayout(idx)
+        }
+    };
+    updateProps(line, target, seriesModel, idx);
+
+    this._updateCommonStl(lineData, idx, seriesScope);
+};
+
+polylineProto._updateCommonStl = function (lineData, idx, seriesScope) {
+    var line = this.childAt(0);
+    var itemModel = lineData.getItemModel(idx);
+
+    var visualColor = lineData.getItemVisual(idx, 'color');
+
+    var lineStyle = seriesScope && seriesScope.lineStyle;
+    var hoverLineStyle = seriesScope && seriesScope.hoverLineStyle;
+
+    if (!seriesScope || lineData.hasItemOption) {
+        lineStyle = itemModel.getModel('lineStyle').getLineStyle();
+        hoverLineStyle = itemModel.getModel('emphasis.lineStyle').getLineStyle();
+    }
+    line.useStyle(defaults(
+        {
+            strokeNoScale: true,
+            fill: 'none',
+            stroke: visualColor
+        },
+        lineStyle
+    ));
+    line.hoverStyle = hoverLineStyle;
+
+    setHoverStyle(this);
+};
+
+polylineProto.updateLayout = function (lineData, idx) {
+    var polyline = this.childAt(0);
+    polyline.setShape('points', lineData.getItemLayout(idx));
+};
+
+inherits(Polyline$2, Group);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Provide effect for line
+ * @module echarts/chart/helper/EffectLine
+ */
+
+/**
+ * @constructor
+ * @extends {module:echarts/chart/helper/EffectLine}
+ * @alias {module:echarts/chart/helper/Polyline}
+ */
+function EffectPolyline(lineData, idx, seriesScope) {
+    EffectLine.call(this, lineData, idx, seriesScope);
+    this._lastFrame = 0;
+    this._lastFramePercent = 0;
+}
+
+var effectPolylineProto = EffectPolyline.prototype;
+
+// Overwrite
+effectPolylineProto.createLine = function (lineData, idx, seriesScope) {
+    return new Polyline$2(lineData, idx, seriesScope);
+};
+
+// Overwrite
+effectPolylineProto.updateAnimationPoints = function (symbol, points) {
+    this._points = points;
+    var accLenArr = [0];
+    var len$$1 = 0;
+    for (var i = 1; i < points.length; i++) {
+        var p1 = points[i - 1];
+        var p2 = points[i];
+        len$$1 += dist(p1, p2);
+        accLenArr.push(len$$1);
+    }
+    if (len$$1 === 0) {
+        return;
+    }
+
+    for (var i = 0; i < accLenArr.length; i++) {
+        accLenArr[i] /= len$$1;
+    }
+    this._offsets = accLenArr;
+    this._length = len$$1;
+};
+
+// Overwrite
+effectPolylineProto.getLineLength = function (symbol) {
+    return this._length;
+};
+
+// Overwrite
+effectPolylineProto.updateSymbolPosition = function (symbol) {
+    var t = symbol.__t;
+    var points = this._points;
+    var offsets = this._offsets;
+    var len$$1 = points.length;
+
+    if (!offsets) {
+        // Has length 0
+        return;
+    }
+
+    var lastFrame = this._lastFrame;
+    var frame;
+
+    if (t < this._lastFramePercent) {
+        // Start from the next frame
+        // PENDING start from lastFrame ?
+        var start = Math.min(lastFrame + 1, len$$1 - 1);
+        for (frame = start; frame >= 0; frame--) {
+            if (offsets[frame] <= t) {
+                break;
+            }
+        }
+        // PENDING really need to do this ?
+        frame = Math.min(frame, len$$1 - 2);
+    }
+    else {
+        for (var frame = lastFrame; frame < len$$1; frame++) {
+            if (offsets[frame] > t) {
+                break;
+            }
+        }
+        frame = Math.min(frame - 1, len$$1 - 2);
+    }
+
+    lerp(
+        symbol.position, points[frame], points[frame + 1],
+        (t - offsets[frame]) / (offsets[frame + 1] - offsets[frame])
+    );
+
+    var tx = points[frame + 1][0] - points[frame][0];
+    var ty = points[frame + 1][1] - points[frame][1];
+    symbol.rotation = -Math.atan2(ty, tx) - Math.PI / 2;
+
+    this._lastFrame = frame;
+    this._lastFramePercent = t;
+
+    symbol.ignore = false;
+};
+
+inherits(EffectPolyline, EffectLine);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// TODO Batch by color
+
+var LargeLineShape = extendShape({
+
+    shape: {
+        polyline: false,
+        curveness: 0,
+        segs: []
+    },
+
+    buildPath: function (path, shape) {
+        var segs = shape.segs;
+        var curveness = shape.curveness;
+
+        if (shape.polyline) {
+            for (var i = 0; i < segs.length;) {
+                var count = segs[i++];
+                if (count > 0) {
+                    path.moveTo(segs[i++], segs[i++]);
+                    for (var k = 1; k < count; k++) {
+                        path.lineTo(segs[i++], segs[i++]);
+                    }
+                }
+            }
+        }
+        else {
+            for (var i = 0; i < segs.length;) {
+                var x0 = segs[i++];
+                var y0 = segs[i++];
+                var x1 = segs[i++];
+                var y1 = segs[i++];
+                path.moveTo(x0, y0);
+                if (curveness > 0) {
+                    var x2 = (x0 + x1) / 2 - (y0 - y1) * curveness;
+                    var y2 = (y0 + y1) / 2 - (x1 - x0) * curveness;
+                    path.quadraticCurveTo(x2, y2, x1, y1);
+                }
+                else {
+                    path.lineTo(x1, y1);
+                }
+            }
+        }
+    },
+
+    findDataIndex: function (x, y) {
+
+        var shape = this.shape;
+        var segs = shape.segs;
+        var curveness = shape.curveness;
+
+        if (shape.polyline) {
+            var dataIndex = 0;
+            for (var i = 0; i < segs.length;) {
+                var count = segs[i++];
+                if (count > 0) {
+                    var x0 = segs[i++];
+                    var y0 = segs[i++];
+                    for (var k = 1; k < count; k++) {
+                        var x1 = segs[i++];
+                        var y1 = segs[i++];
+                        if (containStroke$1(x0, y0, x1, y1)) {
+                            return dataIndex;
+                        }
+                    }
+                }
+
+                dataIndex++;
+            }
+        }
+        else {
+            var dataIndex = 0;
+            for (var i = 0; i < segs.length;) {
+                var x0 = segs[i++];
+                var y0 = segs[i++];
+                var x1 = segs[i++];
+                var y1 = segs[i++];
+                if (curveness > 0) {
+                    var x2 = (x0 + x1) / 2 - (y0 - y1) * curveness;
+                    var y2 = (y0 + y1) / 2 - (x1 - x0) * curveness;
+
+                    if (containStroke$3(x0, y0, x2, y2, x1, y1)) {
+                        return dataIndex;
+                    }
+                }
+                else {
+                    if (containStroke$1(x0, y0, x1, y1)) {
+                        return dataIndex;
+                    }
+                }
+
+                dataIndex++;
+            }
+        }
+
+        return -1;
+    }
+});
+
+function LargeLineDraw() {
+    this.group = new Group();
+}
+
+var largeLineProto = LargeLineDraw.prototype;
+
+largeLineProto.isPersistent = function () {
+    return !this._incremental;
+};
+
+/**
+ * Update symbols draw by new data
+ * @param {module:echarts/data/List} data
+ */
+largeLineProto.updateData = function (data) {
+    this.group.removeAll();
+
+    var lineEl = new LargeLineShape({
+        rectHover: true,
+        cursor: 'default'
+    });
+    lineEl.setShape({
+        segs: data.getLayout('linesPoints')
+    });
+
+    this._setCommon(lineEl, data);
+
+    // Add back
+    this.group.add(lineEl);
+
+    this._incremental = null;
+};
+
+/**
+ * @override
+ */
+largeLineProto.incrementalPrepareUpdate = function (data) {
+    this.group.removeAll();
+
+    this._clearIncremental();
+
+    if (data.count() > 5e5) {
+        if (!this._incremental) {
+            this._incremental = new IncrementalDisplayble({
+                silent: true
+            });
+        }
+        this.group.add(this._incremental);
+    }
+    else {
+        this._incremental = null;
+    }
+};
+
+/**
+ * @override
+ */
+largeLineProto.incrementalUpdate = function (taskParams, data) {
+    var lineEl = new LargeLineShape();
+    lineEl.setShape({
+        segs: data.getLayout('linesPoints')
+    });
+
+    this._setCommon(lineEl, data, !!this._incremental);
+
+    if (!this._incremental) {
+        lineEl.rectHover = true;
+        lineEl.cursor = 'default';
+        lineEl.__startIndex = taskParams.start;
+        this.group.add(lineEl);
+    }
+    else {
+        this._incremental.addDisplayable(lineEl, true);
+    }
+};
+
+/**
+ * @override
+ */
+largeLineProto.remove = function () {
+    this._clearIncremental();
+    this._incremental = null;
+    this.group.removeAll();
+};
+
+largeLineProto._setCommon = function (lineEl, data, isIncremental) {
+    var hostModel = data.hostModel;
+
+    lineEl.setShape({
+        polyline: hostModel.get('polyline'),
+        curveness: hostModel.get('lineStyle.curveness')
+    });
+
+    lineEl.useStyle(
+        hostModel.getModel('lineStyle').getLineStyle()
+    );
+    lineEl.style.strokeNoScale = true;
+
+    var visualColor = data.getVisual('color');
+    if (visualColor) {
+        lineEl.setStyle('stroke', visualColor);
+    }
+    lineEl.setStyle('fill');
+
+    if (!isIncremental) {
+        // Enable tooltip
+        // PENDING May have performance issue when path is extremely large
+        lineEl.seriesIndex = hostModel.seriesIndex;
+        lineEl.on('mousemove', function (e) {
+            lineEl.dataIndex = null;
+            var dataIndex = lineEl.findDataIndex(e.offsetX, e.offsetY);
+            if (dataIndex > 0) {
+                // Provide dataIndex for tooltip
+                lineEl.dataIndex = dataIndex + lineEl.__startIndex;
+            }
+        });
+    }
+};
+
+largeLineProto._clearIncremental = function () {
+    var incremental = this._incremental;
+    if (incremental) {
+        incremental.clearDisplaybles();
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var linesLayout = {
+    seriesType: 'lines',
+
+    plan: createRenderPlanner(),
+
+    reset: function (seriesModel) {
+        var coordSys = seriesModel.coordinateSystem;
+        var isPolyline = seriesModel.get('polyline');
+        var isLarge = seriesModel.pipelineContext.large;
+
+        function progress(params, lineData) {
+            var lineCoords = [];
+            if (isLarge) {
+                var points;
+                var segCount = params.end - params.start;
+                if (isPolyline) {
+                    var totalCoordsCount = 0;
+                    for (var i = params.start; i < params.end; i++) {
+                        totalCoordsCount += seriesModel.getLineCoordsCount(i);
+                    }
+                    points = new Float32Array(segCount + totalCoordsCount * 2);
+                }
+                else {
+                    points = new Float32Array(segCount * 4);
+                }
+
+                var offset = 0;
+                var pt = [];
+                for (var i = params.start; i < params.end; i++) {
+                    var len = seriesModel.getLineCoords(i, lineCoords);
+                    if (isPolyline) {
+                        points[offset++] = len;
+                    }
+                    for (var k = 0; k < len; k++) {
+                        pt = coordSys.dataToPoint(lineCoords[k], false, pt);
+                        points[offset++] = pt[0];
+                        points[offset++] = pt[1];
+                    }
+                }
+
+                lineData.setLayout('linesPoints', points);
+            }
+            else {
+                for (var i = params.start; i < params.end; i++) {
+                    var itemModel = lineData.getItemModel(i);
+                    var len = seriesModel.getLineCoords(i, lineCoords);
+
+                    var pts = [];
+                    if (isPolyline) {
+                        for (var j = 0; j < len; j++) {
+                            pts.push(coordSys.dataToPoint(lineCoords[j]));
+                        }
+                    }
+                    else {
+                        pts[0] = coordSys.dataToPoint(lineCoords[0]);
+                        pts[1] = coordSys.dataToPoint(lineCoords[1]);
+
+                        var curveness = itemModel.get('lineStyle.curveness');
+                        if (+curveness) {
+                            pts[2] = [
+                                (pts[0][0] + pts[1][0]) / 2 - (pts[0][1] - pts[1][1]) * curveness,
+                                (pts[0][1] + pts[1][1]) / 2 - (pts[1][0] - pts[0][0]) * curveness
+                            ];
+                        }
+                    }
+                    lineData.setItemLayout(i, pts);
+                }
+            }
+        }
+
+        return { progress: progress };
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+extendChartView({
+
+    type: 'lines',
+
+    init: function () {},
+
+    render: function (seriesModel, ecModel, api) {
+        var data = seriesModel.getData();
+
+        var lineDraw = this._updateLineDraw(data, seriesModel);
+
+        var zlevel = seriesModel.get('zlevel');
+        var trailLength = seriesModel.get('effect.trailLength');
+
+        var zr = api.getZr();
+        // Avoid the drag cause ghost shadow
+        // FIXME Better way ?
+        // SVG doesn't support
+        var isSvg = zr.painter.getType() === 'svg';
+        if (!isSvg) {
+            zr.painter.getLayer(zlevel).clear(true);
+        }
+        // Config layer with motion blur
+        if (this._lastZlevel != null && !isSvg) {
+            zr.configLayer(this._lastZlevel, {
+                motionBlur: false
+            });
+        }
+        if (this._showEffect(seriesModel) && trailLength) {
+            if (__DEV__) {
+                var notInIndividual = false;
+                ecModel.eachSeries(function (otherSeriesModel) {
+                    if (otherSeriesModel !== seriesModel && otherSeriesModel.get('zlevel') === zlevel) {
+                        notInIndividual = true;
+                    }
+                });
+                notInIndividual && console.warn('Lines with trail effect should have an individual zlevel');
+            }
+
+            if (!isSvg) {
+                zr.configLayer(zlevel, {
+                    motionBlur: true,
+                    lastFrameAlpha: Math.max(Math.min(trailLength / 10 + 0.9, 1), 0)
+                });
+            }
+        }
+
+        lineDraw.updateData(data);
+
+        this._lastZlevel = zlevel;
+
+        this._finished = true;
+    },
+
+    incrementalPrepareRender: function (seriesModel, ecModel, api) {
+        var data = seriesModel.getData();
+
+        var lineDraw = this._updateLineDraw(data, seriesModel);
+
+        lineDraw.incrementalPrepareUpdate(data);
+
+        this._clearLayer(api);
+
+        this._finished = false;
+    },
+
+    incrementalRender: function (taskParams, seriesModel, ecModel) {
+        this._lineDraw.incrementalUpdate(taskParams, seriesModel.getData());
+
+        this._finished = taskParams.end === seriesModel.getData().count();
+    },
+
+    updateTransform: function (seriesModel, ecModel, api) {
+        var data = seriesModel.getData();
+        var pipelineContext = seriesModel.pipelineContext;
+
+        if (!this._finished || pipelineContext.large || pipelineContext.progressiveRender) {
+            // TODO Don't have to do update in large mode. Only do it when there are millions of data.
+            return {
+                update: true
+            };
+        }
+        else {
+            // TODO Use same logic with ScatterView.
+            // Manually update layout
+            var res = linesLayout.reset(seriesModel);
+            if (res.progress) {
+                res.progress({ start: 0, end: data.count() }, data);
+            }
+            this._lineDraw.updateLayout();
+            this._clearLayer(api);
+        }
+    },
+
+    _updateLineDraw: function (data, seriesModel) {
+        var lineDraw = this._lineDraw;
+        var hasEffect = this._showEffect(seriesModel);
+        var isPolyline = !!seriesModel.get('polyline');
+        var pipelineContext = seriesModel.pipelineContext;
+        var isLargeDraw = pipelineContext.large;
+
+        if (__DEV__) {
+            if (hasEffect && isLargeDraw) {
+                console.warn('Large lines not support effect');
+            }
+        }
+        if (!lineDraw
+            || hasEffect !== this._hasEffet
+            || isPolyline !== this._isPolyline
+            || isLargeDraw !== this._isLargeDraw
+        ) {
+            if (lineDraw) {
+                lineDraw.remove();
+            }
+            lineDraw = this._lineDraw = isLargeDraw
+                ? new LargeLineDraw()
+                : new LineDraw(
+                    isPolyline
+                        ? (hasEffect ? EffectPolyline : Polyline$2)
+                        : (hasEffect ? EffectLine : Line$1)
+                );
+            this._hasEffet = hasEffect;
+            this._isPolyline = isPolyline;
+            this._isLargeDraw = isLargeDraw;
+            this.group.removeAll();
+        }
+
+        this.group.add(lineDraw.group);
+
+        return lineDraw;
+    },
+
+    _showEffect: function (seriesModel) {
+        return !!seriesModel.get('effect.show');
+    },
+
+    _clearLayer: function (api) {
+        // Not use motion when dragging or zooming
+        var zr = api.getZr();
+        var isSvg = zr.painter.getType() === 'svg';
+        if (!isSvg && this._lastZlevel != null) {
+            zr.painter.getLayer(this._lastZlevel).clear(true);
+        }
+    },
+
+    remove: function (ecModel, api) {
+        this._lineDraw && this._lineDraw.remove();
+        this._lineDraw = null;
+        // Clear motion when lineDraw is removed
+        this._clearLayer(api);
+    },
+
+    dispose: function () {}
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+function normalize$2(a) {
+    if (!(a instanceof Array)) {
+        a = [a, a];
+    }
+    return a;
+}
+
+var opacityQuery = 'lineStyle.opacity'.split('.');
+
+var linesVisual = {
+    seriesType: 'lines',
+    reset: function (seriesModel, ecModel, api) {
+        var symbolType = normalize$2(seriesModel.get('symbol'));
+        var symbolSize = normalize$2(seriesModel.get('symbolSize'));
+        var data = seriesModel.getData();
+
+        data.setVisual('fromSymbol', symbolType && symbolType[0]);
+        data.setVisual('toSymbol', symbolType && symbolType[1]);
+        data.setVisual('fromSymbolSize', symbolSize && symbolSize[0]);
+        data.setVisual('toSymbolSize', symbolSize && symbolSize[1]);
+        data.setVisual('opacity', seriesModel.get(opacityQuery));
+
+        function dataEach(data, idx) {
+            var itemModel = data.getItemModel(idx);
+            var symbolType = normalize$2(itemModel.getShallow('symbol', true));
+            var symbolSize = normalize$2(itemModel.getShallow('symbolSize', true));
+            var opacity = itemModel.get(opacityQuery);
+
+            symbolType[0] && data.setItemVisual(idx, 'fromSymbol', symbolType[0]);
+            symbolType[1] && data.setItemVisual(idx, 'toSymbol', symbolType[1]);
+            symbolSize[0] && data.setItemVisual(idx, 'fromSymbolSize', symbolSize[0]);
+            symbolSize[1] && data.setItemVisual(idx, 'toSymbolSize', symbolSize[1]);
+
+            data.setItemVisual(idx, 'opacity', opacity);
+        }
+
+        return {dataEach: data.hasItemOption ? dataEach : null};
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+registerLayout(linesLayout);
+registerVisual(linesVisual);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+SeriesModel.extend({
+    type: 'series.heatmap',
+
+    getInitialData: function (option, ecModel) {
+        return createListFromArray(this.getSource(), this, {
+            generateCoord: 'value'
+        });
+    },
+
+    preventIncremental: function () {
+        var coordSysCreator = CoordinateSystemManager.get(this.get('coordinateSystem'));
+        if (coordSysCreator && coordSysCreator.dimensions) {
+            return coordSysCreator.dimensions[0] === 'lng' && coordSysCreator.dimensions[1] === 'lat';
+        }
+    },
+
+    defaultOption: {
+
+        // Cartesian2D or geo
+        coordinateSystem: 'cartesian2d',
+
+        zlevel: 0,
+
+        z: 2,
+
+        // Cartesian coordinate system
+        // xAxisIndex: 0,
+        // yAxisIndex: 0,
+
+        // Geo coordinate system
+        geoIndex: 0,
+
+        blurSize: 30,
+
+        pointSize: 20,
+
+        maxOpacity: 1,
+
+        minOpacity: 0
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @file defines echarts Heatmap Chart
+ * @author Ovilia (me@zhangwenli.com)
+ * Inspired by https://github.com/mourner/simpleheat
+ *
+ * @module
+ */
+
+var GRADIENT_LEVELS = 256;
+
+/**
+ * Heatmap Chart
+ *
+ * @class
+ */
+function Heatmap() {
+    var canvas = createCanvas();
+    this.canvas = canvas;
+
+    this.blurSize = 30;
+    this.pointSize = 20;
+
+    this.maxOpacity = 1;
+    this.minOpacity = 0;
+
+    this._gradientPixels = {};
+}
+
+Heatmap.prototype = {
+    /**
+     * Renders Heatmap and returns the rendered canvas
+     * @param {Array} data array of data, each has x, y, value
+     * @param {number} width canvas width
+     * @param {number} height canvas height
+     */
+    update: function(data, width, height, normalize, colorFunc, isInRange) {
+        var brush = this._getBrush();
+        var gradientInRange = this._getGradient(data, colorFunc, 'inRange');
+        var gradientOutOfRange = this._getGradient(data, colorFunc, 'outOfRange');
+        var r = this.pointSize + this.blurSize;
+
+        var canvas = this.canvas;
+        var ctx = canvas.getContext('2d');
+        var len = data.length;
+        canvas.width = width;
+        canvas.height = height;
+        for (var i = 0; i < len; ++i) {
+            var p = data[i];
+            var x = p[0];
+            var y = p[1];
+            var value = p[2];
+
+            // calculate alpha using value
+            var alpha = normalize(value);
+
+            // draw with the circle brush with alpha
+            ctx.globalAlpha = alpha;
+            ctx.drawImage(brush, x - r, y - r);
+        }
+
+        if (!canvas.width || !canvas.height) {
+            // Avoid "Uncaught DOMException: Failed to execute 'getImageData' on
+            // 'CanvasRenderingContext2D': The source height is 0."
+            return canvas;
+        }
+
+        // colorize the canvas using alpha value and set with gradient
+        var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+
+        var pixels = imageData.data;
+        var offset = 0;
+        var pixelLen = pixels.length;
+        var minOpacity = this.minOpacity;
+        var maxOpacity = this.maxOpacity;
+        var diffOpacity = maxOpacity - minOpacity;
+
+        while(offset < pixelLen) {
+            var alpha = pixels[offset + 3] / 256;
+            var gradientOffset = Math.floor(alpha * (GRADIENT_LEVELS - 1)) * 4;
+            // Simple optimize to ignore the empty data
+            if (alpha > 0) {
+                var gradient = isInRange(alpha) ? gradientInRange : gradientOutOfRange;
+                // Any alpha > 0 will be mapped to [minOpacity, maxOpacity]
+                alpha > 0 && (alpha = alpha * diffOpacity + minOpacity);
+                pixels[offset++] = gradient[gradientOffset];
+                pixels[offset++] = gradient[gradientOffset + 1];
+                pixels[offset++] = gradient[gradientOffset + 2];
+                pixels[offset++] = gradient[gradientOffset + 3] * alpha * 256;
+            }
+            else {
+                offset += 4;
+            }
+        }
+        ctx.putImageData(imageData, 0, 0);
+
+        return canvas;
+    },
+
+    /**
+     * get canvas of a black circle brush used for canvas to draw later
+     * @private
+     * @returns {Object} circle brush canvas
+     */
+    _getBrush: function() {
+        var brushCanvas = this._brushCanvas || (this._brushCanvas = createCanvas());
+        // set brush size
+        var r = this.pointSize + this.blurSize;
+        var d = r * 2;
+        brushCanvas.width = d;
+        brushCanvas.height = d;
+
+        var ctx = brushCanvas.getContext('2d');
+        ctx.clearRect(0, 0, d, d);
+
+        // in order to render shadow without the distinct circle,
+        // draw the distinct circle in an invisible place,
+        // and use shadowOffset to draw shadow in the center of the canvas
+        ctx.shadowOffsetX = d;
+        ctx.shadowBlur = this.blurSize;
+        // draw the shadow in black, and use alpha and shadow blur to generate
+        // color in color map
+        ctx.shadowColor = '#000';
+
+        // draw circle in the left to the canvas
+        ctx.beginPath();
+        ctx.arc(-r, r, this.pointSize, 0, Math.PI * 2, true);
+        ctx.closePath();
+        ctx.fill();
+        return brushCanvas;
+    },
+
+    /**
+     * get gradient color map
+     * @private
+     */
+    _getGradient: function (data, colorFunc, state) {
+        var gradientPixels = this._gradientPixels;
+        var pixelsSingleState = gradientPixels[state] || (gradientPixels[state] = new Uint8ClampedArray(256 * 4));
+        var color = [0, 0, 0, 0];
+        var off = 0;
+        for (var i = 0; i < 256; i++) {
+            colorFunc[state](i / 255, true, color);
+            pixelsSingleState[off++] = color[0];
+            pixelsSingleState[off++] = color[1];
+            pixelsSingleState[off++] = color[2];
+            pixelsSingleState[off++] = color[3];
+        }
+        return pixelsSingleState;
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+function getIsInPiecewiseRange(dataExtent, pieceList, selected) {
+    var dataSpan = dataExtent[1] - dataExtent[0];
+    pieceList = map(pieceList, function (piece) {
+        return {
+            interval: [
+                (piece.interval[0] - dataExtent[0]) / dataSpan,
+                (piece.interval[1] - dataExtent[0]) / dataSpan
+            ]
+        };
+    });
+    var len = pieceList.length;
+    var lastIndex = 0;
+
+    return function (val) {
+        // Try to find in the location of the last found
+        for (var i = lastIndex; i < len; i++) {
+            var interval = pieceList[i].interval;
+            if (interval[0] <= val && val <= interval[1]) {
+                lastIndex = i;
+                break;
+            }
+        }
+        if (i === len) { // Not found, back interation
+            for (var i = lastIndex - 1; i >= 0; i--) {
+                var interval = pieceList[i].interval;
+                if (interval[0] <= val && val <= interval[1]) {
+                    lastIndex = i;
+                    break;
+                }
+            }
+        }
+        return i >= 0 && i < len && selected[i];
+    };
+}
+
+function getIsInContinuousRange(dataExtent, range) {
+    var dataSpan = dataExtent[1] - dataExtent[0];
+    range = [
+        (range[0] - dataExtent[0]) / dataSpan,
+        (range[1] - dataExtent[0]) / dataSpan
+    ];
+    return function (val) {
+        return val >= range[0] && val <= range[1];
+    };
+}
+
+function isGeoCoordSys(coordSys) {
+    var dimensions = coordSys.dimensions;
+    // Not use coorSys.type === 'geo' because coordSys maybe extended
+    return dimensions[0] === 'lng' && dimensions[1] === 'lat';
+}
+
+extendChartView({
+
+    type: 'heatmap',
+
+    render: function (seriesModel, ecModel, api) {
+        var visualMapOfThisSeries;
+        ecModel.eachComponent('visualMap', function (visualMap) {
+            visualMap.eachTargetSeries(function (targetSeries) {
+                if (targetSeries === seriesModel) {
+                    visualMapOfThisSeries = visualMap;
+                }
+            });
+        });
+
+        if (__DEV__) {
+            if (!visualMapOfThisSeries) {
+                throw new Error('Heatmap must use with visualMap');
+            }
+        }
+
+        this.group.removeAll();
+
+        this._incrementalDisplayable = null;
+
+        var coordSys = seriesModel.coordinateSystem;
+        if (coordSys.type === 'cartesian2d' || coordSys.type === 'calendar') {
+            this._renderOnCartesianAndCalendar(seriesModel, api, 0, seriesModel.getData().count());
+        }
+        else if (isGeoCoordSys(coordSys)) {
+            this._renderOnGeo(
+                coordSys, seriesModel, visualMapOfThisSeries, api
+            );
+        }
+    },
+
+    incrementalPrepareRender: function (seriesModel, ecModel, api) {
+        this.group.removeAll();
+    },
+
+    incrementalRender: function (params, seriesModel, ecModel, api) {
+        var coordSys = seriesModel.coordinateSystem;
+        if (coordSys) {
+            this._renderOnCartesianAndCalendar(seriesModel, api, params.start, params.end, true);
+        }
+    },
+
+    _renderOnCartesianAndCalendar: function (seriesModel, api, start, end, incremental) {
+
+        var coordSys = seriesModel.coordinateSystem;
+        var width;
+        var height;
+
+        if (coordSys.type === 'cartesian2d') {
+            var xAxis = coordSys.getAxis('x');
+            var yAxis = coordSys.getAxis('y');
+
+            if (__DEV__) {
+                if (!(xAxis.type === 'category' && yAxis.type === 'category')) {
+                    throw new Error('Heatmap on cartesian must have two category axes');
+                }
+                if (!(xAxis.onBand && yAxis.onBand)) {
+                    throw new Error('Heatmap on cartesian must have two axes with boundaryGap true');
+                }
+            }
+
+            width = xAxis.getBandWidth();
+            height = yAxis.getBandWidth();
+        }
+
+        var group = this.group;
+        var data = seriesModel.getData();
+
+        var itemStyleQuery = 'itemStyle';
+        var hoverItemStyleQuery = 'emphasis.itemStyle';
+        var labelQuery = 'label';
+        var hoverLabelQuery = 'emphasis.label';
+        var style = seriesModel.getModel(itemStyleQuery).getItemStyle(['color']);
+        var hoverStl = seriesModel.getModel(hoverItemStyleQuery).getItemStyle();
+        var labelModel = seriesModel.getModel(labelQuery);
+        var hoverLabelModel = seriesModel.getModel(hoverLabelQuery);
+        var coordSysType = coordSys.type;
+
+
+        var dataDims = coordSysType === 'cartesian2d'
+            ? [
+                data.mapDimension('x'),
+                data.mapDimension('y'),
+                data.mapDimension('value')
+            ]
+            : [
+                data.mapDimension('time'),
+                data.mapDimension('value')
+            ];
+
+        for (var idx = start; idx < end; idx++) {
+            var rect;
+
+            if (coordSysType === 'cartesian2d') {
+                // Ignore empty data
+                if (isNaN(data.get(dataDims[2], idx))) {
+                    continue;
+                }
+
+                var point = coordSys.dataToPoint([
+                    data.get(dataDims[0], idx),
+                    data.get(dataDims[1], idx)
+                ]);
+
+                rect = new Rect({
+                    shape: {
+                        x: point[0] - width / 2,
+                        y: point[1] - height / 2,
+                        width: width,
+                        height: height
+                    },
+                    style: {
+                        fill: data.getItemVisual(idx, 'color'),
+                        opacity: data.getItemVisual(idx, 'opacity')
+                    }
+                });
+            }
+            else {
+                // Ignore empty data
+                if (isNaN(data.get(dataDims[1], idx))) {
+                    continue;
+                }
+
+                rect = new Rect({
+                    z2: 1,
+                    shape: coordSys.dataToRect([data.get(dataDims[0], idx)]).contentShape,
+                    style: {
+                        fill: data.getItemVisual(idx, 'color'),
+                        opacity: data.getItemVisual(idx, 'opacity')
+                    }
+                });
+            }
+
+            var itemModel = data.getItemModel(idx);
+
+            // Optimization for large datset
+            if (data.hasItemOption) {
+                style = itemModel.getModel(itemStyleQuery).getItemStyle(['color']);
+                hoverStl = itemModel.getModel(hoverItemStyleQuery).getItemStyle();
+                labelModel = itemModel.getModel(labelQuery);
+                hoverLabelModel = itemModel.getModel(hoverLabelQuery);
+            }
+
+            var rawValue = seriesModel.getRawValue(idx);
+            var defaultText = '-';
+            if (rawValue && rawValue[2] != null) {
+                defaultText = rawValue[2];
+            }
+
+            setLabelStyle(
+                style, hoverStl, labelModel, hoverLabelModel,
+                {
+                    labelFetcher: seriesModel,
+                    labelDataIndex: idx,
+                    defaultText: defaultText,
+                    isRectText: true
+                }
+            );
+
+            rect.setStyle(style);
+            setHoverStyle(rect, data.hasItemOption ? hoverStl : extend({}, hoverStl));
+
+            rect.incremental = incremental;
+            // PENDING
+            if (incremental) {
+                // Rect must use hover layer if it's incremental.
+                rect.useHoverLayer = true;
+            }
+
+            group.add(rect);
+            data.setItemGraphicEl(idx, rect);
+        }
+    },
+
+    _renderOnGeo: function (geo, seriesModel, visualMapModel, api) {
+        var inRangeVisuals = visualMapModel.targetVisuals.inRange;
+        var outOfRangeVisuals = visualMapModel.targetVisuals.outOfRange;
+        // if (!visualMapping) {
+        //     throw new Error('Data range must have color visuals');
+        // }
+
+        var data = seriesModel.getData();
+        var hmLayer = this._hmLayer || (this._hmLayer || new Heatmap());
+        hmLayer.blurSize = seriesModel.get('blurSize');
+        hmLayer.pointSize = seriesModel.get('pointSize');
+        hmLayer.minOpacity = seriesModel.get('minOpacity');
+        hmLayer.maxOpacity = seriesModel.get('maxOpacity');
+
+        var rect = geo.getViewRect().clone();
+        var roamTransform = geo.getRoamTransform();
+        rect.applyTransform(roamTransform);
+
+        // Clamp on viewport
+        var x = Math.max(rect.x, 0);
+        var y = Math.max(rect.y, 0);
+        var x2 = Math.min(rect.width + rect.x, api.getWidth());
+        var y2 = Math.min(rect.height + rect.y, api.getHeight());
+        var width = x2 - x;
+        var height = y2 - y;
+
+        var dims = [
+            data.mapDimension('lng'),
+            data.mapDimension('lat'),
+            data.mapDimension('value')
+        ];
+
+        var points = data.mapArray(dims, function (lng, lat, value) {
+            var pt = geo.dataToPoint([lng, lat]);
+            pt[0] -= x;
+            pt[1] -= y;
+            pt.push(value);
+            return pt;
+        });
+
+        var dataExtent = visualMapModel.getExtent();
+        var isInRange = visualMapModel.type === 'visualMap.continuous'
+            ? getIsInContinuousRange(dataExtent, visualMapModel.option.range)
+            : getIsInPiecewiseRange(
+                dataExtent, visualMapModel.getPieceList(), visualMapModel.option.selected
+            );
+
+        hmLayer.update(
+            points, width, height,
+            inRangeVisuals.color.getNormalizer(),
+            {
+                inRange: inRangeVisuals.color.getColorMapper(),
+                outOfRange: outOfRangeVisuals.color.getColorMapper()
+            },
+            isInRange
+        );
+        var img = new ZImage({
+            style: {
+                width: width,
+                height: height,
+                x: x,
+                y: y,
+                image: hmLayer.canvas
+            },
+            silent: true
+        });
+        this.group.add(img);
+    },
+
+    dispose: function () {}
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var PictorialBarSeries = BaseBarSeries.extend({
+
+    type: 'series.pictorialBar',
+
+    dependencies: ['grid'],
+
+    defaultOption: {
+        symbol: 'circle',     // Customized bar shape
+        symbolSize: null,     // Can be ['100%', '100%'], null means auto.
+        symbolRotate: null,
+
+        symbolPosition: null, // 'start' or 'end' or 'center', null means auto.
+        symbolOffset: null,
+        symbolMargin: null,   // start margin and end margin. Can be a number or a percent string.
+                                // Auto margin by defualt.
+        symbolRepeat: false,  // false/null/undefined, means no repeat.
+                                // Can be true, means auto calculate repeat times and cut by data.
+                                // Can be a number, specifies repeat times, and do not cut by data.
+                                // Can be 'fixed', means auto calculate repeat times but do not cut by data.
+        symbolRepeatDirection: 'end', // 'end' means from 'start' to 'end'.
+
+        symbolClip: false,
+        symbolBoundingData: null, // Can be 60 or -40 or [-40, 60]
+        symbolPatternSize: 400, // 400 * 400 px
+
+        barGap: '-100%',      // In most case, overlap is needed.
+
+        // z can be set in data item, which is z2 actually.
+
+        // Disable progressive
+        progressive: 0,
+        hoverAnimation: false // Open only when needed.
+    },
+
+    getInitialData: function (option) {
+        // Disable stack.
+        option.stack = null;
+        return PictorialBarSeries.superApply(this, 'getInitialData', arguments);
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var BAR_BORDER_WIDTH_QUERY$1 = ['itemStyle', 'borderWidth'];
+
+// index: +isHorizontal
+var LAYOUT_ATTRS = [
+    {xy: 'x', wh: 'width', index: 0, posDesc: ['left', 'right']},
+    {xy: 'y', wh: 'height', index: 1, posDesc: ['top', 'bottom']}
+];
+
+var pathForLineWidth = new Circle();
+
+var BarView$1 = extendChartView({
+
+    type: 'pictorialBar',
+
+    render: function (seriesModel, ecModel, api) {
+        var group = this.group;
+        var data = seriesModel.getData();
+        var oldData = this._data;
+
+        var cartesian = seriesModel.coordinateSystem;
+        var baseAxis = cartesian.getBaseAxis();
+        var isHorizontal = !!baseAxis.isHorizontal();
+        var coordSysRect = cartesian.grid.getRect();
+
+        var opt = {
+            ecSize: {width: api.getWidth(), height: api.getHeight()},
+            seriesModel: seriesModel,
+            coordSys: cartesian,
+            coordSysExtent: [
+                [coordSysRect.x, coordSysRect.x + coordSysRect.width],
+                [coordSysRect.y, coordSysRect.y + coordSysRect.height]
+            ],
+            isHorizontal: isHorizontal,
+            valueDim: LAYOUT_ATTRS[+isHorizontal],
+            categoryDim: LAYOUT_ATTRS[1 - isHorizontal]
+        };
+
+        data.diff(oldData)
+            .add(function (dataIndex) {
+                if (!data.hasValue(dataIndex)) {
+                    return;
+                }
+
+                var itemModel = getItemModel(data, dataIndex);
+                var symbolMeta = getSymbolMeta(data, dataIndex, itemModel, opt);
+
+                var bar = createBar(data, opt, symbolMeta);
+
+                data.setItemGraphicEl(dataIndex, bar);
+                group.add(bar);
+
+                updateCommon$1(bar, opt, symbolMeta);
+            })
+            .update(function (newIndex, oldIndex) {
+                var bar = oldData.getItemGraphicEl(oldIndex);
+
+                if (!data.hasValue(newIndex)) {
+                    group.remove(bar);
+                    return;
+                }
+
+                var itemModel = getItemModel(data, newIndex);
+                var symbolMeta = getSymbolMeta(data, newIndex, itemModel, opt);
+
+                var pictorialShapeStr = getShapeStr(data, symbolMeta);
+                if (bar && pictorialShapeStr !== bar.__pictorialShapeStr) {
+                    group.remove(bar);
+                    data.setItemGraphicEl(newIndex, null);
+                    bar = null;
+                }
+
+                if (bar) {
+                    updateBar(bar, opt, symbolMeta);
+                }
+                else {
+                    bar = createBar(data, opt, symbolMeta, true);
+                }
+
+                data.setItemGraphicEl(newIndex, bar);
+                bar.__pictorialSymbolMeta = symbolMeta;
+                // Add back
+                group.add(bar);
+
+                updateCommon$1(bar, opt, symbolMeta);
+            })
+            .remove(function (dataIndex) {
+                var bar = oldData.getItemGraphicEl(dataIndex);
+                bar && removeBar(oldData, dataIndex, bar.__pictorialSymbolMeta.animationModel, bar);
+            })
+            .execute();
+
+        this._data = data;
+
+        return this.group;
+    },
+
+    dispose: noop,
+
+    remove: function (ecModel, api) {
+        var group = this.group;
+        var data = this._data;
+        if (ecModel.get('animation')) {
+            if (data) {
+                data.eachItemGraphicEl(function (bar) {
+                    removeBar(data, bar.dataIndex, ecModel, bar);
+                });
+            }
+        }
+        else {
+            group.removeAll();
+        }
+    }
+});
+
+
+// Set or calculate default value about symbol, and calculate layout info.
+function getSymbolMeta(data, dataIndex, itemModel, opt) {
+    var layout = data.getItemLayout(dataIndex);
+    var symbolRepeat = itemModel.get('symbolRepeat');
+    var symbolClip = itemModel.get('symbolClip');
+    var symbolPosition = itemModel.get('symbolPosition') || 'start';
+    var symbolRotate = itemModel.get('symbolRotate');
+    var rotation = (symbolRotate || 0) * Math.PI / 180 || 0;
+    var symbolPatternSize = itemModel.get('symbolPatternSize') || 2;
+    var isAnimationEnabled = itemModel.isAnimationEnabled();
+
+    var symbolMeta = {
+        dataIndex: dataIndex,
+        layout: layout,
+        itemModel: itemModel,
+        symbolType: data.getItemVisual(dataIndex, 'symbol') || 'circle',
+        color: data.getItemVisual(dataIndex, 'color'),
+        symbolClip: symbolClip,
+        symbolRepeat: symbolRepeat,
+        symbolRepeatDirection: itemModel.get('symbolRepeatDirection'),
+        symbolPatternSize: symbolPatternSize,
+        rotation: rotation,
+        animationModel: isAnimationEnabled ? itemModel : null,
+        hoverAnimation: isAnimationEnabled && itemModel.get('hoverAnimation'),
+        z2: itemModel.getShallow('z', true) || 0
+    };
+
+    prepareBarLength(itemModel, symbolRepeat, layout, opt, symbolMeta);
+
+    prepareSymbolSize(
+        data, dataIndex, layout, symbolRepeat, symbolClip, symbolMeta.boundingLength,
+        symbolMeta.pxSign, symbolPatternSize, opt, symbolMeta
+    );
+
+    prepareLineWidth(itemModel, symbolMeta.symbolScale, rotation, opt, symbolMeta);
+
+    var symbolSize = symbolMeta.symbolSize;
+    var symbolOffset = itemModel.get('symbolOffset');
+    if (isArray(symbolOffset)) {
+        symbolOffset = [
+            parsePercent$1(symbolOffset[0], symbolSize[0]),
+            parsePercent$1(symbolOffset[1], symbolSize[1])
+        ];
+    }
+
+    prepareLayoutInfo(
+        itemModel, symbolSize, layout, symbolRepeat, symbolClip, symbolOffset,
+        symbolPosition, symbolMeta.valueLineWidth, symbolMeta.boundingLength, symbolMeta.repeatCutLength,
+        opt, symbolMeta
+    );
+
+    return symbolMeta;
+}
+
+// bar length can be negative.
+function prepareBarLength(itemModel, symbolRepeat, layout, opt, output) {
+    var valueDim = opt.valueDim;
+    var symbolBoundingData = itemModel.get('symbolBoundingData');
+    var valueAxis = opt.coordSys.getOtherAxis(opt.coordSys.getBaseAxis());
+    var zeroPx = valueAxis.toGlobalCoord(valueAxis.dataToCoord(0));
+    var pxSignIdx = 1 - +(layout[valueDim.wh] <= 0);
+    var boundingLength;
+
+    if (isArray(symbolBoundingData)) {
+        var symbolBoundingExtent = [
+            convertToCoordOnAxis(valueAxis, symbolBoundingData[0]) - zeroPx,
+            convertToCoordOnAxis(valueAxis, symbolBoundingData[1]) - zeroPx
+        ];
+        symbolBoundingExtent[1] < symbolBoundingExtent[0] && (symbolBoundingExtent.reverse());
+        boundingLength = symbolBoundingExtent[pxSignIdx];
+    }
+    else if (symbolBoundingData != null) {
+        boundingLength = convertToCoordOnAxis(valueAxis, symbolBoundingData) - zeroPx;
+    }
+    else if (symbolRepeat) {
+        boundingLength = opt.coordSysExtent[valueDim.index][pxSignIdx] - zeroPx;
+    }
+    else {
+        boundingLength = layout[valueDim.wh];
+    }
+
+    output.boundingLength = boundingLength;
+
+    if (symbolRepeat) {
+        output.repeatCutLength = layout[valueDim.wh];
+    }
+
+    output.pxSign = boundingLength > 0 ? 1 : boundingLength < 0 ? -1 : 0;
+}
+
+function convertToCoordOnAxis(axis, value) {
+    return axis.toGlobalCoord(axis.dataToCoord(axis.scale.parse(value)));
+}
+
+// Support ['100%', '100%']
+function prepareSymbolSize(
+    data, dataIndex, layout, symbolRepeat, symbolClip, boundingLength,
+    pxSign, symbolPatternSize, opt, output
+) {
+    var valueDim = opt.valueDim;
+    var categoryDim = opt.categoryDim;
+    var categorySize = Math.abs(layout[categoryDim.wh]);
+
+    var symbolSize = data.getItemVisual(dataIndex, 'symbolSize');
+    if (isArray(symbolSize)) {
+        symbolSize = symbolSize.slice();
+    }
+    else {
+        if (symbolSize == null) {
+            symbolSize = '100%';
+        }
+        symbolSize = [symbolSize, symbolSize];
+    }
+
+    // Note: percentage symbolSize (like '100%') do not consider lineWidth, because it is
+    // to complicated to calculate real percent value if considering scaled lineWidth.
+    // So the actual size will bigger than layout size if lineWidth is bigger than zero,
+    // which can be tolerated in pictorial chart.
+
+    symbolSize[categoryDim.index] = parsePercent$1(
+        symbolSize[categoryDim.index],
+        categorySize
+    );
+    symbolSize[valueDim.index] = parsePercent$1(
+        symbolSize[valueDim.index],
+        symbolRepeat ? categorySize : Math.abs(boundingLength)
+    );
+
+    output.symbolSize = symbolSize;
+
+    // If x or y is less than zero, show reversed shape.
+    var symbolScale = output.symbolScale = [
+        symbolSize[0] / symbolPatternSize,
+        symbolSize[1] / symbolPatternSize
+    ];
+    // Follow convention, 'right' and 'top' is the normal scale.
+    symbolScale[valueDim.index] *= (opt.isHorizontal ? -1 : 1) * pxSign;
+}
+
+function prepareLineWidth(itemModel, symbolScale, rotation, opt, output) {
+    // In symbols are drawn with scale, so do not need to care about the case that width
+    // or height are too small. But symbol use strokeNoScale, where acture lineWidth should
+    // be calculated.
+    var valueLineWidth = itemModel.get(BAR_BORDER_WIDTH_QUERY$1) || 0;
+
+    if (valueLineWidth) {
+        pathForLineWidth.attr({
+            scale: symbolScale.slice(),
+            rotation: rotation
+        });
+        pathForLineWidth.updateTransform();
+        valueLineWidth /= pathForLineWidth.getLineScale();
+        valueLineWidth *= symbolScale[opt.valueDim.index];
+    }
+
+    output.valueLineWidth = valueLineWidth;
+}
+
+function prepareLayoutInfo(
+    itemModel, symbolSize, layout, symbolRepeat, symbolClip, symbolOffset,
+    symbolPosition, valueLineWidth, boundingLength, repeatCutLength, opt, output
+) {
+    var categoryDim = opt.categoryDim;
+    var valueDim = opt.valueDim;
+    var pxSign = output.pxSign;
+
+    var unitLength = Math.max(symbolSize[valueDim.index] + valueLineWidth, 0);
+    var pathLen = unitLength;
+
+    // Note: rotation will not effect the layout of symbols, because user may
+    // want symbols to rotate on its center, which should not be translated
+    // when rotating.
+
+    if (symbolRepeat) {
+        var absBoundingLength = Math.abs(boundingLength);
+
+        var symbolMargin = retrieve(itemModel.get('symbolMargin'), '15%') + '';
+        var hasEndGap = false;
+        if (symbolMargin.lastIndexOf('!') === symbolMargin.length - 1) {
+            hasEndGap = true;
+            symbolMargin = symbolMargin.slice(0, symbolMargin.length - 1);
+        }
+        symbolMargin = parsePercent$1(symbolMargin, symbolSize[valueDim.index]);
+
+        var uLenWithMargin = Math.max(unitLength + symbolMargin * 2, 0);
+
+        // When symbol margin is less than 0, margin at both ends will be subtracted
+        // to ensure that all of the symbols will not be overflow the given area.
+        var endFix = hasEndGap ? 0 : symbolMargin * 2;
+
+        // Both final repeatTimes and final symbolMargin area calculated based on
+        // boundingLength.
+        var repeatSpecified = isNumeric(symbolRepeat);
+        var repeatTimes = repeatSpecified
+            ? symbolRepeat
+            : toIntTimes((absBoundingLength + endFix) / uLenWithMargin);
+
+        // Adjust calculate margin, to ensure each symbol is displayed
+        // entirely in the given layout area.
+        var mDiff = absBoundingLength - repeatTimes * unitLength;
+        symbolMargin = mDiff / 2 / (hasEndGap ? repeatTimes : repeatTimes - 1);
+        uLenWithMargin = unitLength + symbolMargin * 2;
+        endFix = hasEndGap ? 0 : symbolMargin * 2;
+
+        // Update repeatTimes when not all symbol will be shown.
+        if (!repeatSpecified && symbolRepeat !== 'fixed') {
+            repeatTimes = repeatCutLength
+                ? toIntTimes((Math.abs(repeatCutLength) + endFix) / uLenWithMargin)
+                : 0;
+        }
+
+        pathLen = repeatTimes * uLenWithMargin - endFix;
+        output.repeatTimes = repeatTimes;
+        output.symbolMargin = symbolMargin;
+    }
+
+    var sizeFix = pxSign * (pathLen / 2);
+    var pathPosition = output.pathPosition = [];
+    pathPosition[categoryDim.index] = layout[categoryDim.wh] / 2;
+    pathPosition[valueDim.index] = symbolPosition === 'start'
+        ? sizeFix
+        : symbolPosition === 'end'
+        ? boundingLength - sizeFix
+        : boundingLength / 2; // 'center'
+    if (symbolOffset) {
+        pathPosition[0] += symbolOffset[0];
+        pathPosition[1] += symbolOffset[1];
+    }
+
+    var bundlePosition = output.bundlePosition = [];
+    bundlePosition[categoryDim.index] = layout[categoryDim.xy];
+    bundlePosition[valueDim.index] = layout[valueDim.xy];
+
+    var barRectShape = output.barRectShape = extend({}, layout);
+    barRectShape[valueDim.wh] = pxSign * Math.max(
+        Math.abs(layout[valueDim.wh]), Math.abs(pathPosition[valueDim.index] + sizeFix)
+    );
+    barRectShape[categoryDim.wh] = layout[categoryDim.wh];
+
+    var clipShape = output.clipShape = {};
+    // Consider that symbol may be overflow layout rect.
+    clipShape[categoryDim.xy] = -layout[categoryDim.xy];
+    clipShape[categoryDim.wh] = opt.ecSize[categoryDim.wh];
+    clipShape[valueDim.xy] = 0;
+    clipShape[valueDim.wh] = layout[valueDim.wh];
+}
+
+function createPath(symbolMeta) {
+    var symbolPatternSize = symbolMeta.symbolPatternSize;
+    var path = createSymbol(
+        // Consider texture img, make a big size.
+        symbolMeta.symbolType,
+        -symbolPatternSize / 2,
+        -symbolPatternSize / 2,
+        symbolPatternSize,
+        symbolPatternSize,
+        symbolMeta.color
+    );
+    path.attr({
+        culling: true
+    });
+    path.type !== 'image' && path.setStyle({
+        strokeNoScale: true
+    });
+
+    return path;
+}
+
+function createOrUpdateRepeatSymbols(bar, opt, symbolMeta, isUpdate) {
+    var bundle = bar.__pictorialBundle;
+    var symbolSize = symbolMeta.symbolSize;
+    var valueLineWidth = symbolMeta.valueLineWidth;
+    var pathPosition = symbolMeta.pathPosition;
+    var valueDim = opt.valueDim;
+    var repeatTimes = symbolMeta.repeatTimes || 0;
+
+    var index = 0;
+    var unit = symbolSize[opt.valueDim.index] + valueLineWidth + symbolMeta.symbolMargin * 2;
+
+    eachPath(bar, function (path) {
+        path.__pictorialAnimationIndex = index;
+        path.__pictorialRepeatTimes = repeatTimes;
+        if (index < repeatTimes) {
+            updateAttr(path, null, makeTarget(index), symbolMeta, isUpdate);
+        }
+        else {
+            updateAttr(path, null, {scale: [0, 0]}, symbolMeta, isUpdate, function () {
+                bundle.remove(path);
+            });
+        }
+
+        updateHoverAnimation(path, symbolMeta);
+
+        index++;
+    });
+
+    for (; index < repeatTimes; index++) {
+        var path = createPath(symbolMeta);
+        path.__pictorialAnimationIndex = index;
+        path.__pictorialRepeatTimes = repeatTimes;
+        bundle.add(path);
+
+        var target = makeTarget(index);
+
+        updateAttr(
+            path,
+            {
+                position: target.position,
+                scale: [0, 0]
+            },
+            {
+                scale: target.scale,
+                rotation: target.rotation
+            },
+            symbolMeta,
+            isUpdate
+        );
+
+        // FIXME
+        // If all emphasis/normal through action.
+        path
+            .on('mouseover', onMouseOver)
+            .on('mouseout', onMouseOut);
+
+        updateHoverAnimation(path, symbolMeta);
+    }
+
+    function makeTarget(index) {
+        var position = pathPosition.slice();
+        // (start && pxSign > 0) || (end && pxSign < 0): i = repeatTimes - index
+        // Otherwise: i = index;
+        var pxSign = symbolMeta.pxSign;
+        var i = index;
+        if (symbolMeta.symbolRepeatDirection === 'start' ? pxSign > 0 : pxSign < 0) {
+            i = repeatTimes - 1 - index;
+        }
+        position[valueDim.index] = unit * (i - repeatTimes / 2 + 0.5) + pathPosition[valueDim.index];
+
+        return {
+            position: position,
+            scale: symbolMeta.symbolScale.slice(),
+            rotation: symbolMeta.rotation
+        };
+    }
+
+    function onMouseOver() {
+        eachPath(bar, function (path) {
+            path.trigger('emphasis');
+        });
+    }
+
+    function onMouseOut() {
+        eachPath(bar, function (path) {
+            path.trigger('normal');
+        });
+    }
+}
+
+function createOrUpdateSingleSymbol(bar, opt, symbolMeta, isUpdate) {
+    var bundle = bar.__pictorialBundle;
+    var mainPath = bar.__pictorialMainPath;
+
+    if (!mainPath) {
+        mainPath = bar.__pictorialMainPath = createPath(symbolMeta);
+        bundle.add(mainPath);
+
+        updateAttr(
+            mainPath,
+            {
+                position: symbolMeta.pathPosition.slice(),
+                scale: [0, 0],
+                rotation: symbolMeta.rotation
+            },
+            {
+                scale: symbolMeta.symbolScale.slice()
+            },
+            symbolMeta,
+            isUpdate
+        );
+
+        mainPath
+            .on('mouseover', onMouseOver)
+            .on('mouseout', onMouseOut);
+    }
+    else {
+        updateAttr(
+            mainPath,
+            null,
+            {
+                position: symbolMeta.pathPosition.slice(),
+                scale: symbolMeta.symbolScale.slice(),
+                rotation: symbolMeta.rotation
+            },
+            symbolMeta,
+            isUpdate
+        );
+    }
+
+    updateHoverAnimation(mainPath, symbolMeta);
+
+    function onMouseOver() {
+        this.trigger('emphasis');
+    }
+
+    function onMouseOut() {
+        this.trigger('normal');
+    }
+}
+
+// bar rect is used for label.
+function createOrUpdateBarRect(bar, symbolMeta, isUpdate) {
+    var rectShape = extend({}, symbolMeta.barRectShape);
+
+    var barRect = bar.__pictorialBarRect;
+    if (!barRect) {
+        barRect = bar.__pictorialBarRect = new Rect({
+            z2: 2,
+            shape: rectShape,
+            silent: true,
+            style: {
+                stroke: 'transparent',
+                fill: 'transparent',
+                lineWidth: 0
+            }
+        });
+
+        bar.add(barRect);
+    }
+    else {
+        updateAttr(barRect, null, {shape: rectShape}, symbolMeta, isUpdate);
+    }
+}
+
+function createOrUpdateClip(bar, opt, symbolMeta, isUpdate) {
+    // If not clip, symbol will be remove and rebuilt.
+    if (symbolMeta.symbolClip) {
+        var clipPath = bar.__pictorialClipPath;
+        var clipShape = extend({}, symbolMeta.clipShape);
+        var valueDim = opt.valueDim;
+        var animationModel = symbolMeta.animationModel;
+        var dataIndex = symbolMeta.dataIndex;
+
+        if (clipPath) {
+            updateProps(
+                clipPath, {shape: clipShape}, animationModel, dataIndex
+            );
+        }
+        else {
+            clipShape[valueDim.wh] = 0;
+            clipPath = new Rect({shape: clipShape});
+            bar.__pictorialBundle.setClipPath(clipPath);
+            bar.__pictorialClipPath = clipPath;
+
+            var target = {};
+            target[valueDim.wh] = symbolMeta.clipShape[valueDim.wh];
+
+            graphic[isUpdate ? 'updateProps' : 'initProps'](
+                clipPath, {shape: target}, animationModel, dataIndex
+            );
+        }
+    }
+}
+
+function getItemModel(data, dataIndex) {
+    var itemModel = data.getItemModel(dataIndex);
+    itemModel.getAnimationDelayParams = getAnimationDelayParams;
+    itemModel.isAnimationEnabled = isAnimationEnabled;
+    return itemModel;
+}
+
+function getAnimationDelayParams(path) {
+    // The order is the same as the z-order, see `symbolRepeatDiretion`.
+    return {
+        index: path.__pictorialAnimationIndex,
+        count: path.__pictorialRepeatTimes
+    };
+}
+
+function isAnimationEnabled() {
+    // `animation` prop can be set on itemModel in pictorial bar chart.
+    return this.parentModel.isAnimationEnabled() && !!this.getShallow('animation');
+}
+
+function updateHoverAnimation(path, symbolMeta) {
+    path.off('emphasis').off('normal');
+
+    var scale = symbolMeta.symbolScale.slice();
+
+    symbolMeta.hoverAnimation && path
+        .on('emphasis', function() {
+            this.animateTo({
+                scale: [scale[0] * 1.1, scale[1] * 1.1]
+            }, 400, 'elasticOut');
+        })
+        .on('normal', function() {
+            this.animateTo({
+                scale: scale.slice()
+            }, 400, 'elasticOut');
+        });
+}
+
+function createBar(data, opt, symbolMeta, isUpdate) {
+    // bar is the main element for each data.
+    var bar = new Group();
+    // bundle is used for location and clip.
+    var bundle = new Group();
+    bar.add(bundle);
+    bar.__pictorialBundle = bundle;
+    bundle.attr('position', symbolMeta.bundlePosition.slice());
+
+    if (symbolMeta.symbolRepeat) {
+        createOrUpdateRepeatSymbols(bar, opt, symbolMeta);
+    }
+    else {
+        createOrUpdateSingleSymbol(bar, opt, symbolMeta);
+    }
+
+    createOrUpdateBarRect(bar, symbolMeta, isUpdate);
+
+    createOrUpdateClip(bar, opt, symbolMeta, isUpdate);
+
+    bar.__pictorialShapeStr = getShapeStr(data, symbolMeta);
+    bar.__pictorialSymbolMeta = symbolMeta;
+
+    return bar;
+}
+
+function updateBar(bar, opt, symbolMeta) {
+    var animationModel = symbolMeta.animationModel;
+    var dataIndex = symbolMeta.dataIndex;
+    var bundle = bar.__pictorialBundle;
+
+    updateProps(
+        bundle, {position: symbolMeta.bundlePosition.slice()}, animationModel, dataIndex
+    );
+
+    if (symbolMeta.symbolRepeat) {
+        createOrUpdateRepeatSymbols(bar, opt, symbolMeta, true);
+    }
+    else {
+        createOrUpdateSingleSymbol(bar, opt, symbolMeta, true);
+    }
+
+    createOrUpdateBarRect(bar, symbolMeta, true);
+
+    createOrUpdateClip(bar, opt, symbolMeta, true);
+}
+
+function removeBar(data, dataIndex, animationModel, bar) {
+    // Not show text when animating
+    var labelRect = bar.__pictorialBarRect;
+    labelRect && (labelRect.style.text = null);
+
+    var pathes = [];
+    eachPath(bar, function (path) {
+        pathes.push(path);
+    });
+    bar.__pictorialMainPath && pathes.push(bar.__pictorialMainPath);
+
+    // I do not find proper remove animation for clip yet.
+    bar.__pictorialClipPath && (animationModel = null);
+
+    each$1(pathes, function (path) {
+        updateProps(
+            path, {scale: [0, 0]}, animationModel, dataIndex,
+            function () {
+                bar.parent && bar.parent.remove(bar);
+            }
+        );
+    });
+
+    data.setItemGraphicEl(dataIndex, null);
+}
+
+function getShapeStr(data, symbolMeta) {
+    return [
+        data.getItemVisual(symbolMeta.dataIndex, 'symbol') || 'none',
+        !!symbolMeta.symbolRepeat,
+        !!symbolMeta.symbolClip
+    ].join(':');
+}
+
+function eachPath(bar, cb, context) {
+    // Do not use Group#eachChild, because it do not support remove.
+    each$1(bar.__pictorialBundle.children(), function (el) {
+        el !== bar.__pictorialBarRect && cb.call(context, el);
+    });
+}
+
+function updateAttr(el, immediateAttrs, animationAttrs, symbolMeta, isUpdate, cb) {
+    immediateAttrs && el.attr(immediateAttrs);
+    // when symbolCip used, only clip path has init animation, otherwise it would be weird effect.
+    if (symbolMeta.symbolClip && !isUpdate) {
+        animationAttrs && el.attr(animationAttrs);
+    }
+    else {
+        animationAttrs && graphic[isUpdate ? 'updateProps' : 'initProps'](
+            el, animationAttrs, symbolMeta.animationModel, symbolMeta.dataIndex, cb
+        );
+    }
+}
+
+function updateCommon$1(bar, opt, symbolMeta) {
+    var color = symbolMeta.color;
+    var dataIndex = symbolMeta.dataIndex;
+    var itemModel = symbolMeta.itemModel;
+    // Color must be excluded.
+    // Because symbol provide setColor individually to set fill and stroke
+    var normalStyle = itemModel.getModel('itemStyle').getItemStyle(['color']);
+    var hoverStyle = itemModel.getModel('emphasis.itemStyle').getItemStyle();
+    var cursorStyle = itemModel.getShallow('cursor');
+
+    eachPath(bar, function (path) {
+        // PENDING setColor should be before setStyle!!!
+        path.setColor(color);
+        path.setStyle(defaults(
+            {
+                fill: color,
+                opacity: symbolMeta.opacity
+            },
+            normalStyle
+        ));
+        setHoverStyle(path, hoverStyle);
+
+        cursorStyle && (path.cursor = cursorStyle);
+        path.z2 = symbolMeta.z2;
+    });
+
+    var barRectHoverStyle = {};
+    var barPositionOutside = opt.valueDim.posDesc[+(symbolMeta.boundingLength > 0)];
+    var barRect = bar.__pictorialBarRect;
+
+    setLabel(
+        barRect.style, barRectHoverStyle, itemModel,
+        color, opt.seriesModel, dataIndex, barPositionOutside
+    );
+
+    setHoverStyle(barRect, barRectHoverStyle);
+}
+
+function toIntTimes(times) {
+    var roundedTimes = Math.round(times);
+    // Escapse accurate error
+    return Math.abs(times - roundedTimes) < 1e-4
+        ? roundedTimes
+        : Math.ceil(times);
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// In case developer forget to include grid component
+registerLayout(curry(
+    layout, 'pictorialBar'
+));
+registerVisual(visualSymbol('pictorialBar', 'roundRect'));
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @constructor  module:echarts/coord/single/SingleAxis
+ * @extends {module:echarts/coord/Axis}
+ * @param {string} dim
+ * @param {*} scale
+ * @param {Array.<number>} coordExtent
+ * @param {string} axisType
+ * @param {string} position
+ */
+var SingleAxis = function (dim, scale, coordExtent, axisType, position) {
+
+    Axis.call(this, dim, scale, coordExtent);
+
+    /**
+     * Axis type
+     * - 'category'
+     * - 'value'
+     * - 'time'
+     * - 'log'
+     * @type {string}
+     */
+    this.type = axisType || 'value';
+
+    /**
+     * Axis position
+     *  - 'top'
+     *  - 'bottom'
+     *  - 'left'
+     *  - 'right'
+     *  @type {string}
+     */
+    this.position = position || 'bottom';
+
+    /**
+     * Axis orient
+     *  - 'horizontal'
+     *  - 'vertical'
+     * @type {[type]}
+     */
+    this.orient = null;
+
+};
+
+SingleAxis.prototype = {
+
+    constructor: SingleAxis,
+
+    /**
+     * Axis model
+     * @type {module:echarts/coord/single/AxisModel}
+     */
+    model: null,
+
+    /**
+     * Judge the orient of the axis.
+     * @return {boolean}
+     */
+    isHorizontal: function () {
+        var position = this.position;
+        return position === 'top' || position === 'bottom';
+
+    },
+
+    /**
+     * @override
+     */
+    pointToData: function (point, clamp) {
+        return this.coordinateSystem.pointToData(point, clamp)[0];
+    },
+
+    /**
+     * Convert the local coord(processed by dataToCoord())
+     * to global coord(concrete pixel coord).
+     * designated by module:echarts/coord/single/Single.
+     * @type {Function}
+     */
+    toGlobalCoord: null,
+
+    /**
+     * Convert the global coord to local coord.
+     * designated by module:echarts/coord/single/Single.
+     * @type {Function}
+     */
+    toLocalCoord: null
+
+};
+
+inherits(SingleAxis, Axis);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Single coordinates system.
+ */
+
+/**
+ * Create a single coordinates system.
+ *
+ * @param {module:echarts/coord/single/AxisModel} axisModel
+ * @param {module:echarts/model/Global} ecModel
+ * @param {module:echarts/ExtensionAPI} api
+ */
+function Single(axisModel, ecModel, api) {
+
+    /**
+     * @type {string}
+     * @readOnly
+     */
+    this.dimension = 'single';
+
+    /**
+     * Add it just for draw tooltip.
+     *
+     * @type {Array.<string>}
+     * @readOnly
+     */
+    this.dimensions = ['single'];
+
+    /**
+     * @private
+     * @type {module:echarts/coord/single/SingleAxis}.
+     */
+    this._axis = null;
+
+    /**
+     * @private
+     * @type {module:zrender/core/BoundingRect}
+     */
+    this._rect;
+
+    this._init(axisModel, ecModel, api);
+
+    /**
+     * @type {module:echarts/coord/single/AxisModel}
+     */
+    this.model = axisModel;
+}
+
+Single.prototype = {
+
+    type: 'singleAxis',
+
+    axisPointerEnabled: true,
+
+    constructor: Single,
+
+    /**
+     * Initialize single coordinate system.
+     *
+     * @param  {module:echarts/coord/single/AxisModel} axisModel
+     * @param  {module:echarts/model/Global} ecModel
+     * @param  {module:echarts/ExtensionAPI} api
+     * @private
+     */
+    _init: function (axisModel, ecModel, api) {
+
+        var dim = this.dimension;
+
+        var axis = new SingleAxis(
+            dim,
+            createScaleByModel(axisModel),
+            [0, 0],
+            axisModel.get('type'),
+            axisModel.get('position')
+        );
+
+        var isCategory = axis.type === 'category';
+        axis.onBand = isCategory && axisModel.get('boundaryGap');
+        axis.inverse = axisModel.get('inverse');
+        axis.orient = axisModel.get('orient');
+
+        axisModel.axis = axis;
+        axis.model = axisModel;
+        axis.coordinateSystem = this;
+        this._axis = axis;
+    },
+
+    /**
+     * Update axis scale after data processed
+     * @param  {module:echarts/model/Global} ecModel
+     * @param  {module:echarts/ExtensionAPI} api
+     */
+    update: function (ecModel, api) {
+        ecModel.eachSeries(function (seriesModel) {
+            if (seriesModel.coordinateSystem === this) {
+                var data = seriesModel.getData();
+                each$1(data.mapDimension(this.dimension, true), function (dim) {
+                    this._axis.scale.unionExtentFromData(data, dim);
+                }, this);
+                niceScaleExtent(this._axis.scale, this._axis.model);
+            }
+        }, this);
+    },
+
+    /**
+     * Resize the single coordinate system.
+     *
+     * @param  {module:echarts/coord/single/AxisModel} axisModel
+     * @param  {module:echarts/ExtensionAPI} api
+     */
+    resize: function (axisModel, api) {
+        this._rect = getLayoutRect(
+            {
+                left: axisModel.get('left'),
+                top: axisModel.get('top'),
+                right: axisModel.get('right'),
+                bottom: axisModel.get('bottom'),
+                width: axisModel.get('width'),
+                height: axisModel.get('height')
+            },
+            {
+                width: api.getWidth(),
+                height: api.getHeight()
+            }
+        );
+
+        this._adjustAxis();
+    },
+
+    /**
+     * @return {module:zrender/core/BoundingRect}
+     */
+    getRect: function () {
+        return this._rect;
+    },
+
+    /**
+     * @private
+     */
+    _adjustAxis: function () {
+
+        var rect = this._rect;
+        var axis = this._axis;
+
+        var isHorizontal = axis.isHorizontal();
+        var extent = isHorizontal ? [0, rect.width] : [0, rect.height];
+        var idx =  axis.reverse ? 1 : 0;
+
+        axis.setExtent(extent[idx], extent[1 - idx]);
+
+        this._updateAxisTransform(axis, isHorizontal ? rect.x : rect.y);
+
+    },
+
+    /**
+     * @param  {module:echarts/coord/single/SingleAxis} axis
+     * @param  {number} coordBase
+     */
+    _updateAxisTransform: function (axis, coordBase) {
+
+        var axisExtent = axis.getExtent();
+        var extentSum = axisExtent[0] + axisExtent[1];
+        var isHorizontal = axis.isHorizontal();
+
+        axis.toGlobalCoord = isHorizontal
+            ? function (coord) {
+                return coord + coordBase;
+            }
+            : function (coord) {
+                return extentSum - coord + coordBase;
+            };
+
+        axis.toLocalCoord = isHorizontal
+            ? function (coord) {
+                return coord - coordBase;
+            }
+            : function (coord) {
+                return extentSum - coord + coordBase;
+            };
+    },
+
+    /**
+     * Get axis.
+     *
+     * @return {module:echarts/coord/single/SingleAxis}
+     */
+    getAxis: function () {
+        return this._axis;
+    },
+
+    /**
+     * Get axis, add it just for draw tooltip.
+     *
+     * @return {[type]} [description]
+     */
+    getBaseAxis: function () {
+        return this._axis;
+    },
+
+    /**
+     * @return {Array.<module:echarts/coord/Axis>}
+     */
+    getAxes: function () {
+        return [this._axis];
+    },
+
+    /**
+     * @return {Object} {baseAxes: [], otherAxes: []}
+     */
+    getTooltipAxes: function () {
+        return {baseAxes: [this.getAxis()]};
+    },
+
+    /**
+     * If contain point.
+     *
+     * @param  {Array.<number>} point
+     * @return {boolean}
+     */
+    containPoint: function (point) {
+        var rect = this.getRect();
+        var axis = this.getAxis();
+        var orient = axis.orient;
+        if (orient === 'horizontal') {
+            return axis.contain(axis.toLocalCoord(point[0]))
+            && (point[1] >= rect.y && point[1] <= (rect.y + rect.height));
+        }
+        else {
+            return axis.contain(axis.toLocalCoord(point[1]))
+            && (point[0] >= rect.y && point[0] <= (rect.y + rect.height));
+        }
+    },
+
+    /**
+     * @param {Array.<number>} point
+     * @return {Array.<number>}
+     */
+    pointToData: function (point) {
+        var axis = this.getAxis();
+        return [axis.coordToData(axis.toLocalCoord(
+            point[axis.orient === 'horizontal' ? 0 : 1]
+        ))];
+    },
+
+    /**
+     * Convert the series data to concrete point.
+     *
+     * @param  {number|Array.<number>} val
+     * @return {Array.<number>}
+     */
+    dataToPoint: function (val) {
+        var axis = this.getAxis();
+        var rect = this.getRect();
+        var pt = [];
+        var idx = axis.orient === 'horizontal' ? 0 : 1;
+
+        if (val instanceof Array) {
+            val = val[0];
+        }
+
+        pt[idx] = axis.toGlobalCoord(axis.dataToCoord(+val));
+        pt[1 - idx] = idx === 0 ? (rect.y + rect.height / 2) : (rect.x + rect.width / 2);
+        return pt;
+    }
+
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Single coordinate system creator.
+ */
+
+/**
+ * Create single coordinate system and inject it into seriesModel.
+ *
+ * @param {module:echarts/model/Global} ecModel
+ * @param {module:echarts/ExtensionAPI} api
+ * @return {Array.<module:echarts/coord/single/Single>}
+ */
+function create$3(ecModel, api) {
+    var singles = [];
+
+    ecModel.eachComponent('singleAxis', function(axisModel, idx) {
+
+        var single = new Single(axisModel, ecModel, api);
+        single.name = 'single_' + idx;
+        single.resize(axisModel, api);
+        axisModel.coordinateSystem = single;
+        singles.push(single);
+
+    });
+
+    ecModel.eachSeries(function (seriesModel) {
+        if (seriesModel.get('coordinateSystem') === 'singleAxis') {
+            var singleAxisModel = ecModel.queryComponents({
+                mainType: 'singleAxis',
+                index: seriesModel.get('singleAxisIndex'),
+                id: seriesModel.get('singleAxisId')
+            })[0];
+            seriesModel.coordinateSystem = singleAxisModel && singleAxisModel.coordinateSystem;
+        }
+    });
+
+    return singles;
+}
+
+CoordinateSystemManager.register('single', {
+    create: create$3,
+    dimensions: Single.prototype.dimensions
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @param {Object} opt {labelInside}
+ * @return {Object} {
+ *  position, rotation, labelDirection, labelOffset,
+ *  tickDirection, labelRotate, z2
+ * }
+ */
+function layout$2(axisModel, opt) {
+    opt = opt || {};
+    var single = axisModel.coordinateSystem;
+    var axis = axisModel.axis;
+    var layout = {};
+
+    var axisPosition = axis.position;
+    var orient = axis.orient;
+
+    var rect = single.getRect();
+    var rectBound = [rect.x, rect.x + rect.width, rect.y, rect.y + rect.height];
+
+    var positionMap = {
+        horizontal: {top: rectBound[2], bottom: rectBound[3]},
+        vertical: {left: rectBound[0], right: rectBound[1]}
+    };
+
+    layout.position = [
+        orient === 'vertical'
+            ? positionMap.vertical[axisPosition]
+            : rectBound[0],
+        orient === 'horizontal'
+            ? positionMap.horizontal[axisPosition]
+            : rectBound[3]
+    ];
+
+    var r = {horizontal: 0, vertical: 1};
+    layout.rotation = Math.PI / 2 * r[orient];
+
+    var directionMap = {top: -1, bottom: 1, right: 1, left: -1};
+
+    layout.labelDirection = layout.tickDirection
+        = layout.nameDirection
+        = directionMap[axisPosition];
+
+    if (axisModel.get('axisTick.inside')) {
+        layout.tickDirection = -layout.tickDirection;
+    }
+
+    if (retrieve(opt.labelInside, axisModel.get('axisLabel.inside'))) {
+        layout.labelDirection = -layout.labelDirection;
+    }
+
+    var labelRotation = opt.rotate;
+    labelRotation == null && (labelRotation = axisModel.get('axisLabel.rotate'));
+    layout.labelRotation = axisPosition === 'top' ? -labelRotation : labelRotation;
+
+    layout.z2 = 1;
+
+    return layout;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+var axisBuilderAttrs$2 = [
+    'axisLine', 'axisTickLabel', 'axisName'
+];
+
+var selfBuilderAttr = 'splitLine';
+
+var SingleAxisView = AxisView.extend({
+
+    type: 'singleAxis',
+
+    axisPointerClass: 'SingleAxisPointer',
+
+    render: function (axisModel, ecModel, api, payload) {
+
+        var group = this.group;
+
+        group.removeAll();
+
+        var layout =  layout$2(axisModel);
+
+        var axisBuilder = new AxisBuilder(axisModel, layout);
+
+        each$1(axisBuilderAttrs$2, axisBuilder.add, axisBuilder);
+
+        group.add(axisBuilder.getGroup());
+
+        if (axisModel.get(selfBuilderAttr + '.show')) {
+            this['_' + selfBuilderAttr](axisModel);
+        }
+
+        SingleAxisView.superCall(this, 'render', axisModel, ecModel, api, payload);
+    },
+
+    _splitLine: function(axisModel) {
+        var axis = axisModel.axis;
+
+        if (axis.scale.isBlank()) {
+            return;
+        }
+
+        var splitLineModel = axisModel.getModel('splitLine');
+        var lineStyleModel = splitLineModel.getModel('lineStyle');
+        var lineWidth = lineStyleModel.get('width');
+        var lineColors = lineStyleModel.get('color');
+
+        lineColors = lineColors instanceof Array ? lineColors : [lineColors];
+
+        var gridRect = axisModel.coordinateSystem.getRect();
+        var isHorizontal = axis.isHorizontal();
+
+        var splitLines = [];
+        var lineCount = 0;
+
+        var ticksCoords = axis.getTicksCoords({
+            tickModel: splitLineModel
+        });
+
+        var p1 = [];
+        var p2 = [];
+
+        for (var i = 0; i < ticksCoords.length; ++i) {
+            var tickCoord = axis.toGlobalCoord(ticksCoords[i].coord);
+            if (isHorizontal) {
+                p1[0] = tickCoord;
+                p1[1] = gridRect.y;
+                p2[0] = tickCoord;
+                p2[1] = gridRect.y + gridRect.height;
+            }
+            else {
+                p1[0] = gridRect.x;
+                p1[1] = tickCoord;
+                p2[0] = gridRect.x + gridRect.width;
+                p2[1] = tickCoord;
+            }
+            var colorIndex = (lineCount++) % lineColors.length;
+            splitLines[colorIndex] = splitLines[colorIndex] || [];
+            splitLines[colorIndex].push(new Line(
+                subPixelOptimizeLine({
+                    shape: {
+                        x1: p1[0],
+                        y1: p1[1],
+                        x2: p2[0],
+                        y2: p2[1]
+                    },
+                    style: {
+                        lineWidth: lineWidth
+                    },
+                    silent: true
+                })));
+        }
+
+        for (var i = 0; i < splitLines.length; ++i) {
+            this.group.add(mergePath(splitLines[i], {
+                style: {
+                    stroke: lineColors[i % lineColors.length],
+                    lineDash: lineStyleModel.getLineDash(lineWidth),
+                    lineWidth: lineWidth
+                },
+                silent: true
+            }));
+        }
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var AxisModel$4 = ComponentModel.extend({
+
+    type: 'singleAxis',
+
+    layoutMode: 'box',
+
+    /**
+     * @type {module:echarts/coord/single/SingleAxis}
+     */
+    axis: null,
+
+    /**
+     * @type {module:echarts/coord/single/Single}
+     */
+    coordinateSystem: null,
+
+    /**
+     * @override
+     */
+    getCoordSysModel: function () {
+        return this;
+    }
+
+});
+
+var defaultOption$2 = {
+
+    left: '5%',
+    top: '5%',
+    right: '5%',
+    bottom: '5%',
+
+    type: 'value',
+
+    position: 'bottom',
+
+    orient: 'horizontal',
+
+    axisLine: {
+        show: true,
+        lineStyle: {
+            width: 2,
+            type: 'solid'
+        }
+    },
+
+    // Single coordinate system and single axis is the,
+    // which is used as the parent tooltip model.
+    // same model, so we set default tooltip show as true.
+    tooltip: {
+        show: true
+    },
+
+    axisTick: {
+        show: true,
+        length: 6,
+        lineStyle: {
+            width: 2
+        }
+    },
+
+    axisLabel: {
+        show: true,
+        interval: 'auto'
+    },
+
+    splitLine: {
+        show: true,
+        lineStyle: {
+            type: 'dashed',
+            opacity: 0.2
+        }
+    }
+};
+
+function getAxisType$2(axisName, option) {
+    return option.type || (option.data ? 'category' : 'value');
+}
+
+merge(AxisModel$4.prototype, axisModelCommonMixin);
+
+axisModelCreator('single', AxisModel$4, getAxisType$2, defaultOption$2);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @param {Object} finder contains {seriesIndex, dataIndex, dataIndexInside}
+ * @param {module:echarts/model/Global} ecModel
+ * @return {Object} {point: [x, y], el: ...} point Will not be null.
+ */
+var findPointFromSeries = function (finder, ecModel) {
+    var point = [];
+    var seriesIndex = finder.seriesIndex;
+    var seriesModel;
+    if (seriesIndex == null || !(
+        seriesModel = ecModel.getSeriesByIndex(seriesIndex)
+    )) {
+        return {point: []};
+    }
+
+    var data = seriesModel.getData();
+    var dataIndex = queryDataIndex(data, finder);
+    if (dataIndex == null || dataIndex < 0 || isArray(dataIndex)) {
+        return {point: []};
+    }
+
+    var el = data.getItemGraphicEl(dataIndex);
+    var coordSys = seriesModel.coordinateSystem;
+
+    if (seriesModel.getTooltipPosition) {
+        point = seriesModel.getTooltipPosition(dataIndex) || [];
+    }
+    else if (coordSys && coordSys.dataToPoint) {
+        point = coordSys.dataToPoint(
+            data.getValues(
+                map(coordSys.dimensions, function (dim) {
+                    return data.mapDimension(dim);
+                }), dataIndex, true
+            )
+        ) || [];
+    }
+    else if (el) {
+        // Use graphic bounding rect
+        var rect = el.getBoundingRect().clone();
+        rect.applyTransform(el.transform);
+        point = [
+            rect.x + rect.width / 2,
+            rect.y + rect.height / 2
+        ];
+    }
+
+    return {point: point, el: el};
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var each$14 = each$1;
+var curry$3 = curry;
+var inner$7 = makeInner();
+
+/**
+ * Basic logic: check all axis, if they do not demand show/highlight,
+ * then hide/downplay them.
+ *
+ * @param {Object} coordSysAxesInfo
+ * @param {Object} payload
+ * @param {string} [payload.currTrigger] 'click' | 'mousemove' | 'leave'
+ * @param {Array.<number>} [payload.x] x and y, which are mandatory, specify a point to
+ *              trigger axisPointer and tooltip.
+ * @param {Array.<number>} [payload.y] x and y, which are mandatory, specify a point to
+ *              trigger axisPointer and tooltip.
+ * @param {Object} [payload.seriesIndex] finder, optional, restrict target axes.
+ * @param {Object} [payload.dataIndex] finder, restrict target axes.
+ * @param {Object} [payload.axesInfo] finder, restrict target axes.
+ *        [{
+ *          axisDim: 'x'|'y'|'angle'|...,
+ *          axisIndex: ...,
+ *          value: ...
+ *        }, ...]
+ * @param {Function} [payload.dispatchAction]
+ * @param {Object} [payload.tooltipOption]
+ * @param {Object|Array.<number>|Function} [payload.position] Tooltip position,
+ *        which can be specified in dispatchAction
+ * @param {module:echarts/model/Global} ecModel
+ * @param {module:echarts/ExtensionAPI} api
+ * @return {Object} content of event obj for echarts.connect.
+ */
+var axisTrigger = function (payload, ecModel, api) {
+    var currTrigger = payload.currTrigger;
+    var point = [payload.x, payload.y];
+    var finder = payload;
+    var dispatchAction = payload.dispatchAction || bind(api.dispatchAction, api);
+    var coordSysAxesInfo = ecModel.getComponent('axisPointer').coordSysAxesInfo;
+
+    // Pending
+    // See #6121. But we are not able to reproduce it yet.
+    if (!coordSysAxesInfo) {
+        return;
+    }
+
+    if (illegalPoint(point)) {
+        // Used in the default behavior of `connection`: use the sample seriesIndex
+        // and dataIndex. And also used in the tooltipView trigger.
+        point = findPointFromSeries({
+            seriesIndex: finder.seriesIndex,
+            // Do not use dataIndexInside from other ec instance.
+            // FIXME: auto detect it?
+            dataIndex: finder.dataIndex
+        }, ecModel).point;
+    }
+    var isIllegalPoint = illegalPoint(point);
+
+    // Axis and value can be specified when calling dispatchAction({type: 'updateAxisPointer'}).
+    // Notice: In this case, it is difficult to get the `point` (which is necessary to show
+    // tooltip, so if point is not given, we just use the point found by sample seriesIndex
+    // and dataIndex.
+    var inputAxesInfo = finder.axesInfo;
+
+    var axesInfo = coordSysAxesInfo.axesInfo;
+    var shouldHide = currTrigger === 'leave' || illegalPoint(point);
+    var outputFinder = {};
+
+    var showValueMap = {};
+    var dataByCoordSys = {list: [], map: {}};
+    var updaters = {
+        showPointer: curry$3(showPointer, showValueMap),
+        showTooltip: curry$3(showTooltip, dataByCoordSys)
+    };
+
+    // Process for triggered axes.
+    each$14(coordSysAxesInfo.coordSysMap, function (coordSys, coordSysKey) {
+        // If a point given, it must be contained by the coordinate system.
+        var coordSysContainsPoint = isIllegalPoint || coordSys.containPoint(point);
+
+        each$14(coordSysAxesInfo.coordSysAxesInfo[coordSysKey], function (axisInfo, key) {
+            var axis = axisInfo.axis;
+            var inputAxisInfo = findInputAxisInfo(inputAxesInfo, axisInfo);
+            // If no inputAxesInfo, no axis is restricted.
+            if (!shouldHide && coordSysContainsPoint && (!inputAxesInfo || inputAxisInfo)) {
+                var val = inputAxisInfo && inputAxisInfo.value;
+                if (val == null && !isIllegalPoint) {
+                    val = axis.pointToData(point);
+                }
+                val != null && processOnAxis(axisInfo, val, updaters, false, outputFinder);
+            }
+        });
+    });
+
+    // Process for linked axes.
+    var linkTriggers = {};
+    each$14(axesInfo, function (tarAxisInfo, tarKey) {
+        var linkGroup = tarAxisInfo.linkGroup;
+
+        // If axis has been triggered in the previous stage, it should not be triggered by link.
+        if (linkGroup && !showValueMap[tarKey]) {
+            each$14(linkGroup.axesInfo, function (srcAxisInfo, srcKey) {
+                var srcValItem = showValueMap[srcKey];
+                // If srcValItem exist, source axis is triggered, so link to target axis.
+                if (srcAxisInfo !== tarAxisInfo && srcValItem) {
+                    var val = srcValItem.value;
+                    linkGroup.mapper && (val = tarAxisInfo.axis.scale.parse(linkGroup.mapper(
+                        val, makeMapperParam(srcAxisInfo), makeMapperParam(tarAxisInfo)
+                    )));
+                    linkTriggers[tarAxisInfo.key] = val;
+                }
+            });
+        }
+    });
+    each$14(linkTriggers, function (val, tarKey) {
+        processOnAxis(axesInfo[tarKey], val, updaters, true, outputFinder);
+    });
+
+    updateModelActually(showValueMap, axesInfo, outputFinder);
+    dispatchTooltipActually(dataByCoordSys, point, payload, dispatchAction);
+    dispatchHighDownActually(axesInfo, dispatchAction, api);
+
+    return outputFinder;
+};
+
+function processOnAxis(axisInfo, newValue, updaters, dontSnap, outputFinder) {
+    var axis = axisInfo.axis;
+
+    if (axis.scale.isBlank() || !axis.containData(newValue)) {
+        return;
+    }
+
+    if (!axisInfo.involveSeries) {
+        updaters.showPointer(axisInfo, newValue);
+        return;
+    }
+
+    // Heavy calculation. So put it after axis.containData checking.
+    var payloadInfo = buildPayloadsBySeries(newValue, axisInfo);
+    var payloadBatch = payloadInfo.payloadBatch;
+    var snapToValue = payloadInfo.snapToValue;
+
+    // Fill content of event obj for echarts.connect.
+    // By defualt use the first involved series data as a sample to connect.
+    if (payloadBatch[0] && outputFinder.seriesIndex == null) {
+        extend(outputFinder, payloadBatch[0]);
+    }
+
+    // If no linkSource input, this process is for collecting link
+    // target, where snap should not be accepted.
+    if (!dontSnap && axisInfo.snap) {
+        if (axis.containData(snapToValue) && snapToValue != null) {
+            newValue = snapToValue;
+        }
+    }
+
+    updaters.showPointer(axisInfo, newValue, payloadBatch, outputFinder);
+    // Tooltip should always be snapToValue, otherwise there will be
+    // incorrect "axis value ~ series value" mapping displayed in tooltip.
+    updaters.showTooltip(axisInfo, payloadInfo, snapToValue);
+}
+
+function buildPayloadsBySeries(value, axisInfo) {
+    var axis = axisInfo.axis;
+    var dim = axis.dim;
+    var snapToValue = value;
+    var payloadBatch = [];
+    var minDist = Number.MAX_VALUE;
+    var minDiff = -1;
+
+    each$14(axisInfo.seriesModels, function (series, idx) {
+        var dataDim = series.getData().mapDimension(dim, true);
+        var seriesNestestValue;
+        var dataIndices;
+
+        if (series.getAxisTooltipData) {
+            var result = series.getAxisTooltipData(dataDim, value, axis);
+            dataIndices = result.dataIndices;
+            seriesNestestValue = result.nestestValue;
+        }
+        else {
+            dataIndices = series.getData().indicesOfNearest(
+                dataDim[0],
+                value,
+                // Add a threshold to avoid find the wrong dataIndex
+                // when data length is not same.
+                // false,
+                axis.type === 'category' ? 0.5 : null
+            );
+            if (!dataIndices.length) {
+                return;
+            }
+            seriesNestestValue = series.getData().get(dataDim[0], dataIndices[0]);
+        }
+
+        if (seriesNestestValue == null || !isFinite(seriesNestestValue)) {
+            return;
+        }
+
+        var diff = value - seriesNestestValue;
+        var dist = Math.abs(diff);
+        // Consider category case
+        if (dist <= minDist) {
+            if (dist < minDist || (diff >= 0 && minDiff < 0)) {
+                minDist = dist;
+                minDiff = diff;
+                snapToValue = seriesNestestValue;
+                payloadBatch.length = 0;
+            }
+            each$14(dataIndices, function (dataIndex) {
+                payloadBatch.push({
+                    seriesIndex: series.seriesIndex,
+                    dataIndexInside: dataIndex,
+                    dataIndex: series.getData().getRawIndex(dataIndex)
+                });
+            });
+        }
+    });
+
+    return {
+        payloadBatch: payloadBatch,
+        snapToValue: snapToValue
+    };
+}
+
+function showPointer(showValueMap, axisInfo, value, payloadBatch) {
+    showValueMap[axisInfo.key] = {value: value, payloadBatch: payloadBatch};
+}
+
+function showTooltip(dataByCoordSys, axisInfo, payloadInfo, value) {
+    var payloadBatch = payloadInfo.payloadBatch;
+    var axis = axisInfo.axis;
+    var axisModel = axis.model;
+    var axisPointerModel = axisInfo.axisPointerModel;
+
+    // If no data, do not create anything in dataByCoordSys,
+    // whose length will be used to judge whether dispatch action.
+    if (!axisInfo.triggerTooltip || !payloadBatch.length) {
+        return;
+    }
+
+    var coordSysModel = axisInfo.coordSys.model;
+    var coordSysKey = makeKey(coordSysModel);
+    var coordSysItem = dataByCoordSys.map[coordSysKey];
+    if (!coordSysItem) {
+        coordSysItem = dataByCoordSys.map[coordSysKey] = {
+            coordSysId: coordSysModel.id,
+            coordSysIndex: coordSysModel.componentIndex,
+            coordSysType: coordSysModel.type,
+            coordSysMainType: coordSysModel.mainType,
+            dataByAxis: []
+        };
+        dataByCoordSys.list.push(coordSysItem);
+    }
+
+    coordSysItem.dataByAxis.push({
+        axisDim: axis.dim,
+        axisIndex: axisModel.componentIndex,
+        axisType: axisModel.type,
+        axisId: axisModel.id,
+        value: value,
+        // Caustion: viewHelper.getValueLabel is actually on "view stage", which
+        // depends that all models have been updated. So it should not be performed
+        // here. Considering axisPointerModel used here is volatile, which is hard
+        // to be retrieve in TooltipView, we prepare parameters here.
+        valueLabelOpt: {
+            precision: axisPointerModel.get('label.precision'),
+            formatter: axisPointerModel.get('label.formatter')
+        },
+        seriesDataIndices: payloadBatch.slice()
+    });
+}
+
+function updateModelActually(showValueMap, axesInfo, outputFinder) {
+    var outputAxesInfo = outputFinder.axesInfo = [];
+    // Basic logic: If no 'show' required, 'hide' this axisPointer.
+    each$14(axesInfo, function (axisInfo, key) {
+        var option = axisInfo.axisPointerModel.option;
+        var valItem = showValueMap[key];
+
+        if (valItem) {
+            !axisInfo.useHandle && (option.status = 'show');
+            option.value = valItem.value;
+            // For label formatter param and highlight.
+            option.seriesDataIndices = (valItem.payloadBatch || []).slice();
+        }
+        // When always show (e.g., handle used), remain
+        // original value and status.
+        else {
+            // If hide, value still need to be set, consider
+            // click legend to toggle axis blank.
+            !axisInfo.useHandle && (option.status = 'hide');
+        }
+
+        // If status is 'hide', should be no info in payload.
+        option.status === 'show' && outputAxesInfo.push({
+            axisDim: axisInfo.axis.dim,
+            axisIndex: axisInfo.axis.model.componentIndex,
+            value: option.value
+        });
+    });
+}
+
+function dispatchTooltipActually(dataByCoordSys, point, payload, dispatchAction) {
+    // Basic logic: If no showTip required, hideTip will be dispatched.
+    if (illegalPoint(point) || !dataByCoordSys.list.length) {
+        dispatchAction({type: 'hideTip'});
+        return;
+    }
+
+    // In most case only one axis (or event one series is used). It is
+    // convinient to fetch payload.seriesIndex and payload.dataIndex
+    // dirtectly. So put the first seriesIndex and dataIndex of the first
+    // axis on the payload.
+    var sampleItem = ((dataByCoordSys.list[0].dataByAxis[0] || {}).seriesDataIndices || [])[0] || {};
+
+    dispatchAction({
+        type: 'showTip',
+        escapeConnect: true,
+        x: point[0],
+        y: point[1],
+        tooltipOption: payload.tooltipOption,
+        position: payload.position,
+        dataIndexInside: sampleItem.dataIndexInside,
+        dataIndex: sampleItem.dataIndex,
+        seriesIndex: sampleItem.seriesIndex,
+        dataByCoordSys: dataByCoordSys.list
+    });
+}
+
+function dispatchHighDownActually(axesInfo, dispatchAction, api) {
+    // FIXME
+    // highlight status modification shoule be a stage of main process?
+    // (Consider confilct (e.g., legend and axisPointer) and setOption)
+
+    var zr = api.getZr();
+    var highDownKey = 'axisPointerLastHighlights';
+    var lastHighlights = inner$7(zr)[highDownKey] || {};
+    var newHighlights = inner$7(zr)[highDownKey] = {};
+
+    // Update highlight/downplay status according to axisPointer model.
+    // Build hash map and remove duplicate incidentally.
+    each$14(axesInfo, function (axisInfo, key) {
+        var option = axisInfo.axisPointerModel.option;
+        option.status === 'show' && each$14(option.seriesDataIndices, function (batchItem) {
+            var key = batchItem.seriesIndex + ' | ' + batchItem.dataIndex;
+            newHighlights[key] = batchItem;
+        });
+    });
+
+    // Diff.
+    var toHighlight = [];
+    var toDownplay = [];
+    each$1(lastHighlights, function (batchItem, key) {
+        !newHighlights[key] && toDownplay.push(batchItem);
+    });
+    each$1(newHighlights, function (batchItem, key) {
+        !lastHighlights[key] && toHighlight.push(batchItem);
+    });
+
+    toDownplay.length && api.dispatchAction({
+        type: 'downplay', escapeConnect: true, batch: toDownplay
+    });
+    toHighlight.length && api.dispatchAction({
+        type: 'highlight', escapeConnect: true, batch: toHighlight
+    });
+}
+
+function findInputAxisInfo(inputAxesInfo, axisInfo) {
+    for (var i = 0; i < (inputAxesInfo || []).length; i++) {
+        var inputAxisInfo = inputAxesInfo[i];
+        if (axisInfo.axis.dim === inputAxisInfo.axisDim
+            && axisInfo.axis.model.componentIndex === inputAxisInfo.axisIndex
+        ) {
+            return inputAxisInfo;
+        }
+    }
+}
+
+function makeMapperParam(axisInfo) {
+    var axisModel = axisInfo.axis.model;
+    var item = {};
+    var dim = item.axisDim = axisInfo.axis.dim;
+    item.axisIndex = item[dim + 'AxisIndex'] = axisModel.componentIndex;
+    item.axisName = item[dim + 'AxisName'] = axisModel.name;
+    item.axisId = item[dim + 'AxisId'] = axisModel.id;
+    return item;
+}
+
+function illegalPoint(point) {
+    return !point || point[0] == null || isNaN(point[0]) || point[1] == null || isNaN(point[1]);
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var AxisPointerModel = extendComponentModel({
+
+    type: 'axisPointer',
+
+    coordSysAxesInfo: null,
+
+    defaultOption: {
+        // 'auto' means that show when triggered by tooltip or handle.
+        show: 'auto',
+        // 'click' | 'mousemove' | 'none'
+        triggerOn: null, // set default in AxisPonterView.js
+
+        zlevel: 0,
+        z: 50,
+
+        type: 'line',
+        // axispointer triggered by tootip determine snap automatically,
+        // see `modelHelper`.
+        snap: false,
+        triggerTooltip: true,
+
+        value: null,
+        status: null, // Init value depends on whether handle is used.
+
+        // [group0, group1, ...]
+        // Each group can be: {
+        //      mapper: function () {},
+        //      singleTooltip: 'multiple',  // 'multiple' or 'single'
+        //      xAxisId: ...,
+        //      yAxisName: ...,
+        //      angleAxisIndex: ...
+        // }
+        // mapper: can be ignored.
+        //      input: {axisInfo, value}
+        //      output: {axisInfo, value}
+        link: [],
+
+        // Do not set 'auto' here, otherwise global animation: false
+        // will not effect at this axispointer.
+        animation: null,
+        animationDurationUpdate: 200,
+
+        lineStyle: {
+            color: '#aaa',
+            width: 1,
+            type: 'solid'
+        },
+
+        shadowStyle: {
+            color: 'rgba(150,150,150,0.3)'
+        },
+
+        label: {
+            show: true,
+            formatter: null, // string | Function
+            precision: 'auto', // Or a number like 0, 1, 2 ...
+            margin: 3,
+            color: '#fff',
+            padding: [5, 7, 5, 7],
+            backgroundColor: 'auto', // default: axis line color
+            borderColor: null,
+            borderWidth: 0,
+            shadowBlur: 3,
+            shadowColor: '#aaa'
+            // Considering applicability, common style should
+            // better not have shadowOffset.
+            // shadowOffsetX: 0,
+            // shadowOffsetY: 2
+        },
+
+        handle: {
+            show: false,
+            icon: '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.4h1.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.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
+            size: 45,
+            // handle margin is from symbol center to axis, which is stable when circular move.
+            margin: 50,
+            // color: '#1b8bbd'
+            // color: '#2f4554'
+            color: '#333',
+            shadowBlur: 3,
+            shadowColor: '#aaa',
+            shadowOffsetX: 0,
+            shadowOffsetY: 2,
+
+            // For mobile performance
+            throttle: 40
+        }
+    }
+
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var inner$8 = makeInner();
+var each$15 = each$1;
+
+/**
+ * @param {string} key
+ * @param {module:echarts/ExtensionAPI} api
+ * @param {Function} handler
+ *      param: {string} currTrigger
+ *      param: {Array.<number>} point
+ */
+function register(key, api, handler) {
+    if (env$1.node) {
+        return;
+    }
+
+    var zr = api.getZr();
+    inner$8(zr).records || (inner$8(zr).records = {});
+
+    initGlobalListeners(zr, api);
+
+    var record = inner$8(zr).records[key] || (inner$8(zr).records[key] = {});
+    record.handler = handler;
+}
+
+function initGlobalListeners(zr, api) {
+    if (inner$8(zr).initialized) {
+        return;
+    }
+
+    inner$8(zr).initialized = true;
+
+    useHandler('click', curry(doEnter, 'click'));
+    useHandler('mousemove', curry(doEnter, 'mousemove'));
+    // useHandler('mouseout', onLeave);
+    useHandler('globalout', onLeave);
+
+    function useHandler(eventType, cb) {
+        zr.on(eventType, function (e) {
+            var dis = makeDispatchAction(api);
+
+            each$15(inner$8(zr).records, function (record) {
+                record && cb(record, e, dis.dispatchAction);
+            });
+
+            dispatchTooltipFinally(dis.pendings, api);
+        });
+    }
+}
+
+function dispatchTooltipFinally(pendings, api) {
+    var showLen = pendings.showTip.length;
+    var hideLen = pendings.hideTip.length;
+
+    var actuallyPayload;
+    if (showLen) {
+        actuallyPayload = pendings.showTip[showLen - 1];
+    }
+    else if (hideLen) {
+        actuallyPayload = pendings.hideTip[hideLen - 1];
+    }
+    if (actuallyPayload) {
+        actuallyPayload.dispatchAction = null;
+        api.dispatchAction(actuallyPayload);
+    }
+}
+
+function onLeave(record, e, dispatchAction) {
+    record.handler('leave', null, dispatchAction);
+}
+
+function doEnter(currTrigger, record, e, dispatchAction) {
+    record.handler(currTrigger, e, dispatchAction);
+}
+
+function makeDispatchAction(api) {
+    var pendings = {
+        showTip: [],
+        hideTip: []
+    };
+    // FIXME
+    // better approach?
+    // 'showTip' and 'hideTip' can be triggered by axisPointer and tooltip,
+    // which may be conflict, (axisPointer call showTip but tooltip call hideTip);
+    // So we have to add "final stage" to merge those dispatched actions.
+    var dispatchAction = function (payload) {
+        var pendingList = pendings[payload.type];
+        if (pendingList) {
+            pendingList.push(payload);
+        }
+        else {
+            payload.dispatchAction = dispatchAction;
+            api.dispatchAction(payload);
+        }
+    };
+
+    return {
+        dispatchAction: dispatchAction,
+        pendings: pendings
+    };
+}
+
+/**
+ * @param {string} key
+ * @param {module:echarts/ExtensionAPI} api
+ */
+function unregister(key, api) {
+    if (env$1.node) {
+        return;
+    }
+    var zr = api.getZr();
+    var record = (inner$8(zr).records || {})[key];
+    if (record) {
+        inner$8(zr).records[key] = null;
+    }
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var AxisPointerView = extendComponentView({
+
+    type: 'axisPointer',
+
+    render: function (globalAxisPointerModel, ecModel, api) {
+        var globalTooltipModel = ecModel.getComponent('tooltip');
+        var triggerOn = globalAxisPointerModel.get('triggerOn')
+            || (globalTooltipModel && globalTooltipModel.get('triggerOn') || 'mousemove|click');
+
+        // Register global listener in AxisPointerView to enable
+        // AxisPointerView to be independent to Tooltip.
+        register(
+            'axisPointer',
+            api,
+            function (currTrigger, e, dispatchAction) {
+                // If 'none', it is not controlled by mouse totally.
+                if (triggerOn !== 'none'
+                    && (currTrigger === 'leave' || triggerOn.indexOf(currTrigger) >= 0)
+                ) {
+                    dispatchAction({
+                        type: 'updateAxisPointer',
+                        currTrigger: currTrigger,
+                        x: e && e.offsetX,
+                        y: e && e.offsetY
+                    });
+                }
+            }
+        );
+    },
+
+    /**
+     * @override
+     */
+    remove: function (ecModel, api) {
+        unregister(api.getZr(), 'axisPointer');
+        AxisPointerView.superApply(this._model, 'remove', arguments);
+    },
+
+    /**
+     * @override
+     */
+    dispose: function (ecModel, api) {
+        unregister('axisPointer', api);
+        AxisPointerView.superApply(this._model, 'dispose', arguments);
+    }
+
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var inner$9 = makeInner();
+var clone$4 = clone;
+var bind$2 = bind;
+
+/**
+ * Base axis pointer class in 2D.
+ * Implemenents {module:echarts/component/axis/IAxisPointer}.
+ */
+function BaseAxisPointer () {
+}
+
+BaseAxisPointer.prototype = {
+
+    /**
+     * @private
+     */
+    _group: null,
+
+    /**
+     * @private
+     */
+    _lastGraphicKey: null,
+
+    /**
+     * @private
+     */
+    _handle: null,
+
+    /**
+     * @private
+     */
+    _dragging: false,
+
+    /**
+     * @private
+     */
+    _lastValue: null,
+
+    /**
+     * @private
+     */
+    _lastStatus: null,
+
+    /**
+     * @private
+     */
+    _payloadInfo: null,
+
+    /**
+     * In px, arbitrary value. Do not set too small,
+     * no animation is ok for most cases.
+     * @protected
+     */
+    animationThreshold: 15,
+
+    /**
+     * @implement
+     */
+    render: function (axisModel, axisPointerModel, api, forceRender) {
+        var value = axisPointerModel.get('value');
+        var status = axisPointerModel.get('status');
+
+        // Bind them to `this`, not in closure, otherwise they will not
+        // be replaced when user calling setOption in not merge mode.
+        this._axisModel = axisModel;
+        this._axisPointerModel = axisPointerModel;
+        this._api = api;
+
+        // Optimize: `render` will be called repeatly during mouse move.
+        // So it is power consuming if performing `render` each time,
+        // especially on mobile device.
+        if (!forceRender
+            && this._lastValue === value
+            && this._lastStatus === status
+        ) {
+            return;
+        }
+        this._lastValue = value;
+        this._lastStatus = status;
+
+        var group = this._group;
+        var handle = this._handle;
+
+        if (!status || status === 'hide') {
+            // Do not clear here, for animation better.
+            group && group.hide();
+            handle && handle.hide();
+            return;
+        }
+        group && group.show();
+        handle && handle.show();
+
+        // Otherwise status is 'show'
+        var elOption = {};
+        this.makeElOption(elOption, value, axisModel, axisPointerModel, api);
+
+        // Enable change axis pointer type.
+        var graphicKey = elOption.graphicKey;
+        if (graphicKey !== this._lastGraphicKey) {
+            this.clear(api);
+        }
+        this._lastGraphicKey = graphicKey;
+
+        var moveAnimation = this._moveAnimation =
+            this.determineAnimation(axisModel, axisPointerModel);
+
+        if (!group) {
+            group = this._group = new Group();
+            this.createPointerEl(group, elOption, axisModel, axisPointerModel);
+            this.createLabelEl(group, elOption, axisModel, axisPointerModel);
+            api.getZr().add(group);
+        }
+        else {
+            var doUpdateProps = curry(updateProps$1, axisPointerModel, moveAnimation);
+            this.updatePointerEl(group, elOption, doUpdateProps, axisPointerModel);
+            this.updateLabelEl(group, elOption, doUpdateProps, axisPointerModel);
+        }
+
+        updateMandatoryProps(group, axisPointerModel, true);
+
+        this._renderHandle(value);
+    },
+
+    /**
+     * @implement
+     */
+    remove: function (api) {
+        this.clear(api);
+    },
+
+    /**
+     * @implement
+     */
+    dispose: function (api) {
+        this.clear(api);
+    },
+
+    /**
+     * @protected
+     */
+    determineAnimation: function (axisModel, axisPointerModel) {
+        var animation = axisPointerModel.get('animation');
+        var axis = axisModel.axis;
+        var isCategoryAxis = axis.type === 'category';
+        var useSnap = axisPointerModel.get('snap');
+
+        // Value axis without snap always do not snap.
+        if (!useSnap && !isCategoryAxis) {
+            return false;
+        }
+
+        if (animation === 'auto' || animation == null) {
+            var animationThreshold = this.animationThreshold;
+            if (isCategoryAxis && axis.getBandWidth() > animationThreshold) {
+                return true;
+            }
+
+            // It is important to auto animation when snap used. Consider if there is
+            // a dataZoom, animation will be disabled when too many points exist, while
+            // it will be enabled for better visual effect when little points exist.
+            if (useSnap) {
+                var seriesDataCount = getAxisInfo(axisModel).seriesDataCount;
+                var axisExtent = axis.getExtent();
+                // Approximate band width
+                return Math.abs(axisExtent[0] - axisExtent[1]) / seriesDataCount > animationThreshold;
+            }
+
+            return false;
+        }
+
+        return animation === true;
+    },
+
+    /**
+     * add {pointer, label, graphicKey} to elOption
+     * @protected
+     */
+    makeElOption: function (elOption, value, axisModel, axisPointerModel, api) {
+        // Shoule be implemenented by sub-class.
+    },
+
+    /**
+     * @protected
+     */
+    createPointerEl: function (group, elOption, axisModel, axisPointerModel) {
+        var pointerOption = elOption.pointer;
+        if (pointerOption) {
+            var pointerEl = inner$9(group).pointerEl = new graphic[pointerOption.type](
+                clone$4(elOption.pointer)
+            );
+            group.add(pointerEl);
+        }
+    },
+
+    /**
+     * @protected
+     */
+    createLabelEl: function (group, elOption, axisModel, axisPointerModel) {
+        if (elOption.label) {
+            var labelEl = inner$9(group).labelEl = new Rect(
+                clone$4(elOption.label)
+            );
+
+            group.add(labelEl);
+            updateLabelShowHide(labelEl, axisPointerModel);
+        }
+    },
+
+    /**
+     * @protected
+     */
+    updatePointerEl: function (group, elOption, updateProps$$1) {
+        var pointerEl = inner$9(group).pointerEl;
+        if (pointerEl) {
+            pointerEl.setStyle(elOption.pointer.style);
+            updateProps$$1(pointerEl, {shape: elOption.pointer.shape});
+        }
+    },
+
+    /**
+     * @protected
+     */
+    updateLabelEl: function (group, elOption, updateProps$$1, axisPointerModel) {
+        var labelEl = inner$9(group).labelEl;
+        if (labelEl) {
+            labelEl.setStyle(elOption.label.style);
+            updateProps$$1(labelEl, {
+                // Consider text length change in vertical axis, animation should
+                // be used on shape, otherwise the effect will be weird.
+                shape: elOption.label.shape,
+                position: elOption.label.position
+            });
+
+            updateLabelShowHide(labelEl, axisPointerModel);
+        }
+    },
+
+    /**
+     * @private
+     */
+    _renderHandle: function (value) {
+        if (this._dragging || !this.updateHandleTransform) {
+            return;
+        }
+
+        var axisPointerModel = this._axisPointerModel;
+        var zr = this._api.getZr();
+        var handle = this._handle;
+        var handleModel = axisPointerModel.getModel('handle');
+
+        var status = axisPointerModel.get('status');
+        if (!handleModel.get('show') || !status || status === 'hide') {
+            handle && zr.remove(handle);
+            this._handle = null;
+            return;
+        }
+
+        var isInit;
+        if (!this._handle) {
+            isInit = true;
+            handle = this._handle = createIcon(
+                handleModel.get('icon'),
+                {
+                    cursor: 'move',
+                    draggable: true,
+                    onmousemove: function (e) {
+                        // Fot mobile devicem, prevent screen slider on the button.
+                        stop(e.event);
+                    },
+                    onmousedown: bind$2(this._onHandleDragMove, this, 0, 0),
+                    drift: bind$2(this._onHandleDragMove, this),
+                    ondragend: bind$2(this._onHandleDragEnd, this)
+                }
+            );
+            zr.add(handle);
+        }
+
+        updateMandatoryProps(handle, axisPointerModel, false);
+
+        // update style
+        var includeStyles = [
+            'color', 'borderColor', 'borderWidth', 'opacity',
+            'shadowColor', 'shadowBlur', 'shadowOffsetX', 'shadowOffsetY'
+        ];
+        handle.setStyle(handleModel.getItemStyle(null, includeStyles));
+
+        // update position
+        var handleSize = handleModel.get('size');
+        if (!isArray(handleSize)) {
+            handleSize = [handleSize, handleSize];
+        }
+        handle.attr('scale', [handleSize[0] / 2, handleSize[1] / 2]);
+
+        createOrUpdate(
+            this,
+            '_doDispatchAxisPointer',
+            handleModel.get('throttle') || 0,
+            'fixRate'
+        );
+
+        this._moveHandleToValue(value, isInit);
+    },
+
+    /**
+     * @private
+     */
+    _moveHandleToValue: function (value, isInit) {
+        updateProps$1(
+            this._axisPointerModel,
+            !isInit && this._moveAnimation,
+            this._handle,
+            getHandleTransProps(this.getHandleTransform(
+                value, this._axisModel, this._axisPointerModel
+            ))
+        );
+    },
+
+    /**
+     * @private
+     */
+    _onHandleDragMove: function (dx, dy) {
+        var handle = this._handle;
+        if (!handle) {
+            return;
+        }
+
+        this._dragging = true;
+
+        // Persistent for throttle.
+        var trans = this.updateHandleTransform(
+            getHandleTransProps(handle),
+            [dx, dy],
+            this._axisModel,
+            this._axisPointerModel
+        );
+        this._payloadInfo = trans;
+
+        handle.stopAnimation();
+        handle.attr(getHandleTransProps(trans));
+        inner$9(handle).lastProp = null;
+
+        this._doDispatchAxisPointer();
+    },
+
+    /**
+     * Throttled method.
+     * @private
+     */
+    _doDispatchAxisPointer: function () {
+        var handle = this._handle;
+        if (!handle) {
+            return;
+        }
+
+        var payloadInfo = this._payloadInfo;
+        var axisModel = this._axisModel;
+        this._api.dispatchAction({
+            type: 'updateAxisPointer',
+            x: payloadInfo.cursorPoint[0],
+            y: payloadInfo.cursorPoint[1],
+            tooltipOption: payloadInfo.tooltipOption,
+            axesInfo: [{
+                axisDim: axisModel.axis.dim,
+                axisIndex: axisModel.componentIndex
+            }]
+        });
+    },
+
+    /**
+     * @private
+     */
+    _onHandleDragEnd: function (moveAnimation) {
+        this._dragging = false;
+        var handle = this._handle;
+        if (!handle) {
+            return;
+        }
+
+        var value = this._axisPointerModel.get('value');
+        // Consider snap or categroy axis, handle may be not consistent with
+        // axisPointer. So move handle to align the exact value position when
+        // drag ended.
+        this._moveHandleToValue(value);
+
+        // For the effect: tooltip will be shown when finger holding on handle
+        // button, and will be hidden after finger left handle button.
+        this._api.dispatchAction({
+            type: 'hideTip'
+        });
+    },
+
+    /**
+     * Should be implemenented by sub-class if support `handle`.
+     * @protected
+     * @param {number} value
+     * @param {module:echarts/model/Model} axisModel
+     * @param {module:echarts/model/Model} axisPointerModel
+     * @return {Object} {position: [x, y], rotation: 0}
+     */
+    getHandleTransform: null,
+
+    /**
+     * * Should be implemenented by sub-class if support `handle`.
+     * @protected
+     * @param {Object} transform {position, rotation}
+     * @param {Array.<number>} delta [dx, dy]
+     * @param {module:echarts/model/Model} axisModel
+     * @param {module:echarts/model/Model} axisPointerModel
+     * @return {Object} {position: [x, y], rotation: 0, cursorPoint: [x, y]}
+     */
+    updateHandleTransform: null,
+
+    /**
+     * @private
+     */
+    clear: function (api) {
+        this._lastValue = null;
+        this._lastStatus = null;
+
+        var zr = api.getZr();
+        var group = this._group;
+        var handle = this._handle;
+        if (zr && group) {
+            this._lastGraphicKey = null;
+            group && zr.remove(group);
+            handle && zr.remove(handle);
+            this._group = null;
+            this._handle = null;
+            this._payloadInfo = null;
+        }
+    },
+
+    /**
+     * @protected
+     */
+    doClear: function () {
+        // Implemented by sub-class if necessary.
+    },
+
+    /**
+     * @protected
+     * @param {Array.<number>} xy
+     * @param {Array.<number>} wh
+     * @param {number} [xDimIndex=0] or 1
+     */
+    buildLabel: function (xy, wh, xDimIndex) {
+        xDimIndex = xDimIndex || 0;
+        return {
+            x: xy[xDimIndex],
+            y: xy[1 - xDimIndex],
+            width: wh[xDimIndex],
+            height: wh[1 - xDimIndex]
+        };
+    }
+};
+
+BaseAxisPointer.prototype.constructor = BaseAxisPointer;
+
+
+function updateProps$1(animationModel, moveAnimation, el, props) {
+    // Animation optimize.
+    if (!propsEqual(inner$9(el).lastProp, props)) {
+        inner$9(el).lastProp = props;
+        moveAnimation
+            ? updateProps(el, props, animationModel)
+            : (el.stopAnimation(), el.attr(props));
+    }
+}
+
+function propsEqual(lastProps, newProps) {
+    if (isObject$1(lastProps) && isObject$1(newProps)) {
+        var equals = true;
+        each$1(newProps, function (item, key) {
+            equals = equals && propsEqual(lastProps[key], item);
+        });
+        return !!equals;
+    }
+    else {
+        return lastProps === newProps;
+    }
+}
+
+function updateLabelShowHide(labelEl, axisPointerModel) {
+    labelEl[axisPointerModel.get('label.show') ? 'show' : 'hide']();
+}
+
+function getHandleTransProps(trans) {
+    return {
+        position: trans.position.slice(),
+        rotation: trans.rotation || 0
+    };
+}
+
+function updateMandatoryProps(group, axisPointerModel, silent) {
+    var z = axisPointerModel.get('z');
+    var zlevel = axisPointerModel.get('zlevel');
+
+    group && group.traverse(function (el) {
+        if (el.type !== 'group') {
+            z != null && (el.z = z);
+            zlevel != null && (el.zlevel = zlevel);
+            el.silent = silent;
+        }
+    });
+}
+
+enableClassExtend(BaseAxisPointer);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @param {module:echarts/model/Model} axisPointerModel
+ */
+function buildElStyle(axisPointerModel) {
+    var axisPointerType = axisPointerModel.get('type');
+    var styleModel = axisPointerModel.getModel(axisPointerType + 'Style');
+    var style;
+    if (axisPointerType === 'line') {
+        style = styleModel.getLineStyle();
+        style.fill = null;
+    }
+    else if (axisPointerType === 'shadow') {
+        style = styleModel.getAreaStyle();
+        style.stroke = null;
+    }
+    return style;
+}
+
+/**
+ * @param {Function} labelPos {align, verticalAlign, position}
+ */
+function buildLabelElOption(
+    elOption, axisModel, axisPointerModel, api, labelPos
+) {
+    var value = axisPointerModel.get('value');
+    var text = getValueLabel(
+        value, axisModel.axis, axisModel.ecModel,
+        axisPointerModel.get('seriesDataIndices'),
+        {
+            precision: axisPointerModel.get('label.precision'),
+            formatter: axisPointerModel.get('label.formatter')
+        }
+    );
+    var labelModel = axisPointerModel.getModel('label');
+    var paddings = normalizeCssArray$1(labelModel.get('padding') || 0);
+
+    var font = labelModel.getFont();
+    var textRect = getBoundingRect(text, font);
+
+    var position = labelPos.position;
+    var width = textRect.width + paddings[1] + paddings[3];
+    var height = textRect.height + paddings[0] + paddings[2];
+
+    // Adjust by align.
+    var align = labelPos.align;
+    align === 'right' && (position[0] -= width);
+    align === 'center' && (position[0] -= width / 2);
+    var verticalAlign = labelPos.verticalAlign;
+    verticalAlign === 'bottom' && (position[1] -= height);
+    verticalAlign === 'middle' && (position[1] -= height / 2);
+
+    // Not overflow ec container
+    confineInContainer(position, width, height, api);
+
+    var bgColor = labelModel.get('backgroundColor');
+    if (!bgColor || bgColor === 'auto') {
+        bgColor = axisModel.get('axisLine.lineStyle.color');
+    }
+
+    elOption.label = {
+        shape: {x: 0, y: 0, width: width, height: height, r: labelModel.get('borderRadius')},
+        position: position.slice(),
+        // TODO: rich
+        style: {
+            text: text,
+            textFont: font,
+            textFill: labelModel.getTextColor(),
+            textPosition: 'inside',
+            fill: bgColor,
+            stroke: labelModel.get('borderColor') || 'transparent',
+            lineWidth: labelModel.get('borderWidth') || 0,
+            shadowBlur: labelModel.get('shadowBlur'),
+            shadowColor: labelModel.get('shadowColor'),
+            shadowOffsetX: labelModel.get('shadowOffsetX'),
+            shadowOffsetY: labelModel.get('shadowOffsetY')
+        },
+        // Lable should be over axisPointer.
+        z2: 10
+    };
+}
+
+// Do not overflow ec container
+function confineInContainer(position, width, height, api) {
+    var viewWidth = api.getWidth();
+    var viewHeight = api.getHeight();
+    position[0] = Math.min(position[0] + width, viewWidth) - width;
+    position[1] = Math.min(position[1] + height, viewHeight) - height;
+    position[0] = Math.max(position[0], 0);
+    position[1] = Math.max(position[1], 0);
+}
+
+/**
+ * @param {number} value
+ * @param {module:echarts/coord/Axis} axis
+ * @param {module:echarts/model/Global} ecModel
+ * @param {Object} opt
+ * @param {Array.<Object>} seriesDataIndices
+ * @param {number|string} opt.precision 'auto' or a number
+ * @param {string|Function} opt.formatter label formatter
+ */
+function getValueLabel(value, axis, ecModel, seriesDataIndices, opt) {
+    value = axis.scale.parse(value);
+    var text = axis.scale.getLabel(
+        // If `precision` is set, width can be fixed (like '12.00500'), which
+        // helps to debounce when when moving label.
+        value, {precision: opt.precision}
+    );
+    var formatter = opt.formatter;
+
+    if (formatter) {
+        var params = {
+            value: getAxisRawValue(axis, value),
+            seriesData: []
+        };
+        each$1(seriesDataIndices, function (idxItem) {
+            var series = ecModel.getSeriesByIndex(idxItem.seriesIndex);
+            var dataIndex = idxItem.dataIndexInside;
+            var dataParams = series && series.getDataParams(dataIndex);
+            dataParams && params.seriesData.push(dataParams);
+        });
+
+        if (isString(formatter)) {
+            text = formatter.replace('{value}', text);
+        }
+        else if (isFunction$1(formatter)) {
+            text = formatter(params);
+        }
+    }
+
+    return text;
+}
+
+/**
+ * @param {module:echarts/coord/Axis} axis
+ * @param {number} value
+ * @param {Object} layoutInfo {
+ *  rotation, position, labelOffset, labelDirection, labelMargin
+ * }
+ */
+function getTransformedPosition (axis, value, layoutInfo) {
+    var transform = create$1();
+    rotate(transform, transform, layoutInfo.rotation);
+    translate(transform, transform, layoutInfo.position);
+
+    return applyTransform$1([
+        axis.dataToCoord(value),
+        (layoutInfo.labelOffset || 0)
+            + (layoutInfo.labelDirection || 1) * (layoutInfo.labelMargin || 0)
+    ], transform);
+}
+
+function buildCartesianSingleLabelElOption(
+    value, elOption, layoutInfo, axisModel, axisPointerModel, api
+) {
+    var textLayout = AxisBuilder.innerTextLayout(
+        layoutInfo.rotation, 0, layoutInfo.labelDirection
+    );
+    layoutInfo.labelMargin = axisPointerModel.get('label.margin');
+    buildLabelElOption(elOption, axisModel, axisPointerModel, api, {
+        position: getTransformedPosition(axisModel.axis, value, layoutInfo),
+        align: textLayout.textAlign,
+        verticalAlign: textLayout.textVerticalAlign
+    });
+}
+
+/**
+ * @param {Array.<number>} p1
+ * @param {Array.<number>} p2
+ * @param {number} [xDimIndex=0] or 1
+ */
+function makeLineShape(p1, p2, xDimIndex) {
+    xDimIndex = xDimIndex || 0;
+    return {
+        x1: p1[xDimIndex],
+        y1: p1[1 - xDimIndex],
+        x2: p2[xDimIndex],
+        y2: p2[1 - xDimIndex]
+    };
+}
+
+/**
+ * @param {Array.<number>} xy
+ * @param {Array.<number>} wh
+ * @param {number} [xDimIndex=0] or 1
+ */
+function makeRectShape(xy, wh, xDimIndex) {
+    xDimIndex = xDimIndex || 0;
+    return {
+        x: xy[xDimIndex],
+        y: xy[1 - xDimIndex],
+        width: wh[xDimIndex],
+        height: wh[1 - xDimIndex]
+    };
+}
+
+function makeSectorShape(cx, cy, r0, r, startAngle, endAngle) {
+    return {
+        cx: cx,
+        cy: cy,
+        r0: r0,
+        r: r,
+        startAngle: startAngle,
+        endAngle: endAngle,
+        clockwise: true
+    };
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var CartesianAxisPointer = BaseAxisPointer.extend({
+
+    /**
+     * @override
+     */
+    makeElOption: function (elOption, value, axisModel, axisPointerModel, api) {
+        var axis = axisModel.axis;
+        var grid = axis.grid;
+        var axisPointerType = axisPointerModel.get('type');
+        var otherExtent = getCartesian(grid, axis).getOtherAxis(axis).getGlobalExtent();
+        var pixelValue = axis.toGlobalCoord(axis.dataToCoord(value, true));
+
+        if (axisPointerType && axisPointerType !== 'none') {
+            var elStyle = buildElStyle(axisPointerModel);
+            var pointerOption = pointerShapeBuilder[axisPointerType](
+                axis, pixelValue, otherExtent, elStyle
+            );
+            pointerOption.style = elStyle;
+            elOption.graphicKey = pointerOption.type;
+            elOption.pointer = pointerOption;
+        }
+
+        var layoutInfo = layout$1(grid.model, axisModel);
+        buildCartesianSingleLabelElOption(
+            value, elOption, layoutInfo, axisModel, axisPointerModel, api
+        );
+    },
+
+    /**
+     * @override
+     */
+    getHandleTransform: function (value, axisModel, axisPointerModel) {
+        var layoutInfo = layout$1(axisModel.axis.grid.model, axisModel, {
+            labelInside: false
+        });
+        layoutInfo.labelMargin = axisPointerModel.get('handle.margin');
+        return {
+            position: getTransformedPosition(axisModel.axis, value, layoutInfo),
+            rotation: layoutInfo.rotation + (layoutInfo.labelDirection < 0 ? Math.PI : 0)
+        };
+    },
+
+    /**
+     * @override
+     */
+    updateHandleTransform: function (transform, delta, axisModel, axisPointerModel) {
+        var axis = axisModel.axis;
+        var grid = axis.grid;
+        var axisExtent = axis.getGlobalExtent(true);
+        var otherExtent = getCartesian(grid, axis).getOtherAxis(axis).getGlobalExtent();
+        var dimIndex = axis.dim === 'x' ? 0 : 1;
+
+        var currPosition = transform.position;
+        currPosition[dimIndex] += delta[dimIndex];
+        currPosition[dimIndex] = Math.min(axisExtent[1], currPosition[dimIndex]);
+        currPosition[dimIndex] = Math.max(axisExtent[0], currPosition[dimIndex]);
+
+        var cursorOtherValue = (otherExtent[1] + otherExtent[0]) / 2;
+        var cursorPoint = [cursorOtherValue, cursorOtherValue];
+        cursorPoint[dimIndex] = currPosition[dimIndex];
+
+        // Make tooltip do not overlap axisPointer and in the middle of the grid.
+        var tooltipOptions = [{verticalAlign: 'middle'}, {align: 'center'}];
+
+        return {
+            position: currPosition,
+            rotation: transform.rotation,
+            cursorPoint: cursorPoint,
+            tooltipOption: tooltipOptions[dimIndex]
+        };
+    }
+
+});
+
+function getCartesian(grid, axis) {
+    var opt = {};
+    opt[axis.dim + 'AxisIndex'] = axis.index;
+    return grid.getCartesian(opt);
+}
+
+var pointerShapeBuilder = {
+
+    line: function (axis, pixelValue, otherExtent, elStyle) {
+        var targetShape = makeLineShape(
+            [pixelValue, otherExtent[0]],
+            [pixelValue, otherExtent[1]],
+            getAxisDimIndex(axis)
+        );
+        subPixelOptimizeLine({
+            shape: targetShape,
+            style: elStyle
+        });
+        return {
+            type: 'Line',
+            shape: targetShape
+        };
+    },
+
+    shadow: function (axis, pixelValue, otherExtent, elStyle) {
+        var bandWidth = Math.max(1, axis.getBandWidth());
+        var span = otherExtent[1] - otherExtent[0];
+        return {
+            type: 'Rect',
+            shape: makeRectShape(
+                [pixelValue - bandWidth / 2, otherExtent[0]],
+                [bandWidth, span],
+                getAxisDimIndex(axis)
+            )
+        };
+    }
+};
+
+function getAxisDimIndex(axis) {
+    return axis.dim === 'x' ? 0 : 1;
+}
+
+AxisView.registerAxisPointerClass('CartesianAxisPointer', CartesianAxisPointer);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// CartesianAxisPointer is not supposed to be required here. But consider
+// echarts.simple.js and online build tooltip, which only require gridSimple,
+// CartesianAxisPointer should be able to required somewhere.
+registerPreprocessor(function (option) {
+    // Always has a global axisPointerModel for default setting.
+    if (option) {
+        (!option.axisPointer || option.axisPointer.length === 0)
+            && (option.axisPointer = {});
+
+        var link = option.axisPointer.link;
+        // Normalize to array to avoid object mergin. But if link
+        // is not set, remain null/undefined, otherwise it will
+        // override existent link setting.
+        if (link && !isArray(link)) {
+            option.axisPointer.link = [link];
+        }
+    }
+});
+
+// This process should proformed after coordinate systems created
+// and series data processed. So put it on statistic processing stage.
+registerProcessor(PRIORITY.PROCESSOR.STATISTIC, function (ecModel, api) {
+    // Build axisPointerModel, mergin tooltip.axisPointer model for each axis.
+    // allAxesInfo should be updated when setOption performed.
+    ecModel.getComponent('axisPointer').coordSysAxesInfo
+        = collect(ecModel, api);
+});
+
+// Broadcast to all views.
+registerAction({
+    type: 'updateAxisPointer',
+    event: 'updateAxisPointer',
+    update: ':updateAxisPointer'
+}, axisTrigger);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var XY = ['x', 'y'];
+var WH = ['width', 'height'];
+
+var SingleAxisPointer = BaseAxisPointer.extend({
+
+    /**
+     * @override
+     */
+    makeElOption: function (elOption, value, axisModel, axisPointerModel, api) {
+        var axis = axisModel.axis;
+        var coordSys = axis.coordinateSystem;
+        var otherExtent = getGlobalExtent(coordSys, 1 - getPointDimIndex(axis));
+        var pixelValue = coordSys.dataToPoint(value)[0];
+
+        var axisPointerType = axisPointerModel.get('type');
+        if (axisPointerType && axisPointerType !== 'none') {
+            var elStyle = buildElStyle(axisPointerModel);
+            var pointerOption = pointerShapeBuilder$1[axisPointerType](
+                axis, pixelValue, otherExtent, elStyle
+            );
+            pointerOption.style = elStyle;
+
+            elOption.graphicKey = pointerOption.type;
+            elOption.pointer = pointerOption;
+        }
+
+        var layoutInfo = layout$2(axisModel);
+        buildCartesianSingleLabelElOption(
+            value, elOption, layoutInfo, axisModel, axisPointerModel, api
+        );
+    },
+
+    /**
+     * @override
+     */
+    getHandleTransform: function (value, axisModel, axisPointerModel) {
+        var layoutInfo = layout$2(axisModel, {labelInside: false});
+        layoutInfo.labelMargin = axisPointerModel.get('handle.margin');
+        return {
+            position: getTransformedPosition(axisModel.axis, value, layoutInfo),
+            rotation: layoutInfo.rotation + (layoutInfo.labelDirection < 0 ? Math.PI : 0)
+        };
+    },
+
+    /**
+     * @override
+     */
+    updateHandleTransform: function (transform, delta, axisModel, axisPointerModel) {
+        var axis = axisModel.axis;
+        var coordSys = axis.coordinateSystem;
+        var dimIndex = getPointDimIndex(axis);
+        var axisExtent = getGlobalExtent(coordSys, dimIndex);
+        var currPosition = transform.position;
+        currPosition[dimIndex] += delta[dimIndex];
+        currPosition[dimIndex] = Math.min(axisExtent[1], currPosition[dimIndex]);
+        currPosition[dimIndex] = Math.max(axisExtent[0], currPosition[dimIndex]);
+        var otherExtent = getGlobalExtent(coordSys, 1 - dimIndex);
+        var cursorOtherValue = (otherExtent[1] + otherExtent[0]) / 2;
+        var cursorPoint = [cursorOtherValue, cursorOtherValue];
+        cursorPoint[dimIndex] = currPosition[dimIndex];
+
+        return {
+            position: currPosition,
+            rotation: transform.rotation,
+            cursorPoint: cursorPoint,
+            tooltipOption: {
+                verticalAlign: 'middle'
+            }
+        };
+    }
+});
+
+var pointerShapeBuilder$1 = {
+
+    line: function (axis, pixelValue, otherExtent, elStyle) {
+        var targetShape = makeLineShape(
+            [pixelValue, otherExtent[0]],
+            [pixelValue, otherExtent[1]],
+            getPointDimIndex(axis)
+        );
+        subPixelOptimizeLine({
+            shape: targetShape,
+            style: elStyle
+        });
+        return {
+            type: 'Line',
+            shape: targetShape
+        };
+    },
+
+    shadow: function (axis, pixelValue, otherExtent, elStyle) {
+        var bandWidth = axis.getBandWidth();
+        var span = otherExtent[1] - otherExtent[0];
+        return {
+            type: 'Rect',
+            shape: makeRectShape(
+                [pixelValue - bandWidth / 2, otherExtent[0]],
+                [bandWidth, span],
+                getPointDimIndex(axis)
+            )
+        };
+    }
+};
+
+function getPointDimIndex(axis) {
+    return axis.isHorizontal() ? 0 : 1;
+}
+
+function getGlobalExtent(coordSys, dimIndex) {
+    var rect = coordSys.getRect();
+    return [rect[XY[dimIndex]], rect[XY[dimIndex]] + rect[WH[dimIndex]]];
+}
+
+AxisView.registerAxisPointerClass('SingleAxisPointer', SingleAxisPointer);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+extendComponentView({
+    type: 'single'
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @file  Define the themeRiver view's series model
+ * @author Deqing Li(annong035@gmail.com)
+ */
+
+var DATA_NAME_INDEX = 2;
+
+var ThemeRiverSeries = SeriesModel.extend({
+
+    type: 'series.themeRiver',
+
+    dependencies: ['singleAxis'],
+
+    /**
+     * @readOnly
+     * @type {module:zrender/core/util#HashMap}
+     */
+    nameMap: null,
+
+    /**
+     * @override
+     */
+    init: function (option) {
+        ThemeRiverSeries.superApply(this, 'init', arguments);
+
+        // Put this function here is for the sake of consistency of code style.
+        // Enable legend selection for each data item
+        // Use a function instead of direct access because data reference may changed
+        this.legendDataProvider = function () {
+            return this.getRawData();
+        };
+    },
+
+    /**
+     * If there is no value of a certain point in the time for some event,set it value to 0.
+     *
+     * @param {Array} data  initial data in the option
+     * @return {Array}
+     */
+    fixData: function (data) {
+        var rawDataLength = data.length;
+
+        // grouped data by name
+        var dataByName = nest()
+            .key(function (dataItem) {
+                return dataItem[2];
+            })
+            .entries(data);
+
+        // data group in each layer
+        var layData = map(dataByName, function (d) {
+            return {
+                name: d.key,
+                dataList: d.values
+            };
+        });
+
+        var layerNum = layData.length;
+        var largestLayer = -1;
+        var index = -1;
+        for (var i = 0; i < layerNum; ++i) {
+            var len = layData[i].dataList.length;
+            if (len > largestLayer) {
+                largestLayer = len;
+                index = i;
+            }
+        }
+
+        for (var k = 0; k < layerNum; ++k) {
+            if (k === index) {
+                continue;
+            }
+            var name = layData[k].name;
+            for (var j = 0; j < largestLayer; ++j) {
+                var timeValue = layData[index].dataList[j][0];
+                var length = layData[k].dataList.length;
+                var keyIndex = -1;
+                for (var l = 0; l < length; ++l) {
+                    var value = layData[k].dataList[l][0];
+                    if (value === timeValue) {
+                        keyIndex = l;
+                        break;
+                    }
+                }
+                if (keyIndex === -1) {
+                    data[rawDataLength] = [];
+                    data[rawDataLength][0] = timeValue;
+                    data[rawDataLength][1] = 0;
+                    data[rawDataLength][2] = name;
+                    rawDataLength++;
+
+                }
+            }
+        }
+        return data;
+    },
+
+    /**
+     * @override
+     * @param  {Object} option  the initial option that user gived
+     * @param  {module:echarts/model/Model} ecModel  the model object for themeRiver option
+     * @return {module:echarts/data/List}
+     */
+    getInitialData: function (option, ecModel) {
+
+        var singleAxisModel = ecModel.queryComponents({
+            mainType: 'singleAxis',
+            index: this.get('singleAxisIndex'),
+            id: this.get('singleAxisId')
+        })[0];
+
+        var axisType = singleAxisModel.get('type');
+
+        // filter the data item with the value of label is undefined
+        var filterData = filter(option.data, function (dataItem) {
+            return dataItem[2] !== undefined;
+        });
+
+        // ??? TODO design a stage to transfer data for themeRiver and lines?
+        var data = this.fixData(filterData || []);
+        var nameList = [];
+        var nameMap = this.nameMap = createHashMap();
+        var count = 0;
+
+        for (var i = 0; i < data.length; ++i) {
+            nameList.push(data[i][DATA_NAME_INDEX]);
+            if (!nameMap.get(data[i][DATA_NAME_INDEX])) {
+                nameMap.set(data[i][DATA_NAME_INDEX], count);
+                count++;
+            }
+        }
+
+        var dimensionsInfo = createDimensions(data, {
+            coordDimensions: ['single'],
+            dimensionsDefine: [
+                {
+                    name: 'time',
+                    type: getDimensionTypeByAxis(axisType)
+                },
+                {
+                    name: 'value',
+                    type: 'float'
+                },
+                {
+                    name: 'name',
+                    type: 'ordinal'
+                }
+            ],
+            encodeDefine: {
+                single: 0,
+                value: 1,
+                itemName: 2
+            }
+        });
+
+        var list = new List(dimensionsInfo, this);
+        list.initData(data);
+
+        return list;
+    },
+
+    /**
+     * The raw data is divided into multiple layers and each layer
+     *     has same name.
+     *
+     * @return {Array.<Array.<number>>}
+     */
+    getLayerSeries: function () {
+        var data = this.getData();
+        var lenCount = data.count();
+        var indexArr = [];
+
+        for (var i = 0; i < lenCount; ++i) {
+            indexArr[i] = i;
+        }
+        // data group by name
+        var dataByName = nest()
+            .key(function (index) {
+                return data.get('name', index);
+            })
+            .entries(indexArr);
+
+        var layerSeries = map(dataByName, function (d) {
+            return {
+                name: d.key,
+                indices: d.values
+            };
+        });
+
+        var timeDim = data.mapDimension('single');
+
+        for (var j = 0; j < layerSeries.length; ++j) {
+            layerSeries[j].indices.sort(comparer);
+        }
+
+        function comparer(index1, index2) {
+            return data.get(timeDim, index1) - data.get(timeDim, index2);
+        }
+
+        return layerSeries;
+    },
+
+    /**
+     * Get data indices for show tooltip content
+     *
+     * @param {Array.<string>|string} dim  single coordinate dimension
+     * @param {number} value axis value
+     * @param {module:echarts/coord/single/SingleAxis} baseAxis  single Axis used
+     *     the themeRiver.
+     * @return {Object} {dataIndices, nestestValue}
+     */
+    getAxisTooltipData: function (dim, value, baseAxis) {
+        if (!isArray(dim)) {
+            dim = dim ? [dim] : [];
+        }
+
+        var data = this.getData();
+        var layerSeries = this.getLayerSeries();
+        var indices = [];
+        var layerNum = layerSeries.length;
+        var nestestValue;
+
+        for (var i = 0; i < layerNum; ++i) {
+            var minDist = Number.MAX_VALUE;
+            var nearestIdx = -1;
+            var pointNum = layerSeries[i].indices.length;
+            for (var j = 0; j < pointNum; ++j) {
+                var theValue = data.get(dim[0], layerSeries[i].indices[j]);
+                var dist = Math.abs(theValue - value);
+                if (dist <= minDist) {
+                    nestestValue = theValue;
+                    minDist = dist;
+                    nearestIdx = layerSeries[i].indices[j];
+                }
+            }
+            indices.push(nearestIdx);
+        }
+
+        return {dataIndices: indices, nestestValue: nestestValue};
+    },
+
+    /**
+     * @override
+     * @param {number} dataIndex  index of data
+     */
+    formatTooltip: function (dataIndex) {
+        var data = this.getData();
+        var htmlName = data.getName(dataIndex);
+        var htmlValue = data.get(data.mapDimension('value'), dataIndex);
+        if (isNaN(htmlValue) || htmlValue == null) {
+            htmlValue = '-';
+        }
+        return encodeHTML(htmlName + ' : ' + htmlValue);
+    },
+
+    defaultOption: {
+        zlevel: 0,
+        z: 2,
+
+        coordinateSystem: 'singleAxis',
+
+        // gap in axis's orthogonal orientation
+        boundaryGap: ['10%', '10%'],
+
+        // legendHoverLink: true,
+
+        singleAxisIndex: 0,
+
+        animationEasing: 'linear',
+
+        label: {
+            margin: 4,
+            show: true,
+            position: 'left',
+            color: '#000',
+            fontSize: 11
+        },
+
+        emphasis: {
+            label: {
+                show: true
+            }
+        }
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @file  The file used to draw themeRiver view
+ * @author  Deqing Li(annong035@gmail.com)
+ */
+
+extendChartView({
+
+    type: 'themeRiver',
+
+    init: function () {
+        this._layers = [];
+    },
+
+    render: function (seriesModel, ecModel, api) {
+        var data = seriesModel.getData();
+
+        var group = this.group;
+
+        var layerSeries = seriesModel.getLayerSeries();
+
+        var layoutInfo = data.getLayout('layoutInfo');
+        var rect = layoutInfo.rect;
+        var boundaryGap = layoutInfo.boundaryGap;
+
+        group.attr('position', [0, rect.y + boundaryGap[0]]);
+
+        function keyGetter(item) {
+            return item.name;
+        }
+        var dataDiffer = new DataDiffer(
+            this._layersSeries || [], layerSeries,
+            keyGetter, keyGetter
+        );
+
+        var newLayersGroups = {};
+
+        dataDiffer
+            .add(bind(process, this, 'add'))
+            .update(bind(process, this, 'update'))
+            .remove(bind(process, this, 'remove'))
+            .execute();
+
+        function process(status, idx, oldIdx) {
+            var oldLayersGroups = this._layers;
+            if (status === 'remove') {
+                group.remove(oldLayersGroups[idx]);
+                return;
+            }
+            var points0 = [];
+            var points1 = [];
+            var color;
+            var indices = layerSeries[idx].indices;
+            for (var j = 0; j < indices.length; j++) {
+                var layout = data.getItemLayout(indices[j]);
+                var x = layout.x;
+                var y0 = layout.y0;
+                var y = layout.y;
+
+                points0.push([x, y0]);
+                points1.push([x, y0 + y]);
+
+                color = data.getItemVisual(indices[j], 'color');
+            }
+
+            var polygon;
+            var text;
+            var textLayout = data.getItemLayout(indices[0]);
+            var itemModel = data.getItemModel(indices[j - 1]);
+            var labelModel = itemModel.getModel('label');
+            var margin = labelModel.get('margin');
+            if (status === 'add') {
+                var layerGroup = newLayersGroups[idx] = new Group();
+                polygon = new Polygon$1({
+                    shape: {
+                        points: points0,
+                        stackedOnPoints: points1,
+                        smooth: 0.4,
+                        stackedOnSmooth: 0.4,
+                        smoothConstraint: false
+                    },
+                    z2: 0
+                });
+                text = new Text({
+                    style: {
+                        x: textLayout.x - margin,
+                        y: textLayout.y0 + textLayout.y / 2
+                    }
+                });
+                layerGroup.add(polygon);
+                layerGroup.add(text);
+                group.add(layerGroup);
+
+                polygon.setClipPath(createGridClipShape$3(polygon.getBoundingRect(), seriesModel, function () {
+                    polygon.removeClipPath();
+                }));
+            }
+            else {
+                var layerGroup = oldLayersGroups[oldIdx];
+                polygon = layerGroup.childAt(0);
+                text = layerGroup.childAt(1);
+                group.add(layerGroup);
+
+                newLayersGroups[idx] = layerGroup;
+
+                updateProps(polygon, {
+                    shape: {
+                        points: points0,
+                        stackedOnPoints: points1
+                    }
+                }, seriesModel);
+
+                updateProps(text, {
+                    style: {
+                        x: textLayout.x - margin,
+                        y: textLayout.y0 + textLayout.y / 2
+                    }
+                }, seriesModel);
+            }
+
+            var hoverItemStyleModel = itemModel.getModel('emphasis.itemStyle');
+            var itemStyleModel = itemModel.getModel('itemStyle');
+
+            setTextStyle(text.style, labelModel, {
+                text: labelModel.get('show')
+                    ? seriesModel.getFormattedLabel(indices[j - 1], 'normal')
+                        || data.getName(indices[j - 1])
+                    : null,
+                textVerticalAlign: 'middle'
+            });
+
+            polygon.setStyle(extend({
+                fill: color
+            }, itemStyleModel.getItemStyle(['color'])));
+
+            setHoverStyle(polygon, hoverItemStyleModel.getItemStyle());
+        }
+
+        this._layersSeries = layerSeries;
+        this._layers = newLayersGroups;
+    },
+
+    dispose: function () {}
+});
+
+// add animation to the view
+function createGridClipShape$3(rect, seriesModel, cb) {
+    var rectEl = new Rect({
+        shape: {
+            x: rect.x - 10,
+            y: rect.y - 10,
+            width: 0,
+            height: rect.height + 20
+        }
+    });
+    initProps(rectEl, {
+        shape: {
+            width: rect.width + 20,
+            height: rect.height + 20
+        }
+    }, seriesModel, cb);
+
+    return rectEl;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @file  Using layout algorithm transform the raw data to layout information.
+ * @author Deqing Li(annong035@gmail.com)
+ */
+
+var themeRiverLayout = function (ecModel, api) {
+
+    ecModel.eachSeriesByType('themeRiver', function (seriesModel) {
+
+        var data = seriesModel.getData();
+
+        var single = seriesModel.coordinateSystem;
+
+        var layoutInfo = {};
+
+        // use the axis boundingRect for view
+        var rect = single.getRect();
+
+        layoutInfo.rect = rect;
+
+        var boundaryGap = seriesModel.get('boundaryGap');
+
+        var axis = single.getAxis();
+
+        layoutInfo.boundaryGap = boundaryGap;
+
+        if (axis.orient === 'horizontal') {
+            boundaryGap[0] = parsePercent$1(boundaryGap[0], rect.height);
+            boundaryGap[1] = parsePercent$1(boundaryGap[1], rect.height);
+            var height = rect.height - boundaryGap[0] - boundaryGap[1];
+            themeRiverLayout$1(data, seriesModel, height);
+        }
+        else {
+            boundaryGap[0] = parsePercent$1(boundaryGap[0], rect.width);
+            boundaryGap[1] = parsePercent$1(boundaryGap[1], rect.width);
+            var width = rect.width - boundaryGap[0] - boundaryGap[1];
+            themeRiverLayout$1(data, seriesModel, width);
+        }
+
+        data.setLayout('layoutInfo', layoutInfo);
+    });
+};
+
+/**
+ * The layout information about themeriver
+ *
+ * @param {module:echarts/data/List} data  data in the series
+ * @param {module:echarts/model/Series} seriesModel  the model object of themeRiver series
+ * @param {number} height  value used to compute every series height
+ */
+function themeRiverLayout$1(data, seriesModel, height) {
+    if (!data.count()) {
+        return;
+    }
+    var coordSys = seriesModel.coordinateSystem;
+    // the data in each layer are organized into a series.
+    var layerSeries = seriesModel.getLayerSeries();
+
+    // the points in each layer.
+    var timeDim = data.mapDimension('single');
+    var valueDim = data.mapDimension('value');
+    var layerPoints = map(layerSeries, function (singleLayer) {
+        return map(singleLayer.indices, function (idx) {
+            var pt = coordSys.dataToPoint(data.get(timeDim, idx));
+            pt[1] = data.get(valueDim, idx);
+            return pt;
+        });
+    });
+
+    var base = computeBaseline(layerPoints);
+    var baseLine = base.y0;
+    var ky = height / base.max;
+
+    // set layout information for each item.
+    var n = layerSeries.length;
+    var m = layerSeries[0].indices.length;
+    var baseY0;
+    for (var j = 0; j < m; ++j) {
+        baseY0 = baseLine[j] * ky;
+        data.setItemLayout(layerSeries[0].indices[j], {
+            layerIndex: 0,
+            x: layerPoints[0][j][0],
+            y0: baseY0,
+            y: layerPoints[0][j][1] * ky
+        });
+        for (var i = 1; i < n; ++i) {
+            baseY0 += layerPoints[i - 1][j][1] * ky;
+            data.setItemLayout(layerSeries[i].indices[j], {
+                layerIndex: i,
+                x: layerPoints[i][j][0],
+                y0: baseY0,
+                y: layerPoints[i][j][1] * ky
+            });
+        }
+    }
+}
+
+/**
+ * Compute the baseLine of the rawdata
+ * Inspired by Lee Byron's paper Stacked Graphs - Geometry & Aesthetics
+ *
+ * @param  {Array.<Array>} data  the points in each layer
+ * @return {Object}
+ */
+function computeBaseline(data) {
+    var layerNum = data.length;
+    var pointNum = data[0].length;
+    var sums = [];
+    var y0 = [];
+    var max = 0;
+    var temp;
+    var base = {};
+
+    for (var i = 0; i < pointNum; ++i) {
+        for (var j = 0, temp = 0; j < layerNum; ++j) {
+            temp += data[j][i][1];
+        }
+        if (temp > max) {
+            max = temp;
+        }
+        sums.push(temp);
+    }
+
+    for (var k = 0; k < pointNum; ++k) {
+        y0[k] = (max - sums[k]) / 2;
+    }
+    max = 0;
+
+    for (var l = 0; l < pointNum; ++l) {
+        var sum = sums[l] + y0[l];
+        if (sum > max) {
+            max = sum;
+        }
+    }
+    base.y0 = y0;
+    base.max = max;
+
+    return base;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @file Visual encoding for themeRiver view
+ * @author  Deqing Li(annong035@gmail.com)
+ */
+
+var themeRiverVisual = function (ecModel) {
+    ecModel.eachSeriesByType('themeRiver', function (seriesModel) {
+        var data = seriesModel.getData();
+        var rawData = seriesModel.getRawData();
+        var colorList = seriesModel.get('color');
+        var idxMap = createHashMap();
+
+        data.each(function (idx) {
+            idxMap.set(data.getRawIndex(idx), idx);
+        });
+
+        rawData.each(function (rawIndex) {
+            var name = rawData.getName(rawIndex);
+            var color = colorList[(seriesModel.nameMap.get(name) - 1) % colorList.length];
+
+            rawData.setItemVisual(rawIndex, 'color', color);
+
+            var idx = idxMap.get(rawIndex);
+
+            if (idx != null) {
+                data.setItemVisual(idx, 'color', color);
+            }
+        });
+    });
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+registerLayout(themeRiverLayout);
+registerVisual(themeRiverVisual);
+registerProcessor(dataFilter('themeRiver'));
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+SeriesModel.extend({
+
+    type: 'series.sunburst',
+
+    /**
+     * @type {module:echarts/data/Tree~Node}
+     */
+    _viewRoot: null,
+
+    getInitialData: function (option, ecModel) {
+        // Create a virtual root.
+        var root = { name: option.name, children: option.data };
+
+        completeTreeValue$1(root);
+
+        var levels = option.levels || [];
+
+        // levels = option.levels = setDefault(levels, ecModel);
+
+        var treeOption = {};
+
+        treeOption.levels = levels;
+
+        // Make sure always a new tree is created when setOption,
+        // in TreemapView, we check whether oldTree === newTree
+        // to choose mappings approach among old shapes and new shapes.
+        return Tree.createTree(root, this, treeOption).data;
+    },
+
+    optionUpdated: function () {
+        this.resetViewRoot();
+    },
+
+    /*
+     * @override
+     */
+    getDataParams: function (dataIndex) {
+        var params = SeriesModel.prototype.getDataParams.apply(this, arguments);
+
+        var node = this.getData().tree.getNodeByDataIndex(dataIndex);
+        params.treePathInfo = wrapTreePathInfo(node, this);
+
+        return params;
+    },
+
+    defaultOption: {
+        zlevel: 0,
+        z: 2,
+
+        // é»˜è®¤å…¨å±€å±…ä¸
+        center: ['50%', '50%'],
+        radius: [0, '75%'],
+        // é»˜è®¤é¡ºæ—¶é’ˆ
+        clockwise: true,
+        startAngle: 90,
+        // æœ€å°è§’åº¦æ”¹ä¸º0
+        minAngle: 0,
+
+        percentPrecision: 2,
+
+        // If still show when all data zero.
+        stillShowZeroSum: true,
+
+        // Policy of highlighting pieces when hover on one
+        // Valid values: 'none' (for not downplay others), 'descendant',
+        // 'ancestor', 'self'
+        highlightPolicy: 'descendant',
+
+        // 'rootToNode', 'link', or false
+        nodeClick: 'rootToNode',
+
+        renderLabelForZeroData: false,
+
+        label: {
+            // could be: 'radial', 'tangential', or 'none'
+            rotate: 'radial',
+            show: true,
+            opacity: 1,
+            // 'left' is for inner side of inside, and 'right' is for outter
+            // side for inside
+            align: 'center',
+            position: 'inside',
+            distance: 5,
+            silent: true,
+            emphasis: {}
+        },
+        itemStyle: {
+            borderWidth: 1,
+            borderColor: 'white',
+            opacity: 1,
+            emphasis: {},
+            highlight: {
+                opacity: 1
+            },
+            downplay: {
+                opacity: 0.9
+            }
+        },
+
+        // Animation type canbe expansion, scale
+        animationType: 'expansion',
+        animationDuration: 1000,
+        animationDurationUpdate: 500,
+        animationEasing: 'cubicOut',
+
+        data: [],
+
+        levels: [],
+
+        /**
+         * Sort order.
+         *
+         * Valid values: 'desc', 'asc', null, or callback function.
+         * 'desc' and 'asc' for descend and ascendant order;
+         * null for not sorting;
+         * example of callback function:
+         * function(nodeA, nodeB) {
+         *     return nodeA.getValue() - nodeB.getValue();
+         * }
+         */
+        sort: 'desc'
+    },
+
+    getViewRoot: function () {
+        return this._viewRoot;
+    },
+
+    /**
+     * @param {module:echarts/data/Tree~Node} [viewRoot]
+     */
+    resetViewRoot: function (viewRoot) {
+        viewRoot
+            ? (this._viewRoot = viewRoot)
+            : (viewRoot = this._viewRoot);
+
+        var root = this.getRawData().tree.root;
+
+        if (!viewRoot
+            || (viewRoot !== root && !root.contains(viewRoot))
+        ) {
+            this._viewRoot = root;
+        }
+    }
+});
+
+
+
+/**
+ * @param {Object} dataNode
+ */
+function completeTreeValue$1(dataNode) {
+    // Postorder travel tree.
+    // If value of none-leaf node is not set,
+    // calculate it by suming up the value of all children.
+    var sum = 0;
+
+    each$1(dataNode.children, function (child) {
+
+        completeTreeValue$1(child);
+
+        var childValue = child.value;
+        isArray(childValue) && (childValue = childValue[0]);
+
+        sum += childValue;
+    });
+
+    var thisValue = dataNode.value;
+    if (isArray(thisValue)) {
+        thisValue = thisValue[0];
+    }
+
+    if (thisValue == null || isNaN(thisValue)) {
+        thisValue = sum;
+    }
+    // Value should not less than 0.
+    if (thisValue < 0) {
+        thisValue = 0;
+    }
+
+    isArray(dataNode.value)
+        ? (dataNode.value[0] = thisValue)
+        : (dataNode.value = thisValue);
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var NodeHighlightPolicy = {
+    NONE: 'none', // not downplay others
+    DESCENDANT: 'descendant',
+    ANCESTOR: 'ancestor',
+    SELF: 'self'
+};
+
+var DEFAULT_SECTOR_Z = 2;
+var DEFAULT_TEXT_Z = 4;
+
+/**
+ * Sunburstce of Sunburst including Sector, Label, LabelLine
+ * @constructor
+ * @extends {module:zrender/graphic/Group}
+ */
+function SunburstPiece(node, seriesModel, ecModel) {
+
+    Group.call(this);
+
+    var sector = new Sector({
+        z2: DEFAULT_SECTOR_Z
+    });
+    sector.seriesIndex = seriesModel.seriesIndex;
+
+    var text = new Text({
+        z2: DEFAULT_TEXT_Z,
+        silent: node.getModel('label').get('silent')
+    });
+    this.add(sector);
+    this.add(text);
+
+    this.updateData(true, node, 'normal', seriesModel, ecModel);
+
+    // Hover to change label and labelLine
+    function onEmphasis() {
+        text.ignore = text.hoverIgnore;
+    }
+    function onNormal() {
+        text.ignore = text.normalIgnore;
+    }
+    this.on('emphasis', onEmphasis)
+        .on('normal', onNormal)
+        .on('mouseover', onEmphasis)
+        .on('mouseout', onNormal);
+}
+
+var SunburstPieceProto = SunburstPiece.prototype;
+
+SunburstPieceProto.updateData = function (
+    firstCreate,
+    node,
+    state,
+    seriesModel,
+    ecModel
+) {
+    this.node = node;
+    node.piece = this;
+
+    seriesModel = seriesModel || this._seriesModel;
+    ecModel = ecModel || this._ecModel;
+
+    var sector = this.childAt(0);
+    sector.dataIndex = node.dataIndex;
+
+    var itemModel = node.getModel();
+    var layout = node.getLayout();
+    if (!layout) {
+        console.log(node.getLayout());
+    }
+    var sectorShape = extend({}, layout);
+    sectorShape.label = null;
+
+    var visualColor = getNodeColor(node, seriesModel, ecModel);
+
+    var normalStyle = itemModel.getModel('itemStyle').getItemStyle();
+    var style;
+    if (state === 'normal') {
+        style = normalStyle;
+    }
+    else {
+        var stateStyle = itemModel.getModel(state + '.itemStyle')
+            .getItemStyle();
+        style = merge(stateStyle, normalStyle);
+    }
+    style = defaults(
+        {
+            lineJoin: 'bevel',
+            fill: style.fill || visualColor
+        },
+        style
+    );
+
+    if (firstCreate) {
+        sector.setShape(sectorShape);
+        sector.shape.r = layout.r0;
+        updateProps(
+            sector,
+            {
+                shape: {
+                    r: layout.r
+                }
+            },
+            seriesModel,
+            node.dataIndex
+        );
+        sector.useStyle(style);
+    }
+    else if (typeof style.fill === 'object' && style.fill.type
+        || typeof sector.style.fill === 'object' && sector.style.fill.type
+    ) {
+        // Disable animation for gradient since no interpolation method
+        // is supported for gradient
+        updateProps(sector, {
+            shape: sectorShape
+        }, seriesModel);
+        sector.useStyle(style);
+    }
+    else {
+        updateProps(sector, {
+            shape: sectorShape,
+            style: style
+        }, seriesModel);
+    }
+
+    this._updateLabel(seriesModel, visualColor, state);
+
+    var cursorStyle = itemModel.getShallow('cursor');
+    cursorStyle && sector.attr('cursor', cursorStyle);
+
+    if (firstCreate) {
+        var highlightPolicy = seriesModel.getShallow('highlightPolicy');
+        this._initEvents(sector, node, seriesModel, highlightPolicy);
+    }
+
+    this._seriesModel = seriesModel || this._seriesModel;
+    this._ecModel = ecModel || this._ecModel;
+};
+
+SunburstPieceProto.onEmphasis = function (highlightPolicy) {
+    var that = this;
+    this.node.hostTree.root.eachNode(function (n) {
+        if (n.piece) {
+            if (that.node === n) {
+                n.piece.updateData(false, n, 'emphasis');
+            }
+            else if (isNodeHighlighted(n, that.node, highlightPolicy)) {
+                n.piece.childAt(0).trigger('highlight');
+            }
+            else if (highlightPolicy !== NodeHighlightPolicy.NONE) {
+                n.piece.childAt(0).trigger('downplay');
+            }
+        }
+    });
+};
+
+SunburstPieceProto.onNormal = function () {
+    this.node.hostTree.root.eachNode(function (n) {
+        if (n.piece) {
+            n.piece.updateData(false, n, 'normal');
+        }
+    });
+};
+
+SunburstPieceProto.onHighlight = function () {
+    this.updateData(false, this.node, 'highlight');
+};
+
+SunburstPieceProto.onDownplay = function () {
+    this.updateData(false, this.node, 'downplay');
+};
+
+SunburstPieceProto._updateLabel = function (seriesModel, visualColor, state) {
+    var itemModel = this.node.getModel();
+    var normalModel = itemModel.getModel('label');
+    var labelModel = state === 'normal' || state === 'emphasis'
+        ? normalModel
+        : itemModel.getModel(state + '.label');
+    var labelHoverModel = itemModel.getModel('emphasis.label');
+
+    var text = retrieve(
+        seriesModel.getFormattedLabel(
+            this.node.dataIndex, 'normal', null, null, 'label'
+        ),
+        this.node.name
+    );
+    if (getLabelAttr('show') === false) {
+        text = '';
+    }
+
+    var layout = this.node.getLayout();
+    var labelMinAngle = labelModel.get('minAngle');
+    if (labelMinAngle == null) {
+        labelMinAngle = normalModel.get('minAngle');
+    }
+    labelMinAngle = labelMinAngle / 180 * Math.PI;
+    var angle = layout.endAngle - layout.startAngle;
+    if (labelMinAngle != null && Math.abs(angle) < labelMinAngle) {
+        // Not displaying text when angle is too small
+        text = '';
+    }
+
+    var label = this.childAt(1);
+
+    setLabelStyle(
+        label.style, label.hoverStyle || {}, normalModel, labelHoverModel,
+        {
+            defaultText: labelModel.getShallow('show') ? text : null,
+            autoColor: visualColor,
+            useInsideStyle: true
+        }
+    );
+
+    var midAngle = (layout.startAngle + layout.endAngle) / 2;
+    var dx = Math.cos(midAngle);
+    var dy = Math.sin(midAngle);
+
+    var r;
+    var labelPosition = getLabelAttr('position');
+    var labelPadding = getLabelAttr('distance') || 0;
+    var textAlign = getLabelAttr('align');
+    if (labelPosition === 'outside') {
+        r = layout.r + labelPadding;
+        textAlign = midAngle > Math.PI / 2 ? 'right' : 'left';
+    }
+    else {
+        if (!textAlign || textAlign === 'center') {
+            r = (layout.r + layout.r0) / 2;
+            textAlign = 'center';
+        }
+        else if (textAlign === 'left') {
+            r = layout.r0 + labelPadding;
+            if (midAngle > Math.PI / 2) {
+                textAlign = 'right';
+            }
+        }
+        else if (textAlign === 'right') {
+            r = layout.r - labelPadding;
+            if (midAngle > Math.PI / 2) {
+                textAlign = 'left';
+            }
+        }
+    }
+
+    label.attr('style', {
+        text: text,
+        textAlign: textAlign,
+        textVerticalAlign: getLabelAttr('verticalAlign') || 'middle',
+        opacity: getLabelAttr('opacity')
+    });
+
+    var textX = r * dx + layout.cx;
+    var textY = r * dy + layout.cy;
+    label.attr('position', [textX, textY]);
+
+    var rotateType = getLabelAttr('rotate');
+    var rotate = 0;
+    if (rotateType === 'radial') {
+        rotate = -midAngle;
+        if (rotate < -Math.PI / 2) {
+            rotate += Math.PI;
+        }
+    }
+    else if (rotateType === 'tangential') {
+        rotate = Math.PI / 2 - midAngle;
+        if (rotate > Math.PI / 2) {
+            rotate -= Math.PI;
+        }
+        else if (rotate < -Math.PI / 2) {
+            rotate += Math.PI;
+        }
+    } else if (typeof rotateType === 'number') {
+        rotate = rotateType * Math.PI / 180;
+    }
+    label.attr('rotation', rotate);
+
+    function getLabelAttr(name) {
+        var stateAttr = labelModel.get(name);
+        if (stateAttr == null) {
+            return normalModel.get(name);
+        }
+        else {
+            return stateAttr;
+        }
+    }
+};
+
+SunburstPieceProto._initEvents = function (
+    sector,
+    node,
+    seriesModel,
+    highlightPolicy
+) {
+    sector.off('mouseover').off('mouseout').off('emphasis').off('normal');
+
+    var that = this;
+    var onEmphasis = function () {
+        that.onEmphasis(highlightPolicy);
+    };
+    var onNormal = function () {
+        that.onNormal();
+    };
+    var onDownplay = function () {
+        that.onDownplay();
+    };
+    var onHighlight = function () {
+        that.onHighlight();
+    };
+
+    if (seriesModel.isAnimationEnabled()) {
+        sector
+            .on('mouseover', onEmphasis)
+            .on('mouseout', onNormal)
+            .on('emphasis', onEmphasis)
+            .on('normal', onNormal)
+            .on('downplay', onDownplay)
+            .on('highlight', onHighlight);
+    }
+};
+
+inherits(SunburstPiece, Group);
+
+/**
+ * Get node color
+ *
+ * @param {TreeNode} node the node to get color
+ * @param {module:echarts/model/Series} seriesModel series
+ * @param {module:echarts/model/Global} ecModel echarts defaults
+ */
+function getNodeColor(node, seriesModel, ecModel) {
+    // Color from visualMap
+    var visualColor = node.getVisual('color');
+    var visualMetaList = node.getVisual('visualMeta');
+    if (!visualMetaList || visualMetaList.length === 0) {
+        // Use first-generation color if has no visualMap
+        visualColor = null;
+    }
+
+    // Self color or level color
+    var color = node.getModel('itemStyle').get('color');
+    if (color) {
+        return color;
+    }
+    else if (visualColor) {
+        // Color mapping
+        return visualColor;
+    }
+    else if (node.depth === 0) {
+        // Virtual root node
+        return ecModel.option.color[0];
+    }
+    else {
+        // First-generation color
+        var length = ecModel.option.color.length;
+        color = ecModel.option.color[getRootId(node) % length];
+    }
+    return color;
+}
+
+/**
+ * Get index of root in sorted order
+ *
+ * @param {TreeNode} node current node
+ * @return {number} index in root
+ */
+function getRootId(node) {
+    var ancestor = node;
+    while (ancestor.depth > 1) {
+        ancestor = ancestor.parentNode;
+    }
+
+    var virtualRoot = node.getAncestors()[0];
+    return indexOf(virtualRoot.children, ancestor);
+}
+
+function isNodeHighlighted(node, activeNode, policy) {
+    if (policy === NodeHighlightPolicy.NONE) {
+        return false;
+    }
+    else if (policy === NodeHighlightPolicy.SELF) {
+        return node === activeNode;
+    }
+    else if (policy === NodeHighlightPolicy.ANCESTOR) {
+        return node === activeNode || node.isAncestorOf(activeNode);
+    }
+    else {
+        return node === activeNode || node.isDescendantOf(activeNode);
+    }
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var ROOT_TO_NODE_ACTION = 'sunburstRootToNode';
+
+var SunburstView = Chart.extend({
+
+    type: 'sunburst',
+
+    init: function () {
+    },
+
+    render: function (seriesModel, ecModel, api, payload) {
+        var that = this;
+
+        this.seriesModel = seriesModel;
+        this.api = api;
+        this.ecModel = ecModel;
+
+        var data = seriesModel.getData();
+        var virtualRoot = data.tree.root;
+
+        var newRoot = seriesModel.getViewRoot();
+
+        var group = this.group;
+
+        var renderLabelForZeroData = seriesModel.get('renderLabelForZeroData');
+
+        var newChildren = [];
+        newRoot.eachNode(function (node) {
+            newChildren.push(node);
+        });
+        var oldChildren = this._oldChildren || [];
+
+        dualTravel(newChildren, oldChildren);
+
+        renderRollUp(virtualRoot, newRoot);
+
+        if (payload && payload.highlight && payload.highlight.piece) {
+            var highlightPolicy = seriesModel.getShallow('highlightPolicy');
+            payload.highlight.piece.onEmphasis(highlightPolicy);
+        }
+        else if (payload && payload.unhighlight) {
+            var piece = this.virtualPiece;
+            if (!piece && virtualRoot.children.length) {
+                piece = virtualRoot.children[0].piece;
+            }
+            if (piece) {
+                piece.onNormal();
+            }
+        }
+
+        this._initEvents();
+
+        this._oldChildren = newChildren;
+
+        function dualTravel(newChildren, oldChildren) {
+            if (newChildren.length === 0 && oldChildren.length === 0) {
+                return;
+            }
+
+            new DataDiffer(oldChildren, newChildren, getKey, getKey)
+                .add(processNode)
+                .update(processNode)
+                .remove(curry(processNode, null))
+                .execute();
+
+            function getKey(node) {
+                return node.getId();
+            }
+
+            function processNode(newId, oldId) {
+                var newNode = newId == null ? null : newChildren[newId];
+                var oldNode = oldId == null ? null : oldChildren[oldId];
+
+                doRenderNode(newNode, oldNode);
+            }
+        }
+
+        function doRenderNode(newNode, oldNode) {
+            if (!renderLabelForZeroData && newNode && !newNode.getValue()) {
+                // Not render data with value 0
+                newNode = null;
+            }
+
+            if (newNode !== virtualRoot && oldNode !== virtualRoot) {
+                if (oldNode && oldNode.piece) {
+                    if (newNode) {
+                        // Update
+                        oldNode.piece.updateData(
+                            false, newNode, 'normal', seriesModel, ecModel);
+
+                        // For tooltip
+                        data.setItemGraphicEl(newNode.dataIndex, oldNode.piece);
+                    }
+                    else {
+                        // Remove
+                        removeNode(oldNode);
+                    }
+                }
+                else if (newNode) {
+                    // Add
+                    var piece = new SunburstPiece(
+                        newNode,
+                        seriesModel,
+                        ecModel
+                    );
+                    group.add(piece);
+
+                    // For tooltip
+                    data.setItemGraphicEl(newNode.dataIndex, piece);
+                }
+            }
+        }
+
+        function removeNode(node) {
+            if (!node) {
+                return;
+            }
+
+            if (node.piece) {
+                group.remove(node.piece);
+                node.piece = null;
+            }
+        }
+
+        function renderRollUp(virtualRoot, viewRoot) {
+            if (viewRoot.depth > 0) {
+                // Render
+                if (that.virtualPiece) {
+                    // Update
+                    that.virtualPiece.updateData(
+                        false, virtualRoot, 'normal', seriesModel, ecModel);
+                }
+                else {
+                    // Add
+                    that.virtualPiece = new SunburstPiece(
+                        virtualRoot,
+                        seriesModel,
+                        ecModel
+                    );
+                    group.add(that.virtualPiece);
+                }
+
+                if (viewRoot.piece._onclickEvent) {
+                    viewRoot.piece.off('click', viewRoot.piece._onclickEvent);
+                }
+                var event = function (e) {
+                    that._rootToNode(viewRoot.parentNode);
+                };
+                viewRoot.piece._onclickEvent = event;
+                that.virtualPiece.on('click', event);
+            }
+            else if (that.virtualPiece) {
+                // Remove
+                group.remove(that.virtualPiece);
+                that.virtualPiece = null;
+            }
+        }
+    },
+
+    dispose: function () {
+    },
+
+    /**
+     * @private
+     */
+    _initEvents: function () {
+        var that = this;
+
+        var event = function (e) {
+            var targetFound = false;
+            var viewRoot = that.seriesModel.getViewRoot();
+            viewRoot.eachNode(function (node) {
+                if (!targetFound
+                    && node.piece && node.piece.childAt(0) === e.target
+                ) {
+                    var nodeClick = node.getModel().get('nodeClick');
+                    if (nodeClick === 'rootToNode') {
+                        that._rootToNode(node);
+                    }
+                    else if (nodeClick === 'link') {
+                        var itemModel = node.getModel();
+                        var link = itemModel.get('link');
+                        if (link) {
+                            var linkTarget = itemModel.get('target', true)
+                                || '_blank';
+                            window.open(link, linkTarget);
+                        }
+                    }
+                    targetFound = true;
+                }
+            });
+        };
+
+        if (this.group._onclickEvent) {
+            this.group.off('click', this.group._onclickEvent);
+        }
+        this.group.on('click', event);
+        this.group._onclickEvent = event;
+    },
+
+    /**
+     * @private
+     */
+    _rootToNode: function (node) {
+        if (node !== this.seriesModel.getViewRoot()) {
+            this.api.dispatchAction({
+                type: ROOT_TO_NODE_ACTION,
+                from: this.uid,
+                seriesId: this.seriesModel.id,
+                targetNode: node
+            });
+        }
+    },
+
+    /**
+     * @implement
+     */
+    containPoint: function (point, seriesModel) {
+        var treeRoot = seriesModel.getData();
+        var itemLayout = treeRoot.getItemLayout(0);
+        if (itemLayout) {
+            var dx = point[0] - itemLayout.cx;
+            var dy = point[1] - itemLayout.cy;
+            var radius = Math.sqrt(dx * dx + dy * dy);
+            return radius <= itemLayout.r && radius >= itemLayout.r0;
+        }
+    }
+
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @file Sunburst action
+ */
+
+var ROOT_TO_NODE_ACTION$1 = 'sunburstRootToNode';
+
+registerAction(
+    {type: ROOT_TO_NODE_ACTION$1, update: 'updateView'},
+    function (payload, ecModel) {
+
+        ecModel.eachComponent(
+            {mainType: 'series', subType: 'sunburst', query: payload},
+            handleRootToNode
+        );
+
+        function handleRootToNode(model, index) {
+            var targetInfo = retrieveTargetInfo(payload, [ROOT_TO_NODE_ACTION$1], model);
+
+            if (targetInfo) {
+                var originViewRoot = model.getViewRoot();
+                if (originViewRoot) {
+                    payload.direction = aboveViewRoot(originViewRoot, targetInfo.node)
+                        ? 'rollUp' : 'drillDown';
+                }
+                model.resetViewRoot(targetInfo.node);
+            }
+        }
+    }
+);
+
+
+var HIGHLIGHT_ACTION = 'sunburstHighlight';
+
+registerAction(
+    {type: HIGHLIGHT_ACTION, update: 'updateView'},
+    function (payload, ecModel) {
+
+        ecModel.eachComponent(
+            {mainType: 'series', subType: 'sunburst', query: payload},
+            handleHighlight
+        );
+
+        function handleHighlight(model, index) {
+            var targetInfo = retrieveTargetInfo(payload, [HIGHLIGHT_ACTION], model);
+
+            if (targetInfo) {
+                payload.highlight = targetInfo.node;
+            }
+        }
+    }
+);
+
+
+var UNHIGHLIGHT_ACTION = 'sunburstUnhighlight';
+
+registerAction(
+    {type: UNHIGHLIGHT_ACTION, update: 'updateView'},
+    function (payload, ecModel) {
+
+        ecModel.eachComponent(
+            {mainType: 'series', subType: 'sunburst', query: payload},
+            handleUnhighlight
+        );
+
+        function handleUnhighlight(model, index) {
+            payload.unhighlight = true;
+        }
+    }
+);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+var RADIAN$1 = Math.PI / 180;
+
+var sunburstLayout = function (seriesType, ecModel, api, payload) {
+    ecModel.eachSeriesByType(seriesType, function (seriesModel) {
+        var center = seriesModel.get('center');
+        var radius = seriesModel.get('radius');
+
+        if (!isArray(radius)) {
+            radius = [0, radius];
+        }
+        if (!isArray(center)) {
+            center = [center, center];
+        }
+
+        var width = api.getWidth();
+        var height = api.getHeight();
+        var size = Math.min(width, height);
+        var cx = parsePercent$1(center[0], width);
+        var cy = parsePercent$1(center[1], height);
+        var r0 = parsePercent$1(radius[0], size / 2);
+        var r = parsePercent$1(radius[1], size / 2);
+
+        var startAngle = -seriesModel.get('startAngle') * RADIAN$1;
+        var minAngle = seriesModel.get('minAngle') * RADIAN$1;
+
+        var virtualRoot = seriesModel.getData().tree.root;
+        var treeRoot = seriesModel.getViewRoot();
+        var rootDepth = treeRoot.depth;
+
+        var sort = seriesModel.get('sort');
+        if (sort != null) {
+            initChildren$1(treeRoot, sort);
+        }
+
+        var validDataCount = 0;
+        each$1(treeRoot.children, function (child) {
+            !isNaN(child.getValue()) && validDataCount++;
+        });
+
+        var sum = treeRoot.getValue();
+        // Sum may be 0
+        var unitRadian = Math.PI / (sum || validDataCount) * 2;
+
+        var renderRollupNode = treeRoot.depth > 0;
+        var levels = treeRoot.height - (renderRollupNode ? -1 : 1);
+        var rPerLevel = (r - r0) / (levels || 1);
+
+        var clockwise = seriesModel.get('clockwise');
+
+        var stillShowZeroSum = seriesModel.get('stillShowZeroSum');
+
+        // In the case some sector angle is smaller than minAngle
+        var dir = clockwise ? 1 : -1;
+
+        /**
+         * Render a tree
+         * @return increased angle
+         */
+        var renderNode = function (node, startAngle) {
+            if (!node) {
+                return;
+            }
+
+            var endAngle = startAngle;
+
+            // Render self
+            if (node !== virtualRoot) {
+                // Tree node is virtual, so it doesn't need to be drawn
+                var value = node.getValue();
+
+                var angle = (sum === 0 && stillShowZeroSum)
+                    ? unitRadian : (value * unitRadian);
+                if (angle < minAngle) {
+                    angle = minAngle;
+                    
+                }
+                else {
+                    
+                }
+
+                endAngle = startAngle + dir * angle;
+
+                var depth = node.depth - rootDepth
+                    - (renderRollupNode ? -1 : 1);
+                var rStart = r0 + rPerLevel * depth;
+                var rEnd = r0 + rPerLevel * (depth + 1);
+
+                var itemModel = node.getModel();
+                if (itemModel.get('r0') != null) {
+                    rStart = parsePercent$1(itemModel.get('r0'), size / 2);
+                }
+                if (itemModel.get('r') != null) {
+                    rEnd = parsePercent$1(itemModel.get('r'), size / 2);
+                }
+
+                node.setLayout({
+                    angle: angle,
+                    startAngle: startAngle,
+                    endAngle: endAngle,
+                    clockwise: clockwise,
+                    cx: cx,
+                    cy: cy,
+                    r0: rStart,
+                    r: rEnd
+                });
+            }
+
+            // Render children
+            if (node.children && node.children.length) {
+                // currentAngle = startAngle;
+                var siblingAngle = 0;
+                each$1(node.children, function (node) {
+                    siblingAngle += renderNode(node, startAngle + siblingAngle);
+                });
+            }
+
+            return endAngle - startAngle;
+        };
+
+        // Virtual root node for roll up
+        if (renderRollupNode) {
+            var rStart = r0;
+            var rEnd = r0 + rPerLevel;
+
+            var angle = Math.PI * 2;
+            virtualRoot.setLayout({
+                angle: angle,
+                startAngle: startAngle,
+                endAngle: startAngle + angle,
+                clockwise: clockwise,
+                cx: cx,
+                cy: cy,
+                r0: rStart,
+                r: rEnd
+            });
+        }
+
+        renderNode(treeRoot, startAngle);
+    });
+};
+
+/**
+ * Init node children by order and update visual
+ *
+ * @param {TreeNode} node  root node
+ * @param {boolean}  isAsc if is in ascendant order
+ */
+function initChildren$1(node, isAsc) {
+    var children = node.children || [];
+
+    node.children = sort$2(children, isAsc);
+
+    // Init children recursively
+    if (children.length) {
+        each$1(node.children, function (child) {
+            initChildren$1(child, isAsc);
+        });
+    }
+}
+
+/**
+ * Sort children nodes
+ *
+ * @param {TreeNode[]}               children children of node to be sorted
+ * @param {string | function | null} sort sort method
+ *                                   See SunburstSeries.js for details.
+ */
+function sort$2(children, sortOrder) {
+    if (typeof sortOrder === 'function') {
+        return children.sort(sortOrder);
+    }
+    else {
+        var isAsc = sortOrder === 'asc';
+        return children.sort(function (a, b) {
+            var diff = (a.getValue() - b.getValue()) * (isAsc ? 1 : -1);
+            return diff === 0
+                ? (a.dataIndex - b.dataIndex) * (isAsc ? -1 : 1)
+                : diff;
+        });
+    }
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+registerVisual(curry(dataColor, 'sunburst'));
+registerLayout(curry(sunburstLayout, 'sunburst'));
+registerProcessor(curry(dataFilter, 'sunburst'));
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+function dataToCoordSize(dataSize, dataItem) {
+    // dataItem is necessary in log axis.
+    dataItem = dataItem || [0, 0];
+    return map(['x', 'y'], function (dim, dimIdx) {
+        var axis = this.getAxis(dim);
+        var val = dataItem[dimIdx];
+        var halfSize = dataSize[dimIdx] / 2;
+        return axis.type === 'category'
+            ? axis.getBandWidth()
+            : Math.abs(axis.dataToCoord(val - halfSize) - axis.dataToCoord(val + halfSize));
+    }, this);
+}
+
+var prepareCartesian2d = function (coordSys) {
+    var rect = coordSys.grid.getRect();
+    return {
+        coordSys: {
+            // The name exposed to user is always 'cartesian2d' but not 'grid'.
+            type: 'cartesian2d',
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height
+        },
+        api: {
+            coord: function (data) {
+                // do not provide "out" param
+                return coordSys.dataToPoint(data);
+            },
+            size: bind(dataToCoordSize, coordSys)
+        }
+    };
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+function dataToCoordSize$1(dataSize, dataItem) {
+    dataItem = dataItem || [0, 0];
+    return map([0, 1], function (dimIdx) {
+        var val = dataItem[dimIdx];
+        var halfSize = dataSize[dimIdx] / 2;
+        var p1 = [];
+        var p2 = [];
+        p1[dimIdx] = val - halfSize;
+        p2[dimIdx] = val + halfSize;
+        p1[1 - dimIdx] = p2[1 - dimIdx] = dataItem[1 - dimIdx];
+        return Math.abs(this.dataToPoint(p1)[dimIdx] - this.dataToPoint(p2)[dimIdx]);
+    }, this);
+}
+
+var prepareGeo = function (coordSys) {
+    var rect = coordSys.getBoundingRect();
+    return {
+        coordSys: {
+            type: 'geo',
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height
+        },
+        api: {
+            coord: function (data) {
+                // do not provide "out" and noRoam param,
+                // Compatible with this usage:
+                // echarts.util.map(item.points, api.coord)
+                return coordSys.dataToPoint(data);
+            },
+            size: bind(dataToCoordSize$1, coordSys)
+        }
+    };
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+function dataToCoordSize$2(dataSize, dataItem) {
+    // dataItem is necessary in log axis.
+    var axis = this.getAxis();
+    var val = dataItem instanceof Array ? dataItem[0] : dataItem;
+    var halfSize = (dataSize instanceof Array ? dataSize[0] : dataSize) / 2;
+    return axis.type === 'category'
+        ? axis.getBandWidth()
+        : Math.abs(axis.dataToCoord(val - halfSize) - axis.dataToCoord(val + halfSize));
+}
+
+var prepareSingleAxis = function (coordSys) {
+    var rect = coordSys.getRect();
+
+    return {
+        coordSys: {
+            type: 'singleAxis',
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height
+        },
+        api: {
+            coord: function (val) {
+                // do not provide "out" param
+                return coordSys.dataToPoint(val);
+            },
+            size: bind(dataToCoordSize$2, coordSys)
+        }
+    };
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+function dataToCoordSize$3(dataSize, dataItem) {
+    // dataItem is necessary in log axis.
+    return map(['Radius', 'Angle'], function (dim, dimIdx) {
+        var axis = this['get' + dim + 'Axis']();
+        var val = dataItem[dimIdx];
+        var halfSize = dataSize[dimIdx] / 2;
+        var method = 'dataTo' + dim;
+
+        var result = axis.type === 'category'
+            ? axis.getBandWidth()
+            : Math.abs(axis[method](val - halfSize) - axis[method](val + halfSize));
+
+        if (dim === 'Angle') {
+            result = result * Math.PI / 180;
+        }
+
+        return result;
+
+    }, this);
+}
+
+var preparePolar = function (coordSys) {
+    var radiusAxis = coordSys.getRadiusAxis();
+    var angleAxis = coordSys.getAngleAxis();
+    var radius = radiusAxis.getExtent();
+    radius[0] > radius[1] && radius.reverse();
+
+    return {
+        coordSys: {
+            type: 'polar',
+            cx: coordSys.cx,
+            cy: coordSys.cy,
+            r: radius[1],
+            r0: radius[0]
+        },
+        api: {
+            coord: bind(function (data) {
+                var radius = radiusAxis.dataToRadius(data[0]);
+                var angle = angleAxis.dataToAngle(data[1]);
+                var coord = coordSys.coordToPoint([radius, angle]);
+                coord.push(radius, angle * Math.PI / 180);
+                return coord;
+            }),
+            size: bind(dataToCoordSize$3, coordSys)
+        }
+    };
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var prepareCalendar = function (coordSys) {
+    var rect = coordSys.getRect();
+    var rangeInfo = coordSys.getRangeInfo();
+
+    return {
+        coordSys: {
+            type: 'calendar',
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height,
+            cellWidth: coordSys.getCellWidth(),
+            cellHeight: coordSys.getCellHeight(),
+            rangeInfo: {
+                start: rangeInfo.start,
+                end: rangeInfo.end,
+                weeks: rangeInfo.weeks,
+                dayCount: rangeInfo.allDay
+            }
+        },
+        api: {
+            coord: function (data, clamp) {
+                return coordSys.dataToPoint(data, clamp);
+            }
+        }
+    };
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var ITEM_STYLE_NORMAL_PATH = ['itemStyle'];
+var ITEM_STYLE_EMPHASIS_PATH = ['emphasis', 'itemStyle'];
+var LABEL_NORMAL = ['label'];
+var LABEL_EMPHASIS = ['emphasis', 'label'];
+// Use prefix to avoid index to be the same as el.name,
+// which will cause weird udpate animation.
+var GROUP_DIFF_PREFIX = 'e\0\0';
+
+/**
+ * To reduce total package size of each coordinate systems, the modules `prepareCustom`
+ * of each coordinate systems are not required by each coordinate systems directly, but
+ * required by the module `custom`.
+ *
+ * prepareInfoForCustomSeries {Function}: optional
+ *     @return {Object} {coordSys: {...}, api: {
+ *         coord: function (data, clamp) {}, // return point in global.
+ *         size: function (dataSize, dataItem) {} // return size of each axis in coordSys.
+ *     }}
+ */
+var prepareCustoms = {
+    cartesian2d: prepareCartesian2d,
+    geo: prepareGeo,
+    singleAxis: prepareSingleAxis,
+    polar: preparePolar,
+    calendar: prepareCalendar
+};
+
+// ------
+// Model
+// ------
+
+extendSeriesModel({
+
+    type: 'series.custom',
+
+    dependencies: ['grid', 'polar', 'geo', 'singleAxis', 'calendar'],
+
+    defaultOption: {
+        coordinateSystem: 'cartesian2d', // Can be set as 'none'
+        zlevel: 0,
+        z: 2,
+        legendHoverLink: true
+
+        // Cartesian coordinate system
+        // xAxisIndex: 0,
+        // yAxisIndex: 0,
+
+        // Polar coordinate system
+        // polarIndex: 0,
+
+        // Geo coordinate system
+        // geoIndex: 0,
+
+        // label: {}
+        // itemStyle: {}
+    },
+
+    getInitialData: function (option, ecModel) {
+        return createListFromArray(this.getSource(), this);
+    }
+});
+
+// -----
+// View
+// -----
+
+extendChartView({
+
+    type: 'custom',
+
+    /**
+     * @private
+     * @type {module:echarts/data/List}
+     */
+    _data: null,
+
+    /**
+     * @override
+     */
+    render: function (customSeries, ecModel, api) {
+        var oldData = this._data;
+        var data = customSeries.getData();
+        var group = this.group;
+        var renderItem = makeRenderItem(customSeries, data, ecModel, api);
+
+        this.group.removeAll();
+
+        data.diff(oldData)
+            .add(function (newIdx) {
+                createOrUpdate$1(
+                    null, newIdx, renderItem(newIdx), customSeries, group, data
+                );
+            })
+            .update(function (newIdx, oldIdx) {
+                var el = oldData.getItemGraphicEl(oldIdx);
+                createOrUpdate$1(
+                    el, newIdx, renderItem(newIdx), customSeries, group, data
+                );
+            })
+            .remove(function (oldIdx) {
+                var el = oldData.getItemGraphicEl(oldIdx);
+                el && group.remove(el);
+            })
+            .execute();
+
+        this._data = data;
+    },
+
+    incrementalPrepareRender: function (customSeries, ecModel, api) {
+        this.group.removeAll();
+        this._data = null;
+    },
+
+    incrementalRender: function (params, customSeries, ecModel, api) {
+        var data = customSeries.getData();
+        var renderItem = makeRenderItem(customSeries, data, ecModel, api);
+        function setIncrementalAndHoverLayer(el) {
+            if (!el.isGroup) {
+                el.incremental = true;
+                el.useHoverLayer = true;
+            }
+        }
+        for (var idx = params.start; idx < params.end; idx++) {
+            var el = createOrUpdate$1(null, idx, renderItem(idx), customSeries, this.group, data);
+            el.traverse(setIncrementalAndHoverLayer);
+        }
+    },
+
+    /**
+     * @override
+     */
+    dispose: noop
+});
+
+
+function createEl(elOption) {
+    var graphicType = elOption.type;
+    var el;
+
+    if (graphicType === 'path') {
+        var shape = elOption.shape;
+        el = makePath(
+            shape.pathData,
+            null,
+            {
+                x: shape.x || 0,
+                y: shape.y || 0,
+                width: shape.width || 0,
+                height: shape.height || 0
+            },
+            'center'
+        );
+        el.__customPathData = elOption.pathData;
+    }
+    else if (graphicType === 'image') {
+        el = new ZImage({
+        });
+        el.__customImagePath = elOption.style.image;
+    }
+    else if (graphicType === 'text') {
+        el = new Text({
+        });
+        el.__customText = elOption.style.text;
+    }
+    else {
+        var Clz = graphic[graphicType.charAt(0).toUpperCase() + graphicType.slice(1)];
+
+        if (__DEV__) {
+            assert$1(Clz, 'graphic type "' + graphicType + '" can not be found.');
+        }
+
+        el = new Clz();
+    }
+
+    el.__customGraphicType = graphicType;
+    el.name = elOption.name;
+
+    return el;
+}
+
+function updateEl(el, dataIndex, elOption, animatableModel, data, isInit) {
+    var targetProps = {};
+    var elOptionStyle = elOption.style || {};
+
+    elOption.shape && (targetProps.shape = clone(elOption.shape));
+    elOption.position && (targetProps.position = elOption.position.slice());
+    elOption.scale && (targetProps.scale = elOption.scale.slice());
+    elOption.origin && (targetProps.origin = elOption.origin.slice());
+    elOption.rotation && (targetProps.rotation = elOption.rotation);
+
+    if (el.type === 'image' && elOption.style) {
+        var targetStyle = targetProps.style = {};
+        each$1(['x', 'y', 'width', 'height'], function (prop) {
+            prepareStyleTransition(prop, targetStyle, elOptionStyle, el.style, isInit);
+        });
+    }
+
+    if (el.type === 'text' && elOption.style) {
+        var targetStyle = targetProps.style = {};
+        each$1(['x', 'y'], function (prop) {
+            prepareStyleTransition(prop, targetStyle, elOptionStyle, el.style, isInit);
+        });
+        // Compatible with previous: both support
+        // textFill and fill, textStroke and stroke in 'text' element.
+        !elOptionStyle.hasOwnProperty('textFill') && elOptionStyle.fill && (
+            elOptionStyle.textFill = elOptionStyle.fill
+        );
+        !elOptionStyle.hasOwnProperty('textStroke') && elOptionStyle.stroke && (
+            elOptionStyle.textStroke = elOptionStyle.stroke
+        );
+    }
+
+    if (el.type !== 'group') {
+        el.useStyle(elOptionStyle);
+
+        // Init animation.
+        if (isInit) {
+            el.style.opacity = 0;
+            var targetOpacity = elOptionStyle.opacity;
+            targetOpacity == null && (targetOpacity = 1);
+            initProps(el, {style: {opacity: targetOpacity}}, animatableModel, dataIndex);
+        }
+    }
+
+    if (isInit) {
+        el.attr(targetProps);
+    }
+    else {
+        updateProps(el, targetProps, animatableModel, dataIndex);
+    }
+
+    // z2 must not be null/undefined, otherwise sort error may occur.
+    el.attr({z2: elOption.z2 || 0, silent: elOption.silent});
+
+    elOption.styleEmphasis !== false && setHoverStyle(el, elOption.styleEmphasis);
+}
+
+function prepareStyleTransition(prop, targetStyle, elOptionStyle, oldElStyle, isInit) {
+    if (elOptionStyle[prop] != null && !isInit) {
+        targetStyle[prop] = elOptionStyle[prop];
+        elOptionStyle[prop] = oldElStyle[prop];
+    }
+}
+
+function makeRenderItem(customSeries, data, ecModel, api) {
+    var renderItem = customSeries.get('renderItem');
+    var coordSys = customSeries.coordinateSystem;
+    var prepareResult = {};
+
+    if (coordSys) {
+        if (__DEV__) {
+            assert$1(renderItem, 'series.render is required.');
+            assert$1(
+                coordSys.prepareCustoms || prepareCustoms[coordSys.type],
+                'This coordSys does not support custom series.'
+            );
+        }
+
+        prepareResult = coordSys.prepareCustoms
+            ? coordSys.prepareCustoms()
+            : prepareCustoms[coordSys.type](coordSys);
+    }
+
+    var userAPI = defaults({
+        getWidth: api.getWidth,
+        getHeight: api.getHeight,
+        getZr: api.getZr,
+        getDevicePixelRatio: api.getDevicePixelRatio,
+        value: value,
+        style: style,
+        styleEmphasis: styleEmphasis,
+        visual: visual,
+        barLayout: barLayout,
+        currentSeriesIndices: currentSeriesIndices,
+        font: font
+    }, prepareResult.api || {});
+
+    var userParams = {
+        context: {},
+        seriesId: customSeries.id,
+        seriesName: customSeries.name,
+        seriesIndex: customSeries.seriesIndex,
+        coordSys: prepareResult.coordSys,
+        dataInsideLength: data.count(),
+        encode: wrapEncodeDef(customSeries.getData())
+    };
+
+    // Do not support call `api` asynchronously without dataIndexInside input.
+    var currDataIndexInside;
+    var currDirty = true;
+    var currItemModel;
+    var currLabelNormalModel;
+    var currLabelEmphasisModel;
+    var currVisualColor;
+
+    return function (dataIndexInside) {
+        currDataIndexInside = dataIndexInside;
+        currDirty = true;
+        return renderItem && renderItem(
+            defaults({
+                dataIndexInside: dataIndexInside,
+                dataIndex: data.getRawIndex(dataIndexInside)
+            }, userParams),
+            userAPI
+        ) || {};
+    };
+
+    // Do not update cache until api called.
+    function updateCache(dataIndexInside) {
+        dataIndexInside == null && (dataIndexInside = currDataIndexInside);
+        if (currDirty) {
+            currItemModel = data.getItemModel(dataIndexInside);
+            currLabelNormalModel = currItemModel.getModel(LABEL_NORMAL);
+            currLabelEmphasisModel = currItemModel.getModel(LABEL_EMPHASIS);
+            currVisualColor = data.getItemVisual(dataIndexInside, 'color');
+
+            currDirty = false;
+        }
+    }
+
+    /**
+     * @public
+     * @param {number|string} dim
+     * @param {number} [dataIndexInside=currDataIndexInside]
+     * @return {number|string} value
+     */
+    function value(dim, dataIndexInside) {
+        dataIndexInside == null && (dataIndexInside = currDataIndexInside);
+        return data.get(data.getDimension(dim || 0), dataIndexInside);
+    }
+
+    /**
+     * By default, `visual` is applied to style (to support visualMap).
+     * `visual.color` is applied at `fill`. If user want apply visual.color on `stroke`,
+     * it can be implemented as:
+     * `api.style({stroke: api.visual('color'), fill: null})`;
+     * @public
+     * @param {Object} [extra]
+     * @param {number} [dataIndexInside=currDataIndexInside]
+     */
+    function style(extra, dataIndexInside) {
+        dataIndexInside == null && (dataIndexInside = currDataIndexInside);
+        updateCache(dataIndexInside);
+
+        var itemStyle = currItemModel.getModel(ITEM_STYLE_NORMAL_PATH).getItemStyle();
+
+        currVisualColor != null && (itemStyle.fill = currVisualColor);
+        var opacity = data.getItemVisual(dataIndexInside, 'opacity');
+        opacity != null && (itemStyle.opacity = opacity);
+
+        setTextStyle(itemStyle, currLabelNormalModel, null, {
+            autoColor: currVisualColor,
+            isRectText: true
+        });
+
+        itemStyle.text = currLabelNormalModel.getShallow('show')
+            ? retrieve2(
+                customSeries.getFormattedLabel(dataIndexInside, 'normal'),
+                getDefaultLabel(data, dataIndexInside)
+            )
+            : null;
+
+        extra && extend(itemStyle, extra);
+        return itemStyle;
+    }
+
+    /**
+     * @public
+     * @param {Object} [extra]
+     * @param {number} [dataIndexInside=currDataIndexInside]
+     */
+    function styleEmphasis(extra, dataIndexInside) {
+        dataIndexInside == null && (dataIndexInside = currDataIndexInside);
+        updateCache(dataIndexInside);
+
+        var itemStyle = currItemModel.getModel(ITEM_STYLE_EMPHASIS_PATH).getItemStyle();
+
+        setTextStyle(itemStyle, currLabelEmphasisModel, null, {
+            isRectText: true
+        }, true);
+
+        itemStyle.text = currLabelEmphasisModel.getShallow('show')
+            ? retrieve3(
+                customSeries.getFormattedLabel(dataIndexInside, 'emphasis'),
+                customSeries.getFormattedLabel(dataIndexInside, 'normal'),
+                getDefaultLabel(data, dataIndexInside)
+            )
+            : null;
+
+        extra && extend(itemStyle, extra);
+        return itemStyle;
+    }
+
+    /**
+     * @public
+     * @param {string} visualType
+     * @param {number} [dataIndexInside=currDataIndexInside]
+     */
+    function visual(visualType, dataIndexInside) {
+        dataIndexInside == null && (dataIndexInside = currDataIndexInside);
+        return data.getItemVisual(dataIndexInside, visualType);
+    }
+
+    /**
+     * @public
+     * @param {number} opt.count Positive interger.
+     * @param {number} [opt.barWidth]
+     * @param {number} [opt.barMaxWidth]
+     * @param {number} [opt.barGap]
+     * @param {number} [opt.barCategoryGap]
+     * @return {Object} {width, offset, offsetCenter} is not support, return undefined.
+     */
+    function barLayout(opt) {
+        if (coordSys.getBaseAxis) {
+            var baseAxis = coordSys.getBaseAxis();
+            return getLayoutOnAxis(defaults({axis: baseAxis}, opt), api);
+        }
+    }
+
+    /**
+     * @public
+     * @return {Array.<number>}
+     */
+    function currentSeriesIndices() {
+        return ecModel.getCurrentSeriesIndices();
+    }
+
+    /**
+     * @public
+     * @param {Object} opt
+     * @param {string} [opt.fontStyle]
+     * @param {number} [opt.fontWeight]
+     * @param {number} [opt.fontSize]
+     * @param {string} [opt.fontFamily]
+     * @return {string} font string
+     */
+    function font(opt) {
+        return getFont(opt, ecModel);
+    }
+}
+
+function wrapEncodeDef(data) {
+    var encodeDef = {};
+    each$1(data.dimensions, function (dimName, dataDimIndex) {
+        var dimInfo = data.getDimensionInfo(dimName);
+        if (!dimInfo.isExtraCoord) {
+            var coordDim = dimInfo.coordDim;
+            var dataDims = encodeDef[coordDim] = encodeDef[coordDim] || [];
+            dataDims[dimInfo.coordDimIndex] = dataDimIndex;
+        }
+    });
+    return encodeDef;
+}
+
+function createOrUpdate$1(el, dataIndex, elOption, animatableModel, group, data) {
+    el = doCreateOrUpdate(el, dataIndex, elOption, animatableModel, group, data);
+    el && data.setItemGraphicEl(dataIndex, el);
+
+    return el;
+}
+
+function doCreateOrUpdate(el, dataIndex, elOption, animatableModel, group, data) {
+    var elOptionType = elOption.type;
+    if (el
+        && elOptionType !== el.__customGraphicType
+        && (elOptionType !== 'path' || elOption.pathData !== el.__customPathData)
+        && (elOptionType !== 'image' || elOption.style.image !== el.__customImagePath)
+        && (elOptionType !== 'text' || elOption.style.text !== el.__customText)
+    ) {
+        group.remove(el);
+        el = null;
+    }
+
+    // `elOption.type` is undefined when `renderItem` returns nothing.
+    if (elOptionType == null) {
+        return;
+    }
+
+    var isInit = !el;
+    !el && (el = createEl(elOption));
+    updateEl(el, dataIndex, elOption, animatableModel, data, isInit);
+
+    if (elOptionType === 'group') {
+        var oldChildren = el.children() || [];
+        var newChildren = elOption.children || [];
+
+        if (elOption.diffChildrenByName) {
+            // lower performance.
+            diffGroupChildren({
+                oldChildren: oldChildren,
+                newChildren: newChildren,
+                dataIndex: dataIndex,
+                animatableModel: animatableModel,
+                group: el,
+                data: data
+            });
+        }
+        else {
+            // better performance.
+            var index = 0;
+            for (; index < newChildren.length; index++) {
+                doCreateOrUpdate(
+                    el.childAt(index),
+                    dataIndex,
+                    newChildren[index],
+                    animatableModel,
+                    el,
+                    data
+                );
+            }
+            for (; index < oldChildren.length; index++) {
+                oldChildren[index] && el.remove(oldChildren[index]);
+            }
+        }
+    }
+
+    group.add(el);
+
+    return el;
+}
+
+function diffGroupChildren(context) {
+    (new DataDiffer(
+        context.oldChildren,
+        context.newChildren,
+        getKey,
+        getKey,
+        context
+    ))
+        .add(processAddUpdate)
+        .update(processAddUpdate)
+        .remove(processRemove)
+        .execute();
+}
+
+function getKey(item, idx) {
+    var name = item && item.name;
+    return name != null ? name : GROUP_DIFF_PREFIX + idx;
+}
+
+function processAddUpdate(newIndex, oldIndex) {
+    var context = this.context;
+    var childOption = newIndex != null ? context.newChildren[newIndex] : null;
+    var child = oldIndex != null ? context.oldChildren[oldIndex] : null;
+
+    doCreateOrUpdate(
+        child,
+        context.dataIndex,
+        childOption,
+        context.animatableModel,
+        context.group,
+        context.data
+    );
+}
+
+function processRemove(oldIndex) {
+    var context = this.context;
+    var child = context.oldChildren[oldIndex];
+    child && context.group.remove(child);
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// -------------
+// Preprocessor
+// -------------
+
+registerPreprocessor(function (option) {
+    var graphicOption = option.graphic;
+
+    // Convert
+    // {graphic: [{left: 10, type: 'circle'}, ...]}
+    // or
+    // {graphic: {left: 10, type: 'circle'}}
+    // to
+    // {graphic: [{elements: [{left: 10, type: 'circle'}, ...]}]}
+    if (isArray(graphicOption)) {
+        if (!graphicOption[0] || !graphicOption[0].elements) {
+            option.graphic = [{elements: graphicOption}];
+        }
+        else {
+            // Only one graphic instance can be instantiated. (We dont
+            // want that too many views are created in echarts._viewMap)
+            option.graphic = [option.graphic[0]];
+        }
+    }
+    else if (graphicOption && !graphicOption.elements) {
+        option.graphic = [{elements: [graphicOption]}];
+    }
+});
+
+// ------
+// Model
+// ------
+
+var GraphicModel = extendComponentModel({
+
+    type: 'graphic',
+
+    defaultOption: {
+
+        // Extra properties for each elements:
+        //
+        // left/right/top/bottom: (like 12, '22%', 'center', default undefined)
+        //      If left/rigth is set, shape.x/shape.cx/position will not be used.
+        //      If top/bottom is set, shape.y/shape.cy/position will not be used.
+        //      This mechanism is useful when you want to position a group/element
+        //      against the right side or the center of this container.
+        //
+        // width/height: (can only be pixel value, default 0)
+        //      Only be used to specify contianer(group) size, if needed. And
+        //      can not be percentage value (like '33%'). See the reason in the
+        //      layout algorithm below.
+        //
+        // bounding: (enum: 'all' (default) | 'raw')
+        //      Specify how to calculate boundingRect when locating.
+        //      'all': Get uioned and transformed boundingRect
+        //          from both itself and its descendants.
+        //          This mode simplies confining a group of elements in the bounding
+        //          of their ancester container (e.g., using 'right: 0').
+        //      'raw': Only use the boundingRect of itself and before transformed.
+        //          This mode is similar to css behavior, which is useful when you
+        //          want an element to be able to overflow its container. (Consider
+        //          a rotated circle needs to be located in a corner.)
+
+        // Note: elements is always behind its ancestors in this elements array.
+        elements: [],
+        parentId: null
+    },
+
+    /**
+     * Save el options for the sake of the performance (only update modified graphics).
+     * The order is the same as those in option. (ancesters -> descendants)
+     *
+     * @private
+     * @type {Array.<Object>}
+     */
+    _elOptionsToUpdate: null,
+
+    /**
+     * @override
+     */
+    mergeOption: function (option) {
+        // Prevent default merge to elements
+        var elements = this.option.elements;
+        this.option.elements = null;
+
+        GraphicModel.superApply(this, 'mergeOption', arguments);
+
+        this.option.elements = elements;
+    },
+
+    /**
+     * @override
+     */
+    optionUpdated: function (newOption, isInit) {
+        var thisOption = this.option;
+        var newList = (isInit ? thisOption : newOption).elements;
+        var existList = thisOption.elements = isInit ? [] : thisOption.elements;
+
+        var flattenedList = [];
+        this._flatten(newList, flattenedList);
+
+        var mappingResult = mappingToExists(existList, flattenedList);
+        makeIdAndName(mappingResult);
+
+        // Clear elOptionsToUpdate
+        var elOptionsToUpdate = this._elOptionsToUpdate = [];
+
+        each$1(mappingResult, function (resultItem, index) {
+            var newElOption = resultItem.option;
+
+            if (__DEV__) {
+                assert$1(
+                    isObject$1(newElOption) || resultItem.exist,
+                    'Empty graphic option definition'
+                );
+            }
+
+            if (!newElOption) {
+                return;
+            }
+
+            elOptionsToUpdate.push(newElOption);
+
+            setKeyInfoToNewElOption(resultItem, newElOption);
+
+            mergeNewElOptionToExist(existList, index, newElOption);
+
+            setLayoutInfoToExist(existList[index], newElOption);
+
+        }, this);
+
+        // Clean
+        for (var i = existList.length - 1; i >= 0; i--) {
+            if (existList[i] == null) {
+                existList.splice(i, 1);
+            }
+            else {
+                // $action should be volatile, otherwise option gotten from
+                // `getOption` will contain unexpected $action.
+                delete existList[i].$action;
+            }
+        }
+    },
+
+    /**
+     * Convert
+     * [{
+     *  type: 'group',
+     *  id: 'xx',
+     *  children: [{type: 'circle'}, {type: 'polygon'}]
+     * }]
+     * to
+     * [
+     *  {type: 'group', id: 'xx'},
+     *  {type: 'circle', parentId: 'xx'},
+     *  {type: 'polygon', parentId: 'xx'}
+     * ]
+     *
+     * @private
+     * @param {Array.<Object>} optionList option list
+     * @param {Array.<Object>} result result of flatten
+     * @param {Object} parentOption parent option
+     */
+    _flatten: function (optionList, result, parentOption) {
+        each$1(optionList, function (option) {
+            if (!option) {
+                return;
+            }
+
+            if (parentOption) {
+                option.parentOption = parentOption;
+            }
+
+            result.push(option);
+
+            var children = option.children;
+            if (option.type === 'group' && children) {
+                this._flatten(children, result, option);
+            }
+            // Deleting for JSON output, and for not affecting group creation.
+            delete option.children;
+        }, this);
+    },
+
+    // FIXME
+    // Pass to view using payload? setOption has a payload?
+    useElOptionsToUpdate: function () {
+        var els = this._elOptionsToUpdate;
+        // Clear to avoid render duplicately when zooming.
+        this._elOptionsToUpdate = null;
+        return els;
+    }
+});
+
+// -----
+// View
+// -----
+
+extendComponentView({
+
+    type: 'graphic',
+
+    /**
+     * @override
+     */
+    init: function (ecModel, api) {
+
+        /**
+         * @private
+         * @type {module:zrender/core/util.HashMap}
+         */
+        this._elMap = createHashMap();
+
+        /**
+         * @private
+         * @type {module:echarts/graphic/GraphicModel}
+         */
+        this._lastGraphicModel;
+    },
+
+    /**
+     * @override
+     */
+    render: function (graphicModel, ecModel, api) {
+
+        // Having leveraged between use cases and algorithm complexity, a very
+        // simple layout mechanism is used:
+        // The size(width/height) can be determined by itself or its parent (not
+        // implemented yet), but can not by its children. (Top-down travel)
+        // The location(x/y) can be determined by the bounding rect of itself
+        // (can including its descendants or not) and the size of its parent.
+        // (Bottom-up travel)
+
+        // When `chart.clear()` or `chart.setOption({...}, true)` with the same id,
+        // view will be reused.
+        if (graphicModel !== this._lastGraphicModel) {
+            this._clear();
+        }
+        this._lastGraphicModel = graphicModel;
+
+        this._updateElements(graphicModel, api);
+        this._relocate(graphicModel, api);
+    },
+
+    /**
+     * Update graphic elements.
+     *
+     * @private
+     * @param {Object} graphicModel graphic model
+     * @param {module:echarts/ExtensionAPI} api extension API
+     */
+    _updateElements: function (graphicModel, api) {
+        var elOptionsToUpdate = graphicModel.useElOptionsToUpdate();
+
+        if (!elOptionsToUpdate) {
+            return;
+        }
+
+        var elMap = this._elMap;
+        var rootGroup = this.group;
+
+        // Top-down tranverse to assign graphic settings to each elements.
+        each$1(elOptionsToUpdate, function (elOption) {
+            var $action = elOption.$action;
+            var id = elOption.id;
+            var existEl = elMap.get(id);
+            var parentId = elOption.parentId;
+            var targetElParent = parentId != null ? elMap.get(parentId) : rootGroup;
+
+            if (elOption.type === 'text') {
+                var elOptionStyle = elOption.style;
+
+                // In top/bottom mode, textVerticalAlign should not be used, which cause
+                // inaccurately locating.
+                if (elOption.hv && elOption.hv[1]) {
+                    elOptionStyle.textVerticalAlign = elOptionStyle.textBaseline = null;
+                }
+
+                // Compatible with previous setting: both support fill and textFill,
+                // stroke and textStroke.
+                !elOptionStyle.hasOwnProperty('textFill') && elOptionStyle.fill && (
+                    elOptionStyle.textFill = elOptionStyle.fill
+                );
+                !elOptionStyle.hasOwnProperty('textStroke') && elOptionStyle.stroke && (
+                    elOptionStyle.textStroke = elOptionStyle.stroke
+                );
+            }
+
+            // Remove unnecessary props to avoid potential problems.
+            var elOptionCleaned = getCleanedElOption(elOption);
+
+            // For simple, do not support parent change, otherwise reorder is needed.
+            if (__DEV__) {
+                existEl && assert$1(
+                    targetElParent === existEl.parent,
+                    'Changing parent is not supported.'
+                );
+            }
+
+            if (!$action || $action === 'merge') {
+                existEl
+                    ? existEl.attr(elOptionCleaned)
+                    : createEl$1(id, targetElParent, elOptionCleaned, elMap);
+            }
+            else if ($action === 'replace') {
+                removeEl(existEl, elMap);
+                createEl$1(id, targetElParent, elOptionCleaned, elMap);
+            }
+            else if ($action === 'remove') {
+                removeEl(existEl, elMap);
+            }
+
+            var el = elMap.get(id);
+            if (el) {
+                el.__ecGraphicWidth = elOption.width;
+                el.__ecGraphicHeight = elOption.height;
+            }
+        });
+    },
+
+    /**
+     * Locate graphic elements.
+     *
+     * @private
+     * @param {Object} graphicModel graphic model
+     * @param {module:echarts/ExtensionAPI} api extension API
+     */
+    _relocate: function (graphicModel, api) {
+        var elOptions = graphicModel.option.elements;
+        var rootGroup = this.group;
+        var elMap = this._elMap;
+
+        // Bottom-up tranvese all elements (consider ec resize) to locate elements.
+        for (var i = elOptions.length - 1; i >= 0; i--) {
+            var elOption = elOptions[i];
+            var el = elMap.get(elOption.id);
+
+            if (!el) {
+                continue;
+            }
+
+            var parentEl = el.parent;
+            var containerInfo = parentEl === rootGroup
+                ? {
+                    width: api.getWidth(),
+                    height: api.getHeight()
+                }
+                : { // Like 'position:absolut' in css, default 0.
+                    width: parentEl.__ecGraphicWidth || 0,
+                    height: parentEl.__ecGraphicHeight || 0
+                };
+
+            positionElement(
+                el, elOption, containerInfo, null,
+                {hv: elOption.hv, boundingMode: elOption.bounding}
+            );
+        }
+    },
+
+    /**
+     * Clear all elements.
+     *
+     * @private
+     */
+    _clear: function () {
+        var elMap = this._elMap;
+        elMap.each(function (el) {
+            removeEl(el, elMap);
+        });
+        this._elMap = createHashMap();
+    },
+
+    /**
+     * @override
+     */
+    dispose: function () {
+        this._clear();
+    }
+});
+
+function createEl$1(id, targetElParent, elOption, elMap) {
+    var graphicType = elOption.type;
+
+    if (__DEV__) {
+        assert$1(graphicType, 'graphic type MUST be set');
+    }
+
+    var Clz = graphic[graphicType.charAt(0).toUpperCase() + graphicType.slice(1)];
+
+    if (__DEV__) {
+        assert$1(Clz, 'graphic type can not be found');
+    }
+
+    var el = new Clz(elOption);
+    targetElParent.add(el);
+    elMap.set(id, el);
+    el.__ecGraphicId = id;
+}
+
+function removeEl(existEl, elMap) {
+    var existElParent = existEl && existEl.parent;
+    if (existElParent) {
+        existEl.type === 'group' && existEl.traverse(function (el) {
+            removeEl(el, elMap);
+        });
+        elMap.removeKey(existEl.__ecGraphicId);
+        existElParent.remove(existEl);
+    }
+}
+
+// Remove unnecessary props to avoid potential problems.
+function getCleanedElOption(elOption) {
+    elOption = extend({}, elOption);
+    each$1(
+        ['id', 'parentId', '$action', 'hv', 'bounding'].concat(LOCATION_PARAMS),
+        function (name) {
+            delete elOption[name];
+        }
+    );
+    return elOption;
+}
+
+function isSetLoc(obj, props) {
+    var isSet;
+    each$1(props, function (prop) {
+        obj[prop] != null && obj[prop] !== 'auto' && (isSet = true);
+    });
+    return isSet;
+}
+
+function setKeyInfoToNewElOption(resultItem, newElOption) {
+    var existElOption = resultItem.exist;
+
+    // Set id and type after id assigned.
+    newElOption.id = resultItem.keyInfo.id;
+    !newElOption.type && existElOption && (newElOption.type = existElOption.type);
+
+    // Set parent id if not specified
+    if (newElOption.parentId == null) {
+        var newElParentOption = newElOption.parentOption;
+        if (newElParentOption) {
+            newElOption.parentId = newElParentOption.id;
+        }
+        else if (existElOption) {
+            newElOption.parentId = existElOption.parentId;
+        }
+    }
+
+    // Clear
+    newElOption.parentOption = null;
+}
+
+function mergeNewElOptionToExist(existList, index, newElOption) {
+    // Update existing options, for `getOption` feature.
+    var newElOptCopy = extend({}, newElOption);
+    var existElOption = existList[index];
+
+    var $action = newElOption.$action || 'merge';
+    if ($action === 'merge') {
+        if (existElOption) {
+
+            if (__DEV__) {
+                var newType = newElOption.type;
+                assert$1(
+                    !newType || existElOption.type === newType,
+                    'Please set $action: "replace" to change `type`'
+                );
+            }
+
+            // We can ensure that newElOptCopy and existElOption are not
+            // the same object, so `merge` will not change newElOptCopy.
+            merge(existElOption, newElOptCopy, true);
+            // Rigid body, use ignoreSize.
+            mergeLayoutParam(existElOption, newElOptCopy, {ignoreSize: true});
+            // Will be used in render.
+            copyLayoutParams(newElOption, existElOption);
+        }
+        else {
+            existList[index] = newElOptCopy;
+        }
+    }
+    else if ($action === 'replace') {
+        existList[index] = newElOptCopy;
+    }
+    else if ($action === 'remove') {
+        // null will be cleaned later.
+        existElOption && (existList[index] = null);
+    }
+}
+
+function setLayoutInfoToExist(existItem, newElOption) {
+    if (!existItem) {
+        return;
+    }
+    existItem.hv = newElOption.hv = [
+        // Rigid body, dont care `width`.
+        isSetLoc(newElOption, ['left', 'right']),
+        // Rigid body, dont care `height`.
+        isSetLoc(newElOption, ['top', 'bottom'])
+    ];
+    // Give default group size. Otherwise layout error may occur.
+    if (existItem.type === 'group') {
+        existItem.width == null && (existItem.width = newElOption.width = 0);
+        existItem.height == null && (existItem.height = newElOption.height = 0);
+    }
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var LegendModel = extendComponentModel({
+
+    type: 'legend.plain',
+
+    dependencies: ['series'],
+
+    layoutMode: {
+        type: 'box',
+        // legend.width/height are maxWidth/maxHeight actually,
+        // whereas realy width/height is calculated by its content.
+        // (Setting {left: 10, right: 10} does not make sense).
+        // So consider the case:
+        // `setOption({legend: {left: 10});`
+        // then `setOption({legend: {right: 10});`
+        // The previous `left` should be cleared by setting `ignoreSize`.
+        ignoreSize: true
+    },
+
+    init: function (option, parentModel, ecModel) {
+        this.mergeDefaultAndTheme(option, ecModel);
+
+        option.selected = option.selected || {};
+    },
+
+    mergeOption: function (option) {
+        LegendModel.superCall(this, 'mergeOption', option);
+    },
+
+    optionUpdated: function () {
+        this._updateData(this.ecModel);
+
+        var legendData = this._data;
+
+        // If selectedMode is single, try to select one
+        if (legendData[0] && this.get('selectedMode') === 'single') {
+            var hasSelected = false;
+            // If has any selected in option.selected
+            for (var i = 0; i < legendData.length; i++) {
+                var name = legendData[i].get('name');
+                if (this.isSelected(name)) {
+                    // Force to unselect others
+                    this.select(name);
+                    hasSelected = true;
+                    break;
+                }
+            }
+            // Try select the first if selectedMode is single
+            !hasSelected && this.select(legendData[0].get('name'));
+        }
+    },
+
+    _updateData: function (ecModel) {
+        var potentialData = [];
+        var availableNames = [];
+
+        ecModel.eachRawSeries(function (seriesModel) {
+            var seriesName = seriesModel.name;
+            availableNames.push(seriesName);
+            var isPotential;
+
+            if (seriesModel.legendDataProvider) {
+                var data = seriesModel.legendDataProvider();
+                var names = data.mapArray(data.getName);
+
+                if (!ecModel.isSeriesFiltered(seriesModel)) {
+                    availableNames = availableNames.concat(names);
+                }
+
+                if (names.length) {
+                    potentialData = potentialData.concat(names);
+                }
+                else {
+                    isPotential = true;
+                }
+            }
+            else {
+                isPotential = true;
+            }
+
+            if (isPotential && isNameSpecified(seriesModel)) {
+                potentialData.push(seriesModel.name);
+            }
+        });
+
+        /**
+         * @type {Array.<string>}
+         * @private
+         */
+        this._availableNames = availableNames;
+
+        // If legend.data not specified in option, use availableNames as data,
+        // which is convinient for user preparing option.
+        var rawData = this.get('data') || potentialData;
+
+        var legendData = map(rawData, function (dataItem) {
+            // Can be string or number
+            if (typeof dataItem === 'string' || typeof dataItem === 'number') {
+                dataItem = {
+                    name: dataItem
+                };
+            }
+            return new Model(dataItem, this, this.ecModel);
+        }, this);
+
+        /**
+         * @type {Array.<module:echarts/model/Model>}
+         * @private
+         */
+        this._data = legendData;
+    },
+
+    /**
+     * @return {Array.<module:echarts/model/Model>}
+     */
+    getData: function () {
+        return this._data;
+    },
+
+    /**
+     * @param {string} name
+     */
+    select: function (name) {
+        var selected = this.option.selected;
+        var selectedMode = this.get('selectedMode');
+        if (selectedMode === 'single') {
+            var data = this._data;
+            each$1(data, function (dataItem) {
+                selected[dataItem.get('name')] = false;
+            });
+        }
+        selected[name] = true;
+    },
+
+    /**
+     * @param {string} name
+     */
+    unSelect: function (name) {
+        if (this.get('selectedMode') !== 'single') {
+            this.option.selected[name] = false;
+        }
+    },
+
+    /**
+     * @param {string} name
+     */
+    toggleSelected: function (name) {
+        var selected = this.option.selected;
+        // Default is true
+        if (!selected.hasOwnProperty(name)) {
+            selected[name] = true;
+        }
+        this[selected[name] ? 'unSelect' : 'select'](name);
+    },
+
+    /**
+     * @param {string} name
+     */
+    isSelected: function (name) {
+        var selected = this.option.selected;
+        return !(selected.hasOwnProperty(name) && !selected[name])
+            && indexOf(this._availableNames, name) >= 0;
+    },
+
+    defaultOption: {
+        // ä¸€çº§å±‚å 
+        zlevel: 0,
+        // äºŒçº§å±‚å 
+        z: 4,
+        show: true,
+
+        // å¸ƒå±€æ–¹å¼ï¼Œé»˜è®¤ä¸ºæ°´å¹³å¸ƒå±€ï¼Œå¯é€‰ä¸ºï¼š
+        // 'horizontal' | 'vertical'
+        orient: 'horizontal',
+
+        left: 'center',
+        // right: 'center',
+
+        top: 0,
+        // bottom: null,
+
+        // æ°´å¹³å¯¹é½
+        // 'auto' | 'left' | 'right'
+        // é»˜è®¤ä¸º 'auto', æ ¹æ® x çš„ä½ç½®åˆ¤æ–æ˜¯å·¦å¯¹é½è¿˜æ˜¯å³å¯¹é½
+        align: 'auto',
+
+        backgroundColor: 'rgba(0,0,0,0)',
+        // å›¾ä¾‹è¾¹æ¡†é¢œè‰²
+        borderColor: '#ccc',
+        borderRadius: 0,
+        // å›¾ä¾‹è¾¹æ¡†çº¿å®½ï¼Œå•ä½pxï¼Œé»˜è®¤ä¸º0ï¼ˆæ— è¾¹æ¡†ï¼‰
+        borderWidth: 0,
+        // å›¾ä¾‹å†…è¾¹è·ï¼Œå•ä½pxï¼Œé»˜è®¤å„æ–¹å‘å†…è¾¹è·ä¸º5ï¼Œ
+        // æŽ¥å—æ•°ç»„åˆ†åˆ«è®¾å®šä¸Šå³ä¸‹å·¦è¾¹è·ï¼ŒåŒcss
+        padding: 5,
+        // å„ä¸ªitemä¹‹é—´çš„é—´éš”ï¼Œå•ä½pxï¼Œé»˜è®¤ä¸º10ï¼Œ
+        // æ¨ªå‘å¸ƒå±€æ—¶ä¸ºæ°´å¹³é—´éš”ï¼Œçºµå‘å¸ƒå±€æ—¶ä¸ºçºµå‘é—´éš”
+        itemGap: 10,
+        // å›¾ä¾‹å›¾å½¢å®½åº¦
+        itemWidth: 25,
+        // å›¾ä¾‹å›¾å½¢é«˜åº¦
+        itemHeight: 14,
+
+        // å›¾ä¾‹å…³é—æ—¶å€™çš„é¢œè‰²
+        inactiveColor: '#ccc',
+
+        textStyle: {
+            // å›¾ä¾‹æ–‡å—é¢œè‰²
+            color: '#333'
+        },
+        // formatter: '',
+        // é€‰æ‹©æ¨¡å¼ï¼Œé»˜è®¤å¼€å¯å›¾ä¾‹å¼€å…³
+        selectedMode: true,
+        // é…ç½®é»˜è®¤é€‰ä¸çŠ¶æ€ï¼Œå¯é…åˆLEGEND.SELECTEDäº‹ä»¶åšåŠ¨æ€æ•°æ®è½½å…¥
+        // selected: null,
+        // å›¾ä¾‹å†…å®¹ï¼ˆè¯¦è§legend.dataï¼Œæ•°ç»„ä¸æ¯ä¸€é¡¹ä»£è¡¨ä¸€ä¸ªitem
+        // data: [],
+
+        // Tooltip ç›¸å…³é…ç½®
+        tooltip: {
+            show: false
+        }
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+function legendSelectActionHandler(methodName, payload, ecModel) {
+    var selectedMap = {};
+    var isToggleSelect = methodName === 'toggleSelected';
+    var isSelected;
+    // Update all legend components
+    ecModel.eachComponent('legend', function (legendModel) {
+        if (isToggleSelect && isSelected != null) {
+            // Force other legend has same selected status
+            // Or the first is toggled to true and other are toggled to false
+            // In the case one legend has some item unSelected in option. And if other legend
+            // doesn't has the item, they will assume it is selected.
+            legendModel[isSelected ? 'select' : 'unSelect'](payload.name);
+        }
+        else {
+            legendModel[methodName](payload.name);
+            isSelected = legendModel.isSelected(payload.name);
+        }
+        var legendData = legendModel.getData();
+        each$1(legendData, function (model) {
+            var name = model.get('name');
+            // Wrap element
+            if (name === '\n' || name === '') {
+                return;
+            }
+            var isItemSelected = legendModel.isSelected(name);
+            if (selectedMap.hasOwnProperty(name)) {
+                // Unselected if any legend is unselected
+                selectedMap[name] = selectedMap[name] && isItemSelected;
+            }
+            else {
+                selectedMap[name] = isItemSelected;
+            }
+        });
+    });
+    // Return the event explicitly
+    return {
+        name: payload.name,
+        selected: selectedMap
+    };
+}
+/**
+ * @event legendToggleSelect
+ * @type {Object}
+ * @property {string} type 'legendToggleSelect'
+ * @property {string} [from]
+ * @property {string} name Series name or data item name
+ */
+registerAction(
+    'legendToggleSelect', 'legendselectchanged',
+    curry(legendSelectActionHandler, 'toggleSelected')
+);
+
+/**
+ * @event legendSelect
+ * @type {Object}
+ * @property {string} type 'legendSelect'
+ * @property {string} name Series name or data item name
+ */
+registerAction(
+    'legendSelect', 'legendselected',
+    curry(legendSelectActionHandler, 'select')
+);
+
+/**
+ * @event legendUnSelect
+ * @type {Object}
+ * @property {string} type 'legendUnSelect'
+ * @property {string} name Series name or data item name
+ */
+registerAction(
+    'legendUnSelect', 'legendunselected',
+    curry(legendSelectActionHandler, 'unSelect')
+);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Layout list like component.
+ * It will box layout each items in group of component and then position the whole group in the viewport
+ * @param {module:zrender/group/Group} group
+ * @param {module:echarts/model/Component} componentModel
+ * @param {module:echarts/ExtensionAPI}
+ */
+function layout$3(group, componentModel, api) {
+    var boxLayoutParams = componentModel.getBoxLayoutParams();
+    var padding = componentModel.get('padding');
+    var viewportSize = {width: api.getWidth(), height: api.getHeight()};
+
+    var rect = getLayoutRect(
+        boxLayoutParams,
+        viewportSize,
+        padding
+    );
+
+    box(
+        componentModel.get('orient'),
+        group,
+        componentModel.get('itemGap'),
+        rect.width,
+        rect.height
+    );
+
+    positionElement(
+        group,
+        boxLayoutParams,
+        viewportSize,
+        padding
+    );
+}
+
+function makeBackground(rect, componentModel) {
+    var padding = normalizeCssArray$1(
+        componentModel.get('padding')
+    );
+    var style = componentModel.getItemStyle(['color', 'opacity']);
+    style.fill = componentModel.get('backgroundColor');
+    var rect = new Rect({
+        shape: {
+            x: rect.x - padding[3],
+            y: rect.y - padding[0],
+            width: rect.width + padding[1] + padding[3],
+            height: rect.height + padding[0] + padding[2],
+            r: componentModel.get('borderRadius')
+        },
+        style: style,
+        silent: true,
+        z2: -1
+    });
+    // FIXME
+    // `subPixelOptimizeRect` may bring some gap between edge of viewpart
+    // and background rect when setting like `left: 0`, `top: 0`.
+    // graphic.subPixelOptimizeRect(rect);
+
+    return rect;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var curry$4 = curry;
+var each$16 = each$1;
+var Group$3 = Group;
+
+var LegendView = extendComponentView({
+
+    type: 'legend.plain',
+
+    newlineDisabled: false,
+
+    /**
+     * @override
+     */
+    init: function () {
+
+        /**
+         * @private
+         * @type {module:zrender/container/Group}
+         */
+        this.group.add(this._contentGroup = new Group$3());
+
+        /**
+         * @private
+         * @type {module:zrender/Element}
+         */
+        this._backgroundEl;
+    },
+
+    /**
+     * @protected
+     */
+    getContentGroup: function () {
+        return this._contentGroup;
+    },
+
+    /**
+     * @override
+     */
+    render: function (legendModel, ecModel, api) {
+
+        this.resetInner();
+
+        if (!legendModel.get('show', true)) {
+            return;
+        }
+
+        var itemAlign = legendModel.get('align');
+        if (!itemAlign || itemAlign === 'auto') {
+            itemAlign = (
+                legendModel.get('left') === 'right'
+                && legendModel.get('orient') === 'vertical'
+            ) ? 'right' : 'left';
+        }
+
+        this.renderInner(itemAlign, legendModel, ecModel, api);
+
+        // Perform layout.
+        var positionInfo = legendModel.getBoxLayoutParams();
+        var viewportSize = {width: api.getWidth(), height: api.getHeight()};
+        var padding = legendModel.get('padding');
+
+        var maxSize = getLayoutRect(positionInfo, viewportSize, padding);
+        var mainRect = this.layoutInner(legendModel, itemAlign, maxSize);
+
+        // Place mainGroup, based on the calculated `mainRect`.
+        var layoutRect = getLayoutRect(
+            defaults({width: mainRect.width, height: mainRect.height}, positionInfo),
+            viewportSize,
+            padding
+        );
+        this.group.attr('position', [layoutRect.x - mainRect.x, layoutRect.y - mainRect.y]);
+
+        // Render background after group is layout.
+        this.group.add(
+            this._backgroundEl = makeBackground(mainRect, legendModel)
+        );
+    },
+
+    /**
+     * @protected
+     */
+    resetInner: function () {
+        this.getContentGroup().removeAll();
+        this._backgroundEl && this.group.remove(this._backgroundEl);
+    },
+
+    /**
+     * @protected
+     */
+    renderInner: function (itemAlign, legendModel, ecModel, api) {
+        var contentGroup = this.getContentGroup();
+        var legendDrawnMap = createHashMap();
+        var selectMode = legendModel.get('selectedMode');
+
+        var excludeSeriesId = [];
+        ecModel.eachRawSeries(function (seriesModel) {
+            !seriesModel.get('legendHoverLink') && excludeSeriesId.push(seriesModel.id);
+        });
+
+        each$16(legendModel.getData(), function (itemModel, dataIndex) {
+            var name = itemModel.get('name');
+
+            // Use empty string or \n as a newline string
+            if (!this.newlineDisabled && (name === '' || name === '\n')) {
+                contentGroup.add(new Group$3({
+                    newline: true
+                }));
+                return;
+            }
+
+            // Representitive series.
+            var seriesModel = ecModel.getSeriesByName(name)[0];
+
+            if (legendDrawnMap.get(name)) {
+                // Have been drawed
+                return;
+            }
+
+            // Series legend
+            if (seriesModel) {
+                var data = seriesModel.getData();
+                var color = data.getVisual('color');
+
+                // If color is a callback function
+                if (typeof color === 'function') {
+                    // Use the first data
+                    color = color(seriesModel.getDataParams(0));
+                }
+
+                // Using rect symbol defaultly
+                var legendSymbolType = data.getVisual('legendSymbol') || 'roundRect';
+                var symbolType = data.getVisual('symbol');
+
+                var itemGroup = this._createItem(
+                    name, dataIndex, itemModel, legendModel,
+                    legendSymbolType, symbolType,
+                    itemAlign, color,
+                    selectMode
+                );
+
+                itemGroup.on('click', curry$4(dispatchSelectAction, name, api))
+                    .on('mouseover', curry$4(dispatchHighlightAction, seriesModel, null, api, excludeSeriesId))
+                    .on('mouseout', curry$4(dispatchDownplayAction, seriesModel, null, api, excludeSeriesId));
+
+                legendDrawnMap.set(name, true);
+            }
+            else {
+                // Data legend of pie, funnel
+                ecModel.eachRawSeries(function (seriesModel) {
+                    // In case multiple series has same data name
+                    if (legendDrawnMap.get(name)) {
+                        return;
+                    }
+
+                    if (seriesModel.legendDataProvider) {
+                        var data = seriesModel.legendDataProvider();
+                        var idx = data.indexOfName(name);
+                        if (idx < 0) {
+                            return;
+                        }
+
+                        var color = data.getItemVisual(idx, 'color');
+
+                        var legendSymbolType = 'roundRect';
+
+                        var itemGroup = this._createItem(
+                            name, dataIndex, itemModel, legendModel,
+                            legendSymbolType, null,
+                            itemAlign, color,
+                            selectMode
+                        );
+
+                        // FIXME: consider different series has items with the same name.
+                        itemGroup.on('click', curry$4(dispatchSelectAction, name, api))
+                            // FIXME Should not specify the series name
+                            .on('mouseover', curry$4(dispatchHighlightAction, seriesModel, name, api, excludeSeriesId))
+                            .on('mouseout', curry$4(dispatchDownplayAction, seriesModel, name, api, excludeSeriesId));
+
+                        legendDrawnMap.set(name, true);
+                    }
+
+                }, this);
+            }
+
+            if (__DEV__) {
+                if (!legendDrawnMap.get(name)) {
+                    console.warn(name + ' series not exists. Legend data should be same with series name or data name.');
+                }
+            }
+        }, this);
+    },
+
+    _createItem: function (
+        name, dataIndex, itemModel, legendModel,
+        legendSymbolType, symbolType,
+        itemAlign, color, selectMode
+    ) {
+        var itemWidth = legendModel.get('itemWidth');
+        var itemHeight = legendModel.get('itemHeight');
+        var inactiveColor = legendModel.get('inactiveColor');
+        var symbolKeepAspect = legendModel.get('symbolKeepAspect');
+
+        var isSelected = legendModel.isSelected(name);
+        var itemGroup = new Group$3();
+
+        var textStyleModel = itemModel.getModel('textStyle');
+
+        var itemIcon = itemModel.get('icon');
+
+        var tooltipModel = itemModel.getModel('tooltip');
+        var legendGlobalTooltipModel = tooltipModel.parentModel;
+
+        // Use user given icon first
+        legendSymbolType = itemIcon || legendSymbolType;
+        itemGroup.add(createSymbol(
+            legendSymbolType,
+            0,
+            0,
+            itemWidth,
+            itemHeight,
+            isSelected ? color : inactiveColor,
+            // symbolKeepAspect default true for legend
+            symbolKeepAspect == null ? true : symbolKeepAspect
+        ));
+
+        // Compose symbols
+        // PENDING
+        if (!itemIcon && symbolType
+            // At least show one symbol, can't be all none
+            && ((symbolType !== legendSymbolType) || symbolType == 'none')
+        ) {
+            var size = itemHeight * 0.8;
+            if (symbolType === 'none') {
+                symbolType = 'circle';
+            }
+            // Put symbol in the center
+            itemGroup.add(createSymbol(
+                symbolType,
+                (itemWidth - size) / 2,
+                (itemHeight - size) / 2,
+                size,
+                size,
+                isSelected ? color : inactiveColor,
+                // symbolKeepAspect default true for legend
+                symbolKeepAspect == null ? true : symbolKeepAspect
+            ));
+        }
+
+        var textX = itemAlign === 'left' ? itemWidth + 5 : -5;
+        var textAlign = itemAlign;
+
+        var formatter = legendModel.get('formatter');
+        var content = name;
+        if (typeof formatter === 'string' && formatter) {
+            content = formatter.replace('{name}', name != null ? name : '');
+        }
+        else if (typeof formatter === 'function') {
+            content = formatter(name);
+        }
+
+        itemGroup.add(new Text({
+            style: setTextStyle({}, textStyleModel, {
+                text: content,
+                x: textX,
+                y: itemHeight / 2,
+                textFill: isSelected ? textStyleModel.getTextColor() : inactiveColor,
+                textAlign: textAlign,
+                textVerticalAlign: 'middle'
+            })
+        }));
+
+        // Add a invisible rect to increase the area of mouse hover
+        var hitRect = new Rect({
+            shape: itemGroup.getBoundingRect(),
+            invisible: true,
+            tooltip: tooltipModel.get('show') ? extend({
+                content: name,
+                // Defaul formatter
+                formatter: legendGlobalTooltipModel.get('formatter', true) || function () {
+                    return name;
+                },
+                formatterParams: {
+                    componentType: 'legend',
+                    legendIndex: legendModel.componentIndex,
+                    name: name,
+                    $vars: ['name']
+                }
+            }, tooltipModel.option) : null
+        });
+        itemGroup.add(hitRect);
+
+        itemGroup.eachChild(function (child) {
+            child.silent = true;
+        });
+
+        hitRect.silent = !selectMode;
+
+        this.getContentGroup().add(itemGroup);
+
+        setHoverStyle(itemGroup);
+
+        itemGroup.__legendDataIndex = dataIndex;
+
+        return itemGroup;
+    },
+
+    /**
+     * @protected
+     */
+    layoutInner: function (legendModel, itemAlign, maxSize) {
+        var contentGroup = this.getContentGroup();
+
+        // Place items in contentGroup.
+        box(
+            legendModel.get('orient'),
+            contentGroup,
+            legendModel.get('itemGap'),
+            maxSize.width,
+            maxSize.height
+        );
+
+        var contentRect = contentGroup.getBoundingRect();
+        contentGroup.attr('position', [-contentRect.x, -contentRect.y]);
+
+        return this.group.getBoundingRect();
+    }
+
+});
+
+function dispatchSelectAction(name, api) {
+    api.dispatchAction({
+        type: 'legendToggleSelect',
+        name: name
+    });
+}
+
+function dispatchHighlightAction(seriesModel, dataName, api, excludeSeriesId) {
+    // If element hover will move to a hoverLayer.
+    var el = api.getZr().storage.getDisplayList()[0];
+    if (!(el && el.useHoverLayer)) {
+        api.dispatchAction({
+            type: 'highlight',
+            seriesName: seriesModel.name,
+            name: dataName,
+            excludeSeriesId: excludeSeriesId
+        });
+    }
+}
+
+function dispatchDownplayAction(seriesModel, dataName, api, excludeSeriesId) {
+    // If element hover will move to a hoverLayer.
+    var el = api.getZr().storage.getDisplayList()[0];
+    if (!(el && el.useHoverLayer)) {
+        api.dispatchAction({
+            type: 'downplay',
+            seriesName: seriesModel.name,
+            name: dataName,
+            excludeSeriesId: excludeSeriesId
+        });
+    }
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var legendFilter = function (ecModel) {
+
+    var legendModels = ecModel.findComponents({
+        mainType: 'legend'
+    });
+    if (legendModels && legendModels.length) {
+        ecModel.filterSeries(function (series) {
+            // If in any legend component the status is not selected.
+            // Because in legend series is assumed selected when it is not in the legend data.
+            for (var i = 0; i < legendModels.length; i++) {
+                if (!legendModels[i].isSelected(series.name)) {
+                    return false;
+                }
+            }
+            return true;
+        });
+    }
+
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+// Do not contain scrollable legend, for sake of file size.
+
+// Series Filter
+registerProcessor(legendFilter);
+
+ComponentModel.registerSubTypeDefaulter('legend', function () {
+    // Default 'plain' when no type specified.
+    return 'plain';
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var ScrollableLegendModel = LegendModel.extend({
+
+    type: 'legend.scroll',
+
+    /**
+     * @param {number} scrollDataIndex
+     */
+    setScrollDataIndex: function (scrollDataIndex) {
+        this.option.scrollDataIndex = scrollDataIndex;
+    },
+
+    defaultOption: {
+        scrollDataIndex: 0,
+        pageButtonItemGap: 5,
+        pageButtonGap: null,
+        pageButtonPosition: 'end', // 'start' or 'end'
+        pageFormatter: '{current}/{total}', // If null/undefined, do not show page.
+        pageIcons: {
+            horizontal: ['M0,0L12,-10L12,10z', 'M0,0L-12,-10L-12,10z'],
+            vertical: ['M0,0L20,0L10,-20z', 'M0,0L20,0L10,20z']
+        },
+        pageIconColor: '#2f4554',
+        pageIconInactiveColor: '#aaa',
+        pageIconSize: 15, // Can be [10, 3], which represents [width, height]
+        pageTextStyle: {
+            color: '#333'
+        },
+
+        animationDurationUpdate: 800
+    },
+
+    /**
+     * @override
+     */
+    init: function (option, parentModel, ecModel, extraOpt) {
+        var inputPositionParams = getLayoutParams(option);
+
+        ScrollableLegendModel.superCall(this, 'init', option, parentModel, ecModel, extraOpt);
+
+        mergeAndNormalizeLayoutParams(this, option, inputPositionParams);
+    },
+
+    /**
+     * @override
+     */
+    mergeOption: function (option, extraOpt) {
+        ScrollableLegendModel.superCall(this, 'mergeOption', option, extraOpt);
+
+        mergeAndNormalizeLayoutParams(this, this.option, option);
+    },
+
+    getOrient: function () {
+        return this.get('orient') === 'vertical'
+            ? {index: 1, name: 'vertical'}
+            : {index: 0, name: 'horizontal'};
+    }
+
+});
+
+// Do not `ignoreSize` to enable setting {left: 10, right: 10}.
+function mergeAndNormalizeLayoutParams(legendModel, target, raw) {
+    var orient = legendModel.getOrient();
+    var ignoreSize = [1, 1];
+    ignoreSize[orient.index] = 0;
+    mergeLayoutParam(target, raw, {
+        type: 'box', ignoreSize: ignoreSize
+    });
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Separate legend and scrollable legend to reduce package size.
+ */
+
+var Group$4 = Group;
+
+var WH$1 = ['width', 'height'];
+var XY$1 = ['x', 'y'];
+
+var ScrollableLegendView = LegendView.extend({
+
+    type: 'legend.scroll',
+
+    newlineDisabled: true,
+
+    init: function () {
+
+        ScrollableLegendView.superCall(this, 'init');
+
+        /**
+         * @private
+         * @type {number} For `scroll`.
+         */
+        this._currentIndex = 0;
+
+        /**
+         * @private
+         * @type {module:zrender/container/Group}
+         */
+        this.group.add(this._containerGroup = new Group$4());
+        this._containerGroup.add(this.getContentGroup());
+
+        /**
+         * @private
+         * @type {module:zrender/container/Group}
+         */
+        this.group.add(this._controllerGroup = new Group$4());
+
+        /**
+         *
+         * @private
+         */
+        this._showController;
+    },
+
+    /**
+     * @override
+     */
+    resetInner: function () {
+        ScrollableLegendView.superCall(this, 'resetInner');
+
+        this._controllerGroup.removeAll();
+        this._containerGroup.removeClipPath();
+        this._containerGroup.__rectSize = null;
+    },
+
+    /**
+     * @override
+     */
+    renderInner: function (itemAlign, legendModel, ecModel, api) {
+        var me = this;
+
+        // Render content items.
+        ScrollableLegendView.superCall(this, 'renderInner', itemAlign, legendModel, ecModel, api);
+
+        var controllerGroup = this._controllerGroup;
+
+        var pageIconSize = legendModel.get('pageIconSize', true);
+        if (!isArray(pageIconSize)) {
+            pageIconSize = [pageIconSize, pageIconSize];
+        }
+
+        createPageButton('pagePrev', 0);
+
+        var pageTextStyleModel = legendModel.getModel('pageTextStyle');
+        controllerGroup.add(new Text({
+            name: 'pageText',
+            style: {
+                textFill: pageTextStyleModel.getTextColor(),
+                font: pageTextStyleModel.getFont(),
+                textVerticalAlign: 'middle',
+                textAlign: 'center'
+            },
+            silent: true
+        }));
+
+        createPageButton('pageNext', 1);
+
+        function createPageButton(name, iconIdx) {
+            var pageDataIndexName = name + 'DataIndex';
+            var icon = createIcon(
+                legendModel.get('pageIcons', true)[legendModel.getOrient().name][iconIdx],
+                {
+                    // Buttons will be created in each render, so we do not need
+                    // to worry about avoiding using legendModel kept in scope.
+                    onclick: bind(
+                        me._pageGo, me, pageDataIndexName, legendModel, api
+                    )
+                },
+                {
+                    x: -pageIconSize[0] / 2,
+                    y: -pageIconSize[1] / 2,
+                    width: pageIconSize[0],
+                    height: pageIconSize[1]
+                }
+            );
+            icon.name = name;
+            controllerGroup.add(icon);
+        }
+    },
+
+    /**
+     * @override
+     */
+    layoutInner: function (legendModel, itemAlign, maxSize) {
+        var contentGroup = this.getContentGroup();
+        var containerGroup = this._containerGroup;
+        var controllerGroup = this._controllerGroup;
+
+        var orientIdx = legendModel.getOrient().index;
+        var wh = WH$1[orientIdx];
+        var hw = WH$1[1 - orientIdx];
+        var yx = XY$1[1 - orientIdx];
+
+        // Place items in contentGroup.
+        box(
+            legendModel.get('orient'),
+            contentGroup,
+            legendModel.get('itemGap'),
+            !orientIdx ? null : maxSize.width,
+            orientIdx ? null : maxSize.height
+        );
+
+        box(
+            // Buttons in controller are layout always horizontally.
+            'horizontal',
+            controllerGroup,
+            legendModel.get('pageButtonItemGap', true)
+        );
+
+        var contentRect = contentGroup.getBoundingRect();
+        var controllerRect = controllerGroup.getBoundingRect();
+        var showController = this._showController = contentRect[wh] > maxSize[wh];
+
+        var contentPos = [-contentRect.x, -contentRect.y];
+        // Remain contentPos when scroll animation perfroming.
+        contentPos[orientIdx] = contentGroup.position[orientIdx];
+
+        // Layout container group based on 0.
+        var containerPos = [0, 0];
+        var controllerPos = [-controllerRect.x, -controllerRect.y];
+        var pageButtonGap = retrieve2(
+            legendModel.get('pageButtonGap', true), legendModel.get('itemGap', true)
+        );
+
+        // Place containerGroup and controllerGroup and contentGroup.
+        if (showController) {
+            var pageButtonPosition = legendModel.get('pageButtonPosition', true);
+            // controller is on the right / bottom.
+            if (pageButtonPosition === 'end') {
+                controllerPos[orientIdx] += maxSize[wh] - controllerRect[wh];
+            }
+            // controller is on the left / top.
+            else {
+                containerPos[orientIdx] += controllerRect[wh] + pageButtonGap;
+            }
+        }
+
+        // Always align controller to content as 'middle'.
+        controllerPos[1 - orientIdx] += contentRect[hw] / 2 - controllerRect[hw] / 2;
+
+        contentGroup.attr('position', contentPos);
+        containerGroup.attr('position', containerPos);
+        controllerGroup.attr('position', controllerPos);
+
+        // Calculate `mainRect` and set `clipPath`.
+        // mainRect should not be calculated by `this.group.getBoundingRect()`
+        // for sake of the overflow.
+        var mainRect = this.group.getBoundingRect();
+        var mainRect = {x: 0, y: 0};
+        // Consider content may be overflow (should be clipped).
+        mainRect[wh] = showController ? maxSize[wh] : contentRect[wh];
+        mainRect[hw] = Math.max(contentRect[hw], controllerRect[hw]);
+        // `containerRect[yx] + containerPos[1 - orientIdx]` is 0.
+        mainRect[yx] = Math.min(0, controllerRect[yx] + controllerPos[1 - orientIdx]);
+
+        containerGroup.__rectSize = maxSize[wh];
+        if (showController) {
+            var clipShape = {x: 0, y: 0};
+            clipShape[wh] = Math.max(maxSize[wh] - controllerRect[wh] - pageButtonGap, 0);
+            clipShape[hw] = mainRect[hw];
+            containerGroup.setClipPath(new Rect({shape: clipShape}));
+            // Consider content may be larger than container, container rect
+            // can not be obtained from `containerGroup.getBoundingRect()`.
+            containerGroup.__rectSize = clipShape[wh];
+        }
+        else {
+            // Do not remove or ignore controller. Keep them set as place holders.
+            controllerGroup.eachChild(function (child) {
+                child.attr({invisible: true, silent: true});
+            });
+        }
+
+        // Content translate animation.
+        var pageInfo = this._getPageInfo(legendModel);
+        pageInfo.pageIndex != null && updateProps(
+            contentGroup,
+            {position: pageInfo.contentPosition},
+            // When switch from "show controller" to "not show controller", view should be
+            // updated immediately without animation, otherwise causes weird efffect.
+            showController ? legendModel : false
+        );
+
+        this._updatePageInfoView(legendModel, pageInfo);
+
+        return mainRect;
+    },
+
+    _pageGo: function (to, legendModel, api) {
+        var scrollDataIndex = this._getPageInfo(legendModel)[to];
+
+        scrollDataIndex != null && api.dispatchAction({
+            type: 'legendScroll',
+            scrollDataIndex: scrollDataIndex,
+            legendId: legendModel.id
+        });
+    },
+
+    _updatePageInfoView: function (legendModel, pageInfo) {
+        var controllerGroup = this._controllerGroup;
+
+        each$1(['pagePrev', 'pageNext'], function (name) {
+            var canJump = pageInfo[name + 'DataIndex'] != null;
+            var icon = controllerGroup.childOfName(name);
+            if (icon) {
+                icon.setStyle(
+                    'fill',
+                    canJump
+                        ? legendModel.get('pageIconColor', true)
+                        : legendModel.get('pageIconInactiveColor', true)
+                );
+                icon.cursor = canJump ? 'pointer' : 'default';
+            }
+        });
+
+        var pageText = controllerGroup.childOfName('pageText');
+        var pageFormatter = legendModel.get('pageFormatter');
+        var pageIndex = pageInfo.pageIndex;
+        var current = pageIndex != null ? pageIndex + 1 : 0;
+        var total = pageInfo.pageCount;
+
+        pageText && pageFormatter && pageText.setStyle(
+            'text',
+            isString(pageFormatter)
+                ? pageFormatter.replace('{current}', current).replace('{total}', total)
+                : pageFormatter({current: current, total: total})
+        );
+    },
+
+    /**
+     * @param {module:echarts/model/Model} legendModel
+     * @return {Object} {
+     *  contentPosition: Array.<number>, null when data item not found.
+     *  pageIndex: number, null when data item not found.
+     *  pageCount: number, always be a number, can be 0.
+     *  pagePrevDataIndex: number, null when no next page.
+     *  pageNextDataIndex: number, null when no previous page.
+     * }
+     */
+    _getPageInfo: function (legendModel) {
+        // Align left or top by the current dataIndex.
+        var currDataIndex = legendModel.get('scrollDataIndex', true);
+        var contentGroup = this.getContentGroup();
+        var contentRect = contentGroup.getBoundingRect();
+        var containerRectSize = this._containerGroup.__rectSize;
+
+        var orientIdx = legendModel.getOrient().index;
+        var wh = WH$1[orientIdx];
+        var hw = WH$1[1 - orientIdx];
+        var xy = XY$1[orientIdx];
+        var contentPos = contentGroup.position.slice();
+
+        var pageIndex;
+        var pagePrevDataIndex;
+        var pageNextDataIndex;
+
+        var targetItemGroup;
+        if (this._showController) {
+            contentGroup.eachChild(function (child) {
+                if (child.__legendDataIndex === currDataIndex) {
+                    targetItemGroup = child;
+                }
+            });
+        }
+        else {
+            targetItemGroup = contentGroup.childAt(0);
+        }
+
+        var pageCount = containerRectSize ? Math.ceil(contentRect[wh] / containerRectSize) : 0;
+
+        if (targetItemGroup) {
+            var itemRect = targetItemGroup.getBoundingRect();
+            var itemLoc = targetItemGroup.position[orientIdx] + itemRect[xy];
+            contentPos[orientIdx] = -itemLoc - contentRect[xy];
+            pageIndex = Math.floor(
+                pageCount * (itemLoc + itemRect[xy] + containerRectSize / 2) / contentRect[wh]
+            );
+            pageIndex = (contentRect[wh] && pageCount)
+                ? Math.max(0, Math.min(pageCount - 1, pageIndex))
+                : -1;
+
+            var winRect = {x: 0, y: 0};
+            winRect[wh] = containerRectSize;
+            winRect[hw] = contentRect[hw];
+            winRect[xy] = -contentPos[orientIdx] - contentRect[xy];
+
+            var startIdx;
+            var children = contentGroup.children();
+
+            contentGroup.eachChild(function (child, index) {
+                var itemRect = getItemRect(child);
+
+                if (itemRect.intersect(winRect)) {
+                    startIdx == null && (startIdx = index);
+                    // It is user-friendly that the last item shown in the
+                    // current window is shown at the begining of next window.
+                    pageNextDataIndex = child.__legendDataIndex;
+                }
+
+                // If the last item is shown entirely, no next page.
+                if (index === children.length - 1
+                    && itemRect[xy] + itemRect[wh] <= winRect[xy] + winRect[wh]
+                ) {
+                    pageNextDataIndex = null;
+                }
+            });
+
+            // Always align based on the left/top most item, so the left/top most
+            // item in the previous window is needed to be found here.
+            if (startIdx != null) {
+                var startItem = children[startIdx];
+                var startRect = getItemRect(startItem);
+                winRect[xy] = startRect[xy] + startRect[wh] - winRect[wh];
+
+                // If the first item is shown entirely, no previous page.
+                if (startIdx <= 0 && startRect[xy] >= winRect[xy]) {
+                    pagePrevDataIndex = null;
+                }
+                else {
+                    while (startIdx > 0 && getItemRect(children[startIdx - 1]).intersect(winRect)) {
+                        startIdx--;
+                    }
+                    pagePrevDataIndex = children[startIdx].__legendDataIndex;
+                }
+            }
+        }
+
+        return {
+            contentPosition: contentPos,
+            pageIndex: pageIndex,
+            pageCount: pageCount,
+            pagePrevDataIndex: pagePrevDataIndex,
+            pageNextDataIndex: pageNextDataIndex
+        };
+
+        function getItemRect(el) {
+            var itemRect = el.getBoundingRect().clone();
+            itemRect[xy] += el.position[orientIdx];
+            return itemRect;
+        }
+    }
+
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @event legendScroll
+ * @type {Object}
+ * @property {string} type 'legendScroll'
+ * @property {string} scrollDataIndex
+ */
+registerAction(
+    'legendScroll', 'legendscroll',
+    function (payload, ecModel) {
+        var scrollDataIndex = payload.scrollDataIndex;
+
+        scrollDataIndex != null && ecModel.eachComponent(
+            {mainType: 'legend', subType: 'scroll', query: payload},
+            function (legendModel) {
+                legendModel.setScrollDataIndex(scrollDataIndex);
+            }
+        );
+    }
+);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Legend component entry file8
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+extendComponentModel({
+
+    type: 'tooltip',
+
+    dependencies: ['axisPointer'],
+
+    defaultOption: {
+        zlevel: 0,
+
+        z: 8,
+
+        show: true,
+
+        // tooltipä¸»ä½“å†…å®¹
+        showContent: true,
+
+        // 'trigger' only works on coordinate system.
+        // 'item' | 'axis' | 'none'
+        trigger: 'item',
+
+        // 'click' | 'mousemove' | 'none'
+        triggerOn: 'mousemove|click',
+
+        alwaysShowContent: false,
+
+        displayMode: 'single', // 'single' | 'multipleByCoordSys'
+
+        // ä½ç½® {Array} | {Function}
+        // position: null
+        // Consider triggered from axisPointer handle, verticalAlign should be 'middle'
+        // align: null,
+        // verticalAlign: null,
+
+        // æ˜¯å¦çº¦æŸ content åœ¨ viewRect ä¸ã€‚é»˜è®¤ false æ˜¯ä¸ºäº†å…¼å®¹ä»¥å‰ç‰ˆæœ¬ã€‚
+        confine: false,
+
+        // å†…å®¹æ ¼å¼å™¨ï¼š{string}ï¼ˆTemplateï¼‰ Â¦ {Function}
+        // formatter: null
+
+        showDelay: 0,
+
+        // éšè—å»¶è¿Ÿï¼Œå•ä½ms
+        hideDelay: 100,
+
+        // åŠ¨ç”»å˜æ¢æ—¶é—´ï¼Œå•ä½s
+        transitionDuration: 0.4,
+
+        enterable: false,
+
+        // æç¤ºèƒŒæ™¯é¢œè‰²ï¼Œé»˜è®¤ä¸ºé€æ˜Žåº¦ä¸º0.7çš„é»‘è‰²
+        backgroundColor: 'rgba(50,50,50,0.7)',
+
+        // æç¤ºè¾¹æ¡†é¢œè‰²
+        borderColor: '#333',
+
+        // æç¤ºè¾¹æ¡†åœ†è§’ï¼Œå•ä½pxï¼Œé»˜è®¤ä¸º4
+        borderRadius: 4,
+
+        // æç¤ºè¾¹æ¡†çº¿å®½ï¼Œå•ä½pxï¼Œé»˜è®¤ä¸º0ï¼ˆæ— è¾¹æ¡†ï¼‰
+        borderWidth: 0,
+
+        // æç¤ºå†…è¾¹è·ï¼Œå•ä½pxï¼Œé»˜è®¤å„æ–¹å‘å†…è¾¹è·ä¸º5ï¼Œ
+        // æŽ¥å—æ•°ç»„åˆ†åˆ«è®¾å®šä¸Šå³ä¸‹å·¦è¾¹è·ï¼ŒåŒcss
+        padding: 5,
+
+        // Extra css text
+        extraCssText: '',
+
+        // åæ ‡è½´æŒ‡ç¤ºå™¨ï¼Œåæ ‡è½´è§¦å‘æœ‰æ•ˆ
+        axisPointer: {
+            // é»˜è®¤ä¸ºç›´çº¿
+            // å¯é€‰ä¸ºï¼š'line' | 'shadow' | 'cross'
+            type: 'line',
+
+            // type ä¸º line çš„æ—¶å€™æœ‰æ•ˆï¼ŒæŒ‡å®š tooltip line æ‰€åœ¨çš„è½´ï¼Œå¯é€‰
+            // å¯é€‰ 'x' | 'y' | 'angle' | 'radius' | 'auto'
+            // é»˜è®¤ 'auto'ï¼Œä¼šé€‰æ‹©ç±»åž‹ä¸º category çš„è½´ï¼Œå¯¹äºŽåŒæ•°å€¼è½´ï¼Œç¬›å¡å°”åæ ‡ç³»ä¼šé»˜è®¤é€‰æ‹© x è½´
+            // æžåæ ‡ç³»ä¼šé»˜è®¤é€‰æ‹© angle è½´
+            axis: 'auto',
+
+            animation: 'auto',
+            animationDurationUpdate: 200,
+            animationEasingUpdate: 'exponentialOut',
+
+            crossStyle: {
+                color: '#999',
+                width: 1,
+                type: 'dashed',
+
+                // TODO formatter
+                textStyle: {}
+            }
+
+            // lineStyle and shadowStyle should not be specified here,
+            // otherwise it will always override those styles on option.axisPointer.
+        },
+        textStyle: {
+            color: '#fff',
+            fontSize: 14
+        }
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var each$18 = each$1;
+var toCamelCase$1 = toCamelCase;
+
+var vendors = ['', '-webkit-', '-moz-', '-o-'];
+
+var gCssText = 'position:absolute;display:block;border-style:solid;white-space:nowrap;z-index:9999999;';
+
+/**
+ * @param {number} duration
+ * @return {string}
+ * @inner
+ */
+function assembleTransition(duration) {
+    var transitionCurve = 'cubic-bezier(0.23, 1, 0.32, 1)';
+    var transitionText = 'left ' + duration + 's ' + transitionCurve + ','
+                        + 'top ' + duration + 's ' + transitionCurve;
+    return map(vendors, function (vendorPrefix) {
+        return vendorPrefix + 'transition:' + transitionText;
+    }).join(';');
+}
+
+/**
+ * @param {Object} textStyle
+ * @return {string}
+ * @inner
+ */
+function assembleFont(textStyleModel) {
+    var cssText = [];
+
+    var fontSize = textStyleModel.get('fontSize');
+    var color = textStyleModel.getTextColor();
+
+    color && cssText.push('color:' + color);
+
+    cssText.push('font:' + textStyleModel.getFont());
+
+    fontSize &&
+        cssText.push('line-height:' + Math.round(fontSize * 3 / 2) + 'px');
+
+    each$18(['decoration', 'align'], function (name) {
+        var val = textStyleModel.get(name);
+        val && cssText.push('text-' + name + ':' + val);
+    });
+
+    return cssText.join(';');
+}
+
+/**
+ * @param {Object} tooltipModel
+ * @return {string}
+ * @inner
+ */
+function assembleCssText(tooltipModel) {
+
+    var cssText = [];
+
+    var transitionDuration = tooltipModel.get('transitionDuration');
+    var backgroundColor = tooltipModel.get('backgroundColor');
+    var textStyleModel = tooltipModel.getModel('textStyle');
+    var padding = tooltipModel.get('padding');
+
+    // Animation transition. Do not animate when transitionDuration is 0.
+    transitionDuration &&
+        cssText.push(assembleTransition(transitionDuration));
+
+    if (backgroundColor) {
+        if (env$1.canvasSupported) {
+            cssText.push('background-Color:' + backgroundColor);
+        }
+        else {
+            // for ie
+            cssText.push(
+                'background-Color:#' + toHex(backgroundColor)
+            );
+            cssText.push('filter:alpha(opacity=70)');
+        }
+    }
+
+    // Border style
+    each$18(['width', 'color', 'radius'], function (name) {
+        var borderName = 'border-' + name;
+        var camelCase = toCamelCase$1(borderName);
+        var val = tooltipModel.get(camelCase);
+        val != null &&
+            cssText.push(borderName + ':' + val + (name === 'color' ? '' : 'px'));
+    });
+
+    // Text style
+    cssText.push(assembleFont(textStyleModel));
+
+    // Padding
+    if (padding != null) {
+        cssText.push('padding:' + normalizeCssArray$1(padding).join('px ') + 'px');
+    }
+
+    return cssText.join(';') + ';';
+}
+
+/**
+ * @alias module:echarts/component/tooltip/TooltipContent
+ * @constructor
+ */
+function TooltipContent(container, api) {
+    if (env$1.wxa) {
+        return null;
+    }
+
+    var el = document.createElement('div');
+    var zr = this._zr = api.getZr();
+
+    this.el = el;
+
+    this._x = api.getWidth() / 2;
+    this._y = api.getHeight() / 2;
+
+    container.appendChild(el);
+
+    this._container = container;
+
+    this._show = false;
+
+    /**
+     * @private
+     */
+    this._hideTimeout;
+
+    var self = this;
+    el.onmouseenter = function () {
+        // clear the timeout in hideLater and keep showing tooltip
+        if (self._enterable) {
+            clearTimeout(self._hideTimeout);
+            self._show = true;
+        }
+        self._inContent = true;
+    };
+    el.onmousemove = function (e) {
+        e = e || window.event;
+        if (!self._enterable) {
+            // Try trigger zrender event to avoid mouse
+            // in and out shape too frequently
+            var handler = zr.handler;
+            normalizeEvent(container, e, true);
+            handler.dispatch('mousemove', e);
+        }
+    };
+    el.onmouseleave = function () {
+        if (self._enterable) {
+            if (self._show) {
+                self.hideLater(self._hideDelay);
+            }
+        }
+        self._inContent = false;
+    };
+}
+
+TooltipContent.prototype = {
+
+    constructor: TooltipContent,
+
+    /**
+     * @private
+     * @type {boolean}
+     */
+    _enterable: true,
+
+    /**
+     * Update when tooltip is rendered
+     */
+    update: function () {
+        // FIXME
+        // Move this logic to ec main?
+        var container = this._container;
+        var stl = container.currentStyle
+            || document.defaultView.getComputedStyle(container);
+        var domStyle = container.style;
+        if (domStyle.position !== 'absolute' && stl.position !== 'absolute') {
+            domStyle.position = 'relative';
+        }
+        // Hide the tooltip
+        // PENDING
+        // this.hide();
+    },
+
+    show: function (tooltipModel) {
+        clearTimeout(this._hideTimeout);
+        var el = this.el;
+
+        el.style.cssText = gCssText + assembleCssText(tooltipModel)
+            // http://stackoverflow.com/questions/21125587/css3-transition-not-working-in-chrome-anymore
+            + ';left:' + this._x + 'px;top:' + this._y + 'px;'
+            + (tooltipModel.get('extraCssText') || '');
+
+        el.style.display = el.innerHTML ?  'block' : 'none';
+
+        this._show = true;
+    },
+
+    setContent: function (content) {
+        this.el.innerHTML = content == null ? '' : content;
+    },
+
+    setEnterable: function (enterable) {
+        this._enterable = enterable;
+    },
+
+    getSize: function () {
+        var el = this.el;
+        return [el.clientWidth, el.clientHeight];
+    },
+
+    moveTo: function (x, y) {
+        // xy should be based on canvas root. But tooltipContent is
+        // the sibling of canvas root. So padding of ec container
+        // should be considered here.
+        var zr = this._zr;
+        var viewportRootOffset;
+        if (zr && zr.painter && (viewportRootOffset = zr.painter.getViewportRootOffset())) {
+            x += viewportRootOffset.offsetLeft;
+            y += viewportRootOffset.offsetTop;
+        }
+
+        var style = this.el.style;
+        style.left = x + 'px';
+        style.top = y + 'px';
+
+        this._x = x;
+        this._y = y;
+    },
+
+    hide: function () {
+        this.el.style.display = 'none';
+        this._show = false;
+    },
+
+    hideLater: function (time) {
+        if (this._show && !(this._inContent && this._enterable)) {
+            if (time) {
+                this._hideDelay = time;
+                // Set show false to avoid invoke hideLater mutiple times
+                this._show = false;
+                this._hideTimeout = setTimeout(bind(this.hide, this), time);
+            }
+            else {
+                this.hide();
+            }
+        }
+    },
+
+    isShow: function () {
+        return this._show;
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var bind$3 = bind;
+var each$17 = each$1;
+var parsePercent$2 = parsePercent$1;
+
+var proxyRect = new Rect({
+    shape: {x: -1, y: -1, width: 2, height: 2}
+});
+
+extendComponentView({
+
+    type: 'tooltip',
+
+    init: function (ecModel, api) {
+        if (env$1.node) {
+            return;
+        }
+        var tooltipContent = new TooltipContent(api.getDom(), api);
+        this._tooltipContent = tooltipContent;
+    },
+
+    render: function (tooltipModel, ecModel, api) {
+        if (env$1.node || env$1.wxa) {
+            return;
+        }
+
+        // Reset
+        this.group.removeAll();
+
+        /**
+         * @private
+         * @type {module:echarts/component/tooltip/TooltipModel}
+         */
+        this._tooltipModel = tooltipModel;
+
+        /**
+         * @private
+         * @type {module:echarts/model/Global}
+         */
+        this._ecModel = ecModel;
+
+        /**
+         * @private
+         * @type {module:echarts/ExtensionAPI}
+         */
+        this._api = api;
+
+        /**
+         * Should be cleaned when render.
+         * @private
+         * @type {Array.<Array.<Object>>}
+         */
+        this._lastDataByCoordSys = null;
+
+        /**
+         * @private
+         * @type {boolean}
+         */
+        this._alwaysShowContent = tooltipModel.get('alwaysShowContent');
+
+        var tooltipContent = this._tooltipContent;
+        tooltipContent.update();
+        tooltipContent.setEnterable(tooltipModel.get('enterable'));
+
+        this._initGlobalListener();
+
+        this._keepShow();
+    },
+
+    _initGlobalListener: function () {
+        var tooltipModel = this._tooltipModel;
+        var triggerOn = tooltipModel.get('triggerOn');
+
+        register(
+            'itemTooltip',
+            this._api,
+            bind$3(function (currTrigger, e, dispatchAction) {
+                // If 'none', it is not controlled by mouse totally.
+                if (triggerOn !== 'none') {
+                    if (triggerOn.indexOf(currTrigger) >= 0) {
+                        this._tryShow(e, dispatchAction);
+                    }
+                    else if (currTrigger === 'leave') {
+                        this._hide(dispatchAction);
+                    }
+                }
+            }, this)
+        );
+    },
+
+    _keepShow: function () {
+        var tooltipModel = this._tooltipModel;
+        var ecModel = this._ecModel;
+        var api = this._api;
+
+        // Try to keep the tooltip show when refreshing
+        if (this._lastX != null
+            && this._lastY != null
+            // When user is willing to control tooltip totally using API,
+            // self.manuallyShowTip({x, y}) might cause tooltip hide,
+            // which is not expected.
+            && tooltipModel.get('triggerOn') !== 'none'
+        ) {
+            var self = this;
+            clearTimeout(this._refreshUpdateTimeout);
+            this._refreshUpdateTimeout = setTimeout(function () {
+                // Show tip next tick after other charts are rendered
+                // In case highlight action has wrong result
+                // FIXME
+                self.manuallyShowTip(tooltipModel, ecModel, api, {
+                    x: self._lastX,
+                    y: self._lastY
+                });
+            });
+        }
+    },
+
+    /**
+     * Show tip manually by
+     * dispatchAction({
+     *     type: 'showTip',
+     *     x: 10,
+     *     y: 10
+     * });
+     * Or
+     * dispatchAction({
+     *      type: 'showTip',
+     *      seriesIndex: 0,
+     *      dataIndex or dataIndexInside or name
+     * });
+     *
+     *  TODO Batch
+     */
+    manuallyShowTip: function (tooltipModel, ecModel, api, payload) {
+        if (payload.from === this.uid || env$1.node) {
+            return;
+        }
+
+        var dispatchAction = makeDispatchAction$1(payload, api);
+
+        // Reset ticket
+        this._ticket = '';
+
+        // When triggered from axisPointer.
+        var dataByCoordSys = payload.dataByCoordSys;
+
+        if (payload.tooltip && payload.x != null && payload.y != null) {
+            var el = proxyRect;
+            el.position = [payload.x, payload.y];
+            el.update();
+            el.tooltip = payload.tooltip;
+            // Manually show tooltip while view is not using zrender elements.
+            this._tryShow({
+                offsetX: payload.x,
+                offsetY: payload.y,
+                target: el
+            }, dispatchAction);
+        }
+        else if (dataByCoordSys) {
+            this._tryShow({
+                offsetX: payload.x,
+                offsetY: payload.y,
+                position: payload.position,
+                event: {},
+                dataByCoordSys: payload.dataByCoordSys,
+                tooltipOption: payload.tooltipOption
+            }, dispatchAction);
+        }
+        else if (payload.seriesIndex != null) {
+
+            if (this._manuallyAxisShowTip(tooltipModel, ecModel, api, payload)) {
+                return;
+            }
+
+            var pointInfo = findPointFromSeries(payload, ecModel);
+            var cx = pointInfo.point[0];
+            var cy = pointInfo.point[1];
+            if (cx != null && cy != null) {
+                this._tryShow({
+                    offsetX: cx,
+                    offsetY: cy,
+                    position: payload.position,
+                    target: pointInfo.el,
+                    event: {}
+                }, dispatchAction);
+            }
+        }
+        else if (payload.x != null && payload.y != null) {
+            // FIXME
+            // should wrap dispatchAction like `axisPointer/globalListener` ?
+            api.dispatchAction({
+                type: 'updateAxisPointer',
+                x: payload.x,
+                y: payload.y
+            });
+
+            this._tryShow({
+                offsetX: payload.x,
+                offsetY: payload.y,
+                position: payload.position,
+                target: api.getZr().findHover(payload.x, payload.y).target,
+                event: {}
+            }, dispatchAction);
+        }
+    },
+
+    manuallyHideTip: function (tooltipModel, ecModel, api, payload) {
+        var tooltipContent = this._tooltipContent;
+
+        if (!this._alwaysShowContent && this._tooltipModel) {
+            tooltipContent.hideLater(this._tooltipModel.get('hideDelay'));
+        }
+
+        this._lastX = this._lastY = null;
+
+        if (payload.from !== this.uid) {
+            this._hide(makeDispatchAction$1(payload, api));
+        }
+    },
+
+    // Be compatible with previous design, that is, when tooltip.type is 'axis' and
+    // dispatchAction 'showTip' with seriesIndex and dataIndex will trigger axis pointer
+    // and tooltip.
+    _manuallyAxisShowTip: function (tooltipModel, ecModel, api, payload) {
+        var seriesIndex = payload.seriesIndex;
+        var dataIndex = payload.dataIndex;
+        var coordSysAxesInfo = ecModel.getComponent('axisPointer').coordSysAxesInfo;
+
+        if (seriesIndex == null || dataIndex == null || coordSysAxesInfo == null) {
+            return;
+        }
+
+        var seriesModel = ecModel.getSeriesByIndex(seriesIndex);
+        if (!seriesModel) {
+            return;
+        }
+
+        var data = seriesModel.getData();
+        var tooltipModel = buildTooltipModel([
+            data.getItemModel(dataIndex),
+            seriesModel,
+            (seriesModel.coordinateSystem || {}).model,
+            tooltipModel
+        ]);
+
+        if (tooltipModel.get('trigger') !== 'axis') {
+            return;
+        }
+
+        api.dispatchAction({
+            type: 'updateAxisPointer',
+            seriesIndex: seriesIndex,
+            dataIndex: dataIndex,
+            position: payload.position
+        });
+
+        return true;
+    },
+
+    _tryShow: function (e, dispatchAction) {
+        var el = e.target;
+        var tooltipModel = this._tooltipModel;
+
+        if (!tooltipModel) {
+            return;
+        }
+
+        // Save mouse x, mouse y. So we can try to keep showing the tip if chart is refreshed
+        this._lastX = e.offsetX;
+        this._lastY = e.offsetY;
+
+        var dataByCoordSys = e.dataByCoordSys;
+        if (dataByCoordSys && dataByCoordSys.length) {
+            this._showAxisTooltip(dataByCoordSys, e);
+        }
+        // Always show item tooltip if mouse is on the element with dataIndex
+        else if (el && el.dataIndex != null) {
+            this._lastDataByCoordSys = null;
+            this._showSeriesItemTooltip(e, el, dispatchAction);
+        }
+        // Tooltip provided directly. Like legend.
+        else if (el && el.tooltip) {
+            this._lastDataByCoordSys = null;
+            this._showComponentItemTooltip(e, el, dispatchAction);
+        }
+        else {
+            this._lastDataByCoordSys = null;
+            this._hide(dispatchAction);
+        }
+    },
+
+    _showOrMove: function (tooltipModel, cb) {
+        // showDelay is used in this case: tooltip.enterable is set
+        // as true. User intent to move mouse into tooltip and click
+        // something. `showDelay` makes it easyer to enter the content
+        // but tooltip do not move immediately.
+        var delay = tooltipModel.get('showDelay');
+        cb = bind(cb, this);
+        clearTimeout(this._showTimout);
+        delay > 0
+            ? (this._showTimout = setTimeout(cb, delay))
+            : cb();
+    },
+
+    _showAxisTooltip: function (dataByCoordSys, e) {
+        var ecModel = this._ecModel;
+        var globalTooltipModel = this._tooltipModel;
+        var point = [e.offsetX, e.offsetY];
+        var singleDefaultHTML = [];
+        var singleParamsList = [];
+        var singleTooltipModel = buildTooltipModel([
+            e.tooltipOption,
+            globalTooltipModel
+        ]);
+
+        each$17(dataByCoordSys, function (itemCoordSys) {
+            // var coordParamList = [];
+            // var coordDefaultHTML = [];
+            // var coordTooltipModel = buildTooltipModel([
+            //     e.tooltipOption,
+            //     itemCoordSys.tooltipOption,
+            //     ecModel.getComponent(itemCoordSys.coordSysMainType, itemCoordSys.coordSysIndex),
+            //     globalTooltipModel
+            // ]);
+            // var displayMode = coordTooltipModel.get('displayMode');
+            // var paramsList = displayMode === 'single' ? singleParamsList : [];
+
+            each$17(itemCoordSys.dataByAxis, function (item) {
+                var axisModel = ecModel.getComponent(item.axisDim + 'Axis', item.axisIndex);
+                var axisValue = item.value;
+                var seriesDefaultHTML = [];
+
+                if (!axisModel || axisValue == null) {
+                    return;
+                }
+
+                var valueLabel = getValueLabel(
+                    axisValue, axisModel.axis, ecModel,
+                    item.seriesDataIndices,
+                    item.valueLabelOpt
+                );
+
+                each$1(item.seriesDataIndices, function (idxItem) {
+                    var series = ecModel.getSeriesByIndex(idxItem.seriesIndex);
+                    var dataIndex = idxItem.dataIndexInside;
+                    var dataParams = series && series.getDataParams(dataIndex);
+                    dataParams.axisDim = item.axisDim;
+                    dataParams.axisIndex = item.axisIndex;
+                    dataParams.axisType = item.axisType;
+                    dataParams.axisId = item.axisId;
+                    dataParams.axisValue = getAxisRawValue(axisModel.axis, axisValue);
+                    dataParams.axisValueLabel = valueLabel;
+
+                    if (dataParams) {
+                        singleParamsList.push(dataParams);
+                        seriesDefaultHTML.push(series.formatTooltip(dataIndex, true));
+                    }
+                });
+
+                // Default tooltip content
+                // FIXME
+                // (1) shold be the first data which has name?
+                // (2) themeRiver, firstDataIndex is array, and first line is unnecessary.
+                var firstLine = valueLabel;
+                singleDefaultHTML.push(
+                    (firstLine ? encodeHTML(firstLine) + '<br />' : '')
+                    + seriesDefaultHTML.join('<br />')
+                );
+            });
+        }, this);
+
+        // In most case, the second axis is shown upper than the first one.
+        singleDefaultHTML.reverse();
+        singleDefaultHTML = singleDefaultHTML.join('<br /><br />');
+
+        var positionExpr = e.position;
+        this._showOrMove(singleTooltipModel, function () {
+            if (this._updateContentNotChangedOnAxis(dataByCoordSys)) {
+                this._updatePosition(
+                    singleTooltipModel,
+                    positionExpr,
+                    point[0], point[1],
+                    this._tooltipContent,
+                    singleParamsList
+                );
+            }
+            else {
+                this._showTooltipContent(
+                    singleTooltipModel, singleDefaultHTML, singleParamsList, Math.random(),
+                    point[0], point[1], positionExpr
+                );
+            }
+        });
+
+        // Do not trigger events here, because this branch only be entered
+        // from dispatchAction.
+    },
+
+    _showSeriesItemTooltip: function (e, el, dispatchAction) {
+        var ecModel = this._ecModel;
+        // Use dataModel in element if possible
+        // Used when mouseover on a element like markPoint or edge
+        // In which case, the data is not main data in series.
+        var seriesIndex = el.seriesIndex;
+        var seriesModel = ecModel.getSeriesByIndex(seriesIndex);
+
+        // For example, graph link.
+        var dataModel = el.dataModel || seriesModel;
+        var dataIndex = el.dataIndex;
+        var dataType = el.dataType;
+        var data = dataModel.getData();
+
+        var tooltipModel = buildTooltipModel([
+            data.getItemModel(dataIndex),
+            dataModel,
+            seriesModel && (seriesModel.coordinateSystem || {}).model,
+            this._tooltipModel
+        ]);
+
+        var tooltipTrigger = tooltipModel.get('trigger');
+        if (tooltipTrigger != null && tooltipTrigger !== 'item') {
+            return;
+        }
+
+        var params = dataModel.getDataParams(dataIndex, dataType);
+        var defaultHtml = dataModel.formatTooltip(dataIndex, false, dataType);
+        var asyncTicket = 'item_' + dataModel.name + '_' + dataIndex;
+
+        this._showOrMove(tooltipModel, function () {
+            this._showTooltipContent(
+                tooltipModel, defaultHtml, params, asyncTicket,
+                e.offsetX, e.offsetY, e.position, e.target
+            );
+        });
+
+        // FIXME
+        // duplicated showtip if manuallyShowTip is called from dispatchAction.
+        dispatchAction({
+            type: 'showTip',
+            dataIndexInside: dataIndex,
+            dataIndex: data.getRawIndex(dataIndex),
+            seriesIndex: seriesIndex,
+            from: this.uid
+        });
+    },
+
+    _showComponentItemTooltip: function (e, el, dispatchAction) {
+        var tooltipOpt = el.tooltip;
+        if (typeof tooltipOpt === 'string') {
+            var content = tooltipOpt;
+            tooltipOpt = {
+                content: content,
+                // Fixed formatter
+                formatter: content
+            };
+        }
+        var subTooltipModel = new Model(tooltipOpt, this._tooltipModel, this._ecModel);
+        var defaultHtml = subTooltipModel.get('content');
+        var asyncTicket = Math.random();
+
+        // Do not check whether `trigger` is 'none' here, because `trigger`
+        // only works on cooridinate system. In fact, we have not found case
+        // that requires setting `trigger` nothing on component yet.
+
+        this._showOrMove(subTooltipModel, function () {
+            this._showTooltipContent(
+                subTooltipModel, defaultHtml, subTooltipModel.get('formatterParams') || {},
+                asyncTicket, e.offsetX, e.offsetY, e.position, el
+            );
+        });
+
+        // If not dispatch showTip, tip may be hide triggered by axis.
+        dispatchAction({
+            type: 'showTip',
+            from: this.uid
+        });
+    },
+
+    _showTooltipContent: function (
+        tooltipModel, defaultHtml, params, asyncTicket, x, y, positionExpr, el
+    ) {
+        // Reset ticket
+        this._ticket = '';
+
+        if (!tooltipModel.get('showContent') || !tooltipModel.get('show')) {
+            return;
+        }
+
+        var tooltipContent = this._tooltipContent;
+
+        var formatter = tooltipModel.get('formatter');
+        positionExpr = positionExpr || tooltipModel.get('position');
+        var html = defaultHtml;
+
+        if (formatter && typeof formatter === 'string') {
+            html = formatTpl(formatter, params, true);
+        }
+        else if (typeof formatter === 'function') {
+            var callback = bind$3(function (cbTicket, html) {
+                if (cbTicket === this._ticket) {
+                    tooltipContent.setContent(html);
+                    this._updatePosition(
+                        tooltipModel, positionExpr, x, y, tooltipContent, params, el
+                    );
+                }
+            }, this);
+            this._ticket = asyncTicket;
+            html = formatter(params, asyncTicket, callback);
+        }
+
+        tooltipContent.setContent(html);
+        tooltipContent.show(tooltipModel);
+
+        this._updatePosition(
+            tooltipModel, positionExpr, x, y, tooltipContent, params, el
+        );
+    },
+
+    /**
+     * @param  {string|Function|Array.<number>|Object} positionExpr
+     * @param  {number} x Mouse x
+     * @param  {number} y Mouse y
+     * @param  {boolean} confine Whether confine tooltip content in view rect.
+     * @param  {Object|<Array.<Object>} params
+     * @param  {module:zrender/Element} el target element
+     * @param  {module:echarts/ExtensionAPI} api
+     * @return {Array.<number>}
+     */
+    _updatePosition: function (tooltipModel, positionExpr, x, y, content, params, el) {
+        var viewWidth = this._api.getWidth();
+        var viewHeight = this._api.getHeight();
+        positionExpr = positionExpr || tooltipModel.get('position');
+
+        var contentSize = content.getSize();
+        var align = tooltipModel.get('align');
+        var vAlign = tooltipModel.get('verticalAlign');
+        var rect = el && el.getBoundingRect().clone();
+        el && rect.applyTransform(el.transform);
+
+        if (typeof positionExpr === 'function') {
+            // Callback of position can be an array or a string specify the position
+            positionExpr = positionExpr([x, y], params, content.el, rect, {
+                viewSize: [viewWidth, viewHeight],
+                contentSize: contentSize.slice()
+            });
+        }
+
+        if (isArray(positionExpr)) {
+            x = parsePercent$2(positionExpr[0], viewWidth);
+            y = parsePercent$2(positionExpr[1], viewHeight);
+        }
+        else if (isObject$1(positionExpr)) {
+            positionExpr.width = contentSize[0];
+            positionExpr.height = contentSize[1];
+            var layoutRect = getLayoutRect(
+                positionExpr, {width: viewWidth, height: viewHeight}
+            );
+            x = layoutRect.x;
+            y = layoutRect.y;
+            align = null;
+            // When positionExpr is left/top/right/bottom,
+            // align and verticalAlign will not work.
+            vAlign = null;
+        }
+        // Specify tooltip position by string 'top' 'bottom' 'left' 'right' around graphic element
+        else if (typeof positionExpr === 'string' && el) {
+            var pos = calcTooltipPosition(
+                positionExpr, rect, contentSize
+            );
+            x = pos[0];
+            y = pos[1];
+        }
+        else {
+            var pos = refixTooltipPosition(
+                x, y, content.el, viewWidth, viewHeight, align ? null : 20, vAlign ? null : 20
+            );
+            x = pos[0];
+            y = pos[1];
+        }
+
+        align && (x -= isCenterAlign(align) ? contentSize[0] / 2 : align === 'right' ? contentSize[0] : 0);
+        vAlign && (y -= isCenterAlign(vAlign) ? contentSize[1] / 2 : vAlign === 'bottom' ? contentSize[1] : 0);
+
+        if (tooltipModel.get('confine')) {
+            var pos = confineTooltipPosition(
+                x, y, content.el, viewWidth, viewHeight
+            );
+            x = pos[0];
+            y = pos[1];
+        }
+
+        content.moveTo(x, y);
+    },
+
+    // FIXME
+    // Should we remove this but leave this to user?
+    _updateContentNotChangedOnAxis: function (dataByCoordSys) {
+        var lastCoordSys = this._lastDataByCoordSys;
+        var contentNotChanged = !!lastCoordSys
+            && lastCoordSys.length === dataByCoordSys.length;
+
+        contentNotChanged && each$17(lastCoordSys, function (lastItemCoordSys, indexCoordSys) {
+            var lastDataByAxis = lastItemCoordSys.dataByAxis || {};
+            var thisItemCoordSys = dataByCoordSys[indexCoordSys] || {};
+            var thisDataByAxis = thisItemCoordSys.dataByAxis || [];
+            contentNotChanged &= lastDataByAxis.length === thisDataByAxis.length;
+
+            contentNotChanged && each$17(lastDataByAxis, function (lastItem, indexAxis) {
+                var thisItem = thisDataByAxis[indexAxis] || {};
+                var lastIndices = lastItem.seriesDataIndices || [];
+                var newIndices = thisItem.seriesDataIndices || [];
+
+                contentNotChanged &=
+                    lastItem.value === thisItem.value
+                    && lastItem.axisType === thisItem.axisType
+                    && lastItem.axisId === thisItem.axisId
+                    && lastIndices.length === newIndices.length;
+
+                contentNotChanged && each$17(lastIndices, function (lastIdxItem, j) {
+                    var newIdxItem = newIndices[j];
+                    contentNotChanged &=
+                        lastIdxItem.seriesIndex === newIdxItem.seriesIndex
+                        && lastIdxItem.dataIndex === newIdxItem.dataIndex;
+                });
+            });
+        });
+
+        this._lastDataByCoordSys = dataByCoordSys;
+
+        return !!contentNotChanged;
+    },
+
+    _hide: function (dispatchAction) {
+        // Do not directly hideLater here, because this behavior may be prevented
+        // in dispatchAction when showTip is dispatched.
+
+        // FIXME
+        // duplicated hideTip if manuallyHideTip is called from dispatchAction.
+        this._lastDataByCoordSys = null;
+        dispatchAction({
+            type: 'hideTip',
+            from: this.uid
+        });
+    },
+
+    dispose: function (ecModel, api) {
+        if (env$1.node || env$1.wxa) {
+            return;
+        }
+        this._tooltipContent.hide();
+        unregister('itemTooltip', api);
+    }
+});
+
+
+/**
+ * @param {Array.<Object|module:echarts/model/Model>} modelCascade
+ * From top to bottom. (the last one should be globalTooltipModel);
+ */
+function buildTooltipModel(modelCascade) {
+    var resultModel = modelCascade.pop();
+    while (modelCascade.length) {
+        var tooltipOpt = modelCascade.pop();
+        if (tooltipOpt) {
+            if (Model.isInstance(tooltipOpt)) {
+                tooltipOpt = tooltipOpt.get('tooltip', true);
+            }
+            // In each data item tooltip can be simply write:
+            // {
+            //  value: 10,
+            //  tooltip: 'Something you need to know'
+            // }
+            if (typeof tooltipOpt === 'string') {
+                tooltipOpt = {formatter: tooltipOpt};
+            }
+            resultModel = new Model(tooltipOpt, resultModel, resultModel.ecModel);
+        }
+    }
+    return resultModel;
+}
+
+function makeDispatchAction$1(payload, api) {
+    return payload.dispatchAction || bind(api.dispatchAction, api);
+}
+
+function refixTooltipPosition(x, y, el, viewWidth, viewHeight, gapH, gapV) {
+    var size = getOuterSize(el);
+    var width = size.width;
+    var height = size.height;
+
+    if (gapH != null) {
+        if (x + width + gapH > viewWidth) {
+            x -= width + gapH;
+        }
+        else {
+            x += gapH;
+        }
+    }
+    if (gapV != null) {
+        if (y + height + gapV > viewHeight) {
+            y -= height + gapV;
+        }
+        else {
+            y += gapV;
+        }
+    }
+    return [x, y];
+}
+
+function confineTooltipPosition(x, y, el, viewWidth, viewHeight) {
+    var size = getOuterSize(el);
+    var width = size.width;
+    var height = size.height;
+
+    x = Math.min(x + width, viewWidth) - width;
+    y = Math.min(y + height, viewHeight) - height;
+    x = Math.max(x, 0);
+    y = Math.max(y, 0);
+
+    return [x, y];
+}
+
+function getOuterSize(el) {
+    var width = el.clientWidth;
+    var height = el.clientHeight;
+
+    // Consider browser compatibility.
+    // IE8 does not support getComputedStyle.
+    if (document.defaultView && document.defaultView.getComputedStyle) {
+        var stl = document.defaultView.getComputedStyle(el);
+        if (stl) {
+            width += parseInt(stl.paddingLeft, 10) + parseInt(stl.paddingRight, 10)
+                + parseInt(stl.borderLeftWidth, 10) + parseInt(stl.borderRightWidth, 10);
+            height += parseInt(stl.paddingTop, 10) + parseInt(stl.paddingBottom, 10)
+                + parseInt(stl.borderTopWidth, 10) + parseInt(stl.borderBottomWidth, 10);
+        }
+    }
+
+    return {width: width, height: height};
+}
+
+function calcTooltipPosition(position, rect, contentSize) {
+    var domWidth = contentSize[0];
+    var domHeight = contentSize[1];
+    var gap = 5;
+    var x = 0;
+    var y = 0;
+    var rectWidth = rect.width;
+    var rectHeight = rect.height;
+    switch (position) {
+        case 'inside':
+            x = rect.x + rectWidth / 2 - domWidth / 2;
+            y = rect.y + rectHeight / 2 - domHeight / 2;
+            break;
+        case 'top':
+            x = rect.x + rectWidth / 2 - domWidth / 2;
+            y = rect.y - domHeight - gap;
+            break;
+        case 'bottom':
+            x = rect.x + rectWidth / 2 - domWidth / 2;
+            y = rect.y + rectHeight + gap;
+            break;
+        case 'left':
+            x = rect.x - domWidth - gap;
+            y = rect.y + rectHeight / 2 - domHeight / 2;
+            break;
+        case 'right':
+            x = rect.x + rectWidth + gap;
+            y = rect.y + rectHeight / 2 - domHeight / 2;
+    }
+    return [x, y];
+}
+
+function isCenterAlign(align) {
+    return align === 'center' || align === 'middle';
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// FIXME Better way to pack data in graphic element
+
+/**
+ * @action
+ * @property {string} type
+ * @property {number} seriesIndex
+ * @property {number} dataIndex
+ * @property {number} [x]
+ * @property {number} [y]
+ */
+registerAction(
+    {
+        type: 'showTip',
+        event: 'showTip',
+        update: 'tooltip:manuallyShowTip'
+    },
+    // noop
+    function () {}
+);
+
+registerAction(
+    {
+        type: 'hideTip',
+        event: 'hideTip',
+        update: 'tooltip:manuallyHideTip'
+    },
+    // noop
+    function () {}
+);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+function getSeriesStackId$1(seriesModel) {
+    return seriesModel.get('stack')
+        || '__ec_stack_' + seriesModel.seriesIndex;
+}
+
+function getAxisKey$1(axis) {
+    return axis.dim;
+}
+
+/**
+ * @param {string} seriesType
+ * @param {module:echarts/model/Global} ecModel
+ * @param {module:echarts/ExtensionAPI} api
+ */
+function barLayoutPolar(seriesType, ecModel, api) {
+
+    var width = api.getWidth();
+    var height = api.getHeight();
+
+    var lastStackCoords = {};
+
+    var barWidthAndOffset = calRadialBar(
+        filter(
+            ecModel.getSeriesByType(seriesType),
+            function (seriesModel) {
+                return !ecModel.isSeriesFiltered(seriesModel)
+                    && seriesModel.coordinateSystem
+                    && seriesModel.coordinateSystem.type === 'polar';
+            }
+        )
+    );
+
+    ecModel.eachSeriesByType(seriesType, function (seriesModel) {
+        // Check series coordinate, do layout for polar only
+        if (seriesModel.coordinateSystem.type !== 'polar') {
+            return;
+        }
+
+        var data = seriesModel.getData();
+        var polar = seriesModel.coordinateSystem;
+        var baseAxis = polar.getBaseAxis();
+
+        var stackId = getSeriesStackId$1(seriesModel);
+        var columnLayoutInfo
+            = barWidthAndOffset[getAxisKey$1(baseAxis)][stackId];
+        var columnOffset = columnLayoutInfo.offset;
+        var columnWidth = columnLayoutInfo.width;
+        var valueAxis = polar.getOtherAxis(baseAxis);
+
+        var center = seriesModel.get('center') || ['50%', '50%'];
+        var cx = parsePercent$1(center[0], width);
+        var cy = parsePercent$1(center[1], height);
+
+        var barMinHeight = seriesModel.get('barMinHeight') || 0;
+        var barMinAngle = seriesModel.get('barMinAngle') || 0;
+
+        lastStackCoords[stackId] = lastStackCoords[stackId] || [];
+
+        var valueDim = data.mapDimension(valueAxis.dim);
+        var baseDim = data.mapDimension(baseAxis.dim);
+        var stacked = isDimensionStacked(data, valueDim /*, baseDim*/);
+
+        var valueAxisStart = valueAxis.getExtent()[0];
+
+        for (var idx = 0, len = data.count(); idx < len; idx++) {
+            var value = data.get(valueDim, idx);
+            var baseValue = data.get(baseDim, idx);
+
+            if (isNaN(value)) {
+                continue;
+            }
+
+            var sign = value >= 0 ? 'p' : 'n';
+            var baseCoord = valueAxisStart;
+
+            // Because of the barMinHeight, we can not use the value in
+            // stackResultDimension directly.
+            // Only ordinal axis can be stacked.
+            if (stacked) {
+                if (!lastStackCoords[stackId][baseValue]) {
+                    lastStackCoords[stackId][baseValue] = {
+                        p: valueAxisStart, // Positive stack
+                        n: valueAxisStart  // Negative stack
+                    };
+                }
+                // Should also consider #4243
+                baseCoord = lastStackCoords[stackId][baseValue][sign];
+            }
+
+            var r0;
+            var r;
+            var startAngle;
+            var endAngle;
+
+            // radial sector
+            if (valueAxis.dim === 'radius') {
+                var radiusSpan = valueAxis.dataToRadius(value) - valueAxisStart;
+                var angle = baseAxis.dataToAngle(baseValue);
+
+                if (Math.abs(radiusSpan) < barMinHeight) {
+                    radiusSpan = (radiusSpan < 0 ? -1 : 1) * barMinHeight;
+                }
+
+                r0 = baseCoord;
+                r = baseCoord + radiusSpan;
+                startAngle = angle - columnOffset;
+                endAngle = startAngle - columnWidth;
+
+                stacked && (lastStackCoords[stackId][baseValue][sign] = r);
+            }
+            // tangential sector
+            else {
+                // angleAxis must be clamped.
+                var angleSpan = valueAxis.dataToAngle(value, true) - valueAxisStart;
+                var radius = baseAxis.dataToRadius(baseValue);
+
+                if (Math.abs(angleSpan) < barMinAngle) {
+                    angleSpan = (angleSpan < 0 ? -1 : 1) * barMinAngle;
+                }
+
+                r0 = radius + columnOffset;
+                r = r0 + columnWidth;
+                startAngle = baseCoord;
+                endAngle = baseCoord + angleSpan;
+
+                // if the previous stack is at the end of the ring,
+                // add a round to differentiate it from origin
+                // var extent = angleAxis.getExtent();
+                // var stackCoord = angle;
+                // if (stackCoord === extent[0] && value > 0) {
+                //     stackCoord = extent[1];
+                // }
+                // else if (stackCoord === extent[1] && value < 0) {
+                //     stackCoord = extent[0];
+                // }
+                stacked && (lastStackCoords[stackId][baseValue][sign] = endAngle);
+            }
+
+            data.setItemLayout(idx, {
+                cx: cx,
+                cy: cy,
+                r0: r0,
+                r: r,
+                // Consider that positive angle is anti-clockwise,
+                // while positive radian of sector is clockwise
+                startAngle: -startAngle * Math.PI / 180,
+                endAngle: -endAngle * Math.PI / 180
+            });
+
+        }
+
+    }, this);
+
+}
+
+/**
+ * Calculate bar width and offset for radial bar charts
+ */
+function calRadialBar(barSeries, api) {
+    // Columns info on each category axis. Key is polar name
+    var columnsMap = {};
+
+    each$1(barSeries, function (seriesModel, idx) {
+        var data = seriesModel.getData();
+        var polar = seriesModel.coordinateSystem;
+
+        var baseAxis = polar.getBaseAxis();
+
+        var axisExtent = baseAxis.getExtent();
+        var bandWidth = baseAxis.type === 'category'
+            ? baseAxis.getBandWidth()
+            : (Math.abs(axisExtent[1] - axisExtent[0]) / data.count());
+
+        var columnsOnAxis = columnsMap[getAxisKey$1(baseAxis)] || {
+            bandWidth: bandWidth,
+            remainedWidth: bandWidth,
+            autoWidthCount: 0,
+            categoryGap: '20%',
+            gap: '30%',
+            stacks: {}
+        };
+        var stacks = columnsOnAxis.stacks;
+        columnsMap[getAxisKey$1(baseAxis)] = columnsOnAxis;
+
+        var stackId = getSeriesStackId$1(seriesModel);
+
+        if (!stacks[stackId]) {
+            columnsOnAxis.autoWidthCount++;
+        }
+        stacks[stackId] = stacks[stackId] || {
+            width: 0,
+            maxWidth: 0
+        };
+
+        var barWidth = parsePercent$1(
+            seriesModel.get('barWidth'),
+            bandWidth
+        );
+        var barMaxWidth = parsePercent$1(
+            seriesModel.get('barMaxWidth'),
+            bandWidth
+        );
+        var barGap = seriesModel.get('barGap');
+        var barCategoryGap = seriesModel.get('barCategoryGap');
+
+        if (barWidth && !stacks[stackId].width) {
+            barWidth = Math.min(columnsOnAxis.remainedWidth, barWidth);
+            stacks[stackId].width = barWidth;
+            columnsOnAxis.remainedWidth -= barWidth;
+        }
+
+        barMaxWidth && (stacks[stackId].maxWidth = barMaxWidth);
+        (barGap != null) && (columnsOnAxis.gap = barGap);
+        (barCategoryGap != null) && (columnsOnAxis.categoryGap = barCategoryGap);
+    });
+
+
+    var result = {};
+
+    each$1(columnsMap, function (columnsOnAxis, coordSysName) {
+
+        result[coordSysName] = {};
+
+        var stacks = columnsOnAxis.stacks;
+        var bandWidth = columnsOnAxis.bandWidth;
+        var categoryGap = parsePercent$1(columnsOnAxis.categoryGap, bandWidth);
+        var barGapPercent = parsePercent$1(columnsOnAxis.gap, 1);
+
+        var remainedWidth = columnsOnAxis.remainedWidth;
+        var autoWidthCount = columnsOnAxis.autoWidthCount;
+        var autoWidth = (remainedWidth - categoryGap)
+            / (autoWidthCount + (autoWidthCount - 1) * barGapPercent);
+        autoWidth = Math.max(autoWidth, 0);
+
+        // Find if any auto calculated bar exceeded maxBarWidth
+        each$1(stacks, function (column, stack) {
+            var maxWidth = column.maxWidth;
+            if (maxWidth && maxWidth < autoWidth) {
+                maxWidth = Math.min(maxWidth, remainedWidth);
+                if (column.width) {
+                    maxWidth = Math.min(maxWidth, column.width);
+                }
+                remainedWidth -= maxWidth;
+                column.width = maxWidth;
+                autoWidthCount--;
+            }
+        });
+
+        // Recalculate width again
+        autoWidth = (remainedWidth - categoryGap)
+            / (autoWidthCount + (autoWidthCount - 1) * barGapPercent);
+        autoWidth = Math.max(autoWidth, 0);
+
+        var widthSum = 0;
+        var lastColumn;
+        each$1(stacks, function (column, idx) {
+            if (!column.width) {
+                column.width = autoWidth;
+            }
+            lastColumn = column;
+            widthSum += column.width * (1 + barGapPercent);
+        });
+        if (lastColumn) {
+            widthSum -= lastColumn.width * barGapPercent;
+        }
+
+        var offset = -widthSum / 2;
+        each$1(stacks, function (column, stackId) {
+            result[coordSysName][stackId] = result[coordSysName][stackId] || {
+                offset: offset,
+                width: column.width
+            };
+
+            offset += column.width * (1 + barGapPercent);
+        });
+    });
+
+    return result;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+function RadiusAxis(scale, radiusExtent) {
+
+    Axis.call(this, 'radius', scale, radiusExtent);
+
+    /**
+     * Axis type
+     *  - 'category'
+     *  - 'value'
+     *  - 'time'
+     *  - 'log'
+     * @type {string}
+     */
+    this.type = 'category';
+}
+
+RadiusAxis.prototype = {
+
+    constructor: RadiusAxis,
+
+    /**
+     * @override
+     */
+    pointToData: function (point, clamp) {
+        return this.polar.pointToData(point, clamp)[this.dim === 'radius' ? 0 : 1];
+    },
+
+    dataToRadius: Axis.prototype.dataToCoord,
+
+    radiusToData: Axis.prototype.coordToData
+};
+
+inherits(RadiusAxis, Axis);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+function AngleAxis(scale, angleExtent) {
+
+    angleExtent = angleExtent || [0, 360];
+
+    Axis.call(this, 'angle', scale, angleExtent);
+
+    /**
+     * Axis type
+     *  - 'category'
+     *  - 'value'
+     *  - 'time'
+     *  - 'log'
+     * @type {string}
+     */
+    this.type = 'category';
+}
+
+AngleAxis.prototype = {
+
+    constructor: AngleAxis,
+
+    /**
+     * @override
+     */
+    pointToData: function (point, clamp) {
+        return this.polar.pointToData(point, clamp)[this.dim === 'radius' ? 0 : 1];
+    },
+
+    dataToAngle: Axis.prototype.dataToCoord,
+
+    angleToData: Axis.prototype.coordToData
+};
+
+inherits(AngleAxis, Axis);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @module echarts/coord/polar/Polar
+ */
+
+/**
+ * @alias {module:echarts/coord/polar/Polar}
+ * @constructor
+ * @param {string} name
+ */
+var Polar = function (name) {
+
+    /**
+     * @type {string}
+     */
+    this.name = name || '';
+
+    /**
+     * x of polar center
+     * @type {number}
+     */
+    this.cx = 0;
+
+    /**
+     * y of polar center
+     * @type {number}
+     */
+    this.cy = 0;
+
+    /**
+     * @type {module:echarts/coord/polar/RadiusAxis}
+     * @private
+     */
+    this._radiusAxis = new RadiusAxis();
+
+    /**
+     * @type {module:echarts/coord/polar/AngleAxis}
+     * @private
+     */
+    this._angleAxis = new AngleAxis();
+
+    this._radiusAxis.polar = this._angleAxis.polar = this;
+};
+
+Polar.prototype = {
+
+    type: 'polar',
+
+    axisPointerEnabled: true,
+
+    constructor: Polar,
+
+    /**
+     * @param {Array.<string>}
+     * @readOnly
+     */
+    dimensions: ['radius', 'angle'],
+
+    /**
+     * @type {module:echarts/coord/PolarModel}
+     */
+    model: null,
+
+    /**
+     * If contain coord
+     * @param {Array.<number>} point
+     * @return {boolean}
+     */
+    containPoint: function (point) {
+        var coord = this.pointToCoord(point);
+        return this._radiusAxis.contain(coord[0])
+            && this._angleAxis.contain(coord[1]);
+    },
+
+    /**
+     * If contain data
+     * @param {Array.<number>} data
+     * @return {boolean}
+     */
+    containData: function (data) {
+        return this._radiusAxis.containData(data[0])
+            && this._angleAxis.containData(data[1]);
+    },
+
+    /**
+     * @param {string} dim
+     * @return {module:echarts/coord/polar/AngleAxis|module:echarts/coord/polar/RadiusAxis}
+     */
+    getAxis: function (dim) {
+        return this['_' + dim + 'Axis'];
+    },
+
+    /**
+     * @return {Array.<module:echarts/coord/Axis>}
+     */
+    getAxes: function () {
+        return [this._radiusAxis, this._angleAxis];
+    },
+
+    /**
+     * Get axes by type of scale
+     * @param {string} scaleType
+     * @return {module:echarts/coord/polar/AngleAxis|module:echarts/coord/polar/RadiusAxis}
+     */
+    getAxesByScale: function (scaleType) {
+        var axes = [];
+        var angleAxis = this._angleAxis;
+        var radiusAxis = this._radiusAxis;
+        angleAxis.scale.type === scaleType && axes.push(angleAxis);
+        radiusAxis.scale.type === scaleType && axes.push(radiusAxis);
+
+        return axes;
+    },
+
+    /**
+     * @return {module:echarts/coord/polar/AngleAxis}
+     */
+    getAngleAxis: function () {
+        return this._angleAxis;
+    },
+
+    /**
+     * @return {module:echarts/coord/polar/RadiusAxis}
+     */
+    getRadiusAxis: function () {
+        return this._radiusAxis;
+    },
+
+    /**
+     * @param {module:echarts/coord/polar/Axis}
+     * @return {module:echarts/coord/polar/Axis}
+     */
+    getOtherAxis: function (axis) {
+        var angleAxis = this._angleAxis;
+        return axis === angleAxis ? this._radiusAxis : angleAxis;
+    },
+
+    /**
+     * Base axis will be used on stacking.
+     *
+     * @return {module:echarts/coord/polar/Axis}
+     */
+    getBaseAxis: function () {
+        return this.getAxesByScale('ordinal')[0]
+            || this.getAxesByScale('time')[0]
+            || this.getAngleAxis();
+    },
+
+    /**
+     * @param {string} [dim] 'radius' or 'angle' or 'auto' or null/undefined
+     * @return {Object} {baseAxes: [], otherAxes: []}
+     */
+    getTooltipAxes: function (dim) {
+        var baseAxis = (dim != null && dim !== 'auto')
+            ? this.getAxis(dim) : this.getBaseAxis();
+        return {
+            baseAxes: [baseAxis],
+            otherAxes: [this.getOtherAxis(baseAxis)]
+        };
+    },
+
+    /**
+     * Convert a single data item to (x, y) point.
+     * Parameter data is an array which the first element is radius and the second is angle
+     * @param {Array.<number>} data
+     * @param {boolean} [clamp=false]
+     * @return {Array.<number>}
+     */
+    dataToPoint: function (data, clamp) {
+        return this.coordToPoint([
+            this._radiusAxis.dataToRadius(data[0], clamp),
+            this._angleAxis.dataToAngle(data[1], clamp)
+        ]);
+    },
+
+    /**
+     * Convert a (x, y) point to data
+     * @param {Array.<number>} point
+     * @param {boolean} [clamp=false]
+     * @return {Array.<number>}
+     */
+    pointToData: function (point, clamp) {
+        var coord = this.pointToCoord(point);
+        return [
+            this._radiusAxis.radiusToData(coord[0], clamp),
+            this._angleAxis.angleToData(coord[1], clamp)
+        ];
+    },
+
+    /**
+     * Convert a (x, y) point to (radius, angle) coord
+     * @param {Array.<number>} point
+     * @return {Array.<number>}
+     */
+    pointToCoord: function (point) {
+        var dx = point[0] - this.cx;
+        var dy = point[1] - this.cy;
+        var angleAxis = this.getAngleAxis();
+        var extent = angleAxis.getExtent();
+        var minAngle = Math.min(extent[0], extent[1]);
+        var maxAngle = Math.max(extent[0], extent[1]);
+        // Fix fixed extent in polarCreator
+        // FIXME
+        angleAxis.inverse
+            ? (minAngle = maxAngle - 360)
+            : (maxAngle = minAngle + 360);
+
+        var radius = Math.sqrt(dx * dx + dy * dy);
+        dx /= radius;
+        dy /= radius;
+
+        var radian = Math.atan2(-dy, dx) / Math.PI * 180;
+
+        // move to angleExtent
+        var dir = radian < minAngle ? 1 : -1;
+        while (radian < minAngle || radian > maxAngle) {
+            radian += dir * 360;
+        }
+
+        return [radius, radian];
+    },
+
+    /**
+     * Convert a (radius, angle) coord to (x, y) point
+     * @param {Array.<number>} coord
+     * @return {Array.<number>}
+     */
+    coordToPoint: function (coord) {
+        var radius = coord[0];
+        var radian = coord[1] / 180 * Math.PI;
+        var x = Math.cos(radian) * radius + this.cx;
+        // Inverse the y
+        var y = -Math.sin(radian) * radius + this.cy;
+
+        return [x, y];
+    }
+
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var PolarAxisModel = ComponentModel.extend({
+
+    type: 'polarAxis',
+
+    /**
+     * @type {module:echarts/coord/polar/AngleAxis|module:echarts/coord/polar/RadiusAxis}
+     */
+    axis: null,
+
+    /**
+     * @override
+     */
+    getCoordSysModel: function () {
+        return this.ecModel.queryComponents({
+            mainType: 'polar',
+            index: this.option.polarIndex,
+            id: this.option.polarId
+        })[0];
+    }
+
+});
+
+merge(PolarAxisModel.prototype, axisModelCommonMixin);
+
+var polarAxisDefaultExtendedOption = {
+    angle: {
+        // polarIndex: 0,
+        // polarId: '',
+
+        startAngle: 90,
+
+        clockwise: true,
+
+        splitNumber: 12,
+
+        axisLabel: {
+            rotate: false
+        }
+    },
+    radius: {
+        // polarIndex: 0,
+        // polarId: '',
+
+        splitNumber: 5
+    }
+};
+
+function getAxisType$3(axisDim, option) {
+    // Default axis with data is category axis
+    return option.type || (option.data ? 'category' : 'value');
+}
+
+axisModelCreator('angle', PolarAxisModel, getAxisType$3, polarAxisDefaultExtendedOption.angle);
+axisModelCreator('radius', PolarAxisModel, getAxisType$3, polarAxisDefaultExtendedOption.radius);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+extendComponentModel({
+
+    type: 'polar',
+
+    dependencies: ['polarAxis', 'angleAxis'],
+
+    /**
+     * @type {module:echarts/coord/polar/Polar}
+     */
+    coordinateSystem: null,
+
+    /**
+     * @param {string} axisType
+     * @return {module:echarts/coord/polar/AxisModel}
+     */
+    findAxisModel: function (axisType) {
+        var foundAxisModel;
+        var ecModel = this.ecModel;
+
+        ecModel.eachComponent(axisType, function (axisModel) {
+            if (axisModel.getCoordSysModel() === this) {
+                foundAxisModel = axisModel;
+            }
+        }, this);
+        return foundAxisModel;
+    },
+
+    defaultOption: {
+
+        zlevel: 0,
+
+        z: 0,
+
+        center: ['50%', '50%'],
+
+        radius: '80%'
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// TODO Axis scale
+
+/**
+ * Resize method bound to the polar
+ * @param {module:echarts/coord/polar/PolarModel} polarModel
+ * @param {module:echarts/ExtensionAPI} api
+ */
+function resizePolar(polar, polarModel, api) {
+    var center = polarModel.get('center');
+    var width = api.getWidth();
+    var height = api.getHeight();
+
+    polar.cx = parsePercent$1(center[0], width);
+    polar.cy = parsePercent$1(center[1], height);
+
+    var radiusAxis = polar.getRadiusAxis();
+    var size = Math.min(width, height) / 2;
+    var radius = parsePercent$1(polarModel.get('radius'), size);
+    radiusAxis.inverse
+        ? radiusAxis.setExtent(radius, 0)
+        : radiusAxis.setExtent(0, radius);
+}
+
+/**
+ * Update polar
+ */
+function updatePolarScale(ecModel, api) {
+    var polar = this;
+    var angleAxis = polar.getAngleAxis();
+    var radiusAxis = polar.getRadiusAxis();
+    // Reset scale
+    angleAxis.scale.setExtent(Infinity, -Infinity);
+    radiusAxis.scale.setExtent(Infinity, -Infinity);
+
+    ecModel.eachSeries(function (seriesModel) {
+        if (seriesModel.coordinateSystem === polar) {
+            var data = seriesModel.getData();
+            each$1(data.mapDimension('radius', true), function (dim) {
+                radiusAxis.scale.unionExtentFromData(
+                    data, getStackedDimension(data, dim)
+                );
+            });
+            each$1(data.mapDimension('angle', true), function (dim) {
+                angleAxis.scale.unionExtentFromData(
+                    data, getStackedDimension(data, dim)
+                );
+            });
+        }
+    });
+
+    niceScaleExtent(angleAxis.scale, angleAxis.model);
+    niceScaleExtent(radiusAxis.scale, radiusAxis.model);
+
+    // Fix extent of category angle axis
+    if (angleAxis.type === 'category' && !angleAxis.onBand) {
+        var extent = angleAxis.getExtent();
+        var diff = 360 / angleAxis.scale.count();
+        angleAxis.inverse ? (extent[1] += diff) : (extent[1] -= diff);
+        angleAxis.setExtent(extent[0], extent[1]);
+    }
+}
+
+/**
+ * Set common axis properties
+ * @param {module:echarts/coord/polar/AngleAxis|module:echarts/coord/polar/RadiusAxis}
+ * @param {module:echarts/coord/polar/AxisModel}
+ * @inner
+ */
+function setAxis(axis, axisModel) {
+    axis.type = axisModel.get('type');
+    axis.scale = createScaleByModel(axisModel);
+    axis.onBand = axisModel.get('boundaryGap') && axis.type === 'category';
+    axis.inverse = axisModel.get('inverse');
+
+    if (axisModel.mainType === 'angleAxis') {
+        axis.inverse ^= axisModel.get('clockwise');
+        var startAngle = axisModel.get('startAngle');
+        axis.setExtent(startAngle, startAngle + (axis.inverse ? -360 : 360));
+    }
+
+    // Inject axis instance
+    axisModel.axis = axis;
+    axis.model = axisModel;
+}
+
+
+var polarCreator = {
+
+    dimensions: Polar.prototype.dimensions,
+
+    create: function (ecModel, api) {
+        var polarList = [];
+        ecModel.eachComponent('polar', function (polarModel, idx) {
+            var polar = new Polar(idx);
+            // Inject resize and update method
+            polar.update = updatePolarScale;
+
+            var radiusAxis = polar.getRadiusAxis();
+            var angleAxis = polar.getAngleAxis();
+
+            var radiusAxisModel = polarModel.findAxisModel('radiusAxis');
+            var angleAxisModel = polarModel.findAxisModel('angleAxis');
+
+            setAxis(radiusAxis, radiusAxisModel);
+            setAxis(angleAxis, angleAxisModel);
+
+            resizePolar(polar, polarModel, api);
+
+            polarList.push(polar);
+
+            polarModel.coordinateSystem = polar;
+            polar.model = polarModel;
+        });
+        // Inject coordinateSystem to series
+        ecModel.eachSeries(function (seriesModel) {
+            if (seriesModel.get('coordinateSystem') === 'polar') {
+                var polarModel = ecModel.queryComponents({
+                    mainType: 'polar',
+                    index: seriesModel.get('polarIndex'),
+                    id: seriesModel.get('polarId')
+                })[0];
+
+                if (__DEV__) {
+                    if (!polarModel) {
+                        throw new Error(
+                            'Polar "' + retrieve(
+                                seriesModel.get('polarIndex'),
+                                seriesModel.get('polarId'),
+                                0
+                            ) + '" not found'
+                        );
+                    }
+                }
+                seriesModel.coordinateSystem = polarModel.coordinateSystem;
+            }
+        });
+
+        return polarList;
+    }
+};
+
+CoordinateSystemManager.register('polar', polarCreator);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var elementList$1 = ['axisLine', 'axisLabel', 'axisTick', 'splitLine', 'splitArea'];
+
+function getAxisLineShape(polar, rExtent, angle) {
+    rExtent[1] > rExtent[0] && (rExtent = rExtent.slice().reverse());
+    var start = polar.coordToPoint([rExtent[0], angle]);
+    var end = polar.coordToPoint([rExtent[1], angle]);
+
+    return {
+        x1: start[0],
+        y1: start[1],
+        x2: end[0],
+        y2: end[1]
+    };
+}
+
+function getRadiusIdx(polar) {
+    var radiusAxis = polar.getRadiusAxis();
+    return radiusAxis.inverse ? 0 : 1;
+}
+
+// Remove the last tick which will overlap the first tick
+function fixAngleOverlap(list) {
+    var firstItem = list[0];
+    var lastItem = list[list.length - 1];
+    if (firstItem
+        && lastItem
+        && Math.abs(Math.abs(firstItem.coord - lastItem.coord) - 360) < 1e-4
+    ) {
+        list.pop();
+    }
+}
+
+AxisView.extend({
+
+    type: 'angleAxis',
+
+    axisPointerClass: 'PolarAxisPointer',
+
+    render: function (angleAxisModel, ecModel) {
+        this.group.removeAll();
+        if (!angleAxisModel.get('show')) {
+            return;
+        }
+
+        var angleAxis = angleAxisModel.axis;
+        var polar = angleAxis.polar;
+        var radiusExtent = polar.getRadiusAxis().getExtent();
+
+        var ticksAngles = angleAxis.getTicksCoords();
+        var labels = map(angleAxis.getViewLabels(), function (labelItem) {
+            var labelItem = clone(labelItem);
+            labelItem.coord = angleAxis.dataToCoord(labelItem.tickValue);
+            return labelItem;
+        });
+
+        fixAngleOverlap(labels);
+        fixAngleOverlap(ticksAngles);
+
+        each$1(elementList$1, function (name) {
+            if (angleAxisModel.get(name +'.show')
+                && (!angleAxis.scale.isBlank() || name === 'axisLine')
+            ) {
+                this['_' + name](angleAxisModel, polar, ticksAngles, radiusExtent, labels);
+            }
+        }, this);
+    },
+
+    /**
+     * @private
+     */
+    _axisLine: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
+        var lineStyleModel = angleAxisModel.getModel('axisLine.lineStyle');
+
+        var circle = new Circle({
+            shape: {
+                cx: polar.cx,
+                cy: polar.cy,
+                r: radiusExtent[getRadiusIdx(polar)]
+            },
+            style: lineStyleModel.getLineStyle(),
+            z2: 1,
+            silent: true
+        });
+        circle.style.fill = null;
+
+        this.group.add(circle);
+    },
+
+    /**
+     * @private
+     */
+    _axisTick: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
+        var tickModel = angleAxisModel.getModel('axisTick');
+
+        var tickLen = (tickModel.get('inside') ? -1 : 1) * tickModel.get('length');
+        var radius = radiusExtent[getRadiusIdx(polar)];
+
+        var lines = map(ticksAngles, function (tickAngleItem) {
+            return new Line({
+                shape: getAxisLineShape(polar, [radius, radius + tickLen], tickAngleItem.coord)
+            });
+        });
+        this.group.add(mergePath(
+            lines, {
+                style: defaults(
+                    tickModel.getModel('lineStyle').getLineStyle(),
+                    {
+                        stroke: angleAxisModel.get('axisLine.lineStyle.color')
+                    }
+                )
+            }
+        ));
+    },
+
+    /**
+     * @private
+     */
+    _axisLabel: function (angleAxisModel, polar, ticksAngles, radiusExtent, labels) {
+        var rawCategoryData = angleAxisModel.getCategories(true);
+
+        var commonLabelModel = angleAxisModel.getModel('axisLabel');
+
+        var labelMargin = commonLabelModel.get('margin');
+
+        // Use length of ticksAngles because it may remove the last tick to avoid overlapping
+        each$1(labels, function (labelItem, idx) {
+            var labelModel = commonLabelModel;
+            var tickValue = labelItem.tickValue;
+
+            var r = radiusExtent[getRadiusIdx(polar)];
+            var p = polar.coordToPoint([r + labelMargin, labelItem.coord]);
+            var cx = polar.cx;
+            var cy = polar.cy;
+
+            var labelTextAlign = Math.abs(p[0] - cx) / r < 0.3
+                ? 'center' : (p[0] > cx ? 'left' : 'right');
+            var labelTextVerticalAlign = Math.abs(p[1] - cy) / r < 0.3
+                ? 'middle' : (p[1] > cy ? 'top' : 'bottom');
+
+            if (rawCategoryData && rawCategoryData[tickValue] && rawCategoryData[tickValue].textStyle) {
+                labelModel = new Model(rawCategoryData[tickValue].textStyle, commonLabelModel, commonLabelModel.ecModel);
+            }
+
+            var textEl = new Text({silent: true});
+            this.group.add(textEl);
+            setTextStyle(textEl.style, labelModel, {
+                x: p[0],
+                y: p[1],
+                textFill: labelModel.getTextColor() || angleAxisModel.get('axisLine.lineStyle.color'),
+                text: labelItem.formattedLabel,
+                textAlign: labelTextAlign,
+                textVerticalAlign: labelTextVerticalAlign
+            });
+        }, this);
+    },
+
+    /**
+     * @private
+     */
+    _splitLine: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
+        var splitLineModel = angleAxisModel.getModel('splitLine');
+        var lineStyleModel = splitLineModel.getModel('lineStyle');
+        var lineColors = lineStyleModel.get('color');
+        var lineCount = 0;
+
+        lineColors = lineColors instanceof Array ? lineColors : [lineColors];
+
+        var splitLines = [];
+
+        for (var i = 0; i < ticksAngles.length; i++) {
+            var colorIndex = (lineCount++) % lineColors.length;
+            splitLines[colorIndex] = splitLines[colorIndex] || [];
+            splitLines[colorIndex].push(new Line({
+                shape: getAxisLineShape(polar, radiusExtent, ticksAngles[i].coord)
+            }));
+        }
+
+        // Simple optimization
+        // Batching the lines if color are the same
+        for (var i = 0; i < splitLines.length; i++) {
+            this.group.add(mergePath(splitLines[i], {
+                style: defaults({
+                    stroke: lineColors[i % lineColors.length]
+                }, lineStyleModel.getLineStyle()),
+                silent: true,
+                z: angleAxisModel.get('z')
+            }));
+        }
+    },
+
+    /**
+     * @private
+     */
+    _splitArea: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
+        if (!ticksAngles.length) {
+            return;
+        }
+
+        var splitAreaModel = angleAxisModel.getModel('splitArea');
+        var areaStyleModel = splitAreaModel.getModel('areaStyle');
+        var areaColors = areaStyleModel.get('color');
+        var lineCount = 0;
+
+        areaColors = areaColors instanceof Array ? areaColors : [areaColors];
+
+        var splitAreas = [];
+
+        var RADIAN = Math.PI / 180;
+        var prevAngle = -ticksAngles[0].coord * RADIAN;
+        var r0 = Math.min(radiusExtent[0], radiusExtent[1]);
+        var r1 = Math.max(radiusExtent[0], radiusExtent[1]);
+
+        var clockwise = angleAxisModel.get('clockwise');
+
+        for (var i = 1; i < ticksAngles.length; i++) {
+            var colorIndex = (lineCount++) % areaColors.length;
+            splitAreas[colorIndex] = splitAreas[colorIndex] || [];
+            splitAreas[colorIndex].push(new Sector({
+                shape: {
+                    cx: polar.cx,
+                    cy: polar.cy,
+                    r0: r0,
+                    r: r1,
+                    startAngle: prevAngle,
+                    endAngle: -ticksAngles[i].coord * RADIAN,
+                    clockwise: clockwise
+                },
+                silent: true
+            }));
+            prevAngle = -ticksAngles[i].coord * RADIAN;
+        }
+
+        // Simple optimization
+        // Batching the lines if color are the same
+        for (var i = 0; i < splitAreas.length; i++) {
+            this.group.add(mergePath(splitAreas[i], {
+                style: defaults({
+                    fill: areaColors[i % areaColors.length]
+                }, areaStyleModel.getAreaStyle()),
+                silent: true
+            }));
+        }
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var axisBuilderAttrs$3 = [
+    'axisLine', 'axisTickLabel', 'axisName'
+];
+var selfBuilderAttrs$1 = [
+    'splitLine', 'splitArea'
+];
+
+AxisView.extend({
+
+    type: 'radiusAxis',
+
+    axisPointerClass: 'PolarAxisPointer',
+
+    render: function (radiusAxisModel, ecModel) {
+        this.group.removeAll();
+        if (!radiusAxisModel.get('show')) {
+            return;
+        }
+        var radiusAxis = radiusAxisModel.axis;
+        var polar = radiusAxis.polar;
+        var angleAxis = polar.getAngleAxis();
+        var ticksCoords = radiusAxis.getTicksCoords();
+        var axisAngle = angleAxis.getExtent()[0];
+        var radiusExtent = radiusAxis.getExtent();
+
+        var layout = layoutAxis(polar, radiusAxisModel, axisAngle);
+        var axisBuilder = new AxisBuilder(radiusAxisModel, layout);
+        each$1(axisBuilderAttrs$3, axisBuilder.add, axisBuilder);
+        this.group.add(axisBuilder.getGroup());
+
+        each$1(selfBuilderAttrs$1, function (name) {
+            if (radiusAxisModel.get(name +'.show') && !radiusAxis.scale.isBlank()) {
+                this['_' + name](radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords);
+            }
+        }, this);
+    },
+
+    /**
+     * @private
+     */
+    _splitLine: function (radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords) {
+        var splitLineModel = radiusAxisModel.getModel('splitLine');
+        var lineStyleModel = splitLineModel.getModel('lineStyle');
+        var lineColors = lineStyleModel.get('color');
+        var lineCount = 0;
+
+        lineColors = lineColors instanceof Array ? lineColors : [lineColors];
+
+        var splitLines = [];
+
+        for (var i = 0; i < ticksCoords.length; i++) {
+            var colorIndex = (lineCount++) % lineColors.length;
+            splitLines[colorIndex] = splitLines[colorIndex] || [];
+            splitLines[colorIndex].push(new Circle({
+                shape: {
+                    cx: polar.cx,
+                    cy: polar.cy,
+                    r: ticksCoords[i].coord
+                },
+                silent: true
+            }));
+        }
+
+        // Simple optimization
+        // Batching the lines if color are the same
+        for (var i = 0; i < splitLines.length; i++) {
+            this.group.add(mergePath(splitLines[i], {
+                style: defaults({
+                    stroke: lineColors[i % lineColors.length],
+                    fill: null
+                }, lineStyleModel.getLineStyle()),
+                silent: true
+            }));
+        }
+    },
+
+    /**
+     * @private
+     */
+    _splitArea: function (radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords) {
+        if (!ticksCoords.length) {
+            return;
+        }
+
+        var splitAreaModel = radiusAxisModel.getModel('splitArea');
+        var areaStyleModel = splitAreaModel.getModel('areaStyle');
+        var areaColors = areaStyleModel.get('color');
+        var lineCount = 0;
+
+        areaColors = areaColors instanceof Array ? areaColors : [areaColors];
+
+        var splitAreas = [];
+
+        var prevRadius = ticksCoords[0].coord;
+        for (var i = 1; i < ticksCoords.length; i++) {
+            var colorIndex = (lineCount++) % areaColors.length;
+            splitAreas[colorIndex] = splitAreas[colorIndex] || [];
+            splitAreas[colorIndex].push(new Sector({
+                shape: {
+                    cx: polar.cx,
+                    cy: polar.cy,
+                    r0: prevRadius,
+                    r: ticksCoords[i].coord,
+                    startAngle: 0,
+                    endAngle: Math.PI * 2
+                },
+                silent: true
+            }));
+            prevRadius = ticksCoords[i].coord;
+        }
+
+        // Simple optimization
+        // Batching the lines if color are the same
+        for (var i = 0; i < splitAreas.length; i++) {
+            this.group.add(mergePath(splitAreas[i], {
+                style: defaults({
+                    fill: areaColors[i % areaColors.length]
+                }, areaStyleModel.getAreaStyle()),
+                silent: true
+            }));
+        }
+    }
+});
+
+/**
+ * @inner
+ */
+function layoutAxis(polar, radiusAxisModel, axisAngle) {
+    return {
+        position: [polar.cx, polar.cy],
+        rotation: axisAngle / 180 * Math.PI,
+        labelDirection: -1,
+        tickDirection: -1,
+        nameDirection: 1,
+        labelRotate: radiusAxisModel.getModel('axisLabel').get('rotate'),
+        // Over splitLine and splitArea
+        z2: 1
+    };
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var PolarAxisPointer = BaseAxisPointer.extend({
+
+    /**
+     * @override
+     */
+    makeElOption: function (elOption, value, axisModel, axisPointerModel, api) {
+        var axis = axisModel.axis;
+
+        if (axis.dim === 'angle') {
+            this.animationThreshold = Math.PI / 18;
+        }
+
+        var polar = axis.polar;
+        var otherAxis = polar.getOtherAxis(axis);
+        var otherExtent = otherAxis.getExtent();
+
+        var coordValue;
+        coordValue = axis['dataTo' + capitalFirst(axis.dim)](value);
+
+        var axisPointerType = axisPointerModel.get('type');
+        if (axisPointerType && axisPointerType !== 'none') {
+            var elStyle = buildElStyle(axisPointerModel);
+            var pointerOption = pointerShapeBuilder$2[axisPointerType](
+                axis, polar, coordValue, otherExtent, elStyle
+            );
+            pointerOption.style = elStyle;
+            elOption.graphicKey = pointerOption.type;
+            elOption.pointer = pointerOption;
+        }
+
+        var labelMargin = axisPointerModel.get('label.margin');
+        var labelPos = getLabelPosition(value, axisModel, axisPointerModel, polar, labelMargin);
+        buildLabelElOption(elOption, axisModel, axisPointerModel, api, labelPos);
+    }
+
+    // Do not support handle, utill any user requires it.
+
+});
+
+function getLabelPosition(value, axisModel, axisPointerModel, polar, labelMargin) {
+    var axis = axisModel.axis;
+    var coord = axis.dataToCoord(value);
+    var axisAngle = polar.getAngleAxis().getExtent()[0];
+    axisAngle = axisAngle / 180 * Math.PI;
+    var radiusExtent = polar.getRadiusAxis().getExtent();
+    var position;
+    var align;
+    var verticalAlign;
+
+    if (axis.dim === 'radius') {
+        var transform = create$1();
+        rotate(transform, transform, axisAngle);
+        translate(transform, transform, [polar.cx, polar.cy]);
+        position = applyTransform$1([coord, -labelMargin], transform);
+
+        var labelRotation = axisModel.getModel('axisLabel').get('rotate') || 0;
+        var labelLayout = AxisBuilder.innerTextLayout(
+            axisAngle, labelRotation * Math.PI / 180, -1
+        );
+        align = labelLayout.textAlign;
+        verticalAlign = labelLayout.textVerticalAlign;
+    }
+    else { // angle axis
+        var r = radiusExtent[1];
+        position = polar.coordToPoint([r + labelMargin, coord]);
+        var cx = polar.cx;
+        var cy = polar.cy;
+        align = Math.abs(position[0] - cx) / r < 0.3
+            ? 'center' : (position[0] > cx ? 'left' : 'right');
+        verticalAlign = Math.abs(position[1] - cy) / r < 0.3
+            ? 'middle' : (position[1] > cy ? 'top' : 'bottom');
+    }
+
+    return {
+        position: position,
+        align: align,
+        verticalAlign: verticalAlign
+    };
+}
+
+
+var pointerShapeBuilder$2 = {
+
+    line: function (axis, polar, coordValue, otherExtent, elStyle) {
+        return axis.dim === 'angle'
+            ? {
+                type: 'Line',
+                shape: makeLineShape(
+                    polar.coordToPoint([otherExtent[0], coordValue]),
+                    polar.coordToPoint([otherExtent[1], coordValue])
+                )
+            }
+            : {
+                type: 'Circle',
+                shape: {
+                    cx: polar.cx,
+                    cy: polar.cy,
+                    r: coordValue
+                }
+            };
+    },
+
+    shadow: function (axis, polar, coordValue, otherExtent, elStyle) {
+        var bandWidth = Math.max(1, axis.getBandWidth());
+        var radian = Math.PI / 180;
+
+        return axis.dim === 'angle'
+            ? {
+                type: 'Sector',
+                shape: makeSectorShape(
+                    polar.cx, polar.cy,
+                    otherExtent[0], otherExtent[1],
+                    // In ECharts y is negative if angle is positive
+                    (-coordValue - bandWidth / 2) * radian,
+                    (-coordValue + bandWidth / 2) * radian
+                )
+            }
+            : {
+                type: 'Sector',
+                shape: makeSectorShape(
+                    polar.cx, polar.cy,
+                    coordValue - bandWidth / 2,
+                    coordValue + bandWidth / 2,
+                    0, Math.PI * 2
+                )
+            };
+    }
+};
+
+AxisView.registerAxisPointerClass('PolarAxisPointer', PolarAxisPointer);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// For reducing size of echarts.min, barLayoutPolar is required by polar.
+registerLayout(curry(barLayoutPolar, 'bar'));
+
+// Polar view
+extendComponentView({
+    type: 'polar'
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var GeoModel = ComponentModel.extend({
+
+    type: 'geo',
+
+    /**
+     * @type {module:echarts/coord/geo/Geo}
+     */
+    coordinateSystem: null,
+
+    layoutMode: 'box',
+
+    init: function (option) {
+        ComponentModel.prototype.init.apply(this, arguments);
+
+        // Default label emphasis `show`
+        defaultEmphasis(option, 'label', ['show']);
+    },
+
+    optionUpdated: function () {
+        var option = this.option;
+        var self = this;
+
+        option.regions = geoCreator.getFilledRegions(option.regions, option.map, option.nameMap);
+
+        this._optionModelMap = reduce(option.regions || [], function (optionModelMap, regionOpt) {
+            if (regionOpt.name) {
+                optionModelMap.set(regionOpt.name, new Model(regionOpt, self));
+            }
+            return optionModelMap;
+        }, createHashMap());
+
+        this.updateSelectedMap(option.regions);
+    },
+
+    defaultOption: {
+
+        zlevel: 0,
+
+        z: 0,
+
+        show: true,
+
+        left: 'center',
+
+        top: 'center',
+
+
+        // width:,
+        // height:,
+        // right
+        // bottom
+
+        // Aspect is width / height. Inited to be geoJson bbox aspect
+        // This parameter is used for scale this aspect
+        aspectScale: 0.75,
+
+        ///// Layout with center and size
+        // If you wan't to put map in a fixed size box with right aspect ratio
+        // This two properties may more conveninet
+        // layoutCenter: [50%, 50%]
+        // layoutSize: 100
+
+
+        silent: false,
+
+        // Map type
+        map: '',
+
+        // Define left-top, right-bottom coords to control view
+        // For example, [ [180, 90], [-180, -90] ]
+        boundingCoords: null,
+
+        // Default on center of map
+        center: null,
+
+        zoom: 1,
+
+        scaleLimit: null,
+
+        // selectedMode: false
+
+        label: {
+            show: false,
+            color: '#000'
+        },
+
+        itemStyle: {
+            // color: å„å¼‚,
+            borderWidth: 0.5,
+            borderColor: '#444',
+            color: '#eee'
+        },
+
+        emphasis: {
+            label: {
+                show: true,
+                color: 'rgb(100,0,0)'
+            },
+            itemStyle: {
+                color: 'rgba(255,215,0,0.8)'
+            }
+        },
+
+        regions: []
+    },
+
+    /**
+     * Get model of region
+     * @param  {string} name
+     * @return {module:echarts/model/Model}
+     */
+    getRegionModel: function (name) {
+        return this._optionModelMap.get(name) || new Model(null, this, this.ecModel);
+    },
+
+    /**
+     * Format label
+     * @param {string} name Region name
+     * @param {string} [status='normal'] 'normal' or 'emphasis'
+     * @return {string}
+     */
+    getFormattedLabel: function (name, status) {
+        var regionModel = this.getRegionModel(name);
+        var formatter = regionModel.get('label.' + status + '.formatter');
+        var params = {
+            name: name
+        };
+        if (typeof formatter === 'function') {
+            params.status = status;
+            return formatter(params);
+        }
+        else if (typeof formatter === 'string') {
+            return formatter.replace('{a}', name != null ? name : '');
+        }
+    },
+
+    setZoom: function (zoom) {
+        this.option.zoom = zoom;
+    },
+
+    setCenter: function (center) {
+        this.option.center = center;
+    }
+});
+
+mixin(GeoModel, selectableMixin);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+extendComponentView({
+
+    type: 'geo',
+
+    init: function (ecModel, api) {
+        var mapDraw = new MapDraw(api, true);
+        this._mapDraw = mapDraw;
+
+        this.group.add(mapDraw.group);
+    },
+
+    render: function (geoModel, ecModel, api, payload) {
+        // Not render if it is an toggleSelect action from self
+        if (payload && payload.type === 'geoToggleSelect'
+            && payload.from === this.uid
+        ) {
+            return;
+        }
+
+        var mapDraw = this._mapDraw;
+        if (geoModel.get('show')) {
+            mapDraw.draw(geoModel, ecModel, api, this, payload);
+        }
+        else {
+            this._mapDraw.group.removeAll();
+        }
+
+        this.group.silent = geoModel.get('silent');
+    },
+
+    dispose: function () {
+        this._mapDraw && this._mapDraw.remove();
+    }
+
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+function makeAction(method, actionInfo) {
+    actionInfo.update = 'updateView';
+    registerAction(actionInfo, function (payload, ecModel) {
+        var selected = {};
+
+        ecModel.eachComponent(
+            { mainType: 'geo', query: payload},
+            function (geoModel) {
+                geoModel[method](payload.name);
+                var geo = geoModel.coordinateSystem;
+                each$1(geo.regions, function (region) {
+                    selected[region.name] = geoModel.isSelected(region.name) || false;
+                });
+            }
+        );
+
+        return {
+            selected: selected,
+            name: payload.name
+        };
+    });
+}
+
+makeAction('toggleSelected', {
+    type: 'geoToggleSelect',
+    event: 'geoselectchanged'
+});
+makeAction('select', {
+    type: 'geoSelect',
+    event: 'geoselected'
+});
+makeAction('unSelect', {
+    type: 'geoUnSelect',
+    event: 'geounselected'
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var DEFAULT_TOOLBOX_BTNS = ['rect', 'polygon', 'keep', 'clear'];
+
+var preprocessor$1 = function (option, isNew) {
+    var brushComponents = option && option.brush;
+    if (!isArray(brushComponents)) {
+        brushComponents = brushComponents ? [brushComponents] : [];
+    }
+
+    if (!brushComponents.length) {
+        return;
+    }
+
+    var brushComponentSpecifiedBtns = [];
+
+    each$1(brushComponents, function (brushOpt) {
+        var tbs = brushOpt.hasOwnProperty('toolbox')
+            ? brushOpt.toolbox : [];
+
+        if (tbs instanceof Array) {
+            brushComponentSpecifiedBtns = brushComponentSpecifiedBtns.concat(tbs);
+        }
+    });
+
+    var toolbox = option && option.toolbox;
+
+    if (isArray(toolbox)) {
+        toolbox = toolbox[0];
+    }
+    if (!toolbox) {
+        toolbox = {feature: {}};
+        option.toolbox = [toolbox];
+    }
+
+    var toolboxFeature = (toolbox.feature || (toolbox.feature = {}));
+    var toolboxBrush = toolboxFeature.brush || (toolboxFeature.brush = {});
+    var brushTypes = toolboxBrush.type || (toolboxBrush.type = []);
+
+    brushTypes.push.apply(brushTypes, brushComponentSpecifiedBtns);
+
+    removeDuplicate(brushTypes);
+
+    if (isNew && !brushTypes.length) {
+        brushTypes.push.apply(brushTypes, DEFAULT_TOOLBOX_BTNS);
+    }
+};
+
+function removeDuplicate(arr) {
+    var map$$1 = {};
+    each$1(arr, function (val) {
+        map$$1[val] = 1;
+    });
+    arr.length = 0;
+    each$1(map$$1, function (flag, val) {
+        arr.push(val);
+    });
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @file Visual solution, for consistent option specification.
+ */
+
+var each$19 = each$1;
+
+function hasKeys(obj) {
+    if (obj) {
+        for (var name in obj){
+            if (obj.hasOwnProperty(name)) {
+                return true;
+            }
+        }
+    }
+}
+
+/**
+ * @param {Object} option
+ * @param {Array.<string>} stateList
+ * @param {Function} [supplementVisualOption]
+ * @return {Object} visualMappings <state, <visualType, module:echarts/visual/VisualMapping>>
+ */
+function createVisualMappings(option, stateList, supplementVisualOption) {
+    var visualMappings = {};
+
+    each$19(stateList, function (state) {
+        var mappings = visualMappings[state] = createMappings();
+
+        each$19(option[state], function (visualData, visualType) {
+            if (!VisualMapping.isValidType(visualType)) {
+                return;
+            }
+            var mappingOption = {
+                type: visualType,
+                visual: visualData
+            };
+            supplementVisualOption && supplementVisualOption(mappingOption, state);
+            mappings[visualType] = new VisualMapping(mappingOption);
+
+            // Prepare a alpha for opacity, for some case that opacity
+            // is not supported, such as rendering using gradient color.
+            if (visualType === 'opacity') {
+                mappingOption = clone(mappingOption);
+                mappingOption.type = 'colorAlpha';
+                mappings.__hidden.__alphaForOpacity = new VisualMapping(mappingOption);
+            }
+        });
+    });
+
+    return visualMappings;
+
+    function createMappings() {
+        var Creater = function () {};
+        // Make sure hidden fields will not be visited by
+        // object iteration (with hasOwnProperty checking).
+        Creater.prototype.__hidden = Creater.prototype;
+        var obj = new Creater();
+        return obj;
+    }
+}
+
+/**
+ * @param {Object} thisOption
+ * @param {Object} newOption
+ * @param {Array.<string>} keys
+ */
+function replaceVisualOption(thisOption, newOption, keys) {
+    // Visual attributes merge is not supported, otherwise it
+    // brings overcomplicated merge logic. See #2853. So if
+    // newOption has anyone of these keys, all of these keys
+    // will be reset. Otherwise, all keys remain.
+    var has;
+    each$1(keys, function (key) {
+        if (newOption.hasOwnProperty(key) && hasKeys(newOption[key])) {
+            has = true;
+        }
+    });
+    has && each$1(keys, function (key) {
+        if (newOption.hasOwnProperty(key) && hasKeys(newOption[key])) {
+            thisOption[key] = clone(newOption[key]);
+        }
+        else {
+            delete thisOption[key];
+        }
+    });
+}
+
+/**
+ * @param {Array.<string>} stateList
+ * @param {Object} visualMappings <state, Object.<visualType, module:echarts/visual/VisualMapping>>
+ * @param {module:echarts/data/List} list
+ * @param {Function} getValueState param: valueOrIndex, return: state.
+ * @param {object} [scope] Scope for getValueState
+ * @param {string} [dimension] Concrete dimension, if used.
+ */
+// ???! handle brush?
+function applyVisual(stateList, visualMappings, data, getValueState, scope, dimension) {
+    var visualTypesMap = {};
+    each$1(stateList, function (state) {
+        var visualTypes = VisualMapping.prepareVisualTypes(visualMappings[state]);
+        visualTypesMap[state] = visualTypes;
+    });
+
+    var dataIndex;
+
+    function getVisual(key) {
+        return data.getItemVisual(dataIndex, key);
+    }
+
+    function setVisual(key, value) {
+        data.setItemVisual(dataIndex, key, value);
+    }
+
+    if (dimension == null) {
+        data.each(eachItem);
+    }
+    else {
+        data.each([dimension], eachItem);
+    }
+
+    function eachItem(valueOrIndex, index) {
+        dataIndex = dimension == null ? valueOrIndex : index;
+
+        var rawDataItem = data.getRawDataItem(dataIndex);
+        // Consider performance
+        if (rawDataItem && rawDataItem.visualMap === false) {
+            return;
+        }
+
+        var valueState = getValueState.call(scope, valueOrIndex);
+        var mappings = visualMappings[valueState];
+        var visualTypes = visualTypesMap[valueState];
+
+        for (var i = 0, len = visualTypes.length; i < len; i++) {
+            var type = visualTypes[i];
+            mappings[type] && mappings[type].applyVisual(
+                valueOrIndex, getVisual, setVisual
+            );
+        }
+    }
+}
+
+/**
+ * @param {module:echarts/data/List} data
+ * @param {Array.<string>} stateList
+ * @param {Object} visualMappings <state, Object.<visualType, module:echarts/visual/VisualMapping>>
+ * @param {Function} getValueState param: valueOrIndex, return: state.
+ * @param {number} [dim] dimension or dimension index.
+ */
+function incrementalApplyVisual(stateList, visualMappings, getValueState, dim) {
+    var visualTypesMap = {};
+    each$1(stateList, function (state) {
+        var visualTypes = VisualMapping.prepareVisualTypes(visualMappings[state]);
+        visualTypesMap[state] = visualTypes;
+    });
+
+    function progress(params, data) {
+        if (dim != null) {
+            dim = data.getDimension(dim);
+        }
+
+        function getVisual(key) {
+            return data.getItemVisual(dataIndex, key);
+        }
+
+        function setVisual(key, value) {
+            data.setItemVisual(dataIndex, key, value);
+        }
+
+        var dataIndex;
+        while ((dataIndex = params.next()) != null) {
+            var rawDataItem = data.getRawDataItem(dataIndex);
+
+            // Consider performance
+            if (rawDataItem && rawDataItem.visualMap === false) {
+                return;
+            }
+
+            var value = dim != null
+                ? data.get(dim, dataIndex, true)
+                : dataIndex;
+
+            var valueState = getValueState(value);
+            var mappings = visualMappings[valueState];
+            var visualTypes = visualTypesMap[valueState];
+
+            for (var i = 0, len = visualTypes.length; i < len; i++) {
+                var type = visualTypes[i];
+                mappings[type] && mappings[type].applyVisual(value, getVisual, setVisual);
+            }
+        }
+    }
+
+    return {progress: progress};
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// Key of the first level is brushType: `line`, `rect`, `polygon`.
+// Key of the second level is chart element type: `point`, `rect`.
+// See moudule:echarts/component/helper/BrushController
+// function param:
+//      {Object} itemLayout fetch from data.getItemLayout(dataIndex)
+//      {Object} selectors {point: selector, rect: selector, ...}
+//      {Object} area {range: [[], [], ..], boudingRect}
+// function return:
+//      {boolean} Whether in the given brush.
+var selector = {
+    lineX: getLineSelectors(0),
+    lineY: getLineSelectors(1),
+    rect: {
+        point: function (itemLayout, selectors, area) {
+            return itemLayout && area.boundingRect.contain(itemLayout[0], itemLayout[1]);
+        },
+        rect: function (itemLayout, selectors, area) {
+            return itemLayout && area.boundingRect.intersect(itemLayout);
+        }
+    },
+    polygon: {
+        point: function (itemLayout, selectors, area) {
+            return itemLayout
+                && area.boundingRect.contain(itemLayout[0], itemLayout[1])
+                && contain$1(area.range, itemLayout[0], itemLayout[1]);
+        },
+        rect: function (itemLayout, selectors, area) {
+            var points = area.range;
+
+            if (!itemLayout || points.length <= 1) {
+                return false;
+            }
+
+            var x = itemLayout.x;
+            var y = itemLayout.y;
+            var width = itemLayout.width;
+            var height = itemLayout.height;
+            var p = points[0];
+
+            if (contain$1(points, x, y)
+                || contain$1(points, x + width, y)
+                || contain$1(points, x, y + height)
+                || contain$1(points, x + width, y + height)
+                || BoundingRect.create(itemLayout).contain(p[0], p[1])
+                || lineIntersectPolygon(x, y, x + width, y, points)
+                || lineIntersectPolygon(x, y, x, y + height, points)
+                || lineIntersectPolygon(x + width, y, x + width, y + height, points)
+                || lineIntersectPolygon(x, y + height, x + width, y + height, points)
+            ) {
+                return true;
+            }
+        }
+    }
+};
+
+function getLineSelectors(xyIndex) {
+    var xy = ['x', 'y'];
+    var wh = ['width', 'height'];
+
+    return {
+        point: function (itemLayout, selectors, area) {
+            if (itemLayout) {
+                var range = area.range;
+                var p = itemLayout[xyIndex];
+                return inLineRange(p, range);
+            }
+        },
+        rect: function (itemLayout, selectors, area) {
+            if (itemLayout) {
+                var range = area.range;
+                var layoutRange = [
+                    itemLayout[xy[xyIndex]],
+                    itemLayout[xy[xyIndex]] + itemLayout[wh[xyIndex]]
+                ];
+                layoutRange[1] < layoutRange[0] && layoutRange.reverse();
+                return inLineRange(layoutRange[0], range)
+                    || inLineRange(layoutRange[1], range)
+                    || inLineRange(range[0], layoutRange)
+                    || inLineRange(range[1], layoutRange);
+            }
+        }
+    };
+}
+
+function inLineRange(p, range) {
+    return range[0] <= p && p <= range[1];
+}
+
+function lineIntersectPolygon(lx, ly, l2x, l2y, points) {
+    for (var i = 0, p2 = points[points.length - 1]; i < points.length; i++) {
+        var p = points[i];
+        if (lineIntersect(lx, ly, l2x, l2y, p[0], p[1], p2[0], p2[1])) {
+            return true;
+        }
+        p2 = p;
+    }
+}
+
+// Code from <http://blog.csdn.net/rickliuxiao/article/details/6259322> with some fix.
+// See <https://en.wikipedia.org/wiki/Line%E2%80%93line_intersection>
+function lineIntersect(a1x, a1y, a2x, a2y, b1x, b1y, b2x, b2y) {
+    var delta = determinant(a2x - a1x, b1x - b2x, a2y - a1y, b1y - b2y);
+    if (nearZero(delta)) { // parallel
+        return false;
+    }
+    var namenda = determinant(b1x - a1x, b1x - b2x, b1y - a1y, b1y - b2y) / delta;
+    if (namenda < 0 || namenda > 1) {
+        return false;
+    }
+    var miu = determinant(a2x - a1x, b1x - a1x, a2y - a1y, b1y - a1y) / delta;
+    if (miu < 0 || miu > 1) {
+        return false;
+    }
+    return true;
+}
+
+function nearZero(val) {
+    return val <= (1e-6) && val >= -(1e-6);
+}
+
+function determinant(v1, v2, v3, v4) {
+    return v1 * v4 - v2 * v3;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var each$20 = each$1;
+var indexOf$1 = indexOf;
+var curry$5 = curry;
+
+var COORD_CONVERTS = ['dataToPoint', 'pointToData'];
+
+// FIXME
+// how to genarialize to more coordinate systems.
+var INCLUDE_FINDER_MAIN_TYPES = [
+    'grid', 'xAxis', 'yAxis', 'geo', 'graph',
+    'polar', 'radiusAxis', 'angleAxis', 'bmap'
+];
+
+/**
+ * [option in constructor]:
+ * {
+ *     Index/Id/Name of geo, xAxis, yAxis, grid: See util/model#parseFinder.
+ * }
+ *
+ *
+ * [targetInfo]:
+ *
+ * There can be multiple axes in a single targetInfo. Consider the case
+ * of `grid` component, a targetInfo represents a grid which contains one or more
+ * cartesian and one or more axes. And consider the case of parallel system,
+ * which has multiple axes in a coordinate system.
+ * Can be {
+ *     panelId: ...,
+ *     coordSys: <a representitive cartesian in grid (first cartesian by default)>,
+ *     coordSyses: all cartesians.
+ *     gridModel: <grid component>
+ *     xAxes: correspond to coordSyses on index
+ *     yAxes: correspond to coordSyses on index
+ * }
+ * or {
+ *     panelId: ...,
+ *     coordSys: <geo coord sys>
+ *     coordSyses: [<geo coord sys>]
+ *     geoModel: <geo component>
+ * }
+ *
+ *
+ * [panelOpt]:
+ *
+ * Make from targetInfo. Input to BrushController.
+ * {
+ *     panelId: ...,
+ *     rect: ...
+ * }
+ *
+ *
+ * [area]:
+ *
+ * Generated by BrushController or user input.
+ * {
+ *     panelId: Used to locate coordInfo directly. If user inpput, no panelId.
+ *     brushType: determine how to convert to/from coord('rect' or 'polygon' or 'lineX/Y').
+ *     Index/Id/Name of geo, xAxis, yAxis, grid: See util/model#parseFinder.
+ *     range: pixel range.
+ *     coordRange: representitive coord range (the first one of coordRanges).
+ *     coordRanges: <Array> coord ranges, used in multiple cartesian in one grid.
+ * }
+ */
+
+/**
+ * @param {Object} option contains Index/Id/Name of xAxis/yAxis/geo/grid
+ *        Each can be {number|Array.<number>}. like: {xAxisIndex: [3, 4]}
+ * @param {module:echarts/model/Global} ecModel
+ * @param {Object} [opt]
+ * @param {Array.<string>} [opt.include] include coordinate system types.
+ */
+function BrushTargetManager(option, ecModel, opt) {
+    /**
+     * @private
+     * @type {Array.<Object>}
+     */
+    var targetInfoList = this._targetInfoList = [];
+    var info = {};
+    var foundCpts = parseFinder$1(ecModel, option);
+
+    each$20(targetInfoBuilders, function (builder, type) {
+        if (!opt || !opt.include || indexOf$1(opt.include, type) >= 0) {
+            builder(foundCpts, targetInfoList, info);
+        }
+    });
+}
+
+var proto$2 = BrushTargetManager.prototype;
+
+proto$2.setOutputRanges = function (areas, ecModel) {
+    this.matchOutputRanges(areas, ecModel, function (area, coordRange, coordSys) {
+        (area.coordRanges || (area.coordRanges = [])).push(coordRange);
+        // area.coordRange is the first of area.coordRanges
+        if (!area.coordRange) {
+            area.coordRange = coordRange;
+            // In 'category' axis, coord to pixel is not reversible, so we can not
+            // rebuild range by coordRange accrately, which may bring trouble when
+            // brushing only one item. So we use __rangeOffset to rebuilding range
+            // by coordRange. And this it only used in brush component so it is no
+            // need to be adapted to coordRanges.
+            var result = coordConvert[area.brushType](0, coordSys, coordRange);
+            area.__rangeOffset = {
+                offset: diffProcessor[area.brushType](result.values, area.range, [1, 1]),
+                xyMinMax: result.xyMinMax
+            };
+        }
+    });
+};
+
+proto$2.matchOutputRanges = function (areas, ecModel, cb) {
+    each$20(areas, function (area) {
+        var targetInfo = this.findTargetInfo(area, ecModel);
+
+        if (targetInfo && targetInfo !== true) {
+            each$1(
+                targetInfo.coordSyses,
+                function (coordSys) {
+                    var result = coordConvert[area.brushType](1, coordSys, area.range);
+                    cb(area, result.values, coordSys, ecModel);
+                }
+            );
+        }
+    }, this);
+};
+
+proto$2.setInputRanges = function (areas, ecModel) {
+    each$20(areas, function (area) {
+        var targetInfo = this.findTargetInfo(area, ecModel);
+
+        if (__DEV__) {
+            assert$1(
+                !targetInfo || targetInfo === true || area.coordRange,
+                'coordRange must be specified when coord index specified.'
+            );
+            assert$1(
+                !targetInfo || targetInfo !== true || area.range,
+                'range must be specified in global brush.'
+            );
+        }
+
+        area.range = area.range || [];
+
+        // convert coordRange to global range and set panelId.
+        if (targetInfo && targetInfo !== true) {
+            area.panelId = targetInfo.panelId;
+            // (1) area.range shoule always be calculate from coordRange but does
+            // not keep its original value, for the sake of the dataZoom scenario,
+            // where area.coordRange remains unchanged but area.range may be changed.
+            // (2) Only support converting one coordRange to pixel range in brush
+            // component. So do not consider `coordRanges`.
+            // (3) About __rangeOffset, see comment above.
+            var result = coordConvert[area.brushType](0, targetInfo.coordSys, area.coordRange);
+            var rangeOffset = area.__rangeOffset;
+            area.range = rangeOffset
+                ? diffProcessor[area.brushType](
+                    result.values,
+                    rangeOffset.offset,
+                    getScales(result.xyMinMax, rangeOffset.xyMinMax)
+                )
+                : result.values;
+        }
+    }, this);
+};
+
+proto$2.makePanelOpts = function (api, getDefaultBrushType) {
+    return map(this._targetInfoList, function (targetInfo) {
+        var rect = targetInfo.getPanelRect();
+        return {
+            panelId: targetInfo.panelId,
+            defaultBrushType: getDefaultBrushType && getDefaultBrushType(targetInfo),
+            clipPath: makeRectPanelClipPath(rect),
+            isTargetByCursor: makeRectIsTargetByCursor(
+                rect, api, targetInfo.coordSysModel
+            ),
+            getLinearBrushOtherExtent: makeLinearBrushOtherExtent(rect)
+        };
+    });
+};
+
+proto$2.controlSeries = function (area, seriesModel, ecModel) {
+    // Check whether area is bound in coord, and series do not belong to that coord.
+    // If do not do this check, some brush (like lineX) will controll all axes.
+    var targetInfo = this.findTargetInfo(area, ecModel);
+    return targetInfo === true || (
+        targetInfo && indexOf$1(targetInfo.coordSyses, seriesModel.coordinateSystem) >= 0
+    );
+};
+
+/**
+ * If return Object, a coord found.
+ * If reutrn true, global found.
+ * Otherwise nothing found.
+ *
+ * @param {Object} area
+ * @param {Array} targetInfoList
+ * @return {Object|boolean}
+ */
+proto$2.findTargetInfo = function (area, ecModel) {
+    var targetInfoList = this._targetInfoList;
+    var foundCpts = parseFinder$1(ecModel, area);
+
+    for (var i = 0; i < targetInfoList.length; i++) {
+        var targetInfo = targetInfoList[i];
+        var areaPanelId = area.panelId;
+        if (areaPanelId) {
+            if (targetInfo.panelId === areaPanelId) {
+                return targetInfo;
+            }
+        }
+        else {
+            for (var i = 0; i < targetInfoMatchers.length; i++) {
+                if (targetInfoMatchers[i](foundCpts, targetInfo)) {
+                    return targetInfo;
+                }
+            }
+        }
+    }
+
+    return true;
+};
+
+function formatMinMax(minMax) {
+    minMax[0] > minMax[1] && minMax.reverse();
+    return minMax;
+}
+
+function parseFinder$1(ecModel, option) {
+    return parseFinder(
+        ecModel, option, {includeMainTypes: INCLUDE_FINDER_MAIN_TYPES}
+    );
+}
+
+var targetInfoBuilders = {
+
+    grid: function (foundCpts, targetInfoList) {
+        var xAxisModels = foundCpts.xAxisModels;
+        var yAxisModels = foundCpts.yAxisModels;
+        var gridModels = foundCpts.gridModels;
+        // Remove duplicated.
+        var gridModelMap = createHashMap();
+        var xAxesHas = {};
+        var yAxesHas = {};
+
+        if (!xAxisModels && !yAxisModels && !gridModels) {
+            return;
+        }
+
+        each$20(xAxisModels, function (axisModel) {
+            var gridModel = axisModel.axis.grid.model;
+            gridModelMap.set(gridModel.id, gridModel);
+            xAxesHas[gridModel.id] = true;
+        });
+        each$20(yAxisModels, function (axisModel) {
+            var gridModel = axisModel.axis.grid.model;
+            gridModelMap.set(gridModel.id, gridModel);
+            yAxesHas[gridModel.id] = true;
+        });
+        each$20(gridModels, function (gridModel) {
+            gridModelMap.set(gridModel.id, gridModel);
+            xAxesHas[gridModel.id] = true;
+            yAxesHas[gridModel.id] = true;
+        });
+
+        gridModelMap.each(function (gridModel) {
+            var grid = gridModel.coordinateSystem;
+            var cartesians = [];
+
+            each$20(grid.getCartesians(), function (cartesian, index) {
+                if (indexOf$1(xAxisModels, cartesian.getAxis('x').model) >= 0
+                    || indexOf$1(yAxisModels, cartesian.getAxis('y').model) >= 0
+                ) {
+                    cartesians.push(cartesian);
+                }
+            });
+            targetInfoList.push({
+                panelId: 'grid--' + gridModel.id,
+                gridModel: gridModel,
+                coordSysModel: gridModel,
+                // Use the first one as the representitive coordSys.
+                coordSys: cartesians[0],
+                coordSyses: cartesians,
+                getPanelRect: panelRectBuilder.grid,
+                xAxisDeclared: xAxesHas[gridModel.id],
+                yAxisDeclared: yAxesHas[gridModel.id]
+            });
+        });
+    },
+
+    geo: function (foundCpts, targetInfoList) {
+        each$20(foundCpts.geoModels, function (geoModel) {
+            var coordSys = geoModel.coordinateSystem;
+            targetInfoList.push({
+                panelId: 'geo--' + geoModel.id,
+                geoModel: geoModel,
+                coordSysModel: geoModel,
+                coordSys: coordSys,
+                coordSyses: [coordSys],
+                getPanelRect: panelRectBuilder.geo
+            });
+        });
+    }
+};
+
+var targetInfoMatchers = [
+
+    // grid
+    function (foundCpts, targetInfo) {
+        var xAxisModel = foundCpts.xAxisModel;
+        var yAxisModel = foundCpts.yAxisModel;
+        var gridModel = foundCpts.gridModel;
+
+        !gridModel && xAxisModel && (gridModel = xAxisModel.axis.grid.model);
+        !gridModel && yAxisModel && (gridModel = yAxisModel.axis.grid.model);
+
+        return gridModel && gridModel === targetInfo.gridModel;
+    },
+
+    // geo
+    function (foundCpts, targetInfo) {
+        var geoModel = foundCpts.geoModel;
+        return geoModel && geoModel === targetInfo.geoModel;
+    }
+];
+
+var panelRectBuilder = {
+
+    grid: function () {
+        // grid is not Transformable.
+        return this.coordSys.grid.getRect().clone();
+    },
+
+    geo: function () {
+        var coordSys = this.coordSys;
+        var rect = coordSys.getBoundingRect().clone();
+        // geo roam and zoom transform
+        rect.applyTransform(getTransform(coordSys));
+        return rect;
+    }
+};
+
+var coordConvert = {
+
+    lineX: curry$5(axisConvert, 0),
+
+    lineY: curry$5(axisConvert, 1),
+
+    rect: function (to, coordSys, rangeOrCoordRange) {
+        var xminymin = coordSys[COORD_CONVERTS[to]]([rangeOrCoordRange[0][0], rangeOrCoordRange[1][0]]);
+        var xmaxymax = coordSys[COORD_CONVERTS[to]]([rangeOrCoordRange[0][1], rangeOrCoordRange[1][1]]);
+        var values = [
+            formatMinMax([xminymin[0], xmaxymax[0]]),
+            formatMinMax([xminymin[1], xmaxymax[1]])
+        ];
+        return {values: values, xyMinMax: values};
+    },
+
+    polygon: function (to, coordSys, rangeOrCoordRange) {
+        var xyMinMax = [[Infinity, -Infinity], [Infinity, -Infinity]];
+        var values = map(rangeOrCoordRange, function (item) {
+            var p = coordSys[COORD_CONVERTS[to]](item);
+            xyMinMax[0][0] = Math.min(xyMinMax[0][0], p[0]);
+            xyMinMax[1][0] = Math.min(xyMinMax[1][0], p[1]);
+            xyMinMax[0][1] = Math.max(xyMinMax[0][1], p[0]);
+            xyMinMax[1][1] = Math.max(xyMinMax[1][1], p[1]);
+            return p;
+        });
+        return {values: values, xyMinMax: xyMinMax};
+    }
+};
+
+function axisConvert(axisNameIndex, to, coordSys, rangeOrCoordRange) {
+    if (__DEV__) {
+        assert$1(
+            coordSys.type === 'cartesian2d',
+            'lineX/lineY brush is available only in cartesian2d.'
+        );
+    }
+
+    var axis = coordSys.getAxis(['x', 'y'][axisNameIndex]);
+    var values = formatMinMax(map([0, 1], function (i) {
+        return to
+            ? axis.coordToData(axis.toLocalCoord(rangeOrCoordRange[i]))
+            : axis.toGlobalCoord(axis.dataToCoord(rangeOrCoordRange[i]));
+    }));
+    var xyMinMax = [];
+    xyMinMax[axisNameIndex] = values;
+    xyMinMax[1 - axisNameIndex] = [NaN, NaN];
+
+    return {values: values, xyMinMax: xyMinMax};
+}
+
+var diffProcessor = {
+    lineX: curry$5(axisDiffProcessor, 0),
+
+    lineY: curry$5(axisDiffProcessor, 1),
+
+    rect: function (values, refer, scales) {
+        return [
+            [values[0][0] - scales[0] * refer[0][0], values[0][1] - scales[0] * refer[0][1]],
+            [values[1][0] - scales[1] * refer[1][0], values[1][1] - scales[1] * refer[1][1]]
+        ];
+    },
+
+    polygon: function (values, refer, scales) {
+        return map(values, function (item, idx) {
+            return [item[0] - scales[0] * refer[idx][0], item[1] - scales[1] * refer[idx][1]];
+        });
+    }
+};
+
+function axisDiffProcessor(axisNameIndex, values, refer, scales) {
+    return [
+        values[0] - scales[axisNameIndex] * refer[0],
+        values[1] - scales[axisNameIndex] * refer[1]
+    ];
+}
+
+// We have to process scale caused by dataZoom manually,
+// although it might be not accurate.
+function getScales(xyMinMaxCurr, xyMinMaxOrigin) {
+    var sizeCurr = getSize(xyMinMaxCurr);
+    var sizeOrigin = getSize(xyMinMaxOrigin);
+    var scales = [sizeCurr[0] / sizeOrigin[0], sizeCurr[1] / sizeOrigin[1]];
+    isNaN(scales[0]) && (scales[0] = 1);
+    isNaN(scales[1]) && (scales[1] = 1);
+    return scales;
+}
+
+function getSize(xyMinMax) {
+    return xyMinMax
+        ? [xyMinMax[0][1] - xyMinMax[0][0], xyMinMax[1][1] - xyMinMax[1][0]]
+        : [NaN, NaN];
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var STATE_LIST = ['inBrush', 'outOfBrush'];
+var DISPATCH_METHOD = '__ecBrushSelect';
+var DISPATCH_FLAG = '__ecInBrushSelectEvent';
+var PRIORITY_BRUSH = PRIORITY.VISUAL.BRUSH;
+
+/**
+ * Layout for visual, the priority higher than other layout, and before brush visual.
+ */
+registerLayout(PRIORITY_BRUSH, function (ecModel, api, payload) {
+    ecModel.eachComponent({mainType: 'brush'}, function (brushModel) {
+
+        payload && payload.type === 'takeGlobalCursor' && brushModel.setBrushOption(
+            payload.key === 'brush' ? payload.brushOption : {brushType: false}
+        );
+
+        var brushTargetManager = brushModel.brushTargetManager = new BrushTargetManager(brushModel.option, ecModel);
+
+        brushTargetManager.setInputRanges(brushModel.areas, ecModel);
+    });
+});
+
+/**
+ * Register the visual encoding if this modules required.
+ */
+registerVisual(PRIORITY_BRUSH, function (ecModel, api, payload) {
+
+    var brushSelected = [];
+    var throttleType;
+    var throttleDelay;
+
+    ecModel.eachComponent({mainType: 'brush'}, function (brushModel, brushIndex) {
+
+        var thisBrushSelected = {
+            brushId: brushModel.id,
+            brushIndex: brushIndex,
+            brushName: brushModel.name,
+            areas: clone(brushModel.areas),
+            selected: []
+        };
+        // Every brush component exists in event params, convenient
+        // for user to find by index.
+        brushSelected.push(thisBrushSelected);
+
+        var brushOption = brushModel.option;
+        var brushLink = brushOption.brushLink;
+        var linkedSeriesMap = [];
+        var selectedDataIndexForLink = [];
+        var rangeInfoBySeries = [];
+        var hasBrushExists = 0;
+
+        if (!brushIndex) { // Only the first throttle setting works.
+            throttleType = brushOption.throttleType;
+            throttleDelay = brushOption.throttleDelay;
+        }
+
+        // Add boundingRect and selectors to range.
+        var areas = map(brushModel.areas, function (area) {
+            return bindSelector(
+                defaults(
+                    {boundingRect: boundingRectBuilders[area.brushType](area)},
+                    area
+                )
+            );
+        });
+
+        var visualMappings = createVisualMappings(
+            brushModel.option, STATE_LIST, function (mappingOption) {
+                mappingOption.mappingMethod = 'fixed';
+            }
+        );
+
+        isArray(brushLink) && each$1(brushLink, function (seriesIndex) {
+            linkedSeriesMap[seriesIndex] = 1;
+        });
+
+        function linkOthers(seriesIndex) {
+            return brushLink === 'all' || linkedSeriesMap[seriesIndex];
+        }
+
+        // If no supported brush or no brush on the series,
+        // all visuals should be in original state.
+        function brushed(rangeInfoList) {
+            return !!rangeInfoList.length;
+        }
+
+        /**
+         * Logic for each series: (If the logic has to be modified one day, do it carefully!)
+         *
+         * ( brushed â”¬ && â”¬hasBrushExist â”¬ && linkOthers  ) => StepA: â”¬record, â”¬ StepB: â”¬visualByRecord.
+         *   !brushedâ”˜    â”œhasBrushExist â”¤                            â””nothing,â”˜        â”œvisualByRecord.
+         *                â””!hasBrushExistâ”˜                                              â””nothing.
+         * ( !brushed  && â”¬hasBrushExist â”¬ && linkOthers  ) => StepA:  nothing,  StepB: â”¬visualByRecord.
+         *                â””!hasBrushExistâ”˜                                              â””nothing.
+         * ( brushed â”¬ &&                     !linkOthers ) => StepA:  nothing,  StepB: â”¬visualByCheck.
+         *   !brushedâ”˜                                                                  â””nothing.
+         * ( !brushed  &&                     !linkOthers ) => StepA:  nothing,  StepB:  nothing.
+         */
+
+        // Step A
+        ecModel.eachSeries(function (seriesModel, seriesIndex) {
+            var rangeInfoList = rangeInfoBySeries[seriesIndex] = [];
+
+            seriesModel.subType === 'parallel'
+                ? stepAParallel(seriesModel, seriesIndex, rangeInfoList)
+                : stepAOthers(seriesModel, seriesIndex, rangeInfoList);
+        });
+
+        function stepAParallel(seriesModel, seriesIndex) {
+            var coordSys = seriesModel.coordinateSystem;
+            hasBrushExists |= coordSys.hasAxisBrushed();
+
+            linkOthers(seriesIndex) && coordSys.eachActiveState(
+                seriesModel.getData(),
+                function (activeState, dataIndex) {
+                    activeState === 'active' && (selectedDataIndexForLink[dataIndex] = 1);
+                }
+            );
+        }
+
+        function stepAOthers(seriesModel, seriesIndex, rangeInfoList) {
+            var selectorsByBrushType = getSelectorsByBrushType(seriesModel);
+            if (!selectorsByBrushType || brushModelNotControll(brushModel, seriesIndex)) {
+                return;
+            }
+
+            each$1(areas, function (area) {
+                selectorsByBrushType[area.brushType]
+                    && brushModel.brushTargetManager.controlSeries(area, seriesModel, ecModel)
+                    && rangeInfoList.push(area);
+                hasBrushExists |= brushed(rangeInfoList);
+            });
+
+            if (linkOthers(seriesIndex) && brushed(rangeInfoList)) {
+                var data = seriesModel.getData();
+                data.each(function (dataIndex) {
+                    if (checkInRange(selectorsByBrushType, rangeInfoList, data, dataIndex)) {
+                        selectedDataIndexForLink[dataIndex] = 1;
+                    }
+                });
+            }
+        }
+
+        // Step B
+        ecModel.eachSeries(function (seriesModel, seriesIndex) {
+            var seriesBrushSelected = {
+                seriesId: seriesModel.id,
+                seriesIndex: seriesIndex,
+                seriesName: seriesModel.name,
+                dataIndex: []
+            };
+            // Every series exists in event params, convenient
+            // for user to find series by seriesIndex.
+            thisBrushSelected.selected.push(seriesBrushSelected);
+
+            var selectorsByBrushType = getSelectorsByBrushType(seriesModel);
+            var rangeInfoList = rangeInfoBySeries[seriesIndex];
+
+            var data = seriesModel.getData();
+            var getValueState = linkOthers(seriesIndex)
+                ? function (dataIndex) {
+                    return selectedDataIndexForLink[dataIndex]
+                        ? (seriesBrushSelected.dataIndex.push(data.getRawIndex(dataIndex)), 'inBrush')
+                        : 'outOfBrush';
+                }
+                : function (dataIndex) {
+                    return checkInRange(selectorsByBrushType, rangeInfoList, data, dataIndex)
+                        ? (seriesBrushSelected.dataIndex.push(data.getRawIndex(dataIndex)), 'inBrush')
+                        : 'outOfBrush';
+                };
+
+            // If no supported brush or no brush, all visuals are in original state.
+            (linkOthers(seriesIndex) ? hasBrushExists : brushed(rangeInfoList))
+                && applyVisual(
+                    STATE_LIST, visualMappings, data, getValueState
+                );
+        });
+
+    });
+
+    dispatchAction(api, throttleType, throttleDelay, brushSelected, payload);
+});
+
+function dispatchAction(api, throttleType, throttleDelay, brushSelected, payload) {
+    // This event will not be triggered when `setOpion`, otherwise dead lock may
+    // triggered when do `setOption` in event listener, which we do not find
+    // satisfactory way to solve yet. Some considered resolutions:
+    // (a) Diff with prevoius selected data ant only trigger event when changed.
+    // But store previous data and diff precisely (i.e., not only by dataIndex, but
+    // also detect value changes in selected data) might bring complexity or fragility.
+    // (b) Use spectial param like `silent` to suppress event triggering.
+    // But such kind of volatile param may be weird in `setOption`.
+    if (!payload) {
+        return;
+    }
+
+    var zr = api.getZr();
+    if (zr[DISPATCH_FLAG]) {
+        return;
+    }
+
+    if (!zr[DISPATCH_METHOD]) {
+        zr[DISPATCH_METHOD] = doDispatch;
+    }
+
+    var fn = createOrUpdate(zr, DISPATCH_METHOD, throttleDelay, throttleType);
+
+    fn(api, brushSelected);
+}
+
+function doDispatch(api, brushSelected) {
+    if (!api.isDisposed()) {
+        var zr = api.getZr();
+        zr[DISPATCH_FLAG] = true;
+        api.dispatchAction({
+            type: 'brushSelect',
+            batch: brushSelected
+        });
+        zr[DISPATCH_FLAG] = false;
+    }
+}
+
+function checkInRange(selectorsByBrushType, rangeInfoList, data, dataIndex) {
+    for (var i = 0, len = rangeInfoList.length; i < len; i++) {
+        var area = rangeInfoList[i];
+        if (selectorsByBrushType[area.brushType](
+            dataIndex, data, area.selectors, area
+        )) {
+            return true;
+        }
+    }
+}
+
+function getSelectorsByBrushType(seriesModel) {
+    var brushSelector = seriesModel.brushSelector;
+    if (isString(brushSelector)) {
+        var sels = [];
+        each$1(selector, function (selectorsByElementType, brushType) {
+            sels[brushType] = function (dataIndex, data, selectors, area) {
+                var itemLayout = data.getItemLayout(dataIndex);
+                return selectorsByElementType[brushSelector](itemLayout, selectors, area);
+            };
+        });
+        return sels;
+    }
+    else if (isFunction$1(brushSelector)) {
+        var bSelector = {};
+        each$1(selector, function (sel, brushType) {
+            bSelector[brushType] = brushSelector;
+        });
+        return bSelector;
+    }
+    return brushSelector;
+}
+
+function brushModelNotControll(brushModel, seriesIndex) {
+    var seriesIndices = brushModel.option.seriesIndex;
+    return seriesIndices != null
+        && seriesIndices !== 'all'
+        && (
+            isArray(seriesIndices)
+            ? indexOf(seriesIndices, seriesIndex) < 0
+            : seriesIndex !== seriesIndices
+        );
+}
+
+function bindSelector(area) {
+    var selectors = area.selectors = {};
+    each$1(selector[area.brushType], function (selFn, elType) {
+        // Do not use function binding or curry for performance.
+        selectors[elType] = function (itemLayout) {
+            return selFn(itemLayout, selectors, area);
+        };
+    });
+    return area;
+}
+
+var boundingRectBuilders = {
+
+    lineX: noop,
+
+    lineY: noop,
+
+    rect: function (area) {
+        return getBoundingRectFromMinMax(area.range);
+    },
+
+    polygon: function (area) {
+        var minMax;
+        var range = area.range;
+
+        for (var i = 0, len = range.length; i < len; i++) {
+            minMax = minMax || [[Infinity, -Infinity], [Infinity, -Infinity]];
+            var rg = range[i];
+            rg[0] < minMax[0][0] && (minMax[0][0] = rg[0]);
+            rg[0] > minMax[0][1] && (minMax[0][1] = rg[0]);
+            rg[1] < minMax[1][0] && (minMax[1][0] = rg[1]);
+            rg[1] > minMax[1][1] && (minMax[1][1] = rg[1]);
+        }
+
+        return minMax && getBoundingRectFromMinMax(minMax);
+    }
+};
+
+function getBoundingRectFromMinMax(minMax) {
+    return new BoundingRect(
+        minMax[0][0],
+        minMax[1][0],
+        minMax[0][1] - minMax[0][0],
+        minMax[1][1] - minMax[1][0]
+    );
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var DEFAULT_OUT_OF_BRUSH_COLOR = ['#ddd'];
+
+var BrushModel = extendComponentModel({
+
+    type: 'brush',
+
+    dependencies: ['geo', 'grid', 'xAxis', 'yAxis', 'parallel', 'series'],
+
+    /**
+     * @protected
+     */
+    defaultOption: {
+        // inBrush: null,
+        // outOfBrush: null,
+        toolbox: null,          // Default value see preprocessor.
+        brushLink: null,        // Series indices array, broadcast using dataIndex.
+                                // or 'all', which means all series. 'none' or null means no series.
+        seriesIndex: 'all',     // seriesIndex array, specify series controlled by this brush component.
+        geoIndex: null,         //
+        xAxisIndex: null,
+        yAxisIndex: null,
+
+        brushType: 'rect',      // Default brushType, see BrushController.
+        brushMode: 'single',    // Default brushMode, 'single' or 'multiple'
+        transformable: true,    // Default transformable.
+        brushStyle: {           // Default brushStyle
+            borderWidth: 1,
+            color: 'rgba(120,140,180,0.3)',
+            borderColor: 'rgba(120,140,180,0.8)'
+        },
+
+        throttleType: 'fixRate',// Throttle in brushSelected event. 'fixRate' or 'debounce'.
+                                // If null, no throttle. Valid only in the first brush component
+        throttleDelay: 0,       // Unit: ms, 0 means every event will be triggered.
+
+        // FIXME
+        // è¯•éªŒæ•ˆæžœ
+        removeOnClick: true,
+
+        z: 10000
+    },
+
+    /**
+     * @readOnly
+     * @type {Array.<Object>}
+     */
+    areas: [],
+
+    /**
+     * Current activated brush type.
+     * If null, brush is inactived.
+     * see module:echarts/component/helper/BrushController
+     * @readOnly
+     * @type {string}
+     */
+    brushType: null,
+
+    /**
+     * Current brush opt.
+     * see module:echarts/component/helper/BrushController
+     * @readOnly
+     * @type {Object}
+     */
+    brushOption: {},
+
+    /**
+     * @readOnly
+     * @type {Array.<Object>}
+     */
+    coordInfoList: [],
+
+    optionUpdated: function (newOption, isInit) {
+        var thisOption = this.option;
+
+        !isInit && replaceVisualOption(
+            thisOption, newOption, ['inBrush', 'outOfBrush']
+        );
+
+        var inBrush = thisOption.inBrush = thisOption.inBrush || {};
+        // Always give default visual, consider setOption at the second time.
+        thisOption.outOfBrush = thisOption.outOfBrush || {color: DEFAULT_OUT_OF_BRUSH_COLOR};
+
+        if (!inBrush.hasOwnProperty('liftZ')) {
+            // Bigger than the highlight z lift, otherwise it will
+            // be effected by the highlight z when brush.
+            inBrush.liftZ = 5;
+        }
+    },
+
+    /**
+     * If ranges is null/undefined, range state remain.
+     *
+     * @param {Array.<Object>} [ranges]
+     */
+    setAreas: function (areas) {
+        if (__DEV__) {
+            assert$1(isArray(areas));
+            each$1(areas, function (area) {
+                assert$1(area.brushType, 'Illegal areas');
+            });
+        }
+
+        // If ranges is null/undefined, range state remain.
+        // This helps user to dispatchAction({type: 'brush'}) with no areas
+        // set but just want to get the current brush select info from a `brush` event.
+        if (!areas) {
+            return;
+        }
+
+        this.areas = map(areas, function (area) {
+            return generateBrushOption(this.option, area);
+        }, this);
+    },
+
+    /**
+     * see module:echarts/component/helper/BrushController
+     * @param {Object} brushOption
+     */
+    setBrushOption: function (brushOption) {
+        this.brushOption = generateBrushOption(this.option, brushOption);
+        this.brushType = this.brushOption.brushType;
+    }
+
+});
+
+function generateBrushOption(option, brushOption) {
+    return merge(
+        {
+            brushType: option.brushType,
+            brushMode: option.brushMode,
+            transformable: option.transformable,
+            brushStyle: new Model(option.brushStyle).getItemStyle(),
+            removeOnClick: option.removeOnClick,
+            z: option.z
+        },
+        brushOption,
+        true
+    );
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+extendComponentView({
+
+    type: 'brush',
+
+    init: function (ecModel, api) {
+
+        /**
+         * @readOnly
+         * @type {module:echarts/model/Global}
+         */
+        this.ecModel = ecModel;
+
+        /**
+         * @readOnly
+         * @type {module:echarts/ExtensionAPI}
+         */
+        this.api = api;
+
+        /**
+         * @readOnly
+         * @type {module:echarts/component/brush/BrushModel}
+         */
+        this.model;
+
+        /**
+         * @private
+         * @type {module:echarts/component/helper/BrushController}
+         */
+        (this._brushController = new BrushController(api.getZr()))
+            .on('brush', bind(this._onBrush, this))
+            .mount();
+    },
+
+    /**
+     * @override
+     */
+    render: function (brushModel) {
+        this.model = brushModel;
+        return updateController.apply(this, arguments);
+    },
+
+    /**
+     * @override
+     */
+    updateTransform: updateController,
+
+    /**
+     * @override
+     */
+    updateView: updateController,
+
+    // /**
+    //  * @override
+    //  */
+    // updateLayout: updateController,
+
+    // /**
+    //  * @override
+    //  */
+    // updateVisual: updateController,
+
+    /**
+     * @override
+     */
+    dispose: function () {
+        this._brushController.dispose();
+    },
+
+    /**
+     * @private
+     */
+    _onBrush: function (areas, opt) {
+        var modelId = this.model.id;
+
+        this.model.brushTargetManager.setOutputRanges(areas, this.ecModel);
+
+        // Action is not dispatched on drag end, because the drag end
+        // emits the same params with the last drag move event, and
+        // may have some delay when using touch pad, which makes
+        // animation not smooth (when using debounce).
+        (!opt.isEnd || opt.removeOnClick) && this.api.dispatchAction({
+            type: 'brush',
+            brushId: modelId,
+            areas: clone(areas),
+            $from: modelId
+        });
+    }
+
+});
+
+function updateController(brushModel, ecModel, api, payload) {
+    // Do not update controller when drawing.
+    (!payload || payload.$from !== brushModel.id) && this._brushController
+        .setPanels(brushModel.brushTargetManager.makePanelOpts(api))
+        .enableBrush(brushModel.brushOption)
+        .updateCovers(brushModel.areas.slice());
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * payload: {
+ *      brushIndex: number, or,
+ *      brushId: string, or,
+ *      brushName: string,
+ *      globalRanges: Array
+ * }
+ */
+registerAction(
+        {type: 'brush', event: 'brush' /*, update: 'updateView' */},
+    function (payload, ecModel) {
+        ecModel.eachComponent({mainType: 'brush', query: payload}, function (brushModel) {
+            brushModel.setAreas(payload.areas);
+        });
+    }
+);
+
+/**
+ * payload: {
+ *      brushComponents: [
+ *          {
+ *              brushId,
+ *              brushIndex,
+ *              brushName,
+ *              series: [
+ *                  {
+ *                      seriesId,
+ *                      seriesIndex,
+ *                      seriesName,
+ *                      rawIndices: [21, 34, ...]
+ *                  },
+ *                  ...
+ *              ]
+ *          },
+ *          ...
+ *      ]
+ * }
+ */
+registerAction(
+        {type: 'brushSelect', event: 'brushSelected', update: 'none'},
+    function () {}
+);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+var features = {};
+
+function register$1(name, ctor) {
+    features[name] = ctor;
+}
+
+function get$1(name) {
+    return features[name];
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var brushLang = lang.toolbox.brush;
+
+function Brush(model, ecModel, api) {
+    this.model = model;
+    this.ecModel = ecModel;
+    this.api = api;
+
+    /**
+     * @private
+     * @type {string}
+     */
+    this._brushType;
+
+    /**
+     * @private
+     * @type {string}
+     */
+    this._brushMode;
+}
+
+Brush.defaultOption = {
+    show: true,
+    type: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
+    icon: {
+        rect: 'M7.3,34.7 M0.4,10V-0.2h9.8 M89.6,10V-0.2h-9.8 M0.4,60v10.2h9.8 M89.6,60v10.2h-9.8 M12.3,22.4V10.5h13.1 M33.6,10.5h7.8 M49.1,10.5h7.8 M77.5,22.4V10.5h-13 M12.3,31.1v8.2 M77.7,31.1v8.2 M12.3,47.6v11.9h13.1 M33.6,59.5h7.6 M49.1,59.5 h7.7 M77.5,47.6v11.9h-13', // jshint ignore:line
+        polygon: 'M55.2,34.9c1.7,0,3.1,1.4,3.1,3.1s-1.4,3.1-3.1,3.1 s-3.1-1.4-3.1-3.1S53.5,34.9,55.2,34.9z M50.4,51c1.7,0,3.1,1.4,3.1,3.1c0,1.7-1.4,3.1-3.1,3.1c-1.7,0-3.1-1.4-3.1-3.1 C47.3,52.4,48.7,51,50.4,51z M55.6,37.1l1.5-7.8 M60.1,13.5l1.6-8.7l-7.8,4 M59,19l-1,5.3 M24,16.1l6.4,4.9l6.4-3.3 M48.5,11.6 l-5.9,3.1 M19.1,12.8L9.7,5.1l1.1,7.7 M13.4,29.8l1,7.3l6.6,1.6 M11.6,18.4l1,6.1 M32.8,41.9 M26.6,40.4 M27.3,40.2l6.1,1.6 M49.9,52.1l-5.6-7.6l-4.9-1.2', // jshint ignore:line
+        lineX: 'M15.2,30 M19.7,15.6V1.9H29 M34.8,1.9H40.4 M55.3,15.6V1.9H45.9 M19.7,44.4V58.1H29 M34.8,58.1H40.4 M55.3,44.4 V58.1H45.9 M12.5,20.3l-9.4,9.6l9.6,9.8 M3.1,29.9h16.5 M62.5,20.3l9.4,9.6L62.3,39.7 M71.9,29.9H55.4', // jshint ignore:line
+        lineY: 'M38.8,7.7 M52.7,12h13.2v9 M65.9,26.6V32 M52.7,46.3h13.2v-9 M24.9,12H11.8v9 M11.8,26.6V32 M24.9,46.3H11.8v-9 M48.2,5.1l-9.3-9l-9.4,9.2 M38.9-3.9V12 M48.2,53.3l-9.3,9l-9.4-9.2 M38.9,62.3V46.4', // jshint ignore:line
+        keep: 'M4,10.5V1h10.3 M20.7,1h6.1 M33,1h6.1 M55.4,10.5V1H45.2 M4,17.3v6.6 M55.6,17.3v6.6 M4,30.5V40h10.3 M20.7,40 h6.1 M33,40h6.1 M55.4,30.5V40H45.2 M21,18.9h62.9v48.6H21V18.9z', // jshint ignore:line
+        clear: 'M22,14.7l30.9,31 M52.9,14.7L22,45.7 M4.7,16.8V4.2h13.1 M26,4.2h7.8 M41.6,4.2h7.8 M70.3,16.8V4.2H57.2 M4.7,25.9v8.6 M70.3,25.9v8.6 M4.7,43.2v12.6h13.1 M26,55.8h7.8 M41.6,55.8h7.8 M70.3,43.2v12.6H57.2' // jshint ignore:line
+    },
+    // `rect`, `polygon`, `lineX`, `lineY`, `keep`, `clear`
+    title: clone(brushLang.title)
+};
+
+var proto$3 = Brush.prototype;
+
+// proto.updateLayout = function (featureModel, ecModel, api) {
+proto$3.render =
+proto$3.updateView = function (featureModel, ecModel, api) {
+    var brushType;
+    var brushMode;
+    var isBrushed;
+
+    ecModel.eachComponent({mainType: 'brush'}, function (brushModel) {
+        brushType = brushModel.brushType;
+        brushMode = brushModel.brushOption.brushMode || 'single';
+        isBrushed |= brushModel.areas.length;
+    });
+    this._brushType = brushType;
+    this._brushMode = brushMode;
+
+    each$1(featureModel.get('type', true), function (type) {
+        featureModel.setIconStatus(
+            type,
+            (
+                type === 'keep'
+                ? brushMode === 'multiple'
+                : type === 'clear'
+                ? isBrushed
+                : type === brushType
+            ) ? 'emphasis' : 'normal'
+        );
+    });
+};
+
+proto$3.getIcons = function () {
+    var model = this.model;
+    var availableIcons = model.get('icon', true);
+    var icons = {};
+    each$1(model.get('type', true), function (type) {
+        if (availableIcons[type]) {
+            icons[type] = availableIcons[type];
+        }
+    });
+    return icons;
+};
+
+proto$3.onclick = function (ecModel, api, type) {
+    var brushType = this._brushType;
+    var brushMode = this._brushMode;
+
+    if (type === 'clear') {
+        // Trigger parallel action firstly
+        api.dispatchAction({
+            type: 'axisAreaSelect',
+            intervals: []
+        });
+
+        api.dispatchAction({
+            type: 'brush',
+            command: 'clear',
+            // Clear all areas of all brush components.
+            areas: []
+        });
+    }
+    else {
+        api.dispatchAction({
+            type: 'takeGlobalCursor',
+            key: 'brush',
+            brushOption: {
+                brushType: type === 'keep'
+                    ? brushType
+                    : (brushType === type ? false : type),
+                brushMode: type === 'keep'
+                    ? (brushMode === 'multiple' ? 'single' : 'multiple')
+                    : brushMode
+            }
+        });
+    }
+};
+
+register$1('brush', Brush);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Brush component entry
+ */
+
+registerPreprocessor(preprocessor$1);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// (24*60*60*1000)
+var PROXIMATE_ONE_DAY = 86400000;
+
+/**
+ * Calendar
+ *
+ * @constructor
+ *
+ * @param {Object} calendarModel calendarModel
+ * @param {Object} ecModel       ecModel
+ * @param {Object} api           api
+ */
+function Calendar(calendarModel, ecModel, api) {
+    this._model = calendarModel;
+}
+
+Calendar.prototype = {
+
+    constructor: Calendar,
+
+    type: 'calendar',
+
+    dimensions: ['time', 'value'],
+
+    // Required in createListFromData
+    getDimensionsInfo: function () {
+        return [{name: 'time', type: 'time'}, 'value'];
+    },
+
+    getRangeInfo: function () {
+        return this._rangeInfo;
+    },
+
+    getModel: function () {
+        return this._model;
+    },
+
+    getRect: function () {
+        return this._rect;
+    },
+
+    getCellWidth: function () {
+        return this._sw;
+    },
+
+    getCellHeight: function () {
+        return this._sh;
+    },
+
+    getOrient: function () {
+        return this._orient;
+    },
+
+    /**
+     * getFirstDayOfWeek
+     *
+     * @example
+     *     0 : start at Sunday
+     *     1 : start at Monday
+     *
+     * @return {number}
+     */
+    getFirstDayOfWeek: function () {
+        return this._firstDayOfWeek;
+    },
+
+    /**
+     * get date info
+     *
+     * @param  {string|number} date date
+     * @return {Object}
+     * {
+     *      y: string, local full year, eg., '1940',
+     *      m: string, local month, from '01' ot '12',
+     *      d: string, local date, from '01' to '31' (if exists),
+     *      day: It is not date.getDay(). It is the location of the cell in a week, from 0 to 6,
+     *      time: timestamp,
+     *      formatedDate: string, yyyy-MM-dd,
+     *      date: original date object.
+     * }
+     */
+    getDateInfo: function (date) {
+
+        date = parseDate(date);
+
+        var y = date.getFullYear();
+
+        var m = date.getMonth() + 1;
+        m = m < 10 ? '0' + m : m;
+
+        var d = date.getDate();
+        d = d < 10 ? '0' + d : d;
+
+        var day = date.getDay();
+
+        day = Math.abs((day + 7 - this.getFirstDayOfWeek()) % 7);
+
+        return {
+            y: y,
+            m: m,
+            d: d,
+            day: day,
+            time: date.getTime(),
+            formatedDate: y + '-' + m + '-' + d,
+            date: date
+        };
+    },
+
+    getNextNDay: function (date, n) {
+        n = n || 0;
+        if (n === 0) {
+            return this.getDateInfo(date);
+        }
+
+        date = new Date(this.getDateInfo(date).time);
+        date.setDate(date.getDate() + n);
+
+        return this.getDateInfo(date);
+    },
+
+    update: function (ecModel, api) {
+
+        this._firstDayOfWeek = +this._model.getModel('dayLabel').get('firstDay');
+        this._orient = this._model.get('orient');
+        this._lineWidth = this._model.getModel('itemStyle').getItemStyle().lineWidth || 0;
+
+
+        this._rangeInfo = this._getRangeInfo(this._initRangeOption());
+        var weeks = this._rangeInfo.weeks || 1;
+        var whNames = ['width', 'height'];
+        var cellSize = this._model.get('cellSize').slice();
+        var layoutParams = this._model.getBoxLayoutParams();
+        var cellNumbers = this._orient === 'horizontal' ? [weeks, 7] : [7, weeks];
+
+        each$1([0, 1], function (idx) {
+            if (cellSizeSpecified(cellSize, idx)) {
+                layoutParams[whNames[idx]] = cellSize[idx] * cellNumbers[idx];
+            }
+        });
+
+        var whGlobal = {
+            width: api.getWidth(),
+            height: api.getHeight()
+        };
+        var calendarRect = this._rect = getLayoutRect(layoutParams, whGlobal);
+
+        each$1([0, 1], function (idx) {
+            if (!cellSizeSpecified(cellSize, idx)) {
+                cellSize[idx] = calendarRect[whNames[idx]] / cellNumbers[idx];
+            }
+        });
+
+        function cellSizeSpecified(cellSize, idx) {
+            return cellSize[idx] != null && cellSize[idx] !== 'auto';
+        }
+
+        this._sw = cellSize[0];
+        this._sh = cellSize[1];
+    },
+
+
+    /**
+     * Convert a time data(time, value) item to (x, y) point.
+     *
+     * @override
+     * @param  {Array|number} data data
+     * @param  {boolean} [clamp=true] out of range
+     * @return {Array} point
+     */
+    dataToPoint: function (data, clamp) {
+        isArray(data) && (data = data[0]);
+        clamp == null && (clamp = true);
+
+        var dayInfo = this.getDateInfo(data);
+        var range = this._rangeInfo;
+        var date = dayInfo.formatedDate;
+
+        // if not in range return [NaN, NaN]
+        if (clamp && !(
+            dayInfo.time >= range.start.time
+            && dayInfo.time < range.end.time + PROXIMATE_ONE_DAY
+        )) {
+            return [NaN, NaN];
+        }
+
+        var week = dayInfo.day;
+        var nthWeek = this._getRangeInfo([range.start.time, date]).nthWeek;
+
+        if (this._orient === 'vertical') {
+            return [
+                this._rect.x + week * this._sw + this._sw / 2,
+                this._rect.y + nthWeek * this._sh + this._sh / 2
+            ];
+
+        }
+
+        return [
+            this._rect.x + nthWeek * this._sw + this._sw / 2,
+            this._rect.y + week * this._sh + this._sh / 2
+        ];
+
+    },
+
+    /**
+     * Convert a (x, y) point to time data
+     *
+     * @override
+     * @param  {string} point point
+     * @return {string}       data
+     */
+    pointToData: function (point) {
+
+        var date = this.pointToDate(point);
+
+        return date && date.time;
+    },
+
+    /**
+     * Convert a time date item to (x, y) four point.
+     *
+     * @param  {Array} data  date[0] is date
+     * @param  {boolean} [clamp=true]  out of range
+     * @return {Object}       point
+     */
+    dataToRect: function (data, clamp) {
+        var point = this.dataToPoint(data, clamp);
+
+        return {
+            contentShape: {
+                x: point[0] - (this._sw - this._lineWidth) / 2,
+                y: point[1] - (this._sh - this._lineWidth) / 2,
+                width: this._sw - this._lineWidth,
+                height: this._sh - this._lineWidth
+            },
+
+            center: point,
+
+            tl: [
+                point[0] - this._sw / 2,
+                point[1] - this._sh / 2
+            ],
+
+            tr: [
+                point[0] + this._sw / 2,
+                point[1] - this._sh / 2
+            ],
+
+            br: [
+                point[0] + this._sw / 2,
+                point[1] + this._sh / 2
+            ],
+
+            bl: [
+                point[0] - this._sw / 2,
+                point[1] + this._sh / 2
+            ]
+
+        };
+    },
+
+    /**
+     * Convert a (x, y) point to time date
+     *
+     * @param  {Array} point point
+     * @return {Object}       date
+     */
+    pointToDate: function (point) {
+        var nthX = Math.floor((point[0] - this._rect.x) / this._sw) + 1;
+        var nthY = Math.floor((point[1] - this._rect.y) / this._sh) + 1;
+        var range = this._rangeInfo.range;
+
+        if (this._orient === 'vertical') {
+            return this._getDateByWeeksAndDay(nthY, nthX - 1, range);
+        }
+
+        return this._getDateByWeeksAndDay(nthX, nthY - 1, range);
+    },
+
+    /**
+     * @inheritDoc
+     */
+    convertToPixel: curry(doConvert$2, 'dataToPoint'),
+
+    /**
+     * @inheritDoc
+     */
+    convertFromPixel: curry(doConvert$2, 'pointToData'),
+
+    /**
+     * initRange
+     *
+     * @private
+     * @return {Array} [start, end]
+     */
+    _initRangeOption: function () {
+        var range = this._model.get('range');
+
+        var rg = range;
+
+        if (isArray(rg) && rg.length === 1) {
+            rg = rg[0];
+        }
+
+        if (/^\d{4}$/.test(rg)) {
+            range = [rg + '-01-01', rg + '-12-31'];
+        }
+
+        if (/^\d{4}[\/|-]\d{1,2}$/.test(rg)) {
+
+            var start = this.getDateInfo(rg);
+            var firstDay = start.date;
+            firstDay.setMonth(firstDay.getMonth() + 1);
+
+            var end = this.getNextNDay(firstDay, -1);
+            range = [start.formatedDate, end.formatedDate];
+        }
+
+        if (/^\d{4}[\/|-]\d{1,2}[\/|-]\d{1,2}$/.test(rg)) {
+            range = [rg, rg];
+        }
+
+        var tmp = this._getRangeInfo(range);
+
+        if (tmp.start.time > tmp.end.time) {
+            range.reverse();
+        }
+
+        return range;
+    },
+
+    /**
+     * range info
+     *
+     * @private
+     * @param  {Array} range range ['2017-01-01', '2017-07-08']
+     *  If range[0] > range[1], they will not be reversed.
+     * @return {Object}       obj
+     */
+    _getRangeInfo: function (range) {
+        range = [
+            this.getDateInfo(range[0]),
+            this.getDateInfo(range[1])
+        ];
+
+        var reversed;
+        if (range[0].time > range[1].time) {
+            reversed = true;
+            range.reverse();
+        }
+
+        var allDay = Math.floor(range[1].time / PROXIMATE_ONE_DAY)
+            - Math.floor(range[0].time / PROXIMATE_ONE_DAY) + 1;
+
+        // Consider case:
+        // Firstly set system timezone as "Time Zone: America/Toronto",
+        // ```
+        // var first = new Date(1478412000000 - 3600 * 1000 * 2.5);
+        // var second = new Date(1478412000000);
+        // var allDays = Math.floor(second / ONE_DAY) - Math.floor(first / ONE_DAY) + 1;
+        // ```
+        // will get wrong result because of DST. So we should fix it.
+        var date = new Date(range[0].time);
+        var startDateNum = date.getDate();
+        var endDateNum = range[1].date.getDate();
+        date.setDate(startDateNum + allDay - 1);
+        // The bias can not over a month, so just compare date.
+        if (date.getDate() !== endDateNum) {
+            var sign = date.getTime() - range[1].time > 0 ? 1 : -1;
+            while (date.getDate() !== endDateNum && (date.getTime() - range[1].time) * sign > 0) {
+                allDay -= sign;
+                date.setDate(startDateNum + allDay - 1);
+            }
+        }
+
+        var weeks = Math.floor((allDay + range[0].day + 6) / 7);
+        var nthWeek = reversed ? -weeks + 1: weeks - 1;
+
+        reversed && range.reverse();
+
+        return {
+            range: [range[0].formatedDate, range[1].formatedDate],
+            start: range[0],
+            end: range[1],
+            allDay: allDay,
+            weeks: weeks,
+            // From 0.
+            nthWeek: nthWeek,
+            fweek: range[0].day,
+            lweek: range[1].day
+        };
+    },
+
+    /**
+     * get date by nthWeeks and week day in range
+     *
+     * @private
+     * @param  {number} nthWeek the week
+     * @param  {number} day   the week day
+     * @param  {Array} range [d1, d2]
+     * @return {Object}
+     */
+    _getDateByWeeksAndDay: function (nthWeek, day, range) {
+        var rangeInfo = this._getRangeInfo(range);
+
+        if (nthWeek > rangeInfo.weeks
+            || (nthWeek === 0 && day < rangeInfo.fweek)
+            || (nthWeek === rangeInfo.weeks && day > rangeInfo.lweek)
+        ) {
+            return false;
+        }
+
+        var nthDay = (nthWeek - 1) * 7 - rangeInfo.fweek + day;
+        var date = new Date(rangeInfo.start.time);
+        date.setDate(rangeInfo.start.d + nthDay);
+
+        return this.getDateInfo(date);
+    }
+};
+
+Calendar.dimensions =  Calendar.prototype.dimensions;
+
+Calendar.getDimensionsInfo =  Calendar.prototype.getDimensionsInfo;
+
+Calendar.create = function (ecModel, api) {
+    var calendarList = [];
+
+    ecModel.eachComponent('calendar', function (calendarModel) {
+        var calendar = new Calendar(calendarModel, ecModel, api);
+        calendarList.push(calendar);
+        calendarModel.coordinateSystem = calendar;
+    });
+
+    ecModel.eachSeries(function (calendarSeries) {
+        if (calendarSeries.get('coordinateSystem') === 'calendar') {
+            // Inject coordinate system
+            calendarSeries.coordinateSystem = calendarList[calendarSeries.get('calendarIndex') || 0];
+        }
+    });
+    return calendarList;
+};
+
+function doConvert$2(methodName, ecModel, finder, value) {
+    var calendarModel = finder.calendarModel;
+    var seriesModel = finder.seriesModel;
+
+    var coordSys = calendarModel
+        ? calendarModel.coordinateSystem
+        : seriesModel
+        ? seriesModel.coordinateSystem
+        : null;
+
+    return coordSys === this ? coordSys[methodName](value) : null;
+}
+
+CoordinateSystemManager.register('calendar', Calendar);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var CalendarModel = ComponentModel.extend({
+
+    type: 'calendar',
+
+    /**
+     * @type {module:echarts/coord/calendar/Calendar}
+     */
+    coordinateSystem: null,
+
+    defaultOption: {
+        zlevel: 0,
+        z: 2,
+        left: 80,
+        top: 60,
+
+        cellSize: 20,
+
+        // horizontal vertical
+        orient: 'horizontal',
+
+        // month separate line style
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: '#000',
+                width: 1,
+                type: 'solid'
+            }
+        },
+
+        // rect style  temporarily unused emphasis
+        itemStyle: {
+            color: '#fff',
+            borderWidth: 1,
+            borderColor: '#ccc'
+        },
+
+        // week text style
+        dayLabel: {
+            show: true,
+
+            // a week first day
+            firstDay: 0,
+
+            // start end
+            position: 'start',
+            margin: '50%', // 50% of cellSize
+            nameMap: 'en',
+            color: '#000'
+        },
+
+        // month text style
+        monthLabel: {
+            show: true,
+
+            // start end
+            position: 'start',
+            margin: 5,
+
+            // center or left
+            align: 'center',
+
+            // cn en []
+            nameMap: 'en',
+            formatter: null,
+            color: '#000'
+        },
+
+        // year text style
+        yearLabel: {
+            show: true,
+
+            // top bottom left right
+            position: null,
+            margin: 30,
+            formatter: null,
+            color: '#ccc',
+            fontFamily: 'sans-serif',
+            fontWeight: 'bolder',
+            fontSize: 20
+        }
+    },
+
+    /**
+     * @override
+     */
+    init: function (option, parentModel, ecModel, extraOpt) {
+        var inputPositionParams = getLayoutParams(option);
+
+        CalendarModel.superApply(this, 'init', arguments);
+
+        mergeAndNormalizeLayoutParams$1(option, inputPositionParams);
+    },
+
+    /**
+     * @override
+     */
+    mergeOption: function (option, extraOpt) {
+        CalendarModel.superApply(this, 'mergeOption', arguments);
+
+        mergeAndNormalizeLayoutParams$1(this.option, option);
+    }
+});
+
+function mergeAndNormalizeLayoutParams$1(target, raw) {
+    // Normalize cellSize
+    var cellSize = target.cellSize;
+
+    if (!isArray(cellSize)) {
+        cellSize = target.cellSize = [cellSize, cellSize];
+    }
+    else if (cellSize.length === 1) {
+        cellSize[1] = cellSize[0];
+    }
+
+    var ignoreSize = map([0, 1], function (hvIdx) {
+        // If user have set `width` or both `left` and `right`, cellSize
+        // will be automatically set to 'auto', otherwise the default
+        // setting of cellSize will make `width` setting not work.
+        if (sizeCalculable(raw, hvIdx)) {
+            cellSize[hvIdx] = 'auto';
+        }
+        return cellSize[hvIdx] != null && cellSize[hvIdx] !== 'auto';
+    });
+
+    mergeLayoutParam(target, raw, {
+        type: 'box', ignoreSize: ignoreSize
+    });
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var MONTH_TEXT = {
+    EN: [
+        'Jan', 'Feb', 'Mar',
+        'Apr', 'May', 'Jun',
+        'Jul', 'Aug', 'Sep',
+        'Oct', 'Nov', 'Dec'
+    ],
+    CN: [
+        'ä¸€æœˆ', 'äºŒæœˆ', 'ä¸‰æœˆ',
+        'å››æœˆ', 'äº”æœˆ', 'å…æœˆ',
+        'ä¸ƒæœˆ', 'å…«æœˆ', 'ä¹æœˆ',
+        'åæœˆ', 'åä¸€æœˆ', 'åäºŒæœˆ'
+    ]
+};
+
+var WEEK_TEXT = {
+    EN: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    CN: ['æ—¥', 'ä¸€', 'äºŒ', 'ä¸‰', 'å››', 'äº”', 'å…']
+};
+
+extendComponentView({
+
+    type: 'calendar',
+
+    /**
+     * top/left line points
+     *  @private
+     */
+    _tlpoints: null,
+
+    /**
+     * bottom/right line points
+     *  @private
+     */
+    _blpoints: null,
+
+    /**
+     * first day of month
+     *  @private
+     */
+    _firstDayOfMonth: null,
+
+    /**
+     * first day point of month
+     *  @private
+     */
+    _firstDayPoints: null,
+
+    render: function (calendarModel, ecModel, api) {
+
+        var group = this.group;
+
+        group.removeAll();
+
+        var coordSys = calendarModel.coordinateSystem;
+
+        // range info
+        var rangeData = coordSys.getRangeInfo();
+        var orient = coordSys.getOrient();
+
+        this._renderDayRect(calendarModel, rangeData, group);
+
+        // _renderLines must be called prior to following function
+        this._renderLines(calendarModel, rangeData, orient, group);
+
+        this._renderYearText(calendarModel, rangeData, orient, group);
+
+        this._renderMonthText(calendarModel, orient, group);
+
+        this._renderWeekText(calendarModel, rangeData, orient, group);
+    },
+
+    // render day rect
+    _renderDayRect: function (calendarModel, rangeData, group) {
+        var coordSys = calendarModel.coordinateSystem;
+        var itemRectStyleModel = calendarModel.getModel('itemStyle').getItemStyle();
+        var sw = coordSys.getCellWidth();
+        var sh = coordSys.getCellHeight();
+
+        for (var i = rangeData.start.time;
+            i <= rangeData.end.time;
+            i = coordSys.getNextNDay(i, 1).time
+        ) {
+
+            var point = coordSys.dataToRect([i], false).tl;
+
+            // every rect
+            var rect = new Rect({
+                shape: {
+                    x: point[0],
+                    y: point[1],
+                    width: sw,
+                    height: sh
+                },
+                cursor: 'default',
+                style: itemRectStyleModel
+            });
+
+            group.add(rect);
+        }
+
+    },
+
+    // render separate line
+    _renderLines: function (calendarModel, rangeData, orient, group) {
+
+        var self = this;
+
+        var coordSys = calendarModel.coordinateSystem;
+
+        var lineStyleModel = calendarModel.getModel('splitLine.lineStyle').getLineStyle();
+        var show = calendarModel.get('splitLine.show');
+
+        var lineWidth = lineStyleModel.lineWidth;
+
+        this._tlpoints = [];
+        this._blpoints = [];
+        this._firstDayOfMonth = [];
+        this._firstDayPoints = [];
+
+
+        var firstDay = rangeData.start;
+
+        for (var i = 0; firstDay.time <= rangeData.end.time; i++) {
+            addPoints(firstDay.formatedDate);
+
+            if (i === 0) {
+                firstDay = coordSys.getDateInfo(rangeData.start.y + '-' + rangeData.start.m);
+            }
+
+            var date = firstDay.date;
+            date.setMonth(date.getMonth() + 1);
+            firstDay = coordSys.getDateInfo(date);
+        }
+
+        addPoints(coordSys.getNextNDay(rangeData.end.time, 1).formatedDate);
+
+        function addPoints(date) {
+
+            self._firstDayOfMonth.push(coordSys.getDateInfo(date));
+            self._firstDayPoints.push(coordSys.dataToRect([date], false).tl);
+
+            var points = self._getLinePointsOfOneWeek(calendarModel, date, orient);
+
+            self._tlpoints.push(points[0]);
+            self._blpoints.push(points[points.length - 1]);
+
+            show && self._drawSplitline(points, lineStyleModel, group);
+        }
+
+
+        // render top/left line
+        show && this._drawSplitline(self._getEdgesPoints(self._tlpoints, lineWidth, orient), lineStyleModel, group);
+
+        // render bottom/right line
+        show && this._drawSplitline(self._getEdgesPoints(self._blpoints, lineWidth, orient), lineStyleModel, group);
+
+    },
+
+    // get points at both ends
+    _getEdgesPoints: function (points, lineWidth, orient) {
+        var rs = [points[0].slice(), points[points.length - 1].slice()];
+        var idx = orient === 'horizontal' ? 0 : 1;
+
+        // both ends of the line are extend half lineWidth
+        rs[0][idx] = rs[0][idx] - lineWidth / 2;
+        rs[1][idx] = rs[1][idx] + lineWidth / 2;
+
+        return rs;
+    },
+
+    // render split line
+    _drawSplitline: function (points, lineStyleModel, group) {
+
+        var poyline = new Polyline({
+            z2: 20,
+            shape: {
+                points: points
+            },
+            style: lineStyleModel
+        });
+
+        group.add(poyline);
+    },
+
+    // render month line of one week points
+    _getLinePointsOfOneWeek: function (calendarModel, date, orient) {
+
+        var coordSys = calendarModel.coordinateSystem;
+        date = coordSys.getDateInfo(date);
+
+        var points = [];
+
+        for (var i = 0; i < 7; i++) {
+
+            var tmpD = coordSys.getNextNDay(date.time, i);
+            var point = coordSys.dataToRect([tmpD.time], false);
+
+            points[2 * tmpD.day] = point.tl;
+            points[2 * tmpD.day + 1] = point[orient === 'horizontal' ? 'bl' : 'tr'];
+        }
+
+        return points;
+
+    },
+
+    _formatterLabel: function (formatter, params) {
+
+        if (typeof formatter === 'string' && formatter) {
+            return formatTplSimple(formatter, params);
+        }
+
+        if (typeof formatter === 'function') {
+            return formatter(params);
+        }
+
+        return params.nameMap;
+
+    },
+
+    _yearTextPositionControl: function (textEl, point, orient, position, margin) {
+
+        point = point.slice();
+        var aligns = ['center', 'bottom'];
+
+        if (position === 'bottom') {
+            point[1] += margin;
+            aligns = ['center', 'top'];
+        }
+        else if (position === 'left') {
+            point[0] -= margin;
+        }
+        else if (position === 'right') {
+            point[0] += margin;
+            aligns = ['center', 'top'];
+        }
+        else { // top
+            point[1] -= margin;
+        }
+
+        var rotate = 0;
+        if (position === 'left' || position === 'right') {
+            rotate = Math.PI / 2;
+        }
+
+        return {
+            rotation: rotate,
+            position: point,
+            style: {
+                textAlign: aligns[0],
+                textVerticalAlign: aligns[1]
+            }
+        };
+    },
+
+    // render year
+    _renderYearText: function (calendarModel, rangeData, orient, group) {
+        var yearLabel = calendarModel.getModel('yearLabel');
+
+        if (!yearLabel.get('show')) {
+            return;
+        }
+
+        var margin = yearLabel.get('margin');
+        var pos = yearLabel.get('position');
+
+        if (!pos) {
+            pos = orient !== 'horizontal' ? 'top' : 'left';
+        }
+
+        var points = [this._tlpoints[this._tlpoints.length - 1], this._blpoints[0]];
+        var xc = (points[0][0] + points[1][0]) / 2;
+        var yc = (points[0][1] + points[1][1]) / 2;
+
+        var idx = orient === 'horizontal' ? 0 : 1;
+
+        var posPoints = {
+            top: [xc, points[idx][1]],
+            bottom: [xc, points[1 - idx][1]],
+            left: [points[1 - idx][0], yc],
+            right: [points[idx][0], yc]
+        };
+
+        var name = rangeData.start.y;
+
+        if (+rangeData.end.y > +rangeData.start.y) {
+            name = name + '-' + rangeData.end.y;
+        }
+
+        var formatter = yearLabel.get('formatter');
+
+        var params = {
+            start: rangeData.start.y,
+            end: rangeData.end.y,
+            nameMap: name
+        };
+
+        var content = this._formatterLabel(formatter, params);
+
+        var yearText = new Text({z2: 30});
+        setTextStyle(yearText.style, yearLabel, {text: content}),
+        yearText.attr(this._yearTextPositionControl(yearText, posPoints[pos], orient, pos, margin));
+
+        group.add(yearText);
+    },
+
+    _monthTextPositionControl: function (point, isCenter, orient, position, margin) {
+        var align = 'left';
+        var vAlign = 'top';
+        var x = point[0];
+        var y = point[1];
+
+        if (orient === 'horizontal') {
+            y = y + margin;
+
+            if (isCenter) {
+                align = 'center';
+            }
+
+            if (position === 'start') {
+                vAlign = 'bottom';
+            }
+        }
+        else {
+            x = x + margin;
+
+            if (isCenter) {
+                vAlign = 'middle';
+            }
+
+            if (position === 'start') {
+                align = 'right';
+            }
+        }
+
+        return {
+            x: x,
+            y: y,
+            textAlign: align,
+            textVerticalAlign: vAlign
+        };
+    },
+
+    // render month and year text
+    _renderMonthText: function (calendarModel, orient, group) {
+        var monthLabel = calendarModel.getModel('monthLabel');
+
+        if (!monthLabel.get('show')) {
+            return;
+        }
+
+        var nameMap = monthLabel.get('nameMap');
+        var margin = monthLabel.get('margin');
+        var pos = monthLabel.get('position');
+        var align = monthLabel.get('align');
+
+        var termPoints = [this._tlpoints, this._blpoints];
+
+        if (isString(nameMap)) {
+            nameMap = MONTH_TEXT[nameMap.toUpperCase()] || [];
+        }
+
+        var idx = pos === 'start' ? 0 : 1;
+        var axis = orient === 'horizontal' ? 0 : 1;
+        margin = pos === 'start' ? -margin : margin;
+        var isCenter = (align === 'center');
+
+        for (var i = 0; i < termPoints[idx].length - 1; i++) {
+
+            var tmp = termPoints[idx][i].slice();
+            var firstDay = this._firstDayOfMonth[i];
+
+            if (isCenter) {
+                var firstDayPoints = this._firstDayPoints[i];
+                tmp[axis] = (firstDayPoints[axis] + termPoints[0][i + 1][axis]) / 2;
+            }
+
+            var formatter = monthLabel.get('formatter');
+            var name = nameMap[+firstDay.m - 1];
+            var params = {
+                yyyy: firstDay.y,
+                yy: (firstDay.y + '').slice(2),
+                MM: firstDay.m,
+                M: +firstDay.m,
+                nameMap: name
+            };
+
+            var content = this._formatterLabel(formatter, params);
+
+            var monthText = new Text({z2: 30});
+            extend(
+                setTextStyle(monthText.style, monthLabel, {text: content}),
+                this._monthTextPositionControl(tmp, isCenter, orient, pos, margin)
+            );
+
+            group.add(monthText);
+        }
+    },
+
+    _weekTextPositionControl: function (point, orient, position, margin, cellSize) {
+        var align = 'center';
+        var vAlign = 'middle';
+        var x = point[0];
+        var y = point[1];
+        var isStart = position === 'start';
+
+        if (orient === 'horizontal') {
+            x = x + margin + (isStart ? 1 : -1) * cellSize[0] / 2;
+            align = isStart ? 'right' : 'left';
+        }
+        else {
+            y = y + margin + (isStart ? 1 : -1) * cellSize[1] / 2;
+            vAlign = isStart ? 'bottom' : 'top';
+        }
+
+        return {
+            x: x,
+            y: y,
+            textAlign: align,
+            textVerticalAlign: vAlign
+        };
+    },
+
+    // render weeks
+    _renderWeekText: function (calendarModel, rangeData, orient, group) {
+        var dayLabel = calendarModel.getModel('dayLabel');
+
+        if (!dayLabel.get('show')) {
+            return;
+        }
+
+        var coordSys = calendarModel.coordinateSystem;
+        var pos = dayLabel.get('position');
+        var nameMap = dayLabel.get('nameMap');
+        var margin = dayLabel.get('margin');
+        var firstDayOfWeek = coordSys.getFirstDayOfWeek();
+
+        if (isString(nameMap)) {
+            nameMap = WEEK_TEXT[nameMap.toUpperCase()] || [];
+        }
+
+        var start = coordSys.getNextNDay(
+            rangeData.end.time, (7 - rangeData.lweek)
+        ).time;
+
+        var cellSize = [coordSys.getCellWidth(), coordSys.getCellHeight()];
+        margin = parsePercent$1(margin, cellSize[orient === 'horizontal' ? 0 : 1]);
+
+        if (pos === 'start') {
+            start = coordSys.getNextNDay(
+                rangeData.start.time, -(7 + rangeData.fweek)
+            ).time;
+            margin = -margin;
+        }
+
+        for (var i = 0; i < 7; i++) {
+
+            var tmpD = coordSys.getNextNDay(start, i);
+            var point = coordSys.dataToRect([tmpD.time], false).center;
+            var day = i;
+            day = Math.abs((i + firstDayOfWeek) % 7);
+            var weekText = new Text({z2: 30});
+
+            extend(
+                setTextStyle(weekText.style, dayLabel, {text: nameMap[day]}),
+                this._weekTextPositionControl(point, orient, pos, margin, cellSize)
+            );
+            group.add(weekText);
+        }
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @file calendar.js
+ * @author dxh
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// Model
+extendComponentModel({
+
+    type: 'title',
+
+    layoutMode: {type: 'box', ignoreSize: true},
+
+    defaultOption: {
+        // ä¸€çº§å±‚å 
+        zlevel: 0,
+        // äºŒçº§å±‚å 
+        z: 6,
+        show: true,
+
+        text: '',
+        // è¶…é“¾æŽ¥è·³è½¬
+        // link: null,
+        // ä»…æ”¯æŒself | blank
+        target: 'blank',
+        subtext: '',
+
+        // è¶…é“¾æŽ¥è·³è½¬
+        // sublink: null,
+        // ä»…æ”¯æŒself | blank
+        subtarget: 'blank',
+
+        // 'center' Â¦ 'left' Â¦ 'right'
+        // Â¦ {number}ï¼ˆxåæ ‡ï¼Œå•ä½pxï¼‰
+        left: 0,
+        // 'top' Â¦ 'bottom' Â¦ 'center'
+        // Â¦ {number}ï¼ˆyåæ ‡ï¼Œå•ä½pxï¼‰
+        top: 0,
+
+        // æ°´å¹³å¯¹é½
+        // 'auto' | 'left' | 'right' | 'center'
+        // é»˜è®¤æ ¹æ® left çš„ä½ç½®åˆ¤æ–æ˜¯å·¦å¯¹é½è¿˜æ˜¯å³å¯¹é½
+        // textAlign: null
+        //
+        // åž‚ç›´å¯¹é½
+        // 'auto' | 'top' | 'bottom' | 'middle'
+        // é»˜è®¤æ ¹æ® top ä½ç½®åˆ¤æ–æ˜¯ä¸Šå¯¹é½è¿˜æ˜¯ä¸‹å¯¹é½
+        // textBaseline: null
+
+        backgroundColor: 'rgba(0,0,0,0)',
+
+        // æ ‡é¢˜è¾¹æ¡†é¢œè‰²
+        borderColor: '#ccc',
+
+        // æ ‡é¢˜è¾¹æ¡†çº¿å®½ï¼Œå•ä½pxï¼Œé»˜è®¤ä¸º0ï¼ˆæ— è¾¹æ¡†ï¼‰
+        borderWidth: 0,
+
+        // æ ‡é¢˜å†…è¾¹è·ï¼Œå•ä½pxï¼Œé»˜è®¤å„æ–¹å‘å†…è¾¹è·ä¸º5ï¼Œ
+        // æŽ¥å—æ•°ç»„åˆ†åˆ«è®¾å®šä¸Šå³ä¸‹å·¦è¾¹è·ï¼ŒåŒcss
+        padding: 5,
+
+        // ä¸»å‰¯æ ‡é¢˜çºµå‘é—´éš”ï¼Œå•ä½pxï¼Œé»˜è®¤ä¸º10ï¼Œ
+        itemGap: 10,
+        textStyle: {
+            fontSize: 18,
+            fontWeight: 'bolder',
+            color: '#333'
+        },
+        subtextStyle: {
+            color: '#aaa'
+        }
+    }
+});
+
+// View
+extendComponentView({
+
+    type: 'title',
+
+    render: function (titleModel, ecModel, api) {
+        this.group.removeAll();
+
+        if (!titleModel.get('show')) {
+            return;
+        }
+
+        var group = this.group;
+
+        var textStyleModel = titleModel.getModel('textStyle');
+        var subtextStyleModel = titleModel.getModel('subtextStyle');
+
+        var textAlign = titleModel.get('textAlign');
+        var textBaseline = titleModel.get('textBaseline');
+
+        var textEl = new Text({
+            style: setTextStyle({}, textStyleModel, {
+                text: titleModel.get('text'),
+                textFill: textStyleModel.getTextColor()
+            }, {disableBox: true}),
+            z2: 10
+        });
+
+        var textRect = textEl.getBoundingRect();
+
+        var subText = titleModel.get('subtext');
+        var subTextEl = new Text({
+            style: setTextStyle({}, subtextStyleModel, {
+                text: subText,
+                textFill: subtextStyleModel.getTextColor(),
+                y: textRect.height + titleModel.get('itemGap'),
+                textVerticalAlign: 'top'
+            }, {disableBox: true}),
+            z2: 10
+        });
+
+        var link = titleModel.get('link');
+        var sublink = titleModel.get('sublink');
+
+        textEl.silent = !link;
+        subTextEl.silent = !sublink;
+
+        if (link) {
+            textEl.on('click', function () {
+                window.open(link, '_' + titleModel.get('target'));
+            });
+        }
+        if (sublink) {
+            subTextEl.on('click', function () {
+                window.open(sublink, '_' + titleModel.get('subtarget'));
+            });
+        }
+
+        group.add(textEl);
+        subText && group.add(subTextEl);
+        // If no subText, but add subTextEl, there will be an empty line.
+
+        var groupRect = group.getBoundingRect();
+        var layoutOption = titleModel.getBoxLayoutParams();
+        layoutOption.width = groupRect.width;
+        layoutOption.height = groupRect.height;
+        var layoutRect = getLayoutRect(
+            layoutOption, {
+                width: api.getWidth(),
+                height: api.getHeight()
+            }, titleModel.get('padding')
+        );
+        // Adjust text align based on position
+        if (!textAlign) {
+            // Align left if title is on the left. center and right is same
+            textAlign = titleModel.get('left') || titleModel.get('right');
+            if (textAlign === 'middle') {
+                textAlign = 'center';
+            }
+            // Adjust layout by text align
+            if (textAlign === 'right') {
+                layoutRect.x += layoutRect.width;
+            }
+            else if (textAlign === 'center') {
+                layoutRect.x += layoutRect.width / 2;
+            }
+        }
+        if (!textBaseline) {
+            textBaseline = titleModel.get('top') || titleModel.get('bottom');
+            if (textBaseline === 'center') {
+                textBaseline = 'middle';
+            }
+            if (textBaseline === 'bottom') {
+                layoutRect.y += layoutRect.height;
+            }
+            else if (textBaseline === 'middle') {
+                layoutRect.y += layoutRect.height / 2;
+            }
+
+            textBaseline = textBaseline || 'top';
+        }
+
+        group.attr('position', [layoutRect.x, layoutRect.y]);
+        var alignStyle = {
+            textAlign: textAlign,
+            textVerticalAlign: textBaseline
+        };
+        textEl.setStyle(alignStyle);
+        subTextEl.setStyle(alignStyle);
+
+        // Render background
+        // Get groupRect again because textAlign has been changed
+        groupRect = group.getBoundingRect();
+        var padding = layoutRect.margin;
+        var style = titleModel.getItemStyle(['color', 'opacity']);
+        style.fill = titleModel.get('backgroundColor');
+        var rect = new Rect({
+            shape: {
+                x: groupRect.x - padding[3],
+                y: groupRect.y - padding[0],
+                width: groupRect.width + padding[1] + padding[3],
+                height: groupRect.height + padding[0] + padding[2],
+                r: titleModel.get('borderRadius')
+            },
+            style: style,
+            silent: true
+        });
+        subPixelOptimizeRect(rect);
+
+        group.add(rect);
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+ComponentModel.registerSubTypeDefaulter('dataZoom', function () {
+    // Default 'slider' when no type specified.
+    return 'slider';
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var AXIS_DIMS = ['x', 'y', 'z', 'radius', 'angle', 'single'];
+// Supported coords.
+var COORDS = ['cartesian2d', 'polar', 'singleAxis'];
+
+/**
+ * @param {string} coordType
+ * @return {boolean}
+ */
+function isCoordSupported(coordType) {
+    return indexOf(COORDS, coordType) >= 0;
+}
+
+/**
+ * Create "each" method to iterate names.
+ *
+ * @pubilc
+ * @param  {Array.<string>} names
+ * @param  {Array.<string>=} attrs
+ * @return {Function}
+ */
+function createNameEach(names, attrs) {
+    names = names.slice();
+    var capitalNames = map(names, capitalFirst);
+    attrs = (attrs || []).slice();
+    var capitalAttrs = map(attrs, capitalFirst);
+
+    return function (callback, context) {
+        each$1(names, function (name, index) {
+            var nameObj = {name: name, capital: capitalNames[index]};
+
+            for (var j = 0; j < attrs.length; j++) {
+                nameObj[attrs[j]] = name + capitalAttrs[j];
+            }
+
+            callback.call(context, nameObj);
+        });
+    };
+}
+
+/**
+ * Iterate each dimension name.
+ *
+ * @public
+ * @param {Function} callback The parameter is like:
+ *                            {
+ *                                name: 'angle',
+ *                                capital: 'Angle',
+ *                                axis: 'angleAxis',
+ *                                axisIndex: 'angleAixs',
+ *                                index: 'angleIndex'
+ *                            }
+ * @param {Object} context
+ */
+var eachAxisDim$1 = createNameEach(AXIS_DIMS, ['axisIndex', 'axis', 'index', 'id']);
+
+/**
+ * If tow dataZoomModels has the same axis controlled, we say that they are 'linked'.
+ * dataZoomModels and 'links' make up one or more graphics.
+ * This function finds the graphic where the source dataZoomModel is in.
+ *
+ * @public
+ * @param {Function} forEachNode Node iterator.
+ * @param {Function} forEachEdgeType edgeType iterator
+ * @param {Function} edgeIdGetter Giving node and edgeType, return an array of edge id.
+ * @return {Function} Input: sourceNode, Output: Like {nodes: [], dims: {}}
+ */
+function createLinkedNodesFinder(forEachNode, forEachEdgeType, edgeIdGetter) {
+
+    return function (sourceNode) {
+        var result = {
+            nodes: [],
+            records: {} // key: edgeType.name, value: Object (key: edge id, value: boolean).
+        };
+
+        forEachEdgeType(function (edgeType) {
+            result.records[edgeType.name] = {};
+        });
+
+        if (!sourceNode) {
+            return result;
+        }
+
+        absorb(sourceNode, result);
+
+        var existsLink;
+        do {
+            existsLink = false;
+            forEachNode(processSingleNode);
+        }
+        while (existsLink);
+
+        function processSingleNode(node) {
+            if (!isNodeAbsorded(node, result) && isLinked(node, result)) {
+                absorb(node, result);
+                existsLink = true;
+            }
+        }
+
+        return result;
+    };
+
+    function isNodeAbsorded(node, result) {
+        return indexOf(result.nodes, node) >= 0;
+    }
+
+    function isLinked(node, result) {
+        var hasLink = false;
+        forEachEdgeType(function (edgeType) {
+            each$1(edgeIdGetter(node, edgeType) || [], function (edgeId) {
+                result.records[edgeType.name][edgeId] && (hasLink = true);
+            });
+        });
+        return hasLink;
+    }
+
+    function absorb(node, result) {
+        result.nodes.push(node);
+        forEachEdgeType(function (edgeType) {
+            each$1(edgeIdGetter(node, edgeType) || [], function (edgeId) {
+                result.records[edgeType.name][edgeId] = true;
+            });
+        });
+    }
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var each$22 = each$1;
+var asc$1 = asc;
+
+/**
+ * Operate single axis.
+ * One axis can only operated by one axis operator.
+ * Different dataZoomModels may be defined to operate the same axis.
+ * (i.e. 'inside' data zoom and 'slider' data zoom components)
+ * So dataZoomModels share one axisProxy in that case.
+ *
+ * @class
+ */
+var AxisProxy = function (dimName, axisIndex, dataZoomModel, ecModel) {
+
+    /**
+     * @private
+     * @type {string}
+     */
+    this._dimName = dimName;
+
+    /**
+     * @private
+     */
+    this._axisIndex = axisIndex;
+
+    /**
+     * @private
+     * @type {Array.<number>}
+     */
+    this._valueWindow;
+
+    /**
+     * @private
+     * @type {Array.<number>}
+     */
+    this._percentWindow;
+
+    /**
+     * @private
+     * @type {Array.<number>}
+     */
+    this._dataExtent;
+
+    /**
+     * {minSpan, maxSpan, minValueSpan, maxValueSpan}
+     * @private
+     * @type {Object}
+     */
+    this._minMaxSpan;
+
+    /**
+     * @readOnly
+     * @type {module: echarts/model/Global}
+     */
+    this.ecModel = ecModel;
+
+    /**
+     * @private
+     * @type {module: echarts/component/dataZoom/DataZoomModel}
+     */
+    this._dataZoomModel = dataZoomModel;
+
+    // /**
+    //  * @readOnly
+    //  * @private
+    //  */
+    // this.hasSeriesStacked;
+};
+
+AxisProxy.prototype = {
+
+    constructor: AxisProxy,
+
+    /**
+     * Whether the axisProxy is hosted by dataZoomModel.
+     *
+     * @public
+     * @param {module: echarts/component/dataZoom/DataZoomModel} dataZoomModel
+     * @return {boolean}
+     */
+    hostedBy: function (dataZoomModel) {
+        return this._dataZoomModel === dataZoomModel;
+    },
+
+    /**
+     * @return {Array.<number>} Value can only be NaN or finite value.
+     */
+    getDataValueWindow: function () {
+        return this._valueWindow.slice();
+    },
+
+    /**
+     * @return {Array.<number>}
+     */
+    getDataPercentWindow: function () {
+        return this._percentWindow.slice();
+    },
+
+    /**
+     * @public
+     * @param {number} axisIndex
+     * @return {Array} seriesModels
+     */
+    getTargetSeriesModels: function () {
+        var seriesModels = [];
+        var ecModel = this.ecModel;
+
+        ecModel.eachSeries(function (seriesModel) {
+            if (isCoordSupported(seriesModel.get('coordinateSystem'))) {
+                var dimName = this._dimName;
+                var axisModel = ecModel.queryComponents({
+                    mainType: dimName + 'Axis',
+                    index: seriesModel.get(dimName + 'AxisIndex'),
+                    id: seriesModel.get(dimName + 'AxisId')
+                })[0];
+                if (this._axisIndex === (axisModel && axisModel.componentIndex)) {
+                    seriesModels.push(seriesModel);
+                }
+            }
+        }, this);
+
+        return seriesModels;
+    },
+
+    getAxisModel: function () {
+        return this.ecModel.getComponent(this._dimName + 'Axis', this._axisIndex);
+    },
+
+    getOtherAxisModel: function () {
+        var axisDim = this._dimName;
+        var ecModel = this.ecModel;
+        var axisModel = this.getAxisModel();
+        var isCartesian = axisDim === 'x' || axisDim === 'y';
+        var otherAxisDim;
+        var coordSysIndexName;
+        if (isCartesian) {
+            coordSysIndexName = 'gridIndex';
+            otherAxisDim = axisDim === 'x' ? 'y' : 'x';
+        }
+        else {
+            coordSysIndexName = 'polarIndex';
+            otherAxisDim = axisDim === 'angle' ? 'radius' : 'angle';
+        }
+        var foundOtherAxisModel;
+        ecModel.eachComponent(otherAxisDim + 'Axis', function (otherAxisModel) {
+            if ((otherAxisModel.get(coordSysIndexName) || 0)
+                === (axisModel.get(coordSysIndexName) || 0)
+            ) {
+                foundOtherAxisModel = otherAxisModel;
+            }
+        });
+        return foundOtherAxisModel;
+    },
+
+    getMinMaxSpan: function () {
+        return clone(this._minMaxSpan);
+    },
+
+    /**
+     * Only calculate by given range and this._dataExtent, do not change anything.
+     *
+     * @param {Object} opt
+     * @param {number} [opt.start]
+     * @param {number} [opt.end]
+     * @param {number} [opt.startValue]
+     * @param {number} [opt.endValue]
+     */
+    calculateDataWindow: function (opt) {
+        var dataExtent = this._dataExtent;
+        var axisModel = this.getAxisModel();
+        var scale = axisModel.axis.scale;
+        var rangePropMode = this._dataZoomModel.getRangePropMode();
+        var percentExtent = [0, 100];
+        var percentWindow = [
+            opt.start,
+            opt.end
+        ];
+        var valueWindow = [];
+
+        each$22(['startValue', 'endValue'], function (prop) {
+            valueWindow.push(opt[prop] != null ? scale.parse(opt[prop]) : null);
+        });
+
+        // Normalize bound.
+        each$22([0, 1], function (idx) {
+            var boundValue = valueWindow[idx];
+            var boundPercent = percentWindow[idx];
+
+            // Notice: dataZoom is based either on `percentProp` ('start', 'end') or
+            // on `valueProp` ('startValue', 'endValue'). The former one is suitable
+            // for cases that a dataZoom component controls multiple axes with different
+            // unit or extent, and the latter one is suitable for accurate zoom by pixel
+            // (e.g., in dataZoomSelect). `valueProp` can be calculated from `percentProp`,
+            // but it is awkward that `percentProp` can not be obtained from `valueProp`
+            // accurately (because all of values that are overflow the `dataExtent` will
+            // be calculated to percent '100%'). So we have to use
+            // `dataZoom.getRangePropMode()` to mark which prop is used.
+            // `rangePropMode` is updated only when setOption or dispatchAction, otherwise
+            // it remains its original value.
+
+            if (rangePropMode[idx] === 'percent') {
+                if (boundPercent == null) {
+                    boundPercent = percentExtent[idx];
+                }
+                // Use scale.parse to math round for category or time axis.
+                boundValue = scale.parse(linearMap(
+                    boundPercent, percentExtent, dataExtent, true
+                ));
+            }
+            else {
+                // Calculating `percent` from `value` may be not accurate, because
+                // This calculation can not be inversed, because all of values that
+                // are overflow the `dataExtent` will be calculated to percent '100%'
+                boundPercent = linearMap(
+                    boundValue, dataExtent, percentExtent, true
+                );
+            }
+
+            // valueWindow[idx] = round(boundValue);
+            // percentWindow[idx] = round(boundPercent);
+            valueWindow[idx] = boundValue;
+            percentWindow[idx] = boundPercent;
+        });
+
+        return {
+            valueWindow: asc$1(valueWindow),
+            percentWindow: asc$1(percentWindow)
+        };
+    },
+
+    /**
+     * Notice: reset should not be called before series.restoreData() called,
+     * so it is recommanded to be called in "process stage" but not "model init
+     * stage".
+     *
+     * @param {module: echarts/component/dataZoom/DataZoomModel} dataZoomModel
+     */
+    reset: function (dataZoomModel) {
+        if (dataZoomModel !== this._dataZoomModel) {
+            return;
+        }
+
+        var targetSeries = this.getTargetSeriesModels();
+        // Culculate data window and data extent, and record them.
+        this._dataExtent = calculateDataExtent(this, this._dimName, targetSeries);
+
+        // this.hasSeriesStacked = false;
+        // each(targetSeries, function (series) {
+            // var data = series.getData();
+            // var dataDim = data.mapDimension(this._dimName);
+            // var stackedDimension = data.getCalculationInfo('stackedDimension');
+            // if (stackedDimension && stackedDimension === dataDim) {
+                // this.hasSeriesStacked = true;
+            // }
+        // }, this);
+
+        var dataWindow = this.calculateDataWindow(dataZoomModel.option);
+
+        this._valueWindow = dataWindow.valueWindow;
+        this._percentWindow = dataWindow.percentWindow;
+
+        setMinMaxSpan(this);
+
+        // Update axis setting then.
+        setAxisModel(this);
+    },
+
+    /**
+     * @param {module: echarts/component/dataZoom/DataZoomModel} dataZoomModel
+     */
+    restore: function (dataZoomModel) {
+        if (dataZoomModel !== this._dataZoomModel) {
+            return;
+        }
+
+        this._valueWindow = this._percentWindow = null;
+        setAxisModel(this, true);
+    },
+
+    /**
+     * @param {module: echarts/component/dataZoom/DataZoomModel} dataZoomModel
+     */
+    filterData: function (dataZoomModel, api) {
+        if (dataZoomModel !== this._dataZoomModel) {
+            return;
+        }
+
+        var axisDim = this._dimName;
+        var seriesModels = this.getTargetSeriesModels();
+        var filterMode = dataZoomModel.get('filterMode');
+        var valueWindow = this._valueWindow;
+
+        if (filterMode === 'none') {
+            return;
+        }
+
+        // FIXME
+        // Toolbox may has dataZoom injected. And if there are stacked bar chart
+        // with NaN data, NaN will be filtered and stack will be wrong.
+        // So we need to force the mode to be set empty.
+        // In fect, it is not a big deal that do not support filterMode-'filter'
+        // when using toolbox#dataZoom, utill tooltip#dataZoom support "single axis
+        // selection" some day, which might need "adapt to data extent on the
+        // otherAxis", which is disabled by filterMode-'empty'.
+        // But currently, stack has been fixed to based on value but not index,
+        // so this is not an issue any more.
+        // var otherAxisModel = this.getOtherAxisModel();
+        // if (dataZoomModel.get('$fromToolbox')
+        //     && otherAxisModel
+        //     && otherAxisModel.hasSeriesStacked
+        // ) {
+        //     filterMode = 'empty';
+        // }
+
+        // TODO
+        // filterMode 'weakFilter' and 'empty' is not optimized for huge data yet.
+
+        // Process series data
+        each$22(seriesModels, function (seriesModel) {
+            var seriesData = seriesModel.getData();
+            var dataDims = seriesData.mapDimension(axisDim, true);
+
+            if (filterMode === 'weakFilter') {
+                seriesData.filterSelf(function (dataIndex) {
+                    var leftOut;
+                    var rightOut;
+                    var hasValue;
+                    for (var i = 0; i < dataDims.length; i++) {
+                        var value = seriesData.get(dataDims[i], dataIndex);
+                        var thisHasValue = !isNaN(value);
+                        var thisLeftOut = value < valueWindow[0];
+                        var thisRightOut = value > valueWindow[1];
+                        if (thisHasValue && !thisLeftOut && !thisRightOut) {
+                            return true;
+                        }
+                        thisHasValue && (hasValue = true);
+                        thisLeftOut && (leftOut = true);
+                        thisRightOut && (rightOut = true);
+                    }
+                    // If both left out and right out, do not filter.
+                    return hasValue && leftOut && rightOut;
+                });
+            }
+            else {
+                each$22(dataDims, function (dim) {
+                    if (filterMode === 'empty') {
+                        seriesModel.setData(
+                            seriesData.map(dim, function (value) {
+                                return !isInWindow(value) ? NaN : value;
+                            })
+                        );
+                    }
+                    else {
+                        var range = {};
+                        range[dim] = valueWindow;
+
+                        // console.time('select');
+                        seriesData.selectRange(range);
+                        // console.timeEnd('select');
+                    }
+                });
+            }
+
+            each$22(dataDims, function (dim) {
+                seriesData.setApproximateExtent(valueWindow, dim);
+            });
+        });
+
+        function isInWindow(value) {
+            return value >= valueWindow[0] && value <= valueWindow[1];
+        }
+    }
+};
+
+function calculateDataExtent(axisProxy, axisDim, seriesModels) {
+    var dataExtent = [Infinity, -Infinity];
+
+    each$22(seriesModels, function (seriesModel) {
+        var seriesData = seriesModel.getData();
+        if (seriesData) {
+            each$22(seriesData.mapDimension(axisDim, true), function (dim) {
+                var seriesExtent = seriesData.getApproximateExtent(dim);
+                seriesExtent[0] < dataExtent[0] && (dataExtent[0] = seriesExtent[0]);
+                seriesExtent[1] > dataExtent[1] && (dataExtent[1] = seriesExtent[1]);
+            });
+        }
+    });
+
+    if (dataExtent[1] < dataExtent[0]) {
+        dataExtent = [NaN, NaN];
+    }
+
+    // It is important to get "consistent" extent when more then one axes is
+    // controlled by a `dataZoom`, otherwise those axes will not be synchronized
+    // when zooming. But it is difficult to know what is "consistent", considering
+    // axes have different type or even different meanings (For example, two
+    // time axes are used to compare data of the same date in different years).
+    // So basically dataZoom just obtains extent by series.data (in category axis
+    // extent can be obtained from axis.data).
+    // Nevertheless, user can set min/max/scale on axes to make extent of axes
+    // consistent.
+    fixExtentByAxis(axisProxy, dataExtent);
+
+    return dataExtent;
+}
+
+function fixExtentByAxis(axisProxy, dataExtent) {
+    var axisModel = axisProxy.getAxisModel();
+    var min = axisModel.getMin(true);
+
+    // For category axis, if min/max/scale are not set, extent is determined
+    // by axis.data by default.
+    var isCategoryAxis = axisModel.get('type') === 'category';
+    var axisDataLen = isCategoryAxis && axisModel.getCategories().length;
+
+    if (min != null && min !== 'dataMin' && typeof min !== 'function') {
+        dataExtent[0] = min;
+    }
+    else if (isCategoryAxis) {
+        dataExtent[0] = axisDataLen > 0 ? 0 : NaN;
+    }
+
+    var max = axisModel.getMax(true);
+    if (max != null && max !== 'dataMax' && typeof max !== 'function') {
+        dataExtent[1] = max;
+    }
+    else if (isCategoryAxis) {
+        dataExtent[1] = axisDataLen > 0 ? axisDataLen - 1 : NaN;
+    }
+
+    if (!axisModel.get('scale', true)) {
+        dataExtent[0] > 0 && (dataExtent[0] = 0);
+        dataExtent[1] < 0 && (dataExtent[1] = 0);
+    }
+
+    // For value axis, if min/max/scale are not set, we just use the extent obtained
+    // by series data, which may be a little different from the extent calculated by
+    // `axisHelper.getScaleExtent`. But the different just affects the experience a
+    // little when zooming. So it will not be fixed until some users require it strongly.
+
+    return dataExtent;
+}
+
+function setAxisModel(axisProxy, isRestore) {
+    var axisModel = axisProxy.getAxisModel();
+
+    var percentWindow = axisProxy._percentWindow;
+    var valueWindow = axisProxy._valueWindow;
+
+    if (!percentWindow) {
+        return;
+    }
+
+    // [0, 500]: arbitrary value, guess axis extent.
+    var precision = getPixelPrecision(valueWindow, [0, 500]);
+    precision = Math.min(precision, 20);
+    // isRestore or isFull
+    var useOrigin = isRestore || (percentWindow[0] === 0 && percentWindow[1] === 100);
+
+    axisModel.setRange(
+        useOrigin ? null : +valueWindow[0].toFixed(precision),
+        useOrigin ? null : +valueWindow[1].toFixed(precision)
+    );
+}
+
+function setMinMaxSpan(axisProxy) {
+    var minMaxSpan = axisProxy._minMaxSpan = {};
+    var dataZoomModel = axisProxy._dataZoomModel;
+
+    each$22(['min', 'max'], function (minMax) {
+        minMaxSpan[minMax + 'Span'] = dataZoomModel.get(minMax + 'Span');
+
+        // minValueSpan and maxValueSpan has higher priority than minSpan and maxSpan
+        var valueSpan = dataZoomModel.get(minMax + 'ValueSpan');
+
+        if (valueSpan != null) {
+            minMaxSpan[minMax + 'ValueSpan'] = valueSpan;
+            valueSpan = axisProxy.getAxisModel().axis.scale.parse(valueSpan);
+
+            if (valueSpan != null) {
+                var dataExtent = axisProxy._dataExtent;
+                minMaxSpan[minMax + 'Span'] = linearMap(
+                    dataExtent[0] + valueSpan, dataExtent, [0, 100], true
+                );
+            }
+        }
+    });
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var each$21 = each$1;
+var eachAxisDim = eachAxisDim$1;
+
+var DataZoomModel = extendComponentModel({
+
+    type: 'dataZoom',
+
+    dependencies: [
+        'xAxis', 'yAxis', 'zAxis', 'radiusAxis', 'angleAxis', 'singleAxis', 'series'
+    ],
+
+    /**
+     * @protected
+     */
+    defaultOption: {
+        zlevel: 0,
+        z: 4,                   // Higher than normal component (z: 2).
+        orient: null,           // Default auto by axisIndex. Possible value: 'horizontal', 'vertical'.
+        xAxisIndex: null,       // Default the first horizontal category axis.
+        yAxisIndex: null,       // Default the first vertical category axis.
+
+        filterMode: 'filter',   // Possible values: 'filter' or 'empty' or 'weakFilter'.
+                                // 'filter': data items which are out of window will be removed. This option is
+                                //          applicable when filtering outliers. For each data item, it will be
+                                //          filtered if one of the relevant dimensions is out of the window.
+                                // 'weakFilter': data items which are out of window will be removed. This option
+                                //          is applicable when filtering outliers. For each data item, it will be
+                                //          filtered only if all  of the relevant dimensions are out of the same
+                                //          side of the window.
+                                // 'empty': data items which are out of window will be set to empty.
+                                //          This option is applicable when user should not neglect
+                                //          that there are some data items out of window.
+                                // 'none': Do not filter.
+                                // Taking line chart as an example, line will be broken in
+                                // the filtered points when filterModel is set to 'empty', but
+                                // be connected when set to 'filter'.
+
+        throttle: null,         // Dispatch action by the fixed rate, avoid frequency.
+                                // default 100. Do not throttle when use null/undefined.
+                                // If animation === true and animationDurationUpdate > 0,
+                                // default value is 100, otherwise 20.
+        start: 0,               // Start percent. 0 ~ 100
+        end: 100,               // End percent. 0 ~ 100
+        startValue: null,       // Start value. If startValue specified, start is ignored.
+        endValue: null,         // End value. If endValue specified, end is ignored.
+        minSpan: null,          // 0 ~ 100
+        maxSpan: null,          // 0 ~ 100
+        minValueSpan: null,     // The range of dataZoom can not be smaller than that.
+        maxValueSpan: null,     // The range of dataZoom can not be larger than that.
+        rangeMode: null         // Array, can be 'value' or 'percent'.
+    },
+
+    /**
+     * @override
+     */
+    init: function (option, parentModel, ecModel) {
+
+        /**
+         * key like x_0, y_1
+         * @private
+         * @type {Object}
+         */
+        this._dataIntervalByAxis = {};
+
+        /**
+         * @private
+         */
+        this._dataInfo = {};
+
+        /**
+         * key like x_0, y_1
+         * @private
+         */
+        this._axisProxies = {};
+
+        /**
+         * @readOnly
+         */
+        this.textStyleModel;
+
+        /**
+         * @private
+         */
+        this._autoThrottle = true;
+
+        /**
+         * 'percent' or 'value'
+         * @private
+         */
+        this._rangePropMode = ['percent', 'percent'];
+
+        var rawOption = retrieveRaw(option);
+
+        this.mergeDefaultAndTheme(option, ecModel);
+
+        this.doInit(rawOption);
+    },
+
+    /**
+     * @override
+     */
+    mergeOption: function (newOption) {
+        var rawOption = retrieveRaw(newOption);
+
+        //FIX #2591
+        merge(this.option, newOption, true);
+
+        this.doInit(rawOption);
+    },
+
+    /**
+     * @protected
+     */
+    doInit: function (rawOption) {
+        var thisOption = this.option;
+
+        // Disable realtime view update if canvas is not supported.
+        if (!env$1.canvasSupported) {
+            thisOption.realtime = false;
+        }
+
+        this._setDefaultThrottle(rawOption);
+
+        updateRangeUse(this, rawOption);
+
+        each$21([['start', 'startValue'], ['end', 'endValue']], function (names, index) {
+            // start/end has higher priority over startValue/endValue if they
+            // both set, but we should make chart.setOption({endValue: 1000})
+            // effective, rather than chart.setOption({endValue: 1000, end: null}).
+            if (this._rangePropMode[index] === 'value') {
+                thisOption[names[0]] = null;
+            }
+            // Otherwise do nothing and use the merge result.
+        }, this);
+
+        this.textStyleModel = this.getModel('textStyle');
+
+        this._resetTarget();
+
+        this._giveAxisProxies();
+    },
+
+    /**
+     * @private
+     */
+    _giveAxisProxies: function () {
+        var axisProxies = this._axisProxies;
+
+        this.eachTargetAxis(function (dimNames, axisIndex, dataZoomModel, ecModel) {
+            var axisModel = this.dependentModels[dimNames.axis][axisIndex];
+
+            // If exists, share axisProxy with other dataZoomModels.
+            var axisProxy = axisModel.__dzAxisProxy || (
+                // Use the first dataZoomModel as the main model of axisProxy.
+                axisModel.__dzAxisProxy = new AxisProxy(
+                    dimNames.name, axisIndex, this, ecModel
+                )
+            );
+            // FIXME
+            // dispose __dzAxisProxy
+
+            axisProxies[dimNames.name + '_' + axisIndex] = axisProxy;
+        }, this);
+    },
+
+    /**
+     * @private
+     */
+    _resetTarget: function () {
+        var thisOption = this.option;
+
+        var autoMode = this._judgeAutoMode();
+
+        eachAxisDim(function (dimNames) {
+            var axisIndexName = dimNames.axisIndex;
+            thisOption[axisIndexName] = normalizeToArray(
+                thisOption[axisIndexName]
+            );
+        }, this);
+
+        if (autoMode === 'axisIndex') {
+            this._autoSetAxisIndex();
+        }
+        else if (autoMode === 'orient') {
+            this._autoSetOrient();
+        }
+    },
+
+    /**
+     * @private
+     */
+    _judgeAutoMode: function () {
+        // Auto set only works for setOption at the first time.
+        // The following is user's reponsibility. So using merged
+        // option is OK.
+        var thisOption = this.option;
+
+        var hasIndexSpecified = false;
+        eachAxisDim(function (dimNames) {
+            // When user set axisIndex as a empty array, we think that user specify axisIndex
+            // but do not want use auto mode. Because empty array may be encountered when
+            // some error occured.
+            if (thisOption[dimNames.axisIndex] != null) {
+                hasIndexSpecified = true;
+            }
+        }, this);
+
+        var orient = thisOption.orient;
+
+        if (orient == null && hasIndexSpecified) {
+            return 'orient';
+        }
+        else if (!hasIndexSpecified) {
+            if (orient == null) {
+                thisOption.orient = 'horizontal';
+            }
+            return 'axisIndex';
+        }
+    },
+
+    /**
+     * @private
+     */
+    _autoSetAxisIndex: function () {
+        var autoAxisIndex = true;
+        var orient = this.get('orient', true);
+        var thisOption = this.option;
+        var dependentModels = this.dependentModels;
+
+        if (autoAxisIndex) {
+            // Find axis that parallel to dataZoom as default.
+            var dimName = orient === 'vertical' ? 'y' : 'x';
+
+            if (dependentModels[dimName + 'Axis'].length) {
+                thisOption[dimName + 'AxisIndex'] = [0];
+                autoAxisIndex = false;
+            }
+            else {
+                each$21(dependentModels.singleAxis, function (singleAxisModel) {
+                    if (autoAxisIndex && singleAxisModel.get('orient', true) === orient) {
+                        thisOption.singleAxisIndex = [singleAxisModel.componentIndex];
+                        autoAxisIndex = false;
+                    }
+                });
+            }
+        }
+
+        if (autoAxisIndex) {
+            // Find the first category axis as default. (consider polar)
+            eachAxisDim(function (dimNames) {
+                if (!autoAxisIndex) {
+                    return;
+                }
+                var axisIndices = [];
+                var axisModels = this.dependentModels[dimNames.axis];
+                if (axisModels.length && !axisIndices.length) {
+                    for (var i = 0, len = axisModels.length; i < len; i++) {
+                        if (axisModels[i].get('type') === 'category') {
+                            axisIndices.push(i);
+                        }
+                    }
+                }
+                thisOption[dimNames.axisIndex] = axisIndices;
+                if (axisIndices.length) {
+                    autoAxisIndex = false;
+                }
+            }, this);
+        }
+
+        if (autoAxisIndex) {
+            // FIXME
+            // è¿™é‡Œæ˜¯å…¼å®¹ec2çš„å†™æ³•ï¼ˆæ²¡æŒ‡å®šxAxisIndexå’ŒyAxisIndexæ—¶æŠŠscatterå’ŒåŒæ•°å€¼è½´æŠ˜æŸ±çº³å…¥dataZoomæŽ§åˆ¶ï¼‰ï¼Œ
+            // ä½†æ˜¯å®žé™…æ˜¯å¦éœ€è¦Grid.js#getScaleByOptionæ¥åˆ¤æ–ï¼ˆè€ƒè™‘timeï¼Œlogç‰axis typeï¼‰ï¼Ÿ
+
+            // If both dataZoom.xAxisIndex and dataZoom.yAxisIndex is not specified,
+            // dataZoom component auto adopts series that reference to
+            // both xAxis and yAxis which type is 'value'.
+            this.ecModel.eachSeries(function (seriesModel) {
+                if (this._isSeriesHasAllAxesTypeOf(seriesModel, 'value')) {
+                    eachAxisDim(function (dimNames) {
+                        var axisIndices = thisOption[dimNames.axisIndex];
+
+                        var axisIndex = seriesModel.get(dimNames.axisIndex);
+                        var axisId = seriesModel.get(dimNames.axisId);
+
+                        var axisModel = seriesModel.ecModel.queryComponents({
+                            mainType: dimNames.axis,
+                            index: axisIndex,
+                            id: axisId
+                        })[0];
+
+                        if (__DEV__) {
+                            if (!axisModel) {
+                                throw new Error(
+                                    dimNames.axis + ' "' + retrieve(
+                                        axisIndex,
+                                        axisId,
+                                        0
+                                    ) + '" not found'
+                                );
+                            }
+                        }
+                        axisIndex = axisModel.componentIndex;
+
+                        if (indexOf(axisIndices, axisIndex) < 0) {
+                            axisIndices.push(axisIndex);
+                        }
+                    });
+                }
+            }, this);
+        }
+    },
+
+    /**
+     * @private
+     */
+    _autoSetOrient: function () {
+        var dim;
+
+        // Find the first axis
+        this.eachTargetAxis(function (dimNames) {
+            !dim && (dim = dimNames.name);
+        }, this);
+
+        this.option.orient = dim === 'y' ? 'vertical' : 'horizontal';
+    },
+
+    /**
+     * @private
+     */
+    _isSeriesHasAllAxesTypeOf: function (seriesModel, axisType) {
+        // FIXME
+        // éœ€è¦seriesçš„xAxisIndexå’ŒyAxisIndexéƒ½é¦–å…ˆè‡ªåŠ¨è®¾ç½®ä¸Šã€‚
+        // ä¾‹å¦‚series.type === scatteræ—¶ã€‚
+
+        var is = true;
+        eachAxisDim(function (dimNames) {
+            var seriesAxisIndex = seriesModel.get(dimNames.axisIndex);
+            var axisModel = this.dependentModels[dimNames.axis][seriesAxisIndex];
+
+            if (!axisModel || axisModel.get('type') !== axisType) {
+                is = false;
+            }
+        }, this);
+        return is;
+    },
+
+    /**
+     * @private
+     */
+    _setDefaultThrottle: function (rawOption) {
+        // When first time user set throttle, auto throttle ends.
+        if (rawOption.hasOwnProperty('throttle')) {
+            this._autoThrottle = false;
+        }
+        if (this._autoThrottle) {
+            var globalOption = this.ecModel.option;
+            this.option.throttle =
+                (globalOption.animation && globalOption.animationDurationUpdate > 0)
+                ? 100 : 20;
+        }
+    },
+
+    /**
+     * @public
+     */
+    getFirstTargetAxisModel: function () {
+        var firstAxisModel;
+        eachAxisDim(function (dimNames) {
+            if (firstAxisModel == null) {
+                var indices = this.get(dimNames.axisIndex);
+                if (indices.length) {
+                    firstAxisModel = this.dependentModels[dimNames.axis][indices[0]];
+                }
+            }
+        }, this);
+
+        return firstAxisModel;
+    },
+
+    /**
+     * @public
+     * @param {Function} callback param: axisModel, dimNames, axisIndex, dataZoomModel, ecModel
+     */
+    eachTargetAxis: function (callback, context) {
+        var ecModel = this.ecModel;
+        eachAxisDim(function (dimNames) {
+            each$21(
+                this.get(dimNames.axisIndex),
+                function (axisIndex) {
+                    callback.call(context, dimNames, axisIndex, this, ecModel);
+                },
+                this
+            );
+        }, this);
+    },
+
+    /**
+     * @param {string} dimName
+     * @param {number} axisIndex
+     * @return {module:echarts/component/dataZoom/AxisProxy} If not found, return null/undefined.
+     */
+    getAxisProxy: function (dimName, axisIndex) {
+        return this._axisProxies[dimName + '_' + axisIndex];
+    },
+
+    /**
+     * @param {string} dimName
+     * @param {number} axisIndex
+     * @return {module:echarts/model/Model} If not found, return null/undefined.
+     */
+    getAxisModel: function (dimName, axisIndex) {
+        var axisProxy = this.getAxisProxy(dimName, axisIndex);
+        return axisProxy && axisProxy.getAxisModel();
+    },
+
+    /**
+     * If not specified, set to undefined.
+     *
+     * @public
+     * @param {Object} opt
+     * @param {number} [opt.start]
+     * @param {number} [opt.end]
+     * @param {number} [opt.startValue]
+     * @param {number} [opt.endValue]
+     * @param {boolean} [ignoreUpdateRangeUsg=false]
+     */
+    setRawRange: function (opt, ignoreUpdateRangeUsg) {
+        var option = this.option;
+        each$21([['start', 'startValue'], ['end', 'endValue']], function (names) {
+            // If only one of 'start' and 'startValue' is not null/undefined, the other
+            // should be cleared, which enable clear the option.
+            // If both of them are not set, keep option with the original value, which
+            // enable use only set start but not set end when calling `dispatchAction`.
+            // The same as 'end' and 'endValue'.
+            if (opt[names[0]] != null || opt[names[1]] != null) {
+                option[names[0]] = opt[names[0]];
+                option[names[1]] = opt[names[1]];
+            }
+        }, this);
+
+        !ignoreUpdateRangeUsg && updateRangeUse(this, opt);
+    },
+
+    /**
+     * @public
+     * @return {Array.<number>} [startPercent, endPercent]
+     */
+    getPercentRange: function () {
+        var axisProxy = this.findRepresentativeAxisProxy();
+        if (axisProxy) {
+            return axisProxy.getDataPercentWindow();
+        }
+    },
+
+    /**
+     * @public
+     * For example, chart.getModel().getComponent('dataZoom').getValueRange('y', 0);
+     *
+     * @param {string} [axisDimName]
+     * @param {number} [axisIndex]
+     * @return {Array.<number>} [startValue, endValue] value can only be '-' or finite number.
+     */
+    getValueRange: function (axisDimName, axisIndex) {
+        if (axisDimName == null && axisIndex == null) {
+            var axisProxy = this.findRepresentativeAxisProxy();
+            if (axisProxy) {
+                return axisProxy.getDataValueWindow();
+            }
+        }
+        else {
+            return this.getAxisProxy(axisDimName, axisIndex).getDataValueWindow();
+        }
+    },
+
+    /**
+     * @public
+     * @param {module:echarts/model/Model} [axisModel] If axisModel given, find axisProxy
+     *      corresponding to the axisModel
+     * @return {module:echarts/component/dataZoom/AxisProxy}
+     */
+    findRepresentativeAxisProxy: function (axisModel) {
+        if (axisModel) {
+            return axisModel.__dzAxisProxy;
+        }
+
+        // Find the first hosted axisProxy
+        var axisProxies = this._axisProxies;
+        for (var key in axisProxies) {
+            if (axisProxies.hasOwnProperty(key) && axisProxies[key].hostedBy(this)) {
+                return axisProxies[key];
+            }
+        }
+
+        // If no hosted axis find not hosted axisProxy.
+        // Consider this case: dataZoomModel1 and dataZoomModel2 control the same axis,
+        // and the option.start or option.end settings are different. The percentRange
+        // should follow axisProxy.
+        // (We encounter this problem in toolbox data zoom.)
+        for (var key in axisProxies) {
+            if (axisProxies.hasOwnProperty(key) && !axisProxies[key].hostedBy(this)) {
+                return axisProxies[key];
+            }
+        }
+    },
+
+    /**
+     * @return {Array.<string>}
+     */
+    getRangePropMode: function () {
+        return this._rangePropMode.slice();
+    }
+
+});
+
+function retrieveRaw(option) {
+    var ret = {};
+    each$21(
+        ['start', 'end', 'startValue', 'endValue', 'throttle'],
+        function (name) {
+            option.hasOwnProperty(name) && (ret[name] = option[name]);
+        }
+    );
+    return ret;
+}
+
+function updateRangeUse(dataZoomModel, rawOption) {
+    var rangePropMode = dataZoomModel._rangePropMode;
+    var rangeModeInOption = dataZoomModel.get('rangeMode');
+
+    each$21([['start', 'startValue'], ['end', 'endValue']], function (names, index) {
+        var percentSpecified = rawOption[names[0]] != null;
+        var valueSpecified = rawOption[names[1]] != null;
+        if (percentSpecified && !valueSpecified) {
+            rangePropMode[index] = 'percent';
+        }
+        else if (!percentSpecified && valueSpecified) {
+            rangePropMode[index] = 'value';
+        }
+        else if (rangeModeInOption) {
+            rangePropMode[index] = rangeModeInOption[index];
+        }
+        else if (percentSpecified) { // percentSpecified && valueSpecified
+            rangePropMode[index] = 'percent';
+        }
+        // else remain its original setting.
+    });
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var DataZoomView = Component.extend({
+
+    type: 'dataZoom',
+
+    render: function (dataZoomModel, ecModel, api, payload) {
+        this.dataZoomModel = dataZoomModel;
+        this.ecModel = ecModel;
+        this.api = api;
+    },
+
+    /**
+     * Find the first target coordinate system.
+     *
+     * @protected
+     * @return {Object} {
+     *                   grid: [
+     *                       {model: coord0, axisModels: [axis1, axis3], coordIndex: 1},
+     *                       {model: coord1, axisModels: [axis0, axis2], coordIndex: 0},
+     *                       ...
+     *                   ],  // cartesians must not be null/undefined.
+     *                   polar: [
+     *                       {model: coord0, axisModels: [axis4], coordIndex: 0},
+     *                       ...
+     *                   ],  // polars must not be null/undefined.
+     *                   singleAxis: [
+     *                       {model: coord0, axisModels: [], coordIndex: 0}
+     *                   ]
+     */
+    getTargetCoordInfo: function () {
+        var dataZoomModel = this.dataZoomModel;
+        var ecModel = this.ecModel;
+        var coordSysLists = {};
+
+        dataZoomModel.eachTargetAxis(function (dimNames, axisIndex) {
+            var axisModel = ecModel.getComponent(dimNames.axis, axisIndex);
+            if (axisModel) {
+                var coordModel = axisModel.getCoordSysModel();
+                coordModel && save(
+                    coordModel,
+                    axisModel,
+                    coordSysLists[coordModel.mainType] || (coordSysLists[coordModel.mainType] = []),
+                    coordModel.componentIndex
+                );
+            }
+        }, this);
+
+        function save(coordModel, axisModel, store, coordIndex) {
+            var item;
+            for (var i = 0; i < store.length; i++) {
+                if (store[i].model === coordModel) {
+                    item = store[i];
+                    break;
+                }
+            }
+            if (!item) {
+                store.push(item = {
+                    model: coordModel, axisModels: [], coordIndex: coordIndex
+                });
+            }
+            item.axisModels.push(axisModel);
+        }
+
+        return coordSysLists;
+    }
+
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var SliderZoomModel = DataZoomModel.extend({
+
+    type: 'dataZoom.slider',
+
+    layoutMode: 'box',
+
+    /**
+     * @protected
+     */
+    defaultOption: {
+        show: true,
+
+        // ph => placeholder. Using placehoder here because
+        // deault value can only be drived in view stage.
+        right: 'ph',  // Default align to grid rect.
+        top: 'ph',    // Default align to grid rect.
+        width: 'ph',  // Default align to grid rect.
+        height: 'ph', // Default align to grid rect.
+        left: null,   // Default align to grid rect.
+        bottom: null, // Default align to grid rect.
+
+        backgroundColor: 'rgba(47,69,84,0)',    // Background of slider zoom component.
+        // dataBackgroundColor: '#ddd',         // Background coor of data shadow and border of box,
+                                                // highest priority, remain for compatibility of
+                                                // previous version, but not recommended any more.
+        dataBackground: {
+            lineStyle: {
+                color: '#2f4554',
+                width: 0.5,
+                opacity: 0.3
+            },
+            areaStyle: {
+                color: 'rgba(47,69,84,0.3)',
+                opacity: 0.3
+            }
+        },
+        borderColor: '#ddd',                    // border color of the box. For compatibility,
+                                                // if dataBackgroundColor is set, borderColor
+                                                // is ignored.
+
+        fillerColor: 'rgba(167,183,204,0.4)',     // Color of selected area.
+        // handleColor: 'rgba(89,170,216,0.95)',     // Color of handle.
+        // handleIcon: 'path://M4.9,17.8c0-1.4,4.5-10.5,5.5-12.4c0-0.1,0.6-1.1,0.9-1.1c0.4,0,0.9,1,0.9,1.1c1.1,2.2,5.4,11,5.4,12.4v17.8c0,1.5-0.6,2.1-1.3,2.1H6.1c-0.7,0-1.3-0.6-1.3-2.1V17.8z',
+        handleIcon: 'M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z',
+        // Percent of the slider height
+        handleSize: '100%',
+
+        handleStyle: {
+            color: '#a7b7cc'
+        },
+
+        labelPrecision: null,
+        labelFormatter: null,
+        showDetail: true,
+        showDataShadow: 'auto',                 // Default auto decision.
+        realtime: true,
+        zoomLock: false,                        // Whether disable zoom.
+        textStyle: {
+            color: '#333'
+        }
+    }
+
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var Rect$2 = Rect;
+var linearMap$1 = linearMap;
+var asc$2 = asc;
+var bind$4 = bind;
+var each$23 = each$1;
+
+// Constants
+var DEFAULT_LOCATION_EDGE_GAP = 7;
+var DEFAULT_FRAME_BORDER_WIDTH = 1;
+var DEFAULT_FILLER_SIZE = 30;
+var HORIZONTAL = 'horizontal';
+var VERTICAL = 'vertical';
+var LABEL_GAP = 5;
+var SHOW_DATA_SHADOW_SERIES_TYPE = ['line', 'bar', 'candlestick', 'scatter'];
+
+var SliderZoomView = DataZoomView.extend({
+
+    type: 'dataZoom.slider',
+
+    init: function (ecModel, api) {
+
+        /**
+         * @private
+         * @type {Object}
+         */
+        this._displayables = {};
+
+        /**
+         * @private
+         * @type {string}
+         */
+        this._orient;
+
+        /**
+         * [0, 100]
+         * @private
+         */
+        this._range;
+
+        /**
+         * [coord of the first handle, coord of the second handle]
+         * @private
+         */
+        this._handleEnds;
+
+        /**
+         * [length, thick]
+         * @private
+         * @type {Array.<number>}
+         */
+        this._size;
+
+        /**
+         * @private
+         * @type {number}
+         */
+        this._handleWidth;
+
+        /**
+         * @private
+         * @type {number}
+         */
+        this._handleHeight;
+
+        /**
+         * @private
+         */
+        this._location;
+
+        /**
+         * @private
+         */
+        this._dragging;
+
+        /**
+         * @private
+         */
+        this._dataShadowInfo;
+
+        this.api = api;
+    },
+
+    /**
+     * @override
+     */
+    render: function (dataZoomModel, ecModel, api, payload) {
+        SliderZoomView.superApply(this, 'render', arguments);
+
+        createOrUpdate(
+            this,
+            '_dispatchZoomAction',
+            this.dataZoomModel.get('throttle'),
+            'fixRate'
+        );
+
+        this._orient = dataZoomModel.get('orient');
+
+        if (this.dataZoomModel.get('show') === false) {
+            this.group.removeAll();
+            return;
+        }
+
+        // Notice: this._resetInterval() should not be executed when payload.type
+        // is 'dataZoom', origin this._range should be maintained, otherwise 'pan'
+        // or 'zoom' info will be missed because of 'throttle' of this.dispatchAction,
+        if (!payload || payload.type !== 'dataZoom' || payload.from !== this.uid) {
+            this._buildView();
+        }
+
+        this._updateView();
+    },
+
+    /**
+     * @override
+     */
+    remove: function () {
+        SliderZoomView.superApply(this, 'remove', arguments);
+        clear(this, '_dispatchZoomAction');
+    },
+
+    /**
+     * @override
+     */
+    dispose: function () {
+        SliderZoomView.superApply(this, 'dispose', arguments);
+        clear(this, '_dispatchZoomAction');
+    },
+
+    _buildView: function () {
+        var thisGroup = this.group;
+
+        thisGroup.removeAll();
+
+        this._resetLocation();
+        this._resetInterval();
+
+        var barGroup = this._displayables.barGroup = new Group();
+
+        this._renderBackground();
+
+        this._renderHandle();
+
+        this._renderDataShadow();
+
+        thisGroup.add(barGroup);
+
+        this._positionGroup();
+    },
+
+    /**
+     * @private
+     */
+    _resetLocation: function () {
+        var dataZoomModel = this.dataZoomModel;
+        var api = this.api;
+
+        // If some of x/y/width/height are not specified,
+        // auto-adapt according to target grid.
+        var coordRect = this._findCoordRect();
+        var ecSize = {width: api.getWidth(), height: api.getHeight()};
+        // Default align by coordinate system rect.
+        var positionInfo = this._orient === HORIZONTAL
+            ? {
+                // Why using 'right', because right should be used in vertical,
+                // and it is better to be consistent for dealing with position param merge.
+                right: ecSize.width - coordRect.x - coordRect.width,
+                top: (ecSize.height - DEFAULT_FILLER_SIZE - DEFAULT_LOCATION_EDGE_GAP),
+                width: coordRect.width,
+                height: DEFAULT_FILLER_SIZE
+            }
+            : { // vertical
+                right: DEFAULT_LOCATION_EDGE_GAP,
+                top: coordRect.y,
+                width: DEFAULT_FILLER_SIZE,
+                height: coordRect.height
+            };
+
+        // Do not write back to option and replace value 'ph', because
+        // the 'ph' value should be recalculated when resize.
+        var layoutParams = getLayoutParams(dataZoomModel.option);
+
+        // Replace the placeholder value.
+        each$1(['right', 'top', 'width', 'height'], function (name) {
+            if (layoutParams[name] === 'ph') {
+                layoutParams[name] = positionInfo[name];
+            }
+        });
+
+        var layoutRect = getLayoutRect(
+            layoutParams,
+            ecSize,
+            dataZoomModel.padding
+        );
+
+        this._location = {x: layoutRect.x, y: layoutRect.y};
+        this._size = [layoutRect.width, layoutRect.height];
+        this._orient === VERTICAL && this._size.reverse();
+    },
+
+    /**
+     * @private
+     */
+    _positionGroup: function () {
+        var thisGroup = this.group;
+        var location = this._location;
+        var orient = this._orient;
+
+        // Just use the first axis to determine mapping.
+        var targetAxisModel = this.dataZoomModel.getFirstTargetAxisModel();
+        var inverse = targetAxisModel && targetAxisModel.get('inverse');
+
+        var barGroup = this._displayables.barGroup;
+        var otherAxisInverse = (this._dataShadowInfo || {}).otherAxisInverse;
+
+        // Transform barGroup.
+        barGroup.attr(
+            (orient === HORIZONTAL && !inverse)
+            ? {scale: otherAxisInverse ? [1, 1] : [1, -1]}
+            : (orient === HORIZONTAL && inverse)
+            ? {scale: otherAxisInverse ? [-1, 1] : [-1, -1]}
+            : (orient === VERTICAL && !inverse)
+            ? {scale: otherAxisInverse ? [1, -1] : [1, 1], rotation: Math.PI / 2}
+            // Dont use Math.PI, considering shadow direction.
+            : {scale: otherAxisInverse ? [-1, -1] : [-1, 1], rotation: Math.PI / 2}
+        );
+
+        // Position barGroup
+        var rect = thisGroup.getBoundingRect([barGroup]);
+        thisGroup.attr('position', [location.x - rect.x, location.y - rect.y]);
+    },
+
+    /**
+     * @private
+     */
+    _getViewExtent: function () {
+        return [0, this._size[0]];
+    },
+
+    _renderBackground: function () {
+        var dataZoomModel = this.dataZoomModel;
+        var size = this._size;
+        var barGroup = this._displayables.barGroup;
+
+        barGroup.add(new Rect$2({
+            silent: true,
+            shape: {
+                x: 0, y: 0, width: size[0], height: size[1]
+            },
+            style: {
+                fill: dataZoomModel.get('backgroundColor')
+            },
+            z2: -40
+        }));
+
+        // Click panel, over shadow, below handles.
+        barGroup.add(new Rect$2({
+            shape: {
+                x: 0, y: 0, width: size[0], height: size[1]
+            },
+            style: {
+                fill: 'transparent'
+            },
+            z2: 0,
+            onclick: bind(this._onClickPanelClick, this)
+        }));
+    },
+
+    _renderDataShadow: function () {
+        var info = this._dataShadowInfo = this._prepareDataShadowInfo();
+
+        if (!info) {
+            return;
+        }
+
+        var size = this._size;
+        var seriesModel = info.series;
+        var data = seriesModel.getRawData();
+
+        var otherDim = seriesModel.getShadowDim
+            ? seriesModel.getShadowDim() // @see candlestick
+            : info.otherDim;
+
+        if (otherDim == null) {
+            return;
+        }
+
+        var otherDataExtent = data.getDataExtent(otherDim);
+        // Nice extent.
+        var otherOffset = (otherDataExtent[1] - otherDataExtent[0]) * 0.3;
+        otherDataExtent = [
+            otherDataExtent[0] - otherOffset,
+            otherDataExtent[1] + otherOffset
+        ];
+        var otherShadowExtent = [0, size[1]];
+
+        var thisShadowExtent = [0, size[0]];
+
+        var areaPoints = [[size[0], 0], [0, 0]];
+        var linePoints = [];
+        var step = thisShadowExtent[1] / (data.count() - 1);
+        var thisCoord = 0;
+
+        // Optimize for large data shadow
+        var stride = Math.round(data.count() / size[0]);
+        var lastIsEmpty;
+        data.each([otherDim], function (value, index) {
+            if (stride > 0 && (index % stride)) {
+                thisCoord += step;
+                return;
+            }
+
+            // FIXME
+            // Should consider axis.min/axis.max when drawing dataShadow.
+
+            // FIXME
+            // åº”è¯¥ä½¿ç”¨ç»Ÿä¸€çš„ç©ºåˆ¤æ–ï¼Ÿè¿˜æ˜¯åœ¨listé‡Œè¿›è¡Œç©ºåˆ¤æ–ï¼Ÿ
+            var isEmpty = value == null || isNaN(value) || value === '';
+            // See #4235.
+            var otherCoord = isEmpty
+                ? 0 : linearMap$1(value, otherDataExtent, otherShadowExtent, true);
+
+            // Attempt to draw data shadow precisely when there are empty value.
+            if (isEmpty && !lastIsEmpty && index) {
+                areaPoints.push([areaPoints[areaPoints.length - 1][0], 0]);
+                linePoints.push([linePoints[linePoints.length - 1][0], 0]);
+            }
+            else if (!isEmpty && lastIsEmpty) {
+                areaPoints.push([thisCoord, 0]);
+                linePoints.push([thisCoord, 0]);
+            }
+
+            areaPoints.push([thisCoord, otherCoord]);
+            linePoints.push([thisCoord, otherCoord]);
+
+            thisCoord += step;
+            lastIsEmpty = isEmpty;
+        });
+
+        var dataZoomModel = this.dataZoomModel;
+        // var dataBackgroundModel = dataZoomModel.getModel('dataBackground');
+        this._displayables.barGroup.add(new Polygon({
+            shape: {points: areaPoints},
+            style: defaults(
+                {fill: dataZoomModel.get('dataBackgroundColor')},
+                dataZoomModel.getModel('dataBackground.areaStyle').getAreaStyle()
+            ),
+            silent: true,
+            z2: -20
+        }));
+        this._displayables.barGroup.add(new Polyline({
+            shape: {points: linePoints},
+            style: dataZoomModel.getModel('dataBackground.lineStyle').getLineStyle(),
+            silent: true,
+            z2: -19
+        }));
+    },
+
+    _prepareDataShadowInfo: function () {
+        var dataZoomModel = this.dataZoomModel;
+        var showDataShadow = dataZoomModel.get('showDataShadow');
+
+        if (showDataShadow === false) {
+            return;
+        }
+
+        // Find a representative series.
+        var result;
+        var ecModel = this.ecModel;
+
+        dataZoomModel.eachTargetAxis(function (dimNames, axisIndex) {
+            var seriesModels = dataZoomModel
+                .getAxisProxy(dimNames.name, axisIndex)
+                .getTargetSeriesModels();
+
+            each$1(seriesModels, function (seriesModel) {
+                if (result) {
+                    return;
+                }
+
+                if (showDataShadow !== true && indexOf(
+                        SHOW_DATA_SHADOW_SERIES_TYPE, seriesModel.get('type')
+                    ) < 0
+                ) {
+                    return;
+                }
+
+                var thisAxis = ecModel.getComponent(dimNames.axis, axisIndex).axis;
+                var otherDim = getOtherDim(dimNames.name);
+                var otherAxisInverse;
+                var coordSys = seriesModel.coordinateSystem;
+
+                if (otherDim != null && coordSys.getOtherAxis) {
+                    otherAxisInverse = coordSys.getOtherAxis(thisAxis).inverse;
+                }
+
+                otherDim = seriesModel.getData().mapDimension(otherDim);
+
+                result = {
+                    thisAxis: thisAxis,
+                    series: seriesModel,
+                    thisDim: dimNames.name,
+                    otherDim: otherDim,
+                    otherAxisInverse: otherAxisInverse
+                };
+
+            }, this);
+
+        }, this);
+
+        return result;
+    },
+
+    _renderHandle: function () {
+        var displaybles = this._displayables;
+        var handles = displaybles.handles = [];
+        var handleLabels = displaybles.handleLabels = [];
+        var barGroup = this._displayables.barGroup;
+        var size = this._size;
+        var dataZoomModel = this.dataZoomModel;
+
+        barGroup.add(displaybles.filler = new Rect$2({
+            draggable: true,
+            cursor: getCursor(this._orient),
+            drift: bind$4(this._onDragMove, this, 'all'),
+            onmousemove: function (e) {
+                // Fot mobile devicem, prevent screen slider on the button.
+                stop(e.event);
+            },
+            ondragstart: bind$4(this._showDataInfo, this, true),
+            ondragend: bind$4(this._onDragEnd, this),
+            onmouseover: bind$4(this._showDataInfo, this, true),
+            onmouseout: bind$4(this._showDataInfo, this, false),
+            style: {
+                fill: dataZoomModel.get('fillerColor'),
+                textPosition : 'inside'
+            }
+        }));
+
+        // Frame border.
+        barGroup.add(new Rect$2(subPixelOptimizeRect({
+            silent: true,
+            shape: {
+                x: 0,
+                y: 0,
+                width: size[0],
+                height: size[1]
+            },
+            style: {
+                stroke: dataZoomModel.get('dataBackgroundColor')
+                    || dataZoomModel.get('borderColor'),
+                lineWidth: DEFAULT_FRAME_BORDER_WIDTH,
+                fill: 'rgba(0,0,0,0)'
+            }
+        })));
+
+        each$23([0, 1], function (handleIndex) {
+            var path = createIcon(
+                dataZoomModel.get('handleIcon'),
+                {
+                    cursor: getCursor(this._orient),
+                    draggable: true,
+                    drift: bind$4(this._onDragMove, this, handleIndex),
+                    onmousemove: function (e) {
+                        // Fot mobile devicem, prevent screen slider on the button.
+                        stop(e.event);
+                    },
+                    ondragend: bind$4(this._onDragEnd, this),
+                    onmouseover: bind$4(this._showDataInfo, this, true),
+                    onmouseout: bind$4(this._showDataInfo, this, false)
+                },
+                {x: -1, y: 0, width: 2, height: 2}
+            );
+
+            var bRect = path.getBoundingRect();
+            this._handleHeight = parsePercent$1(dataZoomModel.get('handleSize'), this._size[1]);
+            this._handleWidth = bRect.width / bRect.height * this._handleHeight;
+
+            path.setStyle(dataZoomModel.getModel('handleStyle').getItemStyle());
+            var handleColor = dataZoomModel.get('handleColor');
+            // Compatitable with previous version
+            if (handleColor != null) {
+                path.style.fill = handleColor;
+            }
+
+            barGroup.add(handles[handleIndex] = path);
+
+            var textStyleModel = dataZoomModel.textStyleModel;
+
+            this.group.add(
+                handleLabels[handleIndex] = new Text({
+                silent: true,
+                invisible: true,
+                style: {
+                    x: 0, y: 0, text: '',
+                    textVerticalAlign: 'middle',
+                    textAlign: 'center',
+                    textFill: textStyleModel.getTextColor(),
+                    textFont: textStyleModel.getFont()
+                },
+                z2: 10
+            }));
+
+        }, this);
+    },
+
+    /**
+     * @private
+     */
+    _resetInterval: function () {
+        var range = this._range = this.dataZoomModel.getPercentRange();
+        var viewExtent = this._getViewExtent();
+
+        this._handleEnds = [
+            linearMap$1(range[0], [0, 100], viewExtent, true),
+            linearMap$1(range[1], [0, 100], viewExtent, true)
+        ];
+    },
+
+    /**
+     * @private
+     * @param {(number|string)} handleIndex 0 or 1 or 'all'
+     * @param {number} delta
+     * @return {boolean} changed
+     */
+    _updateInterval: function (handleIndex, delta) {
+        var dataZoomModel = this.dataZoomModel;
+        var handleEnds = this._handleEnds;
+        var viewExtend = this._getViewExtent();
+        var minMaxSpan = dataZoomModel.findRepresentativeAxisProxy().getMinMaxSpan();
+        var percentExtent = [0, 100];
+
+        sliderMove(
+            delta,
+            handleEnds,
+            viewExtend,
+            dataZoomModel.get('zoomLock') ? 'all' : handleIndex,
+            minMaxSpan.minSpan != null
+                ? linearMap$1(minMaxSpan.minSpan, percentExtent, viewExtend, true) : null,
+            minMaxSpan.maxSpan != null
+                ? linearMap$1(minMaxSpan.maxSpan, percentExtent, viewExtend, true) : null
+        );
+
+        var lastRange = this._range;
+        var range = this._range = asc$2([
+            linearMap$1(handleEnds[0], viewExtend, percentExtent, true),
+            linearMap$1(handleEnds[1], viewExtend, percentExtent, true)
+        ]);
+
+        return !lastRange || lastRange[0] !== range[0] || lastRange[1] !== range[1];
+    },
+
+    /**
+     * @private
+     */
+    _updateView: function (nonRealtime) {
+        var displaybles = this._displayables;
+        var handleEnds = this._handleEnds;
+        var handleInterval = asc$2(handleEnds.slice());
+        var size = this._size;
+
+        each$23([0, 1], function (handleIndex) {
+            // Handles
+            var handle = displaybles.handles[handleIndex];
+            var handleHeight = this._handleHeight;
+            handle.attr({
+                scale: [handleHeight / 2, handleHeight / 2],
+                position: [handleEnds[handleIndex], size[1] / 2 - handleHeight / 2]
+            });
+        }, this);
+
+        // Filler
+        displaybles.filler.setShape({
+            x: handleInterval[0],
+            y: 0,
+            width: handleInterval[1] - handleInterval[0],
+            height: size[1]
+        });
+
+        this._updateDataInfo(nonRealtime);
+    },
+
+    /**
+     * @private
+     */
+    _updateDataInfo: function (nonRealtime) {
+        var dataZoomModel = this.dataZoomModel;
+        var displaybles = this._displayables;
+        var handleLabels = displaybles.handleLabels;
+        var orient = this._orient;
+        var labelTexts = ['', ''];
+
+        // FIXME
+        // dateåž‹ï¼Œæ”¯æŒformatterï¼Œautoformatterï¼ˆec2 date.getAutoFormatterï¼‰
+        if (dataZoomModel.get('showDetail')) {
+            var axisProxy = dataZoomModel.findRepresentativeAxisProxy();
+
+            if (axisProxy) {
+                var axis = axisProxy.getAxisModel().axis;
+                var range = this._range;
+
+                var dataInterval = nonRealtime
+                    // See #4434, data and axis are not processed and reset yet in non-realtime mode.
+                    ? axisProxy.calculateDataWindow({
+                        start: range[0], end: range[1]
+                    }).valueWindow
+                    : axisProxy.getDataValueWindow();
+
+                labelTexts = [
+                    this._formatLabel(dataInterval[0], axis),
+                    this._formatLabel(dataInterval[1], axis)
+                ];
+            }
+        }
+
+        var orderedHandleEnds = asc$2(this._handleEnds.slice());
+
+        setLabel.call(this, 0);
+        setLabel.call(this, 1);
+
+        function setLabel(handleIndex) {
+            // Label
+            // Text should not transform by barGroup.
+            // Ignore handlers transform
+            var barTransform = getTransform(
+                displaybles.handles[handleIndex].parent, this.group
+            );
+            var direction = transformDirection(
+                handleIndex === 0 ? 'right' : 'left', barTransform
+            );
+            var offset = this._handleWidth / 2 + LABEL_GAP;
+            var textPoint = applyTransform$1(
+                [
+                    orderedHandleEnds[handleIndex] + (handleIndex === 0 ? -offset : offset),
+                    this._size[1] / 2
+                ],
+                barTransform
+            );
+            handleLabels[handleIndex].setStyle({
+                x: textPoint[0],
+                y: textPoint[1],
+                textVerticalAlign: orient === HORIZONTAL ? 'middle' : direction,
+                textAlign: orient === HORIZONTAL ? direction : 'center',
+                text: labelTexts[handleIndex]
+            });
+        }
+    },
+
+    /**
+     * @private
+     */
+    _formatLabel: function (value, axis) {
+        var dataZoomModel = this.dataZoomModel;
+        var labelFormatter = dataZoomModel.get('labelFormatter');
+
+        var labelPrecision = dataZoomModel.get('labelPrecision');
+        if (labelPrecision == null || labelPrecision === 'auto') {
+            labelPrecision = axis.getPixelPrecision();
+        }
+
+        var valueStr = (value == null || isNaN(value))
+            ? ''
+            // FIXME Glue code
+            : (axis.type === 'category' || axis.type === 'time')
+                ? axis.scale.getLabel(Math.round(value))
+                // param of toFixed should less then 20.
+                : value.toFixed(Math.min(labelPrecision, 20));
+
+        return isFunction$1(labelFormatter)
+            ? labelFormatter(value, valueStr)
+            : isString(labelFormatter)
+            ? labelFormatter.replace('{value}', valueStr)
+            : valueStr;
+    },
+
+    /**
+     * @private
+     * @param {boolean} showOrHide true: show, false: hide
+     */
+    _showDataInfo: function (showOrHide) {
+        // Always show when drgging.
+        showOrHide = this._dragging || showOrHide;
+
+        var handleLabels = this._displayables.handleLabels;
+        handleLabels[0].attr('invisible', !showOrHide);
+        handleLabels[1].attr('invisible', !showOrHide);
+    },
+
+    _onDragMove: function (handleIndex, dx, dy) {
+        this._dragging = true;
+
+        // Transform dx, dy to bar coordination.
+        var barTransform = this._displayables.barGroup.getLocalTransform();
+        var vertex = applyTransform$1([dx, dy], barTransform, true);
+
+        var changed = this._updateInterval(handleIndex, vertex[0]);
+
+        var realtime = this.dataZoomModel.get('realtime');
+
+        this._updateView(!realtime);
+
+        // Avoid dispatch dataZoom repeatly but range not changed,
+        // which cause bad visual effect when progressive enabled.
+        changed && realtime && this._dispatchZoomAction();
+    },
+
+    _onDragEnd: function () {
+        this._dragging = false;
+        this._showDataInfo(false);
+
+        // While in realtime mode and stream mode, dispatch action when
+        // drag end will cause the whole view rerender, which is unnecessary.
+        var realtime = this.dataZoomModel.get('realtime');
+        !realtime && this._dispatchZoomAction();
+    },
+
+    _onClickPanelClick: function (e) {
+        var size = this._size;
+        var localPoint = this._displayables.barGroup.transformCoordToLocal(e.offsetX, e.offsetY);
+
+        if (localPoint[0] < 0 || localPoint[0] > size[0]
+            || localPoint[1] < 0 || localPoint[1] > size[1]
+        ) {
+            return;
+        }
+
+        var handleEnds = this._handleEnds;
+        var center = (handleEnds[0] + handleEnds[1]) / 2;
+
+        var changed = this._updateInterval('all', localPoint[0] - center);
+        this._updateView();
+        changed && this._dispatchZoomAction();
+    },
+
+    /**
+     * This action will be throttled.
+     * @private
+     */
+    _dispatchZoomAction: function () {
+        var range = this._range;
+
+        this.api.dispatchAction({
+            type: 'dataZoom',
+            from: this.uid,
+            dataZoomId: this.dataZoomModel.id,
+            start: range[0],
+            end: range[1]
+        });
+    },
+
+    /**
+     * @private
+     */
+    _findCoordRect: function () {
+        // Find the grid coresponding to the first axis referred by dataZoom.
+        var rect;
+        each$23(this.getTargetCoordInfo(), function (coordInfoList) {
+            if (!rect && coordInfoList.length) {
+                var coordSys = coordInfoList[0].model.coordinateSystem;
+                rect = coordSys.getRect && coordSys.getRect();
+            }
+        });
+        if (!rect) {
+            var width = this.api.getWidth();
+            var height = this.api.getHeight();
+            rect = {
+                x: width * 0.2,
+                y: height * 0.2,
+                width: width * 0.6,
+                height: height * 0.6
+            };
+        }
+
+        return rect;
+    }
+
+});
+
+function getOtherDim(thisDim) {
+    // FIXME
+    // è¿™ä¸ªé€»è¾‘å’ŒgetOtherAxisé‡Œä¸€è‡´ï¼Œä½†æ˜¯å†™åœ¨è¿™é‡Œæ˜¯å¦ä¸å¥½
+    var map$$1 = {x: 'y', y: 'x', radius: 'angle', angle: 'radius'};
+    return map$$1[thisDim];
+}
+
+function getCursor(orient) {
+    return orient === 'vertical' ? 'ns-resize' : 'ew-resize';
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+DataZoomModel.extend({
+
+    type: 'dataZoom.inside',
+
+    /**
+     * @protected
+     */
+    defaultOption: {
+        disabled: false,   // Whether disable this inside zoom.
+        zoomLock: false,   // Whether disable zoom but only pan.
+        zoomOnMouseWheel: true, // Can be: true / false / 'shift' / 'ctrl' / 'alt'.
+        moveOnMouseMove: true,   // Can be: true / false / 'shift' / 'ctrl' / 'alt'.
+        preventDefaultMouseMove: true
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// Only create one roam controller for each coordinate system.
+// one roam controller might be refered by two inside data zoom
+// components (for example, one for x and one for y). When user
+// pan or zoom, only dispatch one action for those data zoom
+// components.
+
+var curry$6 = curry;
+
+var ATTR$1 = '\0_ec_dataZoom_roams';
+
+
+/**
+ * @public
+ * @param {module:echarts/ExtensionAPI} api
+ * @param {Object} dataZoomInfo
+ * @param {string} dataZoomInfo.coordId
+ * @param {Function} dataZoomInfo.containsPoint
+ * @param {Array.<string>} dataZoomInfo.allCoordIds
+ * @param {string} dataZoomInfo.dataZoomId
+ * @param {number} dataZoomInfo.throttleRate
+ * @param {Function} dataZoomInfo.panGetRange
+ * @param {Function} dataZoomInfo.zoomGetRange
+ * @param {boolean} [dataZoomInfo.zoomLock]
+ * @param {boolean} [dataZoomInfo.disabled]
+ */
+function register$2(api, dataZoomInfo) {
+    var store = giveStore(api);
+    var theDataZoomId = dataZoomInfo.dataZoomId;
+    var theCoordId = dataZoomInfo.coordId;
+
+    // Do clean when a dataZoom changes its target coordnate system.
+    // Avoid memory leak, dispose all not-used-registered.
+    each$1(store, function (record, coordId) {
+        var dataZoomInfos = record.dataZoomInfos;
+        if (dataZoomInfos[theDataZoomId]
+            && indexOf(dataZoomInfo.allCoordIds, theCoordId) < 0
+        ) {
+            delete dataZoomInfos[theDataZoomId];
+            record.count--;
+        }
+    });
+
+    cleanStore(store);
+
+    var record = store[theCoordId];
+    // Create if needed.
+    if (!record) {
+        record = store[theCoordId] = {
+            coordId: theCoordId,
+            dataZoomInfos: {},
+            count: 0
+        };
+        record.controller = createController(api, record);
+        record.dispatchAction = curry(dispatchAction$1, api);
+    }
+
+    // Update reference of dataZoom.
+    !(record.dataZoomInfos[theDataZoomId]) && record.count++;
+    record.dataZoomInfos[theDataZoomId] = dataZoomInfo;
+
+    var controllerParams = mergeControllerParams(record.dataZoomInfos);
+    record.controller.enable(controllerParams.controlType, controllerParams.opt);
+
+    // Consider resize, area should be always updated.
+    record.controller.setPointerChecker(dataZoomInfo.containsPoint);
+
+    // Update throttle.
+    createOrUpdate(
+        record,
+        'dispatchAction',
+        dataZoomInfo.throttleRate,
+        'fixRate'
+    );
+}
+
+/**
+ * @public
+ * @param {module:echarts/ExtensionAPI} api
+ * @param {string} dataZoomId
+ */
+function unregister$1(api, dataZoomId) {
+    var store = giveStore(api);
+
+    each$1(store, function (record) {
+        record.controller.dispose();
+        var dataZoomInfos = record.dataZoomInfos;
+        if (dataZoomInfos[dataZoomId]) {
+            delete dataZoomInfos[dataZoomId];
+            record.count--;
+        }
+    });
+
+    cleanStore(store);
+}
+
+/**
+ * @public
+ */
+function generateCoordId(coordModel) {
+    return coordModel.type + '\0_' + coordModel.id;
+}
+
+/**
+ * Key: coordId, value: {dataZoomInfos: [], count, controller}
+ * @type {Array.<Object>}
+ */
+function giveStore(api) {
+    // Mount store on zrender instance, so that we do not
+    // need to worry about dispose.
+    var zr = api.getZr();
+    return zr[ATTR$1] || (zr[ATTR$1] = {});
+}
+
+function createController(api, newRecord) {
+    var controller = new RoamController(api.getZr());
+    controller.on('pan', curry$6(onPan, newRecord));
+    controller.on('zoom', curry$6(onZoom, newRecord));
+
+    return controller;
+}
+
+function cleanStore(store) {
+    each$1(store, function (record, coordId) {
+        if (!record.count) {
+            record.controller.dispose();
+            delete store[coordId];
+        }
+    });
+}
+
+function onPan(record, dx, dy, oldX, oldY, newX, newY) {
+    wrapAndDispatch(record, function (info) {
+        return info.panGetRange(record.controller, dx, dy, oldX, oldY, newX, newY);
+    });
+}
+
+function onZoom(record, scale, mouseX, mouseY) {
+    wrapAndDispatch(record, function (info) {
+        return info.zoomGetRange(record.controller, scale, mouseX, mouseY);
+    });
+}
+
+function wrapAndDispatch(record, getRange) {
+    var batch = [];
+
+    each$1(record.dataZoomInfos, function (info) {
+        var range = getRange(info);
+        !info.disabled && range && batch.push({
+            dataZoomId: info.dataZoomId,
+            start: range[0],
+            end: range[1]
+        });
+    });
+
+    batch.length && record.dispatchAction(batch);
+}
+
+/**
+ * This action will be throttled.
+ */
+function dispatchAction$1(api, batch) {
+    api.dispatchAction({
+        type: 'dataZoom',
+        batch: batch
+    });
+}
+
+/**
+ * Merge roamController settings when multiple dataZooms share one roamController.
+ */
+function mergeControllerParams(dataZoomInfos) {
+    var controlType;
+    var opt = {};
+    // DO NOT use reserved word (true, false, undefined) as key literally. Even if encapsulated
+    // as string, it is probably revert to reserved word by compress tool. See #7411.
+    var prefix = 'type_';
+    var typePriority = {
+        'type_true': 2,
+        'type_move': 1,
+        'type_false': 0,
+        'type_undefined': -1
+    };
+    each$1(dataZoomInfos, function (dataZoomInfo) {
+        var oneType = dataZoomInfo.disabled ? false : dataZoomInfo.zoomLock ? 'move' : true;
+        if (typePriority[prefix + oneType] > typePriority[prefix + controlType]) {
+            controlType = oneType;
+        }
+        // Do not support that different 'shift'/'ctrl'/'alt' setting used in one coord sys.
+        extend(opt, dataZoomInfo.roamControllerOpt);
+    });
+
+    return {
+        controlType: controlType,
+        opt: opt
+    };
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var bind$5 = bind;
+
+var InsideZoomView = DataZoomView.extend({
+
+    type: 'dataZoom.inside',
+
+    /**
+     * @override
+     */
+    init: function (ecModel, api) {
+        /**
+         * 'throttle' is used in this.dispatchAction, so we save range
+         * to avoid missing some 'pan' info.
+         * @private
+         * @type {Array.<number>}
+         */
+        this._range;
+    },
+
+    /**
+     * @override
+     */
+    render: function (dataZoomModel, ecModel, api, payload) {
+        InsideZoomView.superApply(this, 'render', arguments);
+
+        // Hance the `throttle` util ensures to preserve command order,
+        // here simply updating range all the time will not cause missing
+        // any of the the roam change.
+        this._range = dataZoomModel.getPercentRange();
+
+        // Reset controllers.
+        each$1(this.getTargetCoordInfo(), function (coordInfoList, coordSysName) {
+
+            var allCoordIds = map(coordInfoList, function (coordInfo) {
+                return generateCoordId(coordInfo.model);
+            });
+
+            each$1(coordInfoList, function (coordInfo) {
+                var coordModel = coordInfo.model;
+                var dataZoomOption = dataZoomModel.option;
+
+                register$2(
+                    api,
+                    {
+                        coordId: generateCoordId(coordModel),
+                        allCoordIds: allCoordIds,
+                        containsPoint: function (e, x, y) {
+                            return coordModel.coordinateSystem.containPoint([x, y]);
+                        },
+                        dataZoomId: dataZoomModel.id,
+                        throttleRate: dataZoomModel.get('throttle', true),
+                        panGetRange: bind$5(this._onPan, this, coordInfo, coordSysName),
+                        zoomGetRange: bind$5(this._onZoom, this, coordInfo, coordSysName),
+                        zoomLock: dataZoomOption.zoomLock,
+                        disabled: dataZoomOption.disabled,
+                        roamControllerOpt: {
+                            zoomOnMouseWheel: dataZoomOption.zoomOnMouseWheel,
+                            moveOnMouseMove: dataZoomOption.moveOnMouseMove,
+                            preventDefaultMouseMove: dataZoomOption.preventDefaultMouseMove
+                        }
+                    }
+                );
+            }, this);
+
+        }, this);
+    },
+
+    /**
+     * @override
+     */
+    dispose: function () {
+        unregister$1(this.api, this.dataZoomModel.id);
+        InsideZoomView.superApply(this, 'dispose', arguments);
+        this._range = null;
+    },
+
+    /**
+     * @private
+     */
+    _onPan: function (coordInfo, coordSysName, controller, dx, dy, oldX, oldY, newX, newY) {
+        var lastRange = this._range;
+        var range = lastRange.slice();
+
+        // Calculate transform by the first axis.
+        var axisModel = coordInfo.axisModels[0];
+        if (!axisModel) {
+            return;
+        }
+
+        var directionInfo = getDirectionInfo[coordSysName](
+            [oldX, oldY], [newX, newY], axisModel, controller, coordInfo
+        );
+
+        var percentDelta = directionInfo.signal
+            * (range[1] - range[0])
+            * directionInfo.pixel / directionInfo.pixelLength;
+
+        sliderMove(percentDelta, range, [0, 100], 'all');
+
+        this._range = range;
+
+        if (lastRange[0] !== range[0] || lastRange[1] !== range[1]) {
+            return range;
+        }
+    },
+
+    /**
+     * @private
+     */
+    _onZoom: function (coordInfo, coordSysName, controller, scale, mouseX, mouseY) {
+        var lastRange = this._range;
+        var range = lastRange.slice();
+
+        // Calculate transform by the first axis.
+        var axisModel = coordInfo.axisModels[0];
+        if (!axisModel) {
+            return;
+        }
+
+        var directionInfo = getDirectionInfo[coordSysName](
+            null, [mouseX, mouseY], axisModel, controller, coordInfo
+        );
+        var percentPoint = (
+            directionInfo.signal > 0
+                ? (directionInfo.pixelStart + directionInfo.pixelLength - directionInfo.pixel)
+                : (directionInfo.pixel - directionInfo.pixelStart)
+            ) / directionInfo.pixelLength * (range[1] - range[0]) + range[0];
+
+        scale = Math.max(1 / scale, 0);
+        range[0] = (range[0] - percentPoint) * scale + percentPoint;
+        range[1] = (range[1] - percentPoint) * scale + percentPoint;
+
+        // Restrict range.
+        var minMaxSpan = this.dataZoomModel.findRepresentativeAxisProxy().getMinMaxSpan();
+
+        sliderMove(0, range, [0, 100], 0, minMaxSpan.minSpan, minMaxSpan.maxSpan);
+
+        this._range = range;
+
+        if (lastRange[0] !== range[0] || lastRange[1] !== range[1]) {
+            return range;
+        }
+    }
+
+});
+
+var getDirectionInfo = {
+
+    grid: function (oldPoint, newPoint, axisModel, controller, coordInfo) {
+        var axis = axisModel.axis;
+        var ret = {};
+        var rect = coordInfo.model.coordinateSystem.getRect();
+        oldPoint = oldPoint || [0, 0];
+
+        if (axis.dim === 'x') {
+            ret.pixel = newPoint[0] - oldPoint[0];
+            ret.pixelLength = rect.width;
+            ret.pixelStart = rect.x;
+            ret.signal = axis.inverse ? 1 : -1;
+        }
+        else { // axis.dim === 'y'
+            ret.pixel = newPoint[1] - oldPoint[1];
+            ret.pixelLength = rect.height;
+            ret.pixelStart = rect.y;
+            ret.signal = axis.inverse ? -1 : 1;
+        }
+
+        return ret;
+    },
+
+    polar: function (oldPoint, newPoint, axisModel, controller, coordInfo) {
+        var axis = axisModel.axis;
+        var ret = {};
+        var polar = coordInfo.model.coordinateSystem;
+        var radiusExtent = polar.getRadiusAxis().getExtent();
+        var angleExtent = polar.getAngleAxis().getExtent();
+
+        oldPoint = oldPoint ? polar.pointToCoord(oldPoint) : [0, 0];
+        newPoint = polar.pointToCoord(newPoint);
+
+        if (axisModel.mainType === 'radiusAxis') {
+            ret.pixel = newPoint[0] - oldPoint[0];
+            // ret.pixelLength = Math.abs(radiusExtent[1] - radiusExtent[0]);
+            // ret.pixelStart = Math.min(radiusExtent[0], radiusExtent[1]);
+            ret.pixelLength = radiusExtent[1] - radiusExtent[0];
+            ret.pixelStart = radiusExtent[0];
+            ret.signal = axis.inverse ? 1 : -1;
+        }
+        else { // 'angleAxis'
+            ret.pixel = newPoint[1] - oldPoint[1];
+            // ret.pixelLength = Math.abs(angleExtent[1] - angleExtent[0]);
+            // ret.pixelStart = Math.min(angleExtent[0], angleExtent[1]);
+            ret.pixelLength = angleExtent[1] - angleExtent[0];
+            ret.pixelStart = angleExtent[0];
+            ret.signal = axis.inverse ? -1 : 1;
+        }
+
+        return ret;
+    },
+
+    singleAxis: function (oldPoint, newPoint, axisModel, controller, coordInfo) {
+        var axis = axisModel.axis;
+        var rect = coordInfo.model.coordinateSystem.getRect();
+        var ret = {};
+
+        oldPoint = oldPoint || [0, 0];
+
+        if (axis.orient === 'horizontal') {
+            ret.pixel = newPoint[0] - oldPoint[0];
+            ret.pixelLength = rect.width;
+            ret.pixelStart = rect.x;
+            ret.signal = axis.inverse ? 1 : -1;
+        }
+        else { // 'vertical'
+            ret.pixel = newPoint[1] - oldPoint[1];
+            ret.pixelLength = rect.height;
+            ret.pixelStart = rect.y;
+            ret.signal = axis.inverse ? -1 : 1;
+        }
+
+        return ret;
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+registerProcessor({
+
+    // `dataZoomProcessor` will only be performed in needed series. Consider if
+    // there is a line series and a pie series, it is better not to update the
+    // line series if only pie series is needed to be updated.
+    getTargetSeries: function (ecModel) {
+        var seriesModelMap = createHashMap();
+
+        ecModel.eachComponent('dataZoom', function (dataZoomModel) {
+            dataZoomModel.eachTargetAxis(function (dimNames, axisIndex, dataZoomModel) {
+                var axisProxy = dataZoomModel.getAxisProxy(dimNames.name, axisIndex);
+                each$1(axisProxy.getTargetSeriesModels(), function (seriesModel) {
+                    seriesModelMap.set(seriesModel.uid, seriesModel);
+                });
+            });
+        });
+
+        return seriesModelMap;
+    },
+
+    modifyOutputEnd: true,
+
+    // Consider appendData, where filter should be performed. Because data process is
+    // in block mode currently, it is not need to worry about that the overallProgress
+    // execute every frame.
+    overallReset: function (ecModel, api) {
+
+        ecModel.eachComponent('dataZoom', function (dataZoomModel) {
+            // We calculate window and reset axis here but not in model
+            // init stage and not after action dispatch handler, because
+            // reset should be called after seriesData.restoreData.
+            dataZoomModel.eachTargetAxis(function (dimNames, axisIndex, dataZoomModel) {
+                dataZoomModel.getAxisProxy(dimNames.name, axisIndex).reset(dataZoomModel, api);
+            });
+
+            // Caution: data zoom filtering is order sensitive when using
+            // percent range and no min/max/scale set on axis.
+            // For example, we have dataZoom definition:
+            // [
+            //      {xAxisIndex: 0, start: 30, end: 70},
+            //      {yAxisIndex: 0, start: 20, end: 80}
+            // ]
+            // In this case, [20, 80] of y-dataZoom should be based on data
+            // that have filtered by x-dataZoom using range of [30, 70],
+            // but should not be based on full raw data. Thus sliding
+            // x-dataZoom will change both ranges of xAxis and yAxis,
+            // while sliding y-dataZoom will only change the range of yAxis.
+            // So we should filter x-axis after reset x-axis immediately,
+            // and then reset y-axis and filter y-axis.
+            dataZoomModel.eachTargetAxis(function (dimNames, axisIndex, dataZoomModel) {
+                dataZoomModel.getAxisProxy(dimNames.name, axisIndex).filterData(dataZoomModel, api);
+            });
+        });
+
+        ecModel.eachComponent('dataZoom', function (dataZoomModel) {
+            // Fullfill all of the range props so that user
+            // is able to get them from chart.getOption().
+            var axisProxy = dataZoomModel.findRepresentativeAxisProxy();
+            var percentRange = axisProxy.getDataPercentWindow();
+            var valueRange = axisProxy.getDataValueWindow();
+
+            dataZoomModel.setRawRange({
+                start: percentRange[0],
+                end: percentRange[1],
+                startValue: valueRange[0],
+                endValue: valueRange[1]
+            }, true);
+        });
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+registerAction('dataZoom', function (payload, ecModel) {
+
+    var linkedNodesFinder = createLinkedNodesFinder(
+        bind(ecModel.eachComponent, ecModel, 'dataZoom'),
+        eachAxisDim$1,
+        function (model, dimNames) {
+            return model.get(dimNames.axisIndex);
+        }
+    );
+
+    var effectedModels = [];
+
+    ecModel.eachComponent(
+        {mainType: 'dataZoom', query: payload},
+        function (model, index) {
+            effectedModels.push.apply(
+                effectedModels, linkedNodesFinder(model).nodes
+            );
+        }
+    );
+
+    each$1(effectedModels, function (dataZoomModel, index) {
+        dataZoomModel.setRawRange({
+            start: payload.start,
+            end: payload.end,
+            startValue: payload.startValue,
+            endValue: payload.endValue
+        });
+    });
+
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * DataZoom component entry
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var each$24 = each$1;
+
+var preprocessor$2 = function (option) {
+    var visualMap = option && option.visualMap;
+
+    if (!isArray(visualMap)) {
+        visualMap = visualMap ? [visualMap] : [];
+    }
+
+    each$24(visualMap, function (opt) {
+        if (!opt) {
+            return;
+        }
+
+        // rename splitList to pieces
+        if (has$1(opt, 'splitList') && !has$1(opt, 'pieces')) {
+            opt.pieces = opt.splitList;
+            delete opt.splitList;
+        }
+
+        var pieces = opt.pieces;
+        if (pieces && isArray(pieces)) {
+            each$24(pieces, function (piece) {
+                if (isObject$1(piece)) {
+                    if (has$1(piece, 'start') && !has$1(piece, 'min')) {
+                        piece.min = piece.start;
+                    }
+                    if (has$1(piece, 'end') && !has$1(piece, 'max')) {
+                        piece.max = piece.end;
+                    }
+                }
+            });
+        }
+    });
+};
+
+function has$1(obj, name) {
+    return obj && obj.hasOwnProperty && obj.hasOwnProperty(name);
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+ComponentModel.registerSubTypeDefaulter('visualMap', function (option) {
+    // Compatible with ec2, when splitNumber === 0, continuous visualMap will be used.
+    return (
+            !option.categories
+            && (
+                !(
+                    option.pieces
+                        ? option.pieces.length > 0
+                        : option.splitNumber > 0
+                )
+                || option.calculable
+            )
+        )
+        ? 'continuous' : 'piecewise';
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var VISUAL_PRIORITY = PRIORITY.VISUAL.COMPONENT;
+
+registerVisual(VISUAL_PRIORITY, {
+    createOnAllSeries: true,
+    reset: function (seriesModel, ecModel) {
+        var resetDefines = [];
+        ecModel.eachComponent('visualMap', function (visualMapModel) {
+            var pipelineContext = seriesModel.pipelineContext;
+            if (!visualMapModel.isTargetSeries(seriesModel)
+                || (pipelineContext && pipelineContext.large)
+            ) {
+                return;
+            }
+
+            resetDefines.push(incrementalApplyVisual(
+                visualMapModel.stateList,
+                visualMapModel.targetVisuals,
+                bind(visualMapModel.getValueState, visualMapModel),
+                visualMapModel.getDataDimension(seriesModel.getData())
+            ));
+        });
+
+        return resetDefines;
+    }
+});
+
+// Only support color.
+registerVisual(VISUAL_PRIORITY, {
+    createOnAllSeries: true,
+    reset: function (seriesModel, ecModel) {
+        var data = seriesModel.getData();
+        var visualMetaList = [];
+
+        ecModel.eachComponent('visualMap', function (visualMapModel) {
+            if (visualMapModel.isTargetSeries(seriesModel)) {
+                var visualMeta = visualMapModel.getVisualMeta(
+                    bind(getColorVisual, null, seriesModel, visualMapModel)
+                ) || {stops: [], outerColors: []};
+
+                var concreteDim = visualMapModel.getDataDimension(data);
+                var dimInfo = data.getDimensionInfo(concreteDim);
+                if (dimInfo != null) {
+                    // visualMeta.dimension should be dimension index, but not concrete dimension.
+                    visualMeta.dimension = dimInfo.index;
+                    visualMetaList.push(visualMeta);
+                }
+            }
+        });
+
+        // console.log(JSON.stringify(visualMetaList.map(a => a.stops)));
+        seriesModel.getData().setVisual('visualMeta', visualMetaList);
+    }
+});
+
+// FIXME
+// performance and export for heatmap?
+// value can be Infinity or -Infinity
+function getColorVisual(seriesModel, visualMapModel, value, valueState) {
+    var mappings = visualMapModel.targetVisuals[valueState];
+    var visualTypes = VisualMapping.prepareVisualTypes(mappings);
+    var resultVisual = {
+        color: seriesModel.getData().getVisual('color') // default color.
+    };
+
+    for (var i = 0, len = visualTypes.length; i < len; i++) {
+        var type = visualTypes[i];
+        var mapping = mappings[
+            type === 'opacity' ? '__alphaForOpacity' : type
+        ];
+        mapping && mapping.applyVisual(value, getVisual, setVisual);
+    }
+
+    return resultVisual.color;
+
+    function getVisual(key) {
+        return resultVisual[key];
+    }
+
+    function setVisual(key, value) {
+        resultVisual[key] = value;
+    }
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @file Visual mapping.
+ */
+
+var visualDefault = {
+
+    /**
+     * @public
+     */
+    get: function (visualType, key, isCategory) {
+        var value = clone(
+            (defaultOption$3[visualType] || {})[key]
+        );
+
+        return isCategory
+            ? (isArray(value) ? value[value.length - 1] : value)
+            : value;
+    }
+
+};
+
+var defaultOption$3 = {
+
+    color: {
+        active: ['#006edd', '#e0ffff'],
+        inactive: ['rgba(0,0,0,0)']
+    },
+
+    colorHue: {
+        active: [0, 360],
+        inactive: [0, 0]
+    },
+
+    colorSaturation: {
+        active: [0.3, 1],
+        inactive: [0, 0]
+    },
+
+    colorLightness: {
+        active: [0.9, 0.5],
+        inactive: [0, 0]
+    },
+
+    colorAlpha: {
+        active: [0.3, 1],
+        inactive: [0, 0]
+    },
+
+    opacity: {
+        active: [0.3, 1],
+        inactive: [0, 0]
+    },
+
+    symbol: {
+        active: ['circle', 'roundRect', 'diamond'],
+        inactive: ['none']
+    },
+
+    symbolSize: {
+        active: [10, 50],
+        inactive: [0, 0]
+    }
+};
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var mapVisual$2 = VisualMapping.mapVisual;
+var eachVisual = VisualMapping.eachVisual;
+var isArray$3 = isArray;
+var each$25 = each$1;
+var asc$3 = asc;
+var linearMap$2 = linearMap;
+var noop$2 = noop;
+
+var VisualMapModel = extendComponentModel({
+
+    type: 'visualMap',
+
+    dependencies: ['series'],
+
+    /**
+     * @readOnly
+     * @type {Array.<string>}
+     */
+    stateList: ['inRange', 'outOfRange'],
+
+    /**
+     * @readOnly
+     * @type {Array.<string>}
+     */
+    replacableOptionKeys: [
+        'inRange', 'outOfRange', 'target', 'controller', 'color'
+    ],
+
+    /**
+     * [lowerBound, upperBound]
+     *
+     * @readOnly
+     * @type {Array.<number>}
+     */
+    dataBound: [-Infinity, Infinity],
+
+    /**
+     * @readOnly
+     * @type {string|Object}
+     */
+    layoutMode: {type: 'box', ignoreSize: true},
+
+    /**
+     * @protected
+     */
+    defaultOption: {
+        show: true,
+
+        zlevel: 0,
+        z: 4,
+
+        seriesIndex: 'all',     // 'all' or null/undefined: all series.
+                                // A number or an array of number: the specified series.
+
+                                // set min: 0, max: 200, only for campatible with ec2.
+                                // In fact min max should not have default value.
+        min: 0,                 // min value, must specified if pieces is not specified.
+        max: 200,               // max value, must specified if pieces is not specified.
+
+        dimension: null,
+        inRange: null,          // 'color', 'colorHue', 'colorSaturation', 'colorLightness', 'colorAlpha',
+                                // 'symbol', 'symbolSize'
+        outOfRange: null,       // 'color', 'colorHue', 'colorSaturation',
+                                // 'colorLightness', 'colorAlpha',
+                                // 'symbol', 'symbolSize'
+
+        left: 0,                // 'center' Â¦ 'left' Â¦ 'right' Â¦ {number} (px)
+        right: null,            // The same as left.
+        top: null,              // 'top' Â¦ 'bottom' Â¦ 'center' Â¦ {number} (px)
+        bottom: 0,              // The same as top.
+
+        itemWidth: null,
+        itemHeight: null,
+        inverse: false,
+        orient: 'vertical',        // 'horizontal' Â¦ 'vertical'
+
+        backgroundColor: 'rgba(0,0,0,0)',
+        borderColor: '#ccc',       // å€¼åŸŸè¾¹æ¡†é¢œè‰²
+        contentColor: '#5793f3',
+        inactiveColor: '#aaa',
+        borderWidth: 0,            // å€¼åŸŸè¾¹æ¡†çº¿å®½ï¼Œå•ä½pxï¼Œé»˜è®¤ä¸º0ï¼ˆæ— è¾¹æ¡†ï¼‰
+        padding: 5,                // å€¼åŸŸå†…è¾¹è·ï¼Œå•ä½pxï¼Œé»˜è®¤å„æ–¹å‘å†…è¾¹è·ä¸º5ï¼Œ
+                                    // æŽ¥å—æ•°ç»„åˆ†åˆ«è®¾å®šä¸Šå³ä¸‹å·¦è¾¹è·ï¼ŒåŒcss
+        textGap: 10,               //
+        precision: 0,              // å°æ•°ç²¾åº¦ï¼Œé»˜è®¤ä¸º0ï¼Œæ— å°æ•°ç‚¹
+        color: null,               //é¢œè‰²ï¼ˆdeprecatedï¼Œå…¼å®¹ec2ï¼Œé¡ºåºåŒpiecesï¼Œä¸åŒäºŽinRange/outOfRangeï¼‰
+
+        formatter: null,
+        text: null,                // æ–‡æœ¬ï¼Œå¦‚['é«˜', 'ä½Ž']ï¼Œå…¼å®¹ec2ï¼Œtext[0]å¯¹åº”é«˜å€¼ï¼Œtext[1]å¯¹åº”ä½Žå€¼
+        textStyle: {
+            color: '#333'          // å€¼åŸŸæ–‡å—é¢œè‰²
+        }
+    },
+
+    /**
+     * @protected
+     */
+    init: function (option, parentModel, ecModel) {
+
+        /**
+         * @private
+         * @type {Array.<number>}
+         */
+        this._dataExtent;
+
+        /**
+         * @readOnly
+         */
+        this.targetVisuals = {};
+
+        /**
+         * @readOnly
+         */
+        this.controllerVisuals = {};
+
+        /**
+         * @readOnly
+         */
+        this.textStyleModel;
+
+        /**
+         * [width, height]
+         * @readOnly
+         * @type {Array.<number>}
+         */
+        this.itemSize;
+
+        this.mergeDefaultAndTheme(option, ecModel);
+    },
+
+    /**
+     * @protected
+     */
+    optionUpdated: function (newOption, isInit) {
+        var thisOption = this.option;
+
+        // FIXME
+        // necessary?
+        // Disable realtime view update if canvas is not supported.
+        if (!env$1.canvasSupported) {
+            thisOption.realtime = false;
+        }
+
+        !isInit && replaceVisualOption(
+            thisOption, newOption, this.replacableOptionKeys
+        );
+
+        this.textStyleModel = this.getModel('textStyle');
+
+        this.resetItemSize();
+
+        this.completeVisualOption();
+    },
+
+    /**
+     * @protected
+     */
+    resetVisual: function (supplementVisualOption) {
+        var stateList = this.stateList;
+        supplementVisualOption = bind(supplementVisualOption, this);
+
+        this.controllerVisuals = createVisualMappings(
+            this.option.controller, stateList, supplementVisualOption
+        );
+        this.targetVisuals = createVisualMappings(
+            this.option.target, stateList, supplementVisualOption
+        );
+    },
+
+    /**
+     * @protected
+     * @return {Array.<number>} An array of series indices.
+     */
+    getTargetSeriesIndices: function () {
+        var optionSeriesIndex = this.option.seriesIndex;
+        var seriesIndices = [];
+
+        if (optionSeriesIndex == null || optionSeriesIndex === 'all') {
+            this.ecModel.eachSeries(function (seriesModel, index) {
+                seriesIndices.push(index);
+            });
+        }
+        else {
+            seriesIndices = normalizeToArray(optionSeriesIndex);
+        }
+
+        return seriesIndices;
+    },
+
+    /**
+     * @public
+     */
+    eachTargetSeries: function (callback, context) {
+        each$1(this.getTargetSeriesIndices(), function (seriesIndex) {
+            callback.call(context, this.ecModel.getSeriesByIndex(seriesIndex));
+        }, this);
+    },
+
+    /**
+     * @pubilc
+     */
+    isTargetSeries: function (seriesModel) {
+        var is = false;
+        this.eachTargetSeries(function (model) {
+            model === seriesModel && (is = true);
+        });
+        return is;
+    },
+
+    /**
+     * @example
+     * this.formatValueText(someVal); // format single numeric value to text.
+     * this.formatValueText(someVal, true); // format single category value to text.
+     * this.formatValueText([min, max]); // format numeric min-max to text.
+     * this.formatValueText([this.dataBound[0], max]); // using data lower bound.
+     * this.formatValueText([min, this.dataBound[1]]); // using data upper bound.
+     *
+     * @param {number|Array.<number>} value Real value, or this.dataBound[0 or 1].
+     * @param {boolean} [isCategory=false] Only available when value is number.
+     * @param {Array.<string>} edgeSymbols Open-close symbol when value is interval.
+     * @return {string}
+     * @protected
+     */
+    formatValueText: function(value, isCategory, edgeSymbols) {
+        var option = this.option;
+        var precision = option.precision;
+        var dataBound = this.dataBound;
+        var formatter = option.formatter;
+        var isMinMax;
+        var textValue;
+        edgeSymbols = edgeSymbols || ['<', '>'];
+
+        if (isArray(value)) {
+            value = value.slice();
+            isMinMax = true;
+        }
+
+        textValue = isCategory
+            ? value
+            : (isMinMax
+                ? [toFixed(value[0]), toFixed(value[1])]
+                : toFixed(value)
+            );
+
+        if (isString(formatter)) {
+            return formatter
+                .replace('{value}', isMinMax ? textValue[0] : textValue)
+                .replace('{value2}', isMinMax ? textValue[1] : textValue);
+        }
+        else if (isFunction$1(formatter)) {
+            return isMinMax
+                ? formatter(value[0], value[1])
+                : formatter(value);
+        }
+
+        if (isMinMax) {
+            if (value[0] === dataBound[0]) {
+                return edgeSymbols[0] + ' ' + textValue[1];
+            }
+            else if (value[1] === dataBound[1]) {
+                return edgeSymbols[1] + ' ' + textValue[0];
+            }
+            else {
+                return textValue[0] + ' - ' + textValue[1];
+            }
+        }
+        else { // Format single value (includes category case).
+            return textValue;
+        }
+
+        function toFixed(val) {
+            return val === dataBound[0]
+                ? 'min'
+                : val === dataBound[1]
+                ? 'max'
+                : (+val).toFixed(Math.min(precision, 20));
+        }
+    },
+
+    /**
+     * @protected
+     */
+    resetExtent: function () {
+        var thisOption = this.option;
+
+        // Can not calculate data extent by data here.
+        // Because series and data may be modified in processing stage.
+        // So we do not support the feature "auto min/max".
+
+        var extent = asc$3([thisOption.min, thisOption.max]);
+
+        this._dataExtent = extent;
+    },
+
+    /**
+     * @public
+     * @param {module:echarts/data/List} list
+     * @return {string} Concrete dimention. If return null/undefined,
+     *                  no dimension used.
+     */
+    getDataDimension: function (list) {
+        var optDim = this.option.dimension;
+        var listDimensions = list.dimensions;
+        if (optDim == null && !listDimensions.length) {
+            return;
+        }
+
+        if (optDim != null) {
+            return list.getDimension(optDim);
+        }
+
+        var dimNames = list.dimensions;
+        for (var i = dimNames.length - 1; i >= 0; i--) {
+            var dimName = dimNames[i];
+            var dimInfo = list.getDimensionInfo(dimName);
+            if (!dimInfo.isCalculationCoord) {
+                return dimName;
+            }
+        }
+    },
+
+    /**
+     * @public
+     * @override
+     */
+    getExtent: function () {
+        return this._dataExtent.slice();
+    },
+
+    /**
+     * @protected
+     */
+    completeVisualOption: function () {
+        var ecModel = this.ecModel;
+        var thisOption = this.option;
+        var base = {inRange: thisOption.inRange, outOfRange: thisOption.outOfRange};
+
+        var target = thisOption.target || (thisOption.target = {});
+        var controller = thisOption.controller || (thisOption.controller = {});
+
+        merge(target, base); // Do not override
+        merge(controller, base); // Do not override
+
+        var isCategory = this.isCategory();
+
+        completeSingle.call(this, target);
+        completeSingle.call(this, controller);
+        completeInactive.call(this, target, 'inRange', 'outOfRange');
+        // completeInactive.call(this, target, 'outOfRange', 'inRange');
+        completeController.call(this, controller);
+
+        function completeSingle(base) {
+            // Compatible with ec2 dataRange.color.
+            // The mapping order of dataRange.color is: [high value, ..., low value]
+            // whereas inRange.color and outOfRange.color is [low value, ..., high value]
+            // Notice: ec2 has no inverse.
+            if (isArray$3(thisOption.color)
+                // If there has been inRange: {symbol: ...}, adding color is a mistake.
+                // So adding color only when no inRange defined.
+                && !base.inRange
+            ) {
+                base.inRange = {color: thisOption.color.slice().reverse()};
+            }
+
+            // Compatible with previous logic, always give a defautl color, otherwise
+            // simple config with no inRange and outOfRange will not work.
+            // Originally we use visualMap.color as the default color, but setOption at
+            // the second time the default color will be erased. So we change to use
+            // constant DEFAULT_COLOR.
+            // If user do not want the defualt color, set inRange: {color: null}.
+            base.inRange = base.inRange || {color: ecModel.get('gradientColor')};
+
+            // If using shortcut like: {inRange: 'symbol'}, complete default value.
+            each$25(this.stateList, function (state) {
+                var visualType = base[state];
+
+                if (isString(visualType)) {
+                    var defa = visualDefault.get(visualType, 'active', isCategory);
+                    if (defa) {
+                        base[state] = {};
+                        base[state][visualType] = defa;
+                    }
+                    else {
+                        // Mark as not specified.
+                        delete base[state];
+                    }
+                }
+            }, this);
+        }
+
+        function completeInactive(base, stateExist, stateAbsent) {
+            var optExist = base[stateExist];
+            var optAbsent = base[stateAbsent];
+
+            if (optExist && !optAbsent) {
+                optAbsent = base[stateAbsent] = {};
+                each$25(optExist, function (visualData, visualType) {
+                    if (!VisualMapping.isValidType(visualType)) {
+                        return;
+                    }
+
+                    var defa = visualDefault.get(visualType, 'inactive', isCategory);
+
+                    if (defa != null) {
+                        optAbsent[visualType] = defa;
+
+                        // Compatibable with ec2:
+                        // Only inactive color to rgba(0,0,0,0) can not
+                        // make label transparent, so use opacity also.
+                        if (visualType === 'color'
+                            && !optAbsent.hasOwnProperty('opacity')
+                            && !optAbsent.hasOwnProperty('colorAlpha')
+                        ) {
+                            optAbsent.opacity = [0, 0];
+                        }
+                    }
+                });
+            }
+        }
+
+        function completeController(controller) {
+            var symbolExists = (controller.inRange || {}).symbol
+                || (controller.outOfRange || {}).symbol;
+            var symbolSizeExists = (controller.inRange || {}).symbolSize
+                || (controller.outOfRange || {}).symbolSize;
+            var inactiveColor = this.get('inactiveColor');
+
+            each$25(this.stateList, function (state) {
+
+                var itemSize = this.itemSize;
+                var visuals = controller[state];
+
+                // Set inactive color for controller if no other color
+                // attr (like colorAlpha) specified.
+                if (!visuals) {
+                    visuals = controller[state] = {
+                        color: isCategory ? inactiveColor : [inactiveColor]
+                    };
+                }
+
+                // Consistent symbol and symbolSize if not specified.
+                if (visuals.symbol == null) {
+                    visuals.symbol = symbolExists
+                        && clone(symbolExists)
+                        || (isCategory ? 'roundRect' : ['roundRect']);
+                }
+                if (visuals.symbolSize == null) {
+                    visuals.symbolSize = symbolSizeExists
+                        && clone(symbolSizeExists)
+                        || (isCategory ? itemSize[0] : [itemSize[0], itemSize[0]]);
+                }
+
+                // Filter square and none.
+                visuals.symbol = mapVisual$2(visuals.symbol, function (symbol) {
+                    return (symbol === 'none' || symbol === 'square') ? 'roundRect' : symbol;
+                });
+
+                // Normalize symbolSize
+                var symbolSize = visuals.symbolSize;
+
+                if (symbolSize != null) {
+                    var max = -Infinity;
+                    // symbolSize can be object when categories defined.
+                    eachVisual(symbolSize, function (value) {
+                        value > max && (max = value);
+                    });
+                    visuals.symbolSize = mapVisual$2(symbolSize, function (value) {
+                        return linearMap$2(value, [0, max], [0, itemSize[0]], true);
+                    });
+                }
+
+            }, this);
+        }
+    },
+
+    /**
+     * @protected
+     */
+    resetItemSize: function () {
+        this.itemSize = [
+            parseFloat(this.get('itemWidth')),
+            parseFloat(this.get('itemHeight'))
+        ];
+    },
+
+    /**
+     * @public
+     */
+    isCategory: function () {
+        return !!this.option.categories;
+    },
+
+    /**
+     * @public
+     * @abstract
+     */
+    setSelected: noop$2,
+
+    /**
+     * @public
+     * @abstract
+     * @param {*|module:echarts/data/List} valueOrData
+     * @param {number} dataIndex
+     * @return {string} state See this.stateList
+     */
+    getValueState: noop$2,
+
+    /**
+     * FIXME
+     * Do not publish to thirt-part-dev temporarily
+     * util the interface is stable. (Should it return
+     * a function but not visual meta?)
+     *
+     * @pubilc
+     * @abstract
+     * @param {Function} getColorVisual
+     *        params: value, valueState
+     *        return: color
+     * @return {Object} visualMeta
+     *        should includes {stops, outerColors}
+     *        outerColor means [colorBeyondMinValue, colorBeyondMaxValue]
+     */
+    getVisualMeta: noop$2
+
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// Constant
+var DEFAULT_BAR_BOUND = [20, 140];
+
+var ContinuousModel = VisualMapModel.extend({
+
+    type: 'visualMap.continuous',
+
+    /**
+     * @protected
+     */
+    defaultOption: {
+        align: 'auto',          // 'auto', 'left', 'right', 'top', 'bottom'
+        calculable: false,      // This prop effect default component type determine,
+                                // See echarts/component/visualMap/typeDefaulter.
+        range: null,            // selected range. In default case `range` is [min, max]
+                                // and can auto change along with modification of min max,
+                                // util use specifid a range.
+        realtime: true,         // Whether realtime update.
+        itemHeight: null,       // The length of the range control edge.
+        itemWidth: null,        // The length of the other side.
+        hoverLink: true,        // Enable hover highlight.
+        hoverLinkDataSize: null,// The size of hovered data.
+        hoverLinkOnHandle: null // Whether trigger hoverLink when hover handle.
+                                // If not specified, follow the value of `realtime`.
+    },
+
+    /**
+     * @override
+     */
+    optionUpdated: function (newOption, isInit) {
+        ContinuousModel.superApply(this, 'optionUpdated', arguments);
+
+        this.resetExtent();
+
+        this.resetVisual(function (mappingOption) {
+            mappingOption.mappingMethod = 'linear';
+            mappingOption.dataExtent = this.getExtent();
+        });
+
+        this._resetRange();
+    },
+
+    /**
+     * @protected
+     * @override
+     */
+    resetItemSize: function () {
+        ContinuousModel.superApply(this, 'resetItemSize', arguments);
+
+        var itemSize = this.itemSize;
+
+        this._orient === 'horizontal' && itemSize.reverse();
+
+        (itemSize[0] == null || isNaN(itemSize[0])) && (itemSize[0] = DEFAULT_BAR_BOUND[0]);
+        (itemSize[1] == null || isNaN(itemSize[1])) && (itemSize[1] = DEFAULT_BAR_BOUND[1]);
+    },
+
+    /**
+     * @private
+     */
+    _resetRange: function () {
+        var dataExtent = this.getExtent();
+        var range = this.option.range;
+
+        if (!range || range.auto) {
+            // `range` should always be array (so we dont use other
+            // value like 'auto') for user-friend. (consider getOption).
+            dataExtent.auto = 1;
+            this.option.range = dataExtent;
+        }
+        else if (isArray(range)) {
+            if (range[0] > range[1]) {
+                range.reverse();
+            }
+            range[0] = Math.max(range[0], dataExtent[0]);
+            range[1] = Math.min(range[1], dataExtent[1]);
+        }
+    },
+
+    /**
+     * @protected
+     * @override
+     */
+    completeVisualOption: function () {
+        VisualMapModel.prototype.completeVisualOption.apply(this, arguments);
+
+        each$1(this.stateList, function (state) {
+            var symbolSize = this.option.controller[state].symbolSize;
+            if (symbolSize && symbolSize[0] !== symbolSize[1]) {
+                symbolSize[0] = 0; // For good looking.
+            }
+        }, this);
+    },
+
+    /**
+     * @override
+     */
+    setSelected: function (selected) {
+        this.option.range = selected.slice();
+        this._resetRange();
+    },
+
+    /**
+     * @public
+     */
+    getSelected: function () {
+        var dataExtent = this.getExtent();
+
+        var dataInterval = asc(
+            (this.get('range') || []).slice()
+        );
+
+        // Clamp
+        dataInterval[0] > dataExtent[1] && (dataInterval[0] = dataExtent[1]);
+        dataInterval[1] > dataExtent[1] && (dataInterval[1] = dataExtent[1]);
+        dataInterval[0] < dataExtent[0] && (dataInterval[0] = dataExtent[0]);
+        dataInterval[1] < dataExtent[0] && (dataInterval[1] = dataExtent[0]);
+
+        return dataInterval;
+    },
+
+    /**
+     * @override
+     */
+    getValueState: function (value) {
+        var range = this.option.range;
+        var dataExtent = this.getExtent();
+
+        // When range[0] === dataExtent[0], any value larger than dataExtent[0] maps to 'inRange'.
+        // range[1] is processed likewise.
+        return (
+            (range[0] <= dataExtent[0] || range[0] <= value)
+            && (range[1] >= dataExtent[1] || value <= range[1])
+        ) ? 'inRange' : 'outOfRange';
+    },
+
+    /**
+     * @params {Array.<number>} range target value: range[0] <= value && value <= range[1]
+     * @return {Array.<Object>} [{seriesId, dataIndices: <Array.<number>>}, ...]
+     */
+    findTargetDataIndices: function (range) {
+        var result = [];
+
+        this.eachTargetSeries(function (seriesModel) {
+            var dataIndices = [];
+            var data = seriesModel.getData();
+
+            data.each(this.getDataDimension(data), function (value, dataIndex) {
+                range[0] <= value && value <= range[1] && dataIndices.push(dataIndex);
+            }, this);
+
+            result.push({seriesId: seriesModel.id, dataIndex: dataIndices});
+        }, this);
+
+        return result;
+    },
+
+    /**
+     * @implement
+     */
+    getVisualMeta: function (getColorVisual) {
+        var oVals = getColorStopValues(this, 'outOfRange', this.getExtent());
+        var iVals = getColorStopValues(this, 'inRange', this.option.range.slice());
+        var stops = [];
+
+        function setStop(value, valueState) {
+            stops.push({
+                value: value,
+                color: getColorVisual(value, valueState)
+            });
+        }
+
+        // Format to: outOfRange -- inRange -- outOfRange.
+        var iIdx = 0;
+        var oIdx = 0;
+        var iLen = iVals.length;
+        var oLen = oVals.length;
+
+        for (; oIdx < oLen && (!iVals.length || oVals[oIdx] <= iVals[0]); oIdx++) {
+            // If oVal[oIdx] === iVals[iIdx], oVal[oIdx] should be ignored.
+            if (oVals[oIdx] < iVals[iIdx]) {
+                setStop(oVals[oIdx], 'outOfRange');
+            }
+        }
+        for (var first = 1; iIdx < iLen; iIdx++, first = 0) {
+            // If range is full, value beyond min, max will be clamped.
+            // make a singularity
+            first && stops.length && setStop(iVals[iIdx], 'outOfRange');
+            setStop(iVals[iIdx], 'inRange');
+        }
+        for (var first = 1; oIdx < oLen; oIdx++) {
+            if (!iVals.length || iVals[iVals.length - 1] < oVals[oIdx]) {
+                // make a singularity
+                if (first) {
+                    stops.length && setStop(stops[stops.length - 1].value, 'outOfRange');
+                    first = 0;
+                }
+                setStop(oVals[oIdx], 'outOfRange');
+            }
+        }
+
+        var stopsLen = stops.length;
+
+        return {
+            stops: stops,
+            outerColors: [
+                stopsLen ? stops[0].color : 'transparent',
+                stopsLen ? stops[stopsLen - 1].color : 'transparent'
+            ]
+        };
+    }
+
+});
+
+function getColorStopValues(visualMapModel, valueState, dataExtent) {
+    if (dataExtent[0] === dataExtent[1]) {
+        return dataExtent.slice();
+    }
+
+    // When using colorHue mapping, it is not linear color any more.
+    // Moreover, canvas gradient seems not to be accurate linear.
+    // FIXME
+    // Should be arbitrary value 100? or based on pixel size?
+    var count = 200;
+    var step = (dataExtent[1] - dataExtent[0]) / count;
+
+    var value = dataExtent[0];
+    var stopValues = [];
+    for (var i = 0; i <= count && value < dataExtent[1]; i++) {
+        stopValues.push(value);
+        value += step;
+    }
+    stopValues.push(dataExtent[1]);
+
+    return stopValues;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var VisualMapView = extendComponentView({
+
+    type: 'visualMap',
+
+    /**
+     * @readOnly
+     * @type {Object}
+     */
+    autoPositionValues: {left: 1, right: 1, top: 1, bottom: 1},
+
+    init: function (ecModel, api) {
+        /**
+         * @readOnly
+         * @type {module:echarts/model/Global}
+         */
+        this.ecModel = ecModel;
+
+        /**
+         * @readOnly
+         * @type {module:echarts/ExtensionAPI}
+         */
+        this.api = api;
+
+        /**
+         * @readOnly
+         * @type {module:echarts/component/visualMap/visualMapModel}
+         */
+        this.visualMapModel;
+    },
+
+    /**
+     * @protected
+     */
+    render: function (visualMapModel, ecModel, api, payload) {
+        this.visualMapModel = visualMapModel;
+
+        if (visualMapModel.get('show') === false) {
+            this.group.removeAll();
+            return;
+        }
+
+        this.doRender.apply(this, arguments);
+    },
+
+    /**
+     * @protected
+     */
+    renderBackground: function (group) {
+        var visualMapModel = this.visualMapModel;
+        var padding = normalizeCssArray$1(visualMapModel.get('padding') || 0);
+        var rect = group.getBoundingRect();
+
+        group.add(new Rect({
+            z2: -1, // Lay background rect on the lowest layer.
+            silent: true,
+            shape: {
+                x: rect.x - padding[3],
+                y: rect.y - padding[0],
+                width: rect.width + padding[3] + padding[1],
+                height: rect.height + padding[0] + padding[2]
+            },
+            style: {
+                fill: visualMapModel.get('backgroundColor'),
+                stroke: visualMapModel.get('borderColor'),
+                lineWidth: visualMapModel.get('borderWidth')
+            }
+        }));
+    },
+
+    /**
+     * @protected
+     * @param {number} targetValue can be Infinity or -Infinity
+     * @param {string=} visualCluster Only can be 'color' 'opacity' 'symbol' 'symbolSize'
+     * @param {Object} [opts]
+     * @param {string=} [opts.forceState] Specify state, instead of using getValueState method.
+     * @param {string=} [opts.convertOpacityToAlpha=false] For color gradient in controller widget.
+     * @return {*} Visual value.
+     */
+    getControllerVisual: function (targetValue, visualCluster, opts) {
+        opts = opts || {};
+
+        var forceState = opts.forceState;
+        var visualMapModel = this.visualMapModel;
+        var visualObj = {};
+
+        // Default values.
+        if (visualCluster === 'symbol') {
+            visualObj.symbol = visualMapModel.get('itemSymbol');
+        }
+        if (visualCluster === 'color') {
+            var defaultColor = visualMapModel.get('contentColor');
+            visualObj.color = defaultColor;
+        }
+
+        function getter(key) {
+            return visualObj[key];
+        }
+
+        function setter(key, value) {
+            visualObj[key] = value;
+        }
+
+        var mappings = visualMapModel.controllerVisuals[
+            forceState || visualMapModel.getValueState(targetValue)
+        ];
+        var visualTypes = VisualMapping.prepareVisualTypes(mappings);
+
+        each$1(visualTypes, function (type) {
+            var visualMapping = mappings[type];
+            if (opts.convertOpacityToAlpha && type === 'opacity') {
+                type = 'colorAlpha';
+                visualMapping = mappings.__alphaForOpacity;
+            }
+            if (VisualMapping.dependsOn(type, visualCluster)) {
+                visualMapping && visualMapping.applyVisual(
+                    targetValue, getter, setter
+                );
+            }
+        });
+
+        return visualObj[visualCluster];
+    },
+
+    /**
+     * @protected
+     */
+    positionGroup: function (group) {
+        var model = this.visualMapModel;
+        var api = this.api;
+
+        positionElement(
+            group,
+            model.getBoxLayoutParams(),
+            {width: api.getWidth(), height: api.getHeight()}
+        );
+    },
+
+    /**
+     * @protected
+     * @abstract
+     */
+    doRender: noop
+
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * @param {module:echarts/component/visualMap/VisualMapModel} visualMapModel\
+ * @param {module:echarts/ExtensionAPI} api
+ * @param {Array.<number>} itemSize always [short, long]
+ * @return {string} 'left' or 'right' or 'top' or 'bottom'
+ */
+function getItemAlign(visualMapModel, api, itemSize) {
+    var modelOption = visualMapModel.option;
+    var itemAlign = modelOption.align;
+
+    if (itemAlign != null && itemAlign !== 'auto') {
+        return itemAlign;
+    }
+
+    // Auto decision align.
+    var ecSize = {width: api.getWidth(), height: api.getHeight()};
+    var realIndex = modelOption.orient === 'horizontal' ? 1 : 0;
+
+    var paramsSet = [
+        ['left', 'right', 'width'],
+        ['top', 'bottom', 'height']
+    ];
+    var reals = paramsSet[realIndex];
+    var fakeValue = [0, null, 10];
+
+    var layoutInput = {};
+    for (var i = 0; i < 3; i++) {
+        layoutInput[paramsSet[1 - realIndex][i]] = fakeValue[i];
+        layoutInput[reals[i]] = i === 2 ? itemSize[0] : modelOption[reals[i]];
+    }
+
+    var rParam = [['x', 'width', 3], ['y', 'height', 0]][realIndex];
+    var rect = getLayoutRect(layoutInput, ecSize, modelOption.padding);
+
+    return reals[
+        (rect.margin[rParam[2]] || 0) + rect[rParam[0]] + rect[rParam[1]] * 0.5
+            < ecSize[rParam[1]] * 0.5 ? 0 : 1
+    ];
+}
+
+/**
+ * Prepare dataIndex for outside usage, where dataIndex means rawIndex, and
+ * dataIndexInside means filtered index.
+ */
+function convertDataIndex(batch) {
+    each$1(batch || [], function (batchItem) {
+        if (batch.dataIndex != null) {
+            batch.dataIndexInside = batch.dataIndex;
+            batch.dataIndex = null;
+        }
+    });
+    return batch;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var linearMap$3 = linearMap;
+var each$26 = each$1;
+var mathMin$7 = Math.min;
+var mathMax$7 = Math.max;
+
+// Arbitrary value
+var HOVER_LINK_SIZE = 12;
+var HOVER_LINK_OUT = 6;
+
+// Notice:
+// Any "interval" should be by the order of [low, high].
+// "handle0" (handleIndex === 0) maps to
+// low data value: this._dataInterval[0] and has low coord.
+// "handle1" (handleIndex === 1) maps to
+// high data value: this._dataInterval[1] and has high coord.
+// The logic of transform is implemented in this._createBarGroup.
+
+var ContinuousView = VisualMapView.extend({
+
+    type: 'visualMap.continuous',
+
+    /**
+     * @override
+     */
+    init: function () {
+
+        ContinuousView.superApply(this, 'init', arguments);
+
+        /**
+         * @private
+         */
+        this._shapes = {};
+
+        /**
+         * @private
+         */
+        this._dataInterval = [];
+
+        /**
+         * @private
+         */
+        this._handleEnds = [];
+
+        /**
+         * @private
+         */
+        this._orient;
+
+        /**
+         * @private
+         */
+        this._useHandle;
+
+        /**
+         * @private
+         */
+        this._hoverLinkDataIndices = [];
+
+        /**
+         * @private
+         */
+        this._dragging;
+
+        /**
+         * @private
+         */
+        this._hovering;
+    },
+
+    /**
+     * @protected
+     * @override
+     */
+    doRender: function (visualMapModel, ecModel, api, payload) {
+        if (!payload || payload.type !== 'selectDataRange' || payload.from !== this.uid) {
+            this._buildView();
+        }
+    },
+
+    /**
+     * @private
+     */
+    _buildView: function () {
+        this.group.removeAll();
+
+        var visualMapModel = this.visualMapModel;
+        var thisGroup = this.group;
+
+        this._orient = visualMapModel.get('orient');
+        this._useHandle = visualMapModel.get('calculable');
+
+        this._resetInterval();
+
+        this._renderBar(thisGroup);
+
+        var dataRangeText = visualMapModel.get('text');
+        this._renderEndsText(thisGroup, dataRangeText, 0);
+        this._renderEndsText(thisGroup, dataRangeText, 1);
+
+        // Do this for background size calculation.
+        this._updateView(true);
+
+        // After updating view, inner shapes is built completely,
+        // and then background can be rendered.
+        this.renderBackground(thisGroup);
+
+        // Real update view
+        this._updateView();
+
+        this._enableHoverLinkToSeries();
+        this._enableHoverLinkFromSeries();
+
+        this.positionGroup(thisGroup);
+    },
+
+    /**
+     * @private
+     */
+    _renderEndsText: function (group, dataRangeText, endsIndex) {
+        if (!dataRangeText) {
+            return;
+        }
+
+        // Compatible with ec2, text[0] map to high value, text[1] map low value.
+        var text = dataRangeText[1 - endsIndex];
+        text = text != null ? text + '' : '';
+
+        var visualMapModel = this.visualMapModel;
+        var textGap = visualMapModel.get('textGap');
+        var itemSize = visualMapModel.itemSize;
+
+        var barGroup = this._shapes.barGroup;
+        var position = this._applyTransform(
+            [
+                itemSize[0] / 2,
+                endsIndex === 0 ? -textGap : itemSize[1] + textGap
+            ],
+            barGroup
+        );
+        var align = this._applyTransform(
+            endsIndex === 0 ? 'bottom' : 'top',
+            barGroup
+        );
+        var orient = this._orient;
+        var textStyleModel = this.visualMapModel.textStyleModel;
+
+        this.group.add(new Text({
+            style: {
+                x: position[0],
+                y: position[1],
+                textVerticalAlign: orient === 'horizontal' ? 'middle' : align,
+                textAlign: orient === 'horizontal' ? align : 'center',
+                text: text,
+                textFont: textStyleModel.getFont(),
+                textFill: textStyleModel.getTextColor()
+            }
+        }));
+    },
+
+    /**
+     * @private
+     */
+    _renderBar: function (targetGroup) {
+        var visualMapModel = this.visualMapModel;
+        var shapes = this._shapes;
+        var itemSize = visualMapModel.itemSize;
+        var orient = this._orient;
+        var useHandle = this._useHandle;
+        var itemAlign = getItemAlign(visualMapModel, this.api, itemSize);
+        var barGroup = shapes.barGroup = this._createBarGroup(itemAlign);
+
+        // Bar
+        barGroup.add(shapes.outOfRange = createPolygon());
+        barGroup.add(shapes.inRange = createPolygon(
+            null,
+            useHandle ? getCursor$1(this._orient) : null,
+            bind(this._dragHandle, this, 'all', false),
+            bind(this._dragHandle, this, 'all', true)
+        ));
+
+        var textRect = visualMapModel.textStyleModel.getTextRect('å›½');
+        var textSize = mathMax$7(textRect.width, textRect.height);
+
+        // Handle
+        if (useHandle) {
+            shapes.handleThumbs = [];
+            shapes.handleLabels = [];
+            shapes.handleLabelPoints = [];
+
+            this._createHandle(barGroup, 0, itemSize, textSize, orient, itemAlign);
+            this._createHandle(barGroup, 1, itemSize, textSize, orient, itemAlign);
+        }
+
+        this._createIndicator(barGroup, itemSize, textSize, orient);
+
+        targetGroup.add(barGroup);
+    },
+
+    /**
+     * @private
+     */
+    _createHandle: function (barGroup, handleIndex, itemSize, textSize, orient) {
+        var onDrift = bind(this._dragHandle, this, handleIndex, false);
+        var onDragEnd = bind(this._dragHandle, this, handleIndex, true);
+        var handleThumb = createPolygon(
+            createHandlePoints(handleIndex, textSize),
+            getCursor$1(this._orient),
+            onDrift,
+            onDragEnd
+        );
+        handleThumb.position[0] = itemSize[0];
+        barGroup.add(handleThumb);
+
+        // Text is always horizontal layout but should not be effected by
+        // transform (orient/inverse). So label is built separately but not
+        // use zrender/graphic/helper/RectText, and is located based on view
+        // group (according to handleLabelPoint) but not barGroup.
+        var textStyleModel = this.visualMapModel.textStyleModel;
+        var handleLabel = new Text({
+            draggable: true,
+            drift: onDrift,
+            onmousemove: function (e) {
+                // Fot mobile devicem, prevent screen slider on the button.
+                stop(e.event);
+            },
+            ondragend: onDragEnd,
+            style: {
+                x: 0, y: 0, text: '',
+                textFont: textStyleModel.getFont(),
+                textFill: textStyleModel.getTextColor()
+            }
+        });
+        this.group.add(handleLabel);
+
+        var handleLabelPoint = [
+            orient === 'horizontal'
+                ? textSize / 2
+                : textSize * 1.5,
+            orient === 'horizontal'
+                ? (handleIndex === 0 ? -(textSize * 1.5) : (textSize * 1.5))
+                : (handleIndex === 0 ? -textSize / 2 : textSize / 2)
+        ];
+
+        var shapes = this._shapes;
+        shapes.handleThumbs[handleIndex] = handleThumb;
+        shapes.handleLabelPoints[handleIndex] = handleLabelPoint;
+        shapes.handleLabels[handleIndex] = handleLabel;
+    },
+
+    /**
+     * @private
+     */
+    _createIndicator: function (barGroup, itemSize, textSize, orient) {
+        var indicator = createPolygon([[0, 0]], 'move');
+        indicator.position[0] = itemSize[0];
+        indicator.attr({invisible: true, silent: true});
+        barGroup.add(indicator);
+
+        var textStyleModel = this.visualMapModel.textStyleModel;
+        var indicatorLabel = new Text({
+            silent: true,
+            invisible: true,
+            style: {
+                x: 0, y: 0, text: '',
+                textFont: textStyleModel.getFont(),
+                textFill: textStyleModel.getTextColor()
+            }
+        });
+        this.group.add(indicatorLabel);
+
+        var indicatorLabelPoint = [
+            orient === 'horizontal' ? textSize / 2 : HOVER_LINK_OUT + 3,
+            0
+        ];
+
+        var shapes = this._shapes;
+        shapes.indicator = indicator;
+        shapes.indicatorLabel = indicatorLabel;
+        shapes.indicatorLabelPoint = indicatorLabelPoint;
+    },
+
+    /**
+     * @private
+     */
+    _dragHandle: function (handleIndex, isEnd, dx, dy) {
+        if (!this._useHandle) {
+            return;
+        }
+
+        this._dragging = !isEnd;
+
+        if (!isEnd) {
+            // Transform dx, dy to bar coordination.
+            var vertex = this._applyTransform([dx, dy], this._shapes.barGroup, true);
+            this._updateInterval(handleIndex, vertex[1]);
+
+            // Considering realtime, update view should be executed
+            // before dispatch action.
+            this._updateView();
+        }
+
+        // dragEnd do not dispatch action when realtime.
+        if (isEnd === !this.visualMapModel.get('realtime')) { // jshint ignore:line
+            this.api.dispatchAction({
+                type: 'selectDataRange',
+                from: this.uid,
+                visualMapId: this.visualMapModel.id,
+                selected: this._dataInterval.slice()
+            });
+        }
+
+        if (isEnd) {
+            !this._hovering && this._clearHoverLinkToSeries();
+        }
+        else if (useHoverLinkOnHandle(this.visualMapModel)) {
+            this._doHoverLinkToSeries(this._handleEnds[handleIndex], false);
+        }
+    },
+
+    /**
+     * @private
+     */
+    _resetInterval: function () {
+        var visualMapModel = this.visualMapModel;
+
+        var dataInterval = this._dataInterval = visualMapModel.getSelected();
+        var dataExtent = visualMapModel.getExtent();
+        var sizeExtent = [0, visualMapModel.itemSize[1]];
+
+        this._handleEnds = [
+            linearMap$3(dataInterval[0], dataExtent, sizeExtent, true),
+            linearMap$3(dataInterval[1], dataExtent, sizeExtent, true)
+        ];
+    },
+
+    /**
+     * @private
+     * @param {(number|string)} handleIndex 0 or 1 or 'all'
+     * @param {number} dx
+     * @param {number} dy
+     */
+    _updateInterval: function (handleIndex, delta) {
+        delta = delta || 0;
+        var visualMapModel = this.visualMapModel;
+        var handleEnds = this._handleEnds;
+        var sizeExtent = [0, visualMapModel.itemSize[1]];
+
+        sliderMove(
+            delta,
+            handleEnds,
+            sizeExtent,
+            handleIndex,
+            // cross is forbiden
+            0
+        );
+
+        var dataExtent = visualMapModel.getExtent();
+        // Update data interval.
+        this._dataInterval = [
+            linearMap$3(handleEnds[0], sizeExtent, dataExtent, true),
+            linearMap$3(handleEnds[1], sizeExtent, dataExtent, true)
+        ];
+    },
+
+    /**
+     * @private
+     */
+    _updateView: function (forSketch) {
+        var visualMapModel = this.visualMapModel;
+        var dataExtent = visualMapModel.getExtent();
+        var shapes = this._shapes;
+
+        var outOfRangeHandleEnds = [0, visualMapModel.itemSize[1]];
+        var inRangeHandleEnds = forSketch ? outOfRangeHandleEnds : this._handleEnds;
+
+        var visualInRange = this._createBarVisual(
+            this._dataInterval, dataExtent, inRangeHandleEnds, 'inRange'
+        );
+        var visualOutOfRange = this._createBarVisual(
+            dataExtent, dataExtent, outOfRangeHandleEnds, 'outOfRange'
+        );
+
+        shapes.inRange
+            .setStyle({
+                fill: visualInRange.barColor,
+                opacity: visualInRange.opacity
+            })
+            .setShape('points', visualInRange.barPoints);
+        shapes.outOfRange
+            .setStyle({
+                fill: visualOutOfRange.barColor,
+                opacity: visualOutOfRange.opacity
+            })
+            .setShape('points', visualOutOfRange.barPoints);
+
+        this._updateHandle(inRangeHandleEnds, visualInRange);
+    },
+
+    /**
+     * @private
+     */
+    _createBarVisual: function (dataInterval, dataExtent, handleEnds, forceState) {
+        var opts = {
+            forceState: forceState,
+            convertOpacityToAlpha: true
+        };
+        var colorStops = this._makeColorGradient(dataInterval, opts);
+
+        var symbolSizes = [
+            this.getControllerVisual(dataInterval[0], 'symbolSize', opts),
+            this.getControllerVisual(dataInterval[1], 'symbolSize', opts)
+        ];
+        var barPoints = this._createBarPoints(handleEnds, symbolSizes);
+
+        return {
+            barColor: new LinearGradient(0, 0, 0, 1, colorStops),
+            barPoints: barPoints,
+            handlesColor: [
+                colorStops[0].color,
+                colorStops[colorStops.length - 1].color
+            ]
+        };
+    },
+
+    /**
+     * @private
+     */
+    _makeColorGradient: function (dataInterval, opts) {
+        // Considering colorHue, which is not linear, so we have to sample
+        // to calculate gradient color stops, but not only caculate head
+        // and tail.
+        var sampleNumber = 100; // Arbitrary value.
+        var colorStops = [];
+        var step = (dataInterval[1] - dataInterval[0]) / sampleNumber;
+
+        colorStops.push({
+            color: this.getControllerVisual(dataInterval[0], 'color', opts),
+            offset: 0
+        });
+
+        for (var i = 1; i < sampleNumber; i++) {
+            var currValue = dataInterval[0] + step * i;
+            if (currValue > dataInterval[1]) {
+                break;
+            }
+            colorStops.push({
+                color: this.getControllerVisual(currValue, 'color', opts),
+                offset: i / sampleNumber
+            });
+        }
+
+        colorStops.push({
+            color: this.getControllerVisual(dataInterval[1], 'color', opts),
+            offset: 1
+        });
+
+        return colorStops;
+    },
+
+    /**
+     * @private
+     */
+    _createBarPoints: function (handleEnds, symbolSizes) {
+        var itemSize = this.visualMapModel.itemSize;
+
+        return [
+            [itemSize[0] - symbolSizes[0], handleEnds[0]],
+            [itemSize[0], handleEnds[0]],
+            [itemSize[0], handleEnds[1]],
+            [itemSize[0] - symbolSizes[1], handleEnds[1]]
+        ];
+    },
+
+    /**
+     * @private
+     */
+    _createBarGroup: function (itemAlign) {
+        var orient = this._orient;
+        var inverse = this.visualMapModel.get('inverse');
+
+        return new Group(
+            (orient === 'horizontal' && !inverse)
+            ? {scale: itemAlign === 'bottom' ? [1, 1] : [-1, 1], rotation: Math.PI / 2}
+            : (orient === 'horizontal' && inverse)
+            ? {scale: itemAlign === 'bottom' ? [-1, 1] : [1, 1], rotation: -Math.PI / 2}
+            : (orient === 'vertical' && !inverse)
+            ? {scale: itemAlign === 'left' ? [1, -1] : [-1, -1]}
+            : {scale: itemAlign === 'left' ? [1, 1] : [-1, 1]}
+        );
+    },
+
+    /**
+     * @private
+     */
+    _updateHandle: function (handleEnds, visualInRange) {
+        if (!this._useHandle) {
+            return;
+        }
+
+        var shapes = this._shapes;
+        var visualMapModel = this.visualMapModel;
+        var handleThumbs = shapes.handleThumbs;
+        var handleLabels = shapes.handleLabels;
+
+        each$26([0, 1], function (handleIndex) {
+            var handleThumb = handleThumbs[handleIndex];
+            handleThumb.setStyle('fill', visualInRange.handlesColor[handleIndex]);
+            handleThumb.position[1] = handleEnds[handleIndex];
+
+            // Update handle label position.
+            var textPoint = applyTransform$1(
+                shapes.handleLabelPoints[handleIndex],
+                getTransform(handleThumb, this.group)
+            );
+            handleLabels[handleIndex].setStyle({
+                x: textPoint[0],
+                y: textPoint[1],
+                text: visualMapModel.formatValueText(this._dataInterval[handleIndex]),
+                textVerticalAlign: 'middle',
+                textAlign: this._applyTransform(
+                    this._orient === 'horizontal'
+                        ? (handleIndex === 0 ? 'bottom' : 'top')
+                        : 'left',
+                    shapes.barGroup
+                )
+            });
+        }, this);
+    },
+
+    /**
+     * @private
+     * @param {number} cursorValue
+     * @param {number} textValue
+     * @param {string} [rangeSymbol]
+     * @param {number} [halfHoverLinkSize]
+     */
+    _showIndicator: function (cursorValue, textValue, rangeSymbol, halfHoverLinkSize) {
+        var visualMapModel = this.visualMapModel;
+        var dataExtent = visualMapModel.getExtent();
+        var itemSize = visualMapModel.itemSize;
+        var sizeExtent = [0, itemSize[1]];
+        var pos = linearMap$3(cursorValue, dataExtent, sizeExtent, true);
+
+        var shapes = this._shapes;
+        var indicator = shapes.indicator;
+        if (!indicator) {
+            return;
+        }
+
+        indicator.position[1] = pos;
+        indicator.attr('invisible', false);
+        indicator.setShape('points', createIndicatorPoints(
+            !!rangeSymbol, halfHoverLinkSize, pos, itemSize[1]
+        ));
+
+        var opts = {convertOpacityToAlpha: true};
+        var color = this.getControllerVisual(cursorValue, 'color', opts);
+        indicator.setStyle('fill', color);
+
+        // Update handle label position.
+        var textPoint = applyTransform$1(
+            shapes.indicatorLabelPoint,
+            getTransform(indicator, this.group)
+        );
+
+        var indicatorLabel = shapes.indicatorLabel;
+        indicatorLabel.attr('invisible', false);
+        var align = this._applyTransform('left', shapes.barGroup);
+        var orient = this._orient;
+        indicatorLabel.setStyle({
+            text: (rangeSymbol ? rangeSymbol : '') + visualMapModel.formatValueText(textValue),
+            textVerticalAlign: orient === 'horizontal' ? align : 'middle',
+            textAlign: orient === 'horizontal' ? 'center' : align,
+            x: textPoint[0],
+            y: textPoint[1]
+        });
+    },
+
+    /**
+     * @private
+     */
+    _enableHoverLinkToSeries: function () {
+        var self = this;
+        this._shapes.barGroup
+
+            .on('mousemove', function (e) {
+                self._hovering = true;
+
+                if (!self._dragging) {
+                    var itemSize = self.visualMapModel.itemSize;
+                    var pos = self._applyTransform(
+                        [e.offsetX, e.offsetY], self._shapes.barGroup, true, true
+                    );
+                    // For hover link show when hover handle, which might be
+                    // below or upper than sizeExtent.
+                    pos[1] = mathMin$7(mathMax$7(0, pos[1]), itemSize[1]);
+                    self._doHoverLinkToSeries(
+                        pos[1],
+                        0 <= pos[0] && pos[0] <= itemSize[0]
+                    );
+                }
+            })
+
+            .on('mouseout', function () {
+                // When mouse is out of handle, hoverLink still need
+                // to be displayed when realtime is set as false.
+                self._hovering = false;
+                !self._dragging && self._clearHoverLinkToSeries();
+            });
+    },
+
+    /**
+     * @private
+     */
+    _enableHoverLinkFromSeries: function () {
+        var zr = this.api.getZr();
+
+        if (this.visualMapModel.option.hoverLink) {
+            zr.on('mouseover', this._hoverLinkFromSeriesMouseOver, this);
+            zr.on('mouseout', this._hideIndicator, this);
+        }
+        else {
+            this._clearHoverLinkFromSeries();
+        }
+    },
+
+    /**
+     * @private
+     */
+    _doHoverLinkToSeries: function (cursorPos, hoverOnBar) {
+        var visualMapModel = this.visualMapModel;
+        var itemSize = visualMapModel.itemSize;
+
+        if (!visualMapModel.option.hoverLink) {
+            return;
+        }
+
+        var sizeExtent = [0, itemSize[1]];
+        var dataExtent = visualMapModel.getExtent();
+
+        // For hover link show when hover handle, which might be below or upper than sizeExtent.
+        cursorPos = mathMin$7(mathMax$7(sizeExtent[0], cursorPos), sizeExtent[1]);
+
+        var halfHoverLinkSize = getHalfHoverLinkSize(visualMapModel, dataExtent, sizeExtent);
+        var hoverRange = [cursorPos - halfHoverLinkSize, cursorPos + halfHoverLinkSize];
+        var cursorValue = linearMap$3(cursorPos, sizeExtent, dataExtent, true);
+        var valueRange = [
+            linearMap$3(hoverRange[0], sizeExtent, dataExtent, true),
+            linearMap$3(hoverRange[1], sizeExtent, dataExtent, true)
+        ];
+        // Consider data range is out of visualMap range, see test/visualMap-continuous.html,
+        // where china and india has very large population.
+        hoverRange[0] < sizeExtent[0] && (valueRange[0] = -Infinity);
+        hoverRange[1] > sizeExtent[1] && (valueRange[1] = Infinity);
+
+        // Do not show indicator when mouse is over handle,
+        // otherwise labels overlap, especially when dragging.
+        if (hoverOnBar) {
+            if (valueRange[0] === -Infinity) {
+                this._showIndicator(cursorValue, valueRange[1], '< ', halfHoverLinkSize);
+            }
+            else if (valueRange[1] === Infinity) {
+                this._showIndicator(cursorValue, valueRange[0], '> ', halfHoverLinkSize);
+            }
+            else {
+                this._showIndicator(cursorValue, cursorValue, 'â‰ˆ ', halfHoverLinkSize);
+            }
+        }
+
+        // When realtime is set as false, handles, which are in barGroup,
+        // also trigger hoverLink, which help user to realize where they
+        // focus on when dragging. (see test/heatmap-large.html)
+        // When realtime is set as true, highlight will not show when hover
+        // handle, because the label on handle, which displays a exact value
+        // but not range, might mislead users.
+        var oldBatch = this._hoverLinkDataIndices;
+        var newBatch = [];
+        if (hoverOnBar || useHoverLinkOnHandle(visualMapModel)) {
+            newBatch = this._hoverLinkDataIndices = visualMapModel.findTargetDataIndices(valueRange);
+        }
+
+        var resultBatches = compressBatches(oldBatch, newBatch);
+
+        this._dispatchHighDown('downplay', convertDataIndex(resultBatches[0]));
+        this._dispatchHighDown('highlight', convertDataIndex(resultBatches[1]));
+    },
+
+    /**
+     * @private
+     */
+    _hoverLinkFromSeriesMouseOver: function (e) {
+        var el = e.target;
+        var visualMapModel = this.visualMapModel;
+
+        if (!el || el.dataIndex == null) {
+            return;
+        }
+
+        var dataModel = this.ecModel.getSeriesByIndex(el.seriesIndex);
+
+        if (!visualMapModel.isTargetSeries(dataModel)) {
+            return;
+        }
+
+        var data = dataModel.getData(el.dataType);
+        var value = data.get(visualMapModel.getDataDimension(data), el.dataIndex, true);
+
+        if (!isNaN(value)) {
+            this._showIndicator(value, value);
+        }
+    },
+
+    /**
+     * @private
+     */
+    _hideIndicator: function () {
+        var shapes = this._shapes;
+        shapes.indicator && shapes.indicator.attr('invisible', true);
+        shapes.indicatorLabel && shapes.indicatorLabel.attr('invisible', true);
+    },
+
+    /**
+     * @private
+     */
+    _clearHoverLinkToSeries: function () {
+        this._hideIndicator();
+
+        var indices = this._hoverLinkDataIndices;
+        this._dispatchHighDown('downplay', convertDataIndex(indices));
+
+        indices.length = 0;
+    },
+
+    /**
+     * @private
+     */
+    _clearHoverLinkFromSeries: function () {
+        this._hideIndicator();
+
+        var zr = this.api.getZr();
+        zr.off('mouseover', this._hoverLinkFromSeriesMouseOver);
+        zr.off('mouseout', this._hideIndicator);
+    },
+
+    /**
+     * @private
+     */
+    _applyTransform: function (vertex, element, inverse, global) {
+        var transform = getTransform(element, global ? null : this.group);
+
+        return graphic[
+            isArray(vertex) ? 'applyTransform' : 'transformDirection'
+        ](vertex, transform, inverse);
+    },
+
+    /**
+     * @private
+     */
+    _dispatchHighDown: function (type, batch) {
+        batch && batch.length && this.api.dispatchAction({
+            type: type,
+            batch: batch
+        });
+    },
+
+    /**
+     * @override
+     */
+    dispose: function () {
+        this._clearHoverLinkFromSeries();
+        this._clearHoverLinkToSeries();
+    },
+
+    /**
+     * @override
+     */
+    remove: function () {
+        this._clearHoverLinkFromSeries();
+        this._clearHoverLinkToSeries();
+    }
+
+});
+
+function createPolygon(points, cursor, onDrift, onDragEnd) {
+    return new Polygon({
+        shape: {points: points},
+        draggable: !!onDrift,
+        cursor: cursor,
+        drift: onDrift,
+        onmousemove: function (e) {
+            // Fot mobile devicem, prevent screen slider on the button.
+            stop(e.event);
+        },
+        ondragend: onDragEnd
+    });
+}
+
+function createHandlePoints(handleIndex, textSize) {
+    return handleIndex === 0
+        ? [[0, 0], [textSize, 0], [textSize, -textSize]]
+        : [[0, 0], [textSize, 0], [textSize, textSize]];
+}
+
+function createIndicatorPoints(isRange, halfHoverLinkSize, pos, extentMax) {
+    return isRange
+        ? [ // indicate range
+            [0, -mathMin$7(halfHoverLinkSize, mathMax$7(pos, 0))],
+            [HOVER_LINK_OUT, 0],
+            [0, mathMin$7(halfHoverLinkSize, mathMax$7(extentMax - pos, 0))]
+        ]
+        : [ // indicate single value
+            [0, 0], [5, -5], [5, 5]
+        ];
+}
+
+function getHalfHoverLinkSize(visualMapModel, dataExtent, sizeExtent) {
+    var halfHoverLinkSize = HOVER_LINK_SIZE / 2;
+    var hoverLinkDataSize = visualMapModel.get('hoverLinkDataSize');
+    if (hoverLinkDataSize) {
+        halfHoverLinkSize = linearMap$3(hoverLinkDataSize, dataExtent, sizeExtent, true) / 2;
+    }
+    return halfHoverLinkSize;
+}
+
+function useHoverLinkOnHandle(visualMapModel) {
+    var hoverLinkOnHandle = visualMapModel.get('hoverLinkOnHandle');
+    return !!(hoverLinkOnHandle == null ? visualMapModel.get('realtime') : hoverLinkOnHandle);
+}
+
+function getCursor$1(orient) {
+    return orient === 'vertical' ? 'ns-resize' : 'ew-resize';
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var actionInfo$2 = {
+    type: 'selectDataRange',
+    event: 'dataRangeSelected',
+    // FIXME use updateView appears wrong
+    update: 'update'
+};
+
+registerAction(actionInfo$2, function (payload, ecModel) {
+
+    ecModel.eachComponent({mainType: 'visualMap', query: payload}, function (model) {
+        model.setSelected(payload.selected);
+    });
+
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * DataZoom component entry
+ */
+
+registerPreprocessor(preprocessor$2);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var PiecewiseModel = VisualMapModel.extend({
+
+    type: 'visualMap.piecewise',
+
+    /**
+     * Order Rule:
+     *
+     * option.categories / option.pieces / option.text / option.selected:
+     *     If !option.inverse,
+     *     Order when vertical: ['top', ..., 'bottom'].
+     *     Order when horizontal: ['left', ..., 'right'].
+     *     If option.inverse, the meaning of
+     *     the order should be reversed.
+     *
+     * this._pieceList:
+     *     The order is always [low, ..., high].
+     *
+     * Mapping from location to low-high:
+     *     If !option.inverse
+     *     When vertical, top is high.
+     *     When horizontal, right is high.
+     *     If option.inverse, reverse.
+     */
+
+    /**
+     * @protected
+     */
+    defaultOption: {
+        selected: null,             // Object. If not specified, means selected.
+                                    // When pieces and splitNumber: {'0': true, '5': true}
+                                    // When categories: {'cate1': false, 'cate3': true}
+                                    // When selected === false, means all unselected.
+
+        minOpen: false,             // Whether include values that smaller than `min`.
+        maxOpen: false,             // Whether include values that bigger than `max`.
+
+        align: 'auto',              // 'auto', 'left', 'right'
+        itemWidth: 20,              // When put the controller vertically, it is the length of
+                                    // horizontal side of each item. Otherwise, vertical side.
+        itemHeight: 14,             // When put the controller vertically, it is the length of
+                                    // vertical side of each item. Otherwise, horizontal side.
+        itemSymbol: 'roundRect',
+        pieceList: null,            // Each item is Object, with some of those attrs:
+                                    // {min, max, lt, gt, lte, gte, value,
+                                    // color, colorSaturation, colorAlpha, opacity,
+                                    // symbol, symbolSize}, which customize the range or visual
+                                    // coding of the certain piece. Besides, see "Order Rule".
+        categories: null,           // category names, like: ['some1', 'some2', 'some3'].
+                                    // Attr min/max are ignored when categories set. See "Order Rule"
+        splitNumber: 5,             // If set to 5, auto split five pieces equally.
+                                    // If set to 0 and component type not set, component type will be
+                                    // determined as "continuous". (It is less reasonable but for ec2
+                                    // compatibility, see echarts/component/visualMap/typeDefaulter)
+        selectedMode: 'multiple',   // Can be 'multiple' or 'single'.
+        itemGap: 10,                // The gap between two items, in px.
+        hoverLink: true,            // Enable hover highlight.
+
+        showLabel: null             // By default, when text is used, label will hide (the logic
+                                    // is remained for compatibility reason)
+    },
+
+    /**
+     * @override
+     */
+    optionUpdated: function (newOption, isInit) {
+        PiecewiseModel.superApply(this, 'optionUpdated', arguments);
+
+        /**
+         * The order is always [low, ..., high].
+         * [{text: string, interval: Array.<number>}, ...]
+         * @private
+         * @type {Array.<Object>}
+         */
+        this._pieceList = [];
+
+        this.resetExtent();
+
+        /**
+         * 'pieces', 'categories', 'splitNumber'
+         * @type {string}
+         */
+        var mode = this._mode = this._determineMode();
+
+        resetMethods[this._mode].call(this);
+
+        this._resetSelected(newOption, isInit);
+
+        var categories = this.option.categories;
+
+        this.resetVisual(function (mappingOption, state) {
+            if (mode === 'categories') {
+                mappingOption.mappingMethod = 'category';
+                mappingOption.categories = clone(categories);
+            }
+            else {
+                mappingOption.dataExtent = this.getExtent();
+                mappingOption.mappingMethod = 'piecewise';
+                mappingOption.pieceList = map(this._pieceList, function (piece) {
+                    var piece = clone(piece);
+                    if (state !== 'inRange') {
+                        // FIXME
+                        // outOfRange do not support special visual in pieces.
+                        piece.visual = null;
+                    }
+                    return piece;
+                });
+            }
+        });
+    },
+
+    /**
+     * @protected
+     * @override
+     */
+    completeVisualOption: function () {
+        // Consider this case:
+        // visualMap: {
+        //      pieces: [{symbol: 'circle', lt: 0}, {symbol: 'rect', gte: 0}]
+        // }
+        // where no inRange/outOfRange set but only pieces. So we should make
+        // default inRange/outOfRange for this case, otherwise visuals that only
+        // appear in `pieces` will not be taken into account in visual encoding.
+
+        var option = this.option;
+        var visualTypesInPieces = {};
+        var visualTypes = VisualMapping.listVisualTypes();
+        var isCategory = this.isCategory();
+
+        each$1(option.pieces, function (piece) {
+            each$1(visualTypes, function (visualType) {
+                if (piece.hasOwnProperty(visualType)) {
+                    visualTypesInPieces[visualType] = 1;
+                }
+            });
+        });
+
+        each$1(visualTypesInPieces, function (v, visualType) {
+            var exists = 0;
+            each$1(this.stateList, function (state) {
+                exists |= has(option, state, visualType)
+                    || has(option.target, state, visualType);
+            }, this);
+
+            !exists && each$1(this.stateList, function (state) {
+                (option[state] || (option[state] = {}))[visualType] = visualDefault.get(
+                    visualType, state === 'inRange' ? 'active' : 'inactive', isCategory
+                );
+            });
+        }, this);
+
+        function has(obj, state, visualType) {
+            return obj && obj[state] && (
+                isObject$1(obj[state])
+                    ? obj[state].hasOwnProperty(visualType)
+                    : obj[state] === visualType // e.g., inRange: 'symbol'
+            );
+        }
+
+        VisualMapModel.prototype.completeVisualOption.apply(this, arguments);
+    },
+
+    _resetSelected: function (newOption, isInit) {
+        var thisOption = this.option;
+        var pieceList = this._pieceList;
+
+        // Selected do not merge but all override.
+        var selected = (isInit ? thisOption : newOption).selected || {};
+        thisOption.selected = selected;
+
+        // Consider 'not specified' means true.
+        each$1(pieceList, function (piece, index) {
+            var key = this.getSelectedMapKey(piece);
+            if (!selected.hasOwnProperty(key)) {
+                selected[key] = true;
+            }
+        }, this);
+
+        if (thisOption.selectedMode === 'single') {
+            // Ensure there is only one selected.
+            var hasSel = false;
+
+            each$1(pieceList, function (piece, index) {
+                var key = this.getSelectedMapKey(piece);
+                if (selected[key]) {
+                    hasSel
+                        ? (selected[key] = false)
+                        : (hasSel = true);
+                }
+            }, this);
+        }
+        // thisOption.selectedMode === 'multiple', default: all selected.
+    },
+
+    /**
+     * @public
+     */
+    getSelectedMapKey: function (piece) {
+        return this._mode === 'categories'
+            ? piece.value + '' : piece.index + '';
+    },
+
+    /**
+     * @public
+     */
+    getPieceList: function () {
+        return this._pieceList;
+    },
+
+    /**
+     * @private
+     * @return {string}
+     */
+    _determineMode: function () {
+        var option = this.option;
+
+        return option.pieces && option.pieces.length > 0
+            ? 'pieces'
+            : this.option.categories
+            ? 'categories'
+            : 'splitNumber';
+    },
+
+    /**
+     * @public
+     * @override
+     */
+    setSelected: function (selected) {
+        this.option.selected = clone(selected);
+    },
+
+    /**
+     * @public
+     * @override
+     */
+    getValueState: function (value) {
+        var index = VisualMapping.findPieceIndex(value, this._pieceList);
+
+        return index != null
+            ? (this.option.selected[this.getSelectedMapKey(this._pieceList[index])]
+                ? 'inRange' : 'outOfRange'
+            )
+            : 'outOfRange';
+    },
+
+    /**
+     * @public
+     * @params {number} pieceIndex piece index in visualMapModel.getPieceList()
+     * @return {Array.<Object>} [{seriesId, dataIndices: <Array.<number>>}, ...]
+     */
+    findTargetDataIndices: function (pieceIndex) {
+        var result = [];
+
+        this.eachTargetSeries(function (seriesModel) {
+            var dataIndices = [];
+            var data = seriesModel.getData();
+
+            data.each(this.getDataDimension(data), function (value, dataIndex) {
+                // Should always base on model pieceList, because it is order sensitive.
+                var pIdx = VisualMapping.findPieceIndex(value, this._pieceList);
+                pIdx === pieceIndex && dataIndices.push(dataIndex);
+            }, this);
+
+            result.push({seriesId: seriesModel.id, dataIndex: dataIndices});
+        }, this);
+
+        return result;
+    },
+
+    /**
+     * @private
+     * @param {Object} piece piece.value or piece.interval is required.
+     * @return {number} Can be Infinity or -Infinity
+     */
+    getRepresentValue: function (piece) {
+        var representValue;
+        if (this.isCategory()) {
+            representValue = piece.value;
+        }
+        else {
+            if (piece.value != null) {
+                representValue = piece.value;
+            }
+            else {
+                var pieceInterval = piece.interval || [];
+                representValue = (pieceInterval[0] === -Infinity && pieceInterval[1] === Infinity)
+                    ? 0
+                    : (pieceInterval[0] + pieceInterval[1]) / 2;
+            }
+        }
+        return representValue;
+    },
+
+    getVisualMeta: function (getColorVisual) {
+        // Do not support category. (category axis is ordinal, numerical)
+        if (this.isCategory()) {
+            return;
+        }
+
+        var stops = [];
+        var outerColors = [];
+        var visualMapModel = this;
+
+        function setStop(interval, valueState) {
+            var representValue = visualMapModel.getRepresentValue({interval: interval});
+            if (!valueState) {
+                valueState = visualMapModel.getValueState(representValue);
+            }
+            var color = getColorVisual(representValue, valueState);
+            if (interval[0] === -Infinity) {
+                outerColors[0] = color;
+            }
+            else if (interval[1] === Infinity) {
+                outerColors[1] = color;
+            }
+            else {
+                stops.push(
+                    {value: interval[0], color: color},
+                    {value: interval[1], color: color}
+                );
+            }
+        }
+
+        // Suplement
+        var pieceList = this._pieceList.slice();
+        if (!pieceList.length) {
+            pieceList.push({interval: [-Infinity, Infinity]});
+        }
+        else {
+            var edge = pieceList[0].interval[0];
+            edge !== -Infinity && pieceList.unshift({interval: [-Infinity, edge]});
+            edge = pieceList[pieceList.length - 1].interval[1];
+            edge !== Infinity && pieceList.push({interval: [edge, Infinity]});
+        }
+
+        var curr = -Infinity;
+        each$1(pieceList, function (piece) {
+            var interval = piece.interval;
+            if (interval) {
+                // Fulfill gap.
+                interval[0] > curr && setStop([curr, interval[0]], 'outOfRange');
+                setStop(interval.slice());
+                curr = interval[1];
+            }
+        }, this);
+
+        return {stops: stops, outerColors: outerColors};
+    }
+
+});
+
+/**
+ * Key is this._mode
+ * @type {Object}
+ * @this {module:echarts/component/viusalMap/PiecewiseMode}
+ */
+var resetMethods = {
+
+    splitNumber: function () {
+        var thisOption = this.option;
+        var pieceList = this._pieceList;
+        var precision = Math.min(thisOption.precision, 20);
+        var dataExtent = this.getExtent();
+        var splitNumber = thisOption.splitNumber;
+        splitNumber = Math.max(parseInt(splitNumber, 10), 1);
+        thisOption.splitNumber = splitNumber;
+
+        var splitStep = (dataExtent[1] - dataExtent[0]) / splitNumber;
+        // Precision auto-adaption
+        while (+splitStep.toFixed(precision) !== splitStep && precision < 5) {
+            precision++;
+        }
+        thisOption.precision = precision;
+        splitStep = +splitStep.toFixed(precision);
+
+        var index = 0;
+
+        if (thisOption.minOpen) {
+            pieceList.push({
+                index: index++,
+                interval: [-Infinity, dataExtent[0]],
+                close: [0, 0]
+            });
+        }
+
+        for (
+            var curr = dataExtent[0], len = index + splitNumber;
+            index < len;
+            curr += splitStep
+        ) {
+            var max = index === splitNumber - 1 ? dataExtent[1] : (curr + splitStep);
+
+            pieceList.push({
+                index: index++,
+                interval: [curr, max],
+                close: [1, 1]
+            });
+        }
+
+        if (thisOption.maxOpen) {
+            pieceList.push({
+                index: index++,
+                interval: [dataExtent[1], Infinity],
+                close: [0, 0]
+            });
+        }
+
+        reformIntervals(pieceList);
+
+        each$1(pieceList, function (piece) {
+            piece.text = this.formatValueText(piece.interval);
+        }, this);
+    },
+
+    categories: function () {
+        var thisOption = this.option;
+        each$1(thisOption.categories, function (cate) {
+            // FIXME categoryæ¨¡å¼ä¹Ÿä½¿ç”¨pieceListï¼Œä½†åœ¨visualMappingä¸ä¸æ˜¯ä½¿ç”¨pieceListã€‚
+            // æ˜¯å¦æ”¹ä¸€è‡´ã€‚
+            this._pieceList.push({
+                text: this.formatValueText(cate, true),
+                value: cate
+            });
+        }, this);
+
+        // See "Order Rule".
+        normalizeReverse(thisOption, this._pieceList);
+    },
+
+    pieces: function () {
+        var thisOption = this.option;
+        var pieceList = this._pieceList;
+
+        each$1(thisOption.pieces, function (pieceListItem, index) {
+
+            if (!isObject$1(pieceListItem)) {
+                pieceListItem = {value: pieceListItem};
+            }
+
+            var item = {text: '', index: index};
+
+            if (pieceListItem.label != null) {
+                item.text = pieceListItem.label;
+            }
+
+            if (pieceListItem.hasOwnProperty('value')) {
+                var value = item.value = pieceListItem.value;
+                item.interval = [value, value];
+                item.close = [1, 1];
+            }
+            else {
+                // `min` `max` is legacy option.
+                // `lt` `gt` `lte` `gte` is recommanded.
+                var interval = item.interval = [];
+                var close = item.close = [0, 0];
+
+                var closeList = [1, 0, 1];
+                var infinityList = [-Infinity, Infinity];
+
+                var useMinMax = [];
+                for (var lg = 0; lg < 2; lg++) {
+                    var names = [['gte', 'gt', 'min'], ['lte', 'lt', 'max']][lg];
+                    for (var i = 0; i < 3 && interval[lg] == null; i++) {
+                        interval[lg] = pieceListItem[names[i]];
+                        close[lg] = closeList[i];
+                        useMinMax[lg] = i === 2;
+                    }
+                    interval[lg] == null && (interval[lg] = infinityList[lg]);
+                }
+                useMinMax[0] && interval[1] === Infinity && (close[0] = 0);
+                useMinMax[1] && interval[0] === -Infinity && (close[1] = 0);
+
+                if (__DEV__) {
+                    if (interval[0] > interval[1]) {
+                        console.warn(
+                            'Piece ' + index + 'is illegal: ' + interval
+                            + ' lower bound should not greater then uppper bound.'
+                        );
+                    }
+                }
+
+                if (interval[0] === interval[1] && close[0] && close[1]) {
+                    // Consider: [{min: 5, max: 5, visual: {...}}, {min: 0, max: 5}],
+                    // we use value to lift the priority when min === max
+                    item.value = interval[0];
+                }
+            }
+
+            item.visual = VisualMapping.retrieveVisuals(pieceListItem);
+
+            pieceList.push(item);
+
+        }, this);
+
+        // See "Order Rule".
+        normalizeReverse(thisOption, pieceList);
+        // Only pieces
+        reformIntervals(pieceList);
+
+        each$1(pieceList, function (piece) {
+            var close = piece.close;
+            var edgeSymbols = [['<', 'â‰¤'][close[1]], ['>', 'â‰¥'][close[0]]];
+            piece.text = piece.text || this.formatValueText(
+                piece.value != null ? piece.value : piece.interval,
+                false,
+                edgeSymbols
+            );
+        }, this);
+    }
+};
+
+function normalizeReverse(thisOption, pieceList) {
+    var inverse = thisOption.inverse;
+    if (thisOption.orient === 'vertical' ? !inverse : inverse) {
+            pieceList.reverse();
+    }
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var PiecewiseVisualMapView = VisualMapView.extend({
+
+    type: 'visualMap.piecewise',
+
+    /**
+     * @protected
+     * @override
+     */
+    doRender: function () {
+        var thisGroup = this.group;
+
+        thisGroup.removeAll();
+
+        var visualMapModel = this.visualMapModel;
+        var textGap = visualMapModel.get('textGap');
+        var textStyleModel = visualMapModel.textStyleModel;
+        var textFont = textStyleModel.getFont();
+        var textFill = textStyleModel.getTextColor();
+        var itemAlign = this._getItemAlign();
+        var itemSize = visualMapModel.itemSize;
+        var viewData = this._getViewData();
+        var endsText = viewData.endsText;
+        var showLabel = retrieve(visualMapModel.get('showLabel', true), !endsText);
+
+        endsText && this._renderEndsText(
+            thisGroup, endsText[0], itemSize, showLabel, itemAlign
+        );
+
+        each$1(viewData.viewPieceList, renderItem, this);
+
+        endsText && this._renderEndsText(
+            thisGroup, endsText[1], itemSize, showLabel, itemAlign
+        );
+
+        box(
+            visualMapModel.get('orient'), thisGroup, visualMapModel.get('itemGap')
+        );
+
+        this.renderBackground(thisGroup);
+
+        this.positionGroup(thisGroup);
+
+        function renderItem(item) {
+            var piece = item.piece;
+
+            var itemGroup = new Group();
+            itemGroup.onclick = bind(this._onItemClick, this, piece);
+
+            this._enableHoverLink(itemGroup, item.indexInModelPieceList);
+
+            var representValue = visualMapModel.getRepresentValue(piece);
+
+            this._createItemSymbol(
+                itemGroup, representValue, [0, 0, itemSize[0], itemSize[1]]
+            );
+
+            if (showLabel) {
+                var visualState = this.visualMapModel.getValueState(representValue);
+
+                itemGroup.add(new Text({
+                    style: {
+                        x: itemAlign === 'right' ? -textGap : itemSize[0] + textGap,
+                        y: itemSize[1] / 2,
+                        text: piece.text,
+                        textVerticalAlign: 'middle',
+                        textAlign: itemAlign,
+                        textFont: textFont,
+                        textFill: textFill,
+                        opacity: visualState === 'outOfRange' ? 0.5 : 1
+                    }
+                }));
+            }
+
+            thisGroup.add(itemGroup);
+        }
+    },
+
+    /**
+     * @private
+     */
+    _enableHoverLink: function (itemGroup, pieceIndex) {
+        itemGroup
+            .on('mouseover', bind(onHoverLink, this, 'highlight'))
+            .on('mouseout', bind(onHoverLink, this, 'downplay'));
+
+        function onHoverLink(method) {
+            var visualMapModel = this.visualMapModel;
+
+            visualMapModel.option.hoverLink && this.api.dispatchAction({
+                type: method,
+                batch: convertDataIndex(
+                    visualMapModel.findTargetDataIndices(pieceIndex)
+                )
+            });
+        }
+    },
+
+    /**
+     * @private
+     */
+    _getItemAlign: function () {
+        var visualMapModel = this.visualMapModel;
+        var modelOption = visualMapModel.option;
+
+        if (modelOption.orient === 'vertical') {
+            return getItemAlign(
+                visualMapModel, this.api, visualMapModel.itemSize
+            );
+        }
+        else { // horizontal, most case left unless specifying right.
+            var align = modelOption.align;
+            if (!align || align === 'auto') {
+                align = 'left';
+            }
+            return align;
+        }
+    },
+
+    /**
+     * @private
+     */
+    _renderEndsText: function (group, text, itemSize, showLabel, itemAlign) {
+        if (!text) {
+            return;
+        }
+
+        var itemGroup = new Group();
+        var textStyleModel = this.visualMapModel.textStyleModel;
+
+        itemGroup.add(new Text({
+            style: {
+                x: showLabel ? (itemAlign === 'right' ? itemSize[0] : 0) : itemSize[0] / 2,
+                y: itemSize[1] / 2,
+                textVerticalAlign: 'middle',
+                textAlign: showLabel ? itemAlign : 'center',
+                text: text,
+                textFont: textStyleModel.getFont(),
+                textFill: textStyleModel.getTextColor()
+            }
+        }));
+
+        group.add(itemGroup);
+    },
+
+    /**
+     * @private
+     * @return {Object} {peiceList, endsText} The order is the same as screen pixel order.
+     */
+    _getViewData: function () {
+        var visualMapModel = this.visualMapModel;
+
+        var viewPieceList = map(visualMapModel.getPieceList(), function (piece, index) {
+            return {piece: piece, indexInModelPieceList: index};
+        });
+        var endsText = visualMapModel.get('text');
+
+        // Consider orient and inverse.
+        var orient = visualMapModel.get('orient');
+        var inverse = visualMapModel.get('inverse');
+
+        // Order of model pieceList is always [low, ..., high]
+        if (orient === 'horizontal' ? inverse : !inverse) {
+            viewPieceList.reverse();
+        }
+        // Origin order of endsText is [high, low]
+        else if (endsText) {
+            endsText = endsText.slice().reverse();
+        }
+
+        return {viewPieceList: viewPieceList, endsText: endsText};
+    },
+
+    /**
+     * @private
+     */
+    _createItemSymbol: function (group, representValue, shapeParam) {
+        group.add(createSymbol(
+            this.getControllerVisual(representValue, 'symbol'),
+            shapeParam[0], shapeParam[1], shapeParam[2], shapeParam[3],
+            this.getControllerVisual(representValue, 'color')
+        ));
+    },
+
+    /**
+     * @private
+     */
+    _onItemClick: function (piece) {
+        var visualMapModel = this.visualMapModel;
+        var option = visualMapModel.option;
+        var selected = clone(option.selected);
+        var newKey = visualMapModel.getSelectedMapKey(piece);
+
+        if (option.selectedMode === 'single') {
+            selected[newKey] = true;
+            each$1(selected, function (o, key) {
+                selected[key] = key === newKey;
+            });
+        }
+        else {
+            selected[newKey] = !selected[newKey];
+        }
+
+        this.api.dispatchAction({
+            type: 'selectDataRange',
+            from: this.uid,
+            visualMapId: this.visualMapModel.id,
+            selected: selected
+        });
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * DataZoom component entry
+ */
+
+registerPreprocessor(preprocessor$2);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * visualMap component entry
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var addCommas$1 = addCommas;
+var encodeHTML$1 = encodeHTML;
+
+function fillLabel(opt) {
+    defaultEmphasis(opt, 'label', ['show']);
+}
+var MarkerModel = extendComponentModel({
+
+    type: 'marker',
+
+    dependencies: ['series', 'grid', 'polar', 'geo'],
+
+    /**
+     * @overrite
+     */
+    init: function (option, parentModel, ecModel, extraOpt) {
+
+        if (__DEV__) {
+            if (this.type === 'marker') {
+                throw new Error('Marker component is abstract component. Use markLine, markPoint, markArea instead.');
+            }
+        }
+        this.mergeDefaultAndTheme(option, ecModel);
+        this.mergeOption(option, ecModel, extraOpt.createdBySelf, true);
+    },
+
+    /**
+     * @return {boolean}
+     */
+    isAnimationEnabled: function () {
+        if (env$1.node) {
+            return false;
+        }
+
+        var hostSeries = this.__hostSeries;
+        return this.getShallow('animation') && hostSeries && hostSeries.isAnimationEnabled();
+    },
+
+    mergeOption: function (newOpt, ecModel, createdBySelf, isInit) {
+        var MarkerModel = this.constructor;
+        var modelPropName = this.mainType + 'Model';
+        if (!createdBySelf) {
+            ecModel.eachSeries(function (seriesModel) {
+
+                var markerOpt = seriesModel.get(this.mainType, true);
+
+                var markerModel = seriesModel[modelPropName];
+                if (!markerOpt || !markerOpt.data) {
+                    seriesModel[modelPropName] = null;
+                    return;
+                }
+                if (!markerModel) {
+                    if (isInit) {
+                        // Default label emphasis `position` and `show`
+                        fillLabel(markerOpt);
+                    }
+                    each$1(markerOpt.data, function (item) {
+                        // FIXME Overwrite fillLabel method ?
+                        if (item instanceof Array) {
+                            fillLabel(item[0]);
+                            fillLabel(item[1]);
+                        }
+                        else {
+                            fillLabel(item);
+                        }
+                    });
+
+                    markerModel = new MarkerModel(
+                        markerOpt, this, ecModel
+                    );
+
+                    extend(markerModel, {
+                        mainType: this.mainType,
+                        // Use the same series index and name
+                        seriesIndex: seriesModel.seriesIndex,
+                        name: seriesModel.name,
+                        createdBySelf: true
+                    });
+
+                    markerModel.__hostSeries = seriesModel;
+                }
+                else {
+                    markerModel.mergeOption(markerOpt, ecModel, true);
+                }
+                seriesModel[modelPropName] = markerModel;
+            }, this);
+        }
+    },
+
+    formatTooltip: function (dataIndex) {
+        var data = this.getData();
+        var value = this.getRawValue(dataIndex);
+        var formattedValue = isArray(value)
+            ? map(value, addCommas$1).join(', ') : addCommas$1(value);
+        var name = data.getName(dataIndex);
+        var html = encodeHTML$1(this.name);
+        if (value != null || name) {
+            html += '<br />';
+        }
+        if (name) {
+            html += encodeHTML$1(name);
+            if (value != null) {
+                html += ' : ';
+            }
+        }
+        if (value != null) {
+            html += encodeHTML$1(formattedValue);
+        }
+        return html;
+    },
+
+    getData: function () {
+        return this._data;
+    },
+
+    setData: function (data) {
+        this._data = data;
+    }
+});
+
+mixin(MarkerModel, dataFormatMixin);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+MarkerModel.extend({
+
+    type: 'markPoint',
+
+    defaultOption: {
+        zlevel: 0,
+        z: 5,
+        symbol: 'pin',
+        symbolSize: 50,
+        //symbolRotate: 0,
+        //symbolOffset: [0, 0]
+        tooltip: {
+            trigger: 'item'
+        },
+        label: {
+            show: true,
+            position: 'inside'
+        },
+        itemStyle: {
+            borderWidth: 2
+        },
+        emphasis: {
+            label: {
+                show: true
+            }
+        }
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var indexOf$2 = indexOf;
+
+function hasXOrY(item) {
+    return !(isNaN(parseFloat(item.x)) && isNaN(parseFloat(item.y)));
+}
+
+function hasXAndY(item) {
+    return !isNaN(parseFloat(item.x)) && !isNaN(parseFloat(item.y));
+}
+
+// Make it simple, do not visit all stacked value to count precision.
+// function getPrecision(data, valueAxisDim, dataIndex) {
+//     var precision = -1;
+//     var stackedDim = data.mapDimension(valueAxisDim);
+//     do {
+//         precision = Math.max(
+//             numberUtil.getPrecision(data.get(stackedDim, dataIndex)),
+//             precision
+//         );
+//         var stackedOnSeries = data.getCalculationInfo('stackedOnSeries');
+//         if (stackedOnSeries) {
+//             var byValue = data.get(data.getCalculationInfo('stackedByDimension'), dataIndex);
+//             data = stackedOnSeries.getData();
+//             dataIndex = data.indexOf(data.getCalculationInfo('stackedByDimension'), byValue);
+//             stackedDim = data.getCalculationInfo('stackedDimension');
+//         }
+//         else {
+//             data = null;
+//         }
+//     } while (data);
+
+//     return precision;
+// }
+
+function markerTypeCalculatorWithExtent(
+    mlType, data, otherDataDim, targetDataDim, otherCoordIndex, targetCoordIndex
+) {
+    var coordArr = [];
+
+    var stacked = isDimensionStacked(data, targetDataDim /*, otherDataDim*/);
+    var calcDataDim = stacked
+        ? data.getCalculationInfo('stackResultDimension')
+        : targetDataDim;
+
+    var value = numCalculate(data, calcDataDim, mlType);
+
+    var dataIndex = data.indicesOfNearest(calcDataDim, value)[0];
+    coordArr[otherCoordIndex] = data.get(otherDataDim, dataIndex);
+    coordArr[targetCoordIndex] = data.get(targetDataDim, dataIndex);
+
+    // Make it simple, do not visit all stacked value to count precision.
+    var precision = getPrecision(data.get(targetDataDim, dataIndex));
+    precision = Math.min(precision, 20);
+    if (precision >= 0) {
+        coordArr[targetCoordIndex] = +coordArr[targetCoordIndex].toFixed(precision);
+    }
+
+    return coordArr;
+}
+
+var curry$7 = curry;
+// TODO Specified percent
+var markerTypeCalculator = {
+    /**
+     * @method
+     * @param {module:echarts/data/List} data
+     * @param {string} baseAxisDim
+     * @param {string} valueAxisDim
+     */
+    min: curry$7(markerTypeCalculatorWithExtent, 'min'),
+    /**
+     * @method
+     * @param {module:echarts/data/List} data
+     * @param {string} baseAxisDim
+     * @param {string} valueAxisDim
+     */
+    max: curry$7(markerTypeCalculatorWithExtent, 'max'),
+
+    /**
+     * @method
+     * @param {module:echarts/data/List} data
+     * @param {string} baseAxisDim
+     * @param {string} valueAxisDim
+     */
+    average: curry$7(markerTypeCalculatorWithExtent, 'average')
+};
+
+/**
+ * Transform markPoint data item to format used in List by do the following
+ * 1. Calculate statistic like `max`, `min`, `average`
+ * 2. Convert `item.xAxis`, `item.yAxis` to `item.coord` array
+ * @param  {module:echarts/model/Series} seriesModel
+ * @param  {module:echarts/coord/*} [coordSys]
+ * @param  {Object} item
+ * @return {Object}
+ */
+function dataTransform(seriesModel, item) {
+    var data = seriesModel.getData();
+    var coordSys = seriesModel.coordinateSystem;
+
+    // 1. If not specify the position with pixel directly
+    // 2. If `coord` is not a data array. Which uses `xAxis`,
+    // `yAxis` to specify the coord on each dimension
+
+    // parseFloat first because item.x and item.y can be percent string like '20%'
+    if (item && !hasXAndY(item) && !isArray(item.coord) && coordSys) {
+        var dims = coordSys.dimensions;
+        var axisInfo = getAxisInfo$1(item, data, coordSys, seriesModel);
+
+        // Clone the option
+        // Transform the properties xAxis, yAxis, radiusAxis, angleAxis, geoCoord to value
+        item = clone(item);
+
+        if (item.type
+            && markerTypeCalculator[item.type]
+            && axisInfo.baseAxis && axisInfo.valueAxis
+        ) {
+            var otherCoordIndex = indexOf$2(dims, axisInfo.baseAxis.dim);
+            var targetCoordIndex = indexOf$2(dims, axisInfo.valueAxis.dim);
+
+            item.coord = markerTypeCalculator[item.type](
+                data, axisInfo.baseDataDim, axisInfo.valueDataDim,
+                otherCoordIndex, targetCoordIndex
+            );
+            // Force to use the value of calculated value.
+            item.value = item.coord[targetCoordIndex];
+        }
+        else {
+            // FIXME Only has one of xAxis and yAxis.
+            var coord = [
+                item.xAxis != null ? item.xAxis : item.radiusAxis,
+                item.yAxis != null ? item.yAxis : item.angleAxis
+            ];
+            // Each coord support max, min, average
+            for (var i = 0; i < 2; i++) {
+                if (markerTypeCalculator[coord[i]]) {
+                    coord[i] = numCalculate(data, data.mapDimension(dims[i]), coord[i]);
+                }
+            }
+            item.coord = coord;
+        }
+    }
+    return item;
+}
+
+function getAxisInfo$1(item, data, coordSys, seriesModel) {
+    var ret = {};
+
+    if (item.valueIndex != null || item.valueDim != null) {
+        ret.valueDataDim = item.valueIndex != null
+            ? data.getDimension(item.valueIndex) : item.valueDim;
+        ret.valueAxis = coordSys.getAxis(dataDimToCoordDim(seriesModel, ret.valueDataDim));
+        ret.baseAxis = coordSys.getOtherAxis(ret.valueAxis);
+        ret.baseDataDim = data.mapDimension(ret.baseAxis.dim);
+    }
+    else {
+        ret.baseAxis = seriesModel.getBaseAxis();
+        ret.valueAxis = coordSys.getOtherAxis(ret.baseAxis);
+        ret.baseDataDim = data.mapDimension(ret.baseAxis.dim);
+        ret.valueDataDim = data.mapDimension(ret.valueAxis.dim);
+    }
+
+    return ret;
+}
+
+function dataDimToCoordDim(seriesModel, dataDim) {
+    var data = seriesModel.getData();
+    var dimensions = data.dimensions;
+    dataDim = data.getDimension(dataDim);
+    for (var i = 0; i < dimensions.length; i++) {
+        var dimItem = data.getDimensionInfo(dimensions[i]);
+        if (dimItem.name === dataDim) {
+            return dimItem.coordDim;
+        }
+    }
+}
+
+/**
+ * Filter data which is out of coordinateSystem range
+ * [dataFilter description]
+ * @param  {module:echarts/coord/*} [coordSys]
+ * @param  {Object} item
+ * @return {boolean}
+ */
+function dataFilter$1(coordSys, item) {
+    // Alwalys return true if there is no coordSys
+    return (coordSys && coordSys.containData && item.coord && !hasXOrY(item))
+        ? coordSys.containData(item.coord) : true;
+}
+
+function dimValueGetter(item, dimName, dataIndex, dimIndex) {
+    // x, y, radius, angle
+    if (dimIndex < 2) {
+        return item.coord && item.coord[dimIndex];
+    }
+    return item.value;
+}
+
+function numCalculate(data, valueDataDim, type) {
+    if (type === 'average') {
+        var sum = 0;
+        var count = 0;
+        data.each(valueDataDim, function (val, idx) {
+            if (!isNaN(val)) {
+                sum += val;
+                count++;
+            }
+        });
+        return sum / count;
+    }
+    else if (type === 'median') {
+        return data.getMedian(valueDataDim);
+    }
+    else {
+        // max & min
+        return data.getDataExtent(valueDataDim, true)[type === 'max' ? 1 : 0];
+    }
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var MarkerView = extendComponentView({
+
+    type: 'marker',
+
+    init: function () {
+        /**
+         * Markline grouped by series
+         * @private
+         * @type {module:zrender/core/util.HashMap}
+         */
+        this.markerGroupMap = createHashMap();
+    },
+
+    render: function (markerModel, ecModel, api) {
+        var markerGroupMap = this.markerGroupMap;
+        markerGroupMap.each(function (item) {
+            item.__keep = false;
+        });
+
+        var markerModelKey = this.type + 'Model';
+        ecModel.eachSeries(function (seriesModel) {
+            var markerModel = seriesModel[markerModelKey];
+            markerModel && this.renderSeries(seriesModel, markerModel, ecModel, api);
+        }, this);
+
+        markerGroupMap.each(function (item) {
+            !item.__keep && this.group.remove(item.group);
+        }, this);
+    },
+
+    renderSeries: function () {}
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+function updateMarkerLayout(mpData, seriesModel, api) {
+    var coordSys = seriesModel.coordinateSystem;
+    mpData.each(function (idx) {
+        var itemModel = mpData.getItemModel(idx);
+        var point;
+        var xPx = parsePercent$1(itemModel.get('x'), api.getWidth());
+        var yPx = parsePercent$1(itemModel.get('y'), api.getHeight());
+        if (!isNaN(xPx) && !isNaN(yPx)) {
+            point = [xPx, yPx];
+        }
+        // Chart like bar may have there own marker positioning logic
+        else if (seriesModel.getMarkerPosition) {
+            // Use the getMarkerPoisition
+            point = seriesModel.getMarkerPosition(
+                mpData.getValues(mpData.dimensions, idx)
+            );
+        }
+        else if (coordSys) {
+            var x = mpData.get(coordSys.dimensions[0], idx);
+            var y = mpData.get(coordSys.dimensions[1], idx);
+            point = coordSys.dataToPoint([x, y]);
+
+        }
+
+        // Use x, y if has any
+        if (!isNaN(xPx)) {
+            point[0] = xPx;
+        }
+        if (!isNaN(yPx)) {
+            point[1] = yPx;
+        }
+
+        mpData.setItemLayout(idx, point);
+    });
+}
+
+MarkerView.extend({
+
+    type: 'markPoint',
+
+    // updateLayout: function (markPointModel, ecModel, api) {
+    //     ecModel.eachSeries(function (seriesModel) {
+    //         var mpModel = seriesModel.markPointModel;
+    //         if (mpModel) {
+    //             updateMarkerLayout(mpModel.getData(), seriesModel, api);
+    //             this.markerGroupMap.get(seriesModel.id).updateLayout(mpModel);
+    //         }
+    //     }, this);
+    // },
+
+    updateTransform: function (markPointModel, ecModel, api) {
+        ecModel.eachSeries(function (seriesModel) {
+            var mpModel = seriesModel.markPointModel;
+            if (mpModel) {
+                updateMarkerLayout(mpModel.getData(), seriesModel, api);
+                this.markerGroupMap.get(seriesModel.id).updateLayout(mpModel);
+            }
+        }, this);
+    },
+
+    renderSeries: function (seriesModel, mpModel, ecModel, api) {
+        var coordSys = seriesModel.coordinateSystem;
+        var seriesId = seriesModel.id;
+        var seriesData = seriesModel.getData();
+
+        var symbolDrawMap = this.markerGroupMap;
+        var symbolDraw = symbolDrawMap.get(seriesId)
+            || symbolDrawMap.set(seriesId, new SymbolDraw());
+
+        var mpData = createList$1(coordSys, seriesModel, mpModel);
+
+        // FIXME
+        mpModel.setData(mpData);
+
+        updateMarkerLayout(mpModel.getData(), seriesModel, api);
+
+        mpData.each(function (idx) {
+            var itemModel = mpData.getItemModel(idx);
+            var symbolSize = itemModel.getShallow('symbolSize');
+            if (typeof symbolSize === 'function') {
+                // FIXME è¿™é‡Œä¸å…¼å®¹ ECharts 2.xï¼Œ2.x è²Œä¼¼å‚æ•°æ˜¯æ•´ä¸ªæ•°æ®ï¼Ÿ
+                symbolSize = symbolSize(
+                    mpModel.getRawValue(idx), mpModel.getDataParams(idx)
+                );
+            }
+            mpData.setItemVisual(idx, {
+                symbolSize: symbolSize,
+                color: itemModel.get('itemStyle.color')
+                    || seriesData.getVisual('color'),
+                symbol: itemModel.getShallow('symbol')
+            });
+        });
+
+        // TODO Text are wrong
+        symbolDraw.updateData(mpData);
+        this.group.add(symbolDraw.group);
+
+        // Set host model for tooltip
+        // FIXME
+        mpData.eachItemGraphicEl(function (el) {
+            el.traverse(function (child) {
+                child.dataModel = mpModel;
+            });
+        });
+
+        symbolDraw.__keep = true;
+
+        symbolDraw.group.silent = mpModel.get('silent') || seriesModel.get('silent');
+    }
+});
+
+/**
+ * @inner
+ * @param {module:echarts/coord/*} [coordSys]
+ * @param {module:echarts/model/Series} seriesModel
+ * @param {module:echarts/model/Model} mpModel
+ */
+function createList$1(coordSys, seriesModel, mpModel) {
+    var coordDimsInfos;
+    if (coordSys) {
+        coordDimsInfos = map(coordSys && coordSys.dimensions, function (coordDim) {
+            var info = seriesModel.getData().getDimensionInfo(
+                seriesModel.getData().mapDimension(coordDim)
+            ) || {};
+            // In map series data don't have lng and lat dimension. Fallback to same with coordSys
+            return defaults({name: coordDim}, info);
+        });
+    }
+    else {
+        coordDimsInfos =[{
+            name: 'value',
+            type: 'float'
+        }];
+    }
+
+    var mpData = new List(coordDimsInfos, mpModel);
+    var dataOpt = map(mpModel.get('data'), curry(
+            dataTransform, seriesModel
+        ));
+    if (coordSys) {
+        dataOpt = filter(
+            dataOpt, curry(dataFilter$1, coordSys)
+        );
+    }
+
+    mpData.initData(dataOpt, null,
+        coordSys ? dimValueGetter : function (item) {
+            return item.value;
+        }
+    );
+
+    return mpData;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// HINT Markpoint can't be used too much
+registerPreprocessor(function (opt) {
+    // Make sure markPoint component is enabled
+    opt.markPoint = opt.markPoint || {};
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+MarkerModel.extend({
+
+    type: 'markLine',
+
+    defaultOption: {
+        zlevel: 0,
+        z: 5,
+
+        symbol: ['circle', 'arrow'],
+        symbolSize: [8, 16],
+
+        //symbolRotate: 0,
+
+        precision: 2,
+        tooltip: {
+            trigger: 'item'
+        },
+        label: {
+            show: true,
+            position: 'end'
+        },
+        lineStyle: {
+            type: 'dashed'
+        },
+        emphasis: {
+            label: {
+                show: true
+            },
+            lineStyle: {
+                width: 3
+            }
+        },
+        animationEasing: 'linear'
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var markLineTransform = function (seriesModel, coordSys, mlModel, item) {
+    var data = seriesModel.getData();
+    // Special type markLine like 'min', 'max', 'average', 'median'
+    var mlType = item.type;
+
+    if (!isArray(item)
+        && (
+            mlType === 'min' || mlType === 'max' || mlType === 'average' || mlType === 'median'
+            // In case
+            // data: [{
+            //   yAxis: 10
+            // }]
+            || (item.xAxis != null || item.yAxis != null)
+        )
+    ) {
+        var valueAxis;
+        var valueDataDim;
+        var value;
+
+        if (item.yAxis != null || item.xAxis != null) {
+            valueDataDim = item.yAxis != null ? 'y' : 'x';
+            valueAxis = coordSys.getAxis(valueDataDim);
+
+            value = retrieve(item.yAxis, item.xAxis);
+        }
+        else {
+            var axisInfo = getAxisInfo$1(item, data, coordSys, seriesModel);
+            valueDataDim = axisInfo.valueDataDim;
+            valueAxis = axisInfo.valueAxis;
+            value = numCalculate(data, valueDataDim, mlType);
+        }
+        var valueIndex = valueDataDim === 'x' ? 0 : 1;
+        var baseIndex = 1 - valueIndex;
+
+        var mlFrom = clone(item);
+        var mlTo = {};
+
+        mlFrom.type = null;
+
+        mlFrom.coord = [];
+        mlTo.coord = [];
+        mlFrom.coord[baseIndex] = -Infinity;
+        mlTo.coord[baseIndex] = Infinity;
+
+        var precision = mlModel.get('precision');
+        if (precision >= 0 && typeof value === 'number') {
+            value = +value.toFixed(Math.min(precision, 20));
+        }
+
+        mlFrom.coord[valueIndex] = mlTo.coord[valueIndex] = value;
+
+        item = [mlFrom, mlTo, { // Extra option for tooltip and label
+            type: mlType,
+            valueIndex: item.valueIndex,
+            // Force to use the value of calculated value.
+            value: value
+        }];
+    }
+
+    item = [
+        dataTransform(seriesModel, item[0]),
+        dataTransform(seriesModel, item[1]),
+        extend({}, item[2])
+    ];
+
+    // Avoid line data type is extended by from(to) data type
+    item[2].type = item[2].type || '';
+
+    // Merge from option and to option into line option
+    merge(item[2], item[0]);
+    merge(item[2], item[1]);
+
+    return item;
+};
+
+function isInifinity(val) {
+    return !isNaN(val) && !isFinite(val);
+}
+
+// If a markLine has one dim
+function ifMarkLineHasOnlyDim(dimIndex, fromCoord, toCoord, coordSys) {
+    var otherDimIndex = 1 - dimIndex;
+    var dimName = coordSys.dimensions[dimIndex];
+    return isInifinity(fromCoord[otherDimIndex]) && isInifinity(toCoord[otherDimIndex])
+        && fromCoord[dimIndex] === toCoord[dimIndex] && coordSys.getAxis(dimName).containData(fromCoord[dimIndex]);
+}
+
+function markLineFilter(coordSys, item) {
+    if (coordSys.type === 'cartesian2d') {
+        var fromCoord = item[0].coord;
+        var toCoord = item[1].coord;
+        // In case
+        // {
+        //  markLine: {
+        //    data: [{ yAxis: 2 }]
+        //  }
+        // }
+        if (
+            fromCoord && toCoord &&
+            (ifMarkLineHasOnlyDim(1, fromCoord, toCoord, coordSys)
+            || ifMarkLineHasOnlyDim(0, fromCoord, toCoord, coordSys))
+        ) {
+            return true;
+        }
+    }
+    return dataFilter$1(coordSys, item[0])
+        && dataFilter$1(coordSys, item[1]);
+}
+
+function updateSingleMarkerEndLayout(
+    data, idx, isFrom, seriesModel, api
+) {
+    var coordSys = seriesModel.coordinateSystem;
+    var itemModel = data.getItemModel(idx);
+
+    var point;
+    var xPx = parsePercent$1(itemModel.get('x'), api.getWidth());
+    var yPx = parsePercent$1(itemModel.get('y'), api.getHeight());
+    if (!isNaN(xPx) && !isNaN(yPx)) {
+        point = [xPx, yPx];
+    }
+    else {
+        // Chart like bar may have there own marker positioning logic
+        if (seriesModel.getMarkerPosition) {
+            // Use the getMarkerPoisition
+            point = seriesModel.getMarkerPosition(
+                data.getValues(data.dimensions, idx)
+            );
+        }
+        else {
+            var dims = coordSys.dimensions;
+            var x = data.get(dims[0], idx);
+            var y = data.get(dims[1], idx);
+            point = coordSys.dataToPoint([x, y]);
+        }
+        // Expand line to the edge of grid if value on one axis is Inifnity
+        // In case
+        //  markLine: {
+        //    data: [{
+        //      yAxis: 2
+        //      // or
+        //      type: 'average'
+        //    }]
+        //  }
+        if (coordSys.type === 'cartesian2d') {
+            var xAxis = coordSys.getAxis('x');
+            var yAxis = coordSys.getAxis('y');
+            var dims = coordSys.dimensions;
+            if (isInifinity(data.get(dims[0], idx))) {
+                point[0] = xAxis.toGlobalCoord(xAxis.getExtent()[isFrom ? 0 : 1]);
+            }
+            else if (isInifinity(data.get(dims[1], idx))) {
+                point[1] = yAxis.toGlobalCoord(yAxis.getExtent()[isFrom ? 0 : 1]);
+            }
+        }
+
+        // Use x, y if has any
+        if (!isNaN(xPx)) {
+            point[0] = xPx;
+        }
+        if (!isNaN(yPx)) {
+            point[1] = yPx;
+        }
+    }
+
+    data.setItemLayout(idx, point);
+}
+
+MarkerView.extend({
+
+    type: 'markLine',
+
+    // updateLayout: function (markLineModel, ecModel, api) {
+    //     ecModel.eachSeries(function (seriesModel) {
+    //         var mlModel = seriesModel.markLineModel;
+    //         if (mlModel) {
+    //             var mlData = mlModel.getData();
+    //             var fromData = mlModel.__from;
+    //             var toData = mlModel.__to;
+    //             // Update visual and layout of from symbol and to symbol
+    //             fromData.each(function (idx) {
+    //                 updateSingleMarkerEndLayout(fromData, idx, true, seriesModel, api);
+    //                 updateSingleMarkerEndLayout(toData, idx, false, seriesModel, api);
+    //             });
+    //             // Update layout of line
+    //             mlData.each(function (idx) {
+    //                 mlData.setItemLayout(idx, [
+    //                     fromData.getItemLayout(idx),
+    //                     toData.getItemLayout(idx)
+    //                 ]);
+    //             });
+
+    //             this.markerGroupMap.get(seriesModel.id).updateLayout();
+
+    //         }
+    //     }, this);
+    // },
+
+    updateTransform: function (markLineModel, ecModel, api) {
+        ecModel.eachSeries(function (seriesModel) {
+            var mlModel = seriesModel.markLineModel;
+            if (mlModel) {
+                var mlData = mlModel.getData();
+                var fromData = mlModel.__from;
+                var toData = mlModel.__to;
+                // Update visual and layout of from symbol and to symbol
+                fromData.each(function (idx) {
+                    updateSingleMarkerEndLayout(fromData, idx, true, seriesModel, api);
+                    updateSingleMarkerEndLayout(toData, idx, false, seriesModel, api);
+                });
+                // Update layout of line
+                mlData.each(function (idx) {
+                    mlData.setItemLayout(idx, [
+                        fromData.getItemLayout(idx),
+                        toData.getItemLayout(idx)
+                    ]);
+                });
+
+                this.markerGroupMap.get(seriesModel.id).updateLayout();
+
+            }
+        }, this);
+    },
+
+    renderSeries: function (seriesModel, mlModel, ecModel, api) {
+        var coordSys = seriesModel.coordinateSystem;
+        var seriesId = seriesModel.id;
+        var seriesData = seriesModel.getData();
+
+        var lineDrawMap = this.markerGroupMap;
+        var lineDraw = lineDrawMap.get(seriesId)
+            || lineDrawMap.set(seriesId, new LineDraw());
+        this.group.add(lineDraw.group);
+
+        var mlData = createList$2(coordSys, seriesModel, mlModel);
+
+        var fromData = mlData.from;
+        var toData = mlData.to;
+        var lineData = mlData.line;
+
+        mlModel.__from = fromData;
+        mlModel.__to = toData;
+        // Line data for tooltip and formatter
+        mlModel.setData(lineData);
+
+        var symbolType = mlModel.get('symbol');
+        var symbolSize = mlModel.get('symbolSize');
+        if (!isArray(symbolType)) {
+            symbolType = [symbolType, symbolType];
+        }
+        if (typeof symbolSize === 'number') {
+            symbolSize = [symbolSize, symbolSize];
+        }
+
+        // Update visual and layout of from symbol and to symbol
+        mlData.from.each(function (idx) {
+            updateDataVisualAndLayout(fromData, idx, true);
+            updateDataVisualAndLayout(toData, idx, false);
+        });
+
+        // Update visual and layout of line
+        lineData.each(function (idx) {
+            var lineColor = lineData.getItemModel(idx).get('lineStyle.color');
+            lineData.setItemVisual(idx, {
+                color: lineColor || fromData.getItemVisual(idx, 'color')
+            });
+            lineData.setItemLayout(idx, [
+                fromData.getItemLayout(idx),
+                toData.getItemLayout(idx)
+            ]);
+
+            lineData.setItemVisual(idx, {
+                'fromSymbolSize': fromData.getItemVisual(idx, 'symbolSize'),
+                'fromSymbol': fromData.getItemVisual(idx, 'symbol'),
+                'toSymbolSize': toData.getItemVisual(idx, 'symbolSize'),
+                'toSymbol': toData.getItemVisual(idx, 'symbol')
+            });
+        });
+
+        lineDraw.updateData(lineData);
+
+        // Set host model for tooltip
+        // FIXME
+        mlData.line.eachItemGraphicEl(function (el, idx) {
+            el.traverse(function (child) {
+                child.dataModel = mlModel;
+            });
+        });
+
+        function updateDataVisualAndLayout(data, idx, isFrom) {
+            var itemModel = data.getItemModel(idx);
+
+            updateSingleMarkerEndLayout(
+                data, idx, isFrom, seriesModel, api
+            );
+
+            data.setItemVisual(idx, {
+                symbolSize: itemModel.get('symbolSize') || symbolSize[isFrom ? 0 : 1],
+                symbol: itemModel.get('symbol', true) || symbolType[isFrom ? 0 : 1],
+                color: itemModel.get('itemStyle.color') || seriesData.getVisual('color')
+            });
+        }
+
+        lineDraw.__keep = true;
+
+        lineDraw.group.silent = mlModel.get('silent') || seriesModel.get('silent');
+    }
+});
+
+/**
+ * @inner
+ * @param {module:echarts/coord/*} coordSys
+ * @param {module:echarts/model/Series} seriesModel
+ * @param {module:echarts/model/Model} mpModel
+ */
+function createList$2(coordSys, seriesModel, mlModel) {
+
+    var coordDimsInfos;
+    if (coordSys) {
+        coordDimsInfos = map(coordSys && coordSys.dimensions, function (coordDim) {
+            var info = seriesModel.getData().getDimensionInfo(
+                seriesModel.getData().mapDimension(coordDim)
+            ) || {};
+            // In map series data don't have lng and lat dimension. Fallback to same with coordSys
+            return defaults({name: coordDim}, info);
+        });
+    }
+    else {
+        coordDimsInfos =[{
+            name: 'value',
+            type: 'float'
+        }];
+    }
+
+    var fromData = new List(coordDimsInfos, mlModel);
+    var toData = new List(coordDimsInfos, mlModel);
+    // No dimensions
+    var lineData = new List([], mlModel);
+
+    var optData = map(mlModel.get('data'), curry(
+        markLineTransform, seriesModel, coordSys, mlModel
+    ));
+    if (coordSys) {
+        optData = filter(
+            optData, curry(markLineFilter, coordSys)
+        );
+    }
+    var dimValueGetter$$1 = coordSys ? dimValueGetter : function (item) {
+        return item.value;
+    };
+    fromData.initData(
+        map(optData, function (item) { return item[0]; }),
+        null, dimValueGetter$$1
+    );
+    toData.initData(
+        map(optData, function (item) { return item[1]; }),
+        null, dimValueGetter$$1
+    );
+    lineData.initData(
+        map(optData, function (item) { return item[2]; })
+    );
+    lineData.hasItemOption = true;
+
+    return {
+        from: fromData,
+        to: toData,
+        line: lineData
+    };
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+registerPreprocessor(function (opt) {
+    // Make sure markLine component is enabled
+    opt.markLine = opt.markLine || {};
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+MarkerModel.extend({
+
+    type: 'markArea',
+
+    defaultOption: {
+        zlevel: 0,
+        // PENDING
+        z: 1,
+        tooltip: {
+            trigger: 'item'
+        },
+        // markArea should fixed on the coordinate system
+        animation: false,
+        label: {
+            show: true,
+            position: 'top'
+        },
+        itemStyle: {
+            // color and borderColor default to use color from series
+            // color: 'auto'
+            // borderColor: 'auto'
+            borderWidth: 0
+        },
+
+        emphasis: {
+            label: {
+                show: true,
+                position: 'top'
+            }
+        }
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// TODO Better on polar
+
+var markAreaTransform = function (seriesModel, coordSys, maModel, item) {
+    var lt = dataTransform(seriesModel, item[0]);
+    var rb = dataTransform(seriesModel, item[1]);
+    var retrieve$$1 = retrieve;
+
+    // FIXME make sure lt is less than rb
+    var ltCoord = lt.coord;
+    var rbCoord = rb.coord;
+    ltCoord[0] = retrieve$$1(ltCoord[0], -Infinity);
+    ltCoord[1] = retrieve$$1(ltCoord[1], -Infinity);
+
+    rbCoord[0] = retrieve$$1(rbCoord[0], Infinity);
+    rbCoord[1] = retrieve$$1(rbCoord[1], Infinity);
+
+    // Merge option into one
+    var result = mergeAll([{}, lt, rb]);
+
+    result.coord = [
+        lt.coord, rb.coord
+    ];
+    result.x0 = lt.x;
+    result.y0 = lt.y;
+    result.x1 = rb.x;
+    result.y1 = rb.y;
+    return result;
+};
+
+function isInifinity$1(val) {
+    return !isNaN(val) && !isFinite(val);
+}
+
+// If a markArea has one dim
+function ifMarkLineHasOnlyDim$1(dimIndex, fromCoord, toCoord, coordSys) {
+    var otherDimIndex = 1 - dimIndex;
+    return isInifinity$1(fromCoord[otherDimIndex]) && isInifinity$1(toCoord[otherDimIndex]);
+}
+
+function markAreaFilter(coordSys, item) {
+    var fromCoord = item.coord[0];
+    var toCoord = item.coord[1];
+    if (coordSys.type === 'cartesian2d') {
+        // In case
+        // {
+        //  markArea: {
+        //    data: [{ yAxis: 2 }]
+        //  }
+        // }
+        if (
+            fromCoord && toCoord &&
+            (ifMarkLineHasOnlyDim$1(1, fromCoord, toCoord, coordSys)
+            || ifMarkLineHasOnlyDim$1(0, fromCoord, toCoord, coordSys))
+        ) {
+            return true;
+        }
+    }
+    return dataFilter$1(coordSys, {
+            coord: fromCoord,
+            x: item.x0,
+            y: item.y0
+        })
+        || dataFilter$1(coordSys, {
+            coord: toCoord,
+            x: item.x1,
+            y: item.y1
+        });
+}
+
+// dims can be ['x0', 'y0'], ['x1', 'y1'], ['x0', 'y1'], ['x1', 'y0']
+function getSingleMarkerEndPoint(data, idx, dims, seriesModel, api) {
+    var coordSys = seriesModel.coordinateSystem;
+    var itemModel = data.getItemModel(idx);
+
+    var point;
+    var xPx = parsePercent$1(itemModel.get(dims[0]), api.getWidth());
+    var yPx = parsePercent$1(itemModel.get(dims[1]), api.getHeight());
+    if (!isNaN(xPx) && !isNaN(yPx)) {
+        point = [xPx, yPx];
+    }
+    else {
+        // Chart like bar may have there own marker positioning logic
+        if (seriesModel.getMarkerPosition) {
+            // Use the getMarkerPoisition
+            point = seriesModel.getMarkerPosition(
+                data.getValues(dims, idx)
+            );
+        }
+        else {
+            var x = data.get(dims[0], idx);
+            var y = data.get(dims[1], idx);
+            var pt = [x, y];
+            coordSys.clampData && coordSys.clampData(pt, pt);
+            point = coordSys.dataToPoint(pt, true);
+        }
+        if (coordSys.type === 'cartesian2d') {
+            var xAxis = coordSys.getAxis('x');
+            var yAxis = coordSys.getAxis('y');
+            var x = data.get(dims[0], idx);
+            var y = data.get(dims[1], idx);
+            if (isInifinity$1(x)) {
+                point[0] = xAxis.toGlobalCoord(xAxis.getExtent()[dims[0] === 'x0' ? 0 : 1]);
+            }
+            else if (isInifinity$1(y)) {
+                point[1] = yAxis.toGlobalCoord(yAxis.getExtent()[dims[1] === 'y0' ? 0 : 1]);
+            }
+        }
+
+        // Use x, y if has any
+        if (!isNaN(xPx)) {
+            point[0] = xPx;
+        }
+        if (!isNaN(yPx)) {
+            point[1] = yPx;
+        }
+    }
+
+    return point;
+}
+
+var dimPermutations = [['x0', 'y0'], ['x1', 'y0'], ['x1', 'y1'], ['x0', 'y1']];
+
+MarkerView.extend({
+
+    type: 'markArea',
+
+    // updateLayout: function (markAreaModel, ecModel, api) {
+    //     ecModel.eachSeries(function (seriesModel) {
+    //         var maModel = seriesModel.markAreaModel;
+    //         if (maModel) {
+    //             var areaData = maModel.getData();
+    //             areaData.each(function (idx) {
+    //                 var points = zrUtil.map(dimPermutations, function (dim) {
+    //                     return getSingleMarkerEndPoint(areaData, idx, dim, seriesModel, api);
+    //                 });
+    //                 // Layout
+    //                 areaData.setItemLayout(idx, points);
+    //                 var el = areaData.getItemGraphicEl(idx);
+    //                 el.setShape('points', points);
+    //             });
+    //         }
+    //     }, this);
+    // },
+
+    updateTransform: function (markAreaModel, ecModel, api) {
+        ecModel.eachSeries(function (seriesModel) {
+            var maModel = seriesModel.markAreaModel;
+            if (maModel) {
+                var areaData = maModel.getData();
+                areaData.each(function (idx) {
+                    var points = map(dimPermutations, function (dim) {
+                        return getSingleMarkerEndPoint(areaData, idx, dim, seriesModel, api);
+                    });
+                    // Layout
+                    areaData.setItemLayout(idx, points);
+                    var el = areaData.getItemGraphicEl(idx);
+                    el.setShape('points', points);
+                });
+            }
+        }, this);
+    },
+
+    renderSeries: function (seriesModel, maModel, ecModel, api) {
+        var coordSys = seriesModel.coordinateSystem;
+        var seriesId = seriesModel.id;
+        var seriesData = seriesModel.getData();
+
+        var areaGroupMap = this.markerGroupMap;
+        var polygonGroup = areaGroupMap.get(seriesId)
+            || areaGroupMap.set(seriesId, {group: new Group()});
+
+        this.group.add(polygonGroup.group);
+        polygonGroup.__keep = true;
+
+        var areaData = createList$3(coordSys, seriesModel, maModel);
+
+        // Line data for tooltip and formatter
+        maModel.setData(areaData);
+
+        // Update visual and layout of line
+        areaData.each(function (idx) {
+            // Layout
+            areaData.setItemLayout(idx, map(dimPermutations, function (dim) {
+                return getSingleMarkerEndPoint(areaData, idx, dim, seriesModel, api);
+            }));
+
+            // Visual
+            areaData.setItemVisual(idx, {
+                color: seriesData.getVisual('color')
+            });
+        });
+
+
+        areaData.diff(polygonGroup.__data)
+            .add(function (idx) {
+                var polygon = new Polygon({
+                    shape: {
+                        points: areaData.getItemLayout(idx)
+                    }
+                });
+                areaData.setItemGraphicEl(idx, polygon);
+                polygonGroup.group.add(polygon);
+            })
+            .update(function (newIdx, oldIdx) {
+                var polygon = polygonGroup.__data.getItemGraphicEl(oldIdx);
+                updateProps(polygon, {
+                    shape: {
+                        points: areaData.getItemLayout(newIdx)
+                    }
+                }, maModel, newIdx);
+                polygonGroup.group.add(polygon);
+                areaData.setItemGraphicEl(newIdx, polygon);
+            })
+            .remove(function (idx) {
+                var polygon = polygonGroup.__data.getItemGraphicEl(idx);
+                polygonGroup.group.remove(polygon);
+            })
+            .execute();
+
+        areaData.eachItemGraphicEl(function (polygon, idx) {
+            var itemModel = areaData.getItemModel(idx);
+            var labelModel = itemModel.getModel('label');
+            var labelHoverModel = itemModel.getModel('emphasis.label');
+            var color = areaData.getItemVisual(idx, 'color');
+            polygon.useStyle(
+                defaults(
+                    itemModel.getModel('itemStyle').getItemStyle(),
+                    {
+                        fill: modifyAlpha(color, 0.4),
+                        stroke: color
+                    }
+                )
+            );
+
+            polygon.hoverStyle = itemModel.getModel('emphasis.itemStyle').getItemStyle();
+
+            setLabelStyle(
+                polygon.style, polygon.hoverStyle, labelModel, labelHoverModel,
+                {
+                    labelFetcher: maModel,
+                    labelDataIndex: idx,
+                    defaultText: areaData.getName(idx) || '',
+                    isRectText: true,
+                    autoColor: color
+                }
+            );
+
+            setHoverStyle(polygon, {});
+
+            polygon.dataModel = maModel;
+        });
+
+        polygonGroup.__data = areaData;
+
+        polygonGroup.group.silent = maModel.get('silent') || seriesModel.get('silent');
+    }
+});
+
+/**
+ * @inner
+ * @param {module:echarts/coord/*} coordSys
+ * @param {module:echarts/model/Series} seriesModel
+ * @param {module:echarts/model/Model} mpModel
+ */
+function createList$3(coordSys, seriesModel, maModel) {
+
+    var coordDimsInfos;
+    var areaData;
+    var dims = ['x0', 'y0', 'x1', 'y1'];
+    if (coordSys) {
+        coordDimsInfos = map(coordSys && coordSys.dimensions, function (coordDim) {
+            var data = seriesModel.getData();
+            var info = data.getDimensionInfo(
+                data.mapDimension(coordDim)
+            ) || {};
+            // In map series data don't have lng and lat dimension. Fallback to same with coordSys
+            return defaults({name: coordDim}, info);
+        });
+        areaData = new List(map(dims, function (dim, idx) {
+            return {
+                name: dim,
+                type: coordDimsInfos[idx % 2].type
+            };
+        }), maModel);
+    }
+    else {
+        coordDimsInfos =[{
+            name: 'value',
+            type: 'float'
+        }];
+        areaData = new List(coordDimsInfos, maModel);
+    }
+
+    var optData = map(maModel.get('data'), curry(
+        markAreaTransform, seriesModel, coordSys, maModel
+    ));
+    if (coordSys) {
+        optData = filter(
+            optData, curry(markAreaFilter, coordSys)
+        );
+    }
+
+    var dimValueGetter$$1 = coordSys ? function (item, dimName, dataIndex, dimIndex) {
+        return item.coord[Math.floor(dimIndex / 2)][dimIndex % 2];
+    } : function (item) {
+        return item.value;
+    };
+    areaData.initData(optData, null, dimValueGetter$$1);
+    areaData.hasItemOption = true;
+    return areaData;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+registerPreprocessor(function (opt) {
+    // Make sure markArea component is enabled
+    opt.markArea = opt.markArea || {};
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var preprocessor$3 = function (option) {
+    var timelineOpt = option && option.timeline;
+
+    if (!isArray(timelineOpt)) {
+        timelineOpt = timelineOpt ? [timelineOpt] : [];
+    }
+
+    each$1(timelineOpt, function (opt) {
+        if (!opt) {
+            return;
+        }
+
+        compatibleEC2(opt);
+    });
+};
+
+function compatibleEC2(opt) {
+    var type = opt.type;
+
+    var ec2Types = {'number': 'value', 'time': 'time'};
+
+    // Compatible with ec2
+    if (ec2Types[type]) {
+        opt.axisType = ec2Types[type];
+        delete opt.type;
+    }
+
+    transferItem(opt);
+
+    if (has$2(opt, 'controlPosition')) {
+        var controlStyle = opt.controlStyle || (opt.controlStyle = {});
+        if (!has$2(controlStyle, 'position')) {
+            controlStyle.position = opt.controlPosition;
+        }
+        if (controlStyle.position === 'none' && !has$2(controlStyle, 'show')) {
+            controlStyle.show = false;
+            delete controlStyle.position;
+        }
+        delete opt.controlPosition;
+    }
+
+    each$1(opt.data || [], function (dataItem) {
+        if (isObject$1(dataItem) && !isArray(dataItem)) {
+            if (!has$2(dataItem, 'value') && has$2(dataItem, 'name')) {
+                // In ec2, using name as value.
+                dataItem.value = dataItem.name;
+            }
+            transferItem(dataItem);
+        }
+    });
+}
+
+function transferItem(opt) {
+    var itemStyle = opt.itemStyle || (opt.itemStyle = {});
+
+    var itemStyleEmphasis = itemStyle.emphasis || (itemStyle.emphasis = {});
+
+    // Transfer label out
+    var label = opt.label || (opt.label || {});
+    var labelNormal = label.normal || (label.normal = {});
+    var excludeLabelAttr = {normal: 1, emphasis: 1};
+
+    each$1(label, function (value, name) {
+        if (!excludeLabelAttr[name] && !has$2(labelNormal, name)) {
+            labelNormal[name] = value;
+        }
+    });
+
+    if (itemStyleEmphasis.label && !has$2(label, 'emphasis')) {
+        label.emphasis = itemStyleEmphasis.label;
+        delete itemStyleEmphasis.label;
+    }
+}
+
+function has$2(obj, attr) {
+    return obj.hasOwnProperty(attr);
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+ComponentModel.registerSubTypeDefaulter('timeline', function () {
+    // Only slider now.
+    return 'slider';
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+registerAction(
+
+    {type: 'timelineChange', event: 'timelineChanged', update: 'prepareAndUpdate'},
+
+    function (payload, ecModel) {
+
+        var timelineModel = ecModel.getComponent('timeline');
+        if (timelineModel && payload.currentIndex != null) {
+            timelineModel.setCurrentIndex(payload.currentIndex);
+
+            if (!timelineModel.get('loop', true) && timelineModel.isIndexMax()) {
+                timelineModel.setPlayState(false);
+            }
+        }
+
+        // Set normalized currentIndex to payload.
+        ecModel.resetOption('timeline');
+
+        return defaults({
+            currentIndex: timelineModel.option.currentIndex
+        }, payload);
+    }
+);
+
+registerAction(
+
+    {type: 'timelinePlayChange', event: 'timelinePlayChanged', update: 'update'},
+
+    function (payload, ecModel) {
+        var timelineModel = ecModel.getComponent('timeline');
+        if (timelineModel && payload.playState != null) {
+            timelineModel.setPlayState(payload.playState);
+        }
+    }
+);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var TimelineModel = ComponentModel.extend({
+
+    type: 'timeline',
+
+    layoutMode: 'box',
+
+    /**
+     * @protected
+     */
+    defaultOption: {
+
+        zlevel: 0,                  // ä¸€çº§å±‚å 
+        z: 4,                       // äºŒçº§å±‚å 
+        show: true,
+
+        axisType: 'time',  // æ¨¡å¼æ˜¯æ—¶é—´ç±»åž‹ï¼Œæ”¯æŒ value, category
+
+        realtime: true,
+
+        left: '20%',
+        top: null,
+        right: '20%',
+        bottom: 0,
+        width: null,
+        height: 40,
+        padding: 5,
+
+        controlPosition: 'left',           // 'left' 'right' 'top' 'bottom' 'none'
+        autoPlay: false,
+        rewind: false,                     // åå‘æ’æ”¾
+        loop: true,
+        playInterval: 2000,                // æ’æ”¾æ—¶é—´é—´éš”ï¼Œå•ä½ms
+
+        currentIndex: 0,
+
+        itemStyle: {},
+        label: {
+            color: '#000'
+        },
+
+        data: []
+    },
+
+    /**
+     * @override
+     */
+    init: function (option, parentModel, ecModel) {
+
+        /**
+         * @private
+         * @type {module:echarts/data/List}
+         */
+        this._data;
+
+        /**
+         * @private
+         * @type {Array.<string>}
+         */
+        this._names;
+
+        this.mergeDefaultAndTheme(option, ecModel);
+        this._initData();
+    },
+
+    /**
+     * @override
+     */
+    mergeOption: function (option) {
+        TimelineModel.superApply(this, 'mergeOption', arguments);
+        this._initData();
+    },
+
+    /**
+     * @param {number} [currentIndex]
+     */
+    setCurrentIndex: function (currentIndex) {
+        if (currentIndex == null) {
+            currentIndex = this.option.currentIndex;
+        }
+        var count = this._data.count();
+
+        if (this.option.loop) {
+            currentIndex = (currentIndex % count + count) % count;
+        }
+        else {
+            currentIndex >= count && (currentIndex = count - 1);
+            currentIndex < 0 && (currentIndex = 0);
+        }
+
+        this.option.currentIndex = currentIndex;
+    },
+
+    /**
+     * @return {number} currentIndex
+     */
+    getCurrentIndex: function () {
+        return this.option.currentIndex;
+    },
+
+    /**
+     * @return {boolean}
+     */
+    isIndexMax: function () {
+        return this.getCurrentIndex() >= this._data.count() - 1;
+    },
+
+    /**
+     * @param {boolean} state true: play, false: stop
+     */
+    setPlayState: function (state) {
+        this.option.autoPlay = !!state;
+    },
+
+    /**
+     * @return {boolean} true: play, false: stop
+     */
+    getPlayState: function () {
+        return !!this.option.autoPlay;
+    },
+
+    /**
+     * @private
+     */
+    _initData: function () {
+        var thisOption = this.option;
+        var dataArr = thisOption.data || [];
+        var axisType = thisOption.axisType;
+        var names = this._names = [];
+
+        if (axisType === 'category') {
+            var idxArr = [];
+            each$1(dataArr, function (item, index) {
+                var value = getDataItemValue(item);
+                var newItem;
+
+                if (isObject$1(item)) {
+                    newItem = clone(item);
+                    newItem.value = index;
+                }
+                else {
+                    newItem = index;
+                }
+
+                idxArr.push(newItem);
+
+                if (!isString(value) && (value == null || isNaN(value))) {
+                    value = '';
+                }
+
+                names.push(value + '');
+            });
+            dataArr = idxArr;
+        }
+
+        var dimType = ({category: 'ordinal', time: 'time'})[axisType] || 'number';
+
+        var data = this._data = new List([{name: 'value', type: dimType}], this);
+
+        data.initData(dataArr, names);
+    },
+
+    getData: function () {
+        return this._data;
+    },
+
+    /**
+     * @public
+     * @return {Array.<string>} categoreis
+     */
+    getCategories: function () {
+        if (this.get('axisType') === 'category') {
+            return this._names.slice();
+        }
+    }
+
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var SliderTimelineModel = TimelineModel.extend({
+
+    type: 'timeline.slider',
+
+    /**
+     * @protected
+     */
+    defaultOption: {
+
+        backgroundColor: 'rgba(0,0,0,0)',   // æ—¶é—´è½´èƒŒæ™¯é¢œè‰²
+        borderColor: '#ccc',               // æ—¶é—´è½´è¾¹æ¡†é¢œè‰²
+        borderWidth: 0,                    // æ—¶é—´è½´è¾¹æ¡†çº¿å®½ï¼Œå•ä½pxï¼Œé»˜è®¤ä¸º0ï¼ˆæ— è¾¹æ¡†ï¼‰
+
+        orient: 'horizontal',              // 'vertical'
+        inverse: false,
+
+        tooltip: {                          // boolean or Object
+            trigger: 'item'                 // data item may also have tootip attr.
+        },
+
+        symbol: 'emptyCircle',
+        symbolSize: 10,
+
+        lineStyle: {
+            show: true,
+            width: 2,
+            color: '#304654'
+        },
+        label: {                            // æ–‡æœ¬æ ‡ç¾
+            position: 'auto',           // auto left right top bottom
+                                        // When using number, label position is not
+                                        // restricted by viewRect.
+                                        // positive: right/bottom, negative: left/top
+            show: true,
+            interval: 'auto',
+            rotate: 0,
+            // formatter: null,
+            // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
+            color: '#304654'
+        },
+        itemStyle: {
+            color: '#304654',
+            borderWidth: 1
+        },
+
+        checkpointStyle: {
+            symbol: 'circle',
+            symbolSize: 13,
+            color: '#c23531',
+            borderWidth: 5,
+            borderColor: 'rgba(194,53,49, 0.5)',
+            animation: true,
+            animationDuration: 300,
+            animationEasing: 'quinticInOut'
+        },
+
+        controlStyle: {
+            show: true,
+            showPlayBtn: true,
+            showPrevBtn: true,
+            showNextBtn: true,
+            itemSize: 22,
+            itemGap: 12,
+            position: 'left',  // 'left' 'right' 'top' 'bottom'
+            playIcon: 'path://M31.6,53C17.5,53,6,41.5,6,27.4S17.5,1.8,31.6,1.8C45.7,1.8,57.2,13.3,57.2,27.4S45.7,53,31.6,53z M31.6,3.3 C18.4,3.3,7.5,14.1,7.5,27.4c0,13.3,10.8,24.1,24.1,24.1C44.9,51.5,55.7,40.7,55.7,27.4C55.7,14.1,44.9,3.3,31.6,3.3z M24.9,21.3 c0-2.2,1.6-3.1,3.5-2l10.5,6.1c1.899,1.1,1.899,2.9,0,4l-10.5,6.1c-1.9,1.1-3.5,0.2-3.5-2V21.3z', // jshint ignore:line
+            stopIcon: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z', // jshint ignore:line
+            nextIcon: 'path://M18.6,50.8l22.5-22.5c0.2-0.2,0.3-0.4,0.3-0.7c0-0.3-0.1-0.5-0.3-0.7L18.7,4.4c-0.1-0.1-0.2-0.3-0.2-0.5 c0-0.4,0.3-0.8,0.8-0.8c0.2,0,0.5,0.1,0.6,0.3l23.5,23.5l0,0c0.2,0.2,0.3,0.4,0.3,0.7c0,0.3-0.1,0.5-0.3,0.7l-0.1,0.1L19.7,52 c-0.1,0.1-0.3,0.2-0.5,0.2c-0.4,0-0.8-0.3-0.8-0.8C18.4,51.2,18.5,51,18.6,50.8z', // jshint ignore:line
+            prevIcon: 'path://M43,52.8L20.4,30.3c-0.2-0.2-0.3-0.4-0.3-0.7c0-0.3,0.1-0.5,0.3-0.7L42.9,6.4c0.1-0.1,0.2-0.3,0.2-0.5 c0-0.4-0.3-0.8-0.8-0.8c-0.2,0-0.5,0.1-0.6,0.3L18.3,28.8l0,0c-0.2,0.2-0.3,0.4-0.3,0.7c0,0.3,0.1,0.5,0.3,0.7l0.1,0.1L41.9,54 c0.1,0.1,0.3,0.2,0.5,0.2c0.4,0,0.8-0.3,0.8-0.8C43.2,53.2,43.1,53,43,52.8z', // jshint ignore:line
+
+            color: '#304654',
+            borderColor: '#304654',
+            borderWidth: 1
+        },
+
+        emphasis: {
+            label: {
+                show: true,
+                // å…¶ä½™å±žæ€§é»˜è®¤ä½¿ç”¨å…¨å±€æ–‡æœ¬æ ·å¼ï¼Œè¯¦è§TEXTSTYLE
+                color: '#c23531'
+            },
+
+            itemStyle: {
+                color: '#c23531'
+            },
+
+            controlStyle: {
+                color: '#c23531',
+                borderColor: '#c23531',
+                borderWidth: 2
+            }
+        },
+        data: []
+    }
+
+});
+
+mixin(SliderTimelineModel, dataFormatMixin);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var TimelineView = Component.extend({
+    type: 'timeline'
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * Extend axis 2d
+ * @constructor module:echarts/coord/cartesian/Axis2D
+ * @extends {module:echarts/coord/cartesian/Axis}
+ * @param {string} dim
+ * @param {*} scale
+ * @param {Array.<number>} coordExtent
+ * @param {string} axisType
+ * @param {string} position
+ */
+var TimelineAxis = function (dim, scale, coordExtent, axisType) {
+
+    Axis.call(this, dim, scale, coordExtent);
+
+    /**
+     * Axis type
+     *  - 'category'
+     *  - 'value'
+     *  - 'time'
+     *  - 'log'
+     * @type {string}
+     */
+    this.type = axisType || 'value';
+
+    /**
+     * Axis model
+     * @param {module:echarts/component/TimelineModel}
+     */
+    this.model = null;
+};
+
+TimelineAxis.prototype = {
+
+    constructor: TimelineAxis,
+
+    /**
+     * @override
+     */
+    getLabelModel: function () {
+        return this.model.getModel('label');
+    },
+
+    /**
+     * @override
+     */
+    isHorizontal: function () {
+        return this.model.get('orient') === 'horizontal';
+    }
+
+};
+
+inherits(TimelineAxis, Axis);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var bind$6 = bind;
+var each$27 = each$1;
+
+var PI$4 = Math.PI;
+
+TimelineView.extend({
+
+    type: 'timeline.slider',
+
+    init: function (ecModel, api) {
+
+        this.api = api;
+
+        /**
+         * @private
+         * @type {module:echarts/component/timeline/TimelineAxis}
+         */
+        this._axis;
+
+        /**
+         * @private
+         * @type {module:zrender/core/BoundingRect}
+         */
+        this._viewRect;
+
+        /**
+         * @type {number}
+         */
+        this._timer;
+
+        /**
+         * @type {module:zrender/Element}
+         */
+        this._currentPointer;
+
+        /**
+         * @type {module:zrender/container/Group}
+         */
+        this._mainGroup;
+
+        /**
+         * @type {module:zrender/container/Group}
+         */
+        this._labelGroup;
+    },
+
+    /**
+     * @override
+     */
+    render: function (timelineModel, ecModel, api, payload) {
+        this.model = timelineModel;
+        this.api = api;
+        this.ecModel = ecModel;
+
+        this.group.removeAll();
+
+        if (timelineModel.get('show', true)) {
+
+            var layoutInfo = this._layout(timelineModel, api);
+            var mainGroup = this._createGroup('mainGroup');
+            var labelGroup = this._createGroup('labelGroup');
+
+            /**
+             * @private
+             * @type {module:echarts/component/timeline/TimelineAxis}
+             */
+            var axis = this._axis = this._createAxis(layoutInfo, timelineModel);
+
+            timelineModel.formatTooltip = function (dataIndex) {
+                return encodeHTML(axis.scale.getLabel(dataIndex));
+            };
+
+            each$27(
+                ['AxisLine', 'AxisTick', 'Control', 'CurrentPointer'],
+                function (name) {
+                    this['_render' + name](layoutInfo, mainGroup, axis, timelineModel);
+                },
+                this
+            );
+
+            this._renderAxisLabel(layoutInfo, labelGroup, axis, timelineModel);
+            this._position(layoutInfo, timelineModel);
+        }
+
+        this._doPlayStop();
+    },
+
+    /**
+     * @override
+     */
+    remove: function () {
+        this._clearTimer();
+        this.group.removeAll();
+    },
+
+    /**
+     * @override
+     */
+    dispose: function () {
+        this._clearTimer();
+    },
+
+    _layout: function (timelineModel, api) {
+        var labelPosOpt = timelineModel.get('label.position');
+        var orient = timelineModel.get('orient');
+        var viewRect = getViewRect$4(timelineModel, api);
+        // Auto label offset.
+        if (labelPosOpt == null || labelPosOpt === 'auto') {
+            labelPosOpt = orient === 'horizontal'
+                ? ((viewRect.y + viewRect.height / 2) < api.getHeight() / 2 ? '-' : '+')
+                : ((viewRect.x + viewRect.width / 2) < api.getWidth() / 2 ? '+' : '-');
+        }
+        else if (isNaN(labelPosOpt)) {
+            labelPosOpt = ({
+                horizontal: {top: '-', bottom: '+'},
+                vertical: {left: '-', right: '+'}
+            })[orient][labelPosOpt];
+        }
+
+        var labelAlignMap = {
+            horizontal: 'center',
+            vertical: (labelPosOpt >= 0 || labelPosOpt === '+') ? 'left' : 'right'
+        };
+
+        var labelBaselineMap = {
+            horizontal: (labelPosOpt >= 0 || labelPosOpt === '+') ? 'top' : 'bottom',
+            vertical: 'middle'
+        };
+        var rotationMap = {
+            horizontal: 0,
+            vertical: PI$4 / 2
+        };
+
+        // Position
+        var mainLength = orient === 'vertical' ? viewRect.height : viewRect.width;
+
+        var controlModel = timelineModel.getModel('controlStyle');
+        var showControl = controlModel.get('show', true);
+        var controlSize = showControl ? controlModel.get('itemSize') : 0;
+        var controlGap = showControl ? controlModel.get('itemGap') : 0;
+        var sizePlusGap = controlSize + controlGap;
+
+        // Special label rotate.
+        var labelRotation = timelineModel.get('label.rotate') || 0;
+        labelRotation = labelRotation * PI$4 / 180; // To radian.
+
+        var playPosition;
+        var prevBtnPosition;
+        var nextBtnPosition;
+        var axisExtent;
+        var controlPosition = controlModel.get('position', true);
+        var showPlayBtn = showControl && controlModel.get('showPlayBtn', true);
+        var showPrevBtn = showControl && controlModel.get('showPrevBtn', true);
+        var showNextBtn = showControl && controlModel.get('showNextBtn', true);
+        var xLeft = 0;
+        var xRight = mainLength;
+
+        // position[0] means left, position[1] means middle.
+        if (controlPosition === 'left' || controlPosition === 'bottom') {
+            showPlayBtn && (playPosition = [0, 0], xLeft += sizePlusGap);
+            showPrevBtn && (prevBtnPosition = [xLeft, 0], xLeft += sizePlusGap);
+            showNextBtn && (nextBtnPosition = [xRight - controlSize, 0], xRight -= sizePlusGap);
+        }
+        else { // 'top' 'right'
+            showPlayBtn && (playPosition = [xRight - controlSize, 0], xRight -= sizePlusGap);
+            showPrevBtn && (prevBtnPosition = [0, 0], xLeft += sizePlusGap);
+            showNextBtn && (nextBtnPosition = [xRight - controlSize, 0], xRight -= sizePlusGap);
+        }
+        axisExtent = [xLeft, xRight];
+
+        if (timelineModel.get('inverse')) {
+            axisExtent.reverse();
+        }
+
+        return {
+            viewRect: viewRect,
+            mainLength: mainLength,
+            orient: orient,
+
+            rotation: rotationMap[orient],
+            labelRotation: labelRotation,
+            labelPosOpt: labelPosOpt,
+            labelAlign: timelineModel.get('label.align') || labelAlignMap[orient],
+            labelBaseline: timelineModel.get('label.verticalAlign')
+                || timelineModel.get('label.baseline')
+                || labelBaselineMap[orient],
+
+            // Based on mainGroup.
+            playPosition: playPosition,
+            prevBtnPosition: prevBtnPosition,
+            nextBtnPosition: nextBtnPosition,
+            axisExtent: axisExtent,
+
+            controlSize: controlSize,
+            controlGap: controlGap
+        };
+    },
+
+    _position: function (layoutInfo, timelineModel) {
+        // Position is be called finally, because bounding rect is needed for
+        // adapt content to fill viewRect (auto adapt offset).
+
+        // Timeline may be not all in the viewRect when 'offset' is specified
+        // as a number, because it is more appropriate that label aligns at
+        // 'offset' but not the other edge defined by viewRect.
+
+        var mainGroup = this._mainGroup;
+        var labelGroup = this._labelGroup;
+
+        var viewRect = layoutInfo.viewRect;
+        if (layoutInfo.orient === 'vertical') {
+            // transform to horizontal, inverse rotate by left-top point.
+            var m = create$1();
+            var rotateOriginX = viewRect.x;
+            var rotateOriginY = viewRect.y + viewRect.height;
+            translate(m, m, [-rotateOriginX, -rotateOriginY]);
+            rotate(m, m, -PI$4 / 2);
+            translate(m, m, [rotateOriginX, rotateOriginY]);
+            viewRect = viewRect.clone();
+            viewRect.applyTransform(m);
+        }
+
+        var viewBound = getBound(viewRect);
+        var mainBound = getBound(mainGroup.getBoundingRect());
+        var labelBound = getBound(labelGroup.getBoundingRect());
+
+        var mainPosition = mainGroup.position;
+        var labelsPosition = labelGroup.position;
+
+        labelsPosition[0] = mainPosition[0] = viewBound[0][0];
+
+        var labelPosOpt = layoutInfo.labelPosOpt;
+
+        if (isNaN(labelPosOpt)) { // '+' or '-'
+            var mainBoundIdx = labelPosOpt === '+' ? 0 : 1;
+            toBound(mainPosition, mainBound, viewBound, 1, mainBoundIdx);
+            toBound(labelsPosition, labelBound, viewBound, 1, 1 - mainBoundIdx);
+        }
+        else {
+            var mainBoundIdx = labelPosOpt >= 0 ? 0 : 1;
+            toBound(mainPosition, mainBound, viewBound, 1, mainBoundIdx);
+            labelsPosition[1] = mainPosition[1] + labelPosOpt;
+        }
+
+        mainGroup.attr('position', mainPosition);
+        labelGroup.attr('position', labelsPosition);
+        mainGroup.rotation = labelGroup.rotation = layoutInfo.rotation;
+
+        setOrigin(mainGroup);
+        setOrigin(labelGroup);
+
+        function setOrigin(targetGroup) {
+            var pos = targetGroup.position;
+            targetGroup.origin = [
+                viewBound[0][0] - pos[0],
+                viewBound[1][0] - pos[1]
+            ];
+        }
+
+        function getBound(rect) {
+            // [[xmin, xmax], [ymin, ymax]]
+            return [
+                [rect.x, rect.x + rect.width],
+                [rect.y, rect.y + rect.height]
+            ];
+        }
+
+        function toBound(fromPos, from, to, dimIdx, boundIdx) {
+            fromPos[dimIdx] += to[dimIdx][boundIdx] - from[dimIdx][boundIdx];
+        }
+    },
+
+    _createAxis: function (layoutInfo, timelineModel) {
+        var data = timelineModel.getData();
+        var axisType = timelineModel.get('axisType');
+
+        var scale = createScaleByModel(timelineModel, axisType);
+
+        // Customize scale. The `tickValue` is `dataIndex`.
+        scale.getTicks = function () {
+            return data.mapArray(['value'], function (value) {
+                return value;
+            });
+        };
+
+        var dataExtent = data.getDataExtent('value');
+        scale.setExtent(dataExtent[0], dataExtent[1]);
+        scale.niceTicks();
+
+        var axis = new TimelineAxis('value', scale, layoutInfo.axisExtent, axisType);
+        axis.model = timelineModel;
+
+        return axis;
+    },
+
+    _createGroup: function (name) {
+        var newGroup = this['_' + name] = new Group();
+        this.group.add(newGroup);
+        return newGroup;
+    },
+
+    _renderAxisLine: function (layoutInfo, group, axis, timelineModel) {
+        var axisExtent = axis.getExtent();
+
+        if (!timelineModel.get('lineStyle.show')) {
+            return;
+        }
+
+        group.add(new Line({
+            shape: {
+                x1: axisExtent[0], y1: 0,
+                x2: axisExtent[1], y2: 0
+            },
+            style: extend(
+                {lineCap: 'round'},
+                timelineModel.getModel('lineStyle').getLineStyle()
+            ),
+            silent: true,
+            z2: 1
+        }));
+    },
+
+    /**
+     * @private
+     */
+    _renderAxisTick: function (layoutInfo, group, axis, timelineModel) {
+        var data = timelineModel.getData();
+        // Show all ticks, despite ignoring strategy.
+        var ticks = axis.scale.getTicks();
+
+        // The value is dataIndex, see the costomized scale.
+        each$27(ticks, function (value) {
+            var tickCoord = axis.dataToCoord(value);
+            var itemModel = data.getItemModel(value);
+            var itemStyleModel = itemModel.getModel('itemStyle');
+            var hoverStyleModel = itemModel.getModel('emphasis.itemStyle');
+            var symbolOpt = {
+                position: [tickCoord, 0],
+                onclick: bind$6(this._changeTimeline, this, value)
+            };
+            var el = giveSymbol(itemModel, itemStyleModel, group, symbolOpt);
+            setHoverStyle(el, hoverStyleModel.getItemStyle());
+
+            if (itemModel.get('tooltip')) {
+                el.dataIndex = value;
+                el.dataModel = timelineModel;
+            }
+            else {
+                el.dataIndex = el.dataModel = null;
+            }
+
+        }, this);
+    },
+
+    /**
+     * @private
+     */
+    _renderAxisLabel: function (layoutInfo, group, axis, timelineModel) {
+        var labelModel = axis.getLabelModel();
+
+        if (!labelModel.get('show')) {
+            return;
+        }
+
+        var data = timelineModel.getData();
+        var labels = axis.getViewLabels();
+
+        each$27(labels, function (labelItem) {
+            // The tickValue is dataIndex, see the costomized scale.
+            var dataIndex = labelItem.tickValue;
+
+            var itemModel = data.getItemModel(dataIndex);
+            var normalLabelModel = itemModel.getModel('label');
+            var hoverLabelModel = itemModel.getModel('emphasis.label');
+            var tickCoord = axis.dataToCoord(labelItem.tickValue);
+            var textEl = new Text({
+                position: [tickCoord, 0],
+                rotation: layoutInfo.labelRotation - layoutInfo.rotation,
+                onclick: bind$6(this._changeTimeline, this, dataIndex),
+                silent: false
+            });
+            setTextStyle(textEl.style, normalLabelModel, {
+                text: labelItem.formattedLabel,
+                textAlign: layoutInfo.labelAlign,
+                textVerticalAlign: layoutInfo.labelBaseline
+            });
+
+            group.add(textEl);
+            setHoverStyle(
+                textEl, setTextStyle({}, hoverLabelModel)
+            );
+
+        }, this);
+    },
+
+    /**
+     * @private
+     */
+    _renderControl: function (layoutInfo, group, axis, timelineModel) {
+        var controlSize = layoutInfo.controlSize;
+        var rotation = layoutInfo.rotation;
+
+        var itemStyle = timelineModel.getModel('controlStyle').getItemStyle();
+        var hoverStyle = timelineModel.getModel('emphasis.controlStyle').getItemStyle();
+        var rect = [0, -controlSize / 2, controlSize, controlSize];
+        var playState = timelineModel.getPlayState();
+        var inverse = timelineModel.get('inverse', true);
+
+        makeBtn(
+            layoutInfo.nextBtnPosition,
+            'controlStyle.nextIcon',
+            bind$6(this._changeTimeline, this, inverse ? '-' : '+')
+        );
+        makeBtn(
+            layoutInfo.prevBtnPosition,
+            'controlStyle.prevIcon',
+            bind$6(this._changeTimeline, this, inverse ? '+' : '-')
+        );
+        makeBtn(
+            layoutInfo.playPosition,
+            'controlStyle.' + (playState ? 'stopIcon' : 'playIcon'),
+            bind$6(this._handlePlayClick, this, !playState),
+            true
+        );
+
+        function makeBtn(position, iconPath, onclick, willRotate) {
+            if (!position) {
+                return;
+            }
+            var opt = {
+                position: position,
+                origin: [controlSize / 2, 0],
+                rotation: willRotate ? -rotation : 0,
+                rectHover: true,
+                style: itemStyle,
+                onclick: onclick
+            };
+            var btn = makeIcon(timelineModel, iconPath, rect, opt);
+            group.add(btn);
+            setHoverStyle(btn, hoverStyle);
+        }
+    },
+
+    _renderCurrentPointer: function (layoutInfo, group, axis, timelineModel) {
+        var data = timelineModel.getData();
+        var currentIndex = timelineModel.getCurrentIndex();
+        var pointerModel = data.getItemModel(currentIndex).getModel('checkpointStyle');
+        var me = this;
+
+        var callback = {
+            onCreate: function (pointer) {
+                pointer.draggable = true;
+                pointer.drift = bind$6(me._handlePointerDrag, me);
+                pointer.ondragend = bind$6(me._handlePointerDragend, me);
+                pointerMoveTo(pointer, currentIndex, axis, timelineModel, true);
+            },
+            onUpdate: function (pointer) {
+                pointerMoveTo(pointer, currentIndex, axis, timelineModel);
+            }
+        };
+
+        // Reuse when exists, for animation and drag.
+        this._currentPointer = giveSymbol(
+            pointerModel, pointerModel, this._mainGroup, {}, this._currentPointer, callback
+        );
+    },
+
+    _handlePlayClick: function (nextState) {
+        this._clearTimer();
+        this.api.dispatchAction({
+            type: 'timelinePlayChange',
+            playState: nextState,
+            from: this.uid
+        });
+    },
+
+    _handlePointerDrag: function (dx, dy, e) {
+        this._clearTimer();
+        this._pointerChangeTimeline([e.offsetX, e.offsetY]);
+    },
+
+    _handlePointerDragend: function (e) {
+        this._pointerChangeTimeline([e.offsetX, e.offsetY], true);
+    },
+
+    _pointerChangeTimeline: function (mousePos, trigger) {
+        var toCoord = this._toAxisCoord(mousePos)[0];
+
+        var axis = this._axis;
+        var axisExtent = asc(axis.getExtent().slice());
+
+        toCoord > axisExtent[1] && (toCoord = axisExtent[1]);
+        toCoord < axisExtent[0] && (toCoord = axisExtent[0]);
+
+        this._currentPointer.position[0] = toCoord;
+        this._currentPointer.dirty();
+
+        var targetDataIndex = this._findNearestTick(toCoord);
+        var timelineModel = this.model;
+
+        if (trigger || (
+            targetDataIndex !== timelineModel.getCurrentIndex()
+            && timelineModel.get('realtime')
+        )) {
+            this._changeTimeline(targetDataIndex);
+        }
+    },
+
+    _doPlayStop: function () {
+        this._clearTimer();
+
+        if (this.model.getPlayState()) {
+            this._timer = setTimeout(
+                bind$6(handleFrame, this),
+                this.model.get('playInterval')
+            );
+        }
+
+        function handleFrame() {
+            // Do not cache
+            var timelineModel = this.model;
+            this._changeTimeline(
+                timelineModel.getCurrentIndex()
+                + (timelineModel.get('rewind', true) ? -1 : 1)
+            );
+        }
+    },
+
+    _toAxisCoord: function (vertex) {
+        var trans = this._mainGroup.getLocalTransform();
+        return applyTransform$1(vertex, trans, true);
+    },
+
+    _findNearestTick: function (axisCoord) {
+        var data = this.model.getData();
+        var dist = Infinity;
+        var targetDataIndex;
+        var axis = this._axis;
+
+        data.each(['value'], function (value, dataIndex) {
+            var coord = axis.dataToCoord(value);
+            var d = Math.abs(coord - axisCoord);
+            if (d < dist) {
+                dist = d;
+                targetDataIndex = dataIndex;
+            }
+        });
+
+        return targetDataIndex;
+    },
+
+    _clearTimer: function () {
+        if (this._timer) {
+            clearTimeout(this._timer);
+            this._timer = null;
+        }
+    },
+
+    _changeTimeline: function (nextIndex) {
+        var currentIndex = this.model.getCurrentIndex();
+
+        if (nextIndex === '+') {
+            nextIndex = currentIndex + 1;
+        }
+        else if (nextIndex === '-') {
+            nextIndex = currentIndex - 1;
+        }
+
+        this.api.dispatchAction({
+            type: 'timelineChange',
+            currentIndex: nextIndex,
+            from: this.uid
+        });
+    }
+
+});
+
+function getViewRect$4(model, api) {
+    return getLayoutRect(
+        model.getBoxLayoutParams(),
+        {
+            width: api.getWidth(),
+            height: api.getHeight()
+        },
+        model.get('padding')
+    );
+}
+
+function makeIcon(timelineModel, objPath, rect, opts) {
+    var icon = makePath(
+        timelineModel.get(objPath).replace(/^path:\/\//, ''),
+        clone(opts || {}),
+        new BoundingRect(rect[0], rect[1], rect[2], rect[3]),
+        'center'
+    );
+
+    return icon;
+}
+
+/**
+ * Create symbol or update symbol
+ * opt: basic position and event handlers
+ */
+function giveSymbol(hostModel, itemStyleModel, group, opt, symbol, callback) {
+    var color = itemStyleModel.get('color');
+
+    if (!symbol) {
+        var symbolType = hostModel.get('symbol');
+        symbol = createSymbol(symbolType, -1, -1, 2, 2, color);
+        symbol.setStyle('strokeNoScale', true);
+        group.add(symbol);
+        callback && callback.onCreate(symbol);
+    }
+    else {
+        symbol.setColor(color);
+        group.add(symbol); // Group may be new, also need to add.
+        callback && callback.onUpdate(symbol);
+    }
+
+    // Style
+    var itemStyle = itemStyleModel.getItemStyle(['color', 'symbol', 'symbolSize']);
+    symbol.setStyle(itemStyle);
+
+    // Transform and events.
+    opt = merge({
+        rectHover: true,
+        z2: 100
+    }, opt, true);
+
+    var symbolSize = hostModel.get('symbolSize');
+    symbolSize = symbolSize instanceof Array
+        ? symbolSize.slice()
+        : [+symbolSize, +symbolSize];
+    symbolSize[0] /= 2;
+    symbolSize[1] /= 2;
+    opt.scale = symbolSize;
+
+    var symbolOffset = hostModel.get('symbolOffset');
+    if (symbolOffset) {
+        var pos = opt.position = opt.position || [0, 0];
+        pos[0] += parsePercent$1(symbolOffset[0], symbolSize[0]);
+        pos[1] += parsePercent$1(symbolOffset[1], symbolSize[1]);
+    }
+
+    var symbolRotate = hostModel.get('symbolRotate');
+    opt.rotation = (symbolRotate || 0) * Math.PI / 180 || 0;
+
+    symbol.attr(opt);
+
+    // FIXME
+    // (1) When symbol.style.strokeNoScale is true and updateTransform is not performed,
+    // getBoundingRect will return wrong result.
+    // (This is supposed to be resolved in zrender, but it is a little difficult to
+    // leverage performance and auto updateTransform)
+    // (2) All of ancesters of symbol do not scale, so we can just updateTransform symbol.
+    symbol.updateTransform();
+
+    return symbol;
+}
+
+function pointerMoveTo(pointer, dataIndex, axis, timelineModel, noAnimation) {
+    if (pointer.dragging) {
+        return;
+    }
+
+    var pointerModel = timelineModel.getModel('checkpointStyle');
+    var toCoord = axis.dataToCoord(timelineModel.getData().get(['value'], dataIndex));
+
+    if (noAnimation || !pointerModel.get('animation', true)) {
+        pointer.attr({position: [toCoord, 0]});
+    }
+    else {
+        pointer.stopAnimation(true);
+        pointer.animateTo(
+            {position: [toCoord, 0]},
+            pointerModel.get('animationDuration', true),
+            pointerModel.get('animationEasing', true)
+        );
+    }
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * DataZoom component entry
+ */
+
+registerPreprocessor(preprocessor$3);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var ToolboxModel = extendComponentModel({
+
+    type: 'toolbox',
+
+    layoutMode: {
+        type: 'box',
+        ignoreSize: true
+    },
+
+    optionUpdated: function () {
+        ToolboxModel.superApply(this, 'optionUpdated', arguments);
+
+        each$1(this.option.feature, function (featureOpt, featureName) {
+            var Feature = get$1(featureName);
+            Feature && merge(featureOpt, Feature.defaultOption);
+        });
+    },
+
+    defaultOption: {
+
+        show: true,
+
+        z: 6,
+
+        zlevel: 0,
+
+        orient: 'horizontal',
+
+        left: 'right',
+
+        top: 'top',
+
+        // right
+        // bottom
+
+        backgroundColor: 'transparent',
+
+        borderColor: '#ccc',
+
+        borderRadius: 0,
+
+        borderWidth: 0,
+
+        padding: 5,
+
+        itemSize: 15,
+
+        itemGap: 8,
+
+        showTitle: true,
+
+        iconStyle: {
+            borderColor: '#666',
+            color: 'none'
+        },
+        emphasis: {
+            iconStyle: {
+                borderColor: '#3E98C5'
+            }
+        }
+        // textStyle: {},
+
+        // feature
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+extendComponentView({
+
+    type: 'toolbox',
+
+    render: function (toolboxModel, ecModel, api, payload) {
+        var group = this.group;
+        group.removeAll();
+
+        if (!toolboxModel.get('show')) {
+            return;
+        }
+
+        var itemSize = +toolboxModel.get('itemSize');
+        var featureOpts = toolboxModel.get('feature') || {};
+        var features = this._features || (this._features = {});
+
+        var featureNames = [];
+        each$1(featureOpts, function (opt, name) {
+            featureNames.push(name);
+        });
+
+        (new DataDiffer(this._featureNames || [], featureNames))
+            .add(processFeature)
+            .update(processFeature)
+            .remove(curry(processFeature, null))
+            .execute();
+
+        // Keep for diff.
+        this._featureNames = featureNames;
+
+        function processFeature(newIndex, oldIndex) {
+            var featureName = featureNames[newIndex];
+            var oldName = featureNames[oldIndex];
+            var featureOpt = featureOpts[featureName];
+            var featureModel = new Model(featureOpt, toolboxModel, toolboxModel.ecModel);
+            var feature;
+
+            if (featureName && !oldName) { // Create
+                if (isUserFeatureName(featureName)) {
+                    feature = {
+                        model: featureModel,
+                        onclick: featureModel.option.onclick,
+                        featureName: featureName
+                    };
+                }
+                else {
+                    var Feature = get$1(featureName);
+                    if (!Feature) {
+                        return;
+                    }
+                    feature = new Feature(featureModel, ecModel, api);
+                }
+                features[featureName] = feature;
+            }
+            else {
+                feature = features[oldName];
+                // If feature does not exsit.
+                if (!feature) {
+                    return;
+                }
+                feature.model = featureModel;
+                feature.ecModel = ecModel;
+                feature.api = api;
+            }
+
+            if (!featureName && oldName) {
+                feature.dispose && feature.dispose(ecModel, api);
+                return;
+            }
+
+            if (!featureModel.get('show') || feature.unusable) {
+                feature.remove && feature.remove(ecModel, api);
+                return;
+            }
+
+            createIconPaths(featureModel, feature, featureName);
+
+            featureModel.setIconStatus = function (iconName, status) {
+                var option = this.option;
+                var iconPaths = this.iconPaths;
+                option.iconStatus = option.iconStatus || {};
+                option.iconStatus[iconName] = status;
+                // FIXME
+                iconPaths[iconName] && iconPaths[iconName].trigger(status);
+            };
+
+            if (feature.render) {
+                feature.render(featureModel, ecModel, api, payload);
+            }
+        }
+
+        function createIconPaths(featureModel, feature, featureName) {
+            var iconStyleModel = featureModel.getModel('iconStyle');
+            var iconStyleEmphasisModel = featureModel.getModel('emphasis.iconStyle');
+
+            // If one feature has mutiple icon. they are orginaized as
+            // {
+            //     icon: {
+            //         foo: '',
+            //         bar: ''
+            //     },
+            //     title: {
+            //         foo: '',
+            //         bar: ''
+            //     }
+            // }
+            var icons = feature.getIcons ? feature.getIcons() : featureModel.get('icon');
+            var titles = featureModel.get('title') || {};
+            if (typeof icons === 'string') {
+                var icon = icons;
+                var title = titles;
+                icons = {};
+                titles = {};
+                icons[featureName] = icon;
+                titles[featureName] = title;
+            }
+            var iconPaths = featureModel.iconPaths = {};
+            each$1(icons, function (iconStr, iconName) {
+                var path = createIcon(
+                    iconStr,
+                    {},
+                    {
+                        x: -itemSize / 2,
+                        y: -itemSize / 2,
+                        width: itemSize,
+                        height: itemSize
+                    }
+                );
+                path.setStyle(iconStyleModel.getItemStyle());
+                path.hoverStyle = iconStyleEmphasisModel.getItemStyle();
+
+                setHoverStyle(path);
+
+                if (toolboxModel.get('showTitle')) {
+                    path.__title = titles[iconName];
+                    path.on('mouseover', function () {
+                            // Should not reuse above hoverStyle, which might be modified.
+                            var hoverStyle = iconStyleEmphasisModel.getItemStyle();
+                            path.setStyle({
+                                text: titles[iconName],
+                                textPosition: hoverStyle.textPosition || 'bottom',
+                                textFill: hoverStyle.fill || hoverStyle.stroke || '#000',
+                                textAlign: hoverStyle.textAlign || 'center'
+                            });
+                        })
+                        .on('mouseout', function () {
+                            path.setStyle({
+                                textFill: null
+                            });
+                        });
+                }
+                path.trigger(featureModel.get('iconStatus.' + iconName) || 'normal');
+
+                group.add(path);
+                path.on('click', bind(
+                    feature.onclick, feature, ecModel, api, iconName
+                ));
+
+                iconPaths[iconName] = path;
+            });
+        }
+
+        layout$3(group, toolboxModel, api);
+        // Render background after group is layout
+        // FIXME
+        group.add(makeBackground(group.getBoundingRect(), toolboxModel));
+
+        // Adjust icon title positions to avoid them out of screen
+        group.eachChild(function (icon) {
+            var titleText = icon.__title;
+            var hoverStyle = icon.hoverStyle;
+            // May be background element
+            if (hoverStyle && titleText) {
+                var rect = getBoundingRect(
+                    titleText, makeFont(hoverStyle)
+                );
+                var offsetX = icon.position[0] + group.position[0];
+                var offsetY = icon.position[1] + group.position[1] + itemSize;
+
+                var needPutOnTop = false;
+                if (offsetY + rect.height > api.getHeight()) {
+                    hoverStyle.textPosition = 'top';
+                    needPutOnTop = true;
+                }
+                var topOffset = needPutOnTop ? (-5 - rect.height) : (itemSize + 8);
+                if (offsetX + rect.width /  2 > api.getWidth()) {
+                    hoverStyle.textPosition = ['100%', topOffset];
+                    hoverStyle.textAlign = 'right';
+                }
+                else if (offsetX - rect.width / 2 < 0) {
+                    hoverStyle.textPosition = [0, topOffset];
+                    hoverStyle.textAlign = 'left';
+                }
+            }
+        });
+    },
+
+    updateView: function (toolboxModel, ecModel, api, payload) {
+        each$1(this._features, function (feature) {
+            feature.updateView && feature.updateView(feature.model, ecModel, api, payload);
+        });
+    },
+
+    // updateLayout: function (toolboxModel, ecModel, api, payload) {
+    //     zrUtil.each(this._features, function (feature) {
+    //         feature.updateLayout && feature.updateLayout(feature.model, ecModel, api, payload);
+    //     });
+    // },
+
+    remove: function (ecModel, api) {
+        each$1(this._features, function (feature) {
+            feature.remove && feature.remove(ecModel, api);
+        });
+        this.group.removeAll();
+    },
+
+    dispose: function (ecModel, api) {
+        each$1(this._features, function (feature) {
+            feature.dispose && feature.dispose(ecModel, api);
+        });
+    }
+});
+
+function isUserFeatureName(featureName) {
+    return featureName.indexOf('my') === 0;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var saveAsImageLang = lang.toolbox.saveAsImage;
+
+function SaveAsImage(model) {
+    this.model = model;
+}
+
+SaveAsImage.defaultOption = {
+    show: true,
+    icon: 'M4.7,22.9L29.3,45.5L54.7,23.4M4.6,43.6L4.6,58L53.8,58L53.8,43.6M29.2,45.1L29.2,0',
+    title: saveAsImageLang.title,
+    type: 'png',
+    // Default use option.backgroundColor
+    // backgroundColor: '#fff',
+    name: '',
+    excludeComponents: ['toolbox'],
+    pixelRatio: 1,
+    lang: saveAsImageLang.lang.slice()
+};
+
+SaveAsImage.prototype.unusable = !env$1.canvasSupported;
+
+var proto$4 = SaveAsImage.prototype;
+
+proto$4.onclick = function (ecModel, api) {
+    var model = this.model;
+    var title = model.get('name') || ecModel.get('title.0.text') || 'echarts';
+    var $a = document.createElement('a');
+    var type = model.get('type', true) || 'png';
+    $a.download = title + '.' + type;
+    $a.target = '_blank';
+    var url = api.getConnectedDataURL({
+        type: type,
+        backgroundColor: model.get('backgroundColor', true)
+            || ecModel.get('backgroundColor') || '#fff',
+        excludeComponents: model.get('excludeComponents'),
+        pixelRatio: model.get('pixelRatio')
+    });
+    $a.href = url;
+    // Chrome and Firefox
+    if (typeof MouseEvent === 'function' && !env$1.browser.ie && !env$1.browser.edge) {
+        var evt = new MouseEvent('click', {
+            view: window,
+            bubbles: true,
+            cancelable: false
+        });
+        $a.dispatchEvent(evt);
+    }
+    // IE
+    else {
+        if (window.navigator.msSaveOrOpenBlob) {
+            var bstr = atob(url.split(',')[1]);
+            var n = bstr.length;
+            var u8arr = new Uint8Array(n);
+            while(n--) {
+                u8arr[n] = bstr.charCodeAt(n);
+            }
+            var blob = new Blob([u8arr]);
+            window.navigator.msSaveOrOpenBlob(blob, title + '.' + type);
+        }
+        else {
+            var lang$$1 = model.get('lang');
+            var html = '' +
+                '<body style="margin:0;">' +
+                '<img src="' + url + '" style="max-width:100%;" title="' + ((lang$$1 && lang$$1[0]) || '') + '" />' +
+                '</body>';
+            var tab = window.open();
+            tab.document.write(html);
+        }
+    }
+};
+
+register$1(
+    'saveAsImage', SaveAsImage
+);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var magicTypeLang = lang.toolbox.magicType;
+
+function MagicType(model) {
+    this.model = model;
+}
+
+MagicType.defaultOption = {
+    show: true,
+    type: [],
+    // Icon group
+    icon: {
+        line: 'M4.1,28.9h7.1l9.3-22l7.4,38l9.7-19.7l3,12.8h14.9M4.1,58h51.4',
+        bar: 'M6.7,22.9h10V48h-10V22.9zM24.9,13h10v35h-10V13zM43.2,2h10v46h-10V2zM3.1,58h53.7',
+        stack: 'M8.2,38.4l-8.4,4.1l30.6,15.3L60,42.5l-8.1-4.1l-21.5,11L8.2,38.4z M51.9,30l-8.1,4.2l-13.4,6.9l-13.9-6.9L8.2,30l-8.4,4.2l8.4,4.2l22.2,11l21.5-11l8.1-4.2L51.9,30z M51.9,21.7l-8.1,4.2L35.7,30l-5.3,2.8L24.9,30l-8.4-4.1l-8.3-4.2l-8.4,4.2L8.2,30l8.3,4.2l13.9,6.9l13.4-6.9l8.1-4.2l8.1-4.1L51.9,21.7zM30.4,2.2L-0.2,17.5l8.4,4.1l8.3,4.2l8.4,4.2l5.5,2.7l5.3-2.7l8.1-4.2l8.1-4.2l8.1-4.1L30.4,2.2z', // jshint ignore:line
+        tiled: 'M2.3,2.2h22.8V25H2.3V2.2z M35,2.2h22.8V25H35V2.2zM2.3,35h22.8v22.8H2.3V35z M35,35h22.8v22.8H35V35z'
+    },
+    // `line`, `bar`, `stack`, `tiled`
+    title: clone(magicTypeLang.title),
+    option: {},
+    seriesIndex: {}
+};
+
+var proto$5 = MagicType.prototype;
+
+proto$5.getIcons = function () {
+    var model = this.model;
+    var availableIcons = model.get('icon');
+    var icons = {};
+    each$1(model.get('type'), function (type) {
+        if (availableIcons[type]) {
+            icons[type] = availableIcons[type];
+        }
+    });
+    return icons;
+};
+
+var seriesOptGenreator = {
+    'line': function (seriesType, seriesId, seriesModel, model) {
+        if (seriesType === 'bar') {
+            return merge({
+                id: seriesId,
+                type: 'line',
+                // Preserve data related option
+                data: seriesModel.get('data'),
+                stack: seriesModel.get('stack'),
+                markPoint: seriesModel.get('markPoint'),
+                markLine: seriesModel.get('markLine')
+            }, model.get('option.line') || {}, true);
+        }
+    },
+    'bar': function (seriesType, seriesId, seriesModel, model) {
+        if (seriesType === 'line') {
+            return merge({
+                id: seriesId,
+                type: 'bar',
+                // Preserve data related option
+                data: seriesModel.get('data'),
+                stack: seriesModel.get('stack'),
+                markPoint: seriesModel.get('markPoint'),
+                markLine: seriesModel.get('markLine')
+            }, model.get('option.bar') || {}, true);
+        }
+    },
+    'stack': function (seriesType, seriesId, seriesModel, model) {
+        if (seriesType === 'line' || seriesType === 'bar') {
+            return merge({
+                id: seriesId,
+                stack: '__ec_magicType_stack__'
+            }, model.get('option.stack') || {}, true);
+        }
+    },
+    'tiled': function (seriesType, seriesId, seriesModel, model) {
+        if (seriesType === 'line' || seriesType === 'bar') {
+            return merge({
+                id: seriesId,
+                stack: ''
+            }, model.get('option.tiled') || {}, true);
+        }
+    }
+};
+
+var radioTypes = [
+    ['line', 'bar'],
+    ['stack', 'tiled']
+];
+
+proto$5.onclick = function (ecModel, api, type) {
+    var model = this.model;
+    var seriesIndex = model.get('seriesIndex.' + type);
+    // Not supported magicType
+    if (!seriesOptGenreator[type]) {
+        return;
+    }
+    var newOption = {
+        series: []
+    };
+    var generateNewSeriesTypes = function (seriesModel) {
+        var seriesType = seriesModel.subType;
+        var seriesId = seriesModel.id;
+        var newSeriesOpt = seriesOptGenreator[type](
+            seriesType, seriesId, seriesModel, model
+        );
+        if (newSeriesOpt) {
+            // PENDING If merge original option?
+            defaults(newSeriesOpt, seriesModel.option);
+            newOption.series.push(newSeriesOpt);
+        }
+        // Modify boundaryGap
+        var coordSys = seriesModel.coordinateSystem;
+        if (coordSys && coordSys.type === 'cartesian2d' && (type === 'line' || type === 'bar')) {
+            var categoryAxis = coordSys.getAxesByScale('ordinal')[0];
+            if (categoryAxis) {
+                var axisDim = categoryAxis.dim;
+                var axisType = axisDim + 'Axis';
+                var axisModel = ecModel.queryComponents({
+                    mainType: axisType,
+                    index: seriesModel.get(name + 'Index'),
+                    id: seriesModel.get(name + 'Id')
+                })[0];
+                var axisIndex = axisModel.componentIndex;
+
+                newOption[axisType] = newOption[axisType] || [];
+                for (var i = 0; i <= axisIndex; i++) {
+                    newOption[axisType][axisIndex] = newOption[axisType][axisIndex] || {};
+                }
+                newOption[axisType][axisIndex].boundaryGap = type === 'bar' ? true : false;
+            }
+        }
+    };
+
+    each$1(radioTypes, function (radio) {
+        if (indexOf(radio, type) >= 0) {
+            each$1(radio, function (item) {
+                model.setIconStatus(item, 'normal');
+            });
+        }
+    });
+
+    model.setIconStatus(type, 'emphasis');
+
+    ecModel.eachComponent(
+        {
+            mainType: 'series',
+            query: seriesIndex == null ? null : {
+                seriesIndex: seriesIndex
+            }
+        }, generateNewSeriesTypes
+    );
+    api.dispatchAction({
+        type: 'changeMagicType',
+        currentType: type,
+        newOption: newOption
+    });
+};
+
+registerAction({
+    type: 'changeMagicType',
+    event: 'magicTypeChanged',
+    update: 'prepareAndUpdate'
+}, function (payload, ecModel) {
+    ecModel.mergeOption(payload.newOption);
+});
+
+register$1('magicType', MagicType);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var dataViewLang = lang.toolbox.dataView;
+
+var BLOCK_SPLITER = new Array(60).join('-');
+var ITEM_SPLITER = '\t';
+/**
+ * Group series into two types
+ *  1. on category axis, like line, bar
+ *  2. others, like scatter, pie
+ * @param {module:echarts/model/Global} ecModel
+ * @return {Object}
+ * @inner
+ */
+function groupSeries(ecModel) {
+    var seriesGroupByCategoryAxis = {};
+    var otherSeries = [];
+    var meta = [];
+    ecModel.eachRawSeries(function (seriesModel) {
+        var coordSys = seriesModel.coordinateSystem;
+
+        if (coordSys && (coordSys.type === 'cartesian2d' || coordSys.type === 'polar')) {
+            var baseAxis = coordSys.getBaseAxis();
+            if (baseAxis.type === 'category') {
+                var key = baseAxis.dim + '_' + baseAxis.index;
+                if (!seriesGroupByCategoryAxis[key]) {
+                    seriesGroupByCategoryAxis[key] = {
+                        categoryAxis: baseAxis,
+                        valueAxis: coordSys.getOtherAxis(baseAxis),
+                        series: []
+                    };
+                    meta.push({
+                        axisDim: baseAxis.dim,
+                        axisIndex: baseAxis.index
+                    });
+                }
+                seriesGroupByCategoryAxis[key].series.push(seriesModel);
+            }
+            else {
+                otherSeries.push(seriesModel);
+            }
+        }
+        else {
+            otherSeries.push(seriesModel);
+        }
+    });
+
+    return {
+        seriesGroupByCategoryAxis: seriesGroupByCategoryAxis,
+        other: otherSeries,
+        meta: meta
+    };
+}
+
+/**
+ * Assemble content of series on cateogory axis
+ * @param {Array.<module:echarts/model/Series>} series
+ * @return {string}
+ * @inner
+ */
+function assembleSeriesWithCategoryAxis(series) {
+    var tables = [];
+    each$1(series, function (group, key) {
+        var categoryAxis = group.categoryAxis;
+        var valueAxis = group.valueAxis;
+        var valueAxisDim = valueAxis.dim;
+
+        var headers = [' '].concat(map(group.series, function (series) {
+            return series.name;
+        }));
+        var columns = [categoryAxis.model.getCategories()];
+        each$1(group.series, function (series) {
+            columns.push(series.getRawData().mapArray(valueAxisDim, function (val) {
+                return val;
+            }));
+        });
+        // Assemble table content
+        var lines = [headers.join(ITEM_SPLITER)];
+        for (var i = 0; i < columns[0].length; i++) {
+            var items = [];
+            for (var j = 0; j < columns.length; j++) {
+                items.push(columns[j][i]);
+            }
+            lines.push(items.join(ITEM_SPLITER));
+        }
+        tables.push(lines.join('\n'));
+    });
+    return tables.join('\n\n' +  BLOCK_SPLITER + '\n\n');
+}
+
+/**
+ * Assemble content of other series
+ * @param {Array.<module:echarts/model/Series>} series
+ * @return {string}
+ * @inner
+ */
+function assembleOtherSeries(series) {
+    return map(series, function (series) {
+        var data = series.getRawData();
+        var lines = [series.name];
+        var vals = [];
+        data.each(data.dimensions, function () {
+            var argLen = arguments.length;
+            var dataIndex = arguments[argLen - 1];
+            var name = data.getName(dataIndex);
+            for (var i = 0; i < argLen - 1; i++) {
+                vals[i] = arguments[i];
+            }
+            lines.push((name ? (name + ITEM_SPLITER) : '') + vals.join(ITEM_SPLITER));
+        });
+        return lines.join('\n');
+    }).join('\n\n' + BLOCK_SPLITER + '\n\n');
+}
+
+/**
+ * @param {module:echarts/model/Global}
+ * @return {Object}
+ * @inner
+ */
+function getContentFromModel(ecModel) {
+
+    var result = groupSeries(ecModel);
+
+    return {
+        value: filter([
+                assembleSeriesWithCategoryAxis(result.seriesGroupByCategoryAxis),
+                assembleOtherSeries(result.other)
+            ], function (str) {
+                return str.replace(/[\n\t\s]/g, '');
+            }).join('\n\n' + BLOCK_SPLITER + '\n\n'),
+
+        meta: result.meta
+    };
+}
+
+
+function trim$1(str) {
+    return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
+}
+/**
+ * If a block is tsv format
+ */
+function isTSVFormat(block) {
+    // Simple method to find out if a block is tsv format
+    var firstLine = block.slice(0, block.indexOf('\n'));
+    if (firstLine.indexOf(ITEM_SPLITER) >= 0) {
+        return true;
+    }
+}
+
+var itemSplitRegex = new RegExp('[' + ITEM_SPLITER + ']+', 'g');
+/**
+ * @param {string} tsv
+ * @return {Object}
+ */
+function parseTSVContents(tsv) {
+    var tsvLines = tsv.split(/\n+/g);
+    var headers = trim$1(tsvLines.shift()).split(itemSplitRegex);
+
+    var categories = [];
+    var series = map(headers, function (header) {
+        return {
+            name: header,
+            data: []
+        };
+    });
+    for (var i = 0; i < tsvLines.length; i++) {
+        var items = trim$1(tsvLines[i]).split(itemSplitRegex);
+        categories.push(items.shift());
+        for (var j = 0; j < items.length; j++) {
+            series[j] && (series[j].data[i] = items[j]);
+        }
+    }
+    return {
+        series: series,
+        categories: categories
+    };
+}
+
+/**
+ * @param {string} str
+ * @return {Array.<Object>}
+ * @inner
+ */
+function parseListContents(str) {
+    var lines = str.split(/\n+/g);
+    var seriesName = trim$1(lines.shift());
+
+    var data = [];
+    for (var i = 0; i < lines.length; i++) {
+        var items = trim$1(lines[i]).split(itemSplitRegex);
+        var name = '';
+        var value;
+        var hasName = false;
+        if (isNaN(items[0])) { // First item is name
+            hasName = true;
+            name = items[0];
+            items = items.slice(1);
+            data[i] = {
+                name: name,
+                value: []
+            };
+            value = data[i].value;
+        }
+        else {
+            value = data[i] = [];
+        }
+        for (var j = 0; j < items.length; j++) {
+            value.push(+items[j]);
+        }
+        if (value.length === 1) {
+            hasName ? (data[i].value = value[0]) : (data[i] = value[0]);
+        }
+    }
+
+    return {
+        name: seriesName,
+        data: data
+    };
+}
+
+/**
+ * @param {string} str
+ * @param {Array.<Object>} blockMetaList
+ * @return {Object}
+ * @inner
+ */
+function parseContents(str, blockMetaList) {
+    var blocks = str.split(new RegExp('\n*' + BLOCK_SPLITER + '\n*', 'g'));
+    var newOption = {
+        series: []
+    };
+    each$1(blocks, function (block, idx) {
+        if (isTSVFormat(block)) {
+            var result = parseTSVContents(block);
+            var blockMeta = blockMetaList[idx];
+            var axisKey = blockMeta.axisDim + 'Axis';
+
+            if (blockMeta) {
+                newOption[axisKey] = newOption[axisKey] || [];
+                newOption[axisKey][blockMeta.axisIndex] = {
+                    data: result.categories
+                };
+                newOption.series = newOption.series.concat(result.series);
+            }
+        }
+        else {
+            var result = parseListContents(block);
+            newOption.series.push(result);
+        }
+    });
+    return newOption;
+}
+
+/**
+ * @alias {module:echarts/component/toolbox/feature/DataView}
+ * @constructor
+ * @param {module:echarts/model/Model} model
+ */
+function DataView(model) {
+
+    this._dom = null;
+
+    this.model = model;
+}
+
+DataView.defaultOption = {
+    show: true,
+    readOnly: false,
+    optionToContent: null,
+    contentToOption: null,
+
+    icon: 'M17.5,17.3H33 M17.5,17.3H33 M45.4,29.5h-28 M11.5,2v56H51V14.8L38.4,2H11.5z M38.4,2.2v12.7H51 M45.4,41.7h-28',
+    title: clone(dataViewLang.title),
+    lang: clone(dataViewLang.lang),
+    backgroundColor: '#fff',
+    textColor: '#000',
+    textareaColor: '#fff',
+    textareaBorderColor: '#333',
+    buttonColor: '#c23531',
+    buttonTextColor: '#fff'
+};
+
+DataView.prototype.onclick = function (ecModel, api) {
+    var container = api.getDom();
+    var model = this.model;
+    if (this._dom) {
+        container.removeChild(this._dom);
+    }
+    var root = document.createElement('div');
+    root.style.cssText = 'position:absolute;left:5px;top:5px;bottom:5px;right:5px;';
+    root.style.backgroundColor = model.get('backgroundColor') || '#fff';
+
+    // Create elements
+    var header = document.createElement('h4');
+    var lang$$1 = model.get('lang') || [];
+    header.innerHTML = lang$$1[0] || model.get('title');
+    header.style.cssText = 'margin: 10px 20px;';
+    header.style.color = model.get('textColor');
+
+    var viewMain = document.createElement('div');
+    var textarea = document.createElement('textarea');
+    viewMain.style.cssText = 'display:block;width:100%;overflow:auto;';
+
+    var optionToContent = model.get('optionToContent');
+    var contentToOption = model.get('contentToOption');
+    var result = getContentFromModel(ecModel);
+    if (typeof optionToContent === 'function') {
+        var htmlOrDom = optionToContent(api.getOption());
+        if (typeof htmlOrDom === 'string') {
+            viewMain.innerHTML = htmlOrDom;
+        }
+        else if (isDom(htmlOrDom)) {
+            viewMain.appendChild(htmlOrDom);
+        }
+    }
+    else {
+        // Use default textarea
+        viewMain.appendChild(textarea);
+        textarea.readOnly = model.get('readOnly');
+        textarea.style.cssText = 'width:100%;height:100%;font-family:monospace;font-size:14px;line-height:1.6rem;';
+        textarea.style.color = model.get('textColor');
+        textarea.style.borderColor = model.get('textareaBorderColor');
+        textarea.style.backgroundColor = model.get('textareaColor');
+        textarea.value = result.value;
+    }
+
+    var blockMetaList = result.meta;
+
+    var buttonContainer = document.createElement('div');
+    buttonContainer.style.cssText = 'position:absolute;bottom:0;left:0;right:0;';
+
+    var buttonStyle = 'float:right;margin-right:20px;border:none;'
+        + 'cursor:pointer;padding:2px 5px;font-size:12px;border-radius:3px';
+    var closeButton = document.createElement('div');
+    var refreshButton = document.createElement('div');
+
+    buttonStyle += ';background-color:' + model.get('buttonColor');
+    buttonStyle += ';color:' + model.get('buttonTextColor');
+
+    var self = this;
+
+    function close() {
+        container.removeChild(root);
+        self._dom = null;
+    }
+    addEventListener(closeButton, 'click', close);
+
+    addEventListener(refreshButton, 'click', function () {
+        var newOption;
+        try {
+            if (typeof contentToOption === 'function') {
+                newOption = contentToOption(viewMain, api.getOption());
+            }
+            else {
+                newOption = parseContents(textarea.value, blockMetaList);
+            }
+        }
+        catch (e) {
+            close();
+            throw new Error('Data view format error ' + e);
+        }
+        if (newOption) {
+            api.dispatchAction({
+                type: 'changeDataView',
+                newOption: newOption
+            });
+        }
+
+        close();
+    });
+
+    closeButton.innerHTML = lang$$1[1];
+    refreshButton.innerHTML = lang$$1[2];
+    refreshButton.style.cssText = buttonStyle;
+    closeButton.style.cssText = buttonStyle;
+
+    !model.get('readOnly') && buttonContainer.appendChild(refreshButton);
+    buttonContainer.appendChild(closeButton);
+
+    // http://stackoverflow.com/questions/6637341/use-tab-to-indent-in-textarea
+    addEventListener(textarea, 'keydown', function (e) {
+        if ((e.keyCode || e.which) === 9) {
+            // get caret position/selection
+            var val = this.value;
+            var start = this.selectionStart;
+            var end = this.selectionEnd;
+
+            // set textarea value to: text before caret + tab + text after caret
+            this.value = val.substring(0, start) + ITEM_SPLITER + val.substring(end);
+
+            // put caret at right position again
+            this.selectionStart = this.selectionEnd = start + 1;
+
+            // prevent the focus lose
+            stop(e);
+        }
+    });
+
+    root.appendChild(header);
+    root.appendChild(viewMain);
+    root.appendChild(buttonContainer);
+
+    viewMain.style.height = (container.clientHeight - 80) + 'px';
+
+    container.appendChild(root);
+    this._dom = root;
+};
+
+DataView.prototype.remove = function (ecModel, api) {
+    this._dom && api.getDom().removeChild(this._dom);
+};
+
+DataView.prototype.dispose = function (ecModel, api) {
+    this.remove(ecModel, api);
+};
+
+/**
+ * @inner
+ */
+function tryMergeDataOption(newData, originalData) {
+    return map(newData, function (newVal, idx) {
+        var original = originalData && originalData[idx];
+        if (isObject$1(original) && !isArray(original)) {
+            if (isObject$1(newVal) && !isArray(newVal)) {
+                newVal = newVal.value;
+            }
+            // Original data has option
+            return defaults({
+                value: newVal
+            }, original);
+        }
+        else {
+            return newVal;
+        }
+    });
+}
+
+register$1('dataView', DataView);
+
+registerAction({
+    type: 'changeDataView',
+    event: 'dataViewChanged',
+    update: 'prepareAndUpdate'
+}, function (payload, ecModel) {
+    var newSeriesOptList = [];
+    each$1(payload.newOption.series, function (seriesOpt) {
+        var seriesModel = ecModel.getSeriesByName(seriesOpt.name)[0];
+        if (!seriesModel) {
+            // New created series
+            // Geuss the series type
+            newSeriesOptList.push(extend({
+                // Default is scatter
+                type: 'scatter'
+            }, seriesOpt));
+        }
+        else {
+            var originalData = seriesModel.get('data');
+            newSeriesOptList.push({
+                name: seriesOpt.name,
+                data: tryMergeDataOption(seriesOpt.data, originalData)
+            });
+        }
+    });
+
+    ecModel.mergeOption(defaults({
+        series: newSeriesOptList
+    }, payload.newOption));
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var each$29 = each$1;
+
+var ATTR$2 = '\0_ec_hist_store';
+
+/**
+ * @param {module:echarts/model/Global} ecModel
+ * @param {Object} newSnapshot {dataZoomId, batch: [payloadInfo, ...]}
+ */
+function push(ecModel, newSnapshot) {
+    var store = giveStore$1(ecModel);
+
+    // If previous dataZoom can not be found,
+    // complete an range with current range.
+    each$29(newSnapshot, function (batchItem, dataZoomId) {
+        var i = store.length - 1;
+        for (; i >= 0; i--) {
+            var snapshot = store[i];
+            if (snapshot[dataZoomId]) {
+                break;
+            }
+        }
+        if (i < 0) {
+            // No origin range set, create one by current range.
+            var dataZoomModel = ecModel.queryComponents(
+                {mainType: 'dataZoom', subType: 'select', id: dataZoomId}
+            )[0];
+            if (dataZoomModel) {
+                var percentRange = dataZoomModel.getPercentRange();
+                store[0][dataZoomId] = {
+                    dataZoomId: dataZoomId,
+                    start: percentRange[0],
+                    end: percentRange[1]
+                };
+            }
+        }
+    });
+
+    store.push(newSnapshot);
+}
+
+/**
+ * @param {module:echarts/model/Global} ecModel
+ * @return {Object} snapshot
+ */
+function pop(ecModel) {
+    var store = giveStore$1(ecModel);
+    var head = store[store.length - 1];
+    store.length > 1 && store.pop();
+
+    // Find top for all dataZoom.
+    var snapshot = {};
+    each$29(head, function (batchItem, dataZoomId) {
+        for (var i = store.length - 1; i >= 0; i--) {
+            var batchItem = store[i][dataZoomId];
+            if (batchItem) {
+                snapshot[dataZoomId] = batchItem;
+                break;
+            }
+        }
+    });
+
+    return snapshot;
+}
+
+/**
+ * @param {module:echarts/model/Global} ecModel
+ */
+function clear$1(ecModel) {
+    ecModel[ATTR$2] = null;
+}
+
+/**
+ * @param {module:echarts/model/Global} ecModel
+ * @return {number} records. always >= 1.
+ */
+function count(ecModel) {
+    return giveStore$1(ecModel).length;
+}
+
+/**
+ * [{key: dataZoomId, value: {dataZoomId, range}}, ...]
+ * History length of each dataZoom may be different.
+ * this._history[0] is used to store origin range.
+ * @type {Array.<Object>}
+ */
+function giveStore$1(ecModel) {
+    var store = ecModel[ATTR$2];
+    if (!store) {
+        store = ecModel[ATTR$2] = [{}];
+    }
+    return store;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+DataZoomModel.extend({
+    type: 'dataZoom.select'
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+DataZoomView.extend({
+    type: 'dataZoom.select'
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * DataZoom component entry
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// Use dataZoomSelect
+var dataZoomLang = lang.toolbox.dataZoom;
+var each$28 = each$1;
+
+// Spectial component id start with \0ec\0, see echarts/model/Global.js~hasInnerId
+var DATA_ZOOM_ID_BASE = '\0_ec_\0toolbox-dataZoom_';
+
+function DataZoom(model, ecModel, api) {
+
+    /**
+     * @private
+     * @type {module:echarts/component/helper/BrushController}
+     */
+    (this._brushController = new BrushController(api.getZr()))
+        .on('brush', bind(this._onBrush, this))
+        .mount();
+
+    /**
+     * @private
+     * @type {boolean}
+     */
+    this._isZoomActive;
+}
+
+DataZoom.defaultOption = {
+    show: true,
+    // Icon group
+    icon: {
+        zoom: 'M0,13.5h26.9 M13.5,26.9V0 M32.1,13.5H58V58H13.5 V32.1',
+        back: 'M22,1.4L9.9,13.5l12.3,12.3 M10.3,13.5H54.9v44.6 H10.3v-26'
+    },
+    // `zoom`, `back`
+    title: clone(dataZoomLang.title)
+};
+
+var proto$6 = DataZoom.prototype;
+
+proto$6.render = function (featureModel, ecModel, api, payload) {
+    this.model = featureModel;
+    this.ecModel = ecModel;
+    this.api = api;
+
+    updateZoomBtnStatus(featureModel, ecModel, this, payload, api);
+    updateBackBtnStatus(featureModel, ecModel);
+};
+
+proto$6.onclick = function (ecModel, api, type) {
+    handlers$1[type].call(this);
+};
+
+proto$6.remove = function (ecModel, api) {
+    this._brushController.unmount();
+};
+
+proto$6.dispose = function (ecModel, api) {
+    this._brushController.dispose();
+};
+
+/**
+ * @private
+ */
+var handlers$1 = {
+
+    zoom: function () {
+        var nextActive = !this._isZoomActive;
+
+        this.api.dispatchAction({
+            type: 'takeGlobalCursor',
+            key: 'dataZoomSelect',
+            dataZoomSelectActive: nextActive
+        });
+    },
+
+    back: function () {
+        this._dispatchZoomAction(pop(this.ecModel));
+    }
+};
+
+/**
+ * @private
+ */
+proto$6._onBrush = function (areas, opt) {
+    if (!opt.isEnd || !areas.length) {
+        return;
+    }
+    var snapshot = {};
+    var ecModel = this.ecModel;
+
+    this._brushController.updateCovers([]); // remove cover
+
+    var brushTargetManager = new BrushTargetManager(
+        retrieveAxisSetting(this.model.option), ecModel, {include: ['grid']}
+    );
+    brushTargetManager.matchOutputRanges(areas, ecModel, function (area, coordRange, coordSys) {
+        if (coordSys.type !== 'cartesian2d') {
+            return;
+        }
+
+        var brushType = area.brushType;
+        if (brushType === 'rect') {
+            setBatch('x', coordSys, coordRange[0]);
+            setBatch('y', coordSys, coordRange[1]);
+        }
+        else {
+            setBatch(({lineX: 'x', lineY: 'y'})[brushType], coordSys, coordRange);
+        }
+    });
+
+    push(ecModel, snapshot);
+
+    this._dispatchZoomAction(snapshot);
+
+    function setBatch(dimName, coordSys, minMax) {
+        var axis = coordSys.getAxis(dimName);
+        var axisModel = axis.model;
+        var dataZoomModel = findDataZoom(dimName, axisModel, ecModel);
+
+        // Restrict range.
+        var minMaxSpan = dataZoomModel.findRepresentativeAxisProxy(axisModel).getMinMaxSpan();
+        if (minMaxSpan.minValueSpan != null || minMaxSpan.maxValueSpan != null) {
+            minMax = sliderMove(
+                0, minMax.slice(), axis.scale.getExtent(), 0,
+                minMaxSpan.minValueSpan, minMaxSpan.maxValueSpan
+            );
+        }
+
+        dataZoomModel && (snapshot[dataZoomModel.id] = {
+            dataZoomId: dataZoomModel.id,
+            startValue: minMax[0],
+            endValue: minMax[1]
+        });
+    }
+
+    function findDataZoom(dimName, axisModel, ecModel) {
+        var found;
+        ecModel.eachComponent({mainType: 'dataZoom', subType: 'select'}, function (dzModel) {
+            var has = dzModel.getAxisModel(dimName, axisModel.componentIndex);
+            has && (found = dzModel);
+        });
+        return found;
+    }
+};
+
+/**
+ * @private
+ */
+proto$6._dispatchZoomAction = function (snapshot) {
+    var batch = [];
+
+    // Convert from hash map to array.
+    each$28(snapshot, function (batchItem, dataZoomId) {
+        batch.push(clone(batchItem));
+    });
+
+    batch.length && this.api.dispatchAction({
+        type: 'dataZoom',
+        from: this.uid,
+        batch: batch
+    });
+};
+
+function retrieveAxisSetting(option) {
+    var setting = {};
+    // Compatible with previous setting: null => all axis, false => no axis.
+    each$1(['xAxisIndex', 'yAxisIndex'], function (name) {
+        setting[name] = option[name];
+        setting[name] == null && (setting[name] = 'all');
+        (setting[name] === false || setting[name] === 'none') && (setting[name] = []);
+    });
+    return setting;
+}
+
+function updateBackBtnStatus(featureModel, ecModel) {
+    featureModel.setIconStatus(
+        'back',
+        count(ecModel) > 1 ? 'emphasis' : 'normal'
+    );
+}
+
+function updateZoomBtnStatus(featureModel, ecModel, view, payload, api) {
+    var zoomActive = view._isZoomActive;
+
+    if (payload && payload.type === 'takeGlobalCursor') {
+        zoomActive = payload.key === 'dataZoomSelect'
+            ? payload.dataZoomSelectActive : false;
+    }
+
+    view._isZoomActive = zoomActive;
+
+    featureModel.setIconStatus('zoom', zoomActive ? 'emphasis' : 'normal');
+
+    var brushTargetManager = new BrushTargetManager(
+        retrieveAxisSetting(featureModel.option), ecModel, {include: ['grid']}
+    );
+
+    view._brushController
+        .setPanels(brushTargetManager.makePanelOpts(api, function (targetInfo) {
+            return (targetInfo.xAxisDeclared && !targetInfo.yAxisDeclared)
+                ? 'lineX'
+                : (!targetInfo.xAxisDeclared && targetInfo.yAxisDeclared)
+                ? 'lineY'
+                : 'rect';
+        }))
+        .enableBrush(
+            zoomActive
+            ? {
+                brushType: 'auto',
+                brushStyle: {
+                    // FIXME user customized?
+                    lineWidth: 0,
+                    fill: 'rgba(0,0,0,0.2)'
+                }
+            }
+            : false
+        );
+}
+
+
+register$1('dataZoom', DataZoom);
+
+
+// Create special dataZoom option for select
+// FIXME consider the case of merge option, where axes options are not exists.
+registerPreprocessor(function (option) {
+    if (!option) {
+        return;
+    }
+
+    var dataZoomOpts = option.dataZoom || (option.dataZoom = []);
+    if (!isArray(dataZoomOpts)) {
+        option.dataZoom = dataZoomOpts = [dataZoomOpts];
+    }
+
+    var toolboxOpt = option.toolbox;
+    if (toolboxOpt) {
+        // Assume there is only one toolbox
+        if (isArray(toolboxOpt)) {
+            toolboxOpt = toolboxOpt[0];
+        }
+
+        if (toolboxOpt && toolboxOpt.feature) {
+            var dataZoomOpt = toolboxOpt.feature.dataZoom;
+            // FIXME: If add dataZoom when setOption in merge mode,
+            // no axis info to be added. See `test/dataZoom-extreme.html`
+            addForAxis('xAxis', dataZoomOpt);
+            addForAxis('yAxis', dataZoomOpt);
+        }
+    }
+
+    function addForAxis(axisName, dataZoomOpt) {
+        if (!dataZoomOpt) {
+            return;
+        }
+
+        // Try not to modify model, because it is not merged yet.
+        var axisIndicesName = axisName + 'Index';
+        var givenAxisIndices = dataZoomOpt[axisIndicesName];
+        if (givenAxisIndices != null
+            && givenAxisIndices != 'all'
+            && !isArray(givenAxisIndices)
+        ) {
+            givenAxisIndices = (givenAxisIndices === false || givenAxisIndices === 'none') ? [] : [givenAxisIndices];
+        }
+
+        forEachComponent(axisName, function (axisOpt, axisIndex) {
+            if (givenAxisIndices != null
+                && givenAxisIndices != 'all'
+                && indexOf(givenAxisIndices, axisIndex) === -1
+            ) {
+                return;
+            }
+            var newOpt = {
+                type: 'select',
+                $fromToolbox: true,
+                // Id for merge mapping.
+                id: DATA_ZOOM_ID_BASE + axisName + axisIndex
+            };
+            // FIXME
+            // Only support one axis now.
+            newOpt[axisIndicesName] = axisIndex;
+            dataZoomOpts.push(newOpt);
+        });
+    }
+
+    function forEachComponent(mainType, cb) {
+        var opts = option[mainType];
+        if (!isArray(opts)) {
+            opts = opts ? [opts] : [];
+        }
+        each$28(opts, cb);
+    }
+});
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var restoreLang = lang.toolbox.restore;
+
+function Restore(model) {
+    this.model = model;
+}
+
+Restore.defaultOption = {
+    show: true,
+    icon: 'M3.8,33.4 M47,18.9h9.8V8.7 M56.3,20.1 C52.1,9,40.5,0.6,26.8,2.1C12.6,3.7,1.6,16.2,2.1,30.6 M13,41.1H3.1v10.2 M3.7,39.9c4.2,11.1,15.8,19.5,29.5,18 c14.2-1.6,25.2-14.1,24.7-28.5',
+    title: restoreLang.title
+};
+
+var proto$7 = Restore.prototype;
+
+proto$7.onclick = function (ecModel, api, type) {
+    clear$1(ecModel);
+
+    api.dispatchAction({
+        type: 'restore',
+        from: this.uid
+    });
+};
+
+register$1('restore', Restore);
+
+registerAction(
+    {type: 'restore', event: 'restore', update: 'prepareAndUpdate'},
+    function (payload, ecModel) {
+        ecModel.resetOption('recreate');
+    }
+);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+var urn = 'urn:schemas-microsoft-com:vml';
+var win = typeof window === 'undefined' ? null : window;
+
+var vmlInited = false;
+
+var doc = win && win.document;
+
+function createNode(tagName) {
+    return doCreateNode(tagName);
+}
+
+// Avoid assign to an exported variable, for transforming to cjs.
+var doCreateNode;
+
+if (doc && !env$1.canvasSupported) {
+    try {
+        !doc.namespaces.zrvml && doc.namespaces.add('zrvml', urn);
+        doCreateNode = function (tagName) {
+            return doc.createElement('<zrvml:' + tagName + ' class="zrvml">');
+        };
+    }
+    catch (e) {
+        doCreateNode = function (tagName) {
+            return doc.createElement('<' + tagName + ' xmlns="' + urn + '" class="zrvml">');
+        };
+    }
+}
+
+// From raphael
+function initVML() {
+    if (vmlInited || !doc) {
+        return;
+    }
+    vmlInited = true;
+
+    var styleSheets = doc.styleSheets;
+    if (styleSheets.length < 31) {
+        doc.createStyleSheet().addRule('.zrvml', 'behavior:url(#default#VML)');
+    }
+    else {
+        // http://msdn.microsoft.com/en-us/library/ms531194%28VS.85%29.aspx
+        styleSheets[0].addRule('.zrvml', 'behavior:url(#default#VML)');
+    }
+}
+
+// http://www.w3.org/TR/NOTE-VML
+// TODO Use proxy like svg instead of overwrite brush methods
+
+var CMD$3 = PathProxy.CMD;
+var round$3 = Math.round;
+var sqrt = Math.sqrt;
+var abs$1 = Math.abs;
+var cos = Math.cos;
+var sin = Math.sin;
+var mathMax$8 = Math.max;
+
+if (!env$1.canvasSupported) {
+
+    var comma = ',';
+    var imageTransformPrefix = 'progid:DXImageTransform.Microsoft';
+
+    var Z = 21600;
+    var Z2 = Z / 2;
+
+    var ZLEVEL_BASE = 100000;
+    var Z_BASE$1 = 1000;
+
+    var initRootElStyle = function (el) {
+        el.style.cssText = 'position:absolute;left:0;top:0;width:1px;height:1px;';
+        el.coordsize = Z + ','  + Z;
+        el.coordorigin = '0,0';
+    };
+
+    var encodeHtmlAttribute = function (s) {
+        return String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+    };
+
+    var rgb2Str = function (r, g, b) {
+        return 'rgb(' + [r, g, b].join(',') + ')';
+    };
+
+    var append = function (parent, child) {
+        if (child && parent && child.parentNode !== parent) {
+            parent.appendChild(child);
+        }
+    };
+
+    var remove = function (parent, child) {
+        if (child && parent && child.parentNode === parent) {
+            parent.removeChild(child);
+        }
+    };
+
+    var getZIndex = function (zlevel, z, z2) {
+        // z çš„å–å€¼èŒƒå›´ä¸º [0, 1000]
+        return (parseFloat(zlevel) || 0) * ZLEVEL_BASE + (parseFloat(z) || 0) * Z_BASE$1 + z2;
+    };
+
+    var parsePercent$3 = function (value, maxValue) {
+        if (typeof value === 'string') {
+            if (value.lastIndexOf('%') >= 0) {
+                return parseFloat(value) / 100 * maxValue;
+            }
+            return parseFloat(value);
+        }
+        return value;
+    };
+
+    /***************************************************
+     * PATH
+     **************************************************/
+
+    var setColorAndOpacity = function (el, color, opacity) {
+        var colorArr = parse(color);
+        opacity = +opacity;
+        if (isNaN(opacity)) {
+            opacity = 1;
+        }
+        if (colorArr) {
+            el.color = rgb2Str(colorArr[0], colorArr[1], colorArr[2]);
+            el.opacity = opacity * colorArr[3];
+        }
+    };
+
+    var getColorAndAlpha = function (color) {
+        var colorArr = parse(color);
+        return [
+            rgb2Str(colorArr[0], colorArr[1], colorArr[2]),
+            colorArr[3]
+        ];
+    };
+
+    var updateFillNode = function (el, style, zrEl) {
+        // TODO pattern
+        var fill = style.fill;
+        if (fill != null) {
+            // Modified from excanvas
+            if (fill instanceof Gradient) {
+                var gradientType;
+                var angle = 0;
+                var focus = [0, 0];
+                // additional offset
+                var shift = 0;
+                // scale factor for offset
+                var expansion = 1;
+                var rect = zrEl.getBoundingRect();
+                var rectWidth = rect.width;
+                var rectHeight = rect.height;
+                if (fill.type === 'linear') {
+                    gradientType = 'gradient';
+                    var transform = zrEl.transform;
+                    var p0 = [fill.x * rectWidth, fill.y * rectHeight];
+                    var p1 = [fill.x2 * rectWidth, fill.y2 * rectHeight];
+                    if (transform) {
+                        applyTransform(p0, p0, transform);
+                        applyTransform(p1, p1, transform);
+                    }
+                    var dx = p1[0] - p0[0];
+                    var dy = p1[1] - p0[1];
+                    angle = Math.atan2(dx, dy) * 180 / Math.PI;
+                    // The angle should be a non-negative number.
+                    if (angle < 0) {
+                        angle += 360;
+                    }
+
+                    // Very small angles produce an unexpected result because they are
+                    // converted to a scientific notation string.
+                    if (angle < 1e-6) {
+                        angle = 0;
+                    }
+                }
+                else {
+                    gradientType = 'gradientradial';
+                    var p0 = [fill.x * rectWidth, fill.y * rectHeight];
+                    var transform = zrEl.transform;
+                    var scale$$1 = zrEl.scale;
+                    var width = rectWidth;
+                    var height = rectHeight;
+                    focus = [
+                        // Percent in bounding rect
+                        (p0[0] - rect.x) / width,
+                        (p0[1] - rect.y) / height
+                    ];
+                    if (transform) {
+                        applyTransform(p0, p0, transform);
+                    }
+
+                    width /= scale$$1[0] * Z;
+                    height /= scale$$1[1] * Z;
+                    var dimension = mathMax$8(width, height);
+                    shift = 2 * 0 / dimension;
+                    expansion = 2 * fill.r / dimension - shift;
+                }
+
+                // We need to sort the color stops in ascending order by offset,
+                // otherwise IE won't interpret it correctly.
+                var stops = fill.colorStops.slice();
+                stops.sort(function(cs1, cs2) {
+                    return cs1.offset - cs2.offset;
+                });
+
+                var length$$1 = stops.length;
+                // Color and alpha list of first and last stop
+                var colorAndAlphaList = [];
+                var colors = [];
+                for (var i = 0; i < length$$1; i++) {
+                    var stop = stops[i];
+                    var colorAndAlpha = getColorAndAlpha(stop.color);
+                    colors.push(stop.offset * expansion + shift + ' ' + colorAndAlpha[0]);
+                    if (i === 0 || i === length$$1 - 1) {
+                        colorAndAlphaList.push(colorAndAlpha);
+                    }
+                }
+
+                if (length$$1 >= 2) {
+                    var color1 = colorAndAlphaList[0][0];
+                    var color2 = colorAndAlphaList[1][0];
+                    var opacity1 = colorAndAlphaList[0][1] * style.opacity;
+                    var opacity2 = colorAndAlphaList[1][1] * style.opacity;
+
+                    el.type = gradientType;
+                    el.method = 'none';
+                    el.focus = '100%';
+                    el.angle = angle;
+                    el.color = color1;
+                    el.color2 = color2;
+                    el.colors = colors.join(',');
+                    // When colors attribute is used, the meanings of opacity and o:opacity2
+                    // are reversed.
+                    el.opacity = opacity2;
+                    // FIXME g_o_:opacity ?
+                    el.opacity2 = opacity1;
+                }
+                if (gradientType === 'radial') {
+                    el.focusposition = focus.join(',');
+                }
+            }
+            else {
+                // FIXME Change from Gradient fill to color fill
+                setColorAndOpacity(el, fill, style.opacity);
+            }
+        }
+    };
+
+    var updateStrokeNode = function (el, style) {
+        // if (style.lineJoin != null) {
+        //     el.joinstyle = style.lineJoin;
+        // }
+        // if (style.miterLimit != null) {
+        //     el.miterlimit = style.miterLimit * Z;
+        // }
+        // if (style.lineCap != null) {
+        //     el.endcap = style.lineCap;
+        // }
+        if (style.lineDash != null) {
+            el.dashstyle = style.lineDash.join(' ');
+        }
+        if (style.stroke != null && !(style.stroke instanceof Gradient)) {
+            setColorAndOpacity(el, style.stroke, style.opacity);
+        }
+    };
+
+    var updateFillAndStroke = function (vmlEl, type, style, zrEl) {
+        var isFill = type == 'fill';
+        var el = vmlEl.getElementsByTagName(type)[0];
+        // Stroke must have lineWidth
+        if (style[type] != null && style[type] !== 'none' && (isFill || (!isFill && style.lineWidth))) {
+            vmlEl[isFill ? 'filled' : 'stroked'] = 'true';
+            // FIXME Remove before updating, or set `colors` will throw error
+            if (style[type] instanceof Gradient) {
+                remove(vmlEl, el);
+            }
+            if (!el) {
+                el = createNode(type);
+            }
+
+            isFill ? updateFillNode(el, style, zrEl) : updateStrokeNode(el, style);
+            append(vmlEl, el);
+        }
+        else {
+            vmlEl[isFill ? 'filled' : 'stroked'] = 'false';
+            remove(vmlEl, el);
+        }
+    };
+
+    var points$3 = [[], [], []];
+    var pathDataToString = function (path, m) {
+        var M = CMD$3.M;
+        var C = CMD$3.C;
+        var L = CMD$3.L;
+        var A = CMD$3.A;
+        var Q = CMD$3.Q;
+
+        var str = [];
+        var nPoint;
+        var cmdStr;
+        var cmd;
+        var i;
+        var xi;
+        var yi;
+        var data = path.data;
+        var dataLength = path.len();
+        for (i = 0; i < dataLength;) {
+            cmd = data[i++];
+            cmdStr = '';
+            nPoint = 0;
+            switch (cmd) {
+                case M:
+                    cmdStr = ' m ';
+                    nPoint = 1;
+                    xi = data[i++];
+                    yi = data[i++];
+                    points$3[0][0] = xi;
+                    points$3[0][1] = yi;
+                    break;
+                case L:
+                    cmdStr = ' l ';
+                    nPoint = 1;
+                    xi = data[i++];
+                    yi = data[i++];
+                    points$3[0][0] = xi;
+                    points$3[0][1] = yi;
+                    break;
+                case Q:
+                case C:
+                    cmdStr = ' c ';
+                    nPoint = 3;
+                    var x1 = data[i++];
+                    var y1 = data[i++];
+                    var x2 = data[i++];
+                    var y2 = data[i++];
+                    var x3;
+                    var y3;
+                    if (cmd === Q) {
+                        // Convert quadratic to cubic using degree elevation
+                        x3 = x2;
+                        y3 = y2;
+                        x2 = (x2 + 2 * x1) / 3;
+                        y2 = (y2 + 2 * y1) / 3;
+                        x1 = (xi + 2 * x1) / 3;
+                        y1 = (yi + 2 * y1) / 3;
+                    }
+                    else {
+                        x3 = data[i++];
+                        y3 = data[i++];
+                    }
+                    points$3[0][0] = x1;
+                    points$3[0][1] = y1;
+                    points$3[1][0] = x2;
+                    points$3[1][1] = y2;
+                    points$3[2][0] = x3;
+                    points$3[2][1] = y3;
+
+                    xi = x3;
+                    yi = y3;
+                    break;
+                case A:
+                    var x = 0;
+                    var y = 0;
+                    var sx = 1;
+                    var sy = 1;
+                    var angle = 0;
+                    if (m) {
+                        // Extract SRT from matrix
+                        x = m[4];
+                        y = m[5];
+                        sx = sqrt(m[0] * m[0] + m[1] * m[1]);
+                        sy = sqrt(m[2] * m[2] + m[3] * m[3]);
+                        angle = Math.atan2(-m[1] / sy, m[0] / sx);
+                    }
+
+                    var cx = data[i++];
+                    var cy = data[i++];
+                    var rx = data[i++];
+                    var ry = data[i++];
+                    var startAngle = data[i++] + angle;
+                    var endAngle = data[i++] + startAngle + angle;
+                    // FIXME
+                    // var psi = data[i++];
+                    i++;
+                    var clockwise = data[i++];
+
+                    var x0 = cx + cos(startAngle) * rx;
+                    var y0 = cy + sin(startAngle) * ry;
+
+                    var x1 = cx + cos(endAngle) * rx;
+                    var y1 = cy + sin(endAngle) * ry;
+
+                    var type = clockwise ? ' wa ' : ' at ';
+                    if (Math.abs(x0 - x1) < 1e-4) {
+                        // IE won't render arches drawn counter clockwise if x0 == x1.
+                        if (Math.abs(endAngle - startAngle) > 1e-2) {
+                            // Offset x0 by 1/80 of a pixel. Use something
+                            // that can be represented in binary
+                            if (clockwise) {
+                                x0 += 270 / Z;
+                            }
+                        }
+                        else {
+                            // Avoid case draw full circle
+                            if (Math.abs(y0 - cy) < 1e-4) {
+                                if ((clockwise && x0 < cx) || (!clockwise && x0 > cx)) {
+                                    y1 -= 270 / Z;
+                                }
+                                else {
+                                    y1 += 270 / Z;
+                                }
+                            }
+                            else if ((clockwise && y0 < cy) || (!clockwise && y0 > cy)) {
+                                x1 += 270 / Z;
+                            }
+                            else {
+                                x1 -= 270 / Z;
+                            }
+                        }
+                    }
+                    str.push(
+                        type,
+                        round$3(((cx - rx) * sx + x) * Z - Z2), comma,
+                        round$3(((cy - ry) * sy + y) * Z - Z2), comma,
+                        round$3(((cx + rx) * sx + x) * Z - Z2), comma,
+                        round$3(((cy + ry) * sy + y) * Z - Z2), comma,
+                        round$3((x0 * sx + x) * Z - Z2), comma,
+                        round$3((y0 * sy + y) * Z - Z2), comma,
+                        round$3((x1 * sx + x) * Z - Z2), comma,
+                        round$3((y1 * sy + y) * Z - Z2)
+                    );
+
+                    xi = x1;
+                    yi = y1;
+                    break;
+                case CMD$3.R:
+                    var p0 = points$3[0];
+                    var p1 = points$3[1];
+                    // x0, y0
+                    p0[0] = data[i++];
+                    p0[1] = data[i++];
+                    // x1, y1
+                    p1[0] = p0[0] + data[i++];
+                    p1[1] = p0[1] + data[i++];
+
+                    if (m) {
+                        applyTransform(p0, p0, m);
+                        applyTransform(p1, p1, m);
+                    }
+
+                    p0[0] = round$3(p0[0] * Z - Z2);
+                    p1[0] = round$3(p1[0] * Z - Z2);
+                    p0[1] = round$3(p0[1] * Z - Z2);
+                    p1[1] = round$3(p1[1] * Z - Z2);
+                    str.push(
+                        // x0, y0
+                        ' m ', p0[0], comma, p0[1],
+                        // x1, y0
+                        ' l ', p1[0], comma, p0[1],
+                        // x1, y1
+                        ' l ', p1[0], comma, p1[1],
+                        // x0, y1
+                        ' l ', p0[0], comma, p1[1]
+                    );
+                    break;
+                case CMD$3.Z:
+                    // FIXME Update xi, yi
+                    str.push(' x ');
+            }
+
+            if (nPoint > 0) {
+                str.push(cmdStr);
+                for (var k = 0; k < nPoint; k++) {
+                    var p = points$3[k];
+
+                    m && applyTransform(p, p, m);
+                    // ä¸ round ä¼šéžå¸¸æ…¢
+                    str.push(
+                        round$3(p[0] * Z - Z2), comma, round$3(p[1] * Z - Z2),
+                        k < nPoint - 1 ? comma : ''
+                    );
+                }
+            }
+        }
+
+        return str.join('');
+    };
+
+    // Rewrite the original path method
+    Path.prototype.brushVML = function (vmlRoot) {
+        var style = this.style;
+
+        var vmlEl = this._vmlEl;
+        if (!vmlEl) {
+            vmlEl = createNode('shape');
+            initRootElStyle(vmlEl);
+
+            this._vmlEl = vmlEl;
+        }
+
+        updateFillAndStroke(vmlEl, 'fill', style, this);
+        updateFillAndStroke(vmlEl, 'stroke', style, this);
+
+        var m = this.transform;
+        var needTransform = m != null;
+        var strokeEl = vmlEl.getElementsByTagName('stroke')[0];
+        if (strokeEl) {
+            var lineWidth = style.lineWidth;
+            // Get the line scale.
+            // Determinant of this.m_ means how much the area is enlarged by the
+            // transformation. So its square root can be used as a scale factor
+            // for width.
+            if (needTransform && !style.strokeNoScale) {
+                var det = m[0] * m[3] - m[1] * m[2];
+                lineWidth *= sqrt(abs$1(det));
+            }
+            strokeEl.weight = lineWidth + 'px';
+        }
+
+        var path = this.path || (this.path = new PathProxy());
+        if (this.__dirtyPath) {
+            path.beginPath();
+            this.buildPath(path, this.shape);
+            path.toStatic();
+            this.__dirtyPath = false;
+        }
+
+        vmlEl.path = pathDataToString(path, this.transform);
+
+        vmlEl.style.zIndex = getZIndex(this.zlevel, this.z, this.z2);
+
+        // Append to root
+        append(vmlRoot, vmlEl);
+
+        // Text
+        if (style.text != null) {
+            this.drawRectText(vmlRoot, this.getBoundingRect());
+        }
+        else {
+            this.removeRectText(vmlRoot);
+        }
+    };
+
+    Path.prototype.onRemove = function (vmlRoot) {
+        remove(vmlRoot, this._vmlEl);
+        this.removeRectText(vmlRoot);
+    };
+
+    Path.prototype.onAdd = function (vmlRoot) {
+        append(vmlRoot, this._vmlEl);
+        this.appendRectText(vmlRoot);
+    };
+
+    /***************************************************
+     * IMAGE
+     **************************************************/
+    var isImage = function (img) {
+        // FIXME img instanceof Image å¦‚æžœ img æ˜¯ä¸€ä¸ªå—ç¬¦ä¸²çš„æ—¶å€™ï¼ŒIE8 ä¸‹ä¼šæŠ¥é”™
+        return (typeof img === 'object') && img.tagName && img.tagName.toUpperCase() === 'IMG';
+        // return img instanceof Image;
+    };
+
+    // Rewrite the original path method
+    ZImage.prototype.brushVML = function (vmlRoot) {
+        var style = this.style;
+        var image = style.image;
+
+        // Image original width, height
+        var ow;
+        var oh;
+
+        if (isImage(image)) {
+            var src = image.src;
+            if (src === this._imageSrc) {
+                ow = this._imageWidth;
+                oh = this._imageHeight;
+            }
+            else {
+                var imageRuntimeStyle = image.runtimeStyle;
+                var oldRuntimeWidth = imageRuntimeStyle.width;
+                var oldRuntimeHeight = imageRuntimeStyle.height;
+                imageRuntimeStyle.width = 'auto';
+                imageRuntimeStyle.height = 'auto';
+
+                // get the original size
+                ow = image.width;
+                oh = image.height;
+
+                // and remove overides
+                imageRuntimeStyle.width = oldRuntimeWidth;
+                imageRuntimeStyle.height = oldRuntimeHeight;
+
+                // Caching image original width, height and src
+                this._imageSrc = src;
+                this._imageWidth = ow;
+                this._imageHeight = oh;
+            }
+            image = src;
+        }
+        else {
+            if (image === this._imageSrc) {
+                ow = this._imageWidth;
+                oh = this._imageHeight;
+            }
+        }
+        if (!image) {
+            return;
+        }
+
+        var x = style.x || 0;
+        var y = style.y || 0;
+
+        var dw = style.width;
+        var dh = style.height;
+
+        var sw = style.sWidth;
+        var sh = style.sHeight;
+        var sx = style.sx || 0;
+        var sy = style.sy || 0;
+
+        var hasCrop = sw && sh;
+
+        var vmlEl = this._vmlEl;
+        if (!vmlEl) {
+            // FIXME ä½¿ç”¨ group åœ¨ left, top éƒ½ä¸æ˜¯ 0 çš„æ—¶å€™å°±æ— æ³•æ˜¾ç¤ºäº†ã€‚
+            // vmlEl = vmlCore.createNode('group');
+            vmlEl = doc.createElement('div');
+            initRootElStyle(vmlEl);
+
+            this._vmlEl = vmlEl;
+        }
+
+        var vmlElStyle = vmlEl.style;
+        var hasRotation = false;
+        var m;
+        var scaleX = 1;
+        var scaleY = 1;
+        if (this.transform) {
+            m = this.transform;
+            scaleX = sqrt(m[0] * m[0] + m[1] * m[1]);
+            scaleY = sqrt(m[2] * m[2] + m[3] * m[3]);
+
+            hasRotation = m[1] || m[2];
+        }
+        if (hasRotation) {
+            // If filters are necessary (rotation exists), create them
+            // filters are bog-slow, so only create them if abbsolutely necessary
+            // The following check doesn't account for skews (which don't exist
+            // in the canvas spec (yet) anyway.
+            // From excanvas
+            var p0 = [x, y];
+            var p1 = [x + dw, y];
+            var p2 = [x, y + dh];
+            var p3 = [x + dw, y + dh];
+            applyTransform(p0, p0, m);
+            applyTransform(p1, p1, m);
+            applyTransform(p2, p2, m);
+            applyTransform(p3, p3, m);
+
+            var maxX = mathMax$8(p0[0], p1[0], p2[0], p3[0]);
+            var maxY = mathMax$8(p0[1], p1[1], p2[1], p3[1]);
+
+            var transformFilter = [];
+            transformFilter.push('M11=', m[0] / scaleX, comma,
+                        'M12=', m[2] / scaleY, comma,
+                        'M21=', m[1] / scaleX, comma,
+                        'M22=', m[3] / scaleY, comma,
+                        'Dx=', round$3(x * scaleX + m[4]), comma,
+                        'Dy=', round$3(y * scaleY + m[5]));
+
+            vmlElStyle.padding = '0 ' + round$3(maxX) + 'px ' + round$3(maxY) + 'px 0';
+            // FIXME DXImageTransform åœ¨ IE11 çš„å…¼å®¹æ¨¡å¼ä¸‹ä¸èµ·ä½œç”¨
+            vmlElStyle.filter = imageTransformPrefix + '.Matrix('
+                + transformFilter.join('') + ', SizingMethod=clip)';
+
+        }
+        else {
+            if (m) {
+                x = x * scaleX + m[4];
+                y = y * scaleY + m[5];
+            }
+            vmlElStyle.filter = '';
+            vmlElStyle.left = round$3(x) + 'px';
+            vmlElStyle.top = round$3(y) + 'px';
+        }
+
+        var imageEl = this._imageEl;
+        var cropEl = this._cropEl;
+
+        if (!imageEl) {
+            imageEl = doc.createElement('div');
+            this._imageEl = imageEl;
+        }
+        var imageELStyle = imageEl.style;
+        if (hasCrop) {
+            // Needs know image original width and height
+            if (! (ow && oh)) {
+                var tmpImage = new Image();
+                var self = this;
+                tmpImage.onload = function () {
+                    tmpImage.onload = null;
+                    ow = tmpImage.width;
+                    oh = tmpImage.height;
+                    // Adjust image width and height to fit the ratio destinationSize / sourceSize
+                    imageELStyle.width = round$3(scaleX * ow * dw / sw) + 'px';
+                    imageELStyle.height = round$3(scaleY * oh * dh / sh) + 'px';
+
+                    // Caching image original width, height and src
+                    self._imageWidth = ow;
+                    self._imageHeight = oh;
+                    self._imageSrc = image;
+                };
+                tmpImage.src = image;
+            }
+            else {
+                imageELStyle.width = round$3(scaleX * ow * dw / sw) + 'px';
+                imageELStyle.height = round$3(scaleY * oh * dh / sh) + 'px';
+            }
+
+            if (! cropEl) {
+                cropEl = doc.createElement('div');
+                cropEl.style.overflow = 'hidden';
+                this._cropEl = cropEl;
+            }
+            var cropElStyle = cropEl.style;
+            cropElStyle.width = round$3((dw + sx * dw / sw) * scaleX);
+            cropElStyle.height = round$3((dh + sy * dh / sh) * scaleY);
+            cropElStyle.filter = imageTransformPrefix + '.Matrix(Dx='
+                    + (-sx * dw / sw * scaleX) + ',Dy=' + (-sy * dh / sh * scaleY) + ')';
+
+            if (! cropEl.parentNode) {
+                vmlEl.appendChild(cropEl);
+            }
+            if (imageEl.parentNode != cropEl) {
+                cropEl.appendChild(imageEl);
+            }
+        }
+        else {
+            imageELStyle.width = round$3(scaleX * dw) + 'px';
+            imageELStyle.height = round$3(scaleY * dh) + 'px';
+
+            vmlEl.appendChild(imageEl);
+
+            if (cropEl && cropEl.parentNode) {
+                vmlEl.removeChild(cropEl);
+                this._cropEl = null;
+            }
+        }
+
+        var filterStr = '';
+        var alpha = style.opacity;
+        if (alpha < 1) {
+            filterStr += '.Alpha(opacity=' + round$3(alpha * 100) + ') ';
+        }
+        filterStr += imageTransformPrefix + '.AlphaImageLoader(src=' + image + ', SizingMethod=scale)';
+
+        imageELStyle.filter = filterStr;
+
+        vmlEl.style.zIndex = getZIndex(this.zlevel, this.z, this.z2);
+
+        // Append to root
+        append(vmlRoot, vmlEl);
+
+        // Text
+        if (style.text != null) {
+            this.drawRectText(vmlRoot, this.getBoundingRect());
+        }
+    };
+
+    ZImage.prototype.onRemove = function (vmlRoot) {
+        remove(vmlRoot, this._vmlEl);
+
+        this._vmlEl = null;
+        this._cropEl = null;
+        this._imageEl = null;
+
+        this.removeRectText(vmlRoot);
+    };
+
+    ZImage.prototype.onAdd = function (vmlRoot) {
+        append(vmlRoot, this._vmlEl);
+        this.appendRectText(vmlRoot);
+    };
+
+
+    /***************************************************
+     * TEXT
+     **************************************************/
+
+    var DEFAULT_STYLE_NORMAL = 'normal';
+
+    var fontStyleCache = {};
+    var fontStyleCacheCount = 0;
+    var MAX_FONT_CACHE_SIZE = 100;
+    var fontEl = document.createElement('div');
+
+    var getFontStyle = function (fontString) {
+        var fontStyle = fontStyleCache[fontString];
+        if (!fontStyle) {
+            // Clear cache
+            if (fontStyleCacheCount > MAX_FONT_CACHE_SIZE) {
+                fontStyleCacheCount = 0;
+                fontStyleCache = {};
+            }
+
+            var style = fontEl.style;
+            var fontFamily;
+            try {
+                style.font = fontString;
+                fontFamily = style.fontFamily.split(',')[0];
+            }
+            catch (e) {
+            }
+
+            fontStyle = {
+                style: style.fontStyle || DEFAULT_STYLE_NORMAL,
+                variant: style.fontVariant || DEFAULT_STYLE_NORMAL,
+                weight: style.fontWeight || DEFAULT_STYLE_NORMAL,
+                size: parseFloat(style.fontSize || 12) | 0,
+                family: fontFamily || 'Microsoft YaHei'
+            };
+
+            fontStyleCache[fontString] = fontStyle;
+            fontStyleCacheCount++;
+        }
+        return fontStyle;
+    };
+
+    var textMeasureEl;
+    // Overwrite measure text method
+    $override$1('measureText', function (text, textFont) {
+        var doc$$1 = doc;
+        if (!textMeasureEl) {
+            textMeasureEl = doc$$1.createElement('div');
+            textMeasureEl.style.cssText = 'position:absolute;top:-20000px;left:0;'
+                + 'padding:0;margin:0;border:none;white-space:pre;';
+            doc.body.appendChild(textMeasureEl);
+        }
+
+        try {
+            textMeasureEl.style.font = textFont;
+        } catch (ex) {
+            // Ignore failures to set to invalid font.
+        }
+        textMeasureEl.innerHTML = '';
+        // Don't use innerHTML or innerText because they allow markup/whitespace.
+        textMeasureEl.appendChild(doc$$1.createTextNode(text));
+        return {
+            width: textMeasureEl.offsetWidth
+        };
+    });
+
+    var tmpRect$2 = new BoundingRect();
+
+    var drawRectText = function (vmlRoot, rect, textRect, fromTextEl) {
+
+        var style = this.style;
+
+        // Optimize, avoid normalize every time.
+        this.__dirty && normalizeTextStyle(style, true);
+
+        var text = style.text;
+        // Convert to string
+        text != null && (text += '');
+        if (!text) {
+            return;
+        }
+
+        // Convert rich text to plain text. Rich text is not supported in
+        // IE8-, but tags in rich text template will be removed.
+        if (style.rich) {
+            var contentBlock = parseRichText(text, style);
+            text = [];
+            for (var i = 0; i < contentBlock.lines.length; i++) {
+                var tokens = contentBlock.lines[i].tokens;
+                var textLine = [];
+                for (var j = 0; j < tokens.length; j++) {
+                    textLine.push(tokens[j].text);
+                }
+                text.push(textLine.join(''));
+            }
+            text = text.join('\n');
+        }
+
+        var x;
+        var y;
+        var align = style.textAlign;
+        var verticalAlign = style.textVerticalAlign;
+
+        var fontStyle = getFontStyle(style.font);
+        // FIXME encodeHtmlAttribute ?
+        var font = fontStyle.style + ' ' + fontStyle.variant + ' ' + fontStyle.weight + ' '
+            + fontStyle.size + 'px "' + fontStyle.family + '"';
+
+        textRect = textRect || getBoundingRect(text, font, align, verticalAlign);
+
+        // Transform rect to view space
+        var m = this.transform;
+        // Ignore transform for text in other element
+        if (m && !fromTextEl) {
+            tmpRect$2.copy(rect);
+            tmpRect$2.applyTransform(m);
+            rect = tmpRect$2;
+        }
+
+        if (!fromTextEl) {
+            var textPosition = style.textPosition;
+            var distance$$1 = style.textDistance;
+            // Text position represented by coord
+            if (textPosition instanceof Array) {
+                x = rect.x + parsePercent$3(textPosition[0], rect.width);
+                y = rect.y + parsePercent$3(textPosition[1], rect.height);
+
+                align = align || 'left';
+            }
+            else {
+                var res = adjustTextPositionOnRect(
+                    textPosition, rect, distance$$1
+                );
+                x = res.x;
+                y = res.y;
+
+                // Default align and baseline when has textPosition
+                align = align || res.textAlign;
+                verticalAlign = verticalAlign || res.textVerticalAlign;
+            }
+        }
+        else {
+            x = rect.x;
+            y = rect.y;
+        }
+
+        x = adjustTextX(x, textRect.width, align);
+        y = adjustTextY(y, textRect.height, verticalAlign);
+
+        // Force baseline 'middle'
+        y += textRect.height / 2;
+
+        // var fontSize = fontStyle.size;
+        // 1.75 is an arbitrary number, as there is no info about the text baseline
+        // switch (baseline) {
+            // case 'hanging':
+            // case 'top':
+            //     y += fontSize / 1.75;
+            //     break;
+        //     case 'middle':
+        //         break;
+        //     default:
+        //     // case null:
+        //     // case 'alphabetic':
+        //     // case 'ideographic':
+        //     // case 'bottom':
+        //         y -= fontSize / 2.25;
+        //         break;
+        // }
+
+        // switch (align) {
+        //     case 'left':
+        //         break;
+        //     case 'center':
+        //         x -= textRect.width / 2;
+        //         break;
+        //     case 'right':
+        //         x -= textRect.width;
+        //         break;
+            // case 'end':
+                // align = elementStyle.direction == 'ltr' ? 'right' : 'left';
+                // break;
+            // case 'start':
+                // align = elementStyle.direction == 'rtl' ? 'right' : 'left';
+                // break;
+            // default:
+            //     align = 'left';
+        // }
+
+        var createNode$$1 = createNode;
+
+        var textVmlEl = this._textVmlEl;
+        var pathEl;
+        var textPathEl;
+        var skewEl;
+        if (!textVmlEl) {
+            textVmlEl = createNode$$1('line');
+            pathEl = createNode$$1('path');
+            textPathEl = createNode$$1('textpath');
+            skewEl = createNode$$1('skew');
+
+            // FIXME Why here is not cammel case
+            // Align 'center' seems wrong
+            textPathEl.style['v-text-align'] = 'left';
+
+            initRootElStyle(textVmlEl);
+
+            pathEl.textpathok = true;
+            textPathEl.on = true;
+
+            textVmlEl.from = '0 0';
+            textVmlEl.to = '1000 0.05';
+
+            append(textVmlEl, skewEl);
+            append(textVmlEl, pathEl);
+            append(textVmlEl, textPathEl);
+
+            this._textVmlEl = textVmlEl;
+        }
+        else {
+            // è¿™é‡Œæ˜¯åœ¨å‰é¢ appendChild ä¿è¯é¡ºåºçš„å‰æä¸‹
+            skewEl = textVmlEl.firstChild;
+            pathEl = skewEl.nextSibling;
+            textPathEl = pathEl.nextSibling;
+        }
+
+        var coords = [x, y];
+        var textVmlElStyle = textVmlEl.style;
+        // Ignore transform for text in other element
+        if (m && fromTextEl) {
+            applyTransform(coords, coords, m);
+
+            skewEl.on = true;
+
+            skewEl.matrix = m[0].toFixed(3) + comma + m[2].toFixed(3) + comma +
+            m[1].toFixed(3) + comma + m[3].toFixed(3) + ',0,0';
+
+            // Text position
+            skewEl.offset = (round$3(coords[0]) || 0) + ',' + (round$3(coords[1]) || 0);
+            // Left top point as origin
+            skewEl.origin = '0 0';
+
+            textVmlElStyle.left = '0px';
+            textVmlElStyle.top = '0px';
+        }
+        else {
+            skewEl.on = false;
+            textVmlElStyle.left = round$3(x) + 'px';
+            textVmlElStyle.top = round$3(y) + 'px';
+        }
+
+        textPathEl.string = encodeHtmlAttribute(text);
+        // TODO
+        try {
+            textPathEl.style.font = font;
+        }
+        // Error font format
+        catch (e) {}
+
+        updateFillAndStroke(textVmlEl, 'fill', {
+            fill: style.textFill,
+            opacity: style.opacity
+        }, this);
+        updateFillAndStroke(textVmlEl, 'stroke', {
+            stroke: style.textStroke,
+            opacity: style.opacity,
+            lineDash: style.lineDash
+        }, this);
+
+        textVmlEl.style.zIndex = getZIndex(this.zlevel, this.z, this.z2);
+
+        // Attached to root
+        append(vmlRoot, textVmlEl);
+    };
+
+    var removeRectText = function (vmlRoot) {
+        remove(vmlRoot, this._textVmlEl);
+        this._textVmlEl = null;
+    };
+
+    var appendRectText = function (vmlRoot) {
+        append(vmlRoot, this._textVmlEl);
+    };
+
+    var list = [RectText, Displayable, ZImage, Path, Text];
+
+    // In case Displayable has been mixed in RectText
+    for (var i$3 = 0; i$3 < list.length; i$3++) {
+        var proto$8 = list[i$3].prototype;
+        proto$8.drawRectText = drawRectText;
+        proto$8.removeRectText = removeRectText;
+        proto$8.appendRectText = appendRectText;
+    }
+
+    Text.prototype.brushVML = function (vmlRoot) {
+        var style = this.style;
+        if (style.text != null) {
+            this.drawRectText(vmlRoot, {
+                x: style.x || 0, y: style.y || 0,
+                width: 0, height: 0
+            }, this.getBoundingRect(), true);
+        }
+        else {
+            this.removeRectText(vmlRoot);
+        }
+    };
+
+    Text.prototype.onRemove = function (vmlRoot) {
+        this.removeRectText(vmlRoot);
+    };
+
+    Text.prototype.onAdd = function (vmlRoot) {
+        this.appendRectText(vmlRoot);
+    };
+}
+
+/**
+ * VML Painter.
+ *
+ * @module zrender/vml/Painter
+ */
+
+function parseInt10$1(val) {
+    return parseInt(val, 10);
+}
+
+/**
+ * @alias module:zrender/vml/Painter
+ */
+function VMLPainter(root, storage) {
+
+    initVML();
+
+    this.root = root;
+
+    this.storage = storage;
+
+    var vmlViewport = document.createElement('div');
+
+    var vmlRoot = document.createElement('div');
+
+    vmlViewport.style.cssText = 'display:inline-block;overflow:hidden;position:relative;width:300px;height:150px;';
+
+    vmlRoot.style.cssText = 'position:absolute;left:0;top:0;';
+
+    root.appendChild(vmlViewport);
+
+    this._vmlRoot = vmlRoot;
+    this._vmlViewport = vmlViewport;
+
+    this.resize();
+
+    // Modify storage
+    var oldDelFromStorage = storage.delFromStorage;
+    var oldAddToStorage = storage.addToStorage;
+    storage.delFromStorage = function (el) {
+        oldDelFromStorage.call(storage, el);
+
+        if (el) {
+            el.onRemove && el.onRemove(vmlRoot);
+        }
+    };
+
+    storage.addToStorage = function (el) {
+        // Displayable already has a vml node
+        el.onAdd && el.onAdd(vmlRoot);
+
+        oldAddToStorage.call(storage, el);
+    };
+
+    this._firstPaint = true;
+}
+
+VMLPainter.prototype = {
+
+    constructor: VMLPainter,
+
+    getType: function () {
+        return 'vml';
+    },
+
+    /**
+     * @return {HTMLDivElement}
+     */
+    getViewportRoot: function () {
+        return this._vmlViewport;
+    },
+
+    getViewportRootOffset: function () {
+        var viewportRoot = this.getViewportRoot();
+        if (viewportRoot) {
+            return {
+                offsetLeft: viewportRoot.offsetLeft || 0,
+                offsetTop: viewportRoot.offsetTop || 0
+            };
+        }
+    },
+
+    /**
+     * åˆ·æ–°
+     */
+    refresh: function () {
+
+        var list = this.storage.getDisplayList(true, true);
+
+        this._paintList(list);
+    },
+
+    _paintList: function (list) {
+        var vmlRoot = this._vmlRoot;
+        for (var i = 0; i < list.length; i++) {
+            var el = list[i];
+            if (el.invisible || el.ignore) {
+                if (!el.__alreadyNotVisible) {
+                    el.onRemove(vmlRoot);
+                }
+                // Set as already invisible
+                el.__alreadyNotVisible = true;
+            }
+            else {
+                if (el.__alreadyNotVisible) {
+                    el.onAdd(vmlRoot);
+                }
+                el.__alreadyNotVisible = false;
+                if (el.__dirty) {
+                    el.beforeBrush && el.beforeBrush();
+                    (el.brushVML || el.brush).call(el, vmlRoot);
+                    el.afterBrush && el.afterBrush();
+                }
+            }
+            el.__dirty = false;
+        }
+
+        if (this._firstPaint) {
+            // Detached from document at first time
+            // to avoid page refreshing too many times
+
+            // FIXME å¦‚æžœæ¯æ¬¡éƒ½å…ˆ removeChild å¯èƒ½ä¼šå¯¼è‡´ä¸€äº›å¡«å……å’Œæè¾¹çš„æ•ˆæžœæ”¹å˜
+            this._vmlViewport.appendChild(vmlRoot);
+            this._firstPaint = false;
+        }
+    },
+
+    resize: function (width, height) {
+        var width = width == null ? this._getWidth() : width;
+        var height = height == null ? this._getHeight() : height;
+
+        if (this._width != width || this._height != height) {
+            this._width = width;
+            this._height = height;
+
+            var vmlViewportStyle = this._vmlViewport.style;
+            vmlViewportStyle.width = width + 'px';
+            vmlViewportStyle.height = height + 'px';
+        }
+    },
+
+    dispose: function () {
+        this.root.innerHTML = '';
+
+        this._vmlRoot =
+        this._vmlViewport =
+        this.storage = null;
+    },
+
+    getWidth: function () {
+        return this._width;
+    },
+
+    getHeight: function () {
+        return this._height;
+    },
+
+    clear: function () {
+        if (this._vmlViewport) {
+            this.root.removeChild(this._vmlViewport);
+        }
+    },
+
+    _getWidth: function () {
+        var root = this.root;
+        var stl = root.currentStyle;
+
+        return ((root.clientWidth || parseInt10$1(stl.width))
+                - parseInt10$1(stl.paddingLeft)
+                - parseInt10$1(stl.paddingRight)) | 0;
+    },
+
+    _getHeight: function () {
+        var root = this.root;
+        var stl = root.currentStyle;
+
+        return ((root.clientHeight || parseInt10$1(stl.height))
+                - parseInt10$1(stl.paddingTop)
+                - parseInt10$1(stl.paddingBottom)) | 0;
+    }
+};
+
+// Not supported methods
+function createMethodNotSupport(method) {
+    return function () {
+        zrLog('In IE8.0 VML mode painter not support method "' + method + '"');
+    };
+}
+
+// Unsupported methods
+each$1([
+    'getLayer', 'insertLayer', 'eachLayer', 'eachBuiltinLayer', 'eachOtherLayer', 'getLayers',
+    'modLayer', 'delLayer', 'clearLayer', 'toDataURL', 'pathToImage'
+], function (name) {
+    VMLPainter.prototype[name] = createMethodNotSupport(name);
+});
+
+registerPainter('vml', VMLPainter);
+
+var svgURI = 'http://www.w3.org/2000/svg';
+
+function createElement(name) {
+    return document.createElementNS(svgURI, name);
+}
+
+// TODO
+// 1. shadow
+// 2. Image: sx, sy, sw, sh
+
+var CMD$4 = PathProxy.CMD;
+var arrayJoin = Array.prototype.join;
+
+var NONE = 'none';
+var mathRound = Math.round;
+var mathSin$3 = Math.sin;
+var mathCos$3 = Math.cos;
+var PI$5 = Math.PI;
+var PI2$7 = Math.PI * 2;
+var degree = 180 / PI$5;
+
+var EPSILON$4 = 1e-4;
+
+function round4(val) {
+    return mathRound(val * 1e4) / 1e4;
+}
+
+function isAroundZero$1(val) {
+    return val < EPSILON$4 && val > -EPSILON$4;
+}
+
+function pathHasFill(style, isText) {
+    var fill = isText ? style.textFill : style.fill;
+    return fill != null && fill !== NONE;
+}
+
+function pathHasStroke(style, isText) {
+    var stroke = isText ? style.textStroke : style.stroke;
+    return stroke != null && stroke !== NONE;
+}
+
+function setTransform(svgEl, m) {
+    if (m) {
+        attr(svgEl, 'transform', 'matrix(' + arrayJoin.call(m, ',') + ')');
+    }
+}
+
+function attr(el, key, val) {
+    if (!val || val.type !== 'linear' && val.type !== 'radial') {
+        // Don't set attribute for gradient, since it need new dom nodes
+        if (typeof val === 'string' && val.indexOf('NaN') > -1) {
+            console.log(val);
+        }
+        el.setAttribute(key, val);
+    }
+}
+
+function attrXLink(el, key, val) {
+    el.setAttributeNS('http://www.w3.org/1999/xlink', key, val);
+}
+
+function bindStyle(svgEl, style, isText) {
+    if (pathHasFill(style, isText)) {
+        var fill = isText ? style.textFill : style.fill;
+        fill = fill === 'transparent' ? NONE : fill;
+
+        /**
+         * FIXME:
+         * This is a temporary fix for Chrome's clipping bug
+         * that happens when a clip-path is referring another one.
+         * This fix should be used before Chrome's bug is fixed.
+         * For an element that has clip-path, and fill is none,
+         * set it to be "rgba(0, 0, 0, 0.002)" will hide the element.
+         * Otherwise, it will show black fill color.
+         * 0.002 is used because this won't work for alpha values smaller
+         * than 0.002.
+         *
+         * See
+         * https://bugs.chromium.org/p/chromium/issues/detail?id=659790
+         * for more information.
+         */
+        if (svgEl.getAttribute('clip-path') !== 'none' && fill === NONE) {
+            fill = 'rgba(0, 0, 0, 0.002)';
+        }
+
+        attr(svgEl, 'fill', fill);
+        attr(svgEl, 'fill-opacity', style.opacity);
+    }
+    else {
+        attr(svgEl, 'fill', NONE);
+    }
+
+    if (pathHasStroke(style, isText)) {
+        var stroke = isText ? style.textStroke : style.stroke;
+        stroke = stroke === 'transparent' ? NONE : stroke;
+        attr(svgEl, 'stroke', stroke);
+        var strokeWidth = isText
+            ? style.textStrokeWidth
+            : style.lineWidth;
+        var strokeScale = !isText && style.strokeNoScale
+            ? style.host.getLineScale()
+            : 1;
+        attr(svgEl, 'stroke-width', strokeWidth / strokeScale);
+        // stroke then fill for text; fill then stroke for others
+        attr(svgEl, 'paint-order', isText ? 'stroke' : 'fill');
+        attr(svgEl, 'stroke-opacity', style.opacity);
+        var lineDash = style.lineDash;
+        if (lineDash) {
+            attr(svgEl, 'stroke-dasharray', style.lineDash.join(','));
+            attr(svgEl, 'stroke-dashoffset', mathRound(style.lineDashOffset || 0));
+        }
+        else {
+            attr(svgEl, 'stroke-dasharray', '');
+        }
+
+        // PENDING
+        style.lineCap && attr(svgEl, 'stroke-linecap', style.lineCap);
+        style.lineJoin && attr(svgEl, 'stroke-linejoin', style.lineJoin);
+        style.miterLimit && attr(svgEl, 'stroke-miterlimit', style.miterLimit);
+    }
+    else {
+        attr(svgEl, 'stroke', NONE);
+    }
+}
+
+/***************************************************
+ * PATH
+ **************************************************/
+function pathDataToString$1(path) {
+    var str = [];
+    var data = path.data;
+    var dataLength = path.len();
+    for (var i = 0; i < dataLength;) {
+        var cmd = data[i++];
+        var cmdStr = '';
+        var nData = 0;
+        switch (cmd) {
+            case CMD$4.M:
+                cmdStr = 'M';
+                nData = 2;
+                break;
+            case CMD$4.L:
+                cmdStr = 'L';
+                nData = 2;
+                break;
+            case CMD$4.Q:
+                cmdStr = 'Q';
+                nData = 4;
+                break;
+            case CMD$4.C:
+                cmdStr = 'C';
+                nData = 6;
+                break;
+            case CMD$4.A:
+                var cx = data[i++];
+                var cy = data[i++];
+                var rx = data[i++];
+                var ry = data[i++];
+                var theta = data[i++];
+                var dTheta = data[i++];
+                var psi = data[i++];
+                var clockwise = data[i++];
+
+                var dThetaPositive = Math.abs(dTheta);
+                var isCircle = isAroundZero$1(dThetaPositive - PI2$7)
+                    && !isAroundZero$1(dThetaPositive);
+
+                var large = false;
+                if (dThetaPositive >= PI2$7) {
+                    large = true;
+                }
+                else if (isAroundZero$1(dThetaPositive)) {
+                    large = false;
+                }
+                else {
+                    large = (dTheta > -PI$5 && dTheta < 0 || dTheta > PI$5)
+                        === !!clockwise;
+                }
+
+                var x0 = round4(cx + rx * mathCos$3(theta));
+                var y0 = round4(cy + ry * mathSin$3(theta));
+
+                // It will not draw if start point and end point are exactly the same
+                // We need to shift the end point with a small value
+                // FIXME A better way to draw circle ?
+                if (isCircle) {
+                    if (clockwise) {
+                        dTheta = PI2$7 - 1e-4;
+                    }
+                    else {
+                        dTheta = -PI2$7 + 1e-4;
+                    }
+
+                    large = true;
+
+                    if (i === 9) {
+                        // Move to (x0, y0) only when CMD.A comes at the
+                        // first position of a shape.
+                        // For instance, when drawing a ring, CMD.A comes
+                        // after CMD.M, so it's unnecessary to move to
+                        // (x0, y0).
+                        str.push('M', x0, y0);
+                    }
+                }
+
+                var x = round4(cx + rx * mathCos$3(theta + dTheta));
+                var y = round4(cy + ry * mathSin$3(theta + dTheta));
+
+                // FIXME Ellipse
+                str.push('A', round4(rx), round4(ry),
+                    mathRound(psi * degree), +large, +clockwise, x, y);
+                break;
+            case CMD$4.Z:
+                cmdStr = 'Z';
+                break;
+            case CMD$4.R:
+                var x = round4(data[i++]);
+                var y = round4(data[i++]);
+                var w = round4(data[i++]);
+                var h = round4(data[i++]);
+                str.push(
+                    'M', x, y,
+                    'L', x + w, y,
+                    'L', x + w, y + h,
+                    'L', x, y + h,
+                    'L', x, y
+                );
+                break;
+        }
+        cmdStr && str.push(cmdStr);
+        for (var j = 0; j < nData; j++) {
+            // PENDING With scale
+            str.push(round4(data[i++]));
+        }
+    }
+    return str.join(' ');
+}
+
+var svgPath = {};
+svgPath.brush = function (el) {
+    var style = el.style;
+
+    var svgEl = el.__svgEl;
+    if (!svgEl) {
+        svgEl = createElement('path');
+        el.__svgEl = svgEl;
+    }
+
+    if (!el.path) {
+        el.createPathProxy();
+    }
+    var path = el.path;
+
+    if (el.__dirtyPath) {
+        path.beginPath();
+        el.buildPath(path, el.shape);
+        el.__dirtyPath = false;
+
+        var pathStr = pathDataToString$1(path);
+        if (pathStr.indexOf('NaN') < 0) {
+            // Ignore illegal path, which may happen such in out-of-range
+            // data in Calendar series.
+            attr(svgEl, 'd', pathStr);
+        }
+    }
+
+    bindStyle(svgEl, style);
+    setTransform(svgEl, el.transform);
+
+    if (style.text != null) {
+        svgTextDrawRectText(el, el.getBoundingRect());
+    }
+};
+
+/***************************************************
+ * IMAGE
+ **************************************************/
+var svgImage = {};
+svgImage.brush = function (el) {
+    var style = el.style;
+    var image = style.image;
+
+    if (image instanceof HTMLImageElement) {
+        var src = image.src;
+        image = src;
+    }
+    if (! image) {
+        return;
+    }
+
+    var x = style.x || 0;
+    var y = style.y || 0;
+
+    var dw = style.width;
+    var dh = style.height;
+
+    var svgEl = el.__svgEl;
+    if (! svgEl) {
+        svgEl = createElement('image');
+        el.__svgEl = svgEl;
+    }
+
+    if (image !== el.__imageSrc) {
+        attrXLink(svgEl, 'href', image);
+        // Caching image src
+        el.__imageSrc = image;
+    }
+
+    attr(svgEl, 'width', dw);
+    attr(svgEl, 'height', dh);
+
+    attr(svgEl, 'x', x);
+    attr(svgEl, 'y', y);
+
+    setTransform(svgEl, el.transform);
+
+    if (style.text != null) {
+        svgTextDrawRectText(el, el.getBoundingRect());
+    }
+};
+
+/***************************************************
+ * TEXT
+ **************************************************/
+var svgText = {};
+var tmpRect$3 = new BoundingRect();
+
+var svgTextDrawRectText = function (el, rect, textRect) {
+    var style = el.style;
+
+    el.__dirty && normalizeTextStyle(style, true);
+
+    var text = style.text;
+    // Convert to string
+    if (text == null) {
+        // Draw no text only when text is set to null, but not ''
+        return;
+    }
+    else {
+        text += '';
+    }
+
+    var textSvgEl = el.__textSvgEl;
+    if (! textSvgEl) {
+        textSvgEl = createElement('text');
+        el.__textSvgEl = textSvgEl;
+    }
+
+    var x;
+    var y;
+    var textPosition = style.textPosition;
+    var distance = style.textDistance;
+    var align = style.textAlign || 'left';
+
+    if (typeof style.fontSize === 'number') {
+        style.fontSize += 'px';
+    }
+    var font = style.font
+        || [
+            style.fontStyle || '',
+            style.fontWeight || '',
+            style.fontSize || '',
+            style.fontFamily || ''
+        ].join(' ')
+        || DEFAULT_FONT;
+
+    var verticalAlign = getVerticalAlignForSvg(style.textVerticalAlign);
+
+    textRect = getBoundingRect(text, font, align,
+        verticalAlign);
+
+    var lineHeight = textRect.lineHeight;
+    // Text position represented by coord
+    if (textPosition instanceof Array) {
+        x = rect.x + textPosition[0];
+        y = rect.y + textPosition[1];
+    }
+    else {
+        var newPos = adjustTextPositionOnRect(
+            textPosition, rect, distance
+        );
+        x = newPos.x;
+        y = newPos.y;
+        verticalAlign = getVerticalAlignForSvg(newPos.textVerticalAlign);
+        align = newPos.textAlign;
+    }
+
+    attr(textSvgEl, 'alignment-baseline', verticalAlign);
+
+    if (font) {
+        textSvgEl.style.font = font;
+    }
+
+    var textPadding = style.textPadding;
+
+    // Make baseline top
+    attr(textSvgEl, 'x', x);
+    attr(textSvgEl, 'y', y);
+
+    bindStyle(textSvgEl, style, true);
+    if (el instanceof Text || el.style.transformText) {
+        // Transform text with element
+        setTransform(textSvgEl, el.transform);
+    }
+    else {
+        if (el.transform) {
+            tmpRect$3.copy(rect);
+            tmpRect$3.applyTransform(el.transform);
+            rect = tmpRect$3;
+        }
+        else {
+            var pos = el.transformCoordToGlobal(rect.x, rect.y);
+            rect.x = pos[0];
+            rect.y = pos[1];
+        }
+
+        // Text rotation, but no element transform
+        var origin = style.textOrigin;
+        if (origin === 'center') {
+            x = textRect.width / 2 + x;
+            y = textRect.height / 2 + y;
+        }
+        else if (origin) {
+            x = origin[0] + x;
+            y = origin[1] + y;
+        }
+        var rotate$$1 = -style.textRotation || 0;
+        var transform = create$1();
+        // Apply textRotate to element matrix
+        rotate(transform, el.transform, rotate$$1);
+        setTransform(textSvgEl, transform);
+    }
+
+    var textLines = text.split('\n');
+    var nTextLines = textLines.length;
+    var textAnchor = align;
+    // PENDING
+    if (textAnchor === 'left')  {
+        textAnchor = 'start';
+        textPadding && (x += textPadding[3]);
+    }
+    else if (textAnchor === 'right') {
+        textAnchor = 'end';
+        textPadding && (x -= textPadding[1]);
+    }
+    else if (textAnchor === 'center') {
+        textAnchor = 'middle';
+        textPadding && (x += (textPadding[3] - textPadding[1]) / 2);
+    }
+
+    var dy = 0;
+    if (verticalAlign === 'baseline') {
+        dy = -textRect.height + lineHeight;
+        textPadding && (dy -= textPadding[2]);
+    }
+    else if (verticalAlign === 'middle') {
+        dy = (-textRect.height + lineHeight) / 2;
+        textPadding && (y += (textPadding[0] - textPadding[2]) / 2);
+    }
+    else {
+        textPadding && (dy += textPadding[0]);
+    }
+
+    // Font may affect position of each tspan elements
+    if (el.__text !== text || el.__textFont !== font) {
+        var tspanList = el.__tspanList || [];
+        el.__tspanList = tspanList;
+        for (var i = 0; i < nTextLines; i++) {
+            // Using cached tspan elements
+            var tspan = tspanList[i];
+            if (! tspan) {
+                tspan = tspanList[i] = createElement('tspan');
+                textSvgEl.appendChild(tspan);
+                attr(tspan, 'alignment-baseline', verticalAlign);
+                attr(tspan, 'text-anchor', textAnchor);
+            }
+            else {
+                tspan.innerHTML = '';
+            }
+            attr(tspan, 'x', x);
+            attr(tspan, 'y', y + i * lineHeight + dy);
+            tspan.appendChild(document.createTextNode(textLines[i]));
+        }
+        // Remove unsed tspan elements
+        for (; i < tspanList.length; i++) {
+            textSvgEl.removeChild(tspanList[i]);
+        }
+        tspanList.length = nTextLines;
+
+        el.__text = text;
+        el.__textFont = font;
+    }
+    else if (el.__tspanList.length) {
+        // Update span x and y
+        var len = el.__tspanList.length;
+        for (var i = 0; i < len; ++i) {
+            var tspan = el.__tspanList[i];
+            if (tspan) {
+                attr(tspan, 'x', x);
+                attr(tspan, 'y', y + i * lineHeight + dy);
+            }
+        }
+    }
+};
+
+function getVerticalAlignForSvg(verticalAlign) {
+    if (verticalAlign === 'middle') {
+        return 'middle';
+    }
+    else if (verticalAlign === 'bottom') {
+        return 'baseline';
+    }
+    else {
+        return 'hanging';
+    }
+}
+
+svgText.drawRectText = svgTextDrawRectText;
+
+svgText.brush = function (el) {
+    var style = el.style;
+    if (style.text != null) {
+        // å¼ºåˆ¶è®¾ç½® textPosition
+        style.textPosition = [0, 0];
+        svgTextDrawRectText(el, {
+            x: style.x || 0, y: style.y || 0,
+            width: 0, height: 0
+        }, el.getBoundingRect());
+    }
+};
+
+// Myers' Diff Algorithm
+// Modified from https://github.com/kpdecker/jsdiff/blob/master/src/diff/base.js
+
+function Diff() {}
+
+Diff.prototype = {
+    diff: function (oldArr, newArr, equals) {
+        if (!equals) {
+            equals = function (a, b) {
+                return a === b;
+            };
+        }
+        this.equals = equals;
+
+        var self = this;
+
+        oldArr = oldArr.slice();
+        newArr = newArr.slice();
+        // Allow subclasses to massage the input prior to running
+        var newLen = newArr.length;
+        var oldLen = oldArr.length;
+        var editLength = 1;
+        var maxEditLength = newLen + oldLen;
+        var bestPath = [{ newPos: -1, components: [] }];
+
+        // Seed editLength = 0, i.e. the content starts with the same values
+        var oldPos = this.extractCommon(bestPath[0], newArr, oldArr, 0);
+        if (bestPath[0].newPos + 1 >= newLen && oldPos + 1 >= oldLen) {
+            var indices = [];
+            for (var i = 0; i < newArr.length; i++) {
+                indices.push(i);
+            }
+            // Identity per the equality and tokenizer
+            return [{
+                indices: indices, count: newArr.length
+            }];
+        }
+
+        // Main worker method. checks all permutations of a given edit length for acceptance.
+        function execEditLength() {
+            for (var diagonalPath = -1 * editLength; diagonalPath <= editLength; diagonalPath += 2) {
+                var basePath;
+                var addPath = bestPath[diagonalPath - 1];
+                var removePath = bestPath[diagonalPath + 1];
+                var oldPos = (removePath ? removePath.newPos : 0) - diagonalPath;
+                if (addPath) {
+                    // No one else is going to attempt to use this value, clear it
+                    bestPath[diagonalPath - 1] = undefined;
+                }
+
+                var canAdd = addPath && addPath.newPos + 1 < newLen;
+                var canRemove = removePath && 0 <= oldPos && oldPos < oldLen;
+                if (!canAdd && !canRemove) {
+                    // If this path is a terminal then prune
+                    bestPath[diagonalPath] = undefined;
+                    continue;
+                }
+
+                // Select the diagonal that we want to branch from. We select the prior
+                // path whose position in the new string is the farthest from the origin
+                // and does not pass the bounds of the diff graph
+                if (!canAdd || (canRemove && addPath.newPos < removePath.newPos)) {
+                    basePath = clonePath(removePath);
+                    self.pushComponent(basePath.components, undefined, true);
+                }
+                else {
+                    basePath = addPath;   // No need to clone, we've pulled it from the list
+                    basePath.newPos++;
+                    self.pushComponent(basePath.components, true, undefined);
+                }
+
+                oldPos = self.extractCommon(basePath, newArr, oldArr, diagonalPath);
+
+                // If we have hit the end of both strings, then we are done
+                if (basePath.newPos + 1 >= newLen && oldPos + 1 >= oldLen) {
+                    return buildValues(self, basePath.components, newArr, oldArr);
+                }
+                else {
+                    // Otherwise track this path as a potential candidate and continue.
+                    bestPath[diagonalPath] = basePath;
+                }
+            }
+
+            editLength++;
+        }
+
+        while (editLength <= maxEditLength) {
+            var ret = execEditLength();
+            if (ret) {
+                return ret;
+            }
+        }
+    },
+
+    pushComponent: function (components, added, removed) {
+        var last = components[components.length - 1];
+        if (last && last.added === added && last.removed === removed) {
+            // We need to clone here as the component clone operation is just
+            // as shallow array clone
+            components[components.length - 1] = {count: last.count + 1, added: added, removed: removed };
+        }
+        else {
+            components.push({count: 1, added: added, removed: removed });
+        }
+    },
+    extractCommon: function (basePath, newArr, oldArr, diagonalPath) {
+        var newLen = newArr.length;
+        var oldLen = oldArr.length;
+        var newPos = basePath.newPos;
+        var oldPos = newPos - diagonalPath;
+        var commonCount = 0;
+
+        while (newPos + 1 < newLen && oldPos + 1 < oldLen && this.equals(newArr[newPos + 1], oldArr[oldPos + 1])) {
+            newPos++;
+            oldPos++;
+            commonCount++;
+        }
+
+        if (commonCount) {
+            basePath.components.push({count: commonCount});
+        }
+
+        basePath.newPos = newPos;
+        return oldPos;
+    },
+    tokenize: function (value) {
+        return value.slice();
+    },
+    join: function (value) {
+        return value.slice();
+    }
+};
+
+function buildValues(diff, components, newArr, oldArr) {
+    var componentPos = 0;
+    var componentLen = components.length;
+    var newPos = 0;
+    var oldPos = 0;
+
+    for (; componentPos < componentLen; componentPos++) {
+        var component = components[componentPos];
+        if (!component.removed) {
+            var indices = [];
+            for (var i = newPos; i < newPos + component.count; i++) {
+                indices.push(i);
+            }
+            component.indices = indices;
+            newPos += component.count;
+            // Common case
+            if (!component.added) {
+                oldPos += component.count;
+            }
+        }
+        else {
+            var indices = [];
+            for (var i = oldPos; i < oldPos + component.count; i++) {
+                indices.push(i);
+            }
+            component.indices = indices;
+            oldPos += component.count;
+        }
+    }
+
+    return components;
+}
+
+function clonePath(path) {
+    return { newPos: path.newPos, components: path.components.slice(0) };
+}
+
+var arrayDiff = new Diff();
+
+var arrayDiff$1 = function (oldArr, newArr, callback) {
+    return arrayDiff.diff(oldArr, newArr, callback);
+};
+
+/**
+ * @file Manages elements that can be defined in <defs> in SVG,
+ *       e.g., gradients, clip path, etc.
+ * @author Zhang Wenli
+ */
+
+var MARK_UNUSED = '0';
+var MARK_USED = '1';
+
+/**
+ * Manages elements that can be defined in <defs> in SVG,
+ * e.g., gradients, clip path, etc.
+ *
+ * @class
+ * @param {number}          zrId      zrender instance id
+ * @param {SVGElement}      svgRoot   root of SVG document
+ * @param {string|string[]} tagNames  possible tag names
+ * @param {string}          markLabel label name to make if the element
+ *                                    is used
+ */
+function Definable(
+    zrId,
+    svgRoot,
+    tagNames,
+    markLabel,
+    domName
+) {
+    this._zrId = zrId;
+    this._svgRoot = svgRoot;
+    this._tagNames = typeof tagNames === 'string' ? [tagNames] : tagNames;
+    this._markLabel = markLabel;
+    this._domName = domName || '_dom';
+
+    this.nextId = 0;
+}
+
+
+Definable.prototype.createElement = createElement;
+
+
+/**
+ * Get the <defs> tag for svgRoot; optionally creates one if not exists.
+ *
+ * @param {boolean} isForceCreating if need to create when not exists
+ * @return {SVGDefsElement} SVG <defs> element, null if it doesn't
+ * exist and isForceCreating is false
+ */
+Definable.prototype.getDefs = function (isForceCreating) {
+    var svgRoot = this._svgRoot;
+    var defs = this._svgRoot.getElementsByTagName('defs');
+    if (defs.length === 0) {
+        // Not exist
+        if (isForceCreating) {
+            defs = svgRoot.insertBefore(
+                this.createElement('defs'), // Create new tag
+                svgRoot.firstChild // Insert in the front of svg
+            );
+            if (!defs.contains) {
+                // IE doesn't support contains method
+                defs.contains = function (el) {
+                    var children = defs.children;
+                    if (!children) {
+                        return false;
+                    }
+                    for (var i = children.length - 1; i >= 0; --i) {
+                        if (children[i] === el) {
+                            return true;
+                        }
+                    }
+                    return false;
+                };
+            }
+            return defs;
+        }
+        else {
+            return null;
+        }
+    }
+    else {
+        return defs[0];
+    }
+};
+
+
+/**
+ * Update DOM element if necessary.
+ *
+ * @param {Object|string} element style element. e.g., for gradient,
+ *                                it may be '#ccc' or {type: 'linear', ...}
+ * @param {Function|undefined} onUpdate update callback
+ */
+Definable.prototype.update = function (element, onUpdate) {
+    if (!element) {
+        return;
+    }
+
+    var defs = this.getDefs(false);
+    if (element[this._domName] && defs.contains(element[this._domName])) {
+        // Update DOM
+        if (typeof onUpdate === 'function') {
+            onUpdate(element);
+        }
+    }
+    else {
+        // No previous dom, create new
+        var dom = this.add(element);
+        if (dom) {
+            element[this._domName] = dom;
+        }
+    }
+};
+
+
+/**
+ * Add gradient dom to defs
+ *
+ * @param {SVGElement} dom DOM to be added to <defs>
+ */
+Definable.prototype.addDom = function (dom) {
+    var defs = this.getDefs(true);
+    defs.appendChild(dom);
+};
+
+
+/**
+ * Remove DOM of a given element.
+ *
+ * @param {SVGElement} element element to remove dom
+ */
+Definable.prototype.removeDom = function (element) {
+    var defs = this.getDefs(false);
+    if (defs && element[this._domName]) {
+        defs.removeChild(element[this._domName]);
+        element[this._domName] = null;
+    }
+};
+
+
+/**
+ * Get DOMs of this element.
+ *
+ * @return {HTMLDomElement} doms of this defineable elements in <defs>
+ */
+Definable.prototype.getDoms = function () {
+    var defs = this.getDefs(false);
+    if (!defs) {
+        // No dom when defs is not defined
+        return [];
+    }
+
+    var doms = [];
+    each$1(this._tagNames, function (tagName) {
+        var tags = defs.getElementsByTagName(tagName);
+        // Note that tags is HTMLCollection, which is array-like
+        // rather than real array.
+        // So `doms.concat(tags)` add tags as one object.
+        doms = doms.concat([].slice.call(tags));
+    });
+
+    return doms;
+};
+
+
+/**
+ * Mark DOMs to be unused before painting, and clear unused ones at the end
+ * of the painting.
+ */
+Definable.prototype.markAllUnused = function () {
+    var doms = this.getDoms();
+    var that = this;
+    each$1(doms, function (dom) {
+        dom[that._markLabel] = MARK_UNUSED;
+    });
+};
+
+
+/**
+ * Mark a single DOM to be used.
+ *
+ * @param {SVGElement} dom DOM to mark
+ */
+Definable.prototype.markUsed = function (dom) {
+    if (dom) {
+        dom[this._markLabel] = MARK_USED;
+    }
+};
+
+
+/**
+ * Remove unused DOMs defined in <defs>
+ */
+Definable.prototype.removeUnused = function () {
+    var defs = this.getDefs(false);
+    if (!defs) {
+        // Nothing to remove
+        return;
+    }
+
+    var doms = this.getDoms();
+    var that = this;
+    each$1(doms, function (dom) {
+        if (dom[that._markLabel] !== MARK_USED) {
+            // Remove gradient
+            defs.removeChild(dom);
+        }
+    });
+};
+
+
+/**
+ * Get SVG proxy.
+ *
+ * @param {Displayable} displayable displayable element
+ * @return {Path|Image|Text} svg proxy of given element
+ */
+Definable.prototype.getSvgProxy = function (displayable) {
+    if (displayable instanceof Path) {
+        return svgPath;
+    }
+    else if (displayable instanceof ZImage) {
+        return svgImage;
+    }
+    else if (displayable instanceof Text) {
+        return svgText;
+    }
+    else {
+        return svgPath;
+    }
+};
+
+
+/**
+ * Get text SVG element.
+ *
+ * @param {Displayable} displayable displayable element
+ * @return {SVGElement} SVG element of text
+ */
+Definable.prototype.getTextSvgElement = function (displayable) {
+    return displayable.__textSvgEl;
+};
+
+
+/**
+ * Get SVG element.
+ *
+ * @param {Displayable} displayable displayable element
+ * @return {SVGElement} SVG element
+ */
+Definable.prototype.getSvgElement = function (displayable) {
+    return displayable.__svgEl;
+};
+
+/**
+ * @file Manages SVG gradient elements.
+ * @author Zhang Wenli
+ */
+
+/**
+ * Manages SVG gradient elements.
+ *
+ * @class
+ * @extends Definable
+ * @param   {number}     zrId    zrender instance id
+ * @param   {SVGElement} svgRoot root of SVG document
+ */
+function GradientManager(zrId, svgRoot) {
+    Definable.call(
+        this,
+        zrId,
+        svgRoot,
+        ['linearGradient', 'radialGradient'],
+        '__gradient_in_use__'
+    );
+}
+
+
+inherits(GradientManager, Definable);
+
+
+/**
+ * Create new gradient DOM for fill or stroke if not exist,
+ * but will not update gradient if exists.
+ *
+ * @param {SvgElement}  svgElement   SVG element to paint
+ * @param {Displayable} displayable  zrender displayable element
+ */
+GradientManager.prototype.addWithoutUpdate = function (
+    svgElement,
+    displayable
+) {
+    if (displayable && displayable.style) {
+        var that = this;
+        each$1(['fill', 'stroke'], function (fillOrStroke) {
+            if (displayable.style[fillOrStroke]
+                && (displayable.style[fillOrStroke].type === 'linear'
+                || displayable.style[fillOrStroke].type === 'radial')
+            ) {
+                var gradient = displayable.style[fillOrStroke];
+                var defs = that.getDefs(true);
+
+                // Create dom in <defs> if not exists
+                var dom;
+                if (gradient._dom) {
+                    // Gradient exists
+                    dom = gradient._dom;
+                    if (!defs.contains(gradient._dom)) {
+                        // _dom is no longer in defs, recreate
+                        that.addDom(dom);
+                    }
+                }
+                else {
+                    // New dom
+                    dom = that.add(gradient);
+                }
+
+                that.markUsed(displayable);
+
+                var id = dom.getAttribute('id');
+                svgElement.setAttribute(fillOrStroke, 'url(#' + id + ')');
+            }
+        });
+    }
+};
+
+
+/**
+ * Add a new gradient tag in <defs>
+ *
+ * @param   {Gradient} gradient zr gradient instance
+ * @return {SVGLinearGradientElement | SVGRadialGradientElement}
+ *                            created DOM
+ */
+GradientManager.prototype.add = function (gradient) {
+    var dom;
+    if (gradient.type === 'linear') {
+        dom = this.createElement('linearGradient');
+    }
+    else if (gradient.type === 'radial') {
+        dom = this.createElement('radialGradient');
+    }
+    else {
+        zrLog('Illegal gradient type.');
+        return null;
+    }
+
+    // Set dom id with gradient id, since each gradient instance
+    // will have no more than one dom element.
+    // id may exists before for those dirty elements, in which case
+    // id should remain the same, and other attributes should be
+    // updated.
+    gradient.id = gradient.id || this.nextId++;
+    dom.setAttribute('id', 'zr' + this._zrId
+        + '-gradient-' + gradient.id);
+
+    this.updateDom(gradient, dom);
+    this.addDom(dom);
+
+    return dom;
+};
+
+
+/**
+ * Update gradient.
+ *
+ * @param {Gradient} gradient zr gradient instance
+ */
+GradientManager.prototype.update = function (gradient) {
+    var that = this;
+    Definable.prototype.update.call(this, gradient, function () {
+        var type = gradient.type;
+        var tagName = gradient._dom.tagName;
+        if (type === 'linear' && tagName === 'linearGradient'
+            || type === 'radial' && tagName === 'radialGradient'
+        ) {
+            // Gradient type is not changed, update gradient
+            that.updateDom(gradient, gradient._dom);
+        }
+        else {
+            // Remove and re-create if type is changed
+            that.removeDom(gradient);
+            that.add(gradient);
+        }
+    });
+};
+
+
+/**
+ * Update gradient dom
+ *
+ * @param {Gradient} gradient zr gradient instance
+ * @param {SVGLinearGradientElement | SVGRadialGradientElement} dom
+ *                            DOM to update
+ */
+GradientManager.prototype.updateDom = function (gradient, dom) {
+    if (gradient.type === 'linear') {
+        dom.setAttribute('x1', gradient.x);
+        dom.setAttribute('y1', gradient.y);
+        dom.setAttribute('x2', gradient.x2);
+        dom.setAttribute('y2', gradient.y2);
+    }
+    else if (gradient.type === 'radial') {
+        dom.setAttribute('cx', gradient.x);
+        dom.setAttribute('cy', gradient.y);
+        dom.setAttribute('r', gradient.r);
+    }
+    else {
+        zrLog('Illegal gradient type.');
+        return;
+    }
+
+    if (gradient.global) {
+        // x1, x2, y1, y2 in range of 0 to canvas width or height
+        dom.setAttribute('gradientUnits', 'userSpaceOnUse');
+    }
+    else {
+        // x1, x2, y1, y2 in range of 0 to 1
+        dom.setAttribute('gradientUnits', 'objectBoundingBox');
+    }
+
+    // Remove color stops if exists
+    dom.innerHTML = '';
+
+    // Add color stops
+    var colors = gradient.colorStops;
+    for (var i = 0, len = colors.length; i < len; ++i) {
+        var stop = this.createElement('stop');
+        stop.setAttribute('offset', colors[i].offset * 100 + '%');
+        stop.setAttribute('stop-color', colors[i].color);
+        dom.appendChild(stop);
+    }
+
+    // Store dom element in gradient, to avoid creating multiple
+    // dom instances for the same gradient element
+    gradient._dom = dom;
+};
+
+/**
+ * Mark a single gradient to be used
+ *
+ * @param {Displayable} displayable displayable element
+ */
+GradientManager.prototype.markUsed = function (displayable) {
+    if (displayable.style) {
+        var gradient = displayable.style.fill;
+        if (gradient && gradient._dom) {
+            Definable.prototype.markUsed.call(this, gradient._dom);
+        }
+
+        gradient = displayable.style.stroke;
+        if (gradient && gradient._dom) {
+            Definable.prototype.markUsed.call(this, gradient._dom);
+        }
+    }
+};
+
+/**
+ * @file Manages SVG clipPath elements.
+ * @author Zhang Wenli
+ */
+
+/**
+ * Manages SVG clipPath elements.
+ *
+ * @class
+ * @extends Definable
+ * @param   {number}     zrId    zrender instance id
+ * @param   {SVGElement} svgRoot root of SVG document
+ */
+function ClippathManager(zrId, svgRoot) {
+    Definable.call(this, zrId, svgRoot, 'clipPath', '__clippath_in_use__');
+}
+
+
+inherits(ClippathManager, Definable);
+
+
+/**
+ * Update clipPath.
+ *
+ * @param {Displayable} displayable displayable element
+ */
+ClippathManager.prototype.update = function (displayable) {
+    var svgEl = this.getSvgElement(displayable);
+    if (svgEl) {
+        this.updateDom(svgEl, displayable.__clipPaths, false);
+    }
+
+    var textEl = this.getTextSvgElement(displayable);
+    if (textEl) {
+        // Make another clipPath for text, since it's transform
+        // matrix is not the same with svgElement
+        this.updateDom(textEl, displayable.__clipPaths, true);
+    }
+
+    this.markUsed(displayable);
+};
+
+
+/**
+ * Create an SVGElement of displayable and create a <clipPath> of its
+ * clipPath
+ *
+ * @param {Displayable} parentEl  parent element
+ * @param {ClipPath[]}  clipPaths clipPaths of parent element
+ * @param {boolean}     isText    if parent element is Text
+ */
+ClippathManager.prototype.updateDom = function (
+    parentEl,
+    clipPaths,
+    isText
+) {
+    if (clipPaths && clipPaths.length > 0) {
+        // Has clipPath, create <clipPath> with the first clipPath
+        var defs = this.getDefs(true);
+        var clipPath = clipPaths[0];
+        var clipPathEl;
+        var id;
+
+        var dom = isText ? '_textDom' : '_dom';
+
+        if (clipPath[dom]) {
+            // Use a dom that is already in <defs>
+            id = clipPath[dom].getAttribute('id');
+            clipPathEl = clipPath[dom];
+
+            // Use a dom that is already in <defs>
+            if (!defs.contains(clipPathEl)) {
+                // This happens when set old clipPath that has
+                // been previously removed
+                defs.appendChild(clipPathEl);
+            }
+        }
+        else {
+            // New <clipPath>
+            id = 'zr' + this._zrId + '-clip-' + this.nextId;
+            ++this.nextId;
+            clipPathEl = this.createElement('clipPath');
+            clipPathEl.setAttribute('id', id);
+            defs.appendChild(clipPathEl);
+
+            clipPath[dom] = clipPathEl;
+        }
+
+        // Build path and add to <clipPath>
+        var svgProxy = this.getSvgProxy(clipPath);
+        if (clipPath.transform
+            && clipPath.parent.invTransform
+            && !isText
+        ) {
+            /**
+             * If a clipPath has a parent with transform, the transform
+             * of parent should not be considered when setting transform
+             * of clipPath. So we need to transform back from parent's
+             * transform, which is done by multiplying parent's inverse
+             * transform.
+             */
+            // Store old transform
+            var transform = Array.prototype.slice.call(
+                clipPath.transform
+            );
+
+            // Transform back from parent, and brush path
+            mul$1(
+                clipPath.transform,
+                clipPath.parent.invTransform,
+                clipPath.transform
+            );
+            svgProxy.brush(clipPath);
+
+            // Set back transform of clipPath
+            clipPath.transform = transform;
+        }
+        else {
+            svgProxy.brush(clipPath);
+        }
+
+        var pathEl = this.getSvgElement(clipPath);
+
+        clipPathEl.innerHTML = '';
+        /**
+         * Use `cloneNode()` here to appendChild to multiple parents,
+         * which may happend when Text and other shapes are using the same
+         * clipPath. Since Text will create an extra clipPath DOM due to
+         * different transform rules.
+         */
+        clipPathEl.appendChild(pathEl.cloneNode());
+
+        parentEl.setAttribute('clip-path', 'url(#' + id + ')');
+
+        if (clipPaths.length > 1) {
+            // Make the other clipPaths recursively
+            this.updateDom(clipPathEl, clipPaths.slice(1), isText);
+        }
+    }
+    else {
+        // No clipPath
+        if (parentEl) {
+            parentEl.setAttribute('clip-path', 'none');
+        }
+    }
+};
+
+/**
+ * Mark a single clipPath to be used
+ *
+ * @param {Displayable} displayable displayable element
+ */
+ClippathManager.prototype.markUsed = function (displayable) {
+    var that = this;
+    if (displayable.__clipPaths && displayable.__clipPaths.length > 0) {
+        each$1(displayable.__clipPaths, function (clipPath) {
+            if (clipPath._dom) {
+                Definable.prototype.markUsed.call(that, clipPath._dom);
+            }
+            if (clipPath._textDom) {
+                Definable.prototype.markUsed.call(that, clipPath._textDom);
+            }
+        });
+    }
+};
+
+/**
+ * @file Manages SVG shadow elements.
+ * @author Zhang Wenli
+ */
+
+/**
+ * Manages SVG shadow elements.
+ *
+ * @class
+ * @extends Definable
+ * @param   {number}     zrId    zrender instance id
+ * @param   {SVGElement} svgRoot root of SVG document
+ */
+function ShadowManager(zrId, svgRoot) {
+    Definable.call(
+        this,
+        zrId,
+        svgRoot,
+        ['filter'],
+        '__filter_in_use__',
+        '_shadowDom'
+    );
+}
+
+
+inherits(ShadowManager, Definable);
+
+
+/**
+ * Create new shadow DOM for fill or stroke if not exist,
+ * but will not update shadow if exists.
+ *
+ * @param {SvgElement}  svgElement   SVG element to paint
+ * @param {Displayable} displayable  zrender displayable element
+ */
+ShadowManager.prototype.addWithoutUpdate = function (
+    svgElement,
+    displayable
+) {
+    if (displayable && hasShadow(displayable.style)) {
+        var style = displayable.style;
+
+        // Create dom in <defs> if not exists
+        var dom;
+        if (style._shadowDom) {
+            // Gradient exists
+            dom = style._shadowDom;
+
+            var defs = this.getDefs(true);
+            if (!defs.contains(style._shadowDom)) {
+                // _shadowDom is no longer in defs, recreate
+                this.addDom(dom);
+            }
+        }
+        else {
+            // New dom
+            dom = this.add(displayable);
+        }
+
+        this.markUsed(displayable);
+
+        var id = dom.getAttribute('id');
+        svgElement.style.filter = 'url(#' + id + ')';
+    }
+};
+
+
+/**
+ * Add a new shadow tag in <defs>
+ *
+ * @param {Displayable} displayable  zrender displayable element
+ * @return {SVGFilterElement} created DOM
+ */
+ShadowManager.prototype.add = function (displayable) {
+    var dom = this.createElement('filter');
+    var style = displayable.style;
+
+    // Set dom id with shadow id, since each shadow instance
+    // will have no more than one dom element.
+    // id may exists before for those dirty elements, in which case
+    // id should remain the same, and other attributes should be
+    // updated.
+    style._shadowDomId = style._shadowDomId || this.nextId++;
+    dom.setAttribute('id', 'zr' + this._zrId
+        + '-shadow-' + style._shadowDomId);
+
+    this.updateDom(displayable, dom);
+    this.addDom(dom);
+
+    return dom;
+};
+
+
+/**
+ * Update shadow.
+ *
+ * @param {Displayable} displayable  zrender displayable element
+ */
+ShadowManager.prototype.update = function (svgElement, displayable) {
+    var style = displayable.style;
+    if (hasShadow(style)) {
+        var that = this;
+        Definable.prototype.update.call(this, displayable, function (style) {
+            that.updateDom(displayable, style._shadowDom);
+        });
+    }
+    else {
+        // Remove shadow
+        this.remove(svgElement, style);
+    }
+};
+
+
+/**
+ * Remove DOM and clear parent filter
+ */
+ShadowManager.prototype.remove = function (svgElement, style) {
+    if (style._shadowDomId != null) {
+        this.removeDom(style);
+        svgElement.style.filter = '';
+    }
+};
+
+
+/**
+ * Update shadow dom
+ *
+ * @param {Displayable} displayable  zrender displayable element
+ * @param {SVGFilterElement} dom DOM to update
+ */
+ShadowManager.prototype.updateDom = function (displayable, dom) {
+    var domChild = dom.getElementsByTagName('feDropShadow');
+    if (domChild.length === 0) {
+        domChild = this.createElement('feDropShadow');
+    }
+    else {
+        domChild = domChild[0];
+    }
+
+    var style = displayable.style;
+    var scaleX = displayable.scale ? (displayable.scale[0] || 1) : 1;
+    var scaleY = displayable.scale ? (displayable.scale[1] || 1) : 1;
+
+    // TODO: textBoxShadowBlur is not supported yet
+    var offsetX, offsetY, blur, color;
+    if (style.shadowBlur || style.shadowOffsetX || style.shadowOffsetY) {
+        offsetX = style.shadowOffsetX || 0;
+        offsetY = style.shadowOffsetY || 0;
+        blur = style.shadowBlur;
+        color = style.shadowColor;
+    }
+    else if (style.textShadowBlur) {
+        offsetX = style.textShadowOffsetX || 0;
+        offsetY = style.textShadowOffsetY || 0;
+        blur = style.textShadowBlur;
+        color = style.textShadowColor;
+    }
+    else {
+        // Remove shadow
+        this.removeDom(dom, style);
+        return;
+    }
+
+    domChild.setAttribute('dx', offsetX / scaleX);
+    domChild.setAttribute('dy', offsetY / scaleY);
+    domChild.setAttribute('flood-color', color);
+
+    // Divide by two here so that it looks the same as in canvas
+    // See: https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-shadowblur
+    var stdDx = blur / 2 / scaleX;
+    var stdDy = blur / 2 / scaleY;
+    var stdDeviation = stdDx + ' ' + stdDy;
+    domChild.setAttribute('stdDeviation', stdDeviation);
+
+    // Fix filter clipping problem
+    dom.setAttribute('x', '-100%');
+    dom.setAttribute('y', '-100%');
+    dom.setAttribute('width', Math.ceil(blur / 2 * 200) + '%');
+    dom.setAttribute('height', Math.ceil(blur / 2 * 200) + '%');
+
+    dom.appendChild(domChild);
+
+    // Store dom element in shadow, to avoid creating multiple
+    // dom instances for the same shadow element
+    style._shadowDom = dom;
+};
+
+/**
+ * Mark a single shadow to be used
+ *
+ * @param {Displayable} displayable displayable element
+ */
+ShadowManager.prototype.markUsed = function (displayable) {
+    var style = displayable.style;
+    if (style && style._shadowDom) {
+        Definable.prototype.markUsed.call(this, style._shadowDom);
+    }
+};
+
+function hasShadow(style) {
+    // TODO: textBoxShadowBlur is not supported yet
+    return style
+        && (style.shadowBlur || style.shadowOffsetX || style.shadowOffsetY
+            || style.textShadowBlur || style.textShadowOffsetX
+            || style.textShadowOffsetY);
+}
+
+/**
+ * SVG Painter
+ * @module zrender/svg/Painter
+ */
+
+function parseInt10$2(val) {
+    return parseInt(val, 10);
+}
+
+function getSvgProxy(el) {
+    if (el instanceof Path) {
+        return svgPath;
+    }
+    else if (el instanceof ZImage) {
+        return svgImage;
+    }
+    else if (el instanceof Text) {
+        return svgText;
+    }
+    else {
+        return svgPath;
+    }
+}
+
+function checkParentAvailable(parent, child) {
+    return child && parent && child.parentNode !== parent;
+}
+
+function insertAfter(parent, child, prevSibling) {
+    if (checkParentAvailable(parent, child) && prevSibling) {
+        var nextSibling = prevSibling.nextSibling;
+        nextSibling ? parent.insertBefore(child, nextSibling)
+            : parent.appendChild(child);
+    }
+}
+
+function prepend(parent, child) {
+    if (checkParentAvailable(parent, child)) {
+        var firstChild = parent.firstChild;
+        firstChild ? parent.insertBefore(child, firstChild)
+            : parent.appendChild(child);
+    }
+}
+
+function remove$1(parent, child) {
+    if (child && parent && child.parentNode === parent) {
+        parent.removeChild(child);
+    }
+}
+
+function getTextSvgElement(displayable) {
+    return displayable.__textSvgEl;
+}
+
+function getSvgElement(displayable) {
+    return displayable.__svgEl;
+}
+
+/**
+ * @alias module:zrender/svg/Painter
+ * @constructor
+ * @param {HTMLElement} root ç»˜å›¾å®¹å™¨
+ * @param {module:zrender/Storage} storage
+ * @param {Object} opts
+ */
+var SVGPainter = function (root, storage, opts, zrId) {
+
+    this.root = root;
+    this.storage = storage;
+    this._opts = opts = extend({}, opts || {});
+
+    var svgRoot = createElement('svg');
+    svgRoot.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    svgRoot.setAttribute('version', '1.1');
+    svgRoot.setAttribute('baseProfile', 'full');
+    svgRoot.style.cssText = 'user-select:none;position:absolute;left:0;top:0;';
+
+    this.gradientManager = new GradientManager(zrId, svgRoot);
+    this.clipPathManager = new ClippathManager(zrId, svgRoot);
+    this.shadowManager = new ShadowManager(zrId, svgRoot);
+
+    var viewport = document.createElement('div');
+    viewport.style.cssText = 'overflow:hidden;position:relative';
+
+    this._svgRoot = svgRoot;
+    this._viewport = viewport;
+
+    root.appendChild(viewport);
+    viewport.appendChild(svgRoot);
+
+    this.resize(opts.width, opts.height);
+
+    this._visibleList = [];
+};
+
+SVGPainter.prototype = {
+
+    constructor: SVGPainter,
+
+    getType: function () {
+        return 'svg';
+    },
+
+    getViewportRoot: function () {
+        return this._viewport;
+    },
+
+    getViewportRootOffset: function () {
+        var viewportRoot = this.getViewportRoot();
+        if (viewportRoot) {
+            return {
+                offsetLeft: viewportRoot.offsetLeft || 0,
+                offsetTop: viewportRoot.offsetTop || 0
+            };
+        }
+    },
+
+    refresh: function () {
+
+        var list = this.storage.getDisplayList(true);
+
+        this._paintList(list);
+    },
+
+    setBackgroundColor: function (backgroundColor) {
+        // TODO gradient
+        this._viewport.style.background = backgroundColor;
+    },
+
+    _paintList: function (list) {
+        this.gradientManager.markAllUnused();
+        this.clipPathManager.markAllUnused();
+        this.shadowManager.markAllUnused();
+
+        var svgRoot = this._svgRoot;
+        var visibleList = this._visibleList;
+        var listLen = list.length;
+
+        var newVisibleList = [];
+        var i;
+        for (i = 0; i < listLen; i++) {
+            var displayable = list[i];
+            var svgProxy = getSvgProxy(displayable);
+            var svgElement = getSvgElement(displayable)
+                || getTextSvgElement(displayable);
+            if (!displayable.invisible) {
+                if (displayable.__dirty) {
+                    svgProxy && svgProxy.brush(displayable);
+
+                    // Update clipPath
+                    this.clipPathManager.update(displayable);
+
+                    // Update gradient and shadow
+                    if (displayable.style) {
+                        this.gradientManager
+                            .update(displayable.style.fill);
+                        this.gradientManager
+                            .update(displayable.style.stroke);
+
+                        this.shadowManager
+                            .update(svgElement, displayable);
+                    }
+
+                    displayable.__dirty = false;
+                }
+                newVisibleList.push(displayable);
+            }
+        }
+
+        var diff = arrayDiff$1(visibleList, newVisibleList);
+        var prevSvgElement;
+
+        // First do remove, in case element moved to the head and do remove
+        // after add
+        for (i = 0; i < diff.length; i++) {
+            var item = diff[i];
+            if (item.removed) {
+                for (var k = 0; k < item.count; k++) {
+                    var displayable = visibleList[item.indices[k]];
+                    var svgElement = getSvgElement(displayable);
+                    var textSvgElement = getTextSvgElement(displayable);
+                    remove$1(svgRoot, svgElement);
+                    remove$1(svgRoot, textSvgElement);
+                }
+            }
+        }
+        for (i = 0; i < diff.length; i++) {
+            var item = diff[i];
+            if (item.added) {
+                for (var k = 0; k < item.count; k++) {
+                    var displayable = newVisibleList[item.indices[k]];
+                    var svgElement = getSvgElement(displayable);
+                    var textSvgElement = getTextSvgElement(displayable);
+                    prevSvgElement
+                        ? insertAfter(svgRoot, svgElement, prevSvgElement)
+                        : prepend(svgRoot, svgElement);
+                    if (svgElement) {
+                        insertAfter(svgRoot, textSvgElement, svgElement);
+                    }
+                    else if (prevSvgElement) {
+                        insertAfter(
+                            svgRoot, textSvgElement, prevSvgElement
+                        );
+                    }
+                    else {
+                        prepend(svgRoot, textSvgElement);
+                    }
+                    // Insert text
+                    insertAfter(svgRoot, textSvgElement, svgElement);
+                    prevSvgElement = textSvgElement || svgElement
+                        || prevSvgElement;
+
+                    this.gradientManager
+                        .addWithoutUpdate(svgElement, displayable);
+                    this.shadowManager
+                        .addWithoutUpdate(prevSvgElement, displayable);
+                    this.clipPathManager.markUsed(displayable);
+                }
+            }
+            else if (!item.removed) {
+                for (var k = 0; k < item.count; k++) {
+                    var displayable = newVisibleList[item.indices[k]];
+                    prevSvgElement
+                        = svgElement
+                        = getTextSvgElement(displayable)
+                        || getSvgElement(displayable)
+                        || prevSvgElement;
+
+                    this.gradientManager.markUsed(displayable);
+                    this.gradientManager
+                        .addWithoutUpdate(svgElement, displayable);
+
+                    this.shadowManager.markUsed(displayable);
+                    this.shadowManager
+                        .addWithoutUpdate(svgElement, displayable);
+
+                    this.clipPathManager.markUsed(displayable);
+                }
+            }
+        }
+
+        this.gradientManager.removeUnused();
+        this.clipPathManager.removeUnused();
+        this.shadowManager.removeUnused();
+
+        this._visibleList = newVisibleList;
+    },
+
+    _getDefs: function (isForceCreating) {
+        var svgRoot = this._svgRoot;
+        var defs = this._svgRoot.getElementsByTagName('defs');
+        if (defs.length === 0) {
+            // Not exist
+            if (isForceCreating) {
+                var defs = svgRoot.insertBefore(
+                    createElement('defs'), // Create new tag
+                    svgRoot.firstChild // Insert in the front of svg
+                );
+                if (!defs.contains) {
+                    // IE doesn't support contains method
+                    defs.contains = function (el) {
+                        var children = defs.children;
+                        if (!children) {
+                            return false;
+                        }
+                        for (var i = children.length - 1; i >= 0; --i) {
+                            if (children[i] === el) {
+                                return true;
+                            }
+                        }
+                        return false;
+                    };
+                }
+                return defs;
+            }
+            else {
+                return null;
+            }
+        }
+        else {
+            return defs[0];
+        }
+    },
+
+    resize: function (width, height) {
+        var viewport = this._viewport;
+        // FIXME Why ?
+        viewport.style.display = 'none';
+
+        // Save input w/h
+        var opts = this._opts;
+        width != null && (opts.width = width);
+        height != null && (opts.height = height);
+
+        width = this._getSize(0);
+        height = this._getSize(1);
+
+        viewport.style.display = '';
+
+        if (this._width !== width || this._height !== height) {
+            this._width = width;
+            this._height = height;
+
+            var viewportStyle = viewport.style;
+            viewportStyle.width = width + 'px';
+            viewportStyle.height = height + 'px';
+
+            var svgRoot = this._svgRoot;
+            // Set width by 'svgRoot.width = width' is invalid
+            svgRoot.setAttribute('width', width);
+            svgRoot.setAttribute('height', height);
+        }
+    },
+
+    /**
+     * èŽ·å–ç»˜å›¾åŒºåŸŸå®½åº¦
+     */
+    getWidth: function () {
+        return this._width;
+    },
+
+    /**
+     * èŽ·å–ç»˜å›¾åŒºåŸŸé«˜åº¦
+     */
+    getHeight: function () {
+        return this._height;
+    },
+
+    _getSize: function (whIdx) {
+        var opts = this._opts;
+        var wh = ['width', 'height'][whIdx];
+        var cwh = ['clientWidth', 'clientHeight'][whIdx];
+        var plt = ['paddingLeft', 'paddingTop'][whIdx];
+        var prb = ['paddingRight', 'paddingBottom'][whIdx];
+
+        if (opts[wh] != null && opts[wh] !== 'auto') {
+            return parseFloat(opts[wh]);
+        }
+
+        var root = this.root;
+        // IE8 does not support getComputedStyle, but it use VML.
+        var stl = document.defaultView.getComputedStyle(root);
+
+        return (
+            (root[cwh] || parseInt10$2(stl[wh]) || parseInt10$2(root.style[wh]))
+            - (parseInt10$2(stl[plt]) || 0)
+            - (parseInt10$2(stl[prb]) || 0)
+        ) | 0;
+    },
+
+    dispose: function () {
+        this.root.innerHTML = '';
+
+        this._svgRoot
+            = this._viewport
+            = this.storage
+            = null;
+    },
+
+    clear: function () {
+        if (this._viewport) {
+            this.root.removeChild(this._viewport);
+        }
+    },
+
+    pathToDataUrl: function () {
+        this.refresh();
+        var html = this._svgRoot.outerHTML;
+        return 'data:image/svg+xml;charset=UTF-8,' + html;
+    }
+};
+
+// Not supported methods
+function createMethodNotSupport$1(method) {
+    return function () {
+        zrLog('In SVG mode painter not support method "' + method + '"');
+    };
+}
+
+// Unsuppoted methods
+each$1([
+    'getLayer', 'insertLayer', 'eachLayer', 'eachBuiltinLayer',
+    'eachOtherLayer', 'getLayers', 'modLayer', 'delLayer', 'clearLayer',
+    'toDataURL', 'pathToImage'
+], function (name) {
+    SVGPainter.prototype[name] = createMethodNotSupport$1(name);
+});
+
+registerPainter('svg', SVGPainter);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+// Import all charts and components
+
+exports.version = version;
+exports.dependencies = dependencies;
+exports.PRIORITY = PRIORITY;
+exports.init = init;
+exports.connect = connect;
+exports.disConnect = disConnect;
+exports.disconnect = disconnect;
+exports.dispose = dispose;
+exports.getInstanceByDom = getInstanceByDom;
+exports.getInstanceById = getInstanceById;
+exports.registerTheme = registerTheme;
+exports.registerPreprocessor = registerPreprocessor;
+exports.registerProcessor = registerProcessor;
+exports.registerPostUpdate = registerPostUpdate;
+exports.registerAction = registerAction;
+exports.registerCoordinateSystem = registerCoordinateSystem;
+exports.getCoordinateSystemDimensions = getCoordinateSystemDimensions;
+exports.registerLayout = registerLayout;
+exports.registerVisual = registerVisual;
+exports.registerLoading = registerLoading;
+exports.extendComponentModel = extendComponentModel;
+exports.extendComponentView = extendComponentView;
+exports.extendSeriesModel = extendSeriesModel;
+exports.extendChartView = extendChartView;
+exports.setCanvasCreator = setCanvasCreator;
+exports.registerMap = registerMap;
+exports.getMap = getMap;
+exports.dataTool = dataTool;
+exports.zrender = zrender;
+exports.graphic = graphic;
+exports.number = number;
+exports.format = format;
+exports.throttle = throttle;
+exports.helper = helper;
+exports.matrix = matrix;
+exports.vector = vector;
+exports.color = color;
+exports.parseGeoJSON = parseGeoJson$1;
+exports.parseGeoJson = parseGeoJson;
+exports.util = ecUtil;
+exports.List = List;
+exports.Model = Model;
+exports.Axis = Axis;
+exports.env = env$1;
+
+})));
+//# sourceMappingURL=echarts.js.map
diff --git a/gicc/Scripts/jQuery-jcMarquee.js b/gicc/Scripts/jQuery-jcMarquee.js
new file mode 100644
index 0000000000000000000000000000000000000000..99e3ef76fb2c897ccdf2d742dd0bd736229acab0
--- /dev/null
+++ b/gicc/Scripts/jQuery-jcMarquee.js
@@ -0,0 +1,89 @@
+/*
+ * jQuery - jcMarquee v0.10
+ * Copyright(c) 2012 by Riddick-design 
+ * Date: 2012-01-07
+ * ç›¸å…³å‚æ•° 
+   'marquee':'x',        \\ è®¾ç½®æ»šåŠ¨æ–¹å‘ï¼Œæä¾› marquee:x æˆ– marquee:y
+   'margin_bottom':'0',  \\ è®¾ç½®margin_bottomå€¼
+   'margin_right':'0',   \\ è®¾ç½®margin_rightå€¼
+   'speed':'10'          \\ è®¾ç½®æ»šåŠ¨é€Ÿåº¦,å•ä½mm
+ * é‡è¦æé†’
+   #Marquee_x ul li { float:left;} // æ¨ªå‘æ»šåŠ¨æ—¶å¿…é¡»è®©æ‰€æœ‰liå·¦æµ®åŠ¨ 
+ * HTMLç»“æž„
+   <div id="Marquee"> 
+         <ul> 
+              <li> 
+                  <div><img height="50" width="100" alt="å›¾ç‰‡1" /></div>
+              </li>
+         </ul> 
+   </div>  
+ */
+; (function ($) {
+    $.fn.jcMarquee = function (options) {
+        var defaults = {
+            'marquee': 'x',
+            'margin_bottom': '0',
+            'margin_right': '0',
+            'speed': '10'
+        };
+        var options = $.extend(defaults, options);
+        return this.each(function () {
+            var $marquee = $(this),
+			    $marquee_scroll = $marquee.children('ul');
+            $marquee_scroll.append("<li class='clone' id='clone'>" + "</li>");
+            $marquee_scroll.append("<li class='clone' id='clone1'>" + "</li>");
+            $marquee_scroll.append("<li class='clone' id='clone2'>" + "</li>");
+            $marquee_scroll.append("<li class='clone' id='clone3'>" + "</li>");
+            $marquee_scroll.append("<li class='clone' id='clone4'>" + "</li>");
+            $marquee_scroll.append("<li class='clone' id='clone5'>" + "</li>");
+            $marquee_scroll.append("<li class='clone' id='clone6'>" + "</li>");
+            $marquee_scroll.append("<li class='clone' id='clone7'>" + "</li>");
+            $marquee_scroll.append("<li class='clone' id='clone8'>" + "</li>");
+            $marquee_scroll.append("<li class='clone' id='clone9'>" + "</li>");
+            $marquee_scroll.append("<li class='clone' id='clone10'>" + "</li>");
+            $marquee_scroll.append("<li class='clone' id='clone11'>" + "</li>");
+            $marquee_scroll.append("<li class='clone' id='clone12'>" + "</li>");
+            $marquee_scroll.append("<li class='clone' id='clone13'>" + "</li>");
+            $marquee_scroll.find('li').eq(0).children().clone().appendTo('#clone');
+            $marquee_scroll.find('li').eq(1).children().clone().appendTo('#clone1');
+            $marquee_scroll.find('li').eq(2).children().clone().appendTo('#clone2');
+            $marquee_scroll.find('li').eq(3).children().clone().appendTo('#clone3');
+            $marquee_scroll.find('li').eq(4).children().clone().appendTo('#clone4');
+            $marquee_scroll.find('li').eq(5).children().clone().appendTo('#clone5');
+            $marquee_scroll.find('li').eq(6).children().clone().appendTo('#clone6');
+            $marquee_scroll.find('li').eq(7).children().clone().appendTo('#clone7');
+            $marquee_scroll.find('li').eq(8).children().clone().appendTo('#clone8');
+            $marquee_scroll.find('li').eq(9).children().clone().appendTo('#clone9');
+            $marquee_scroll.find('li').eq(10).children().clone().appendTo('#clone10');
+            $marquee_scroll.find('li').eq(11).children().clone().appendTo('#clone11');
+            $marquee_scroll.find('li').eq(11).children().clone().appendTo('#clone12');
+            $marquee_scroll.find('li').eq(11).children().clone().appendTo('#clone13');
+            var $marquee_left = $marquee_scroll.find('li');
+            if (options.marquee === 'x') {
+               
+                $marquee_scroll.css('width', '1100%');
+                $marquee_left.find('div').css({ 'margin-right': options.margin_right });
+                $marquee_left.css({ 'margin-right': options.margin_right });
+				 var x = 0;
+                function Marquee_x() {
+                    $marquee.scrollLeft(++x);
+                    _margin = parseInt($marquee_left.find('div').css('margin-right'));
+                    if (x === $marquee_left.width() + _margin) { x = 0 };
+                }
+                var MyMar = setInterval(Marquee_x, options.speed);
+                $("#start").click(function () {
+                    x = 0;
+
+                    MyMar = setInterval(Marquee_x, options.speed);
+                });
+                $("#end").click(function () {
+					x=0;
+                 Marquee_x();
+                    clearInterval(MyMar);
+                });
+
+            }
+
+        });
+    };
+})(jQuery);
\ No newline at end of file
diff --git a/gicc/Scripts/update.js b/gicc/Scripts/update.js
new file mode 100644
index 0000000000000000000000000000000000000000..8055b0c661209695c03b8dd7d4e7092f06595e94
--- /dev/null
+++ b/gicc/Scripts/update.js
@@ -0,0 +1,111 @@
+// è¡€æ£€æ€»äººæ•°
+let num = 33869;
+//hpè¡€æ£€é˜³æ€§æ•°
+let num2 = 15197;
+// å®žé™…ç²¾æŸ¥äººæ•°
+let num3 = 5409;
+// /åº”ç²¾æŸ¥äººæ•°
+let num4 = 11751;
+// é«˜çº§åˆ«ä¸Šçš®å†…ç˜¤å˜
+let rnum1 = '80%';
+// æ—©æœŸèƒƒç™Œ
+let rnum2 = '80%';
+// æ—©æœŸé£Ÿç®¡ç™Œ
+let rnum3 = '54%';
+// èŽç¼©æ€§èƒƒç‚Ž
+let onum1 = 1174;
+// èƒƒæºƒç–¡
+let onum2 = 349;
+// èƒƒæ¯è‚‰
+let onum3 = 837;
+// ç”³è¯·åŒ»é™¢
+let anum1 = 450;
+// å¼€å±•ç›æŸ¥åŒ»é™¢
+let anum2 = 83;
+// ç›æŸ¥æ€»äººæ•°
+let anum3 = 33869;
+// è®¤è¯åŒ»é™¢
+let anum4 = 347;
+
+// ä½¿ç”¨åŽå°è¿”å›žæ•°æ®å¡«å……
+$.getJSON("http://172.30.2.105:2019/data-plat/complex/statistics", function(data) {
+    let complex = data.data;
+   // console.log(complex);
+    obj.count1.lastNumber = complex.serumActualTotal;
+    obj.count2.lastNumber = complex.iggPositive;
+    obj.count3.lastNumber = complex.gastroscopyDetailActual;
+    obj.count4.lastNumber = complex.gastroscopyDetailTotal;
+    obj.rate1 = parseInt(((obj.count2.lastNumber / obj.count1.lastNumber)) * 100) - 1.2 + '%';
+    obj.rate2 = parseInt(((obj.count3.lastNumber / obj.count4.lastNumber)) * 100) - 2 + '%';
+    obj.rate14k = parseInt(((obj.count2.lastNumber / obj.count1.lastNumber)) * 100) - 1 + '%';
+    obj.rate24k = parseInt(((obj.count3.lastNumber / obj.count4.lastNumber)) * 100) - 2 + '%';
+    obj.rate1pc = parseInt(((obj.count2.lastNumber / obj.count1.lastNumber)) * 100) - 1 + '%';
+    obj.rate2pc = parseInt(((obj.count3.lastNumber / obj.count4.lastNumber)) * 100) - 2 + '%';
+    obj.rnum1 = complex.highEsophagusTumor;
+    obj.rnum2 = complex.earlyEsophagealCancer;
+    obj.rnum3 = complex.earlyGastricCancer;
+    obj.onum1 = complex.atrophicGastritis;
+    obj.onum2 = complex.stomachUlcer;
+    obj.onum3 = complex.gastricPolyp;
+    obj.anum1 = complex.applyHosp;
+    obj.anum2 = complex.screeningHosp;
+    obj.anum3 = complex.screeningTotal;
+    obj.anum4 = complex.certifiedHosp;
+});
+
+let obj = {
+    // è¡€æ£€æ€»äººæ•°
+    count1: {
+        lastNumber: num,
+        duration: 3000,
+        easing: 'swing', //æ…¢å¿«æ…¢
+    },
+    //hpè¡€æ£€é˜³æ€§æ•°
+    count2: {
+        lastNumber: num2,
+        duration: 3000,
+        easing: 'swing', //æ…¢å¿«æ…¢
+    },
+    // å®žé™…ç²¾æŸ¥äººæ•°
+    count3: {
+        lastNumber: num3,
+        duration: 3000,
+        easing: 'swing', //æ…¢å¿«æ…¢
+    },
+    // /åº”ç²¾æŸ¥äººæ•°
+    count4: {
+        lastNumber: num4,
+        duration: 3000,
+        easing: 'swing', //æ…¢å¿«æ…¢
+    },
+    //ç¬¬ä¸€ç»„å°äººçš„ä¸ªæ•°Big
+    rate1: parseInt(((num2 / num)) * 100) - 1.2 + '%',
+    //ç¬¬äºŒç»„å°äººçš„ä¸ªæ•°Big
+    rate2: parseInt(((num3 / num4)) * 100) - 2 + '%',
+    //ç¬¬ä¸€ç»„å°äººçš„ä¸ªæ•°4K
+    rate14k: parseInt(((num2 / num)) * 100) - 1 + '%',
+    //ç¬¬äºŒç»„å°äººçš„ä¸ªæ•°4K
+    rate24k: parseInt(((num3 / num4)) * 100) - 2 + '%',
+    //ç¬¬ä¸€ç»„å°äººçš„ä¸ªæ•°PC
+    rate1pc: parseInt(((num2 / num)) * 100) - 1 + '%',
+    //ç¬¬äºŒç»„å°äººçš„ä¸ªæ•°PC
+    rate2pc: parseInt(((num3 / num4)) * 100) - 2 + '%',
+    //è¯Šæ–ç»“æžœ
+    rnum1,
+    rnum2,
+    rnum3,
+    // å…¶ä»–
+    onum1,
+    onum2,
+    onum3,
+    anum1,
+    anum2,
+    anum3,
+    anum4
+};
+
+
+
+
+
+