一:官网上的示例
1.需要再下载中国地图
china.js
2.程序
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ECharts</title> 6 <script src="../echarts.min.js"></script> 7 <script src="../china.js"></script> 8 </head> 9 <body> 10 <div id="main" style="width: 900px;height:600px;"></div> 11 <script type="text/javascript"> 12 // 基于准备好的dom,初始化echarts实例 13 var myChart = echarts.init(document.getElementById('main')); 14 var geoCoordMap = { 15 '上海': [121.4648,31.2891], 16 '东莞': [113.8953,22.901], 17 '东营': [118.7073,37.5513], 18 '中山': [113.4229,22.478], 19 '临汾': [111.4783,36.1615], 20 '临沂': [118.3118,35.2936], 21 '丹东': [124.541,40.4242], 22 '丽水': [119.5642,28.1854], 23 '乌鲁木齐': [87.9236,43.5883], 24 '佛山': [112.8955,23.1097], 25 '保定': [115.0488,39.0948], 26 '兰州': [103.5901,36.3043], 27 '包头': [110.3467,41.4899], 28 '北京': [116.4551,40.2539], 29 '北海': [109.314,21.6211], 30 '南京': [118.8062,31.9208], 31 '南宁': [108.479,23.1152], 32 '南昌': [116.0046,28.6633], 33 '南通': [121.1023,32.1625], 34 '厦门': [118.1689,24.6478], 35 '台州': [121.1353,28.6688], 36 '合肥': [117.29,32.0581], 37 '呼和浩特': [111.4124,40.4901], 38 '咸阳': [108.4131,34.8706], 39 '哈尔滨': [127.9688,45.368], 40 '唐山': [118.4766,39.6826], 41 '嘉兴': [120.9155,30.6354], 42 '大同': [113.7854,39.8035], 43 '大连': [122.2229,39.4409], 44 '天津': [117.4219,39.4189], 45 '太原': [112.3352,37.9413], 46 '威海': [121.9482,37.1393], 47 '宁波': [121.5967,29.6466], 48 '宝鸡': [107.1826,34.3433], 49 '宿迁': [118.5535,33.7775], 50 '常州': [119.4543,31.5582], 51 '广州': [113.5107,23.2196], 52 '廊坊': [116.521,39.0509], 53 '延安': [109.1052,36.4252], 54 '张家口': [115.1477,40.8527], 55 '徐州': [117.5208,34.3268], 56 '德州': [116.6858,37.2107], 57 '惠州': [114.6204,23.1647], 58 '成都': [103.9526,30.7617], 59 '扬州': [119.4653,32.8162], 60 '承德': [117.5757,41.4075], 61 '拉萨': [91.1865,30.1465], 62 '无锡': [120.3442,31.5527], 63 '日照': [119.2786,35.5023], 64 '昆明': [102.9199,25.4663], 65 '杭州': [119.5313,29.8773], 66 '枣庄': [117.323,34.8926], 67 '柳州': [109.3799,24.9774], 68 '株洲': [113.5327,27.0319], 69 '武汉': [114.3896,30.6628], 70 '汕头': [117.1692,23.3405], 71 '江门': [112.6318,22.1484], 72 '沈阳': [123.1238,42.1216], 73 '沧州': [116.8286,38.2104], 74 '河源': [114.917,23.9722], 75 '泉州': [118.3228,25.1147], 76 '泰安': [117.0264,36.0516], 77 '泰州': [120.0586,32.5525], 78 '济南': [117.1582,36.8701], 79 '济宁': [116.8286,35.3375], 80 '海口': [110.3893,19.8516], 81 '淄博': [118.0371,36.6064], 82 '淮安': [118.927,33.4039], 83 '深圳': [114.5435,22.5439], 84 '清远': [112.9175,24.3292], 85 '温州': [120.498,27.8119], 86 '渭南': [109.7864,35.0299], 87 '湖州': [119.8608,30.7782], 88 '湘潭': [112.5439,27.7075], 89 '滨州': [117.8174,37.4963], 90 '潍坊': [119.0918,36.524], 91 '烟台': [120.7397,37.5128], 92 '玉溪': [101.9312,23.8898], 93 '珠海': [113.7305,22.1155], 94 '盐城': [120.2234,33.5577], 95 '盘锦': [121.9482,41.0449], 96 '石家庄': [114.4995,38.1006], 97 '福州': [119.4543,25.9222], 98 '秦皇岛': [119.2126,40.0232], 99 '绍兴': [120.564,29.7565], 100 '聊城': [115.9167,36.4032], 101 '肇庆': [112.1265,23.5822], 102 '舟山': [122.2559,30.2234], 103 '苏州': [120.6519,31.3989], 104 '莱芜': [117.6526,36.2714], 105 '菏泽': [115.6201,35.2057], 106 '营口': [122.4316,40.4297], 107 '葫芦岛': [120.1575,40.578], 108 '衡水': [115.8838,37.7161], 109 '衢州': [118.6853,28.8666], 110 '西宁': [101.4038,36.8207], 111 '西安': [109.1162,34.2004], 112 '贵阳': [106.6992,26.7682], 113 '连云港': [119.1248,34.552], 114 '邢台': [114.8071,37.2821], 115 '邯郸': [114.4775,36.535], 116 '郑州': [113.4668,34.6234], 117 '鄂尔多斯': [108.9734,39.2487], 118 '重庆': [107.7539,30.1904], 119 '金华': [120.0037,29.1028], 120 '铜川': [109.0393,35.1947], 121 '银川': [106.3586,38.1775], 122 '镇江': [119.4763,31.9702], 123 '长春': [125.8154,44.2584], 124 '长沙': [113.0823,28.2568], 125 '长治': [112.8625,36.4746], 126 '阳泉': [113.4778,38.0951], 127 '青岛': [120.4651,36.3373], 128 '韶关': [113.7964,24.7028] 129 }; 130 131 var BJData = [ 132 [{name:'北京'}, {name:'上海',value:95}], 133 [{name:'北京'}, {name:'广州',value:90}], 134 [{name:'北京'}, {name:'大连',value:80}], 135 [{name:'北京'}, {name:'南宁',value:70}], 136 [{name:'北京'}, {name:'南昌',value:60}], 137 [{name:'北京'}, {name:'拉萨',value:50}], 138 [{name:'北京'}, {name:'长春',value:40}], 139 [{name:'北京'}, {name:'包头',value:30}], 140 [{name:'北京'}, {name:'重庆',value:20}], 141 [{name:'北京'}, {name:'常州',value:10}] 142 ]; 143 144 var SHData = [ 145 [{name:'上海'},{name:'包头',value:95}], 146 [{name:'上海'},{name:'昆明',value:90}], 147 [{name:'上海'},{name:'广州',value:80}], 148 [{name:'上海'},{name:'郑州',value:70}], 149 [{name:'上海'},{name:'长春',value:60}], 150 [{name:'上海'},{name:'重庆',value:50}], 151 [{name:'上海'},{name:'长沙',value:40}], 152 [{name:'上海'},{name:'北京',value:30}], 153 [{name:'上海'},{name:'丹东',value:20}], 154 [{name:'上海'},{name:'大连',value:10}] 155 ]; 156 157 var GZData = [ 158 [{name:'广州'},{name:'福州',value:95}], 159 [{name:'广州'},{name:'太原',value:90}], 160 [{name:'广州'},{name:'长春',value:80}], 161 [{name:'广州'},{name:'重庆',value:70}], 162 [{name:'广州'},{name:'西安',value:60}], 163 [{name:'广州'},{name:'成都',value:50}], 164 [{name:'广州'},{name:'常州',value:40}], 165 [{name:'广州'},{name:'北京',value:30}], 166 [{name:'广州'},{name:'北海',value:20}], 167 [{name:'广州'},{name:'海口',value:10}] 168 ]; 169 170 var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'; 171 172 var convertData = function (data) { 173 var res = []; 174 for (var i = 0; i < data.length; i++) { 175 var dataItem = data[i]; 176 var fromCoord = geoCoordMap[dataItem[0].name]; 177 var toCoord = geoCoordMap[dataItem[1].name]; 178 if (fromCoord && toCoord) { 179 res.push([{ 180 name: dataItem[0].name, 181 coord: fromCoord 182 }, { 183 name: dataItem[1].name, 184 coord: toCoord 185 }]); 186 } 187 } 188 return res; 189 }; 190 191 var color = ['#a6c84c', '#ffa022', '#46bee9']; 192 var series = []; 193 [['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach(function (item, i) { 194 series.push({ 195 name: item[0] + ' Top10', 196 type: 'lines', 197 zlevel: 1, 198 effect: { 199 show: true, 200 period: 6, 201 trailLength: 0.7, 202 color: '#fff', 203 symbolSize: 3 204 }, 205 lineStyle: { 206 normal: { 207 color: color[i], 208 width: 0, 209 curveness: 0.2 210 } 211 }, 212 data: convertData(item[1]) 213 }, 214 { 215 name: item[0] + ' Top10', 216 type: 'lines', 217 zlevel: 2, 218 effect: { 219 show: true, 220 period: 6, 221 trailLength: 0, 222 symbol: planePath, 223 symbolSize: 15 224 }, 225 lineStyle: { 226 normal: { 227 color: color[i], 228 width: 1, 229 opacity: 0.4, 230 curveness: 0.2 231 } 232 }, 233 data: convertData(item[1]) 234 }, 235 { 236 name: item[0] + ' Top10', 237 type: 'effectScatter', 238 coordinateSystem: 'geo', 239 zlevel: 2, 240 rippleEffect: { 241 brushType: 'stroke' 242 }, 243 label: { 244 normal: { 245 show: true, 246 position: 'right', 247 formatter: '{b}' 248 } 249 }, 250 symbolSize: function (val) { 251 return val[2] / 8; 252 }, 253 itemStyle: { 254 normal: { 255 color: color[i] 256 } 257 }, 258 data: item[1].map(function (dataItem) { 259 return { 260 name: dataItem[1].name, 261 value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]) 262 }; 263 }) 264 }); 265 }); 266 267 option = { 268 backgroundColor: '#404a59', 269 title : { 270 text: '模拟迁徙', 271 subtext: '数据纯属虚构', 272 left: 'center', 273 textStyle : { 274 color: '#fff' 275 } 276 }, 277 tooltip : { 278 trigger: 'item' 279 }, 280 legend: { 281 orient: 'vertical', 282 top: 'bottom', 283 left: 'right', 284 data:['北京 Top10', '上海 Top10', '广州 Top10'], 285 textStyle: { 286 color: '#fff' 287 }, 288 selectedMode: 'single' 289 }, 290 geo: { 291 map: 'china', 292 label: { 293 emphasis: { 294 show: false 295 } 296 }, 297 roam: true, 298 itemStyle: { 299 normal: { 300 areaColor: '#323c48', 301 borderColor: '#404a59' 302 }, 303 emphasis: { 304 areaColor: '#2a333d' 305 } 306 } 307 }, 308 series: series 309 }; 310 // 使用刚指定的配置项和数据显示图表。 311 myChart.setOption(option); 312 </script> 313 </body> 314 </html>
3.效果
二:参考完成的示例
1.程序
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>ECharts Map 实例</title> 5 <script src="../echarts.min.js"></script> 6 <script src="../china.js"></script> 7 </head> 8 <body> 9 <div id="mainMap" style="height:600px;border:1px solid #ccc;padding:10px;width:900px;"></div> 10 <script type="text/javascript"> 11 var myChart = echarts.init(document.getElementById('mainMap')); 12 //定义图表option 13 var option = { 14 //标题,每个图表最多仅有一个标题控件,每个标题控件可设主副标题 15 title: { 16 //主标题文本,'\n'指定换行 17 text: 'iphone销量', 18 //副标题文本,'\n'指定换行 19 subtext: '纯属虚构', 20 //水平安放位置,默认为左侧,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px) 21 x: 'center', 22 //垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px) 23 y: 'top' 24 }, 25 //图例,每个图表最多仅有一个图例 26 tooltip : { 27 //触发类型,默认('item')数据触发,可选为:'item' | 'axis' 28 trigger: 'item' 29 }, 30 //图例,每个图表最多仅有一个图例 31 legend: { 32 //布局方式,默认为水平布局(即horizontal),可选为:'horizontal' | 'vertical' 33 orient: 'vertical', 34 //水平安放位置,默认为全图居中,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px) 35 x: 'left', 36 //垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px) 37 y: 'top', 38 //legend的data: 用于设置图例,data内的字符串数组需要与sereis数组内每一个series的name值对应 39 data:['iphone3','iphone4','iphone5'] 40 }, 41 //值域选择,每个图表最多仅有一个值域控件 42 dataRange: { 43 //布局方式,默认为垂直布局('vertical'),可选为:'horizontal' | 'vertical' 44 orient: 'vertical', 45 //指定的最小值,eg: 0,默认无(null),必须参数 46 min: 0, 47 //指定的最大值,eg: 100,默认无(null),必须参数 48 max: 2500, 49 //水平安放位置,默认为全图左对齐('left'),可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px) 50 x: 'left', 51 //垂直安放位置,默认为全图底部('bottom'),可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px) 52 y: 'bottom', 53 //值域文字显示,默认为数值文本 54 text: ['高','低'], 55 //是否启用值域漫游,默认为关闭(false),启用后无视splitNumber,值域显示为线性渐变 56 calculable: true 57 }, 58 //工具箱,每个图表最多仅有一个工具箱 59 toolbox: { 60 //显示策略,可选为:true(显示) | false(隐藏),默认值为false 61 show: true, 62 //布局方式,默认为水平布局('horizontal'),可选为:'horizontal' | 'vertical' 63 orient: 'vertical', 64 //水平安放位置,默认为全图右对齐('right'),可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px) 65 x: 'right', 66 //垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px) 67 y: 'center', 68 //启用功能,目前支持feature,工具箱自定义功能回调处理 69 feature: { 70 //辅助线标志 71 mark: {show: true}, 72 //数据视图,打开数据视图,可设置更多属性,readOnly 默认数据视图为只读(即值为true),可指定readOnly为false打开编辑功能 73 dataView: {show: true, readOnly: false}, 74 //restore,还原,复位原始图表 75 restore: {show: true}, 76 //saveAsImage,保存图片(IE8-不支持),图片类型默认为'png' 77 saveAsImage: {show: true} 78 } 79 }, 80 //缩放漫游组件,仅对地图有效 81 roamController: { 82 //显示策略,默认为显示(true),可选为:true(显示) | false(隐藏)。 83 show: true, 84 //水平安放位置,默认为左侧('letf'),可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px) 85 x: 'right', 86 //垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px) 87 y: 'top', 88 //必须,默认无(null),指定漫游组件可控地图类型,如:{ china: true } 89 mapTypeControl: { 90 //指定地图类型 91 'china': true 92 } 93 }, 94 //series(地图),驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据 95 series : [ 96 { 97 //系列名称,如果启用legend,该值将被legend.data索引相关 98 name: 'iphone3', 99 //图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示 100 type: 'map', 101 //地图类型,支持world,china及全国34个省市自治区。省市自治区的mapType直接使用简体中文:如'广东' 102 mapType: 'china', 103 //是否开启滚轮缩放和拖拽漫游,默认为false(关闭),其他有效输入为true(开启),'scale'(仅开启滚轮缩放),'move'(仅开启拖拽漫游) 104 roam: 'scale', 105 //图形样式,可设置图表内图形的默认样式和强调样式(悬浮时样式) 106 itemStyle:{ 107 //正常时的样式 108 normal:{ 109 //边框线宽,单位px 110 borderWidth: 2, 111 //边框颜色 112 borderColor: 'lightgreen', 113 //标签,饼图默认显示在外部,离饼图距离由labelLine.length决定,地图标签不可指定位置 114 label: {show:true} 115 }, 116 //鼠标经过时的样式 117 emphasis: { 118 //边框线宽,单位px 119 borderWidth:2, 120 //边框颜色 121 borderColor:'#fff', 122 //鼠标经过时区域的颜色 123 color: '#32cd32', 124 //标签 125 label: { 126 show: true, 127 //文本样式 128 textStyle: { 129 //文本字体颜色 130 color: '#fff' 131 } 132 } 133 } 134 }, 135 //当图表类型为地图时,需要说明每部分数据对应的省份,可设置选中状态,如 :{name: '北京',value: 1234,selected: true}, 136 data:[ 137 {name: '北京',value: Math.round(Math.random()*1000)}, 138 {name: '天津',value: Math.round(Math.random()*1000)}, 139 {name: '上海',value: Math.round(Math.random()*1000)}, 140 {name: '重庆',value: Math.round(Math.random()*1000)}, 141 {name: '河北',value: Math.round(Math.random()*1000)}, 142 {name: '河南',value: Math.round(Math.random()*1000)}, 143 {name: '云南',value: Math.round(Math.random()*1000)}, 144 {name: '辽宁',value: Math.round(Math.random()*1000)}, 145 {name: '黑龙江',value: Math.round(Math.random()*1000)}, 146 {name: '湖南',value: Math.round(Math.random()*1000)}, 147 {name: '安徽',value: Math.round(Math.random()*1000)}, 148 {name: '山东',value: Math.round(Math.random()*1000)}, 149 {name: '新疆',value: Math.round(Math.random()*1000)}, 150 {name: '江苏',value: Math.round(Math.random()*1000)}, 151 {name: '浙江',value: Math.round(Math.random()*1000)}, 152 {name: '江西',value: Math.round(Math.random()*1000)}, 153 {name: '湖北',value: Math.round(Math.random()*1000)}, 154 {name: '广西',value: Math.round(Math.random()*1000)}, 155 {name: '甘肃',value: Math.round(Math.random()*1000)}, 156 {name: '山西',value: Math.round(Math.random()*1000)}, 157 {name: '内蒙古',value: Math.round(Math.random()*1000)}, 158 {name: '陕西',value: Math.round(Math.random()*1000)}, 159 {name: '吉林',value: Math.round(Math.random()*1000)}, 160 {name: '福建',value: Math.round(Math.random()*1000)}, 161 {name: '贵州',value: Math.round(Math.random()*1000)}, 162 {name: '广东',value: Math.round(Math.random()*1000)}, 163 {name: '青海',value: Math.round(Math.random()*1000)}, 164 {name: '西藏',value: Math.round(Math.random()*1000)}, 165 {name: '四川',value: Math.round(Math.random()*1000)}, 166 {name: '宁夏',value: Math.round(Math.random()*1000)}, 167 {name: '海南',value: Math.round(Math.random()*1000)}, 168 {name: '台湾',value: Math.round(Math.random()*1000)}, 169 {name: '香港',value: Math.round(Math.random()*1000)}, 170 {name: '澳门',value: Math.round(Math.random()*1000)} 171 ], 172 }, 173 { 174 //系列名称,如果启用legend,该值将被legend.data索引相关 175 name: 'iphone4', 176 //图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示 177 type: 'map', 178 //地图类型,支持world,china及全国34个省市自治区。省市自治区的mapType直接使用简体中文:如'广东' 179 mapType: 'china', 180 //是否开启滚轮缩放和拖拽漫游,默认为false(关闭),其他有效输入为true(开启),'scale'(仅开启滚轮缩放),'move'(仅开启拖拽漫游) 181 roam: 'scale', 182 //图形样式,可设置图表内图形的默认样式和强调样式(悬浮时样式) 183 itemStyle:{ 184 //正常时的样式 185 normal:{ 186 //边框线宽,单位px 187 borderWidth: 2, 188 //边框颜色 189 borderColor: 'lightgreen', 190 //标签,饼图默认显示在外部,离饼图距离由labelLine.length决定,地图标签不可指定位置 191 label: {show:true} 192 }, 193 //鼠标经过时的样式 194 emphasis: { 195 //边框线宽,单位px 196 borderWidth:2, 197 //边框颜色 198 borderColor:'#fff', 199 //鼠标经过时区域的颜色 200 color: '#32cd32', 201 //标签 202 label: { 203 show: true, 204 //文本样式 205 textStyle: { 206 //文本字体颜色 207 color: '#fff' 208 } 209 } 210 } 211 }, 212 data:[ 213 {name: '北京',value: Math.round(Math.random()*1000)}, 214 {name: '天津',value: Math.round(Math.random()*1000)}, 215 {name: '上海',value: Math.round(Math.random()*1000)}, 216 {name: '重庆',value: Math.round(Math.random()*1000)}, 217 {name: '河北',value: Math.round(Math.random()*1000)}, 218 {name: '安徽',value: Math.round(Math.random()*1000)}, 219 {name: '新疆',value: Math.round(Math.random()*1000)}, 220 {name: '浙江',value: Math.round(Math.random()*1000)}, 221 {name: '江西',value: Math.round(Math.random()*1000)}, 222 {name: '山西',value: Math.round(Math.random()*1000)}, 223 {name: '内蒙古',value: Math.round(Math.random()*1000)}, 224 {name: '吉林',value: Math.round(Math.random()*1000)}, 225 {name: '福建',value: Math.round(Math.random()*1000)}, 226 {name: '广东',value: Math.round(Math.random()*1000)}, 227 {name: '西藏',value: Math.round(Math.random()*1000)}, 228 {name: '四川',value: Math.round(Math.random()*1000)}, 229 {name: '宁夏',value: Math.round(Math.random()*1000)}, 230 {name: '香港',value: Math.round(Math.random()*1000)}, 231 {name: '澳门',value: Math.round(Math.random()*1000)} 232 ] 233 }, 234 { 235 //系列名称,如果启用legend,该值将被legend.data索引相关 236 name: 'iphone5', 237 //图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示 238 type: 'map', 239 //地图类型,支持world,china及全国34个省市自治区。省市自治区的mapType直接使用简体中文:如'广东' 240 mapType: 'china', 241 //是否开启滚轮缩放和拖拽漫游,默认为false(关闭),其他有效输入为true(开启),'scale'(仅开启滚轮缩放),'move'(仅开启拖拽漫游) 242 roam: 'scale', 243 //图形样式,可设置图表内图形的默认样式和强调样式(悬浮时样式) 244 itemStyle:{ 245 //正常时的样式 246 normal:{ 247 //边框线宽,单位px 248 borderWidth: 2, 249 //边框颜色 250 borderColor: 'lightgreen', 251 //标签,饼图默认显示在外部,离饼图距离由labelLine.length决定,地图标签不可指定位置 252 label: {show:true} 253 }, 254 //鼠标经过时的样式 255 emphasis: { 256 //边框线宽,单位px 257 borderWidth:2, 258 //边框颜色 259 borderColor:'#fff', 260 //鼠标经过时区域的颜色 261 color: '#32cd32', 262 //标签 263 label: { 264 show: true, 265 //文本样式 266 textStyle: { 267 //文本字体颜色 268 color: '#fff' 269 } 270 } 271 } 272 }, 273 data:[ 274 {name: '北京',value: Math.round(Math.random()*1000)}, 275 {name: '天津',value: Math.round(Math.random()*1000)}, 276 {name: '上海',value: Math.round(Math.random()*1000)}, 277 {name: '广东',value: Math.round(Math.random()*1000)}, 278 {name: '台湾',value: Math.round(Math.random()*1000)}, 279 {name: '香港',value: Math.round(Math.random()*1000)}, 280 {name: '澳门',value: Math.round(Math.random()*1000)} 281 ] 282 } 283 ] 284 } 285 //为echarts对象加载数据 286 myChart.setOption(option); 287 </script> 288 </body> 289 </html>
2.效果