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;" id="map_charts"></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