ECharts · Start

1、新建一个echarts.html文件，为ECharts准备一个具备大小（宽高）的Dom。

<span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;head&gt;</span><span class="pln">
    </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"utf-8"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;title&gt;</span><span class="pln">ECharts</span><span class="tag">&lt;/title&gt;</span><span class="pln">
</span><span class="tag">&lt;/head&gt;</span><span class="pln">

</span><span class="tag">&lt;body&gt;</span><span class="pln">
    </span><span class="com">&lt;!-- 为ECharts准备一个具备大小（宽高）的Dom --&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"main"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">height</span><span class="pun">:</span><span class="lit">400px</span><span class="atv">"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/body&gt;</span>

2、新建<script>标签引入模块化单文件echarts.js

<span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;head&gt;</span><span class="pln">
    </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"utf-8"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;title&gt;</span><span class="pln">ECharts</span><span class="tag">&lt;/title&gt;</span><span class="pln">
</span><span class="tag">&lt;/head&gt;</span><span class="pln">
</span><span class="tag">&lt;body&gt;</span><span class="pln">
    </span><span class="com">&lt;!-- 为ECharts准备一个具备大小（宽高）的Dom --&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"main"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">height</span><span class="pun">:</span><span class="lit">400px</span><span class="atv">"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
    </span><span class="com">&lt;!-- ECharts单文件引入 --&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"http://echarts.baidu.com/build/dist/echarts.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
</span><span class="tag">&lt;/body&gt;</span>

3、新建<script>标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js），引入图表文件见引入ECharts2

<span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;head&gt;</span><span class="pln">
    </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"utf-8"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;title&gt;</span><span class="pln">ECharts</span><span class="tag">&lt;/title&gt;</span><span class="pln">
</span><span class="tag">&lt;/head&gt;</span><span class="pln">
</span><span class="tag">&lt;body&gt;</span><span class="pln">
    </span><span class="com">&lt;!-- 为ECharts准备一个具备大小（宽高）的Dom --&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"main"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">height</span><span class="pun">:</span><span class="lit">400px</span><span class="atv">"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
    </span><span class="com">&lt;!-- ECharts单文件引入 --&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"http://echarts.baidu.com/build/dist/echarts.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="com">// 路径配置</span><span class="pln">
        require</span><span class="pun">.</span><span class="pln">config</span><span class="pun">({</span><span class="pln">
            paths</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                echarts</span><span class="pun">:</span><span class="pln"> </span><span class="str">'http://echarts.baidu.com/build/dist'</span><span class="pln">
            </span><span class="pun">}</span><span class="pln">
        </span><span class="pun">});</span><span class="pln">
    </span><span class="tag">&lt;/script&gt;</span><span class="pln">
</span><span class="tag">&lt;/body&gt;</span>

4、<script>标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成，option见API & Doc

<span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;head&gt;</span><span class="pln">
    </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"utf-8"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;title&gt;</span><span class="pln">ECharts</span><span class="tag">&lt;/title&gt;</span><span class="pln">
</span><span class="tag">&lt;/head&gt;</span><span class="pln">
</span><span class="tag">&lt;body&gt;</span><span class="pln">
    </span><span class="com">&lt;!-- 为ECharts准备一个具备大小（宽高）的Dom --&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"main"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">height</span><span class="pun">:</span><span class="lit">400px</span><span class="atv">"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
    </span><span class="com">&lt;!-- ECharts单文件引入 --&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"http://echarts.baidu.com/build/dist/echarts.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="com">// 路径配置</span><span class="pln">
        require</span><span class="pun">.</span><span class="pln">config</span><span class="pun">({</span><span class="pln">
            paths</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                echarts</span><span class="pun">:</span><span class="pln"> </span><span class="str">'http://echarts.baidu.com/build/dist'</span><span class="pln">
            </span><span class="pun">}</span><span class="pln">
        </span><span class="pun">});</span><span class="pln">
        
        </span><span class="com">// 使用</span><span class="pln">
        require</span><span class="pun">(</span><span class="pln">
            </span><span class="pun">[</span><span class="pln">
                </span><span class="str">'echarts'</span><span class="pun">,</span><span class="pln">
                </span><span class="str">'echarts/chart/bar'</span><span class="pln"> </span><span class="com">// 使用柱状图就加载bar模块，按需加载</span><span class="pln">
            </span><span class="pun">],</span><span class="pln">
            </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">ec</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                </span><span class="com">// 基于准备好的dom，初始化echarts图表</span><span class="pln">
                </span><span class="kwd">var</span><span class="pln"> myChart </span><span class="pun">=</span><span class="pln"> ec</span><span class="pun">.</span><span class="pln">init</span><span class="pun">(</span><span class="pln">document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'main'</span><span class="pun">));</span><span class="pln"> 
                
                </span><span class="kwd">var</span><span class="pln"> option </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                    tooltip</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                        show</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln">
                    </span><span class="pun">},</span><span class="pln">
                    legend</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                        data</span><span class="pun">:[</span><span class="str">'销量'</span><span class="pun">]</span><span class="pln">
                    </span><span class="pun">},</span><span class="pln">
                    xAxis </span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
                        </span><span class="pun">{</span><span class="pln">
                            type </span><span class="pun">:</span><span class="pln"> </span><span class="str">'category'</span><span class="pun">,</span><span class="pln">
                            data </span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">"衬衫"</span><span class="pun">,</span><span class="str">"羊毛衫"</span><span class="pun">,</span><span class="str">"雪纺衫"</span><span class="pun">,</span><span class="str">"裤子"</span><span class="pun">,</span><span class="str">"高跟鞋"</span><span class="pun">,</span><span class="str">"袜子"</span><span class="pun">]</span><span class="pln">
                        </span><span class="pun">}</span><span class="pln">
                    </span><span class="pun">],</span><span class="pln">
                    yAxis </span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
                        </span><span class="pun">{</span><span class="pln">
                            type </span><span class="pun">:</span><span class="pln"> </span><span class="str">'value'</span><span class="pln">
                        </span><span class="pun">}</span><span class="pln">
                    </span><span class="pun">],</span><span class="pln">
                    series </span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
                        </span><span class="pun">{</span><span class="pln">
                            </span><span class="str">"name"</span><span class="pun">:</span><span class="str">"销量"</span><span class="pun">,</span><span class="pln">
                            </span><span class="str">"type"</span><span class="pun">:</span><span class="str">"bar"</span><span class="pun">,</span><span class="pln">
                            </span><span class="str">"data"</span><span class="pun">:[</span><span class="lit">5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">20</span><span class="pun">,</span><span class="pln"> </span><span class="lit">40</span><span class="pun">,</span><span class="pln"> </span><span class="lit">10</span><span class="pun">,</span><span class="pln"> </span><span class="lit">10</span><span class="pun">,</span><span class="pln"> </span><span class="lit">20</span><span class="pun">]</span><span class="pln">
                        </span><span class="pun">}</span><span class="pln">
                    </span><span class="pun">]</span><span class="pln">
                </span><span class="pun">};</span><span class="pln">
        
                </span><span class="com">// 为echarts对象加载数据 </span><span class="pln">
                myChart</span><span class="pun">.</span><span class="pln">setOption</span><span class="pun">(</span><span class="pln">option</span><span class="pun">);</span><span class="pln"> 
            </span><span class="pun">}</span><span class="pln">
        </span><span class="pun">);</span><span class="pln">
    </span><span class="tag">&lt;/script&gt;</span><span class="pln">
</span><span class="tag">&lt;/body&gt;</span>

5、浏览器中打开echarts.html，就可看到以下效果

1、新建一个echarts.html文件。为ECharts准备一个具备大小（宽高）的Dom。

<span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;head&gt;</span><span class="pln">
    </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"utf-8"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;title&gt;</span><span class="pln">ECharts</span><span class="tag">&lt;/title&gt;</span><span class="pln">
</span><span class="tag">&lt;/head&gt;</span><span class="pln">
</span><span class="tag">&lt;body&gt;</span><span class="pln">
    </span><span class="com">&lt;!-- 为ECharts准备一个具备大小（宽高）的Dom --&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"main"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">height</span><span class="pun">:</span><span class="lit">400px</span><span class="atv">"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/body&gt;</span>

2、新建<script>标签引入echarts-all.js，引入图表文件见引入ECharts3

<span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;head&gt;</span><span class="pln">
    </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"utf-8"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;title&gt;</span><span class="pln">ECharts</span><span class="tag">&lt;/title&gt;</span><span class="pln">
</span><span class="tag">&lt;/head&gt;</span><span class="pln">
</span><span class="tag">&lt;body&gt;</span><span class="pln">
    </span><span class="com">&lt;!-- 为ECharts准备一个具备大小（宽高）的Dom --&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"main"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">height</span><span class="pun">:</span><span class="lit">400px</span><span class="atv">"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
    </span><span class="com">&lt;!-- ECharts单文件引入 --&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"http://echarts.baidu.com/build/dist/echarts-all.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
</span><span class="tag">&lt;/body&gt;</span>

3、新建<script>标签，使用全局变量echarts初始化图表并驱动图表的生成，option见API & Doc

<span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;head&gt;</span><span class="pln">
    </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"utf-8"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;title&gt;</span><span class="pln">ECharts</span><span class="tag">&lt;/title&gt;</span><span class="pln">
</span><span class="tag">&lt;/head&gt;</span><span class="pln">
</span><span class="tag">&lt;body&gt;</span><span class="pln">
    </span><span class="com">&lt;!-- 为ECharts准备一个具备大小（宽高）的Dom --&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"main"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">height</span><span class="pun">:</span><span class="lit">400px</span><span class="atv">"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
    </span><span class="com">&lt;!-- ECharts单文件引入 --&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"http://echarts.baidu.com/build/dist/echarts-all.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="com">// 基于准备好的dom，初始化echarts图表</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> myChart </span><span class="pun">=</span><span class="pln"> echarts</span><span class="pun">.</span><span class="pln">init</span><span class="pun">(</span><span class="pln">document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'main'</span><span class="pun">));</span><span class="pln"> 
        
        </span><span class="kwd">var</span><span class="pln"> option </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            tooltip</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                show</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln">
            </span><span class="pun">},</span><span class="pln">
            legend</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                data</span><span class="pun">:[</span><span class="str">'销量'</span><span class="pun">]</span><span class="pln">
            </span><span class="pun">},</span><span class="pln">
            xAxis </span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
                </span><span class="pun">{</span><span class="pln">
                    type </span><span class="pun">:</span><span class="pln"> </span><span class="str">'category'</span><span class="pun">,</span><span class="pln">
                    data </span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">"衬衫"</span><span class="pun">,</span><span class="str">"羊毛衫"</span><span class="pun">,</span><span class="str">"雪纺衫"</span><span class="pun">,</span><span class="str">"裤子"</span><span class="pun">,</span><span class="str">"高跟鞋"</span><span class="pun">,</span><span class="str">"袜子"</span><span class="pun">]</span><span class="pln">
                </span><span class="pun">}</span><span class="pln">
            </span><span class="pun">],</span><span class="pln">
            yAxis </span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
                </span><span class="pun">{</span><span class="pln">
                    type </span><span class="pun">:</span><span class="pln"> </span><span class="str">'value'</span><span class="pln">
                </span><span class="pun">}</span><span class="pln">
            </span><span class="pun">],</span><span class="pln">
            series </span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
                </span><span class="pun">{</span><span class="pln">
                    </span><span class="str">"name"</span><span class="pun">:</span><span class="str">"销量"</span><span class="pun">,</span><span class="pln">
                    </span><span class="str">"type"</span><span class="pun">:</span><span class="str">"bar"</span><span class="pun">,</span><span class="pln">
                    </span><span class="str">"data"</span><span class="pun">:[</span><span class="lit">5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">20</span><span class="pun">,</span><span class="pln"> </span><span class="lit">40</span><span class="pun">,</span><span class="pln"> </span><span class="lit">10</span><span class="pun">,</span><span class="pln"> </span><span class="lit">10</span><span class="pun">,</span><span class="pln"> </span><span class="lit">20</span><span class="pun">]</span><span class="pln">
                </span><span class="pun">}</span><span class="pln">
            </span><span class="pun">]</span><span class="pln">
        </span><span class="pun">};</span><span class="pln">

        </span><span class="com">// 为echarts对象加载数据 </span><span class="pln">
        myChart</span><span class="pun">.</span><span class="pln">setOption</span><span class="pun">(</span><span class="pln">option</span><span class="pun">);</span><span class="pln"> 
    </span><span class="tag">&lt;/script&gt;</span><span class="pln">
</span><span class="tag">&lt;/body&gt;</span>

4、浏览器中打开echarts.html，就可看到以下效果

最好的参考资源：实例

ECharts可以说是数据驱动的图表，大部分时候你关心的是那个option该如何实现，官网的文档提供详细的说明，另外我们还有近100个实例，这些例子都为你展现了最核心的option代码，可以通过在线修改查看效果，ECharts是玩出来的，希望你玩得开心。

5分钟上手写ECharts的第一个图表

最好的参考资源：实例