1.引入echarts庫檔案
<script charset="utf-8" type="text/javascript" language="javascript" src="echarts-2.2.7/doc/example/www/js/echarts.js"></script>
2.在頁面中新建div用於地圖展示
<div id="main" style="height: 450px;width: 100%;"></div>
3.在頁面中引入js檔案
<script charset="utf-8" type="text/javascript" language="javascript" src="xxx.js"></script>
4.在js指令碼中編寫程式碼
複製程式碼
$(function() {
// 路徑配置
require.config({
paths : {
// echarts: 'http://echarts.baidu.com/build/dist'
echarts : './plugins/echarts-2.2.7/doc/example/www/js'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/map' // 使用柱狀圖就載入bar模組，按需載入
], function(ec) {
// 基於準備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById('main'));
var ecConfig = require('echarts/config');
var zrEvent = require('zrender/tool/event');
option = {
title : {
// 是否顯示
show: true,
// 主標題文字，'\n'指定換行
text: 'iphone銷量',
// 主標題文字超連結
link: 'http://www.baidu.com',
// 指定視窗開啟主標題超連結，支援'self' | 'blank'，不指定等同為'blank'（新視窗）
target: 'self',
// 副標題文字，'\n'指定換行
subtext: '純屬虛構',
// 副標題文字超連結
sublink: 'http://www.baidu.com',
// 指定視窗開啟副標題超連結，支援'self' | 'blank'，不指定等同為'blank'（新視窗）
subtarget: 'self',
// 水平安放位置，預設為左側，可選為：'center' | 'left' | 'right' | {number}（x座標，單位px）
x: 'center',
// 垂直安放位置，預設為全圖頂端，可選為：'top' | 'bottom' | 'center' | {number}（y座標，單位px）
y: 'top',
// 水平對齊方式，預設根據x設定自動調整，可選為： left' | 'right' | 'center
textAlign: 'center',
// 標題背景顏色，預設透明
backgroundColor: 'rgba(0,0,0,0.1)',
// 標題邊框顏色
borderColor: '#66FF00',
// 標題邊框線寬，單位px，預設為0（無邊框）
borderWidth: 1,
// 標題內邊距，單位px，預設各方向內邊距為5，接受陣列分別設定上右下左邊距，同css，見下圖
padding: [20,40,20,40],
// 主副標題縱向間隔，單位px，預設為10
itemGap: 20,
// 主標題文字樣式
textStyle: {
// 顏色
color: '#0066FF',
// 水平對齊方式，可選為：'left' | 'right' | 'center'
align: 'left',
// 垂直對齊方式，可選為：'top' | 'bottom' | 'middle'
baseline: 'bottom',
// 字型系列
fontFamily: 'Arial, 宋體, sans-serif',
// 字號 ，單位px
fontSize: 20,
// 樣式，可選為：'normal' | 'italic' | 'oblique'
fontStyle: 'italic',
// 粗細，可選為：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
fontWeight: 'normal'
},
// 副標題文字樣式
subtextStyle: {
// 顏色
color: '#FF7F50',
// 水平對齊方式，可選為：'left' | 'right' | 'center'
align: 'left',
// 垂直對齊方式，可選為：'top' | 'bottom' | 'middle'
baseline: 'bottom',
// 字型系列
fontFamily: 'Arial, 宋體, sans-serif',
// 字號 ，單位px
fontSize: 15,
// 樣式，可選為：'normal' | 'italic' | 'oblique'
fontStyle: 'italic',
// 粗細，可選為：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
fontWeight: 'normal'
}
},
// 工具提示
tooltip : {
// 顯示策略，可選為：true（顯示） | false（隱藏）
show: true,
// tooltip主體內容顯示策略，只需tooltip觸發事件或顯示axisPointer而不需要顯示內容時可配置該項為false
showContent: true,
// 觸發型別，預設資料觸發，見下圖，可選為：'item' | 'axis'
trigger: 'item',
// 位置指定，傳入{Array}，如[x, y]， 固定位置[x, y]；傳入{Function}，如function([x, y]) {return [newX,newY]}，預設顯示座標為輸入引數，使用者指定的新座標為輸出返回。
// position: getTooltipPosition(0,0),
// 內容格式器：{string}（Template） | {Function}，支援非同步回撥
/*formatter: function(data){
console.log(data);
return data[1]+"："+data[5].count;
}*/
// 拖拽重計算獨有，資料孤島內容格式器：{string}（Template） | {Function}，見表格下方
// islandFormatter:
// 顯示延遲，新增顯示延遲可以避免頻繁切換，特別是在詳情內容需要非同步獲取的場景，單位ms
showDelay: 0,
// 隱藏延遲，單位ms
hideDelay: 0,
// 動畫變換時長，單位s，如果你希望tooltip的跟隨實時響應，showDelay設定為0是關鍵，同時transitionDuration設0也會有互動體驗上的差別。
transitionDuration: 0,
// 滑鼠是否可進入詳情氣泡中，預設為false，如需詳情內互動，如新增連結，按鈕，可設定為true。
//enterable: false,
// 提示背景顏色，預設為透明度為0.7的黑色
backgroundColor: 'rgba(0,0,0,0.5)',
// 提示邊框顏色
borderColor: '#FF7F50',
// 提示邊框圓角，單位px，預設為4
borderRadius: 10,
// 提示邊框線寬，單位px，預設為0（無邊框）
borderWidth: 2,
// 提示內邊距，單位px，預設各方向內邊距為5，接受陣列分別設定上右下左邊距，同css
padding: [15,15,15,15],
// 座標軸指示器
/*axisPointer:{
// 預設type為line，可選為：'line' | 'cross' | 'shadow' | 'none'(無)，指定type後對應style生效
type: 'line',
// lineStyle設定直線指示器
lineStyle: {
// 顏色
color:'#48b',
// 線條樣式，可選為：'solid' | 'dotted' | 'dashed'， 樹圖還可以選：'curve' | 'broken'
type:'solid',
// 線寬
width:10,
// 折線主線(IE8+)有效，陰影色彩，支援rgba
shadowColor:'rgba(0,0,0,0)',
// 折線主線(IE8+)有效，陰影模糊度，大於0有效
shadowBlur:5,
// 折線主線(IE8+)有效，陰影橫向偏移，正值往右，負值往左
shadowOffsetX:3,
// 折線主線(IE8+)有效，陰影縱向偏移，正值往下，負值往上
shadowOffsetY:3
},
// crossStyle設定十字準星指示器
crossStyle:{
// 顏色
color:'#48b',
// 線條樣式，可選為：'solid' | 'dotted' | 'dashed'， 樹圖還可以選：'curve' | 'broken'
type:'solid',
// 線寬
width:10,
// 折線主線(IE8+)有效，陰影色彩，支援rgba
shadowColor:'rgba(0,0,0,0)',
// 折線主線(IE8+)有效，陰影模糊度，大於0有效
shadowBlur:5,
// 折線主線(IE8+)有效，陰影橫向偏移，正值往右，負值往左
shadowOffsetX:3,
// 折線主線(IE8+)有效，陰影縱向偏移，正值往下，負值往上
shadowOffsetY:3
},
// shadowStyle設定陰影指示器，areaStyle.size預設為'auto'自動計算，可指定具體寬度
shadowStyle:{
// 顏色
color: 'rgba(150,150,150,0.3)',
width: 'auto',
// 填充樣式，目前僅支援'default'(實填充)
type: 'default'
}
},*/
// 文字樣式，預設為白色字型
textStyle:{
// 顏色
color: '#FF7F50',
// 水平對齊方式，可選為：'left' | 'right' | 'center'
align: 'left',
// 垂直對齊方式，可選為：'top' | 'bottom' | 'middle'
baseline: 'bottom',
// 字型系列
fontFamily: 'Arial, 宋體, sans-serif',
// 字號 ，單位px
fontSize: 20,
// 樣式，可選為：'normal' | 'italic' | 'oblique'
fontStyle: 'italic',
// 粗細，可選為：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
fontWeight: 'normal'
}
},
legend: {
// 顯示策略，可選為：true（顯示） | false（隱藏）
show: true,
// 佈局方式，預設為水平佈局，可選為：'horizontal' | 'vertical'
orient: 'vertical',
// 水平安放位置，預設為全圖居中，可選為：'center' | 'left' | 'right' | {number}（x座標，單位px）
x: 'left',
// 垂直安放位置，預設為全圖頂端，可選為：'top' | 'bottom' | 'center' | {number}（y座標，單位px）
y: 'top',
// 圖例背景顏色，預設透明
backgroundColor: 'rgba(0,0,0,0.1)',
// 圖例邊框顏色
borderColor: '#0066FF',
// 圖例邊框線寬，單位px，預設為0（無邊框）
borderWidth: 1,
// 圖例內邊距，單位px，預設各方向內邊距為5，接受陣列分別設定上右下左邊距，同css
padding: [15,15,15,15],
// 各個item之間的間隔，單位px，預設為10，橫向佈局時為水平間隔，縱向佈局時為縱向間隔
itemGap: 20,
// 圖例圖形寬度
itemWidth: 30,
// 圖例圖形高度
itemHeight: 20,
// 預設只設定了圖例文字顏色,更個性化的是，要指定文字顏色跟隨圖例,可設color為'auto'
textStyle:{
// 顏色
color: '#FF7F50',
// 水平對齊方式，可選為：'left' | 'right' | 'center'
align: 'left',
// 垂直對齊方式，可選為：'top' | 'bottom' | 'middle'
baseline: 'bottom',
// 字型系列
fontFamily: 'Arial, 宋體, sans-serif',
// 字號 ，單位px
fontSize: 20,
// 樣式，可選為：'normal' | 'italic' | 'oblique'
fontStyle: 'italic',
// 粗細，可選為：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
fontWeight: 'normal'
},
// 文字格式器：{string}（Template） | {Function}，模板變數為'{name}'，函式回撥引數為name
/*formatter: function(data){
console.log(data);
return data[1]+"："+data[5].count;
},*/
// 選擇模式，預設開啟圖例開關，可選single，multiple
selectedMode: true,
// 配置預設選中狀態，可配合LEGEND.SELECTED事件做動態資料載入
/*selected: {
'降水量' : false
},*/
// 圖例內容陣列
data:[{name:'iphone3'/*,textStyle:{Object},icon:{string}*/},
{name:'iphone4'/*,textStyle:{Object},icon:{string}*/},
{name:'iphone5'/*,textStyle:{Object},icon:{string}*/}]
},
// 值域選擇，每個圖表最多僅有一個值域控制元件
dataRange: {
// 顯示策略，可選為：true（顯示） | false（隱藏）
show: true,
// 佈局方式，預設為垂直佈局，可選為：'horizontal' | 'vertical'
orient: 'horizontal',
// 水平安放位置，預設為全圖左對齊，可選為：'center' | 'left' | 'right' | {number}（x座標，單位px）
x: 'left',
// 垂直安放位置，預設為全圖底部，可選為：'top' | 'bottom' | 'center' | {number}（y座標，單位px）
y: 'bottom',
// 值域控制元件背景顏色，預設透明
backgroundColor: 'rgba(0,0,0,0.1)',
// 圖例邊框顏色
borderColor: '#0066FF',
// 圖例邊框線寬，單位px，預設為0（無邊框）
borderWidth: 1,
// 圖例內邊距，單位px，預設各方向內邊距為5，接受陣列分別設定上右下左邊距，同css
padding: [15,15,15,15],
// 各個item之間的間隔，單位px，預設為10，橫向佈局時為水平間隔，縱向佈局時為縱向間隔
itemGap: 20,
// 圖例圖形寬度
itemWidth: 30,
// 圖例圖形高度
itemHeight: 20,
// 指定的最小值，eg: 0，預設無，必須引數，唯有指定了splitList時可預設min。
min: 0,
// 指定的最大值，eg: 100，預設無，必須引數，唯有指定了splitList時可預設max
max: 2500,
// 小數精度，預設為0，無小數點，當 min ~ max 間在當前精度下無法整除splitNumber份時，精度會自動提高以滿足均分，不支援不等劃分
precision: 1,
// 分割段數，預設為5，為0時為線性漸變，calculable為true是預設均分100份
splitNumber: 10,
// 自定義分割方式，支援不等距分割。splitList被指定時，splitNumber將被忽略。
/*splitList: [
{start: 1500},
{start: 900, end: 1500},
{start: 310, end: 1000},
{start: 200, end: 300},
{start: 10, end: 200, label: '10 到 200（自定義label）'},
{start: 5, end: 5, label: '5（自定義特殊顏色）', color: 'black'},
{end: 10}
],*/
// 用於設定dataRange的初始選中範圍。calculable為true時有效。
range: {start: 0, end: 100},
// 選擇模式，預設開啟值域開關，可選single，multiple
selectedMode: 'multiple',
// 是否啟用值域漫遊，啟用後無視splitNumber和splitList，值域顯示為線性漸變
calculable : true,
// 是否啟用地圖hover時的聯動響應
hoverLink: true,
// 值域漫遊是否實時顯示，在不支援Canvas的瀏覽器中該值自動強制置為false
realtime:true,
// 值域顏色標識，顏色陣列長度必須>=2，顏色代表從數值高到低的變化，即顏色陣列低位代表數值高的顏色標識 ，支援Alpha通道上的變化（rgba）
color:['#e42515','#fad3d0'],
// 內容格式器：{string}（Template） | {Function}，模板變數為'{value}'和'{value2}'，代表數值起始值和結束值，函式引數兩個，含義同模板變數，當calculable為true時模板變數僅有'{value}'
/*formatter : function(v, v2){
if (v2 < 1000) { return '低於' + v2;}
else if (v > 1000) { return '高於' + v;}
else { return '中'; }
},*/
// 值域文字顯示，splitNumber生效時預設以計算所得數值作為值域文字顯示，可指定長度為2的文字陣列顯示簡介的值域文字，如['高', '低']，'\n'指定換行
text:['高','低'],
// 預設只設定了值域控制元件文字顏色
textStyle:{
// 顏色
color: '#FF7F50',
// 水平對齊方式，可選為：'left' | 'right' | 'center'
align: 'left',
// 垂直對齊方式，可選為：'top' | 'bottom' | 'middle'
baseline: 'bottom',
// 字型系列
fontFamily: 'Arial, 宋體, sans-serif',
// 字號 ，單位px
fontSize: 20,
// 樣式，可選為：'normal' | 'italic' | 'oblique'
fontStyle: 'italic',
// 粗細，可選為：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
fontWeight: 'normal'
}
},
// 工具箱，每個圖表最多僅有一個工具箱
toolbox: {
// 顯示策略，可選為：true（顯示） | false（隱藏）
show: true,
// 佈局方式，預設為水平佈局，可選為：'horizontal' | 'vertical'
orient : 'horizontal',
// 水平安放位置，預設為全圖居中，可選為：'center' | 'left' | 'right' | {number}（x座標，單位px）
x: 'right',
// 垂直安放位置，預設為全圖頂端，可選為：'top' | 'bottom' | 'center' | {number}（y座標，單位px）
y: 'bottom',
// 工具箱背景顏色，預設透明
backgroundColor: 'rgba(218,112,214,0.6)',
// 工具箱邊框顏色
borderColor: '#0066FF',
// 工具箱邊框線寬，單位px，預設為0（無邊框）
borderWidth: 1,
// 工具箱內邊距，單位px，預設各方向內邊距為5，接受陣列分別設定上右下左邊距，同css
padding: [15,15,15,15],
// 各個item之間的間隔，單位px，預設為10，橫向佈局時為水平間隔，縱向佈局時為縱向間隔
itemGap: 20,
// 工具箱icon大小，單位（px）
itemSize: 20,
// 工具箱icon顏色序列，迴圈使用，同時支援在具體feature內指定color
color:['#1e90ff','#22bb22','#4b0082','#d2691e'],
// 禁用顏色定義
disableColor:'#fff',
// 生效顏色定義
effectiveColor:'red',
// 是否顯示工具箱文字提示，預設啟用
showTitle:true,
// 工具箱提示文字樣式
textStyle:{
// 顏色
color: '#FF7F50',
// 水平對齊方式，可選為：'left' | 'right' | 'center'
align: 'left',
// 垂直對齊方式，可選為：'top' | 'bottom' | 'middle'
baseline: 'bottom',
// 字型系列
fontFamily: 'Arial, 宋體, sans-serif',
// 字號 ，單位px
fontSize: 20,
// 樣式，可選為：'normal' | 'italic' | 'oblique'
fontStyle: 'italic',
// 粗細，可選為：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
fontWeight: 'normal'
},
// 啟用功能，目前支援feature見下，工具箱自定義功能回撥處理
feature : {
// 輔助線標誌,分別是啟用，刪除上一條，刪除全部,可設定更多屬性
mark : {
show : true,
title : {
mark : '輔助線開關',
markUndo : '刪除輔助線',
markClear : '清空輔助線'
},
lineStyle : {
width : 2,
color : '#1e90ff',
type : 'dashed'
}
},
// 框選區域縮放，自動與存在的dataZoom控制元件同步，上圖icon左數4/5，分別是啟用，縮放後退
dataZoom : {
show : true,
title : {
dataZoom : '區域縮放',
dataZoomReset : '區域縮放後退'
}
},
// 資料檢視，上圖icon左數6，開啟資料檢視，可設定更多屬性
dataView : {
show : true,
title : '資料檢視',
readOnly: false,
lang: ['資料檢視', '關閉', '重新整理']
},
// 動態型別切換，支援直角系下的折線圖、柱狀圖、堆積、平鋪轉換，上圖icon左數6~14，分別是切換為堆積，切換為平鋪，切換折線圖，切換柱形圖，切換為力導向佈局圖，切換為和絃圖，切換為餅圖，切換為漏斗圖
magicType: {
show : true,
title : {
line : '折線圖切換',
bar : '柱形圖切換',
stack : '堆積',
tiled : '平鋪',
force: '力導向佈局圖切換',
chord: '和絃圖切換',
pie: '餅圖切換',
funnel: '漏斗圖切換'
},
option: {
// line: {...},
// bar: {...},
// stack: {...},
// tiled: {...},
// force: {...},
// chord: {...},
// pie: {...},
// funnel: {...}
},
type : []
},
// 還原，復位原始圖表
restore : {
show : true,
title : '還原'
},
// 儲存圖片（IE8-不支援），可設定更多屬性
saveAsImage : {
show : true,
title : '儲存為圖片',
type : 'png',
lang : ['點選儲存']
}
}
},
// 縮放漫遊元件，僅對地圖有效
roamController: {
// 顯示策略，可選為：true（顯示） | false（隱藏）
show: true,
// 水平安放位置，預設為左側，可選為：'center' | 'left' | 'right' | {number}（x座標，單位px）
x: 'right',
// 垂直安放位置，預設為全圖頂端，可選為：'top' | 'bottom' | 'center' | {number}（y座標，單位px）
y: 'top',
// 指定寬度，決定4向漫遊圓盤大小，可指定 {number}（寬度，單位px）
width: 120,
// 指定高度，縮放控制鍵預設會在指定高度的最下方最大化顯示，可指定 {number}（高度，單位px）
height:200,
// 縮放漫遊元件背景顏色，預設透明
backgroundColor:'rgba(0,0,0,0.1)',
// 縮放漫遊元件邊框顏色
borderColor: '#1e90ff',
// 縮放漫遊元件邊框線寬，單位px，預設為0（無邊框）
borderWidth: 1,
// 縮放漫遊元件內邊距，單位px，預設各方向內邊距為5，接受陣列分別設定上右下左邊距，同css
padding: [15,15,15,15],
// 漫遊元件文字填充顏色
fillerColor:'#000',
// 控制手柄主體顏色
handleColor:'#e3655a',
// 4向漫遊移動步伐，單位px
step:10,
// 必須，指定漫遊元件可控地圖型別
mapTypeControl: {
'china': true
}
},
series : [
{
// 圖表型別，必要引數！如為空或不支援型別，則該系列資料不被顯示。可選為：
// 'line'（折線圖） | 'bar'（柱狀圖） | 'scatter'（散點圖） | 'k'（K線圖）
// 'pie'（餅圖） | 'radar'（雷達圖） | 'chord'（和絃圖） | 'force'（力導向佈局圖） | 'map'（地圖）
type: 'map',
// 系列名稱
name: 'iphone3',
// 地圖型別，支援world，china及全國34個省市自治區
mapType: 'china',
// 是否開啟滾輪縮放和拖拽漫遊,預設為false（關閉），其他有效輸入為true（開啟），'scale'（僅開啟滾輪縮放），'move'（僅開啟拖拽漫遊）
roam: false,
// 圖形樣式
itemStyle:{
// 預設狀態下地圖的文字
normal:{label:{show:true}},
// 滑鼠放到地圖上面顯示文字
emphasis:{label:{show: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)},
{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)},
{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)},
{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: 'iphone4',
type: 'map',
mapType: 'china',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show: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)},
{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: 'iphone5',
type: 'map',
mapType: 'china',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show: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)}
]
}
]
};
myChart.setOption(option);
});
});
複製程式碼5.最終結果
。