Vue2 and Vue3使用Echarts绘画地图可视化

HqL丶1024

已于 2024-02-02 11:47:58 修改

阅读量3.7k

点赞数 7

分类专栏： Vue.js Echarts 文章标签： echarts vue.js javascript

于 2022-06-20 12:03:38 首次发布

本文链接：https://blog.csdn.net/hql1024/article/details/125338337

版权

Vue.js 同时被 2 个专栏收录

78 篇文章 8 订阅

订阅专栏

Echarts

3 篇文章 0 订阅

订阅专栏

下载Echarts

npm install echarts

效果一(城市标记点)

在这里插入图片描述

完整代码如下

<template>
  <div class="chartBox">
    <div id="mapChart" style="width:100%,height:100%"></div>
  </div>
</template>

<script>
import Vue from "vue";
import echarts from "echarts";
Vue.prototype.$echarts = echarts;
import china from "echarts/map/json/china.json";
echarts.registerMap("china", china);
export default {
  data() {
    return {};
  },
  mounted() {
    this.getMapChart();
  },
  methods: {
    getMapChart() {
      var dataValue = this.dealWithData();
      var data1 = dataValue.splice(0, 6);
      var myChart = this.$echarts.init(document.getElementById("mapChart"));
      var option = {
        tooltip: {
          show: false,
        },
        backgroundColor: "#fff",
        geo: {
          map: "china",
          roam: false, // 一定要关闭拖拽
          zoom: 1.23,
          center: [105, 36], // 调整地图位置
          label: {
            normal: {
              show: false, //关闭省份名展示
              fontSize: "10",
              color: "rgba(0,0,0,0.7)",
            },
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              areaColor: "#0d0059",
              borderColor: "#389dff",
              borderWidth: 1, //设置外层边框
              shadowBlur: 5,
              shadowOffsetY: 8,
              shadowOffsetX: 0,
              shadowColor: "#01012a",
            },
            emphasis: {
              areaColor: "#184cff",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 5,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        legend: {
          orient: "horizontal",
          height: "50%",
          top: "0%",
          right: "10%",
        },
        series: [
          {
            type: "map",
            map: "china",
            roam: false,
            zoom: 1.23,
            center: [105, 36],
            // geoIndex: 1,
            // aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              // 显示地图省名称
              normal: {
                color: "#389dff",
                formatter: "{b}",
                position: [-12, -1],
                show: true,
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                areaColor: "#0d0059",
                borderColor: "#389dff",
                borderWidth: 0.5,
              },
              emphasis: {
                areaColor: "#17008d",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 5,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
          {
            name: "",
            type: "scatter",
            coordinateSystem: "geo",
            data: dataValue,
            symbol: "circle",
            symbolSize: 5,
            hoverSymbolSize: 10,
            tooltip: {
              formatter(value) {
                return (
                  value.data.name + "<br/>" + "物流量：" + value.data.value[2]
                );
              },
              show: true,
            },
            encode: {
              value: 2,
            },
            label: {
              formatter: "{b}",
              position: "right",
              show: false,
            },
            itemStyle: {
              color: "#0efacc",
            },
            emphasis: {
              label: {
                show: false,
              },
            },
          },
          {
            name: "前五城市标记点动画",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: data1,
            symbolSize: 8,
            tooltip: {
              formatter(value) {
                return (
                  value.data.name + "<br/>" + "门店数：" + value.data.value[2]
                );
              },
              show: true,
            },
            encode: {
              value: 2,
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
              color: "#0efacc",
              period: 9,
              scale: 5,
            },
            hoverAnimation: true,
            label: {
              formatter: "{b}",
              position: "right",
              show: true,
            },
            itemStyle: {
              color: "#0efacc",
              shadowBlur: 2,
              shadowColor: "#333",
            },
            zlevel: 1,
          },
        ],
      };
      myChart.setOption(option);
      myChart.on("click", (params) => {
        console.log(params);
        return;
        this.$router.push({
          path: "/mapEchartProvince",
          query: { provinceName: params.data.ename, province: params.name },
        });
      });
      myChart.setOption(option);
      window.onresize = () => {
        myChart.resize();
      };
    },
    dealWithData() {
      var geoCoordMap = [
        {
          name: "广州",
          value: [113.23, 23.16, 20],
        },
        {
          name: "深圳",
          value: [114.07, 22.62, 60],
        },
        {
          name: "呼和浩特",
          value: [111.65, 40.82, 20],
        },
        {
          name: "宁波",
          value: [121.56, 29.86, 10],
        },
        {
          name: "珠海",
          value: [113.52, 22.3, 10],
        },
        {
          name: "重庆",
          value: [106.54, 29.59, 11],
        },
        {
          name: "杭州",
          value: [120.19, 30.26, 12],
        },
        {
          name: "九江",
          value: [115.97, 29.71, 13],
        },
        {
          name: "哈尔滨",
          value: [126.63, 45.75, 14],
        },
        {
          name: "合肥",
          value: [117.27, 31.86, 15],
        },
        {
          name: "义乌",
          value: [120.06, 29.32],
        },
      ];
      return geoCoordMap;
    },
  },
};
</script>

<style lang="less" scoped>
.chartBox {
  width: 100%;
  height: 100vh;
}

#mapChart {
  width: 100%;
  height: 100%;
}
</style>

效果二(标记点显示数字)

在这里插入图片描述

完整代码如下

<template>
  <div class="chartBox">
    <div id="mapChart" style="width:100%,height:100%"></div>
  </div>
</template>

<script>
import Vue from "vue";
import echarts from "echarts";
Vue.prototype.$echarts = echarts;
import china from "echarts/map/json/china.json";
echarts.registerMap("china", china);
export default {
  data() {
    return {};
  },
  mounted() {
    this.getRandom();
  },
  methods: {
    getRandom() {
      var cityData = [
        {
          name: "北京",
          value: 10,
          ename: "北京",
        },
        {
          name: "天津",
          ename: "天津",
        },
        {
          name: "上海",
          value: 5,
          ename: "上海",
        },
        {
          name: "重庆",
          ename: "重庆",
        },
        {
          name: "河北",
          ename: "河北",
        },
        {
          name: "河南",
          ename: "河南",
        },
        {
          name: "云南",
          ename: "云南",
        },
        {
          name: "辽宁",
          ename: "辽宁",
        },
        {
          name: "黑龙江",
          ename: "黑龙江",
        },
        {
          name: "湖南",
          ename: "湖南",
        },
        {
          name: "安徽",
          ename: "安徽",
        },
        {
          name: "山东",
          ename: "山东",
        },
        {
          name: "新疆",
          ename: "新疆",
        },
        {
          name: "江苏",
          ename: "江苏",
        },
        {
          name: "浙江",
          value: 3,
          ename: "浙江",
        },
        {
          name: "江西",
          ename: "江西",
        },
        {
          name: "湖北",
          ename: "湖北",
        },
        {
          name: "广西",
          value: 23,
          ename: "广西",
        },
        {
          name: "甘肃",
          ename: "甘肃",
        },
        {
          name: "山西",
          ename: "山西",
        },
        {
          name: "内蒙古",
          ename: "内蒙古",
        },
        {
          name: "陕西",
          ename: "陕西",
        },
        {
          name: "吉林",
          ename: "吉林",
        },
        {
          name: "福建",
          ename: "福建",
        },
        {
          name: "贵州",
          ename: "贵州",
        },
        {
          name: "广东",
          value: 53,
          ename: "广东",
        },
        {
          name: "青海",
          ename: "青海",
        },
        {
          name: "西藏",
          ename: "西藏",
        },
        {
          name: "四川",
          ename: "四川",
        },
        {
          name: "宁夏",
          ename: "宁夏",
        },
        {
          name: "海南",
          ename: "海南",
        },
        {
          name: "台湾",
          ename: "台湾",
        },
        {
          name: "香港",
          ename: "香港",
        },
        {
          name: "澳门",
          ename: "澳门",
        },
      ];
      const geoCoordMap = {
        广东: [113.75, 23.04],
        广西: [108.36, 22.8],
      };
      this.convertData = (data) => {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value), //将上面数组的value添加到经纬度后面
              ename: data[i].ename,
            });
            console.log(res);
          }
        }
        return res;
      };
      this.getMapChart(cityData);
    },
    getMapChart(data) {
      var myChart = this.$echarts.init(document.getElementById("mapChart"));
      var option = {
        title: {
          text: "中国地图",
          x: "20",
          top: "20",
          textStyle: {
            color: "#000",
            fontSize: "22",
          },
          subtextStyle: {
            color: "#90979c",
            fontSize: "16",
          },
        },
        backgroundColor: "#fff",
        tooltip: {
          textStyle: {
            color: "#fff",
          },
        },
        geo: {
          //设置geo地图
          map: "china", //此处名字应和registerMap处一样
          label: {
            show: true,
            color: "#fff",
            fontSize: 12,
          },
          itemStyle: {
            normal: {
              areaColor: "#0d0059",
              borderColor: "#389dff",
              borderWidth: 1, //设置外层边框
              shadowBlur: 5,
              shadowOffsetY: 8,
              shadowOffsetX: 0,
              shadowColor: "#01012a",
            },
          },
          silent: true,
        },
        series: [
          {
            name: "拥有分店", //图例名称
            type: "effectScatter", //图例类型
            coordinateSystem: "geo", //使用geo地图
            symbol: "pin", //图例样式
            showEffectOn: "emphasis", //涟漪特效何时触发
            symbolSize: 60, //图例大小,
            rippleEffect: {
              //特效设置
              scale: 1.5,
            },
            label: {
              show: true, //是否显示文本标签
              formatter: "{@value}", //展示名称为value的数据
              color: "#fff",
            },
            encode: {
              value: 2,
            },
            data: this.convertData(data),
          },
        ],
      };
      myChart.on("click", (params) => {
        this.$router.push({
          path: "/mapEchartProvince",
          query: { provinceName: params.data.ename, province: params.name },
        });
      });
      myChart.setOption(option);
      window.onresize = () => {
        myChart.resize();
      };
    },
  },
};
</script>

<style lang="less" scoped>
.chartBox {
  width: 100%;
  height: 100vh;
}

#mapChart {
  width: 100%;
  height: 100%;
}
</style>

三、省级地图

在这里插入图片描述
连接后面带参数：http://192.168.1.3:8081/#/mapEchartProvince?provinceName=guangdong&province=广东
地图的json自行去下载
下载的地图JSON放在项目当中

完整代码如下

<template>
  <div class="chartBox">
    <div id="chartMap" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import Vue from "vue";
import echarts from "echarts";
Vue.prototype.$echarts = echarts;
export default {
  data() {
    return {
      provinceName: "",
      province: "",
    };
  },
  mounted() {},
  activated() {
    this.draw("chartMap");
  },
  methods: {
    // 初始化
    draw(chart) {
      this.provinceName = this.$route.query.provinceName;
      this.province = this.$route.query.province;
      let myChart = this.$echarts.init(document.getElementById(chart));
      let nj_map = require("../utils/省份数据JSON/json/province-json/" +
        this.provinceName);
      this.$echarts.registerMap(this.province, nj_map);
      let citys = [
        {
          name: "延庆区",
          value: "30000",
        },
      ];
      let option = {
        title: {
          text: this.province,
          left: 0,
          textStyle: {
            fontSize: 16,
            color: "#257dff",
          },
        },
        grid: {
          x: 50,
          y: 55,
        },
        tooltip: {
          trigger: "item",
          showDelay: 0,
          transitionDuration: 0.2,
          position: "right",
          confine: true,
        },
        visualMap: {
          left: "left",
          min: 0,
          max: 0,
          inRange: {
            color: [
              "#AFEEEE",
              "#e0f3f8",
              "#B0C4DE",
              "#abd9e9",
              "#74add1",
              "#6495ED",
              "#5A4ABD",
              "#6166b5",
            ],
          },
          text: ["High", "Low"],
          calculable: true,
          show: false,
        },
        series: [
          {
            name: "销售额",
            type: "map",
            roam: true,
            map: this.province, //这里的名字和上面registerMap里的名字要对应
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                  textShadowOffsetX: 0,
                  textShadowOffsetY: 0,
                  textShadowBlur: 5,
                  textShadowColor: "#000",
                },
              },
            },
            itemStyle: {
              emphasis: {
                label: {
                  show: true,
                  textStyle: {
                    color: "#000",
                    textShadowOffsetX: 0,
                    textShadowOffsetY: 0,
                    textShadowBlur: 10,
                    textShadowColor: "#fff",
                  },
                },
                areaColor: "#ff0",
              },
            },
            // 文本位置修正
            textFixed: {
              Alaska: [20, -20],
            },
            data: citys,
            left: "30%",
            top: 0,
            right: "10%",
            bottom: 0,
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style scope lang="less">
.chartBox {
  width: 100%;
  height: 500px;
}
</style>

Vue3版本

在这里插入图片描述
完整代码

<template>
  <div class="box">
    <div class="zhipuTitle">{{state.objData.top_title}}</div>
    <div ref="mapChart" id="mapChart"></div>
    <!-- 流星与星星 -->
    <view id="stars" style="width:40vw;height:30vw;margin: 0;overflow: hidden;">
      <view class="shootingStar" style="top: 100px;left: 200px;"></view>
      <view class="shootingStar" style="top: 150px;left: 300px;"></view>
      <view class="shootingStar" style="top: 50px;left: 500px;"></view>
    </view>
  </div>
</template>
<script setup lang="ts" name="index">
import { App, Plugin, reactive, defineAsyncComponent, computed, ref, onBeforeMount, onMounted, onUnmounted, nextTick, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import https from '/@/api/zhipu_erp_go_apis'
import china from '/@/utils/mapJson/china.json' //https://sucai.hepulan.net/sucai_zs/file/20240202113916-china.json 自行下载到本地/@/utils/mapJson目录下
import * as Echarts from 'echarts'
Echarts.registerMap('china', china)
const mapChart = ref()
const state = reactive({
	coordinate: [{name: "宝安大仟里店",value:["113.86739654","22.57330000"]}],//标记点
	province: [{color: "#4279CD",name: "安徽省"}],//身份变颜色
	province_color: '#08418f',//主题色
	objData: {
		top_title: '全国门店分布图',
	},
})

onMounted(async () => {
	nextTick(() => {
		getMapChart()
		//用不到接口可删除
		//https.post('api/report/getInstrumentPanelStoreCoordinate', {}).then((res) => {
			//console.log(res)
			//state.coordinate = res.data.rows.coordinate
			//state.province = res.data.rows.province
			//state.province_color = res.data.rows.province_color
		//})
	})
})
const getMapChart = () => {
	let arry: any = dealWithData()
	var dataValue = state.coordinate.concat(arry)
	var prov = state.province
	const myChart = Echarts.init(mapChart.value)
	var option = {
		tooltip: {
			show: false,
		},
		backgroundColor: 'transparent',
		geo: {
			map: 'china',
			roam: false, // 一定要关闭拖拽
			zoom: 1.4,
			center: [106, 32], // 调整地图位置
			label: {
				normal: {
					show: false, //关闭省份名展示
					fontSize: '6',
					color: 'rgba(0,0,0,0.7)',
				},
			},
			itemStyle: {
				normal: {
					// areaColor: "#fff",
					// borderColor: "#389dff",
					shadowColor: '#114471', //外轮廓阴影
					// shadowBlur: 10,
					shadowOffsetX: 0,
					shadowOffsetY: 15,
					opacity: 0.7,
				},
				emphasis: {
					// areaColor: "#184cff",
				},
			},
		},
		series: [
			{
				type: 'map',
				map: 'china',
				zoom: 1.4, //1.8 //11
				center: [106, 32], //[105,34] // [114,23]
				geoIndex: 1,
				aspectScale: 0.75, //长宽比
				showLegendSymbol: false, // 存在legend时显示
				data: prov.map((item: any) => ({
					name: item.name,
					itemStyle: {
						normal: {
							areaColor: item.color, // 设置具有标记点的省份的颜色
						},
					},
				})),
				label: {
					// 显示地图省名称
					normal: {
						color: '#fff', //地图省份文字颜色
						formatter: '{b}',
						position: [-12, -1],
						show: true, //是否显示地图文字
						fontSize: 8,
					},
				},
				itemStyle: {
					normal: {
						areaColor: state.province_color || '#08418f', //地图背景
						borderColor: '#aaa', //地图边框
						// areaColor: '#08418f', //地图背景
						// borderColor: '#78cdea', //地图边框
						borderWidth: 0.6,
						// opacity: 0.9
					},

					emphasis: {
						areaColor: '#fff', //鼠标悬浮的背景颜色
						shadowOffsetX: 0,
						shadowOffsetY: 0,
						shadowBlur: 5,
						borderWidth: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)',
						label: {
							show: true,
							color: '#000',
						},
					},
				},
			},
			{
				// name: "城市标记点",
				type: 'effectScatter',
				coordinateSystem: 'geo',
				data: dataValue,
				symbolSize: 4,
				tooltip: {
					formatter(value: any) {
						return (
							// value.data.name + "<br/>" + "门店数：" + value.data.value[2]
							value.data.name
						)
					},
					show: true,
				},
				encode: {
					value: 2,
				},
				showEffectOn: 'render',
				rippleEffect: {
					brushType: 'stroke',
					color: '#0efacc',
					period: 9,
					scale: 5,
				},
				hoverAnimation: true,
				label: {
					formatter: '{b}',
					position: 'right',
					// show: true,
				},
				itemStyle: {
					color: '#0efacc',
					shadowBlur: 1,
					shadowColor: '#333',
				},
				zlevel: 1,
			},
		],
	}
	myChart.setOption(option)
	myChart.on('click', (params: any) => {
		console.log(params)
		return
	})
	myChart.setOption(option)
	window.onresize = () => {
		myChart.resize()
	}
}
const dealWithData = () => {
	var geoCoordMap = [
		{
			name: '湖南长沙店',
			value: [112.936706, 28.236044],
		},
		{
			name: '湖北武汉店',
			value: [114.294891, 30.660248],
		},
		{
			name: '广西南宁店',
			value: [108.331031, 22.8286],
		},
		{
			name: '安徽合肥店',
			value: [117.290039, 31.784216],
		},
		{
			name: '江苏南京店',
			value: [118.87207, 32.082574],
		},
		{
			name: '北京店',
			value: [116.411132, 39.926588],
		},
		{
			name: '四川成都店',
			value: [104.018554, 30.770159],
		},
		{
			name: '浙江杭州店',
			value: [120.190429, 30.353916],
		},
		{
			name: '上海店',
			value: [121.508789, 31.334871],
		},
		{
			name: '重庆店',
			value: [106.567382, 29.554345],
		},
		{
			name: '山东济南店',
			value: [117.02744, 36.67486],
		},
		{
			name: '陕西西安店',
			value: [110.39143, 33.84056],
		},
		{
			name: '河南郑州店',
			value: [113.642578, 34.705493],
		},
		{
			name: '海南海口店',
			value: [110.192871, 20.014645],
		},
		{
			name: '福建福州店',
			value: [119.28955, 26.037041],
		},
		{
			name: '江西南昌店',
			value: [115.861816, 28.690587],
		},
		{
			name: '云南昆明店',
			value: [102.83203, 24.846565],
		},
		{
			name: '天津店',
			value: [117.202148, 39.061849],
		},
		{
			name: '河北石家庄店',
			value: [114.455566, 38.065392],
		},
		{
			name: '福建福州店',
			value: [119.28955, 26.037041],
		},
	]
	return geoCoordMap
}
</script>

<style  scoped lang="scss">
.box {
	padding: 4px;
	box-sizing: border-box;
	width: 100vw;
	height: 100vh;
	background: url('https://sucai.hepulan.net/sucai_zs/images/20230720140834-bj2.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	#mapChart {
		width: 100vw;
		height: 80vh;
	}
	.zhipuTitle {
		position: absolute;
		top: 4.5%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 2vw;
		color: #ffffff;
		font-weight: bold;
		/* opacity: 0.5; */
		z-index: 2;
	}
	#stars {
		width: 50vw;
		position: fixed;
		left: 20%;
		top: 0%;
		z-index: 2;

		.shootingStar {
			display: block;
			width: 1px;
			background: transparent;
			position: relative;
			opacity: 0;
			/*过渡动画*/
			animation: star-fall 2s linear infinite;
			-webkit-animation: star-fall 5s linear infinite;
			-moz-animation: star-fall 5s linear infinite;
		}

		.shootingStar:after {
			content: '';
			display: block;
			border: 0px solid #fff;
			border-width: 0px 90px 2px 90px;
			border-color: transparent transparent transparent rgba(66, 121, 205, 0.5);
			box-shadow: 0 0 2px 0 rgba(49, 96, 152, 0.1);
			/*变形*/
			transform: rotate(-45deg) translate3d(1px, 3px, 0);
			-webkit-transform: rotate(-45deg) translate3d(1px, 3px, 0);
			-moz-transform: rotate(-45deg) translate3d(1px, 3px, 0);
			transform-origin: 0% 100%;
			-webkit-transform-origin: 0% 100%;
			-moz-transform-origin: 0% 100%;
		}

		@keyframes star-fall {
			0% {
				opacity: 0;
				transform: scale(0.5) translate3d(0, 0, 0);
				-webkit-transform: scale(0.5) translate3d(0, 0, 0);
				-moz-transform: scale(0.5) translate3d(0, 0, 0);
			}

			50% {
				opacity: 1;
				transform: translate3d(-200px, 200px, 0);
				-webkit-transform: translate3d(-200px, 200px, 0);
				-moz-transform: translate3d(-200px, 200px, 0);
			}

			100% {
				opacity: 0;
				transform: scale(1.2) translate3d(-300px, 300px, 0);
				-webkit-transform: scale(1.2) translate3d(-300px, 300px, 0);
				-moz-transform: scale(1.2) translate3d(-300px, 300px, 0);
			}
		}
	}
}
</style>