Echarts地圖編寫

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);
});
});