Make a map
1. Prepare to make a website
The website for making the map: click to
select the outline of the map: click
We need to use the second website to find the outline of the map, which is implemented in the first one.
2. echarts import
1. Download from official website: click
2. Import CDN: click
Example:
<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. Start making maps
1. Open the cartography website, search for the map you want to use, and search for multiple regions one by one.
2. Copy the code to the website where the map is made.
I am using the Google Chrome csdn plug-in, which may not be the same as what you showed, but that’s all, copied from the production website.
After the copying is completed, it becomes like this. See the specific requirements. I will only talk about how to draw the map. Please comment or chat privately if there is a need later.
3. Put the json code in js
Pay attention here. qw is the name, we need this name when we quote from html.
4. Display in html code
<!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>
As for the js code is too long == tens of thousands of lines.
If the page cannot load the js file, you can refer to my other blogs: click