Introduction

ECharts (Enterprise Charts), written in pure JavaScript and based on ZRender (a whole new lightweight canvas library), is a comprehensive charting library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products. It works with all your web and mobile applications, including IE6/7/8/9/10/11, Chrome, Firefox, Safari and Opera. With original features like Drag-Recalculate, Data View and Scale Roaming, ECharts lets you mine and integrate data in ways you didn't think possible.

ECharts currently supports 12 chart types, including line (area), column (bar), scatter (bubble), pie (doughnut), radar (filled radar), candlestick, chord, gauge, funnel, map, eventRiver and force-directed chart. Each and every chart is equipped with 7 interactive components: title, tooltip, legend, scale, data area, timeline, and toolbox. Many of these components and charts can be combined in one chart.

Glossary

General Terms

Charts Terms

Chart Types

The charting library includes basic single chart type and combination chart type.

single chart type: line

line	stacked line	area	stacked area

single chart type: bar (column)

column	stacked column	bar	stacked bar

single chart type: scatter

scatter		bubble

single chart type: k (candlestick)

candlestick

single chart type: pie

pie	doughnut	Nightingale’s rose diagram

single chart type: radar

radar	filled radar

single chart type: chord

chord

single chart type: force

force-directed chart

single chart type: map

China Map	Map of China Provinces & Cities	World Map
Sub-Region Mode	Standard GeoJson Extension	SVG Extension

single chart type: gauge

angular gauge

single chart type: funnel

funnel

single chart type: eventRiver

eventRiver

Import ECharts

We offer you various ways to import the ECharts library in your page, so that you can always choose the right one for your project.

modular package import

If you are familiar with modular programming, and your project is modular and follows the AMD module specification, then it will be fairly easy to import echarts in your page; Import a module loader, like esl.js, and configure the packet path to point to src, and you will enjoy the chart’s maximum flexibility, such as load-on-demand. Since ECharts is based on ZRender, you also need to download ZRender locally. Reference is made to demo. Now you need to configure as follows.

Please note: although package import maximizes flexibility in the development phase, it is not intended for going online directly. Reducing the number of documents requested is the most fundamental rule of front-end optimization, so please be sure to compress files when you go on line.

//from echarts example
require.config({
    packages: [
        {
            name: 'echarts',
            location: '../../src',
            main: 'echarts'
        },
        {
            name: 'zrender',
            location: '../../../zrender/src', // zrender and echarts are in the same directory.
            main: 'zrender'
        }
    ]
});

modular single file import (preferred)

If you use modular programming, but do not have the packaging environment, or do not want to include a third party library source file to your project, then single file import seems to be a good choice. Like modular package import, you have to be familiar with modular programming.

Begin with 2.1.8, we have created a powerful tool for echarts compression: echarts-optimizer. As you can see below, the build folder has included several single files of different combinations which are generated by echarts-optimizer, and you are free to choose one of them according to your needs:

• dist ( folder ) : compressed
• • echarts.js : The echarts core file which should be import by a <script> tag, an AMD loader (esl.js) has been included in this file.
  • chart ( folder ) : Via dependency analysis, echarts-optimizer generates a single file for every chart types, you can choose one of them according to your needs:
    • echarts-line.js : Line ( require echarts/chart/bar as the same time if Magic switch is needed )
    • echarts-bar.js : Bar ( require echarts/chart/line as the same time if Magic switch is needed )
    • echarts-scatter.js : Scatter
    • echarts-k.js : Candlestick
    • echarts-pie.js : Pie ( require echarts/chart/funnel as the same time if Magic switch is needed )
    • echarts-radar.js : Radar
    • echarts-map.js : Map
    • echarts-force.js : Force-directed Chart ( require echarts/chart/chord as the same time if Magic switch is needed )
    • echarts-chord.js : Chord ( require echarts/chart/force as the same time if Magic switch is needed )
    • echarts-funnel.js : Funnel ( require echarts/chart/pie as the same time if Magic switch is needed )
    • echarts-gauge.js : Gauge
    • echarts-eventRiver.js : EventRiver
• source ( folder ) : uncompressed, same as dist which can be used to debug.

See example in ECharts single file import, stored in example/www. First you need to create a script tag src to echarts core ( echarts.js ).

//from echarts example
<body>
    <div id="main" style="height:400px;"></div>
    ...
    <script src="./js/echarts.js"></script>
</body>

You have get an AMD environment after echarts.js import, require.conifg as below:

//from echarts example
<body>
    <div id="main" style="height:400px;"></div>
    ...
    <script src="./js/echarts.js"></script>
    <script type="text/javascript">
        require.config({
            paths: {
                echarts: './js/dist'
            }
        });
    </script>
</body>

You can use ECharts by dynamic loading after the require.config.

//from echarts example
<body>
    <div id="main" style="height:400px;"></div>
    ...
    <script src="./js/echarts.js"></script>
    <script type="text/javascript">
        require.config({
            paths: {
                echarts: './js/dist'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/line',   // load-on-demand, don't forget the Magic switch type.
                'echarts/chart/bar'
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById('main'));
                var option = {
                    ...
                }
                myChart.setOption(option);
            }
        );
    </script>
</body>

In a nutshell, it takes four steps to import ECharts in module single file.

1. Prepare a Dom with size (width and height) for ECharts. (Of course it can be dynamically generated.)
2. Create a script tag src to echarts core ( echarts.js ).
3. Configure a ECharts path for the module loader, and link to echarts.js from the current page, see above.
4. Dynamically load ECharts and use callback function to initialize it. (PS: if you want to use ECharts on a page where you've already loaded it, just require('echarts').init(dom).)

plain single file import

The 1.3.5 release added support for plain import. If your project is not based on modularity, or it’s based on CMD specification (such as using sea.js), then it may not be appropriate for you to include the modular AMD-based ECharts. Therefore it is recommended that you use script plain import. Forget about require, you can directly use two global namespaces - ECharts, ZRender - after script plain import. Reference is made to ECharts plain import. Note that excanvas judges Canvas support by inserting the body tag into Canvas node, so if you put the script tag of ECharts into the head tag, IE8- browsers would give an error; the solution is to move the script tag into (behind) the body tag.

In the plain import environment, you can import common modules directly through namespace, same as the modular path, such as:
echarts.config = require('echarts/config'), zrender.tool.color = require('zrender/tool/color').

//from echarts example
<body>
    <div id="main" style="height:400px;"></div>
    ...
    <script src="example/www2/js/dist/echarts-all.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            ...
        }
        myChart.setOption(option);
    </script>
</body>

Single files that can be directly imported are listed below:

• dist/echarts-all.js : a compressed library of all the chart types, including World Map, China Map and Map of China Provinces & Cities.
• source/echarts-all.js : an uncompressed library of all the chart types, including World Map, China Map and Map of China Provinces & Cities. Available for debugging purposes.

Custom Build ECharts Single File

More detail about echarts-optimizer can be found at README.md

Initialization

After getting echarts interface through require (or in namespace), you can start to initialize chart. echarts interface has only one init method. When implementing init, pass in a dom node with size (width and height are not necessarily visible, as long as they can be calculated) and then you will get the instances of the chart object. The charting library has multiple instances, which means that you can init multiple charts at the same page on multiple doms, and if you init on the same dom repeatedly, the existing instance will be automatically disposed (1.4.0+ ). init method is illustrated as follows:

For available methods of chart instances, see Methods.

The initialization code after including ECharts is as follows:

// As the entrance
require(
    [
        'echarts',
        'echarts/chart/pie'
    ], 
    function (ec) {
        var myChart = ec.init(document.getElementById('main'));
        myChart.setOption({...});
    }
);

// -----------------------------

// For non-entrance or when using again, the chart has been loaded and registered
require('echarts').init(dom).setOption({...});

// If you need to use of ECharts later on, you'd better save the chart instances returned by init.
var myChart = require('echarts').init(dom);
myChart.setOption({...}); 

If you are familiar with modularity, you may skip the following code.

// If you are strange to modularity, you can...
var echarts;
require(['echarts'], function (ec){
    echarts = ec;
});
// Yes, save echarts after loading it, and use it as namespace. 

Instance Methods

Instance refers to the object returned by interface init (), such as "myChart" in the code above. All the non-get interfaces return themselves to support chained calls.

myCharts.setOption({
    timeline : {...},
    options : [
        {                // option1
            title : {...},
            series : [...]
        },  
        {...},           // option2
        ...
    ]
});

Options

option

Chart options, including all the configuration options for ECharts demos: general options , component options , data options

timeline

timeline, at most one timeline control is allowed in one chart. Try bar », scatter », pie », map »

{
    show: true,
    interval: 'auto',
    rotate: 0,
    formatter: null,
    textStyle: {
        color: '#333'
    }
}                           

{
    symbol : 'auto',
    symbolSize : 'auto',
    color : 'auto',
    borderColor : 'auto',
    borderWidth : 'auto',
    label: {
        show: false,
        textStyle: {
            color: 'auto'
        }
    }
}                           

{
    normal : { color : '#333'},
    emphasis : { color : '#1e90ff'}
}                               

title

title. In one chart, at most one title control is allowed, which can be devided into title and subtitle.

toolbox

Toolbox, at most one toolbox is allowed in one chart. Try this »

{
    mark : {
        show : false,
        title : {
            mark : '辅助线开关',
            markUndo : '删除辅助线',
            markClear : '清空辅助线'
        },
        lineStyle : {
            width : 2,
            color : '#1e90ff',
            type : 'dashed'
        }
    },
    dataZoom : {
        show : false,
        title : {
            dataZoom : '区域缩放',
            dataZoomReset : '区域缩放后退'
        }
    },
    dataView : {
        show : false,
        title : '数据视图',
        readOnly: false,
        lang: ['数据视图', '关闭', '刷新']
    },
    magicType: {
        show : false,
        title : {
            line : '折线图切换',
            bar : '柱形图切换',
            stack : '堆积',
            tiled : '平铺',
            force: '力导向布局图切换',
            chord: '和弦图切换',
            pie: '饼图切换',
            funnel: '漏斗图切换'
        },
        option: {
            // line: {...},
            // bar: {...},
            // stack: {...},
            // tiled: {...},
            // force: {...},
            // chord: {...},
            // pie: {...},
            // funnel: {...}
        },
        type : []
    },
    restore : {
        show : false,
        title : '还原'
    },
    saveAsImage : {
        show : false,
        title : '保存为图片',
        type : 'png',
        lang : ['点击保存'] 
    }
} 
                              

tooltip

Tooltip, a small "hover box" with detailed information about the item being hovered over. Try this »

content formatter：Try this »

• {string}, Template, its variables are:
  • {a} | {a0}
  • {b} | {b0}
  • {c} | {c0}
  • {d} | {d0} (some chart types do not have this variable)
  • {e} | {e0} (some chart types do not have this variable)
  • If there are multiple sets of data, there will be multiple sets of varaibles accordingly, like {a1}, {b1}, {c1}, {d1}, {a2}, {b2}, {c2}, {d2}, ...
  • Here are what variable a, b, c and d reprensent in different chart types:
    • line & area, column & bar, candlestick: a (series name), b(category value), c (value), d(null)
    • scatter & bubble: a (series name), b (data name), c (value array), d(null)
    • map: a (series name), b (area name), c(merged value), d(null)
    • pie, radar, gauge, funnel: a (series name), b (data item name)，c(value), d (pie: percent | radar: indicator name)
    • force, chord :
      • node : a (series name)，b (node name)，c (node value), d (node index), e
      • link : a (series name)，b (link name, default sourceName-targetName)，c(link weight), d(name or index of source node), e(name or index of target node)
• {Function}, the list of parameters passed in is as follows:
  • <Array> params : array content and template varaibles are the same

    [
        {
            
            seriesIndex: 0,
            seriesName: 'Sales',
            name: 'Monday',
            dataIndex: 0,
            data: data,
            name: name,
            value: value,
            percent: special,       // pie
            indicator: special,     // radar, force, chord
            value2: special2,       // force, chord
            indicator2: special2    // force, chord
        },
        {..},
        ...
    ]
    

  • <String> ticket: asynchronous callback marker
  • <Function> callback: asynchronous callback, the callback needs two parameters, the first one is the ticket that we mentioned earlier, the second is the fill content html.
  • * When the function callbacks, 'this' pointer points to the current chart instance (myChart).

trigger type:

item trigger	axis trigger

legend

legend, at most one legend is allowed in one chart. Try this »

dataRange

dataRange, at most one dataRange control is allowed in one chart. Try this »

dataZoom

dataZoom. Synchronized with toolbox.feature.dataZoom. Applicable to Cartesian chart only. Try this »

roamController

Zoom and roam controller for the map. try this »

grid

A network of regularly spaced lines on a Cartesian coordinate system.

xAxis

The horizontal axis array in Cartesian coordinates. Each item in the array stands for a horizontal axis, and the array can be omitted if there is only one horizontal axis. In one chart, at most two horizontal axes are allowed. If there is only one x-axis, you can place it either at the bottom (by default) or at the top of the grid. If there are two x-axes, they shall be placed in opposition to each other. By default, the first x-axis is placed at the bottom of the grid, and the second at the top.

There are three types of coordinate axes: category axis, value axis and time axis (the differences are given in axis). For most chart types x-axis is category axis, but for bar chart x-axis is value axis, and for scatter chart both x-axis and y-axis are value axes. For specific parameters, see axis.

yAxis

The vertical axis array in Cartesian coordinates. Each item in the array stands for a vertical axis, and the array can be omitted if there is only one vertical axis. In one chart, at most two vertical axes are allowed. If there is only one y-axis, you can place it either on the left (by default) or on the right of the grid. If there are two y-axes, they shall be placed in opposition to each other. By default, the first y-axis is placed on the left of the grid, and the second on the right.

There are three types of coordinate axes: category axis, value axis and time axis (the differences are given in axis). For most chart types y-axis is value axis, but for bar chart y-axis is category axis. For specific parameters, see axis.

axis

There are three types of coordinate axes: category axis, value axis and time axis. Their differences are:

• category axis: specifies the category list. The only axis that the data is organized by.
• value axis: specifies the valid values. The only axis where the values are placed.
• time axis: use the same as value axis. The only difference is time axis treat the data as time (date) and auto formate the value into different time granularity along with different time span.

Here are the options for coordinate axes. Some options are applicable to category axis only, while others to value axis only. Please heed the type of application. Try this »

boundaryGap

Configuration	boundaryGap: true	boundaryGap: false
Effects

scale strategy

Configuration	scale: false	scale: true
Effects

description of axis properties

axis.axisLine

axis line. Defaults to show. Default styles are listed below.

axis.axisTick

axis tick. For value axis, defaults to hide. For category axis, defaults to show. Default styles are listed below.

axis.axisLabel

options for axis label

split name formatter:

• {string}, Template, its variables are:
  • {value}: content or value
• {Function}, pass in parameters and template varaibles:
  • eg：function (value) {return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][value]; }

axis.splitLine

split line. Defaults to show. Default styles are listed below.

axis.splitArea

split area, defaults to hide:

axis.data

the array of category axis text label, specifies label content. The array items are usually tex. '\n' represents a line feed, for example:

['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', ..., 'Dec']

When you need to customize individual labels, the array can use objects to accept textStyle to set custom labels, such as:

[
    'Jav', 'Feb', 'Mar',
     {
        value:'Apr',        //Text content, if the split name formatter is specified, this value will be passed in as a template variable value ​​or parameter.
        textStyle:{                 //see textStyle
            color : 'red'
            ...
        }
     },
    'May', '...'
]

polar

polar coordinates:

indicator : [
    {text : 'appearance'},
    {text : 'photograph', min : 0},
    {text : 'system', min : 0, max : 100},
    {text : 'performance', axisLabel: {...}},
    {text : 'screen'}
]

series (universal)

Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data. Some options are applicable to specific chart types only. Please note the type of application.

series (Cartesian)

Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data. Some options are applicable to specific chart types only. Please note the type of application.

series (pie)

Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data.

series (radar)

Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data.

series (map)

Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data.

series (force)

Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data.

series (chord)

Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data.

series (gauge)

Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data.

{
    show: true,
    lineStyle: {
        color: [
            [0.2, '#228b22'],
            [0.8, '#48b'],
            [1, '#ff4500']
        ], 
        width: 30
    }
}                           

{
    show: true, 
    splitNumber: 5, 
    length :8, 
    lineStyle: {
        color: '#eee',
        width: 1,
        type: 'solid'
    }
}                           

{
    show: true,
    formatter: null,
    textStyle: {
        color: 'auto'
    }
}                           

{
    show: true,
    length :30, 
    lineStyle: { 
        color: '#eee',
        width: 2,
        type: 'solid'
    }
}                           

{
    length : '80%',
    width : 8,
    color : 'auto'
}                           

{
    show : true,
    offsetCenter: [0, '-40%'],
    textStyle: {
        color: '#333',
        fontSize : 15
    }
}                           

{
    show : true,
    backgroundColor: 'rgba(0,0,0,0)',
    borderWidth: 0,
    borderColor: '#ccc',
    width: 100,
    height: 40,
    offsetCenter: [0, '40%'],
    formatter: null,
    textStyle: {
        color: 'auto',
        fontSize : 30
    }
}                           

series (funnel)

Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data.

series ( eventRiver )

Here is the data array generated by data-driven chart. Each item in the array stands for a series' options and data.

series.data

Data array in the series. In line and column, length of the array is equal to the length of category axis text label array axis.data, and there is one-to-one correspondence between them. The array item is usually value, such as:

[12, 34, 56, ..., 10, 23]

When the data corresponding to a category does not exist (ps: 'no data' is not equal to 0), you can use '-' to indicate 'no data'. In line, 'no data' is showed by a breakpoint; in column, 'no data' is showed by a missing column, such as:

[12, '-', 56, ..., 10, 23]

When you need to customize individual contents, array items can use objects, such as:

[
    12, 34,
    {
        value : 56,
        tooltip:{},     //custom tooltip，applicable to the item only, see tooltip
        itemStyle:{}    //custom itemStyle=，applicable to the item only, see itemStyle
    },
    ..., 10, 23
]

In scatter & bubble, value configuration is quite special. Both its x-axis and y-axis can be value axis, and you need to specify bubble size in the bubble chart. Hence the configuration for scatter:

[
    {
        value : [10, 25, 5]     //[xValue, yValue, rValue] (x-axis value, y-axis value, size(optional))
    },
    [12, 15, 1]
    ...
]

In candlestick, value configuration is quite special. Its value content is an array with the length of 4, which respectively represents [opening price, closing price, the minimum value, the maximum value]

[
    {
        value : [2190.1, 2148.35, 2126.22, 2190.1] // opening price, closing price, the minimum value, the maximum value
    },
    [2242.26, 2210.9, 2205.07, 2250.63],
    ...
]

In pie, you need to specify the name for each part of data. Selected mode can be set. Hence the configuration:

[
    {
        value : 12，
        name : 'apple'          //the name for each part of data
    },
    ...
]

In map, you need to specify the province for each part of data. Selected mode can be set. Hence the configuration:

[
    {
        name: '北京',
        value: 1234,
        selected: true
    },
    {
        name: '天津',
        value: 321
    },
    ...
]

series.markPoint

markPoint in the series

series.markPoint.data

markPoint data array. The most direct data items can directly specify markPoint position (x, y) and the relevant name and value. It's basically like this in pie, radar, force, and chord:

data : [
    {name: 'markPoint1', value: 100, x: 50, y: 20},
    {name: 'markPoint2', value: 200, x: 150, y: 120},
    ...
]

In Cartesian charts like line, bar, candlestick, and scatter, directly specifying the location is not the only choice you've got. If you want to locate markPoint by Cartesian system, you can make it via xAxis, yAxis. These two values ​​will, in accordance with the specific axis type and parameters passed in, make automatic convertions as follows:

data : [
    {name: 'markPoint1', value: 100, xAxis: 1, yAxis: 20},      // When xAxis is the category axis, value 1 will be understood as the index of the category axis. 
    {name: 'markPoint2', value: 100, xAxis: 'Wednesday', yAxis: 20}, // When xAxis is the category axis, String 'Wednesday' will be understood as matching the category axis text. 
    {name: 'markPoint3', value: 200, xAxis: 10, yAxis: 20},     // When xAxis/yAxis is the value axis, whatever passed in will be understood as a value and be conversed to location. 
    ...
]

And the most practical bit is, in line, bar and scatter, you can directly use the following off-the-shelf special points as markPoints:

data : [
    {type : 'max', name: 'custom name'},    // the maximum value
    {type : 'min', name: 'custom name'}     // the minimum value
]

markPoints are quite special and yet most commonly used in maps. In addition to direct location, if you want it to be based on geographic coordinates, and zoom with the map's scale roaming, you need to provide a geoCoord for markPoint, as follows.

data : [
    {name: '北京', value: 100},
    {name: '上海', value: 200},
    ...
],
geoCoord : {
    "北京":[116.46,39.92],           // Supports array [longitude, latitude]
    "上海": {x: 121.48, y: 31.22},   // Supports object {x: longitude, y: latitude}
    ...
}

series.markLine

markLine in the series

series.markLine.data

markLine data array. The most direct data items can directly specify the start and end position of markLine (x, y) and its relevant name and value. It's basically like this in pie, radar, force and chord:

data : [
    [
        {name: 'start of markLine1', value: 100, x: 50, y: 20}, 
        {name: 'end of markLine1', x: 150, y: 120}
    ],
    [
        {name: 'start of markLine2', value: 200, x: 30, y: 80}, 
        {name: 'end of markLine2', x: 270, y: 190}
    ],
    ...
]

In Cartesian charts like line, bar, candlestick and scatter, directly specifying the location is not the only choice you've got. If you want to locate markLine by Cartesian system, you can make it via xAxis, yAxis. These two values ​​will, in accordance with the specific axis type and parameters passed in, make automatic convertions as follows:

data : [
    [
        {name: 'start of markLine1', value: 100, xAxis: 1, yAxis: 20},      // When xAxis is the category axis, value 1 will be understood as the index of the category axis. By xAxis: -1 | MAXNUMBER, markLine can reach the edge of the grid.
        {name: 'end of markLine1', xAxis: 'Wednesday', yAxis: 20},          // When xAxis is the category axis, String 'Wednesday' will be understood as matching the category axis text. 
    ],
    [
        {name: 'start of markLine2', value: 200, xAxis: 10, yAxis: 20},     // When xAxis/yAxis is the value axis, whatever passed in will be understood as a value and be conversed to location. 
        {name: 'end of markLine2', xAxis: 270, yAxis: 190}
    ],
    ...
]

And the most practical bit is, in line, bar and scatter, you can directly use the following off-the-shelf special lines as markLines:

data : [
    {type : 'max', name: 'custom name'},    // horizontal or vertical line of the maximum value
    {type : 'min', name: 'custom name'},    // horizontal or vertical line of the minimum value
    {type : 'average', name: 'custom name'},// horizontal or vertical line of the average value
    
    // the line from minimum value to maximum value
    [
        {type : 'min', name: 'custom name'},
        {type : 'max', name: 'custom name'}
    ],
    
    // in scatter, there are two value axes. By default the special point is calculated through the y-axis value, you can specify x-axis special point via Index: 0. 
    {type : 'max', name: 'custom name', valueIndex:0} 
]

data : [
    [
        {name: '北京', value: 100},
        {name:'上海'}
    ],
    [
        {name: '北京', value: 100},
        {name:'广州'}
    ],
    ...
],
geoCoord : {
    "北京":[116.46,39.92],           // Supports array [longitude, latitude]
    "广州":[113.23,23.16],
    "上海": {x: 121.48, y: 31.22},   // Supports object {x: longitude, y: latitude}
    ...
}

itemStyle: {
    normal: {
        ...
    },
    emphasis: {
        ...
    }
}

itemStyle: {
    normal: {
        label: {
            show: false
        }
        labelLine: {
            show: false
        }
    } ,
    emphasis: {
        label: {
            show: true,
            position: 'outer'
        }
        labelLine: {
            show: true,
            lineStyle: {
                color: 'red'
            }
        }
    }
}

// step1: find the geoJson data file in the target region, like HK_geo.json.

// step2: name your map type in require('echarts/util/mapData/params'), like HK.

// step3: implement the getGeoJson interface method, return the geoJson data file in the target region via callback. 
require('echarts/util/mapData/params').params.HK = {
    getGeoJson: function (callback) {
        $.getJSON('geoJson/HK_geo.json',callback);
    }
}

// step3*: In most cases, data maps do not need any special projection algorithm. ECharts uses a simplified projection algorithm, thus some regions may need to be manually adjusted. Through specialArea, you can specify the latitude and longitude coordinates and interval size of some regions, such as: 
require('echarts/util/mapData/params').params.USA = {
    getGeoJson: function (callback) {
        $.getJSON('geoJson/USA_geo.json', callback);
    },
    specialArea : {
        Alaska : {              // Move Alaska to the bottom left of the American main continent
            left : -131,        // Starting point of placement: 13 degrees west longitude
            top : 31,           // Starting point of placement: 31 degrees north latitude 
            width : 15,         // Size, width and height of the interval are no more than 15 degrees
            height : 15
        },
        Hawaii : {
            left : -112,        // Hawaii 
            top : 29,
            width : 5,
            height : 5
        },
        'Puerto Rico' : {       // Puerto Rico
            left : -76,
            top : 26,
            width : 2,
            height : 2
        }
    }
}

// step4: Echarts already has this map type, you can use it in the option. 
option.series = [
        {
            type: 'map',
            mapType: 'HK', // Custom extended chart types
            ...
         }
 ]

// instantiate the chart------------------
// script plain import
var myChart = echarts.init(document.getElementById('main'));

// loading---------------------
myChart.showLoading({
    text: 'We're building the buildings as fast as we can...please wait! ',    //loading text
});

// ajax getting data...............

// ajax callback
myChart.hideLoading();

// use the chart-------------------
var option = {
    legend: {                                   // legend configuration
        padding: 5,                             // The inner padding of the legend, in px, defaults to 5. Can be set as array - [top, right, bottom, left].
        itemGap: 10,                            // The pixel gap between each item in the legend. It is horizontal in a legend with horizontal layout, and vertical in a legend with vertical layout. 
        data: ['ios', 'android']
    },
    tooltip: {                                  // tooltip configuration
        trigger: 'item',                        // trigger type. Defaults to data trigger. Can also be: 'axis'
    },
    xAxis: [                                    // The horizontal axis in Cartesian coordinates
        {
            type: 'category',                   // Axis type. xAxis is category axis by default. As for value axis, please refer to the 'yAxis' chapter.
            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        }
    ],
    yAxis: [                                    // The vertical axis in Cartesian coordinates
        {
            type: 'value',                      // Axis type. yAxis is value axis by default. As for category axis, please refer to the 'xAxis' chapter.
            boundaryGap: [0.1, 0.1],            // Blank border on each side of the coordinate axis. Value in the array represents percentage. 
            splitNumber: 4                      // Applicable to value axis. The number of segments. Defaults to 5. 
        }
    ],
    series: [
        {
            name: 'ios',                        // series name
            type: 'line',                       // chart type, line, scatter, bar, pie, radar
            data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
        },
        {
            name: 'android',                    // series name
            type: 'line',                       // chart type, line, scatter, bar, pie, radar
            data: [45, 123, 145, 526, 233, 343, 44, 829, 33, 123, 45, 13]
        }
    ]
};
myChart.setOption(option);

...

// Add some data------------------
option.legend.data.push('win');
option.series.push({
        name: 'win',                            // series name
        type: 'line',                           // chart type, line, scatter, bar, pie, radar
        data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
});
myChart.setOption(option);

...

// Clear the chart-------------------
myChart.clear();

// Dispose the chart-------------------
myChart.dispose();