安装echarts
yarn add echarts
地图数据来源：
设置容器
<div class="echarts">
<div ref="myEchart" :style="{ height: '981px', width: '100vw' }" />
</div>
引入文件
import echarts from "echarts";
import $ from "jquery";
import "echarts/map/js/china.js"; // 引入中国地图数据
详细的代码逻辑
data() {
return {
chart: null,
};
},
mounted() {
this.getEcharts();
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
getEcharts() {
const myChart = echarts.init(this.$refs.myEchart);
// 这个是引入全国地图的数据json格式的，
var uploadedDataURL = "/data/data.json";
myChart.showLoading();
$.getJSON(uploadedDataURL, function(geoJson) {
echarts.registerMap("china", geoJson);
myChart.hideLoading();
var data = [
{
name: "北京",
},
{
name: "河南",
},
{
name: "河北",
},
{
name: "山西",
},
{
name: "内蒙古",
},
{
name: "陕西",
},
{
name: "山东",
},
{
name: "安徽",
},
{
name: "湖北",
},
{
name: "浙江",
},
{
name: "福建",
},
{
name: "江西",
},
{
name: "湖南",
},
{
name: "广西",
},
{
name: "云南",
},
{
name: "新疆",
},
{
name: "甘肃",
},
{
name: "青海",
},
{
name: "西藏",
},
{
name: "四川",
},
{
name: "贵州",
},
{
name: "重庆",
},
{
name: "宁夏",
},
{
name: "辽宁",
},
{
name: "广东",
},
{
name: "海南",
},
{
name: "吉林",
},
{
name: "黑龙江",
},
{
name: "江苏",
},
];
var max = 480;
var min = 9; // todo
var maxSize4Pin = 100;
var minSize4Pin = 20;
const option = {
backgroundColor: {
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: "#fff", // 0% 处的颜色
},
{
offset: 1,
color: "#f3f3f3", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
title: {
subtext: "",
x: "center",
textStyle: {
color: "#ccc",
},
},
legend: {
orient: "vertical",
y: "bottom",
x: "right",
data: ["pm2.5"],
textStyle: {
color: "#ccc",
},
},
visualMap: {
show: false,
min: 0,
max: 500,
left: "left",
top: "bottom",
text: ["高", "低"], // 文本，默认为数值文本
calculable: true,
seriesIndex: [1],
inRange: {
},
},
geo: {
map: "china",
show: true,
roam: true,
itemStyle: {
normal: {
shadowColor: "#fff", // 外发光
shadowBlur: 1,
},
emphasis: {
// areaColor: '#fff',//悬浮区背景
},
},
// 这个隐藏珠海地图以及文字,如果需要显示，把这点代码去掉即可
regions: [
{
name: "南海诸岛",
itemStyle: {
// 隐藏地图
normal: {
opacity: 0, // 为 0 时不绘制该图形
},
},
label: {
show: false, // 隐藏文字
},
},
],
},
series: [
{
symbolSize: 5,
label: {
normal: {
formatter: "{b}",
position: "right",
show: true,
},
emphasis: {
show: true,
},
},
itemStyle: {
normal: {
color: "#ee5010",
},
},
name: "light",
type: "scatter",
coordinateSystem: "geo",
// data: convertData,
},
{
type: "map",
map: "china",
geoIndex: 0,
aspectScale: 0.75, // 长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false,
},
emphasis: {
show: false,
textStyle: {
color: "#000",
},
},
},
roam: true,
itemStyle: {
normal: {
areaColor: "#fff",
borderColor: "#fff",
},
emphasis: {
areaColor: "#000",
},
},
animation: false,
data: data,
},
{
name: "Top 5",
type: "scatter",
coordinateSystem: "geo",
symbol: "pin",
symbolSize: [50, 50],
label: {
normal: {
show: true,
textStyle: {
color: "#fff",
fontSize: 9,
},
formatter(value) {
return value.data.value[2];
},
},
},
itemStyle: {
normal: {
color: "#ee5010", // 标志颜色
},
},
showEffectOn: "render",
rippleEffect: {
brushType: "stroke",
},
hoverAnimation: true,
zlevel: 1,
},
],
};
myChart.setOption(option);
});
},
},