【记录44】【案例】echarts地图

效果:直接上效果图

在这里插入图片描述

环境:vue、echarts@4.1.0

在这里插入图片描述

源码

// 创建容器
<template>
    <div id="center"></div>
</template>
//设置容器大小,
    #center { width: 100%; height: 60vh; }

这里需注意:笔者在echarts5.4.2版本添加是失败的,查看了下下载的echarts缺少部分文件,导致无法加载,正确的版本在环境那块写了,

<script>
// 图型加载所需资源和渲染事件
import * as echarts from "echarts"
import '../../node_modules/echarts/map/js/china.js' // 注意
require("echarts/lib/chart/bar");
require("echarts/lib/chart/line");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/chart/pie");
require("echarts/lib/component/markLine");
require("echarts/lib/component/geo");
require("echarts/lib/chart/scatter");
require("echarts/lib/chart/map");
// echarts.registerMap('china', china)

export default {
    name:"",
    components:{},
    data(){
        return {
            
        }
    },
    created(){
        
    },
    methods:{
       initMap(){
           // 基于准备好的dom,初始化echarts实例
            var chinaMap = echarts.init(document.getElementById("center"));
            window.onresize = chinaMap.resize; // 窗口或框架被调整大小时执行chinaMap.resize
            chinaMap.setOption({
                // 进行相关配置
                tooltip: {
                    // trigger: 'axis',
                    formatter:function(params){
                        var pd = params.data
                        var res ='<div>'+ pd.name + '</div><div>总预报:' + pd.value + '次</div>----------<br/><div>所在地+名称:' + pd.label + '</div><div>预报:' + pd.val + '次</div>'
                        return res
                    },
                    axisPointer: {
                        lineStyle: {
                            color: 'rgba(0, 255, 233,0)',
                        },
                    },
                }, // 鼠标移到图里面的浮动提示框
                grid:{
                    top: '5%', //距上边距
                    left: '5%', //距离左边距
                    right: '5%', //距离右边距
                    bottom: '5%', //距离下边距
                },
                dataRange: {
                    show: false,
                    min: 0,
                    max: 1000,
                    text: ["High", "Low"],
                    realtime: true,
                    calculable: true,
                  color: ["orangered", "#FF9B52", "#FFD068"],
                },
                geo: {
                    // 这个是重点配置区
                    map: "china", // 表示中国地图
                    roam: true,
                    label: {
                        normal: {
                        show: true, // 是否显示对应地名
                        textStyle: {
                            color: "#fff",
                        },
                        },
                    },
                    itemStyle: {
                        normal: {
                            borderColor: "#293171",
                            borderWidth: "2",
                            areaColor: "#2B6FD5",
                            },
                            emphasis: {
                            areaColor: '#2BD5D5',
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 20,
                            borderWidth: 0,
                            shadowColor: "rgba(0, 0, 0, 0.5)",
                        },
                    },
                },
                series: [
                {
                    type: "scatter",
                    coordinateSystem: "geo", // 对应上方配置
                },
                {
                    name: "探测总次数", // 浮动框的标题
                    type: "map",
                    geoIndex: 0,
                    data: [
                    
                        {
                            name: "湖北",
                            value: 0,
                            label:'恩施-351',
                            val:0,
                        },
                        {
                            name: "云南",
                            value: 0,
                            label:'邵通市鲁甸县-都香',
                            val:0,
                        },
                        {
                            name: "广西",
                            value: 0,
                            label:'柳州市-平武',
                            val:0,
                        },
                        {
                            name: "重庆",
                            value: 88,
                            label:'武隆区羊角镇-渝湘',
                            val:88,
                        },
                        {
                            name: "贵州",
                            value: 0,
                            label:'黔南州贵定县德新镇-贵黄',
                            val:0,
                        },
                    ],
                }],
            });

        }
    },
    mounted(){
        // this.getdata()
        this.$nextTick(() => {
            this.initMap();
        });
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/721527.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何轻松进行照片压缩?5个软件帮助你快速进行照片压缩

如何轻松进行照片压缩&#xff1f;5个软件帮助你快速进行照片压缩 照片压缩是一种常见的图像处理操作&#xff0c;旨在减小图像文件的大小而尽量保持图像质量。有许多软件和工具可供选择&#xff0c;每个工具都有其独特的压缩算法和功能。以下是一些关于照片压缩的详细信息&am…

微信小程序毕业设计-小区疫情防控系统项目开发实战(附源码+论文)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;微信小程序毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计…

Python 数据可视化 散点图

Python 数据可视化 散点图 import matplotlib.pyplot as plt import numpy as npdef plot_scatter(ref_info_dict, test_info_dict):# 绘制散点图&#xff0c;ref横&#xff0c;test纵plt.figure(figsize(80, 48))n 0# scatter_header_list [peak_insert_size, median_insert…

多模态大模型通用模式

MM-LLMs&#xff08;多模态大模型&#xff09;是目前比较新的和实用价值越发显著的方向。其指的是基于LLM的模型&#xff0c;具有接收、推理和输出多模态信息的能力。这里主要指图文的多模态。 代表模型&#xff1a;GPT-4o、Gemini-1.5-Pro、GPT-4v、Qwen-VL、CogVLM2、GLM4V、…

JCR一区 | Matlab实现GAF-PCNN、GASF-CNN、GADF-CNN的多特征输入数据分类预测/故障诊断

JJCR一区 | Matlab实现GAF-PCNN、GASF-CNN、GADF-CNN的多特征输入数据分类预测/故障诊断 目录 JJCR一区 | Matlab实现GAF-PCNN、GASF-CNN、GADF-CNN的多特征输入数据分类预测/故障诊断分类效果格拉姆矩阵图GAF-PCNNGASF-CNNGADF-CNN 基本介绍程序设计参考资料 分类效果 格拉姆…

java架构设计-COLA

参考&#xff1a;https://github.com/alibaba/COLA 架构 要素&#xff1a;组成架构的重要元素 结构&#xff1a;要素直接的关系 意义&#xff1a;定义良好的结构&#xff0c;治理应用复杂度&#xff0c;降低系统熵值&#xff0c;改善混乱状态 创建COLA应用&#xff1a; mvn …

Centos8.5安装mysql8.0

1.检查是否有安装mysql数据库&#xff08;如果有mysql或者mariadb数据库&#xff0c;则卸载&#xff09; [rootmyhost ~]# rpm -qa |grep mysql [rootmyhost ~]# rpm -qa | grep mariadb [rootmyhost ~]# ll /etc/my.cnf ls: 无法访问/etc/my.cnf: No such file or directory…

猫头虎分享已解决Bug || 前端领域技术问题解析

原创作者&#xff1a; 猫头虎 作者微信号&#xff1a; Libin9iOak 作者公众号&#xff1a; 猫头虎技术团队 更新日期&#xff1a; 2024年6月6日 博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &…

python中scrapy

安装环境 pip install scrapy 发现Twisted版本不匹配 卸载pip uninstall Twisted 安装 pip install Twisted22.10.0 新建scrapy项目 scrapy startproject 项目名 注意&#xff1a;项目名称不允许使用数字开头&#xff0c;也不能包含中文 eg: scrapy startproject scrapy_baidu_…

Redis数据结构学习

Redis 关于redis相关的技术文章我一直没什么思路 直到最近的端午节,我偶然和一个程序员朋友聊到了关于redis数据结构相关的知识点, 所以我决定写一篇文章记录一下 首先我们需要知道redis支持哪些数据类型 Strings (字符串)Lists(列表)Hashes(哈希)Sets(集合)Sorted Sets(有序…

Transformer模型:未来的改进方向与潜在影响

Transformer模型&#xff1a;未来的改进方向与潜在影响 自从2017年Google的研究者们首次提出Transformer模型以来&#xff0c;它已经彻底改变了自然语言处理&#xff08;NLP&#xff09;领域的面貌。Transformer的核心优势在于其“自注意力&#xff08;Self-Attention&#xf…

【C语言习题】31.冒泡排序

文章目录 作业标题作业内容2.解题思路3.具体代码 作业标题 冒泡排序 作业内容 实现一个对整形数组的冒泡排序 2.解题思路 先了解一下冒泡排序&#xff1a; 两两相邻的元素进行比较&#xff0c;如果前面元素大于后面元素就交换两个元素的位置&#xff0c;最终的结果是最大的…

RERCS系统开发实战案例-Part08 FPM 应用程序的表单组件(From UIBB)与列表组件(List UIBB)组合的创建

1、新建From UIBB的FPM Application的快速启动面板 备注&#xff1a;该步骤可第一步操作&#xff0c;也可最后一步操作&#xff0c;本人习惯第一步操作。 1&#xff09;使用事务码 LPD_CUST&#xff0c;选择对应的角色与实例进入快速启动板定制页面&#xff1b; 2&#xff09…

pg表空间和mysql表空间的区别

一、表空间的定义 1、在pg中表空间实际上是为表指定一个存储的目录。并且在创建数据库时可以为数据库指定默认的表空间。创建表和索引时可以指定表空间&#xff0c;这样表和索引就可以存储到表空间对应的目录下了。 在pg中一个库中可以有多个表空间&#xff0c;一个表空间可以…

U盘量产经历二——phisonPS2251-70(PS2270)

写在前面&#xff1a; 量产相关的BBS看了挺多&#xff0c;phison群联的芯片PS2251-70(PS2270)的量产工具比较少&#xff0c;而且很难下载。这里我访问了国外的网站下载来了&#xff0c;也贴出来给童鞋们取用。 以下是记录的量产过程&#xff1a; https://www.usbdev.ru 工具…

Linux操作系统学习:day04

内容来自&#xff1a;Linux介绍 视频推荐&#xff1a;[Linux基础入门教程-linux命令-vim-gcc/g -动态库/静态库 -makefile-gdb调试]( 目录 day0422、通过文字设定法修改用户对文件的操作权限23、通过数字设定法修改文件的权限24、修改文件所有者和所属组25、tree—查看目录内…

国际荐酒师香港协会受邀参加2024年美国独立日庆祝活动

国际荐酒师&#xff08;香港&#xff09;协会受邀参加2024年美国独立日庆祝活动促进世界酒中国菜的全球化发展 2024年6月18日&#xff0c;国际荐酒师&#xff08;香港&#xff09;协会大中华区驻广州办事处荣幸地接受了美国驻广州总领事馆 Nicholas Burns大使和Lisa Heller总领…

python修改pip install 默认安装路径

第一步:通过win菜单,找到Prompt,点击进入 第二步:在cmd里输入 python -m site获得: D:\ProgramData\Anaconda3 ----》是Anaconda安装的位置USER_BASE: C:\Users\kevin… ----》表示默认路径在C盘USER_SITE: C:\Users\kevin… ----》表示默认路径在C盘1.2 修改pip 默认安…

使用Minikube部署Kubernetes环境

使用Minikube部署Kubernetes环境 1. Minikube简介 Minikube是一个轻量级的Kubernetes实现&#xff0c;它在本地运行一个Kubernetes集群&#xff0c;可以是单节点或者集群环境&#xff0c;主要用于开发和测试。Minikube支持Kubernetes的所有主要功能&#xff0c;包括Dashboard…

C#——方法的参数列表ref、out、params、in详情

在C#中&#xff0c;方法参数列表是在定义方法时指定的&#xff0c;用于接收传递给方法的数据。参数列表包括参数类型和参数名。参数可以是必需的&#xff08;必须有值&#xff09;&#xff0c;也可以是可选的&#xff08;可以有默认值&#xff09;。 方法的参数列表 1. 值参数…