ECharts地圖詳解【轉(zhuǎn)】

<pre style="color: rgb(0, 0, 0); font-family: "Courier New"; font-size: 12px; margin: 5px 8px; padding: 5px;">$(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) {
    // 基于準(zhǔn)備好的dom,初始化echarts圖表
    var myChart = ec.init(document.getElementById('main'));
    var ecConfig = require('echarts/config');
    var zrEvent = require('zrender/tool/event');
    option = {
        title : {
            // 是否顯示
            show: true,
            // 主標(biāo)題文本,'\n'指定換行
            text: 'iphone銷量',
            // 主標(biāo)題文本超鏈接
            link: 'http://www.baidu.com',
            // 指定窗口打開主標(biāo)題超鏈接,支持'self' | 'blank',不指定等同為'blank'(新窗口)
            target: 'self',
            // 副標(biāo)題文本,'\n'指定換行
            subtext: '純屬虛構(gòu)',
            // 副標(biāo)題文本超鏈接
            sublink: 'http://www.baidu.com',
            // 指定窗口打開副標(biāo)題超鏈接,支持'self' | 'blank',不指定等同為'blank'(新窗口)
            subtarget: 'self',
            // 水平安放位置,默認(rèn)為左側(cè),可選為:'center' | 'left' | 'right' | {number}(x坐標(biāo),單位px)
            x: 'center',
            // 垂直安放位置,默認(rèn)為全圖頂端,可選為:'top' | 'bottom' | 'center' | {number}(y坐標(biāo),單位px)
            y: 'top',
            // 水平對齊方式,默認(rèn)根據(jù)x設(shè)置自動調(diào)整,可選為: left' | 'right' | 'center
            textAlign: 'center',
            // 標(biāo)題背景顏色,默認(rèn)透明
            backgroundColor: 'rgba(0,0,0,0.1)',
            // 標(biāo)題邊框顏色
            borderColor: '#66FF00',
            // 標(biāo)題邊框線寬,單位px,默認(rèn)為0(無邊框)
            borderWidth: 1,
            // 標(biāo)題內(nèi)邊距,單位px,默認(rèn)各方向內(nèi)邊距為5,接受數(shù)組分別設(shè)定上右下左邊距,同css,見下圖
            padding: [20,40,20,40],
            // 主副標(biāo)題縱向間隔,單位px,默認(rèn)為10
            itemGap: 20,
            // 主標(biāo)題文本樣式
            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'
            },
            // 副標(biāo)題文本樣式
            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主體內(nèi)容顯示策略,只需tooltip觸發(fā)事件或顯示axisPointer而不需要顯示內(nèi)容時可配置該項為false
            showContent: true,
            // 觸發(fā)類型,默認(rèn)數(shù)據(jù)觸發(fā),見下圖,可選為:'item' | 'axis'
            trigger: 'item',
            // 位置指定,傳入{Array},如[x, y], 固定位置[x, y];傳入{Function},如function([x, y]) {return [newX,newY]},默認(rèn)顯示坐標(biāo)為輸入?yún)?shù),用戶指定的新坐標(biāo)為輸出返回。
            // position: getTooltipPosition(0,0),
            // 內(nèi)容格式器:{string}(Template) | {Function},支持異步回調(diào)
            /*formatter: function(data){
                console.log(data);
                return data[1]+":"+data[5].count;
            }*/
            // 拖拽重計算獨有,數(shù)據(jù)孤島內(nèi)容格式器:{string}(Template) | {Function},見表格下方
            // islandFormatter:
            // 顯示延遲,添加顯示延遲可以避免頻繁切換,特別是在詳情內(nèi)容需要異步獲取的場景,單位ms
            showDelay: 0,
            // 隱藏延遲,單位ms
            hideDelay: 0,
            // 動畫變換時長,單位s,如果你希望tooltip的跟隨實時響應(yīng),showDelay設(shè)置為0是關(guān)鍵,同時transitionDuration設(shè)0也會有交互體驗上的差別。
            transitionDuration: 0,
            // 鼠標(biāo)是否可進入詳情氣泡中,默認(rèn)為false,如需詳情內(nèi)交互,如添加鏈接,按鈕,可設(shè)置為true。
            //enterable: false,
            // 提示背景顏色,默認(rèn)為透明度為0.7的黑色
            backgroundColor: 'rgba(0,0,0,0.5)',
            // 提示邊框顏色
            borderColor: '#FF7F50',
            // 提示邊框圓角,單位px,默認(rèn)為4
            borderRadius: 10,
            // 提示邊框線寬,單位px,默認(rèn)為0(無邊框)
            borderWidth: 2,
            // 提示內(nèi)邊距,單位px,默認(rèn)各方向內(nèi)邊距為5,接受數(shù)組分別設(shè)定上右下左邊距,同css
            padding: [15,15,15,15],
            // 坐標(biāo)軸指示器
            /*axisPointer:{
                // 默認(rèn)type為line,可選為:'line' | 'cross' | 'shadow' | 'none'(無),指定type后對應(yīng)style生效
                type: 'line',
                // lineStyle設(shè)置直線指示器
                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設(shè)置十字準(zhǔn)星指示器
                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設(shè)置陰影指示器,areaStyle.size默認(rèn)為'auto'自動計算,可指定具體寬度
                shadowStyle:{
                    // 顏色
                    color: 'rgba(150,150,150,0.3)',
                    width: 'auto',
                    // 填充樣式,目前僅支持'default'(實填充)
                    type: 'default'
                }
            },*/
            // 文本樣式,默認(rèn)為白色字體
            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,
            // 布局方式,默認(rèn)為水平布局,可選為:'horizontal' | 'vertical'
            orient: 'vertical',
            // 水平安放位置,默認(rèn)為全圖居中,可選為:'center' | 'left' | 'right' | {number}(x坐標(biāo),單位px)
            x: 'left',
            // 垂直安放位置,默認(rèn)為全圖頂端,可選為:'top' | 'bottom' | 'center' | {number}(y坐標(biāo),單位px)
            y: 'top',
            // 圖例背景顏色,默認(rèn)透明
            backgroundColor: 'rgba(0,0,0,0.1)',
            // 圖例邊框顏色
            borderColor: '#0066FF',
            // 圖例邊框線寬,單位px,默認(rèn)為0(無邊框)
            borderWidth: 1,
            // 圖例內(nèi)邊距,單位px,默認(rèn)各方向內(nèi)邊距為5,接受數(shù)組分別設(shè)定上右下左邊距,同css
            padding: [15,15,15,15],
            // 各個item之間的間隔,單位px,默認(rèn)為10,橫向布局時為水平間隔,縱向布局時為縱向間隔
            itemGap: 20,
            // 圖例圖形寬度
            itemWidth: 30,
            // 圖例圖形高度
            itemHeight: 20,
            // 默認(rèn)只設(shè)定了圖例文字顏色,更個性化的是,要指定文字顏色跟隨圖例,可設(shè)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}',函數(shù)回調(diào)參數(shù)為name
            /*formatter: function(data){
                console.log(data);
                return data[1]+":"+data[5].count;
            },*/
            // 選擇模式,默認(rèn)開啟圖例開關(guān),可選single,multiple
            selectedMode: true,
            // 配置默認(rèn)選中狀態(tài),可配合LEGEND.SELECTED事件做動態(tài)數(shù)據(jù)載入
            /*selected: {
                '降水量' : false
            },*/
            // 圖例內(nèi)容數(shù)組
            data:[{name:'iphone3'/*,textStyle:{Object},icon:{string}*/},
                  {name:'iphone4'/*,textStyle:{Object},icon:{string}*/},
                  {name:'iphone5'/*,textStyle:{Object},icon:{string}*/}]
        },
        // 值域選擇,每個圖表最多僅有一個值域控件
        dataRange: {
            // 顯示策略,可選為:true(顯示) | false(隱藏)
            show: true,
            // 布局方式,默認(rèn)為垂直布局,可選為:'horizontal' | 'vertical'
            orient: 'horizontal',
            // 水平安放位置,默認(rèn)為全圖左對齊,可選為:'center' | 'left' | 'right' | {number}(x坐標(biāo),單位px)
            x: 'left',
            // 垂直安放位置,默認(rèn)為全圖底部,可選為:'top' | 'bottom' | 'center' | {number}(y坐標(biāo),單位px)
            y: 'bottom',
            // 值域控件背景顏色,默認(rèn)透明
            backgroundColor: 'rgba(0,0,0,0.1)',
            // 圖例邊框顏色
            borderColor: '#0066FF',
            // 圖例邊框線寬,單位px,默認(rèn)為0(無邊框)
            borderWidth: 1,
            // 圖例內(nèi)邊距,單位px,默認(rèn)各方向內(nèi)邊距為5,接受數(shù)組分別設(shè)定上右下左邊距,同css
            padding: [15,15,15,15],
            // 各個item之間的間隔,單位px,默認(rèn)為10,橫向布局時為水平間隔,縱向布局時為縱向間隔
            itemGap: 20,
            // 圖例圖形寬度
            itemWidth: 30,
            // 圖例圖形高度
            itemHeight: 20,
            // 指定的最小值,eg: 0,默認(rèn)無,必須參數(shù),唯有指定了splitList時可缺省min。
            min: 0,
            // 指定的最大值,eg: 100,默認(rèn)無,必須參數(shù),唯有指定了splitList時可缺省max
            max: 2500,
            // 小數(shù)精度,默認(rèn)為0,無小數(shù)點,當(dāng) min ~ max 間在當(dāng)前精度下無法整除splitNumber份時,精度會自動提高以滿足均分,不支持不等劃分
            precision: 1,
            // 分割段數(shù),默認(rèn)為5,為0時為線性漸變,calculable為true是默認(rèn)均分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}
            ],*/
            // 用于設(shè)置dataRange的初始選中范圍。calculable為true時有效。
            range: {start: 0, end: 100},
            // 選擇模式,默認(rèn)開啟值域開關(guān),可選single,multiple
            selectedMode: 'multiple',
            // 是否啟用值域漫游,啟用后無視splitNumber和splitList,值域顯示為線性漸變
            calculable : true,
            // 是否啟用地圖hover時的聯(lián)動響應(yīng)
            hoverLink: true,
            // 值域漫游是否實時顯示,在不支持Canvas的瀏覽器中該值自動強制置為false
            realtime:true,
            // 值域顏色標(biāo)識,顏色數(shù)組長度必須>=2,顏色代表從數(shù)值高到低的變化,即顏色數(shù)組低位代表數(shù)值高的顏色標(biāo)識 ,支持Alpha通道上的變化(rgba)
            color:['#e42515','#fad3d0'],
            // 內(nèi)容格式器:{string}(Template) | {Function},模板變量為'{value}'和'{value2}',代表數(shù)值起始值和結(jié)束值,函數(shù)參數(shù)兩個,含義同模板變量,當(dāng)calculable為true時模板變量僅有'{value}'
            /*formatter : function(v, v2){
                if (v2 < 1000) { return '低于' + v2;}
                else if (v > 1000) { return '高于' + v;}
                else { return '中'; }
            },*/
            //     值域文字顯示,splitNumber生效時默認(rèn)以計算所得數(shù)值作為值域文字顯示,可指定長度為2的文本數(shù)組顯示簡介的值域文本,如['高', '低'],'\n'指定換行
            text:['高','低'],
            // 默認(rèn)只設(shè)定了值域控件文字顏色
            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,
            // 布局方式,默認(rèn)為水平布局,可選為:'horizontal' | 'vertical'
            orient : 'horizontal',
            // 水平安放位置,默認(rèn)為全圖居中,可選為:'center' | 'left' | 'right' | {number}(x坐標(biāo),單位px)
            x: 'right',
            // 垂直安放位置,默認(rèn)為全圖頂端,可選為:'top' | 'bottom' | 'center' | {number}(y坐標(biāo),單位px)
            y: 'bottom',
            // 工具箱背景顏色,默認(rèn)透明
            backgroundColor: 'rgba(218,112,214,0.6)',
            // 工具箱邊框顏色
            borderColor: '#0066FF',
            // 工具箱邊框線寬,單位px,默認(rèn)為0(無邊框)
            borderWidth: 1,
            // 工具箱內(nèi)邊距,單位px,默認(rèn)各方向內(nèi)邊距為5,接受數(shù)組分別設(shè)定上右下左邊距,同css
            padding: [15,15,15,15],
            // 各個item之間的間隔,單位px,默認(rèn)為10,橫向布局時為水平間隔,縱向布局時為縱向間隔
            itemGap: 20,
            // 工具箱icon大小,單位(px)
            itemSize: 20,
            // 工具箱icon顏色序列,循環(huán)使用,同時支持在具體feature內(nèi)指定color
            color:['#1e90ff','#22bb22','#4b0082','#d2691e'],
            // 禁用顏色定義
            disableColor:'#fff',
            // 生效顏色定義
            effectiveColor:'red',
            // 是否顯示工具箱文字提示,默認(rèn)啟用
            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見下,工具箱自定義功能回調(diào)處理
            feature : {
                // 輔助線標(biāo)志,分別是啟用,刪除上一條,刪除全部,可設(shè)置更多屬性
                mark : {
                    show : true,
                    title : {
                        mark : '輔助線開關(guān)',
                        markUndo : '刪除輔助線',
                        markClear : '清空輔助線'
                    },
                    lineStyle : {
                        width : 2,
                        color : '#1e90ff',
                        type : 'dashed'
                    }
                },
                // 框選區(qū)域縮放,自動與存在的dataZoom控件同步,上圖icon左數(shù)4/5,分別是啟用,縮放后退
                dataZoom : {
                    show : true,
                    title : {
                        dataZoom : '區(qū)域縮放',
                        dataZoomReset : '區(qū)域縮放后退'
                    }
                },
                // 數(shù)據(jù)視圖,上圖icon左數(shù)6,打開數(shù)據(jù)視圖,可設(shè)置更多屬性
                dataView : {
                    show : true,
                    title : '數(shù)據(jù)視圖',
                    readOnly: false,
                    lang: ['數(shù)據(jù)視圖', '關(guān)閉', '刷新']
                },
                // 動態(tài)類型切換,支持直角系下的折線圖、柱狀圖、堆積、平鋪轉(zhuǎn)換,上圖icon左數(shù)6~14,分別是切換為堆積,切換為平鋪,切換折線圖,切換柱形圖,切換為力導(dǎo)向布局圖,切換為和弦圖,切換為餅圖,切換為漏斗圖
                magicType: {
                    show : true,
                    title : {
                        line : '折線圖切換',
                        bar : '柱形圖切換',
                        stack : '堆積',
                        tiled : '平鋪',
                        force: '力導(dǎo)向布局圖切換',
                        chord: '和弦圖切換',
                        pie: '餅圖切換',
                        funnel: '漏斗圖切換'
                    },
                    option: {
                        // line: {...},
                        // bar: {...},
                        // stack: {...},
                        // tiled: {...},
                        // force: {...},
                        // chord: {...},
                        // pie: {...},
                        // funnel: {...}
                    },
                    type : []
                },
                // 還原,復(fù)位原始圖表
                restore : {
                    show : true,
                    title : '還原'
                },
                // 保存圖片(IE8-不支持),可設(shè)置更多屬性
                saveAsImage : {
                    show : true,
                    title : '保存為圖片',
                    type : 'png',
                    lang : ['點擊保存']
                }
            }
        },
        // 縮放漫游組件,僅對地圖有效
        roamController: {
            // 顯示策略,可選為:true(顯示) | false(隱藏)
            show: true,
            // 水平安放位置,默認(rèn)為左側(cè),可選為:'center' | 'left' | 'right' | {number}(x坐標(biāo),單位px)
            x: 'right',
            // 垂直安放位置,默認(rèn)為全圖頂端,可選為:'top' | 'bottom' | 'center' | {number}(y坐標(biāo),單位px)
            y: 'top',
            // 指定寬度,決定4向漫游圓盤大小,可指定 {number}(寬度,單位px)
            width: 120,
            // 指定高度,縮放控制鍵默認(rèn)會在指定高度的最下方最大化顯示,可指定 {number}(高度,單位px)
            height:200,
            // 縮放漫游組件背景顏色,默認(rèn)透明
            backgroundColor:'rgba(0,0,0,0.1)',
            // 縮放漫游組件邊框顏色
            borderColor: '#1e90ff',
            // 縮放漫游組件邊框線寬,單位px,默認(rèn)為0(無邊框)
            borderWidth: 1,
            // 縮放漫游組件內(nèi)邊距,單位px,默認(rèn)各方向內(nèi)邊距為5,接受數(shù)組分別設(shè)定上右下左邊距,同css
            padding: [15,15,15,15],
            // 漫游組件文字填充顏色
            fillerColor:'#000',
            // 控制手柄主體顏色
            handleColor:'#e3655a',
            // 4向漫游移動步伐,單位px
            step:10,
            // 必須,指定漫游組件可控地圖類型
            mapTypeControl: {
                'china': true
            }
        },
        series : [
            {
                // 圖表類型,必要參數(shù)!如為空或不支持類型,則該系列數(shù)據(jù)不被顯示??蛇x為: 
                // 'line'(折線圖) | 'bar'(柱狀圖) | 'scatter'(散點圖) | 'k'(K線圖) 
                // 'pie'(餅圖) | 'radar'(雷達圖) | 'chord'(和弦圖) | 'force'(力導(dǎo)向布局圖) | 'map'(地圖)
                type: 'map',
                // 系列名稱
                name: 'iphone3',
                // 地圖類型,支持world,china及全國34個省市自治區(qū)
                mapType: 'china',
                // 是否開啟滾輪縮放和拖拽漫游,默認(rèn)為false(關(guān)閉),其他有效輸入為true(開啟),'scale'(僅開啟滾輪縮放),'move'(僅開啟拖拽漫游)
                roam: false,
                // 圖形樣式
                itemStyle:{
                    // 默認(rèn)狀態(tài)下地圖的文字
                    normal:{label:{show:true}},
                    // 鼠標(biāo)放到地圖上面顯示文字
                    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: '內(nèi)蒙古',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: '內(nèi)蒙古',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);
});

});</pre>

原文地址:http://blog.csdn.net/xieweikun7/article/details/52766676

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容