vue使用Echarts地图展示并标注坐标点、点击进入省市子区域地图

最新推荐文章于 2024-04-18 07:38:06 发布

H.F_0331

最新推荐文章于 2024-04-18 07:38:06 发布

阅读量5.1k

点赞数 2

分类专栏： Echarts 文章标签：前端

本文链接：https://blog.csdn.net/weixin_45660840/article/details/108873244

版权

本文介绍了如何在Vue项目中使用Echarts显示全国地图，并标注坐标点。通过点击地图上的省份，可以进一步展示省市子区域地图。教程涵盖了从安装Echarts依赖到配置HTML、JS和CSS的全过程，同时提供了JSON数据文件的下载链接。

摘要由CSDN通过智能技术生成

1、安装echarts依赖

npm install echarts --save

2、main.js中引入echarts

import echarts from 'echarts';//引入echarts
Vue.prototype.$echarts = echarts;

3、HTML部分

<!-- 地图容器div -->
<div class="overview_mian_mapBox" id="mapChart" ref="mapChart" ></div>

4、JS部分

引入json文件

<!-- 按需引入省市对应json -->
import china from '../../public/mapJson/china' //引入中国地图json数据
import anhui from '../../public/mapJson/anhui'
import aomen from '../../public/mapJson/aomen'
import beijing from '../../public/mapJson/beijing'
import chongqing from '../../public/mapJson/chongqing'
import fujian from '../../public/mapJson/fujian'
import gansu from '../../public/mapJson/gansu'
....

数据及方法

export default {
    data(){
		return{
			map: {
	            center: {
	                 lng: 112,
	                 lat: 37
	             },
	             zoom: 10,
	             markList: [],
	             clickMarkIndex: '',
			},
			mapOption: {
                    tooltip: {
                        trigger: 'item',
                        backgroundColor: 'rgba(11, 24, 84, 0.8)',
                        borderColor: '#0008ff',
                        borderWidth: 1,
                        padding: 15,
                        textStyle:{
                          textAlign: 'center'
                        },
                        formatter: function (params) {
                            var alarmLevel;
                            if(params.data.value[2] > 4){
                                alarmLevel = '正常'
                            }else{
                                alarmLevel = "故障等级：" + params.data.value[2] + "级"
                            }
                            return "点位名称：" + params.data.name + "<br />" + alarmLevel;
                        }
                    },
                    visualMap: {
                        show: true,
                        type: 'continuous',
                        min: 1,
                        max: 5,
                        top: '5%',
                        left: 'center',
                        text: ['正常', '一级警告'],
                        textStyle: {
                            color: '#fff'
                        },
                        //dimension: 2, //指定用数据的『哪个维度』，映射到视觉元素上
                        inverse: true, //是否反转 visualMap 组件
                        seriesIndex: [0,1], //指定取哪个系列的数据，即哪个系列的 series.data。默认取所有系列。
                        color: ['#6ff22d', '#00fff0', '#dedb00', '#ff9c00', '#fd045f'],
                        calculable: true, //显示拖拽手柄
                        realtime: true, //拖拽时，是否实时更新
                        orient: 'horizontal', //水平放置组件
                        align: 'left', //指定组件中手柄和文字的摆放位置
                        hoverLink: true, //鼠标位置对应的数值 在 图表中对应的图形元素，会高亮
                        range:[1, 5]
                    },
                    roamController: {
                        show: true,
                        x: "right",
                        mapTypeControl: {
                            china: true
                        }
                    },
                    geo: {
                        roam: true,
                        zoom: 1.2,
                        label: {
                            normal: {
                                show: false,
                                color: '#fff'
                            },
                            emphasis: {
                                show: true,
                                color: '#eeeeee'