-
echarts图表接入天地图,高德地图,geo解决方案
2017-11-27 11:07:05echarts图表接入天地图,高德地图,geo解决方案!!!! echarts图表接入天地图,高德地图,geo解决方案!!!! -
标准地形图制作系列--接图表的制作方法
2016-11-03 08:02:27标准地形图制作系列--接图表的制作方法 by 李远祥 接图表是标准地形图制作常用的方式,对于网络地图来说,从来不会出现接图表这东西,但是在标准地形图里面,这却是强制的规范。虽然很多行外人员都不清楚接图表是...标准地形图制作系列--接图表的制作方法
by 李远祥
接图表是标准地形图制作常用的方式,对于网络地图来说,从来不会出现接图表这东西,但是在标准地形图里面,这却是强制的规范。虽然很多行外人员都不清楚接图表是什么东西,但实际上接图表他们早就在中学的地理课本或者是街边买来的地图册上看到过(尽管这些地图不太规范)。
接图表的作用就不在这里罗嗦了,一般关注该话题的人都知道它的表达方式,这里不做论述。下面主要介绍一下如何在ArcGIS里面实现接图表。由于没有标准的数据,这里用一份比较简单的数据实现其操作步骤。
先说一下主要思路:首先要针对数据制作好地形图,这是前提条件。然后利用行政边界图层,单独制作一个地图,并插入到做好的地形图中,并作为接图表放置在地图的右上角。最后调整接图表的显示范围,让其范围与地形图范围一致。
制作地形图的过程这里省略,那是一个非常好时间和精力的事情,不要问我怎么知道,具体按照地形图规范做一下就知道有多苦逼。下面假设已经做好一张标准的地形图,我是说假设`(*∩_∩*)′ 如下图所示
在【文件】--【页面和打印设置】先设置好打印的纸张大小,比例尺之类的就在图框中设置好对应的参考比例。然后调整好显示的范围等。切换到【布局】视图,这样才可以看到效果。
接下来就是需要插入接图表的关键步骤了。很多人都不会明白ArcGIS的【数据框】是什么概念,就是我们经常看到的在图层最上面的黄色的图标,感觉上有图层和图层组的位置,但【数据框】看起来一点作用都没有。下图红色箭头指向的就是【数据框】
在哲学上来说,存在的都是有价值的,何况数据框已经存在ArcGIS十多个版本中。数据框的概念其实可以看作是一张地图的组织,只不过很多人习惯性的将不同的地图放置在不同的Mxd中组织起来,而数据框的作用就是将多个地图放在同一个MXD中,需要查看不同的地图的时候可以自动激活(当然,这个是在数据视图中的做法)。而另一种非常重要的价值就是将多个地图显示在同一个纸面上,恰好接图表就是其中的一种多个地图在同一张图纸中的表现形式,只不过是一张是精细的地图,另一张类似于鹰眼的简图。
那接下来就是插入接图表的重要步骤。在菜单【插入】,可以插入一个【数据框】,如下图
标准动作是将该新建的数据框命名为“接图表”,然后选择接图表数据框,添加接图表图层。我在这里就用一个行政区界来表示,为了方便显示,将行政边界填充设置为无颜色,只显示边线。当然,如果有的只是边线数据,直接加载设置边线样式就行了。如下图
可以看到,大图中已经加入了一个小图,这个小图就是我们所说的接图表。使用选择工具,就是黑色箭头工具,将接图表移动到右上角位置,并且点击右键--属性,将修改接图表的图框样式和背景。一般将图框样式设置为简单的线,背景设置为纯白色,如下图
这样,接图表的基本模样就出来了。然后对接图表的图层显示一下标注信息,这样就像模象样了。再进一步就是要将两个图的范围对应起来,这一次就需要使用【标准工具】里面的缩放工具进行调整(千万不要用【布局】工具条上的工具,那只是相当于放大纸张在屏幕的显示而已)
最后,如果想两个数据框的范围能够对上,除了手动的方式之外,可以通过arcpy脚本来实行。可以参考mapping模块的具体方法
写完脚本之后可以在【地理处理】的Python中执行脚本进行对照。这里不做详细论述,在以后章节会有arcpy.mapping 模块的说明。
总结:接图表其实不难实现,主要是很多人不清楚使用多个数据框可以实现该效果。
-
arcgis 10.0 接图表(1:10万)
2016-04-29 12:39:14arcgis 10.0 接图表(1:10万),地图分幅 -
接合图表 工具
2014-09-19 10:49:36坐标系统(北京54、西安80坐标系)、中央经线、分带方法(3度带或6度带)、地图比例尺(支持地图比例尺有1:100万、1:50万、1:25万、1:10万、1:5万、1:2.5万、1:1万和1:5000比例尺)、坐标是否加带号生成对应接... -
Arcgis接合图表工具
2009-07-16 22:49:04坐标系统(北京54、西安80坐标系)、中央经线、分带方法(3度带或6度带)、地图比例尺(支持地图比例尺有1:100万、1:50万、1:25万、1:10万、1:5万、1:2.5万、1:1万和1:5000比例尺)、坐标是否加带号生成对应接... -
antv,图表和地图
2020-07-27 15:55:15在这里补充一种新的图表地图框架,虽然做得不如echarts强大,适合快速开发节奏,让前端程序员在除了echarts以外还可以多一种选择。 antv antv是蚂蚁金服团队打造的图表和地图框架(用过antd的同学应该知道这个团队)...前言
echarts是比较流行的图标和地图框架,文档清晰,灵活,满足各种自定义。众多的api接口,让使用者犹如大海捞针,每一个细节都需要通过api慢慢调整,耗费开发者大量的时间精力。
在这里补充一种新的图表地图框架,虽然做得不如echarts强大,适合快速开发节奏,让前端程序员在除了echarts以外还可以多一种选择。
antv
antv是蚂蚁金服团队打造的图表和地图框架(用过antd的同学应该知道这个团队)。
官方网站:https://antv.vision/zh/about
antv包含
G2(就是图表渲染,条形图,饼图,折线图等,里面有一些比较好看的图表设计,可以直接拿来用。)
G2地址 https://g2.antv.vision/zh/examples/gallery
G6 (思维导图,流程展示,树状图,)
G6地址 https://g6.antv.vision/zh/examples/tree/compactBox
F2 (针对移动端图表进行适配)
F2地址 https://f2.antv.vision/zh/examples/candlestick/basic
L7(地图,支持全球,全国(目前只支持中国),省,市,)
L7地址 https://l7.antv.vision/zh/examples/gallery
正如最开始所说,antv不如echarts全面,但参照了部分echarts的api借口,在使用过程能看到和echarts类似的api和相似的功能。antv快速生成图表
antv的优势在于快速生成代码,配置图表的功能chartCub魔方(图表魔方,图表生成器)。
echarts自定义图表,是先写配置api才能看到生成图表的样式,而图表魔方为用户提供预览图表的功能,通过可视化界面,对图表进行样式配置并生成相应的代码。
图表魔方地址 https://chartcube.alipay.com/guide
这是未来前端发展的一种趋势,可视化配置,会慢慢代替许多代码的复制粘贴。虽然目前图表魔方只支持比较基础的图标配置,比较个性化的图表还是需要使用echarts。笔者只用过G2和L7,其它内容暂不做展示,如果以后也有使用,会更新本篇博客。
G2使用
安装 @antv/g2plot
yarn add @antv/g2plot
npm i @antv/g2plot --save以下代码都是通过配置后图表魔方自动生成的代码 //导入G2Plot import * as G2Plot from '@antv/g2plot'; //选择图表生成的dom节点,图表会生成到这个dom节点内。 //唯一需要注意的是,如果是vue或者react框架,进行这一步操作的时候,一定要确定这dom节点已经渲染成功,并且能够被找到。 const container = document.getElementById('app'); //需要渲染的数据,字段名和数据结构不可更改 const data = [ { "series": "门店一", "x": "家具家电", "y": 185 }, { "series": "门店一", "x": "粮油副食", "y": 509 }, { "series": "门店一", "x": "美容洗护", "y": 901 }, { "series": "门店一", "x": "母婴用品", "y": 645 }, { "series": "门店一", "x": "进口食品", "y": 98 }, { "series": "门店一", "x": "食品饮料", "y": 724 }, { "series": "门店一", "x": "家庭清洁", "y": 471 }, { "series": "门店二", "x": "家具家电", "y": 276 }, { "series": "门店二", "x": "粮油副食", "y": 186 }, { "series": "门店二", "x": "美容洗护", "y": 648 }, { "series": "门店二", "x": "母婴用品", "y": 484 }, { "series": "门店二", "x": "进口食品", "y": 21 }, { "series": "门店二", "x": "食品饮料", "y": 721 }, { "series": "门店二", "x": "家庭清洁", "y": 917 } ]; /** 图表配置,代码由图表魔方自动生成,直接复制粘贴就好了 */ const config = { /** 标题 */ title: { visible: true, text: '考试科目柱状图', }, /** 副标题 */ description: { visible: true, text: '考试科目学生参加百分比', }, legend: { flipPage: false, }, xAxis: { title: { visible: false, }, }, yAxis: { title: { visible: false, }, }, /** 自使用父级的宽高 */ forceFit: true, /** 也可以自定义图表的宽高 */ // width: 570, // height: 360, xField: 'x', yField: 'y', stackField: 'series', /** 两种渲染颜色 */ color: ['#e9e9e9', '#5b8ff9'], }; /** 渲染实例 */ const plot = new G2Plot.PercentStackedColumn(container, { data: chartsData, ...config, }); plot.render();
如果是使用其它框架,就需要考验最基础的代码改造能力,echarts图表魔方,能够提供的是原生的js代码。
改造的完整react框架组件
import React, { useEffect, useState } from 'react'; import * as G2Plot from '@antv/g2plot'; /** 图标配置,代码由图表魔方自动生成 */ const config = { /** 标题 */ title: { visible: true, text: '考试科目柱状图', }, /** 副标题 */ description: { visible: true, text: '考试科目学生参加百分比', }, legend: { flipPage: false, }, xAxis: { title: { visible: false, }, }, yAxis: { title: { visible: false, }, }, /** 自使用父级的宽高 */ forceFit: true, /** 也可以自定义图表的宽高 */ // width: 570, // height: 360, xField: 'x', yField: 'y', stackField: 'series', /** 两种渲染颜色 */ color: ['#e9e9e9', '#5b8ff9'], }; const PaperRadar: React.FC = () => { type ChartsDataType = { series: string; x: string; y: number; }[]; /** 数据渲染 */ const [chartsData, setChartsData] = useState<ChartsDataType>([] as ChartsDataType); /** 渲染函数 */ const chartsRender = () => { const container: HTMLElement = document.getElementById('exam-bar') as HTMLElement; const plot = new G2Plot.PercentStackedColumn(container, { data: chartsData, ...config, }); plot.render(); }; useEffect(() => { setChartsData([ { series: '门店一', x: '家具家电', y: 777, }, { series: '门店一', x: '粮油副食', y: 934, }, { series: '门店一', x: '美容洗护', y: 454, }, { series: '门店一', x: '母婴用品', y: 999, }, { series: '门店一', x: '进口食品', y: 98, }, { series: '门店一', x: '食品饮料', y: 317, }, { series: '门店一', x: '家庭清洁', y: 307, }, { series: '门店二', x: '家具家电', y: 142, }, { series: '门店二', x: '粮油副食', y: 199, }, { series: '门店二', x: '美容洗护', y: 582, }, { series: '门店二', x: '母婴用品', y: 64, }, { series: '门店二', x: '进口食品', y: 89, }, { series: '门店二', x: '食品饮料', y: 641, }, { series: '门店二', x: '家庭清洁', y: 984, }, ]); // chartsRender(); }, []); useEffect(() => { if (chartsData.length) { chartsRender(); } }, [chartsData]); return ( <> <div id="exam-bar" style={{width:"100%"}}></div> </> ); }; export default PaperRadar;
L7地图的使用
根据antv的l7的安装教程,分别安装 @antv/l7 @antv/l7-district @antv/l7-maps
yarn add @antv/l7 yarn add @antv/l7-district yarn add @antv/l7-maps 或 npm i @antv/l7 --save npm i @antv/l7-district npm i @antv/l7-maps
react代码
import React, { useEffect, useState } from 'react'; import { Scene } from '@antv/l7'; import { CountryLayer } from '@antv/l7-district'; import { Mapbox } from '@antv/l7-maps'; /** 地图配置 */ // 我选择的事全国地图,name和对应的code都是antv l7官方提供的, // value字段及字段名是可以自定义的 const ProvinceData = [ { name: '云南省', code: 530000, value: 0, }, { name: '黑龙江省', code: 230000, value: 0, }, { name: '贵州省', code: 520000, value: 0, }, { name: '北京市', code: 110000, value: 0, }, { name: '河北省', code: 130000, value: 0, }, { name: '山西省', code: 140000, value: 0, }, { name: '吉林省', code: 220000, value: 0, }, { name: '宁夏回族自治区', code: 640000, value: 0, }, { name: '辽宁省', code: 210000, value: 0, }, { name: '海南省', code: 460000, value: 0, }, { name: '内蒙古自治区', code: 150000, value: 0, }, { name: '天津市', code: 120000, value: 0, }, { name: '新疆维吾尔自治区', code: 650000, value: 0, }, { name: '上海市', code: 310000, value: 0, }, { name: '陕西省', code: 610000, value: 0, }, { name: '甘肃省', code: 620000, value: 0, }, { name: '安徽省', code: 340000, value: 0, }, { name: '香港特别行政区', code: 810000, value: 0, }, { name: '广东省', code: 440000, value: 0, }, { name: '河南省', code: 410000, value: 0, }, { name: '湖南省', code: 430000, value: 0, }, { name: '江西省', code: 360000, value: 0, }, { name: '四川省', code: 510000, value: 0, }, { name: '广西壮族自治区', code: 450000, value: 0, }, { name: '江苏省', code: 320000, value: 0, }, { name: '澳门特别行政区', code: 820000, value: 0, }, { name: '浙江省', code: 330000, value: 0, }, { name: '山东省', code: 370000, value: 0, }, { name: '青海省', code: 630000, value: 0, }, { name: '重庆市', code: 500000, value: 0, }, { name: '福建省', code: 350000, value: 0, }, { name: '湖北省', code: 420000, value: 0, }, { name: '西藏自治区', code: 540000, value: 0, }, { name: '台湾省', code: 710000, value: 100, }, ]; const StudentPostion: React.FC = () => { const draw = () => { /** scene这个实例一定要在dom渲染完成之后创建 */ const scene = new Scene({ /** 传入需要渲染的dom节点的id */ id: 'student-map', /** 渲染的地图会有一个antv的logo,可以让其消失 */ logoVisible: false, map: new Mapbox({ center: [116.2825, 39.9], pitch: 0, /** 其实这是一张世界地图,通过blank将除中国外的地方变为空白 */ style: 'blank', zoom: 3, minZoom: 0, maxZoom: 10, }), }); scene.on('loaded', () => { new CountryLayer(scene, { /** 创建的数据,绑定到data字段进行渲染 */ data: ProvinceData, joinBy: ['adcode', 'code'], depth: 1, /** 省界线颜色 */ provinceStroke: '#fff', /** 省界线颜色宽度 */ provinceStrokeWidth: 1, /** 市界线颜色 */ cityStroke: '#EBCCB4', cityStrokeWidth: 1, /** 地图文字颜色 */ label: { /** 文字背景色 */ stroke: 'rgba(0,0,0,0)', /** 文字颜色 */ color: 'transparent', }, fill: { color: { /** field 字段传入数据里面的具体值的字段名称 */ field: 'value', /** 根据值的大小会渲染以下的颜色,值越大,会渲染数组靠后的颜色 */ values: ['#BAE7FF', '#69C0FF', '#1890FF', '#0A73DA', '#004599'], }, }, /** 鼠标放上去的提示框内容渲染,相当于echarts的tooltip */ popup: { enable: true, Html: (props: any) => { return `<span>${props.NAME_CHN}学生</span>:<span>${props.value}人</span>`; }, }, }); }); }; useEffect(() => { draw(); }, []); return ( <> <div id="student-map" style={{ height: '400px', padding: '20px 0 0 30px', fontWeight: 600 }}> <div style={{ fontSize: '18px' }}>学生地理位置分布统计图</div> </div> </> ); };
效果图
antv的使用大家还是自己去体验吧。这里能展示的内容只是九牛一毛 -
不用注册的arcgis接合图表工具
2018-05-14 22:04:09坐标系统(北京54、西安80坐标系)、中央经线、分带方法(3度带或6度带)、地图比例尺(支持地图比例尺有1:100万、1:50万、1:25万、1:10万、1:5万、1:2.5万、1:1万和1:5000比例尺)、坐标是否加带号生成对应接... -
01 【ArcGIS JS API + eCharts系列】实现地图上二维图表的绘制
2021-01-08 14:17:44ArcGIS API for JavaScript目前提供的图表绘制接口十分有限,而且样式也并不美观,当我们在地图上添加相应的图表的时候,还是需要结合目前市面上其他的图表可视化插件来做。本文就介绍下如何使用ArcGIS API for ... -
echarts地图的tooltip自定义样式显示图表
2020-10-18 14:07:12实现在Echarts地图的tooltip提示框中绘制图表 最近遇到一个需求是需要在地图中,鼠标点击或者停留在地图中某一片区域时,该区域显示亮高和显示tooltip提示框信息,但是难点在于需要在tooltip提示框中再绘制一层图表...echarts地图的tooltip自定义样式显示图表
最近遇到一个需求:需要在地图中实现鼠标点击或者停留在地图中某一片区域时,该区域显示亮高和显示tooltip提示框信息,但是难点在于需要在tooltip提示框中再绘制一层图表。按以往我们做过都是这种,tooltip提示框中只是单纯显示文本信息。
但是,需求要的不是这种,先不多说,直接给你们看最终展示的效果:
鼠标点击或停留在某一片区域时,在tooltip提示框中显示该区域的另外一层数据图表,鼠标单击可选中或取消区域的亮高显示,以及两层地图凸显一个立体层次感。看完记得点个赞(技术分享,加快成长)。
这里我们以广州市作为Demo,可以看出这是我们想要的在tooltip提示框中绘制另外一层图表的效果。
ok,接下来我们不唠嗑,直接上代码(大家最喜欢的哈哈)。
项目结构:
项目是使用Vue + typescript + antd vue,大家根据自己的项目来配置。
一、创建gzMap.vue文件:
<template> <div class="main"> <!-- 绘制广州地图 --> <div ref="gzMap" class="gzMap"></div> <!-- 点击不同模块,切换显示不同tooltip中的图表类型,这里Demo只展示一种类型 --> <div class="Mybutton"> <a-radio-group :value="typeName" @change="handleTypeChange"> <a-radio-button value="type1"> 模块一 </a-radio-button> <a-radio-button value="type2"> 模块二 </a-radio-button> </a-radio-group> </div> </div> </template> <script lang="ts"> import { Component, Prop, Vue, Watch } from 'vue-property-decorator'; import gzMapData from "@/common/gzMap-common/index"; @Component export default class HelloWorld extends Vue { //模块名称 private typeName: string = "type1"; // 广州地图各类型指数数据 private guangzhouDatas: any; // 引入广州地图地理位置数据 private guangzhouMap: any = require("@/common/gzMap-common/guangzhou.json"); // 引入地图需要的tooltip配置项 private mapAreaDatas: any; private $echarts: any; //监听传入指数模块名称改变 @Watch("typeName", { immediate: true }) private watchNum(val: string, oldVal: string) { // 根据指数类型引入对应echart配置项文件 this.OptionType(); // 根据指数类型引入对应echart地图数据文件 this.dataType(); } private mounted() { const ele = this.$refs.gzMap; const guangzhouChart: any = this.$echarts.init(ele); //页面切换,销毁监听事件 this.$on("hook:beforeDestroy", () => { window.removeEventListener("resize", () => { guangzhouChart.resize(); }); }); } // 根据不同模块指数,按需动态引入不同echart配置项文件,用于地图tooltip渲染 private OptionType() { if (this.typeName == "type1") { //指数1数据 import("@/common/gzMap-common/gzMapData1").then(module => { this.mapAreaDatas = module.default.option_gzMapType; }); } } // 根据不同模块指数,按需要动态引入不同地图数据文件 private dataType() { import("@/common/gzMap-common/index").then(module => { //指数模块名称 let tag: string = ""; tag = this.typeName; switch (tag) { case "type1": { this.guangzhouDatas = module.default.dataType1; break; } // 根据自己的需求可引入多种地图数据文件 default: { break; } } //地图数据加载后执行,绘制地图 if (this.guangzhouDatas) { this.mapDraw(); } }); } //绘制广州地图 private mapDraw() { const ele = this.$refs.gzMap; const guangzhouChart = this.$echarts.init(ele, "shine"); guangzhouChart.showLoading(); guangzhouChart.hideLoading(); const option = { tooltip: { textStyle: { color: "#B1D6F6", fontSize: 8, padding: 20, align: "left" }, trigger: "item", formatter: function(params:any, ticket:any, callback:any) { // 区域名称 let AreaName = params.data.name; // 区域数据百分比 let percent = params.data.percent; // 区域数据增长百分比 let Increase = params.data.Increase; // 给tooltip传入元素的id,延迟执行,否则会找不到元素 setTimeout(function() { that.tooltipFn("toolpitData", params); }, 100); return `<div style="width:8rem;height:12vh;"><div class="tooltipArea"><div class="title">${AreaName}</div><div class="percent"><p>${percent}%</p><p>+${Increase}%<span class="triangle-up"></span></p></div><div id="toolpitData" class="toolpitData"></div></div></div>`; } }, // 第二层地图,可设置与一层地图位置偏差一些,突出点立体层次感 geo: { map: "guangzhou", roam: false, zoom: 1.1, aspectScale: 1.1, //长宽比 itemStyle: { normal: { areaColor: "#073E5420", shadowColor: "transparent" }, emphasis: { borderWidth: 1, color: "#166F6134", label: { show: false } } } }, // 第一层地图 series: [ { name: "广州", type: "map", aspectScale: 1, // 长宽比 zoom: 1.1, mapType: "guangzhou", // 自定义扩展图表类型 selectedMode: "multiple", label: { show: false }, // 是否开启鼠标缩放和平移漫游 roam: false, //地图样式: itemStyle: { borderColor: "#10B9C1", borderWidth: "1", shadowColor: "#23C6CE", shadowBlur: 50, shadowOffsetX: -10, shadowOffsetY: -5, areaColor: "#247a9a34" }, // 高亮状态下的多边形和标签样式: emphasis: { label: { color: "#FFFFFF" }, itemStyle: { areaColor: "#389BB7" } }, data: this.guangzhouDatas } ] }; this.$echarts.registerMap("guangzhou", this.guangzhouMap); guangzhouChart.setOption(option); const that = this; // 鼠标单击选中亮高或取消亮高,显示区域数据 guangzhouChart.on("click", function(params:any) { //第二层地图位地理坐标系组件,不设置鼠标单击事件 if (params.componentType === "geo") { return; } // 遍历广州地图判断被点击选中的区域 for (let i = 0; i < that.guangzhouDatas.length; i++) { if (params.name == that.guangzhouDatas[i].name) { if (that.guangzhouDatas[i].checked === false) { // 设置选中区域亮高 that.guangzhouDatas[i].checked= true; params.data.checked= true; } else { // 取消选中区域亮高 that.guangzhouDatas[i].checked= false; params.data.checked= false; } } } guangzhouChart.setOption(option); }); window.addEventListener("resize", function() { guangzhouChart.resize(); }); } // 绘制广州地图tooltip中的图表 private tooltipFn(el:string, params:any) { const event = document.getElementById(el); // 根据不同类型指数分别引用不同图表数据 if (this.typeName == "type1") { // 设置指数1数据 let dataLength = this.mapAreaDatas.series.length; for (let i = 0; i < dataLength; i++) { this.mapAreaDatas.series[i].data = []; this.mapAreaDatas.series[i].data = params.data.dataList[i]; } } const toolitpChart: any = this.$echarts.init(event); toolitpChart.setOption(this.mapAreaDatas); window.addEventListener("resize", function() { toolitpChart.resize(); }); } // 切换模块类型,这里Demo只引入一种tooltip层图表类型 private handleTypeChange(e:any) { this.typeName = e.target.value; this.$message.success("当前地图加载类型是:"+ e.target.value) } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style lang="less"> .main { width: 100%; height: 100%; } .gzMap { width: 100%; height: 100%; background-color: black; } .toolpitData { width: 100%; height: 4vh; margin: 0.5vh auto 0; } .tooltipArea { width: 7rem; height: 100%; .title { text-align: left; font-size: 0.05rem; color: #9fc5e4; padding-left: 0.1rem; } .percent { width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 0.18rem; margin-top: 0.5vh; } .percent :nth-child(1) { color: #9ac0de; margin-left: 0.1rem; } .percent :nth-child(2) { font-size: 0.16rem; color: #38e5a5; position: relative; margin-right: 0.3rem; .triangle-up { position: absolute; top: 0; width: 0; height: 0; border-left: 0.2rem solid transparent; border-right: 0.2rem solid transparent; border-bottom: 0.4rem solid #38e5a5; margin-top: 0.5vh; } } } .Mybutton { margin: 5vh auto; } </style>
二、创建guangzhou.json文件(代码行数太长这里不贴出来了,大家自己动动手) 文件下载地址:
广州市地图json文件
记得选能显示具体到镇区的json文件。
三、创建index.ts(存放静态数据文件)// 广州地图各类型指数数据 import gzMapData from './gzMap-data' //广州地图各类型指数数据 export default { ...gzMapData }
四、创建gzMap-data.ts(tooltip提示框中的图表数据文件)
export default { // 指数1,只供参考数据结构格式,数据内容是随便写的,无任何意义 dataType1: [ { name: "荔湾区", dataList: [[5,5], [10,10], [8,8]], percent: 88, Increase: 5, checked: false }, { name: "越秀区", dataList: [[5,5], [10,10], [5,5]], percent: 85, Increase: 1, checked: false }, { name: "海珠区", dataList: [[5,5], [10,10], [5,5]], percent: 70, Increase: 9, checked: false }, { name: "天河区", dataList: [[5,5], [10,10], [12,12]], percent: 88, Increase: 3, checked: false }, { name: "白云区", dataList: [[5,5], [10,10], [5,5]], percent: 50, Increase: 3, checked: false }, { name: "黄埔区", dataList: [[5,5], [10,10], [5,5]], percent: 66, Increase: 4, checked: false }, { name: "番禺区", dataList: [[5,5], [10,10], [9,9]], percent: 50, Increase: 8, checked: false }, { name: "花都区", dataList: [[5,5], [10,10], [5,5]], percent: 50, Increase: 1, checked: false }, { name: "南沙区", dataList: [[5,5], [10,10], [7,5]], percent: 50, Increase: 5, checked: false }, { name: "从化区", dataList: [[5,5], [10,10], [5,5]], percent: 70, Increase: 3, checked: false }, { name: "增城区", dataList: [[5,5], [10,10], [6,5]], percent: 50, Increase: 7, checked: false }, ], }
五、创建gzMapData1.ts(tooltip提示框中的图表配置文件)
import echarts from "echarts"; export default { //数据图表配置(指数1),根据需要引入不同配置,这些很简单,直接去echarts官网找一个 option_gzMapType: { grid: { top: "3%", width: "100%", height: "50%", left: 0, bottom: 0 }, legend: { data: ["产业A", "产业B"], icon: "circle", itemWidth: 8, itemHeight: 8, bottom: 0, top: 15, textStyle: { color: "rgba(150, 245, 246, 1)", fontSize: 6 } }, xAxis: { type: "value", max: 25, axisLabel: { show: false }, axisLine: { show: false }, axisTick: { show: false }, splitLine: { show: false } }, yAxis: { type: "category", axisLine: { show: false } }, series: [ { type: "bar", barWidth: "40%", name: "产业A", stack: "one", itemStyle: { color: "RGBA(255,205,67)" }, data: [ { value: 4, itemStyle: { color: "RGBA(196, 255, 255, 1)" } }, { value: 4, itemStyle: { color: "RGBA(255,205,67)" } } ] }, { type: "bar", name: "产业B", itemStyle: { color: "RGBA(221,79,66)" }, stack: "one", data: [ { value: 8, itemStyle: { color: "RGBA(75,139,244)" } }, { value: 8, itemStyle: { color: "RGBA(221,79,66)" } } ] }, { type: "bar", name: "产业C", itemStyle: { color: "RGBA(75,139,244)" }, stack: "one", data: [ { value: 8, itemStyle: { color: "RGBA(221,79,66)" } }, { value: 8, itemStyle: { color: "RGBA(75,139,244)" } } ] } ] }, }
功能的实现就差不多介绍完了,这里为了简单方便又快速地向大家介绍,就只介绍配置了一种tooltip层的配置图表,大家根据自己的需求可往里面加入更多元素。其中的地图区域被鼠标选中或者停留时显示亮高以及设置两层地图突出一个层次感等这些效果,大家可以自己研究一下echarts的配置文档,博主也是一步步摸爬滚打过来的,如果有什么说的不对,请指出来哈哈!
如果这个项目对你有帮助或者感兴趣,记得帮忙点个赞呀,如果有什么问题也可以私信留言。 -
colorgrad:用于地图,图表,数据可视化和创意编码的Go(Golang)色标库-源码
2021-02-05 06:17:11可乐 :artist_palette: Go(Golang)色标库。 指数 import "github.com/mazznoer/colorgrad" 自定义渐变 基本的 grad , err := colorgrad . NewGradient (). Build () ...grad , err := colorgrad .... -
Leaflet笔记-Leaflet与echarts结合使用(在地图上绘图表)
2019-09-10 15:05:36在本地地图上绘制图表,图表经过响应弹出来。 想想真是令人兴奋的事情,到时候用Qt的Widget和QGraphicsView结合QWebEngine搞一层。来一个科技感十足的魔幻页面。 下面来说明下这个逻辑。 使用Leaflet的WMTS接口...目录
基本概念
在本地地图上绘制图表,图表经过响应弹出来。
想想真是令人兴奋的事情,到时候用Qt的Widget和QGraphicsView结合QWebEngine搞一层。来一个科技感十足的魔幻页面。
下面来说明下这个逻辑。
使用Leaflet的WMTS接口请求本地Geoserver服务,从而获取数据。然后再把echarts放到Leaflet的响应事件里面。比如框。弹框的时候构造图表。通过这样的方式,即可完成地图上显示图标。
代码与实例
程序运行截图如下:
当选中某一个城市后!
源码如下:
test8.html
<!DOCTYPE html> <html> <head> <title>Hello World</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /> <link rel="stylesheet" href="leaflet.css" /> <script src="leaflet.js"></script> <script src="leaflet-tilelayer-wmts-src.js"></script> <script src="echarts.js"></script> <style> html, body { height: 100%; margin: 0; } #map { width: 100%; height: 100%; } .chart{ width: 600px; height: 300px; background-color: #fff; } </style> </head> <body> <script src="test6.js" type="text/javascript"></script> <div id='map'></div> <script type="text/javascript"> var ign = new L.TileLayer.WMTS( "http://XXX.XXX.XXX.XXX:8080/geoserver/gwc/service/wmts" , { layer: 'GG_9:gg_9', tilematrixset: "EPSG:900913", Format : 'image/png', TileMatrix: 'EPSG:900913:8' } ); var map = L.map('map', { minZoom: 4, maxZoom: 7 }).setView([32, 118], 7); L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map); map.addLayer(ign); map.invalidateSize(true); //添加的数据 function onEachFeature(feature, layer){ var idStr = feature.geometry.properties.idStr.toString() ; var popupContent = '<div style="width:350px;height:300px" id="' + idStr + '"></div>'; layer.bindPopup(popupContent, {}); layer.on('popupopen', function(e){ var myChart = echarts.init(document.getElementById(idStr)); // 指定图表的配置项和数据 var option = { title: { text: '测试' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); }); } L.geoJSON([bicycleRental], { onEachFeature: onEachFeature, pointToLayer: function (feature, latlng) { return L.circleMarker(latlng, { radius: 8, fillColor: "#ff7800", color: "#000", weight: 1, opacity: 1, fillOpacity: 0.8 }); } }).addTo(map) //添加的数据 </script> </body> </html>
test6.js
var bicycleRental = { "type" : "FeatureConllection", "features" : [ { "geometry" : { "type" : "Point", "coordinates" : [118.8, 32.05], "properties" : { "popupContent" : "南京", "idStr" : "njChart" } }, "type" : "Feature", "id" : 100 }, { "geometry" : { "type" : "Point", "coordinates" : [119.2, 34.55], "properties" : { "popupContent" : "连云港", "idStr" : "lygChart" } }, "type" : "Feature", "id" : 101 }, { "geometry" : { "type" : "Point", "coordinates" : [118.26, 33.94], "properties" : { "popupContent" : "宿迁", "idStr" : "sqChart" } }, "type" : "Feature", "id" : 102 }, { "geometry" : { "type" : "Point", "coordinates" : [119.12, 33.53], "properties" : { "popupContent" : "淮安", "idStr" : "haChart" } }, "type" : "Feature", "id" : 103 }, { "geometry" : { "type" : "Point", "coordinates" : [120.15, 33.32], "properties" : { "popupContent" : "盐城", "idStr" : "ycChart" } }, "type" : "Feature", "id" : 104 }, { "geometry" : { "type" : "Point", "coordinates" : [119.95, 32.40], "properties" : { "popupContent" : "泰州", "idStr" : "tzChart" } }, "type" : "Feature", "id" : 105 }, { "geometry" : { "type" : "Point", "coordinates" : [119.41, 32.35], "properties" : { "popupContent" : "扬州", "idStr" : "yzChart" } }, "type" : "Feature", "id" : 106 }, { "geometry" : { "type" : "Point", "coordinates" : [120.92, 31.94], "properties" : { "popupContent" : "南通", "idStr" : "ntChart" } }, "type" : "Feature", "id" : 107 }, { "geometry" : { "type" : "Point", "coordinates" : [119.99, 31.755], "properties" : { "popupContent" : "常州", "idStr" : "czChart" } }, "type" : "Feature", "id" : 108 }, { "geometry" : { "type" : "Point", "coordinates" : [120.33, 31.44], "properties" : { "popupContent" : "无锡", "idStr" : "wxChart" } }, "type" : "Feature", "id" : 109 }, { "geometry" : { "type" : "Point", "coordinates" : [120.61, 31.26], "properties" : { "popupContent" : "苏州", "idStr" : "szChart" } }, "type" : "Feature", "id" : 110 } ] }
这里有一个要注意的地方!
echarts他加载的时候需要一个div,并且还得知道这个div的id,如果没有这个将会报错,说dom找不到这个div
这个弹出的点击小点弹出的功能,是在点击后才创建div的,所以没有点击前相关的dom树如下,当点击后,可以看到此处的结构如下!
-
tableau地图城市数据_【Tableau 图表】Tableau可视化数据地图分组操作
2021-01-03 00:50:07使用热门可视化BI软件Tableau制作数据地图分组 打开软件 点击连接->...省/市/自治区。变成球体选中地区,拖到标记下的颜色上自动->已填充地图点击右上角的智能显示。...再点智能显示,收起智能显示地图已... -
设置地图旋转_图表分析中的HTML5地图需求,这款BI轻松5步就给解决了
2021-01-12 10:33:48很多企业在进行数据分析设计的时候,都特别青睐...亿信ABI是亿信华辰自主研发的一款从数据源接入,到数据采集、数据处理,再到数据分析和挖掘,打通数据生命周期的各个环节,实现数据填报、处理、分析一体化的一站式... -
powerbi导入地图_用PowerBI完成Tableau基本图表
2021-01-07 15:32:04PowerBI和Tableau是数据可视化领域最常用的工具[1],都具备强大的数据处理和图表制作能力。由于Power系列软件在Window平台非常容易(bu)获(yao)得(qian)(下载 | Microsoft Power BI),因此在这里选取PowerBI作为... -
ppt地图分布图一块一块的怎么做_PPT图表千篇一律?进来看看什么叫高端图表
2020-12-06 01:27:47今天过节,先祝大家端午节快乐哈~因为是端午嘛,...这套作品分为浅色和深色两种,质量非常高,对 PPT 中的图表形式,以及配色与质感的美化,都有很高的参考价值。接下来,咱们看图说话。先带大家欣赏一下浅色的作... -
地图点击省跳转到市_【功能详解】数据分析:数据图表及数据地图篇
2021-01-15 08:14:23按照数据查询-数据分析-决策支持研究-自有数据管理的逻辑顺序,接下来我们将具体介绍数据分析功能。中国经济社会大数据研究平台数据分析功能可以通过多维组配既地区、指标、时间的组配,进行年度、进度、国际数据的... -
ArcGIS10中国工具正式发布,包括图框,接合图表,批量打印,图形裁剪,椭球面积,自动编号
2012-02-12 22:13:33ArcGIS10中国工具正式发布,包括图框,接合图表,批量打印,图形裁剪,椭球面积,自动编号,主要内容: 图框工具 接合图表生成 图形裁剪 地图打印批量处理 其他工具 编号:自上而下,从左到右编号软件 椭球... -
arcgis版接合图表5.2 免费软件,支持国家2000坐标系,ArcGIS10.0,ArcGIS10.1,ArcGIS10.2都可以使用
2013-11-28 11:54:401. 国家2000,西安80,北京54、坐标系的接合图表生成。根据经纬度范围,坐标系统(北京54、西安80坐标系)、中央经线、分带方法(3度带或6度带)、地图比例尺(支持地图比例尺有1:100万、1:50万、1:25万、1:10万... -
轨迹回放与echarts图表响应变化(基于mapbox/mineMap)此方式适用于目前绝大部分地图服务
2020-05-14 18:25:001.场景:多数道路车辆信息都会设计到历史轨迹回放,包含当前车辆信息,道路信息,已经随之变化的响应数据变更,常采用图表形式展现 2:效果展示静态: 二 核心分析 轨迹 要素:点[经纬度],车头的方向(保证车的... -
python 图表制作
2019-12-22 22:58:12python --pyecharts echart 是一个制表制图的模块 pyecharts python中的echart...全球国家地图: echarts-countries-pypkg (1.9MB): 世界地图和 213 个国家,包括中国地图 中国省级地图: echarts-china-provinces-py... -
百度开源Echarts实现中国疫情地图(ps:已对接腾讯新闻接口数据实时更新)
2020-11-24 15:55:44ECharts,缩写来自 Enterprise Charts,商业级数据图表,是百度的一个开源的数据可视化工具,一个纯 Javascript 的图表库。目前很多商业项目都在使用,不但好用而且是免费。 #二、数据接口从腾讯新闻得到 #三、直接... -
Excel2007图表完全剖析 8/8
2012-04-01 10:28:28使用数据透视图汇总数百万行数据,在不使用图表的情况下以图形方式显示数据,使用SmartArt图形绘制流程图和关系图,使用VBA创建图表,将数据绘制到地图中,将图表导出到网页或PowerPoint中,找出图表背后的谎言等。... -
Excel2007图表完全剖析 5/8
2012-04-01 10:11:02使用数据透视图汇总数百万行数据,在不使用图表的情况下以图形方式显示数据,使用SmartArt图形绘制流程图和关系图,使用VBA创建图表,将数据绘制到地图中,将图表导出到网页或PowerPoint中,找出图表背后的谎言等。... -
Python图表分析和展示疫情历史数据
2020-02-15 18:52:58使用Python分析2019-nCov疫情数据 数据工程师、数据挖掘人员 爱国人士、疫情关注人员 Python程序员、编程爱好者 ...- 中国地图、省份地图,覆盖34个省市直辖区 - 折线图展示数据内容,挖掘疫情变化情况 -
利用pyecharts制作精美的可视化图表
2020-06-28 11:13:51目录利用pyecharts制作精美的可视化图表1、安装(1)版本问题(2)如何查看自己当前安装的版本(3)安装方法2、可视化(1)效果(2)实现思路(3)地图绘制(4)饼图绘制(5)柱状图绘制(6)拼接起来并且用timeline... -
Python可视化工具如何实现动态图表
2020-12-16 18:18:35这次呢,我想讲讲地图可视化的内容,以前我也写过用Python的内置库绘制地图,但总感觉不够美观。如何才能在短时间内制作漂亮的可视化地图呢,我觉得Python+可视化工具是不错的选择。 以下动态可视化地图就是J哥亲手... -
什么地图有历年的地图影像_从全国7.01TB海量谷歌卫星离线地图中导出北京市的卫星影像...
2021-01-14 09:01:181. 概述水经注现有全国WGS84无偏移无水印谷歌地球卫星影像1-19级,包括含海洋区域部分,数据完整无缺,接图表如下图所示。全国离线卫星影像该全国数据存储于一枚8T容量的希捷硬盘中。在该硬盘中,除了存储有全国WGS...
-
西南科技大学模电期末总结复习.pdf
-
浙江科技学院《流体力学》复习习题(含答案).pdf
-
ubus 相关资料整理
-
Galera 高可用 MySQL 集群(PXC v5.7+Hapro)
-
numpy基本操作
-
西南科技大学《自动控制原理》试题库(含答案).pdf
-
【Python-随到随学】FLask第二周
-
深入【Get】与【Post】区别
-
中山大学《俱乐部管理》期末考试试卷.pdf
-
使用vue搭建微信H5公众号项目
-
C51单片机学习日记:数码管
-
西南科技大学《模电》期末复习题(超全且含答案).pdf
-
浙江科技学院《基础工程》复习.pdf
-
vsphere7.0补丁
-
MFC 绘制曲线图、柱状图
-
1-算法leetcode 876 快慢指针
-
在Windows上编译FreeRDP
-
快速排序
-
MySQL 备份与恢复详解(高低版本 迁移;不同字符集 相互转换;表
-
MaxScale 实现 MySQL 读写分离与负载均衡