如何使用Echarts 搭建环境及使用

环境搭建

需要引入echarts.js到自己的项目中，可以从官网下载http://echarts.baidu.com/download.html。根据自己的需要可以常用、精简、安装或者源码包，甚至可以自定义下载。 

可根据自身需要，引入jquery、bootstorp等插件

1）引入echarts.js。

<script type="text/javascript" src="./js/echarts.js"></script>
1

2）创建一个DOM容器。熟悉html的朋友应该很清楚，一个html就是一个DOM树，各个标签节点都是dom节点。DOM容器就是里面可以存放其他节点标签，比如div。

<div id="main" style="width: 500px;height: 400px;"></div>
1

3）echarts.init(dom容器)。dom容器必须是html的节点，如果是使用jQuery获取的则必须指定集合中的一个元素节点，比如(“#main”)则表示jQuery对象。$(“#main”)[0]则表示一个id为main的节点。

var myChart = echarts.init(document.getElementById("main"));
1

4）设置参数。 
方法一：

var option = {                title:{                    text:"第一个图标演示示例"                },                tooltip:{                    text:"this is tool tip"                },                legend:{                    data:['销量']                },                xAxis:{                    data:["寸衫","羊毛衫","裤子","袜子","皮鞋","帽子"]                },                yAxis:{},                series:[{                            name:["销量"],                            type:"bar",                            data:[5,20,36,6,43,67]                        }]            };            myChart.setOption(option);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

方法二：

myChart.setOption({                title:{                    text:"第一个图标演示示例"                },                tooltip:{                    text:"this is tool tip"                },                legend:{                    data:['销量']                },                xAxis:{                    data:["寸衫","羊毛衫","裤子","袜子","皮鞋","帽子"]                },                yAxis:{},                series:[{                            name:["销量"],                            type:"bar",                            data:[5,20,36,6,43,67]                        }]            });