<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
</head>
<body>
<!--1 準備一個容器來顯示echarts地圖-->
<div class="map-demo" style="width: 940px;height:660px;border:1px solid #ccc;padding:10px;"></div>
<!--2 引入echarts.js,官網可下載-->
<script src="build/dist/echarts.js"></script>
<script>
// 3 配置echarts的路徑
require.config({
paths: {
echarts: './build/dist'
}
});
// 4 動態加載echarts然後在回調函數中開始使用，注意保持按需加載結構定義圖表路徑
require(
[
//這裏的'echarts'相當於'./js'
'echarts',
'echarts/chart/map'//一定要下載好map.js這個文件,不然不會顯示地圖
],
//創建ECharts圖表方法
function (ec) {
// --- 地圖 ---
//基於準備好的dom,初始化echart圖表
var myChart = ec.init(document.querySelector('.map-demo'));
//定義圖表option
var option = {
//標題，每個圖表最多僅有一個標題控件，每個標題控件可設主副標題
title: {
//主標題文本，'\n'指定換行
text: '全部加盟商',
//副標題文本，'\n'指定換行
subtext: '藍職培',
//水平安放位置，默認爲左側，可選爲：'center' | 'left' | 'right' | {number}（x座標，單位px）
x: 'center',
//垂直安放位置，默認爲全圖頂端，可選爲：'top' | 'bottom' | 'center' | {number}（y座標，單位px）
y: 'top'
},
//圖例，每個圖表最多僅有一個圖例
tooltip : {
//觸發類型，默認（'item'）數據觸發，可選爲：'item' | 'axis'
trigger: 'item'
},
//圖例，每個圖表最多僅有一個圖例
legend: {
//佈局方式，默認爲水平佈局(即horizontal)，可選爲：'horizontal' | 'vertical'
orient: 'vertical',
//水平安放位置，默認爲全圖居中，可選爲：'center' | 'left' | 'right' | {number}（x座標，單位px）
x: 'left',
//垂直安放位置，默認爲全圖頂端，可選爲：'top' | 'bottom' | 'center' | {number}（y座標，單位px）
y: 'top',
//legend的data: 用於設置圖例，data內的字符串數組需要與sereis數組內每一個series的name值對應
data:['門店加盟','合作伙伴','公司股東']
},
//值域選擇，每個圖表最多僅有一個值域控件
dataRange: {
//佈局方式，默認爲垂直佈局('vertical')，可選爲：'horizontal' | 'vertical'
orient: 'vertical',
//指定的最小值，eg: 0，默認無(null)，必須參數
min: 0,
//指定的最大值，eg: 100，默認無(null)，必須參數
max: 2500,
//水平安放位置，默認爲全圖左對齊('left')，可選爲：'center' | 'left' | 'right' | {number}（x座標，單位px）
x: 'left',
//垂直安放位置，默認爲全圖底部('bottom')，可選爲：'top' | 'bottom' | 'center' | {number}（y座標，單位px）
y: 'bottom',
//值域文字顯示，默認爲數值文本
text: ['高','低'],
//是否啓用值域漫遊，默認爲關閉(false)，啓用後無視splitNumber，值域顯示爲線性漸變
calculable: true
},
//series(地圖),驅動圖表生成的數據內容數組，數組中每一項爲一個系列的選項及數據
series : [
{
//系列名稱，如果啓用legend，該值將被legend.data索引相關
name: '門店加盟',
//圖表類型，必要參數！如爲空或不支持類型，則該系列數據不被顯示
type: 'map',
//地圖類型，支持world，china及全國34個省市自治區。省市自治區的mapType直接使用簡體中文：如'廣東'
mapType: 'china',
//是否開啓滾輪縮放和拖拽漫遊，默認爲false（關閉），其他有效輸入爲true（開啓），'scale'（僅開啓滾輪縮放），'move'（僅開啓拖拽漫遊）
roam: 'scale',
//圖形樣式，可設置圖表內圖形的默認樣式和強調樣式（懸浮時樣式）
itemStyle:{
//正常時的樣式
normal:{
//邊框線寬，單位px
borderWidth: 1,
//邊框顏色
borderColor: '#696969',
color:'#eeeeee',//地圖背景顏色
//標籤，餅圖默認顯示在外部，離餅圖距離由labelLine.length決定，地圖標籤不可指定位置
label: {show:true}
},
//鼠標經過時的樣式
emphasis: {
//邊框線寬，單位px
borderWidth:1,
//邊框顏色
borderColor:'#fff',
//鼠標經過時區域的顏色
color: '#c65454',
//標籤
label: {
show: true,
//文本樣式
textStyle: {
//文本字體顏色
color: '#c65454'
}
}
}
},
//當圖表類型爲地圖時，需要說明每部分數據對應的省份，可設置選中狀態，如 :{name: '北京',value: 1234,selected: true},
data:[
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '河南',value: Math.round(Math.random()*1000)},
{name: '湖南',value: Math.round(Math.random()*1000)},
{name: '安徽',value: Math.round(Math.random()*1000)},
{name: '江蘇',value: Math.round(Math.random()*1000)},
{name: '浙江',value: Math.round(Math.random()*1000)},
{name: '江西',value: Math.round(Math.random()*1000)},
{name: '湖北',value: Math.round(Math.random()*1000)},
{name: '福建',value: Math.round(Math.random()*1000)},
{name: '山東',value: Math.round(Math.random()*1000)},
],
},
{
//系列名稱，如果啓用legend，該值將被legend.data索引相關
name: '合作伙伴',
//圖表類型，必要參數！如爲空或不支持類型，則該系列數據不被顯示
type: 'map',
//地圖類型，支持world，china及全國34個省市自治區。省市自治區的mapType直接使用簡體中文：如'廣東'
mapType: 'china',
//是否開啓滾輪縮放和拖拽漫遊，默認爲false（關閉），其他有效輸入爲true（開啓），'scale'（僅開啓滾輪縮放），'move'（僅開啓拖拽漫遊）
roam: 'scale',
//圖形樣式，可設置圖表內圖形的默認樣式和強調樣式（懸浮時樣式）
itemStyle:{
//正常時的樣式
normal:{
//邊框線寬，單位px
borderWidth: 2,
//邊框顏色
borderColor: 'lightgreen',
//標籤，餅圖默認顯示在外部，離餅圖距離由labelLine.length決定，地圖標籤不可指定位置
label: {show:true}
},
//鼠標經過時的樣式
emphasis: {
//邊框線寬，單位px
borderWidth:2,
//邊框顏色
borderColor:'#fff',
//鼠標經過時區域的顏色
color: '#c65454',
//標籤
label: {
show: true,
//文本樣式
textStyle: {
//文本字體顏色
color: '#fff'
}
}
}
},
data:[
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '安徽',value: Math.round(Math.random()*1000)},
{name: '浙江',value: Math.round(Math.random()*1000)},
{name: '江西',value: Math.round(Math.random()*1000)},
{name: '福建',value: Math.round(Math.random()*1000)},
]
},
{
//系列名稱，如果啓用legend，該值將被legend.data索引相關
name: '公司股東',
//圖表類型，必要參數！如爲空或不支持類型，則該系列數據不被顯示
type: 'map',
//地圖類型，支持world，china及全國34個省市自治區。省市自治區的mapType直接使用簡體中文：如'廣東'
mapType: 'china',
//是否開啓滾輪縮放和拖拽漫遊，默認爲false（關閉），其他有效輸入爲true（開啓），'scale'（僅開啓滾輪縮放），'move'（僅開啓拖拽漫遊）
roam: 'scale',
//圖形樣式，可設置圖表內圖形的默認樣式和強調樣式（懸浮時樣式）
itemStyle:{
//正常時的樣式
normal:{
//邊框線寬，單位px
borderWidth: 2,
//邊框顏色
borderColor: 'lightgreen',
//標籤，餅圖默認顯示在外部，離餅圖距離由labelLine.length決定，地圖標籤不可指定位置
label: {show:true}
},
//鼠標經過時的樣式
emphasis: {
//邊框線寬，單位px
borderWidth:2,
//邊框顏色
borderColor:'#fff',
//鼠標經過時區域的顏色
color: '#c65454',
//標籤
label: {
show: true,
//文本樣式
textStyle: {
//文本字體顏色
color: '#fff'
}
}
}
},
data:[
{name: '安徽',value: Math.round(Math.random()*1000)},
{name: '蘇州',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '江蘇',value: Math.round(Math.random()*1000)},
]
}
]
};
//爲echarts對象加載數據
myChart.setOption(option);
}
);
</script>
</body>
</html>
ECharts地圖使用一段代碼即可搞定
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.