Echarts 中国地图

↘"ＬYong

已于 2023-09-06 15:12:30 修改

阅读量435

点赞数

文章标签： echarts 前端 javascript

于 2023-09-06 15:11:11 首次发布

本文链接：https://blog.csdn.net/weixin_39093006/article/details/132715069

版权

直接展示效果图：
在这里插入图片描述

我们需要引入两个文件：

echarts.js 官网地址下载：快速上手 - Handbook - Apache ECharts
chain.js 这个官网已经找不到了，需要自行搜寻下载
也可以私信我(网上下载的China.js会导致省名称定为不准确，不居中显示)！！！

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>中国地图</title>
    <script type="text/javascript" src="/Users/ly/Downloads/echarts.js"></script>
    <script type="text/javascript" src="/Users/ly/Downloads/china.js"></script>
</head>

<body>
    <div id="map" style="height:800px;"></div>

    <script type="text/javascript"> 
        const data_list = [{
            name: '江苏',
            value: 0
        }, {
            name: '安徽',
            value: 1
        }, {
            name: '湖北',
            value: 1
        }, {
            name: '湖南',
            value: 0
        }]
        
        var map_chart = echarts.init(document.getElementById('map'));
        option = {
      		tooltip: {
                  trigger: 'item',
                  formatter: (params) => {
                  	return ${params.name};
              	  }
            },
            series: [{
                name: '数据',
                type: 'map',
                mapType: 'china',
                roam: false,
                selectedMode: false,
                itemStyle: {
                    normal: {
			            areaColor: '#9ac2fe', //默认区块颜色
                        label: {
                            show: true,
                            textStyle: {
                                color: 'black',
			                    //fontWeight: 'bold',
				                //fontFamily:'STHupo'
                            }
                        }
                    },
		            //鼠标经过颜色和字体
                    emphasis: {
                        areaColor: '#253582',
                        label: {
                            show: true,
			                textStyle: {color: '#fff'}
                        },
                    },
                },
                data: data_list
            }]
        };
        map_chart.setOption(option);
}
    </script>
</body>
</html>