几行代码写出中国地图

最新推荐文章于 2024-06-27 16:23:14 发布

cv角斗士

最新推荐文章于 2024-06-27 16:23:14 发布

阅读量3.4k

点赞数 7

分类专栏：前端文章标签： javascript css html html5

本文链接：https://blog.csdn.net/weixin_42208160/article/details/108021020

版权

前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

为了实现这个功能，我们需要用到一个技术ECharts，我们简单来了解一下ECharts是什么？

ECharts是一款由百度前端技术部开发的，基于Javascript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。

接下来开始我们激动人心的编程之旅了

获取ECharts:我们首先要引入ECharts文件，我给大家提供两种方式

文件引入链接：https://pan.baidu.com/s/1nezp8Ezuy7Se2NdVIfqugw
提取码：1122
CDN

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-alpha.1/echarts.common.js"></script>

获取china.js文件：
在这里插入图片描述

然后我们就开始具体实现了

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
     <!-- 引入 china.js -->
    <script src="js/china.js"></script>
     <!-- 简单的写一下CSS样式 -->
     <style>
        * {
            margin: 0;
            padding: 0
        }
        html,
        body {
            width: 100%;
            height: 100%;
        }
        #main {
            width: 800px;
            height: 600px;
            margin: 50px auto;
            border: 1px solid #ddd;
        }
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
        	//标题
            title: {
                text: '中国地图'
            },
          	//提示框
            tooltip: {},
          	//系列
            series: [{
                name: '地图',
                type: 'map',//地图
                map: 'china',
                data: [
			            {name:"南海诸岛",value:0},
			            {name: '北京', value: randomValue()},
			            {name: '天津', value: randomValue()},
			            {name: '上海', value: randomValue()},
			            {name: '重庆', value: randomValue()},
			            {name: '河北', value: randomValue()},
			            {name: '河南', value: randomValue()},
			            {name: '云南', value: randomValue()},
			            {name: '辽宁', value: randomValue()},
			            {name: '黑龙江', value: randomValue()},
			            {name: '湖南', value: randomValue()},
			            {name: '安徽', value: randomValue()},
			            {name: '山东', value: randomValue()},
			            {name: '新疆', value: randomValue()},
			            {name: '江苏', value: randomValue()},
			            {name: '浙江', value: randomValue()},
			            {name: '江西', value: randomValue()},
			            {name: '湖北', value: randomValue()},
			            {name: '广西', value: randomValue()},
			            {name: '甘肃', value: randomValue()},
			            {name: '山西', value: randomValue()},
			            {name: '内蒙古', value: randomValue()},
			            {name: '陕西', value: randomValue()},
			            {name: '吉林', value: randomValue()},
			            {name: '福建', value: randomValue()},
			            {name: '贵州', value: randomValue()},
			            {name: '广东', value: randomValue()},
			            {name: '青海', value: randomValue()},
			            {name: '西藏', value: randomValue()},
			            {name: '四川', value: randomValue()},
			            {name: '宁夏', value: randomValue()},
			            {name: '海南', value: randomValue()},
			            {name: '台湾', value: randomValue()},
			            {name: '香港', value: randomValue()},
			            {name: '澳门', value: randomValue()}
			        ]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
		//随机数函数
		function randomValue() {
            return Math.round(Math.random() * 1000);
        }
    </script>
</body>
</html>

最后我们来看看效果
在这里插入图片描述

cv角斗士

关注

7
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
几行代码写出中国地图

为了实现这个功能，我们需要用到一个技术ECharts，我们简单来了解一下ECharts是什么？ECharts是一款由百度前端技术部开发的，基于Javascript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。接下来开始我们激动人心的编程之旅了获取ECharts:我们首先要引入ECharts文件，我给大家提供两种方式文件引入链接：https://pan.baidu.com/s/1nezp8Ezuy7Se2NdVIfqugw提取码：1122CDN<
复制链接

扫一扫

专栏目录