antv图例出现分页_自定义图例组件

2024-04-12 01:26:57

源码复制成功复制失败全屏复制运行

自定义图例组件

#map { position:absolute; top:0; bottom:0; width:100%; }

.infolegend {

padding: 6px 8px;

font: 14px/16px Arial, Helvetica, sans-serif;

background: white;

background: rgba(255,255,255,0.8);

box-shadow: 0 0 15px rgba(0,0,0,0.2);

border-radius: 5px

}

.infolegend h4 {

margin: 0 0 5px;

color: #777;

}

.legend {

line-height: 18px;

color: #555;

}

.legend i {

width: 18px;

height: 18px;

float: left;

margin-right: 8px;

opacity: 0.7;

}

var scene = new L7.Scene({

id: 'map',

mapStyle: 'light', // 样式URL

center: [120.19382669582967, 30.258134],

pitch: 0,

zoom: 4,

zoomControl: false,

scaleControl: false

});

scene.on('loaded', function() {

var colors = ["#FFF5B8", "#FFDC7D", "#FFAB5C", "#F27049", "#D42F31", "#730D1C"];

$.getJSON('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json', function(city) {

scene.PolygonLayer().source(city).color('pm2_5_24h', function(p) {

if (p > 120) {

return colors[5];

} else if (p > 65) {

return colors[4];

} else if (p > 30) {

return colors[3];

} else if (p > 15) {

return colors[2];

} else if (p > 8) {

return colors[1];

} else {

return colors[0];

}

}).shape('fill').active(true).style({

opacity: 1

}).render();

var legend = new L7.Control.Base({

position: 'bottomright'

});

legend.onAdd = function() {

var el = document.createElement('div');

el.className = 'infolegend legend';

var grades = [0, 8, 15, 30, 65, 120];

for (var i = 0; i < grades.length; i++) {

el.innerHTML += ' ' + grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+');

}

return el;

};

legend.addTo(scene);

});

});

自定义图例组件

#map { position:absolute; top:0; bottom:0; width:100%; }

.infolegend {

padding: 6px 8px;

font: 14px/16px Arial, Helvetica, sans-serif;

background: white;

background: rgba(255,255,255,0.8);

box-shadow: 0 0 15px rgba(0,0,0,0.2);

border-radius: 5px

}

.infolegend h4 {

margin: 0 0 5px;

color: #777;

}

.legend {

line-height: 18px;

color: #555;

}

.legend i {

width: 18px;

height: 18px;

float: left;

margin-right: 8px;

opacity: 0.7;

}

var scene = new L7.Scene({

id: 'map',

mapStyle: 'light', // 样式URL

center: [120.19382669582967, 30.258134],

pitch: 0,

zoom: 4,

zoomControl: false,

scaleControl: false

});

scene.on('loaded', function() {

var colors = ["#FFF5B8", "#FFDC7D", "#FFAB5C", "#F27049", "#D42F31", "#730D1C"];

$.getJSON('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json', function(city) {

scene.PolygonLayer().source(city).color('pm2_5_24h', function(p) {

if (p > 120) {

return colors[5];

} else if (p > 65) {

return colors[4];

} else if (p > 30) {

return colors[3];

} else if (p > 15) {

return colors[2];

} else if (p > 8) {

return colors[1];

} else {

return colors[0];

}

}).shape('fill').active(true).style({

opacity: 1

}).render();

var legend = new L7.Control.Base({

position: 'bottomright'

});

legend.onAdd = function() {

var el = document.createElement('div');

el.className = 'infolegend legend';

var grades = [0, 8, 15, 30, 65, 120];

for (var i = 0; i < grades.length; i++) {

el.innerHTML += ' ' + grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+');

}

return el;

};

legend.addTo(scene);

});

});

antv图例出现分页_自定义图例组件相关推荐

antv图例出现分页_带图例、文本的饼图
源码复制成功复制失败全屏复制运行 F2 图表组件库 - AntV var data = [{ amount: 20, ratio: 0.1, memo: '学习', const: 'const' ...
R语言ggplot2可视化自定义图例标签间距实战：自定义图例标签间距、自定义图例与图像之间的间距
R语言ggplot2可视化自定义图例标签间距实战:自定义图例标签间距.自定义图例与图像之间的间距目录
antv图例出现分页_图例-自定义文本样式
源码复制成功复制失败全屏复制运行 F2 图表组件库 - AntV var data = [{ assetType: '债券资产', percent: 73.76, const: 'const' } ...
page 怎么把list 分页_自定义分页器的实现
前言 django也有自带额分页器,但是功能较少,使用起来较为繁琐.所以我们可以使用自定义非分页器. 自定义分页器的推导思路 # queryset对象是支持索引切片操作的(不支持负数索引) book_ ...
echars 饼图环形图组件修改自定义图例重新渲染显示对应颜色对应区域
如图产品有个需求是要做一个环形图点击图例显示具体数字但图例加起来是超过百分百的如图一个范围内有男有女有丑逼点击男的显示男的点击女的显示女的并且显示占总数的百分比并且鼠标悬浮上去显示的 ...
antv图例出现分页_2020，贴地飞行的 AntV 设计
前不久,一年一度的数据可视化产品 AntV 品牌发布日又来到,今年我们给大家带来了"贴地飞行"的 AntV 设计.为什么称之为"贴地飞行"?这一年中,AntV ...
数据科学 IPython 笔记本 8.9 自定义图例
8.9 自定义图例原文:Customizing Plot Legends 译者:飞龙协议:CC BY-NC-SA 4.0 本节是<Python 数据科学手册>(Python Data ...
html中legend样式,echarts自定义图例legend文字和样式
话不多说,先上效果图. 要完成这个图并不难,主要是下面那个图例比较难,需要定制. 让我们从官方文档找找思路,官方文档关于legend.formatter是这样的:链接在这难点在于: 1.这里的图例文 ...
python使用matplotlib可视化、为可视化图像添加图例（legend）、自定义图例的字体格式、字体大小、字体颜色等
python使用matplotlib可视化.为可视化图像添加图例(legend).自定义图例的字体格式.字体大小.字体颜色等目录

最新文章

热门文章