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.最終結果

轉載于:https://www.cnblogs.com/HeXiaoZhou/p/9399525.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Echarts地图编写的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。