echarts 实现中国地图

最新推荐文章于 2024-09-10 18:30:47 发布

h**#

最新推荐文章于 2024-09-10 18:30:47 发布

阅读量426

点赞数 1

分类专栏： echarts 文章标签： echarts javascript html

本文链接：https://blog.csdn.net/Hruibin/article/details/120675895

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

echarts可以通过 npm install echarts 下载
也可以去克隆下载，地址：https://github.com/Luna829/incubator-echarts/blob/master/dist/echarts.js

<html>
<head>
    <title>china地图</title>
    <style>
        #app {
            width: 500px;
            height: 500px;
            margin: 0 auto;
        }
        .map-container {
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="map-container" id="myEchart"></div>
    </div>
</body>
</html>

可以在github上克隆下来:https://github.com/Luna829/incubator-echarts/blob/master/map/js/china.js

<script src="./node_modules/echarts/dist/echarts.js"></script>
<script src="./jquery.js"></script>
<script>
    function getFetch(url) {
      return $.ajax({
           type:"GET",
           url:url,
           data:{},
           dataType:"json",
           success:function(result){
             return result
           }
       })
    }
    function randomData() {  
     return Math.round(Math.random()*500);  
} 
    var myEchart = document.getElementById("myEchart");
    var mychart = echarts.init(myEchart);

    let option = {
        tooltip: {
            show: false
        },
        // visualMap: {           //地图图例
        //   show:true,
        //   left: 26,
        //   bottom: 40,
        //   showLabel:true,
        //   pieces: [        //根据数据大小，各省显示不同颜色
        //     {
        //       gte: 100,
        //       label: ">= 1000",
        //       color: "#1f307b"
        //     },
        //     {
        //       gte: 500,
        //       lt: 999,
        //       label: "500 - 999",
        //       color: "#3c57ce"
        //     },
        //     {
        //       gte: 100,
        //       lt:499,
        //       label: "100 - 499",
        //       color: "#6f83db"
        //     },
        //     {
        //       gte: 10,
        //       lt: 99,
        //       label: "10 - 99",
        //       color: "#9face7"
        //     },
        //     {
        //       lt:10,
        //       label:'<10',
        //       color: "#bcc5ee"
        //     }
        //   ]
        // },
        geo: {
            map: "china",
            roam: false,// 一定要关闭拖拽
            zoom: 1.23,
            // center: [105, 36], // 调整地图位置
            // label: {
            //     align: 'center',
            //     position:[30,30],
            //     normal: {
            //         show: false, //关闭省份名展示
            //         fontSize: "10",
            //         color: "red"
            //     },
            //     emphasis: {
            //         show: false,
            //         fontSize: "10",
            //         color: "red"
            //     }
            // },
            itemStyle: {
                normal: {
                    areaColor: "#000",
                    borderColor: "#000",
                    borderWidth: 1, //设置外层边框
                    shadowBlur: 1,
                    shadowOffsetY: 0,
                    shadowOffsetX: 0,
                    shadowColor: "#000",
                },
                emphasis: {
                    areaColor: "#000",
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 1,
                    borderWidth: 1,
                    shadowColor: "#000"
                }
            }
        },
        series: [
            {
                type: "map",
                map: "china",
                roam: false,
                zoom: 1.23,
                // center: [105, 36],
                showLegendSymbol: false, // 存在legend时显示
               
                label: { //文字配置
                    y: 130,
                    normal: {
                        show: true, //关闭省份名展示
                        fontSize: "10",
                        color: "#fff",
                    },
                    emphasis: {
                        show: true,
                        fontSize: "10",
                        color: "#fff",
                    }
                },
                itemStyle: { //图形配置
                    normal: {
                        color:'#fff',
                        areaColor: "rgb("+randomData()+","+randomData()+","+randomData()+")",
                        borderColor: "#000",
                        borderWidth: 0.5
                    },
                    emphasis: {//高亮状态
                        color:'#000',
                        areaColor: "blue",
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 5,
                        borderWidth: 0,
                        shadowColor: "#000",
                    }
                }
            }
        ]
    };
    let mapData=getFetch("china.json")
    setTimeout(function(){
        echarts.registerMap('china',mapData.responseJSON);
        mychart.setOption(option);
    },100)
</script>