Echarts 中国地图

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

我们需要引入两个文件：

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/123764.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！