echarts中国地图

<div id="china-map"></div>
#china-map {width:1000px; height: 1000px;margin: auto;}
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
	<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>

var myChart = echarts.init(document.getElementById('china-map'));
      var option = {
        title : {
          text: '',
          subtext: '',
          x:'center'
        },
        tooltip : {//提示框组件。
          trigger: 'item',
    			formatter: (params) => {
            var res = params.name+'<br/>';
            var myseries = option.series;
            for (var i = 0; i < myseries.length; i++) {
              for(var j = 0; j < myseries[i].data.length; j++){
                if(myseries[i].data[j].name === params.name){
                    res += myseries[i].name +' : '+ myseries[i].data[j].value+'</br>';
                }
              }
            }
            return res;
          },
          backgroundColor: '#a18568', //提示框的背景色
        },
        roamController: {//控制地图的上下左右放大缩小 图上没有显示
          show: true,
          x: 'right',
          mapTypeControl: {
            'china': true
          }
        },
        series : [
          {
  	        name: '高铁贵宾休息室',
            type: 'map',
            mapType: 'china',
            roam: false,//是否开启鼠标缩放和平移漫游
            itemStyle: {//地图区域的多边形 图形样式
              // normal: {//是图形在默认状态下的样式
              //   label: {
              //     show: true,//是否显示标签
              //     textStyle: {
              //         color: "rgb(249, 249, 249)"
              //     }
              //   }
              // },
              areaColor: 'rgb(146, 184, 233)', //地图区域的背景色
              emphasis:{ //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                label: {show: false}
              },
            },
            top:"3%",//组件距离容器的距离
            data:[
              {name: '北京',value: '111'},
              {name: '天津',value: '222'},
              {name: '上海',value: Math.round(Math.random()*200)},
              {name: '重庆',value: Math.round(Math.random()*2000)},
              {name: '河北',value: 0},
              {name: '河南',value: Math.round(Math.random()*2000)},
              {name: '云南',value: 5},
              {name: '辽宁',value: 305},
              {name: '黑龙江',value: Math.round(Math.random()*2000)},
              {name: '湖南',value: 200},
              {name: '安徽',value: Math.round(Math.random()*2000)},
              {name: '山东',value: Math.round(Math.random()*2000)},
              {name: '新疆',value: Math.round(Math.random()*2000)},
              {name: '江苏',value: Math.round(Math.random()*2000)},
              {name: '浙江',value: Math.round(Math.random()*2000)},
              {name: '江西',value: Math.round(Math.random()*2000)},
              {name: '湖北',value: Math.round(Math.random()*2000)},
              {name: '广西',value: Math.round(Math.random()*2000)},
              {name: '甘肃',value: Math.round(Math.random()*2000)},
              {name: '山西',value: Math.round(Math.random()*2000)},
              {name: '内蒙古',value: Math.round(Math.random()*2000)},
              {name: '陕西',value: Math.round(Math.random()*2000)},
              {name: '吉林',value: Math.round(Math.random()*2000)},
              {name: '福建',value: Math.round(Math.random()*2000)},
              {name: '贵州',value: Math.round(Math.random()*2000)},
              {name: '广东',value: Math.round(Math.random()*2000)},
              {name: '青海',value: Math.round(Math.random()*2000)},
              {name: '西藏',value: Math.round(Math.random()*2000)},
              {name: '四川',value: Math.round(Math.random()*2000)},
              {name: '宁夏',value: Math.round(Math.random()*2000)},
              {name: '海南',value: Math.round(Math.random()*2000)},
              {name: '台湾',value: Math.round(Math.random()*2000)},
              {name: '香港',value: Math.round(Math.random()*2000)},
              {name: '澳门',value: Math.round(Math.random()*2000)},
              {name: '南海诸岛',value: Math.round(Math.random()*2000)}
            ]
          },
          {
  	        name: '机场贵宾休息室',
            type: 'map',
            mapType: 'china',
            roam: false,//是否开启鼠标缩放和平移漫游
            itemStyle:{//地图区域的多边形 图形样式
              normal:{//是图形在默认状态下的样式
                label:{
                  show:true,//是否显示标签
                  textStyle: {
                      color: "rgb(249, 249, 249)"
                  }
                }
              },
              emphasis:{//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                  label:{show:true}
              }
            },
            top:"3%",//组件距离容器的距离
            data:[
              {name: '北京',value: '1'},
              {name: '天津',value: '2'},
              {name: '上海',value: Math.round(Math.random()*2000)},
              {name: '重庆',value: Math.round(Math.random()*2000)},
              {name: '河北',value: 0},
              {name: '河南',value: Math.round(Math.random()*2000)},
              {name: '云南',value: 5},
              {name: '辽宁',value: 305},
              {name: '黑龙江',value: Math.round(Math.random()*2000)},
              {name: '湖南',value: 200},
              {name: '安徽',value: Math.round(Math.random()*2000)},
              {name: '山东',value: Math.round(Math.random()*2000)},
              {name: '新疆',value: Math.round(Math.random()*2000)},
              {name: '江苏',value: Math.round(Math.random()*2000)},
              {name: '浙江',value: Math.round(Math.random()*2000)},
              {name: '江西',value: Math.round(Math.random()*2000)},
              {name: '湖北',value: Math.round(Math.random()*2000)},
              {name: '广西',value: Math.round(Math.random()*2000)},
              {name: '甘肃',value: Math.round(Math.random()*2000)},
              {name: '山西',value: Math.round(Math.random()*2000)},
              {name: '内蒙古',value: Math.round(Math.random()*2000)},
              {name: '陕西',value: Math.round(Math.random()*2000)},
              {name: '吉林',value: Math.round(Math.random()*2000)},
              {name: '福建',value: Math.round(Math.random()*2000)},
              {name: '贵州',value: Math.round(Math.random()*2000)},
              {name: '广东',value: Math.round(Math.random()*2000)},
              {name: '青海',value: Math.round(Math.random()*2000)},
              {name: '西藏',value: Math.round(Math.random()*2000)},
              {name: '四川',value: Math.round(Math.random()*2000)},
              {name: '宁夏',value: Math.round(Math.random()*2000)},
              {name: '海南',value: Math.round(Math.random()*2000)},
              {name: '台湾',value: Math.round(Math.random()*2000)},
              {name: '香港',value: Math.round(Math.random()*2000)},
              {name: '澳门',value: Math.round(Math.random()*2000)},
              {name: '南海诸岛',value: Math.round(Math.random()*2000)},
            ]
          }
        ]
    };
    myChart.setOption(option);
    myChart.on('mouseover', function (params) {
        // var dataIndex = params.dataIndex;
        console.log(params);
    });

如有不懂,下面评论!~~~知无不言!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值