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

转载于:https://www.cnblogs.com/morang/p/7359614.html