漏刻有时数据可视化Echarts组件开发(41)svg格式地图应用

本文主要是介绍漏刻有时数据可视化Echarts组件开发(41)svg格式地图应用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在这里插入图片描述

1.定义SVG文件

var svg = ``;

2.注册地图函数

Echarts.registerMap是Echarts图表库中用于注册地图的函数。它可以将第三方地图或自定义地图数据与Echarts进行集成,使用Echarts的API进行绘制。使用方法如下:
echarts.registerMap(mapName, geoJson) 参数mapName是地图的名称,geoJson是地图的数据。注册后可以使用这个地图名称在Echarts中使用这个地图。如有需要,建议咨询Echarts官方网站或者查询专业书籍。

echarts.registerMap("organ_diagram", { svg: svg });

3.核心代码

const datas = {from: [300, 400],to: [{name: "永嘉",value: 2,coord: [600, 100],},{name: "乐清",value: 5,coord: [700, 150],},{name: "瑞安",value: 8,coord: [400, 300],},{name: "瓯海",value: 10,coord: [550, 300],},],
};option = {backgroundColor: "#040b1c",title: {text: "Visit Route",left: "center",bottom: 10,},tooltip: {trigger: "item",backgroundColor: "rgba(166, 200, 76, 0.82)",borderColor: "#FFFFCC",showDelay: 0,hideDelay: 0,enterable: true,transitionDuration: 0,extraCssText: "z-index:100",formatter: function (params, ticket, callback) {console.log(params);//根据业务自己拓展要显示的内容var res = "";var name = params.name;var value = params.value[params.seriesIndex + 1] || params.value;res = "<span style='color:#fff;'>" + name + "</span><br/>数据:" + value;return res;},},visualMap: {//图例值控制min: 0,max: 10,calculable: true,show: false,color: ["#f44336", "#fc9700", "#ffde00", "#ffde00", "#00eaff"],textStyle: {color: "#fff",},},geo: {left: 10,right: 10,map: "organ_diagram",itemStyle: {borderWidth: 0,},emphasis: {focus: "none",itemStyle: {areaColor: "#ff0000",},label: {show: false,},},regions: [{name: "map12",itemStyle: {areaColor: "red",color: "red",},},],},series: [],
};myChart.setOption(option);myChart.on("click", function (event) {console.log(event);myChart.dispatchAction({type: "highlight",geoIndex: 0,name: event.name,});
});

参见: makeAPie


@漏刻有时

这篇关于漏刻有时数据可视化Echarts组件开发(41)svg格式地图应用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/173157

相关文章

Spring 请求之传递 JSON 数据的操作方法

《Spring请求之传递JSON数据的操作方法》JSON就是一种数据格式,有自己的格式和语法,使用文本表示一个对象或数组的信息,因此JSON本质是字符串,主要负责在不同的语言中数据传递和交换,这... 目录jsON 概念JSON 语法JSON 的语法JSON 的两种结构JSON 字符串和 Java 对象互转

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

Java中的Lambda表达式及其应用小结

《Java中的Lambda表达式及其应用小结》Java中的Lambda表达式是一项极具创新性的特性,它使得Java代码更加简洁和高效,尤其是在集合操作和并行处理方面,:本文主要介绍Java中的La... 目录前言1. 什么是Lambda表达式?2. Lambda表达式的基本语法例子1:最简单的Lambda表

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Python结合PyWebView库打造跨平台桌面应用

《Python结合PyWebView库打造跨平台桌面应用》随着Web技术的发展,将HTML/CSS/JavaScript与Python结合构建桌面应用成为可能,本文将系统讲解如何使用PyWebView... 目录一、技术原理与优势分析1.1 架构原理1.2 核心优势二、开发环境搭建2.1 安装依赖2.2 验

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

SpringBoot集成Milvus实现数据增删改查功能

《SpringBoot集成Milvus实现数据增删改查功能》milvus支持的语言比较多,支持python,Java,Go,node等开发语言,本文主要介绍如何使用Java语言,采用springboo... 目录1、Milvus基本概念2、添加maven依赖3、配置yml文件4、创建MilvusClient