相关文章推荐
无邪的夕阳  ·  jquery sweet alert ...·  1 年前    · 
性感的大象  ·  image - How do I save ...·  1 年前    · 
// JSON $.getJSON('./json/shandong.json', function (data) { echarts.registerMap('shandong', data); var chart = echarts.init(document.getElementById('map')); var option = { backgroundColor: '#404a59', title: { text: '山东地图', color:"#fff" visualMap: { show:false, left: 'right', categories: ['1',], inRange: { color: ['#f46d43'] text:['High','Low'], // 文本,默认为数值文本 calculable: true series: [{ type: 'map', map: 'shandong', data:data11, aspectScale:1,//保持原始比例 roam: true, label: { show:true, normal: { show: true, color:"#fff", emphasis: { show: true, fontSize:16, color:"#fff" itemStyle: { normal: { areaColor: '#323c48', borderColor: '#111' emphasis: {//鼠标移入高亮显颜色 areaColor: '#f46d43' chart.setOption(option); chart.on('click', function(params){ console.log(params);//此处写点击事件内容 for(var i=0;i 前言    Echarts Map中实现点击区域高亮,点击事件实现实现效果实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title& 准备工作: ①到 echarts 3(注意是 echarts 3,不是 echarts 2)官方下载 echarts 或者自定义下载,下载地址:http:// echarts .baidu.com/download.htm ②准备 地图 的坐标文件,就是本文示例中引用的 解析:通过查找api,我找到一种既可以实现点击 高亮 ,又可以不更改其他区域的值的方法。 获取到数据后,手动给数据添加itemstyle属性设置正常颜色和强调颜色,点击时,通过点击的地市名匹配数据,将其itemstyle设置成 高亮 颜色,其他地市设置为浅色。这样既不更改原数据,也能实现 高亮 的功能。 代码如下: map Data.forEach(item=>{ item.itemStyle= { normal: { areaColor:'#AADDFF'}, .
map Data.forEach(item=>{ item.itemStyle= { normal: { areaColor:'#AADDFF'}, emphasis: { areaColor: '#c5e6fd'}}; option = { series: [ zoom: 1.25, aspectScale: 1, name: '贵州 地图 ', type: ' map ', map Type: '贵州', //...
Echarts - Map -Icon 基于 Echarts .js 的 Map 地图 ,在上面添加自定义标图(图片),并自动循环提示相关信息! Echarts Map 地图 ,自定义标图(图片),自动循环显示, ECharts 如何自定义省、市、县区 地图 (各省市直辖区的 map 地图 ), ECharts 如何在 地图 上自定义图片、图标,根据经纬度显示自定义建筑图片、添加自定义覆盖物。 CSDN: 例实效果: china.html效果如下: zunyi.html效果如下: xishui.html效果如下:
//使用ajax加载;也可以修改为AMD的形式,然后使用requirejs进行加载 $.get('./world.json', function (json) { //注册到 地图 中。 echarts .register Map ('world', json); //开始 实例 化,显示 地图
Echarts _ map (一) 使用 echarts 地图 的要点整理 Echarts _ map Echarts _ map (一) 使用 echarts 地图 的要点整理前言背景 Echarts 相关链接 Echarts _ map 使用要点入门最简单的江苏 地图 GeoJson 近段时间,大量的接触 echarts ,整理一下知识点,巩固学习; Echarts 相关链接 Echarts 官方文档 Echarts 社区 Ec...
Echarts 地图 控件中,tooltip(提示框)是一种常见的操作方式,可以通过 tooltip 来展示 地图 数据的详细信息。但是默认情况下,tooltip 只能显示一行文字,如果我们需要在 tooltip 中显示多行文字该怎么做呢? 首先,我们可以尝试在 tooltip 中使用富文本支持的标签来进行多行文字的展示,比如使用 \<br> 标签来进行换行。但是这种方式对于一些特殊的场景,比如数据变化剧烈的 地图 ,会导致 tooltip 弹出来的内容过长,导致样式混乱、内容不清晰等问题。 因此,更好的方式是在 Echarts 中进行配置,设置 tooltip 的宽度和高度,以及内容的字体和字号等属性。这样无论数据变化多少,提示框都可以按照我们的设置进行展示,保证内容的展示效果。 具体操作步骤如下: 1.在 Echarts 的 option 中添加 tooltip 的配置项。 2.在 tooltip 的配置项中,设置 tooltip 的宽度和高度,以及内容的字体和字号等属性。 3.在 tooltip 的配置项中使用 formatter 回调函数,并将展示内容按照需要进行拼接和格式化,保证多行文字的展示效果正常。 4.最后,将配置后的 option 对象传递到 Echarts 实例 中进行展示,即可实现多行文字的 tooltip 弹出效果。 总之,在使用 Echarts 地图 控件的过程中,如果需要多行文字的展示效果,我们可以通过设置 tooltip 的属性和使用 formatter 回调函数进行实现,保证展示效果的清晰和美观。