Echarts中国地图 

<!DOCTYPE html>
<html style="height:100%;">
<head>
    <meta charset="utf-8">
    <!-- JS下载路径: https://files-cdn.cnblogs.com/files/blogs/716958/echarts.zip   -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/echarts.js"></script>
   <script type="text/javascript" src="js/china.js"></script>
</head>
<body style="height:100%;">
    <div id="main" style="width:100%;height:100%;"></div>
    <script>
   function randomData() {
      return Math.round(Math.random()*50);
   }
 
   let mydata = [
      {name: '北京',value: randomData() },{name: '天津',value: randomData() },
      {name: '上海',value: randomData() },{name: '重庆',value: randomData() },
      {name: '河北',value: randomData() },{name: '河南',value: randomData() },
      {name: '云南',value: randomData() },{name: '辽宁',value: randomData() },
      {name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },
      {name: '安徽',value: randomData() },{name: '山东',value: randomData() },
      {name: '新疆',value: randomData() },{name: '江苏',value: randomData() },
      {name: '浙江',value: randomData() },{name: '江西',value: randomData() },
      {name: '湖北',value: randomData() },{name: '广西',value: randomData() },
      {name: '甘肃',value: randomData() },{name: '山西',value: randomData() },
      {name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },
      {name: '吉林',value: randomData() },{name: '福建',value: randomData() },
      {name: '贵州',value: randomData() },{name: '广东',value: randomData() },
      {name: '青海',value: randomData() },{name: '西藏',value: randomData() },
      {name: '四川',value: randomData() },{name: '宁夏',value: randomData() },
      {name: '海南',value: randomData() },{name: '台湾',value: randomData() },
      {name: '香港',value: randomData() },{name: '澳门',value: randomData() }
   ];

    let option = {
        title : {
            text: "中国",
            x:'left',
            textStyle:{
                color:'rgb(94, 176, 255)'
            }
        },
        tooltip: {},
        visualMap: { // 颜色渐变条
            show: false,
            min: 0,
            max: 40,
            left: 'left', // 颜色渐变条 水平位置
            top: 'bottom', // 颜色渐变条 垂直位置
            text: ['High','Low'],
            seriesIndex: [1],
            inRange: {
                color: ['#7acffa', '#f5f649','#ec441f']
            },
            calculable : true,
            textStyle:{
                color:'white'
            }
        },
        geo: {
            map: 'china',
            roam: true,
            zoom: 1, // 当前视角的缩放比例
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: 'rgba(0,0,0,0.4)'
                    }
                }
            },
            itemStyle: {
                normal:{
                    borderColor: 'rgba(0, 0, 0, 0.2)'
                },
                emphasis:{
                    areaColor: null,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            regions: [ // 隐藏 南海诸岛，但鼠标移到该区域仍有显示
                {
                    name: "南海诸岛",
                    label:{ show : false },
                    itemStyle: { opacity: 0 }
                }
            ]
        },
        series : [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 20,
                symbol: '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',
                symbolRotate: 35,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#F06C00'
                    }
                }
            },
            {
                name: '温度°C',
                type: 'map',
                geoIndex: 0,
                // tooltip: {show: false},
                data:mydata
            }
        ]
    };
   var chart = echarts.init(document.getElementById('main'));
    chart.setOption(option);
    </script>
</body>
</html>
posted @ 2021-12-14 17:16  迷路小孩  阅读(56)  评论(0)    收藏  举报