資訊專欄INFORMATION COLUMN
摘要：最早我是想通過方法去改變選中的省份，但是沒有起作用，如果你知道這個(gè)方法怎么實(shí)現(xiàn)，麻煩你可以告訴我。指定圖表的配置項(xiàng)和數(shù)據(jù)中國默認(rèn)高亮安徽省安徽使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
最早我是想通過dispatchAction方法去改變選中的省份，但是沒有起作用，如果你知道這個(gè)方法怎么實(shí)現(xiàn)，麻煩你可以告訴我。
我實(shí)現(xiàn)的方法是另外一種。
dispatchAction({
type: "geoSelect",
// 可選，系列 index，可以是一個(gè)數(shù)組指定多個(gè)系列
seriesIndex?: number|Array,
// 可選，系列名稱，可以是一個(gè)數(shù)組指定多個(gè)系列
seriesName?: string|Array,
// 數(shù)據(jù)的 index，如果不指定也可以通過 name 屬性根據(jù)名稱指定數(shù)據(jù)
dataIndex?: number,
// 可選，數(shù)據(jù)名稱，在有 dataIndex 的時(shí)候忽略
name?: string
})
后來我改變了一個(gè)方法。這個(gè)方法的核心思路是定時(shí)獲取圖標(biāo)的配置，然后更新配置，最后在設(shè)置配置。
var myChart = echarts.init(document.getElementById("china-map"));
var COLORS = ["#070093", "#1c3fbf", "#1482e5", "#70b4eb", "#b4e0f3", "#ffffff"];
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
tooltip: {
trigger: "item",
formatter: ""
},
series: [
{
name: "中國",
type: "map",
mapType: "china",
selectedMode : "single",
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data:[
// 默認(rèn)高亮安徽省
{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)"
}
}
}
]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
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);
后續(xù)補(bǔ)充
我從這里發(fā)現(xiàn)：https://github.com/ecomfe/ech...，選中地圖的寫法是這樣的，而試了一下果然可以。主要是type要是mapSelect,而不是geoSelect
myChart.dispatchAction({
type: "mapSelect",
// 可選，系列 index，可以是一個(gè)數(shù)組指定多個(gè)系列
// seriesIndex: 0,
// 可選，系列名稱，可以是一個(gè)數(shù)組指定多個(gè)系列
// seriesName: string|Array,
// 數(shù)據(jù)的 index，如果不指定也可以通過 name 屬性根據(jù)名稱指定數(shù)據(jù)
// dataIndex: number,
// 可選，數(shù)據(jù)名稱，在有 dataIndex 的時(shí)候忽略
name: "河北"
});
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88730.html
摘要：效果圖準(zhǔn)備工作高德地圖申請(qǐng)安裝中國地圖高德地圖官方點(diǎn)我進(jìn)入創(chuàng)建動(dòng)態(tài)創(chuàng)建標(biāo)簽后的是需要的插件中國地圖安裝開始使用創(chuàng)建組件寫入需要的分布指數(shù)高低寫入高德地圖需要的 效果圖 showImg(https://user-gold-cdn.xitu.io/2019/5/24/16ae7a7f2f9cac45); 準(zhǔn)備工作 高德地圖申請(qǐng)key 安裝Echarts 中國地圖 高德地圖 官方API...
摘要：最終自定義事件封裝在上面的鏈接中看到，不僅應(yīng)用層頁面的按鈕可以切換地圖維度，直接點(diǎn)擊地圖里的中國區(qū)域也能切換地圖，同時(shí)又能通知到應(yīng)用層頁面的按鈕改變狀態(tài)。 前言 很早以前寫過一篇用RequireJS包裝AjaxChart，當(dāng)時(shí)用Highcharts做圖表，在其上封裝了一層ajax，最后只是簡單套用了一下requireJS。由于當(dāng)時(shí)自己才接觸模塊化，理解層面還太淺，后來經(jīng)過其他項(xiàng)目的磨練...
摘要：項(xiàng)目要求左右兩張地圖能夠在鼠標(biāo)懸浮的時(shí)候高亮部分聯(lián)動(dòng)，曾嘗試了不好使，所以自己寫了這段代碼。遇見的坑使用引發(fā)，會(huì)發(fā)現(xiàn)只能顯示很短的時(shí)間，所以我鼠標(biāo)移入地圖時(shí)，給另一個(gè)地圖設(shè)置和。而獲取的時(shí)候會(huì)成為數(shù)組，也許是為了滿足多個(gè)的需求。 項(xiàng)目要求左右兩張地圖能夠在鼠標(biāo)懸浮的時(shí)候高亮部分聯(lián)動(dòng)，曾嘗試了connect不好使，所以自己寫了這段代碼。代碼思路為： 鼠標(biāo)移入地圖時(shí)，另一側(cè)的地圖根據(jù)鼠標(biāo)...
摘要：實(shí)現(xiàn)省與中國地圖之間的切換數(shù)據(jù)可視化這東西到處都需要使用或早或晚這東西都要接觸到自然地圖和可視化結(jié)合在一起也是早晚的需求雖然地圖之間的切換只是一個(gè)很小的功能但說不定什么時(shí)候就要用到現(xiàn)在看一看里面的坑也是好的效果差不多就是這樣點(diǎn)擊省切換到省 echarts實(shí)現(xiàn)省與中國地圖之間的切換 數(shù)據(jù)可視化這東西到處都需要使用,或早或晚echats這東西都要接觸到,自然地圖和可視化結(jié)合在一起也是早晚的...
閱讀 797·2023-04-26 03:04
閱讀 2872·2021-11-15 18:10
閱讀 1198·2021-09-03 10:28
閱讀 1137·2019-08-30 15:53
閱讀 894·2019-08-30 12:45
閱讀 1962·2019-08-30 11:03
閱讀 2870·2019-08-29 14:01
閱讀 2934·2019-08-28 18:24
