效果如下
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}
