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