使用echarts实现地图展示

先来看下结果展示：

下面来看下代码：【引入china.js 以下代码可直接运行】

China.js文件的下载地址：https://github.com/liangrumeng2015/China.js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script><script type="text/javascript" src="js/china.js"></script><title>Document</title>
</head>
<body><div id="main" style="width:600px;height: 500px"></div><script>// 函数China_map 用来实现地图function China_map(id,mydata,data_obj) {      //id 初始化echarts的div  mydata数据（后端返回的数据）//初始化echarts实例var myChart = echarts.init(document.getElementById(id));// 地图的echarts  使用制定的配置项和数据显示图表myChart.setOption({backgroundColor: '#ccc',title: {text: '全国地图大数据',subtext: '',x: 'center'},tooltip: {trigger: 'item'},//右侧小导航图标 及相关文字visualMap: {show: true,x: 'right',y: 'center',splitList: data_obj,color: ['#5475f5', '#9feaa5', '#85daef', '#74e2ca', '#e6ac53', '#9fb5ea']},//配置属性series: [{name: '数据',type: 'map',mapType: 'china',roam: false,      // 禁止拖动地图label: {normal: {show: true},emphasis: {show: false}},data: mydata            // 传入的数据}]});}// 模拟假数据function randomData() {return Math.round(Math.random() * 500);}var mydata = [{name: '北京',value: '100'}, { name: '天津',value: randomData()},{name: '上海', value: randomData() }, { name: '重庆',value: randomData() },{name: '河北',value: randomData()}, { name: '河南', value: randomData() },{name: '云南', value: randomData()}, { name: '辽宁',value: randomData()},{name: '黑龙江', value: randomData()}, {name: '湖南',value: randomData()},{name: '安徽', value: randomData()}, { name: '山东',value: randomData()},{name: '新疆', value: randomData()}, {name: '江苏',value: randomData()},{name: '浙江',value: randomData()}, {name: '江西',value: randomData()},{name: '湖北',value: randomData()}, {name: '广西',value: randomData()},{name: '甘肃',value: randomData()}, {name: '山西',value: randomData()},{name: '内蒙古',value: randomData()}, {name: '陕西',value: randomData()},{name: '吉林',value: randomData()}, {name: '福建',value: randomData()},{name: '贵州',value: randomData()}, {name: '广东',value: randomData()},{name: '青海',value: randomData()}, {name: '西藏',value: randomData()},{name: '四川',value: randomData()}, {name: '宁夏',value: randomData()},{name: '海南',value: randomData()}, {name: '台湾',value: randomData()},{name: '香港',value: randomData()}, {name: '澳门',value: randomData()}];var data_obj = [{start: 500,end: 600}, {start: 400,end: 500},{start: 300,end: 400}, {start: 200,end: 300},{start: 100,end: 200}, {start: 0,end: 100},]China_map('main',mydata,data_obj);   // 调用地图</script>
</body></html>

以上代码主要思路：

（1）先初始化echarts实例

（2）完成相关配置即可

注：先引入echarts.js 在引入china.js（得自己下载）文件。

以上的代码中使用封装的函数 China_map 即可实现地图的展示，需要传入三个参数：

（1）参数1 id 初始化的存放地图的div

（2）参数2 mydata 右边栏的数据

（3）参数3 data_obj 地图上面的数据

使用echarts实现地图展示相关推荐

地图统计_博客城市访问量统计并且通过Echarts+百度地图展示
本篇讲解一下如何在Vue 中使用 Echarts + 百度地图统计博客访问量并且通过QQWry 解析 ip 地址利用Echarts 展示出来效果图如下: 1.纯真Ip地址库 QQWry 这 ...
echarts贵州地图展示自定义贵安新区
要求和预期结果: 实现贵州地市地图效果,并且鼠标过去有数据展示,贵安新区数据无法展示,弄个自定义地图展示出来相关文件准备,加载地图和部分相关组件.echarts.min.js 和 guizhou.j ...
echarts省级地图展示(包含3D地图)
1.npm i echarts --save // main.js import * as echarts from 'echarts'; Vue.prototype.$echarts = echar ...
Echarts省份地图展示
效果图: 文件中引入的咸阳json数据如下: xianyang.json /* * Licensed to the Apache Software Foundation (ASF) under one ...
echarts 地图 dispatchaction不好使_数据分析帝：广东省客户数量地图展示，如何通过python实现？...
上周在给公司做数据时,在展示数据到了展示公司在广东省内客户数量时候,机械性的用了柱状图,回家路上想了一下,是否可以有别的.更好的展示方式呢?于是就想到了用地图展示,常用地图展示有以下几种方式: 1.P ...
使用echarts完成中国省市区县镇地图展示
目录前言一.中国地图 1.1 地图数据-china.js 1.2 代码应用二.省份地图--以山东为例,其他省份同理 2.1 地图数据-shandong.js 2.2 代码应用三.市级地图--以 ...
echarts区县级地图展示
最近在做的一个项目主要展示区县级的地图,并且要在县级城市绘制一些自定义图标.在echarts的json文件中,提供了市级城市的中心坐标点,但是并没有提供县级城市的中心坐标点,这个把我难住了,要怎么才能 ...
echarts 地图展示乡镇数据
echarts 地图展示乡镇数据获取乡镇数据修改echarts以支持GeometryCollection 合并GeoJson数据获取乡镇数据阿里DataV 只支持到区县级别的GeoJson数据 ...
Echarts离线地图开发--实现web端初始化世界地图，其他国家钻取到行政区，中国钻取到省市区的展示
背景:公司原本使用高德在线地图,但是由于有的客户是使用内网的,造成地图打开是空白的.于是,增加了离线地图功能,通过页签切换地图,默认展示在线地图,点击离线页签时,展示的是echarts离线地图. 重要 ...

使用echarts实现地图展示

使用echarts实现地图展示相关推荐

最新文章

热门文章