The simple entry Echarts

5 minutes to get started ECharts

Get ECharts

You can get ECharts in several ways.

From the official website to download interface select the version you need to download, according to the needs of the developer features and volume, we offer different packages to download, if you are not asked in the volume, you can download the full version . Development environment is recommended to download the source code version , it contains common error messages and warnings.
In ECharts of GitHub download the latest releaseversion, extract from the folder in the distdirectory where you can find the latest version of echarts library.
By acquiring echarts npm, npm install echarts --save, see " Use echarts in the webpack "
cdn introduction, you can cdnjs , npmcdn or domestic bootcdn find the latest version ECharts on.

Introduced ECharts

ECharts 3 started no longer forcibly introduced using AMD-demand manner, the code is no longer built AMD loader. Therefore, the introduction of a lot simpler way, just like ordinary JavaScript libraries, like the introduction of a script tag.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

Draw a simple chart

Before drawing ECharts we need to prepare a container with an aspect of the DOM.

< Body > 
    <-! To prepare ECharts includes a size (width and height) of the DOM -> 
    < div ID = "main" style = "width: 600px; height: 400px;" > </ div > 
</ body >

Then by echarts.init initialization method and a echarts example by setOption generate a simple histogram method, the following is the complete code.

<! DOCTYPE HTML > 
< HTML > 
< head > 
    < Meta charset = "UTF-. 8" > 
    < title > ECharts </ title > 
    ! <- introducing local echarts.js, can also src = "https: // echarts .baidu.com / dist / echarts.min.js "load of network echarts JS -> 
    < Script the src =" echarts.min.js " > </ Script > 
</ head > 
< body > 
    <-! is ECharts preparation comprising a size (width and height) of Dom -> 
    <div id="main" style= "width: 600px; height: 400px;" > </ div > 
    < Script type = "text / JavaScript" > 
        // based ready dom, instance initialization echarts 
        var myChart = echarts.init (document.getElementById ( ' main ' ));

        // the specified data and the chart CI 
        var Option = {
            title: {
                text: ' ECharts start example '
            },
            tooltip: {},
            legend: {
                Data: [ ' sales ' ]
            },
            xAxis: {
                the Data: [ " shirt " , " sweater " , " chiffon shirt " , " pants " , " high heels " , " socks " ]
            },
            yAxis: {},
            series: [{
                name: ' sales ' ,
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // use just the specified configuration items and data charts. 
        myChart.setOption (Option);
     </ Script > 
</ body > 
</ HTML >

So your first chart was born!

You can also go directly to ECharts Gallery View edit the sample