百度 Echarts 地图表 js 引用路径

使用地图表格,除了需echarts,还需zrender,自行下载JS文件:
 
目标,做成这样的效果http://echarts.baidu.com/doc/example/map3.html
 

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>

 

例子下载:点击

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。