百度 Echarts 地图表 js 引用路径

使用地图表格，除了需echarts，还需zrender，自行下载JS文件：
 
目标，做成这样的效果：http://echarts.baidu.com/doc/example/map3.html
 
2015-4-3更新： 熟悉的配置页面 http://tushuo.baidu.com/
 

ECharts下载地址： http://echarts.baidu.com/

ZRender下载地址：http://ecomfe.github.io/zrender/index.html

下载完成后，
echarts：复制dist，与source文件夹；
dist：压缩后的JS，在正式环境用；
source：没压缩，测试调试用；

 
zrender: 复制src里面所有文件出来;
最后出来，三个文件夹：dist,source,Zrender（内容就是zrender-2.0.7的src所有文件）
例子Map.aspx，这里只关注路径文件，具体的图形配置，参考：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Map例子</title>
    <script src="js/ECharts/dist/echarts.js"></script>
    <script>
        require.config({
            paths: {
                //echarts内容的文件夹路径
                echarts: 'js/ECharts/dist',
                //zrender内容的文件夹路径
                zrender: "js/ECharts/Zrender"
            }
        });
        //入口文件
        require(
            [
                'echarts',
                'echarts/chart/map'
            ],
            function (ec) {
                //额外所需的文件，在入口文件，加载完之后，回调函数中请求；
                
                //各种图，所需的配置；可从example中copy过来
                //例如： 
                var ecConfig = require('echarts/config');
                var zrEvent = require('zrender/tool/event');
                //id与div对应；
                var myChart = ec.init(document.getElementById('main'));
                var option = {};
                // 为echarts对象加载数据 
                myChart.setOption(option);
            }
            );
    </script>
</head>
<body>
    <div id="main" style="height: 500px"></div>
</body>

 

例子下载：点击

 

posted on 2015-03-18 14:46  向振文  阅读(2209)  评论(0)  编辑  收藏  举报