Echarts

2023-07-10 00:44| 来源: 网络整理| 查看: 265

中国地图实现效果图创建echartChina.vue组件使用echartChina.vue组件修改标记图标为图片

实现效果图

在这里插入图片描述

这是一个有阴影的,并且根据坐标点被标记的地图展示，下面我们就把实现的代码贴出来，老样子，还是开袋即食！

创建echartChina.vue组件

1.点击下载中国地图json文件

把中国地图的json数据下载下来，放到项目本地中的utils文件夹下；位置随意，想放哪里都可以，能找到就行！

2.先写一个echartChina.vue组件为了方便复用，我们可以先写一个地图组件，因为要实现地图阴影的效果，所以组件中对地图渲染了两次进行重叠，第一次是初始化地图阴影，第二次初始化就是实现地图功能效果的；

组件全部代码如下，直接粘贴即可；

import * as echarts from 'echarts'; import china from '@/utils/china.json' echarts.registerMap('china', china) export default { data() { return { }; }, methods: { //初始化中国地图 initEchartMap() { let mapDiv = document.getElementById('china_map'); let myChart = echarts.init(mapDiv); var options options = { tooltip: { show:false, triggerOn: "mousemove", //mousemove、click padding:8, backgroundColor:'rgba(0,0,0,0.6)', borderWidth:0, textStyle:{ color:'#fff', fontSize:12 }, }, geo: { map: "china", roam: false,// 一定要关闭拖拽 zoom: 1.6, center: [102, 36], // 调整地图位置 aspectScale: 0.80, //长宽比 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: 6, shadowOffsetY: 12, shadowOffsetX: -5, shadowColor: "#01012a" }, emphasis: { areaColor: "#184cff", shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 5, borderWidth: 0, shadowColor: "rgba(0, 0, 0, 0.5)" } } }, series:[ { type: "map", map: "china", roam: false, zoom: 1.6, center: [102, 36], data:[], // geoIndex: 1, aspectScale: 0.80, //长宽比 showLegendSymbol: false, // 存在legend时显示 label: { normal: { show: false }, emphasis: { show: false, textStyle: { color: "#fff" } } }, 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)" } } } ] } myChart.setOption(options); //随着屏幕大小调节图表 window.addEventListener("resize", () => { myChart.resize(); }); }, initChina(echartData){ let mapDiv = document.getElementById('china_map'); let myChart = echarts.init(mapDiv); var dataValue = echartData; var data1 = dataValue.splice(0, 4); var option = { series: [ { type: "map", map: "china", roam: false, zoom: 1.6, center: [102, 36], aspectScale: 0.80, //长宽比 showLegendSymbol: false, // 存在legend时显示 label: { normal: { show: false }, emphasis: { show: false } }, itemStyle: { normal: { areaColor: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(36,83,255,1)' }, { offset: 1, color: 'rgba(10,29,255,1)' }], global: false }, 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: 10, hoverSymbolSize: 10, tooltip: { formatter(value) { return value.data.name + "" + "设备数：" + "22"; }, show: true }, encode: { value: 2 }, label: { formatter: "{b}", position: "right", show: false }, itemStyle: { color: "#e0eb40" }, emphasis: { label: { show: false } } }, //下面是前五产生涟漪动画 { name: "Top 5", type: "effectScatter", coordinateSystem: "geo", data: data1, symbolSize: 15, tooltip: { formatter(value) { return value.data.name + "" + "设备数：" + "22"; }, show: true }, encode: { value: 2 }, showEffectOn: "render", rippleEffect: { brushType: "stroke", color: "#e0eb40", period: 9, scale: 5 }, hoverAnimation: true, label: { formatter: "{b}", position: "right", show: true }, itemStyle: { color: "#e0eb40", shadowBlur: 2, shadowColor: "#333" }, zlevel: 1 } ] }; myChart.setOption(option); //随着屏幕大小调节图表 window.addEventListener("resize", () => { myChart.resize(); }); } } }; #china_map{ height: 100%; } 使用echartChina.vue组件

在需要使用地图的组件，直接引入即可，然后把需要展示的坐标地点传给地图组件，全部代码如下：

import EchartChina from '@/components/bigEcharts/echartChina' export default { data(){ return { geoCoordMap:{ 哈尔滨: [126.63, 45.75], 北京: [116.46, 39.92], 广州: [113.23, 23.16], ... } } }, components:{ EchartChina, }, mounted(){ const {geoCoordMap} = this this.initChinaMap(geoCoordMap) }, methods:{ dealWithData(geoCoordMap) { var mapData = geoCoordMap var data = []; for (var key in mapData) { data.push({ name: key, value: mapData[key] }); } return data; }, initChinaMap(geoCoordMap){ var chinaData = this.dealWithData(geoCoordMap) this.$nextTick(() => { this.$refs.myEchart4.initEchartMap() this.$refs.myEchart4.initChina(chinaData) }) } } } .echartChina{ height:100%; width: 100%; position: relative; } 修改标记图标为图片

在这里插入图片描述

... //引入图片 import gaoji from '@/assets/images/gaoji.png' import chache from '@/assets/images/chache.png' ... { name: "", type: "scatter", coordinateSystem: "geo", data: dataValue, symbol: function(value,param){ if(param.data.type == 0){ return "image://" + chache; }else{ return "image://" + gaoji; } }, symbolSize: 20, hoverSymbolSize: 20, },

【本文地址】

公司简介

联系我们