Echarts定制一个地图

1、准备制作网站

制作地图的网站:点击
选择地图的轮廓:点击
我们需要用第二个网站去找到地图的轮廓,在第一个实现。

2、echarts导入

1.官网下载:点击
2.CDN导入:点击
例子:

<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文件,可以参考下我的其他博客:点击

猜你喜欢

转载自blog.csdn.net/weixin_45743162/article/details/113103497