echart2使用入门

最近使用的echarts做图表，使用起来感觉比较方便，官方的文档也很详细。
我使用的是echarts2，因为项目中需要一张效果好一些的数据交互的图表，我觉得以下两张图表可以满足我的需求：
地图标线
搭配时间轴地图扩展
感觉效果不错。

话不多说，开始吧。

首先，要下载echarts2使用所需要的模块包
echarts2
下载解压后如下：

其实这么多文件和文件夹大部分都是例子和文档，你真正需要的只是build文件夹。

使用的时候，首先需要引入文件

 <script src="build/dist/echarts.js"></script>

这个文件相当一个总的入口，模块化加载的方法都基于该文件。

接下来定义一个div（节点），用于初始化图表

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

至少要定义一个高度，不然显示不出来

然后初始化图表

 require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 

                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['销量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"销量",
                            "type":"bar",
                            "data":[5, 20, 40, 10, 10, 20]
                        }
                    ]
                };

                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );

具体的属性、参数参照echarts官网。
这里ec.init(document.getElementById(‘main’)); 获取节点的方式不知道为什么使用jquery不行，只能这么写。
要动态加载数据的话，需要注意xaxis和yaxis里的data要传一个数组。

以上，一个最简单的柱状图就加载完了，使用的是模块化加载的方式，非模块化以及echarts2和echarts3的一些区别参考以下链接：
echarts2和echarts3的区别

顺便提一句，echarts地图扩展图表的底图是一张svg，自己画的话有点麻烦，最终没有完全达到心里的预期。

完整代码点击下载

密码：z9v1