用echarts.js製作中國地圖,點選對應的省市連結到指定頁面

阿新 • • 發佈：2019-01-06

這裡使用的是ECharts 2,因為用EChart 3製作的地圖上的省市文字標識會有重疊,推測是引入的地圖檔案china.js,繪製文字的座標方面的問題,所以,這裡還是使用老版本。

ECharts 2需要require載入模組。html中只需要用script引入echarts.js即可。

具體程式碼如下：

按 Ctrl+C 複製程式碼

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

按 Ctrl+C 複製程式碼

檔案結構如下:

效果如下：

點選四川或重慶,就會跳轉到指定連結。

區塊背景的顏色控制：itemStyle-->normal-->color。

區塊裡面的字型顏色控制：itemStyle-->normal-->label-->textStyle-->color

用echarts.js製作中國地圖,點選對應的省市連結到指定頁面

用echarts.js製作中國地圖,點選對應的省市連結到指定頁面

CSS+JS製作導航欄點選選中效果

使用echarts簡單製作中國地圖

app退出後，點選推送進入指定頁面

js拼接的程式碼點選事件無響應，只需用這個事件監聽就通解決

echarts 地圖點選事件問題

echarts的地圖點選事件

Echarts實現地圖點選與折線圖聯動

活用clone和trigger函式，點選按鈕原有事件不觸發，之後再觸發原有事件

【python】folium 庫繪製地圖點選框

Python selenium巧用Javascript指令碼注入解決按鈕點選問題

js或jquery實現點選某個按鈕或元素顯示div,點選頁面其他任何地方隱藏div

js模擬a標籤點選在新視窗開啟

jQuery fullpage.js 全屏滾動外掛取消滑鼠滾動事件，點選選單欄定位顯示頁面。

echarts中的中國地圖

js 操作當前滑鼠點選的事件解決 div ul 下拉框事件

element中通過js觸發按鈕的點選事件

js或者jQuery模擬點選提交按鈕button，觸發提交操作

個人js學習細節- 實現點選按鈕複製文字框中文字到剪下板中的方法

基於js原生封裝的點選顯示完整文字

用echarts.js製作中國地圖,點選對應的省市連結到指定頁面

相關推薦