⑴ 運用ECharts寫出下面圖片,前端,急!
地圖的顏色可以分為默認的顏色 還有就是滑鼠移上去之後的變色 itemStyle下麵包括normal和emphasis 前者很明顯是正常情況下 後者是強調 也就是滑鼠移上去之後變色 所以每個下面都可以設置地圖的顏色 itemStyle:{ normal:{ label:{ show:true, tex如何使用網路echarts炫光特效地圖
⑵ Echarts實現全國地圖點擊進入各省份,各省份有對應的城市坐標點顯示
根據選擇的地區去載入地圖數據然後給chart.setOption(); 改變紅色字體的值就可以,紅色字體是省的拼音具體查看echarts/map文件夾內文件,有js載入方式和json載入方式
$.get('map/json/china.json', function (chinaJson) {
echarts.registerMap('china', chinaJson);
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
});
⑶ 如何使用ECharts製作地圖散點圖
type: 'scatter',
查看一下文檔里關於type: 'scatter',散點圖
⑷ 本人想用echarts把區級的具體地圖詳情顯示出來,怎麼做
貌似除了用專業的統計工具(如MATLAB)外別無選擇?不,在擁有眾多交互特性下ECharts依然可以做到直角系圖表(折、柱、散點、K線)20萬數據秒級出圖。值域漫遊基於坐標的圖表(如地圖、散點圖)通過色彩變化表現數值的大小能直觀形象的展示
⑸ js,echarts製作地圖的問題
好像目前地圖api roam只能支持縮放和平移吧。 如果你要改視角旋轉,可以試試監聽touch事件,讓外層的div旋轉起來。
⑹ 為什麼我用echarts寫的地圖總是顯示不出來
顯示什麼問題?我之前遇到的就是引用echarts後地圖不顯示的問題。 這個問題是因為echarts3的地圖的geo數據以前的中國地圖是內置了,現在新版本需要自己下載的china的js或json數據,引用了之後就可以顯示了。http://echartscom/download-m為什麼我用echarts寫的地圖總是顯示不出來
⑺ 如何用ECharts動態在地圖上標識點
ECharts可以很方便的在網頁上繪制地圖,圖表,並且可以提供下載圖像,放大,縮小,拖動等功能,今天主要說一下它的地圖類型(type:'map')是如何實現的.
首先在ECharts地圖的坐標需要我們存儲在一個geoCoord屬性里,它是一個JS的字典對象,由鍵/值對組成,鍵表示點的名稱,值則表達它的坐標,由經緯度組成,它是一個數組,如[136.00,32.00]它就表示了一個坐標.
地圖類型的圖表需要關注的元素
title:標題,顯示這個地圖所表示的名稱
title: {
text: '清大雲點亮中國',
subtext: 'Tsingda.Cloud',
sublink: 'http://www.eee114.com',
x: 'center',
y: 'top',
textStyle: {
color: '#fff'
}
}
toolbox:工具欄,顯示一些顯示的工具,放大,縮小,查看數據集,下載圖像等
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
}
legend:圖標顯示,當series有多個地圖時,這個值用到顯示多個地圖的圖標,可以是橫向顯示和縱向顯示
legend: {
x: 'left',
y: 'top',
data: ['在線', '離線'],//在線和離線對應的是series的名字
selectedMode: false,//選中懸浮
textStyle: {
color: '#fff'
}
}
series:地圖顯示,用來疊放顯示地圖,你可以定義多個,它們之間的關系是第一個在最上面,以此類推.
series: [
//默認
{
name: '底層模版',
type: 'map',
mapType: 'china',
data: provinceMap,
geoCoord: source,
itemStyle: {
normal: {
color: bgColor,
borderColor: "#eee",
label: {
show: true,
textStyle: {
color: "#fff"
}
}
}, emphasis: { color: "rgba(128, 128, 128, 0.5)" }
},
}]
markPoint:點標識,用來標識地圖上的後,這些點通常是被存儲在一個geoCoord對象上,這個對象是一個字典,這在文章開頭已經介紹過.
markPoint: {//動態標記
large: true,//這個選項,懸浮自動失效
symbolSize: 2,
itemStyle: {
normal: {
shadowBlur: 2,
shadowColor: 'rgba(37, 140, 249, 0.8)',
color: onColor
}
},
data: []
}
markPoint里的data對象是這個地圖上需要顯示的點,它是一個字元型數組,用來存儲geoCoord里的鍵!
setOption:將地圖對象添加到指定的地圖對象上
var myChart = echarts.init(document.getElementById('main'));
var option={};
myChart.setOption(option);
動態構建地圖上的點標識markPoint
大概的思路是將要標記的點動態付給geoCoord和markPoint的data對象上,這樣就可以動態在地圖上標示點了
$.get("/map/GetOffMap", function (data) {
for (var i in data) {
option.series[0].geoCoord[data[i].longitude + "_" + data[i].latitude] = [parseFloat(data[i].longitude), parseFloat(data[i].latitude)];
option.series[1].markPoint.data.push({ name: data[i].longitude + "_" + data[i].latitude });
}
myChart.setOption(option);
⑻ 我想用echarts實現市級地圖顯示,比如只顯示沈陽市。然後能顯示具體的區縣。怎麼弄
鏈接網頁鏈接
⑼ echars 如何做一個只顯示一個省的地圖急!!
我以顯示浙江省的地圖為例,寫段代碼
首先我們需要兩個文件:
1、echarts.min.js
2、zhejiang.js
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>echarts圖形插件使用</title>
</head>
<body>
<divid="main"style="height:800px;"></div>
<scripttype="text/JavaScript"src="echarts.min.js"></script>
<scripttype="text/JavaScript"src="zhejiang.js"></script>
<scripttype="text/javascript">
varchart=echarts.init(document.getElementById('main'));
chart.setOption({
series:[{
type:'map',
selectedMode:'single',
map:'浙江',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
}
}]
});
</script>
</body>
</html>
這樣就可以顯示浙江省地圖了
至於zhejiang.js在哪裡獲取,可以在github上找到,網頁鏈接,目錄為:echarts/map/js/province/