HTML5 echarts中国散点地图联动实例下载
2017-03-30 13:42:08  By: shinyuu

• shinyuu
• HTML5开发
• 0
• 4574
• 0

分享一个html5 echarts地图分布动画的特效、Demo是一款带有炫光效果的html5 echarts图表插件、一般用于全国的节点分部等功能、如果大家有使用过百度云加速的话、不难看出、这一款插件是模仿百度云加速的地图节点分布的、效果非常不错

使用方法分为4个步骤

1、为ECharts准备一个具备大小（宽高）的Dom-->

<div id="mainMap" style="height:400px;width: 700px;padding:10px;background:#1B1B1B">
</div>

2、引入echarts.js

<script type="text/javascript" src="js/jquery-1.8.0.js"></script> 
<script src="js/echarts.js" charset="UTF-8"></script>
<script type="text/javascript">
$(´#document´).ready(function(){
    getEcharts();
});
</script>

3、为模块加载器配置echarts的路径、从当前页面链接到echarts.js、定义所需图表路径

require.config({
    paths: {
        echarts: ´./js´
    }
});

4、动态加载echarts然后在回调函数中开始使用、注意保持按需加载结构定义图表路径

require(
    [
        ´echarts´,
        ´echarts/chart/map´
    ],
    function (ec) {
        // --- 地图 ---
        var myChart2 = ec.init(document.getElementById(´mainMap´));
        myChart2.setOption({
		//TODO 以下是包括节点在内的代码
		//TODO 可直接下载源代码查看
    });
});

以上是Demo的部分代码片段以及使用方法、希望对大家有用、下面给大家贴上Demo的源代码下载

echarts 地图实例Demo源代码下载链接: echarts自定义地图 密码: zc8y

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛