效果图：
源代码：
<template>
<div class="echarts">
<div
class="className"
id="id"
style="width: 100%; height: 450px"
ref="myEchart"
></div>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import echarts from "echarts";
// 引用世界地图js
import "@/js/world_new.js";
import Component from "vue-class-component";
@Component
export default class World extends Vue {
name = "echarts";
initChart() {
let myChart = echarts.init(this.$refs.myEchart);
window.onresize = echarts.init(this.$refs.myEchart).resize;
// 把配置和数据放这里
myChart.setOption({
backgroundColor: "#02AFDB",
title: {
left: "40%",
top: "0px",
textStyle: {
color: "#fff",
opacity: 0.7,
},
},
dataRange: {
show: false,
min: 0,
max: 1000000,
text: ["High", "Low"],
realtime: true,
calculable: true,
color: ["orangered", "yellow", "lightskyblue"],
},
tooltip: {
formatter: function (params: any, ticket: any, callback: any) {
// params.seriesName + "<br />" + params.name + "：" + params.value
return params.name + "：" + params.value;
}, //数据格式化
},
geo: {
map: "world",
label: {
emphasis: {
show: false,
},
},
roam: false,
silent: true,
itemStyle: {
normal: {
areaColor: "#37376e",
borderColor: "#000",
},
emphasis: {
areaColor: "#2a333d",
},
},
},
series: [
{
type: "map",
mapType: "world",
// zoom: 1.2,
mapLocation: {
y: 100,
},
nameMap //nameMap映射
data //数据国家名字
symbolSize: 12,
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
itemStyle: {
emphasis: {
borderColor: "#fff",
borderWidth: 1,
},
},
},
],
});
}
mounted() {
this.initChart();
}
}
</script>
重要
1，需要下载世界地图所需要的js文件下载链接
2，data 数据国家名字 && nameMap 映射可参考这里
