echarts显示地图
<template>
<div class="managingPatientSize">
<div id="china-map"></div>
</div>
</template>
<script>
import geoJson from 'echarts/map/json/china.json'
import * as echarts from 'echarts';
echarts.registerMap('china', geoJson)
export default {
name: 'ChinaMap',
data() {
return {
}
},
methods: {
drawCharts() {
var nameMap = 'china';
// 0表示未开发,1表示开发中
var data = [
{ name: '北京', value: 1290 },
{ name: '天津', value: 42 },
{ name: '河北', value: 1 },
{ name: '山西', value: 0 },
{ name: '内蒙古', value: 0 },
{ name: '辽宁', value: 0 },
{ name: '吉林', value: 0 },
{ name: '黑龙江', value: 0 },
{ name: '上海', value: 1129 },
{ name: '江苏', value: 399 },
{ name: '浙江', value: 102 },
{ name: '安徽', value: 1 },
{ name: '福建', value: 299 },
{ name: '江西', value: 302 },
{ name: '山东', value: 1 },
{ name: '河南', value: 1 },
{ name: '湖北', value: 998 },
{ name: '湖南', value: 480 },
{ name: '重庆', value: 1580 },
{ name: '四川', value: 372 },
{ name: '贵州', value: 69 },
{ name: '云南', value: 695 },
{ name: '西藏', value: 0 },
{ name: '陕西', value: 1 },
{ name: '甘肃', value: 56 },
{ name: '青海', value: 10 },
{ name: '宁夏', value: 1 },
{ name: '新疆', value: 0 },
{ name: '广东', value: 1988 },
{ name: '广西', value: 1860 },
{ name: '海南', value: 14 },
{ name: '香港', value: 879 },
{ name: '澳门', value: 209 },
{ name: '台湾', value: 0 },
];
var geoCoordMap = {};
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
return res;
};
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById("china-map"));
/*获取地图数据*/
var mapFeatures = echarts.getMap(nameMap).geoJson.features;
myChart.hideLoading();
// 这里很关键
mapFeatures.forEach(function (v) {
console.log(v)
// 地区名称
var name = v.properties.name;
// 地区经纬度
geoCoordMap[name] = v.properties.cp;
});
let option = {
backgroundColor: '#0F1C3C',
title: [
{
top: '31.5%',
text: '月规模',
// subtext: '虚拟数据',
left: '105',
show: true,
textStyle: {
color: '#fff',
},
},
],
tooltip: {
position: function (p) {
//其中p为当前鼠标的位置
return [p[0] + 10, p[1] - 10];
},
extraCssText: 'max-height:40px;',
triggerOn: 'mousemove|click',
formatter: function (e, t, n) {
if (typeof e.value[2] == 'undefined') {
if (e.value == '0') {
return e.name + ":<span style='color: #999;'>未开发</span>";
} else if (e.value == '1') {
return e.name + ":<span style='color: blue;'>开发中</span>";
} else {
return e.name + ":<span style='color: red;'>" + e.value + '</span> 万';
}
}
//有数量时,显示城市和当前城市所做项目数
else {
return e.name + ":<span style='color: red;'>" + e.value[2] + '</span> 万'; //params.value[2] 取出value值中的第三个值 前两个值是经纬度,第三个值是数量
}
},
},
visualMap: [
{
left: 90,
bottom: '20%',
min: 0,
max: 1000,
show: true,
// text: ['High', 'Low'],
realtime: false,
calculable: false,
seriesIndex: [0],
orient: 'horizontal',
textStyle: {
color: 'rgba(175,224,254,.9)',
},
pieces: [
{
gt: 3,
label: '已开发',
color: '#134B1C',
},
{
gte: 1,
lte: 1,
label: '开发中',
color: '#4A4003',
},
{
gte: 0,
lte: 0,
label: '未开发',
color: '#00336C',
},
],
},
{
left: 90,
// top: this.chinaBox / 2 + 52,
top: '30%',
min: 0,
max: 1000,
seriesIndex: 1,
show: true,
splitNumber: 4,
padding: [50, 20, 20, 20],
backgroundColor: 'rgba(255,255,255,.2)',
textStyle: {
color: 'rgba(175,224,254,.9)',
},
inRange: {
// color: ['#8B77FF', '#4FCCFF', '#6FE621', '#FFC760', '#FB497C'].reverse(),
symbolSize: [8, 15],
symbol: 'circle',
},
formatter: function (value) {
return '';
},
pieces: [
{
gt: 1000,
label: '1000万以上',
color: '#fff',
},
{
gte: 500,
lte: 1000,
label: '500-1000万',
color: '#FFC760',
},
{
gte: 300,
lt: 500,
label: '300-500万',
color: '#6FE621',
},
{
gt: 100,
lt: 300,
label: '100-300万',
color: '#4FCCFF',
},
{
lt: 100,
gt: 3,
label: '100万以下',
color: '#DAB2FF',
},
],
},
],
geo: {
// 背景地图
map: nameMap,
zoom: 1.2,
show: false, // 是否显示背景地图
roam: true,
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
// 默认背景
itemStyle: {
normal: {
areaColor: '#032954',
borderColor: '#0C6075',
}
}
},
series: [
{
// 地图块的相关信息
type: 'map',
map: nameMap,
zoom: 1.2,
label: {
normal: {
show: true,
textStyle: {
fontSize: 12,
fontWeight: 400,
color: 'rgb(255,255,255)',
},
},
// 文字hover颜色
emphasis: {
show: true, //是否在高亮状态下显示标签。
textStyle: {
color: '#ff0',
}, //高亮状态下的标签文本样式。
},
},
itemStyle: {
// 地图边框设置
normal: {
// areaColor: '#272235',
// borderColor: 'rgba(175,224,254,.4)',
// fontWeightL: 700,
// borderWidth: 0.5,
color: function (params) {
return '#00ff00'
}
},
// hover效果
emphasis: {
areaColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#00499B', // 0% 处的颜色
},
{
offset: 1,
color: '#00499B', // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
}
},
// 点击效果
select: {
itemStyle: {
areaColor: '#ccb32c',
},
},
data: data,
},
{
// 水波纹
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(
data
.sort(function (a, b) {
return b.value - a.value;
})
.slice(0, 50)
),
// symbolSize: function (val) {
// return val[2] / 6;
// },
showEffectOn: 'render',
// symbolOffset: [-10, 10], //偏移
rippleEffect: {
period: 10, // 动画时间,值越小速度越快
scale: 4, // 波纹圆环最大限制,值越大波纹越大
brushType: 'fill', // 波纹绘制方式 stroke, fill
},
zlevel: 2,
},
],
};
myChart.setOption(option, true);
},
},
mounted() {
this.drawCharts();
}
}
</script>
<style scoped>
#china-map {
width: 1000px;
height: 600px;
}
</style>
echarts显示地图的更多相关文章
- 基于ECharts 的地图例子
最近的一个项目要用到显示地图,本来用jq做了一个,但由于客户不满意(确实自己弄的样式效果都不是太理想),于是就上网搜了搜,最后决定基于百度的ECharts来弄地图 本来自己js基础不是很扎实,EC ...
- 数据视化Echarts+百度地图API实现市县区级下钻
开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...
- echarts的地图省份颜色自适应变化
在使用echarts的地图的时候省份的颜色可能随着数据的多少显示不同的颜色,但是当后台返回的数据的变化较大时可能就不好控制了,所以需要设置根据后台的数据进行自适应 将后台返回的数据中的value放入一 ...
- 几个不错的echarts +百度地图 案例
https://echarts.baidu.com/examples/editor.html?c=map-polygon https://echarts.baidu.com/examples/edit ...
- ECharts 实现地图散点图上(转载)
转载来源:https://efe.baidu.com/blog/echarts-map-tutorial/ ECharts 实现地图散点图(上) 小红 2016-04-28 ECharts, 教 ...
- react项目结合echarts,百度地图实现热力图
一.最近在一个react项目(antd pro)中需要展示一个热力地图.需求是: 1.热力地图可缩放: 2.鼠标点击可以展示该点地理坐标,及热力值. 3.初始化时候自适应展示所有的热力点. 4.展示热 ...
- echarts map 地图在react项目中的使用
需求 展示海南省地图,点击市高亮展示,并在右侧展示对应市的相关数据. 准备工作 Echarts 海南地图json 效果图 代码 index.tsx import React, { useRef, us ...
- echarts map地图中绘制浙江省市区县乡镇多级联动边界下钻的最新geojson数据文件获取和更新
目录 ECharts Map地图的显示 GeoJSON数据文件获取 在ECharts中绘制浙江省的数据 ECharts Map地图的显示 ECharts支持地理坐标显示,专门提供了一个geo组件,在s ...
- Google Maps API显示地图的小示例
来源:http://www.ido321.com/1089.html 效果(新版Firefox中测试): 代码: <!DOCTYPE> <html> <head> ...
- Swift - 使用MapKit显示地图,并在地图上做标记
通过使用MapKit可以将地图嵌入到视图中,MapKit框架除了可以显示地图,还支持在地图上做标记. 1,通过mapType属性,可以设置地图的显示类型 MKMapType.Standard :标准地 ...
随机推荐
- 再获信通院权威认证,优等生华为云GaussDB数据库凭什么?
摘要:在八大项测试中,华为云 GaussDB的两款数据库都以优异的成绩通过.那么这两款数据库究竟是凭借什么获此殊荣呢? 近期,中国信通院公布了第十三批数据库产品基础能力.性能和稳定性评审结果.在本次评 ...
- 火山引擎 DataTester 升级:降低产品上线风险,助力产品敏捷迭代
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,并进入官方交流群 在企业竞争加剧的今天,精益开发和敏捷迭代已成为产品重要的竞争力.如何保障每一次 Feature 高效迭代与安全,如何快速实 ...
- 自然语言处理 Paddle NLP - 机器同传技术及应用-理论
基础 自然语言处理(NLP) 自然语言处理PaddleNLP-词向量应用展示 自然语言处理(NLP)-前预训练时代的自监督学习 自然语言处理PaddleNLP-预训练语言模型及应用 自然语言处理Pad ...
- PPT 常规设置
高级设置 可以将撤销次数调大,最多 150次 默认拉到PPT中的图片是被压缩的,可以设置成不压缩(解压 PPT 可查看里面的图片大小) 字体嵌入 可将自动保存时间调短,默认保存目录我习惯先保存到桌面( ...
- python 解析字节码的相关方法
python代码被解释器执行时分为两步走: 一.python编译器将代码编译成字节码 二.python虚拟机执行字节码 由于这两步是一起的,所以在python编程中很少能看到字节码.但是想要提高代码效 ...
- 又强大了,LiteFlow里程碑版本2.8.0发版注记!全新的DSL会惊艳到你吗?
一 New version! 2.8.0 go!!! 这是我在提交中央仓库前写下的简短description.我希望这个版本能把LiteFlow带向更远的地方. 曾经在半年前就计划的新的DSL计划,但 ...
- 【第三方库】从编译到运行,轻松学会gflags库
gflags是Google开源的一个库,可以很方便地定义一些全局变量,并且可以从命令行设置他们的值,广泛应用于各个项目中以及自己平时的开发中.本期参考gflags的官方文档,简单直接介绍下怎么使用这个 ...
- Visual Studio 2022 激活码
Pro: TD244-P4NB7-YQ6XK-Y8MMM-YWV2J Enterprise: VHF9H-NXBBB-638P6-6JHCY-88JWH Key 来自网络 备忘...
- 汇编 | 数据段寄存器DS和[address]
Description CPU要读写一个内存单元的时候,必须先给出这个内存单元的地址,在8086PC中,内存地址由段地址和偏移地址组成.8086CPU中有一个DS寄存器,通常用来存放要访问 数据的段地 ...
- Kafka的Rebalance机制可能造成的影响及解决方案
一.kafka的rebalance机制在Kafka中,当有新消费者加入或者订阅的Topic数发生变化时,会触发Rebalance(再均衡:在同一个消费者组当中,分区的所有权从一个消费者转移到另外一个消 ...