echars世界地图，显示指定的国家散点图

效果如下

1.下载:npm install echarts --save

2，引入世界地图在 main.js 文件里引入 ( 这里是 Vue3.0 的模板 )

import echarts from 'echarts'
Vue.prototype.$echarts = echartsimport '../node_modules/echarts/map/js/world.js' // 引入世界地图

3.使用

<template><div class='wrapper'><div class='chart' id='chart'></div></div>
</template><script>
import { mapoption, pieMore } from "@/assets/js/tools.js";
export default {data () {return {}},mounted () {let chart = this.$echarts.init(document.getElementById('chart'))let map = mapoption();map.setOption(chart);},
}
</script>

tool.js 可以把要显示的国家通过参数传递，这里我写的固定值

import echarts from "echarts";
function mapoption() {var geoCoordMap = [{ name: "芬兰", value: [24.909912, 60.169095], symbolSize: 8 },{ name: "德国", value: [13.402393, 52.518569], symbolSize: 8 },{ name: "英国", value: [-0.126608, 51.208425], symbolSize: 8 },{ name: "韩国", value: [126.979208, 37.53875], symbolSize: 8 },{ name: "日本", value: [139.710164, 35.706962], symbolSize: 8 },]var data = [{ name: "澳大利亚", value: [135.193845, -25.304039], symbolSize: 8 },{ name: "美国", value: [-100.696295, 33.679979], symbolSize: 8 },]let option = {legend: {top: 0,left: 130,data: ['已注册国家', {name: '可注册国家', textStyle: {normal: {color: '#fff',borderColor: '#18849C',borderWidth: 1,}}}],// orient: 'vertical',// itemWidth: 40,// itemHeight: 18,icon: "circle",},geo: {map: 'world',       // 与引用进来的地图js名字一致roam: false,        // 禁止缩放平移label: {normal: {         // 默认的文本标签显示样式show: false,},emphasis: {show: false}},itemStyle: {        // 每个区域的样式 opacity: 0.6,normal: {borderColor: '#bbb',//区域边框颜色areaColor: '#F6F6F6'},emphasis: {show: false,areaColor: '#F6F6F6'},},},series: [{name: '已注册国家',type: 'scatter',coordinateSystem: 'geo',       // 表示使用的坐标系为地理坐标系zlevel: 3,rippleEffect: {brushType: 'fill'        // 波纹绘制效果},label: {normal: {                  // 默认的文本标签显示样式color: '#000',show: true,position: 'top',      // 标签显示的位置formatter: '{b}'       // 标签内容格式器},},itemStyle: {normal: {color: '#18849C'}},data: geoCoordMap},{name: '可注册国家',type: 'scatter',coordinateSystem: 'geo',       // 表示使用的坐标系为地理坐标系zlevel: 3,rippleEffect: {brushType: 'fill'        // 波纹绘制效果},label: {normal: {                  // 默认的文本标签显示样式show: true,color: '#000',position: 'top',      // 标签显示的位置formatter: '{b}'       // 标签内容格式器},},itemStyle: {normal: {color: '#fff',borderColor: '#18849C',borderWidth: 1,}},data: data}],textStyle: {fontSize: 12}}return option
}
export {mapoption
}

echars世界地图，显示指定的国家散点图相关推荐

如何实现分享网站文章到微信朋友圈时显示指定缩略图或LOGO
当下朋友圈很火,很多企业都将微信朋友圈作为品牌传播的途径,经常会发一些精彩的文章到微信朋友圈供大家自发传播,这样的想法很好,对于优质的内容,网友们也乐于转发与朋友们分享,对品牌宣传与推广确实是有好处的 ...
linux type命令（用来显示指定命令的类型，判断给出的指令是内部指令还是外部指令，如果给出的指令为外部指令，则显示其绝对路径）
文章目录 type 补充说明语法选项参数实例 type 显示指定命令的类型补充说明 type命令用来显示指定命令的类型,判断给出的指令是内部指令还是外部指令. 命令类型: alias:别名 ...
el-table-column中格式化判断数据为空则显示指定内容
场景若依前后端分离版手把手教你本地搭建环境并运行项目: 若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客_若依前后端分离搭建实现el-t ...
fiddler filters 使用（fiddler只显示指定请求，fiddler不显示指定请求，即filter请求过滤）转自：http://blog.csdn.net/notejs/article/
fiddler filters 使用(fiddler只显示指定请求,fiddler不显示指定请求,即filter请求过滤) Fiddler 有一个filters可以很好的帮助我们只显示我们关系的请求或 ...
只显示隐藏文件显示指定目录下的目录
只显示隐藏文件: 例:显示/root下隐藏文件命令:ls -ad .* ls -a 显示当前目录下所有文件 d只显示目录本身内容 .*所有带.的文件如图: 显示指定目录下的目录: 显示root目录 ...
access找不到输入表或者dual_在Access窗体中显示指定路径的图片
↑↑↑点击上方图片,了解详情在Access中,如果把图形对象以OLE格式的字段保存,那么在窗体中可以直接显示出图片来.但是这样做有以下不足: 一.需要将图片逐一插入到表中,工作量太大. 二.使数据库 ...
Linux 命令之 type -- 显示指定命令的类型
文章目录一.命令介绍二.命令格式三.命令类型四.常用选项五.命令示例 (一)查看命令的类型 (二)显示外部命令的绝对路径一.命令介绍 type 命令用来显示指定命令的类型,判断给出的指令是 ...
Linux 命令之 tail -- 在屏幕上显示指定文件的末尾若干行/显示文件尾部内容/查看文件尾部内容
文章目录一.命令介绍二.常用选项三.参考示例 (一)显示文件 file 的最后 10 行 (二)显示文件 file 的内容,从第 20 行至文件末尾 (三)显示文件file的最后10个字符 (四 ...
帝国cms listinfo.php,帝国CMS动态列表应用之在列表中显示指定的会员组会员发布的信息...
帝国之所以强大就在于他可以随心所欲的处理信息,这里我来讲一下如何在列表中显示某会员组会员发的信息,当然也可以显示指定会员发的信息. 一.准备首先在userfun.php中加入函数 //getmemb ...

echars世界地图，显示指定的国家散点图

1.下载:npm install echarts --save

2，引入世界地图在 main.js 文件里引入 ( 这里是 Vue3.0 的模板 )

3.使用

echars世界地图，显示指定的国家散点图相关推荐

最新文章

热门文章

echars世界地图，显示指定的国家散点图

1.下载:npm install echarts --save

2，引入世界地图 在 main.js 文件里引入 ( 这里是 Vue3.0 的模板 )

3.使用

echars世界地图，显示指定的国家散点图相关推荐

最新文章

热门文章

2，引入世界地图在 main.js 文件里引入 ( 这里是 Vue3.0 的模板 )