vue使用echarts自定义地图
vue使用echarts自定义地图
- 步骤
-
- 第一步 安装
- 第二步 导入echarts
- 第三步 获取地图的GeoJSON
- 第四步 在组件中引入
- 第五步 绘制地图
- 效果
- 根据数据配置不同显示颜色
步骤
第一步 安装
npm i echarts --save
第二步 导入echarts
import * as echarts from "echarts";
第三步 获取地图的GeoJSON
点击DataV.地图GeoJSON数据
如下图所示
可以选择下载下来（放在json文件夹中），也可以使用在线地址！我是下载下来的
第四步 在组件中引入
如下图所示
第五步 绘制地图
详细步骤上篇文章已经介绍了，如果感兴趣可以看一下
vue3 setup语法使用echarts图表
上篇文章用的是vue3 setup语法糖绘制的echarts图，这篇用vue2的语法，代码如下：
<template>
<div class="map">
<div class="chart">
<div class="geo" id="ditu" style="width: 1200px; height: 800px"></div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
import mapCode from "../assets/china.json";
export default {
methods: {
// 地图
init(id) {
// var mapCode = require("../assets/map.js")
echarts.registerMap("china", mapCode);
this.charts = echarts.init(document.getElementById(id));
var points = [
{ value: [118.8062, 31.9208], itemStyle: { color: "#4ab2e5" } },
{ value: [127.9688, 45.368], itemStyle: { color: "#4fb6d2" } },
{ value: [110.3467, 41.4899], itemStyle: { color: "#52b9c7" } },
{ value: [125.8154, 44.2584], itemStyle: { color: "#5abead" } },
{ value: [116.4551, 40.2539], itemStyle: { color: "#f34e2b" } },
{ value: [123.1238, 42.1216], itemStyle: { color: "#f56321" } },
{ value: [114.4995, 38.1006], itemStyle: { color: "#f56f1c" } },
{ value: [117.4219, 39.4189], itemStyle: { color: "#f58414" } },
{ value: [112.3352, 37.9413], itemStyle: { color: "#f58f0e" } },
{ value: [109.1162, 34.2004], itemStyle: { color: "#f5a305" } },
{ value: [103.5901, 36.3043], itemStyle: { color: "#e7ab0b" } },
{ value: [106.3586, 38.1775], itemStyle: { color: "#dfae10" } },
{ value: [101.4038, 36.8207], itemStyle: { color: "#d5b314" } },
{ value: [103.9526, 30.7617], itemStyle: { color: "#c1bb1f" } },
{ value: [108.384366, 30.439702], itemStyle: { color: "#b9be23" } },
{ value: [113.0823, 28.2568], itemStyle: { color: "#a6c62c" } },
{ value: [102.9199, 25.46639], itemStyle: { color: "#96cc34" } },
{ value: [119.4543, 25.9222] },
];
let option = {
backgroundColor: "transparent",
geo: {
map: "china",
aspectScale: 0.75, //长宽比
zoom: 1.1,
roam: false,
itemStyle: {
normal: {
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "#1b497d", // 0% 处的颜色
},
{
offset: 1,
color: "#1b497d", // 100% 处的颜色
},
],
globalCoord: true, // 缺省为 false
},
shadowOffsetX: 10,
shadowOffsetY: 11,
},
emphasis: {
areaColor: "#2AB8FF",
borderWidth: 0,
color: "green",
label: {
show: false,
},
},
},
regions: [
{
name: "南海诸岛",
itemStyle: {
areaColor: "rgba(0, 10, 52, 1)",
borderColor: "rgba(0, 10, 52, 1)",
normal: {
opacity: 0,
label: {
show: false,
color: "#009cc9",
},
},
},
},
],
},
tooltip: {}, // 配置提示框，有这个配置项即可
series: [
{
type: "map",
roam: true,
label: {
normal: {
show: true,
textStyle: {
fontSize: "10px",
color: "#1DE9B6",
},
},
emphasis: {
textStyle: {
color: "rgb(183,185,14)",
},
},
},
itemStyle: {
normal: {
borderColor: "#3b7eaf",
borderWidth: 1,
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "#1b497d", // 0% 处的颜色
},
{
offset: 1,
color: "#1b497d", // 100% 处的颜色
},
],
globalCoord: true, // 缺省为 false
},
},
emphasis: {
areaColor: "rgb(46,229,206)",
shadowColor: "rgb(12,25,50)",
borderWidth: 0.1,
},
},
zoom: 1.1,
// roam: true,
map: "china", //使用
data: this.difficultData, //热力图数据 不同区域 不同的底色
},
{
type: "effectScatter",
coordinateSystem: "geo",
showEffectOn: "render",
zlevel: 1,
rippleEffect: {
period: 15,
scale: 4,
brushType: "fill",
},
hoverAnimation: false,
label: {
normal: {
formatter: "{b}",
position: "right",
offset: [15, 0],
color: "#1DE9B6",
show: true,
},
},
itemStyle: {
normal: {
color: "#1DE9B6",
shadowBlur: 10,
shadowColor: "#333",
},
},
symbolSize: 5,
data: points,
}, //地图线的动画效果
{
type: "lines",
zlevel: 2,
effect: {
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.9, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: "arrow", //箭头图标
symbolSize: 5, //图标大小
},
lineStyle: {
normal: {
color: "#1DE9B6",
width: 1, //线条宽度
opacity: 0, //尾迹线条透明度
curveness: 0.3, //尾迹线条曲直度
},
},
data: [
{
coords: [
[118.8062, 31.9208],
[116.4551, 40.2539],
],
lineStyle: { color: "#4ab2e5" },
},
{
coords: [
[127.9688, 45.368],
[116.4551, 40.2539],
],
lineStyle: { color: "#4fb6d2" },
},
{
coords: [
[110.3467, 41.4899],
[116.4551, 40.2539],
],
lineStyle: { color: "#52b9c7" },
},
{
coords: [
[125.8154, 44.2584],
[116.4551, 40.2539],
],
lineStyle: { color: "#5abead" },
},
{
coords: [
[119.4543, 25.9222],
[116.4551, 40.2539],
],
lineStyle: { color: "#f34e2b" },
},
{
coords: [
[123.1238, 42.1216],
[116.4551, 40.2539],
],
lineStyle: { color: "#f56321" },
},
{
coords: [
[114.4995, 38.1006],
[116.4551, 40.2539],
],
lineStyle: { color: "#f56f1c" },
},
{
coords: [
[117.4219, 39.4189],
[116.4551, 40.2539],
],
lineStyle: { color: "#f58414" },
},
{
coords: [
[112.3352, 37.9413],
[116.4551, 40.2539],
],
lineStyle: { color: "#f58f0e" },
},
{
coords: [
[109.1162, 34.2004],
[116.4551, 40.2539],
],
lineStyle: { color: "#f5a305" },
},
{
coords: [
[103.5901, 36.3043],
[116.4551, 40.2539],
],
lineStyle: { color: "#e7ab0b" },
},
{
coords: [
[106.3586, 38.1775],
[116.4551, 40.2539],
],
lineStyle: { color: "#dfae10" },
},
{
coords: [
[101.4038, 36.8207],
[116.4551, 40.2539],
],
lineStyle: { color: "#d5b314" },
},
{
coords: [
[103.9526, 30.7617],
[116.4551, 40.2539],
],
lineStyle: { color: "#c1bb1f" },
},
{
coords: [
[108.384366, 30.439702],
[116.4551, 40.2539],
],
lineStyle: { color: "#b9be23" },
},
{
coords: [
[113.0823, 28.2568],
[116.4551, 40.2539],
],
lineStyle: { color: "#a6c62c" },
},
{
coords: [
[102.9199, 25.46639],
[116.4551, 40.2539],
],
lineStyle: { color: "#96cc34" },
},
],
},
],
};
this.charts.setOption(option, true); //设置option
this.charts.on("georoam", (params) => {
var option = this.charts.getOption(); //获得option对象
if (params.zoom != null && params.zoom != undefined) {
//捕捉到缩放时
option.geo[0].zoom = option.series[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
} else {
//捕捉到拖曳时
option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
}
this.charts.setOption(option); //设置option
});
},
},
mounted() {
this.init("ditu");
},
};
</script>
<style>
</style>
效果
vue使用echarts自定义地图
根据数据配置不同显示颜色
详情请参考 Apache Echarts 配置项手册-visualMap