如何使用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]
                        }]
            });