ECharts的简单使用

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。

一、 echarts下载

下载页：http://echarts.baidu.com/download.html

二、使用三步走

1. 在页面中指定一个div并指定宽高：<div style="width:100%;height:500px;" ></div>
2. 页面中引用js<script type="text/javascript" src="echarts.min.js"></script>

3. 页面加载完毕后调用代码初始化 option参数配置见文档：http://echarts.baidu.com/option.html

    var myChart = echarts.init(document.getElementById('map_charts'));//一个div只能有一个实例 var option={}//..图表的配置 myChart.setOption(option);

关于地图图表

需要引用中国区域的js或者使用json初始化地图
下载中国/世界地图的js或者json 文档：http://echarts.baidu.com/download-map.html 文档底部有js和json的使用示例

JavaScript 引入示例

<script src="echarts.js"></script><script src="map/js/china.js"></script><script>var chart = echarts.init(document.getElementById('main'));chart.setOption({    series: [{        type: 'map',        map: 'china'    }]});</script>

JSON 引入示例

$.get('map/json/china.json', function (chinaJson) {    echarts.registerMap('china', chinaJson);    var chart = echarts.init(document.getElementById('main'));    chart.setOption({        series: [{            type: 'map',            map: 'china'        }]    });});

效果预览

demo地址：http://runjs.cn/detail/gkxnlkgy