地图

一:官网上的示例

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.效果

  

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值