ECharts 輪流高亮中國地圖各個省份

ivan_qhz 發布于2019-08-21 16:47 / 1921人閱讀

摘要：最早我是想通過方法去改變選中的省份，但是沒有起作用，如果你知道這個方法怎么實現，麻煩你可以告訴我。指定圖表的配置項和數據中國默認高亮安徽省安徽使用剛指定的配置項和數據顯示圖表。

最早我是想通過dispatchAction方法去改變選中的省份，但是沒有起作用，如果你知道這個方法怎么實現，麻煩你可以告訴我。
我實現的方法是另外一種。

dispatchAction({
    type: "geoSelect",
    // 可選，系列 index，可以是一個數組指定多個系列
    seriesIndex?: number|Array,
    // 可選，系列名稱，可以是一個數組指定多個系列
    seriesName?: string|Array,
    // 數據的 index，如果不指定也可以通過 name 屬性根據名稱指定數據
    dataIndex?: number,
    // 可選，數據名稱，在有 dataIndex 的時候忽略
    name?: string
})

后來我改變了一個方法。這個方法的核心思路是定時獲取圖標的配置，然后更新配置，最后在設置配置。

var myChart = echarts.init(document.getElementById("china-map"));

var COLORS = ["#070093", "#1c3fbf", "#1482e5", "#70b4eb", "#b4e0f3", "#ffffff"];

// 指定圖表的配置項和數據
var option = {
    tooltip: {
        trigger: "item",
        formatter: "{b}"
    },
    series: [
        {
            name: "中國",
            type: "map",
            mapType: "china",
            selectedMode : "single",
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                // 默認高亮安徽省
                {name:"安徽", selected:true}
            ],
            itemStyle: {
                normal: {
                    areaColor: "rgba(255,255,255,0.5)",
                    color: "#000000",
                    shadowBlur: 200,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                },
                emphasis:{
                    areaColor: "#3be2fb",
                    color: "#000000",
                    shadowBlur: 200,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                }
            }
        }
    ]
};

// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);

myChart.on("click", function(params) {
    console.log(params);
});

setInterval(function(){
    var op = myChart.getOption();
    var data = op.series[0].data;

    var length = data.length;

    data.some(function(item, index){
        if(item.selected){
            item.selected = false;
            var next = (index + 1)%length;
            data[next].selected = true;
            return true;
        }
    });

    myChart.setOption(op);

}, 3000);

后續補充

我從這里發現：https://github.com/ecomfe/ech...，選中地圖的寫法是這樣的，而試了一下果然可以。主要是type要是mapSelect,而不是geoSelect

myChart.dispatchAction({
    type: "mapSelect",
    // 可選，系列 index，可以是一個數組指定多個系列
    // seriesIndex: 0,
    // 可選，系列名稱，可以是一個數組指定多個系列
    // seriesName: string|Array,
    // 數據的 index，如果不指定也可以通過 name 屬性根據名稱指定數據
    // dataIndex: number,
    // 可選，數據名稱，在有 dataIndex 的時候忽略
    name: "河北"
});

云服務器 GPU云服務器輪流播放拖動省份全國省份城市省份管理java

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88730.html

VUE 記一次高德地圖和Echarts（中國地圖）

摘要：效果圖準備工作高德地圖申請安裝中國地圖高德地圖官方點我進入創建動態創建標簽后的是需要的插件中國地圖安裝開始使用創建組件寫入需要的分布指數高低寫入高德地圖需要的效果圖 showImg(https://user-gold-cdn.xitu.io/2019/5/24/16ae7a7f2f9cac45); 準備工作高德地圖申請key 安裝Echarts 中國地圖高德地圖官方API...

KoreyLee 2019-05-27 17:42 評論0 收藏0
前端模塊化開發demo之攻擊地圖

摘要：最終自定義事件封裝在上面的鏈接中看到，不僅應用層頁面的按鈕可以切換地圖維度，直接點擊地圖里的中國區域也能切換地圖，同時又能通知到應用層頁面的按鈕改變狀態。前言很早以前寫過一篇用RequireJS包裝AjaxChart，當時用Highcharts做圖表，在其上封裝了一層ajax，最后只是簡單套用了一下requireJS。由于當時自己才接觸模塊化，理解層面還太淺，后來經過其他項目的磨練...

xiaowugui666 2019-08-19 17:10 評論0 收藏0
兩個echarts地圖聯動高亮區域

摘要：項目要求左右兩張地圖能夠在鼠標懸浮的時候高亮部分聯動，曾嘗試了不好使，所以自己寫了這段代碼。遇見的坑使用引發，會發現只能顯示很短的時間，所以我鼠標移入地圖時，給另一個地圖設置和。而獲取的時候會成為數組，也許是為了滿足多個的需求。項目要求左右兩張地圖能夠在鼠標懸浮的時候高亮部分聯動，曾嘗試了connect不好使，所以自己寫了這段代碼。代碼思路為：鼠標移入地圖時，另一側的地圖根據鼠標...

mcterry 2019-08-21 18:21 評論0 收藏0
echarts實現省與中國地圖之間的切換

摘要：實現省與中國地圖之間的切換數據可視化這東西到處都需要使用或早或晚這東西都要接觸到自然地圖和可視化結合在一起也是早晚的需求雖然地圖之間的切換只是一個很小的功能但說不定什么時候就要用到現在看一看里面的坑也是好的效果差不多就是這樣點擊省切換到省 echarts實現省與中國地圖之間的切換數據可視化這東西到處都需要使用,或早或晚echats這東西都要接觸到,自然地圖和可視化結合在一起也是早晚的...

malakashi 2019-08-23 16:17 評論0 收藏0