用echarts.js制作中国地图,点击对应的省市链接到指定页面

这里使用的是ECharts 2,因为用EChart 3制作的地图上的省市文字标识会有重叠,推测是引入的地图文件china.js,绘制文字的坐标方面的问题,所以,这里还是使用老版本。

ECharts 2需要require加载模块。html中只需要用script引入echarts.js即可。

具体代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts.js插件实现中国地图省份选择效果</title>
    <style>
        *{margin:0;padding:0;}
    </style>
</head>
<body>
    <div id="main" style="height:500px"></div>
    <script src="dist/echarts.js"></script>
    <script>
        // 路径配置
        require.config({
            paths: {
                echarts: 'dist'
            }
        });
        // 使用
        require(['echarts','echarts/chart/map'],function (ch) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ch.init(document.getElementById('main'));
            option = {
                tooltip : {
                    trigger: 'item',
                    formatter: '{b}'
                },
                series : [{
                    name: '中国',
                    type: 'map',
                    mapType: 'china',
                    selectedMode : 'single',//multiple多选
                    itemStyle:{
                        normal:{
                            label:{
                                show:true,
                                textStyle: {
                                    color: "#231816"
                                }
                            },
                            areaStyle:{color:'#B1D0EC'},
                            color:'#B1D0EC',
                            borderColor:'#dadfde'//区块的边框颜色
                        },
                        emphasis:{//鼠标hover样式
                            label:{
                                show:true,
                                textStyle:{
                                    color:'#fa4f04'
                                }
                            }
                        }
                    },
                    data:[
                        {name:'四川',selected:true}
                    ]
                }]
            };
            var ecConfig = require('echarts/config');
            myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
                var selected = param.selected;
                var urlArr = ['http://www.baidu.com','http://http://www.cnblogs.com/sapho'];
                for (var p in selected) {
                    if (selected[p]) {
                        switch(p){
                            case '河南':
                                location.href = urlArr[0];
                                break;
                            case '重庆':
                                location.href = urlArr[1];
                                break;
                            default:
                                break;
                        }

                    }
                }
            });
            // 为echarts对象加载数据
            myChart.setOption(option);
        });
    </script>
</body>
</html>

文件结构如下:

效果如下：

点击四川或重庆,就会跳转到指定链接。

区块背景的颜色控制：itemStyle-->normal-->color。

区块里面的字体颜色控制：itemStyle-->normal-->label-->textStyle-->color。

posted @ 2016-08-01 17:12  木西梧  阅读(36195)  评论(13)  编辑  收藏  举报