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

news2025/1/22 13:12:56

效果:直接上效果图

在这里插入图片描述

环境: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.coloradmin.cn/o/1837562.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

音频基础知识和音频指标

音频基础知识 声音 声音&#xff08;sound)是由物体振动产生的声波。物体在一秒钟之内振动的次数叫做频率&#xff0c;单位是赫兹&#xff0c;字母Hz。人耳可以识别的声音频率在 20 Hz~20000 Hz之间&#xff1b; 声音三要素&#xff1a; 响度 响度&#xff0c;…

谷歌Google广告开户是怎么收费的?

谷歌Google广告无疑是企业拓展全球视野、精准触达目标客户的强大引擎。而作为这一旅程的启航站&#xff0c;开户流程的便捷性与成本效益成为了众多企业关注的焦点。云衔科技&#xff0c;作为数字化营销解决方案与SaaS软件服务的领军者&#xff0c;正以其专业、高效的服务体系&a…

【凤凰房产-注册安全分析报告-缺少轨迹的滑动条】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 1. 暴力破解密码&#xff0c;造成用户信息泄露 2. 短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉 3. 带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造…

Eureka 学习笔记(1)

一 、contextInitialized() eureka-core里面&#xff0c;监听器的执行初始化的方法&#xff0c;是contextInitialized()方法&#xff0c;这个方法就是整个eureka-server启动初始化的一个入口。 Overridepublic void contextInitialized(ServletContextEvent event) {try {init…

Win32:第一个窗口程序-注册窗口类(Part.2)

在part 1中我们阐述了窗口模板程序中的相关宏、全局函数和相关函数声明后我们Part2就来说一下part 1中声明的一个函数MyRegisterClass注册窗口类函数&#xff08;函数中也使用到了定义的一些全局变量&#xff09;&#xff0c;为什么要注册窗口类在part 1中已经阐述过了&#xf…

本地快速部署 SuperSonic

本地快速部署 SuperSonic 0. 引言1. 本地快速部署 supersonic2. 访问 supersonic3. 支持的数据库4. github 地址 0. 引言 SuperSonic融合Chat BI&#xff08;powered by LLM&#xff09;和Headless BI&#xff08;powered by 语义层&#xff09;打造新一代的BI平台。这种融合确…

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…

如何实现埋点日志精准监控

作者 | 张小七 导读 日志中台承载了百度千亿量级PV的埋点流量&#xff0c;如何对这些流量进行准确监控&#xff0c;并支持个性化字段的抽取、下钻&#xff0c;是日志中台的一大难题。本文简单介绍了日志中台的基本概念及实时流架构&#xff0c;并基于此深入讲解了低成本实现可扩…

【调试笔记-20240618-Windows- Tauri 调试中关闭自动重构的功能】

调试笔记-系列文章目录 调试笔记-20240618-Windows- Tauri 调试中关闭自动重构的功能 文章目录 调试笔记-系列文章目录调试笔记-20240618-Windows- Tauri 调试中关闭自动重构的功能 前言一、调试环境操作系统&#xff1a;Windows 10 专业版调试环境调试目标 二、调试步骤搜索相…

【CSS in Depth2精译】1.1.2 行内样式~1.1.3 选择器的优先级

文章目录 1.1.2 行内样式1.1.3 选择器的优先级1.1.3.1 优先级的写法1.1.3.2 关于优先级的思考 1.1.2 行内样式 如果无法通过样式表来源规则解决样式冲突&#xff0c;浏览器则会考察它们是否通过 行内样式 作用于该元素。当使用 HTML 的 style 属性声明样式时&#xff0c;该样式…

kaggle notebook和jupyter notebook读取csv

kaggle本地比赛用打开notebook的示例代码可以获取当前比赛的文件数据路径&#xff0c;进而后续直接复制读取 jupyter notebook读取csv 直接下载数据集到电脑上&#xff0c;并用本地路径读取就行。

ElasticSearch学习篇13_《检索技术核心20讲》进阶篇之LSM树

背景 学习极客实践课程《检索技术核心20讲》https://time.geekbang.org/column/article/215243&#xff0c;文档形式记录笔记。 内容 磁盘和内存数据读取特点 工业界中数据量往往很庞大&#xff0c;比如数据无法全部加载进内存&#xff0c;无法支持索引的高效实时更新&…

QT day04

一、思维导图 二、登录界面优化 代码&#xff1a; 界面&#xff1a; *{background-color: rgb(255, 255, 255); }QFrame#frame{border-image: url(:/Logo/shanChuan.jpg);border-radius:15px; }#frame_2{background-color: rgba(110, 110, 110, 120);border-radius:15px; }Q…

ionic 项目通过 android studio 打开报错 capacitor.settings.gradle 文件不存在

问题出现 原因分析 在程序相应的目录上面&#xff0c;没有找到对应的配置文件&#xff0c;但是这个文件不是我们自己生成的&#xff0c;而是通过 ionic 编译之后生成。 处理方案 先执行 ionic build&#xff0c;将 ionic 项目打包出来然后执行 npx cap sync 再使用 Android…

【小白专用 已验证24.6.18】C# SqlSugar操作MySQL数据库实现增删改查

【小白专用24.6.18】C# SqlSugar&#xff1a;连接数据库实现简单的&#xff0c;增、删、改、查-CSDN博客 SqlSugar .Net ORM 5.X 官网 、文档、教程 - SqlSugar 5x - .NET果糖网 SqlSugar项目创建 通过NuGet包管理器搜索SqlSugar&#xff08;MySql还要安装MySql.Data、Newton…

C++ | Leetcode C++题解之第165题比较版本号

题目&#xff1a; 题解&#xff1a; class Solution { public:int compareVersion(string version1, string version2) {int n version1.length(), m version2.length();int i 0, j 0;while (i < n || j < m) {long long x 0;for (; i < n && version1[…

HTML+CSS+PHP实现网页留言板功能(需要创建数据库)

话说前头&#xff0c;我这方面很菜滴。这是我网页作业的一部分。 1.body部分效果展示&#xff08;不包括footer&#xff09; 2、代码 2.1 leaving.php&#xff08;看到的网页&#xff09; <!DOCTYPE html> <html lang"en"> <head> <met…

Flask之模板

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 目录 一、模板的基本用法 1.1、创建模板 1.2、模板语法 1.3、渲染模板 二、模板辅助工具 2.1、上下文 2.2、全局对象 2.3、过滤器 2.4、测试…

低市值Pow赛道解析,探寻百倍潜力项目

随着铭文的火爆出圈&#xff0c;比特币减半的到来&#xff0c;关于Pow赛道的讨论也在变得火热&#xff0c;不少投资机构都将Pow赛道作为2024年分析的重点。Pow赛道又来已久&#xff0c;不少项目的市值都超过10亿美元&#xff0c;而对于大多数投资者来说&#xff0c;低市值高回报…

Mp3文件结构全解析(一)

Mp3文件结构全解析(一) MP3 文件是由帧(frame)构成的&#xff0c;帧是MP3 文件最小的组成单位。MP3的全称应为MPEG1 Layer-3 音频 文件&#xff0c;MPEG(Moving Picture Experts Group) 在汉语中译为活动图像专家组&#xff0c;特指活动影音压缩标准&#xff0c;MPEG 音频文件…