用echarts.js製做中國地圖,點擊對應的省市連接到指定頁面

時間 2019-12-01

標籤 echarts.js echarts 製做地圖點擊對應省市連接指定頁面欄目 JavaScript 简体版

原文原文鏈接

這裏使用的是ECharts 2,由於用EChart 3製做的地圖上的省市文字標識會有重疊,推測是引入的地圖文件china.js,繪製文字的座標方面的問題,因此,這裏仍是使用老版本。html

ECharts 2須要require加載模塊。html中只須要用script引入echarts.js便可。echarts

具體代碼以下：dom

<!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>