1、准备制作网站
制作地图的网站:点击
选择地图的轮廓:点击
我们需要用第二个网站去找到地图的轮廓,在第一个实现。
2、echarts导入
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<!-- 引入 echarts.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.js"></script>
3、开始制作地图
1、打开制图网站,搜索自己想用的地图是那一块,多个地区一个个搜索。
2、复制代码到制作地图的网站。
我是用的谷歌浏览器csdn插件,可能和你们显示的不太一样,不过就是这些,复制了制作网站上面。
复制完成后成了这样具体你想怎么弄,看具体需求,我现在只说一下如何画地图,后面有需求请评论或者私聊。
3、json代码放到js里
这里注意下。qw是名,咱们从html引用的时候需要这个名。
4、在html代码里显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<!-- 引入 echarts.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.js"></script>
<!-- 引入js,这里看你自己地址 -->
<script src="/js/echarts_china.js"></script>
</head>
<body>
<div id="box" style="width: 800px; height: 800px;"></div>
<script>
// 初始化echarts实例
var myEcharts = echarts.init(document.getElementById("box"));
var option = {
series: [
{
name: '模拟数据',
type: 'map',
mapType: 'qw',
}
]
};
// 使用刚指定的配置项和数据显示图表。
myEcharts.setOption(option);
</script>
</body>
</html>
至于js代码太长了= =好几万行。
如果页面加载不了js文件,可以参考下我的其他博客:点击