Echart地图geo map轮播

// 初始化第一页地图initMapPage1(data) {let that = thisecharts.registerMap("GanSu", mapName);/*地图*/var map = echarts.init(document.getElementById('page01_map'));let index = -1;timer = setInterval(function () {// 取消高亮指定的数据图形map.dispatchAction({type: "downplay",seriesIndex: 0,dataIndex: index,});// 高亮指定的数据图形map.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: index + 1,});index++;if (index > 85) {index = 0;that.activeRegionPage1 = data[index].name} else {that.activeRegionPage1 = data[index].name}}, 500);let mapOption = {visualMap: {show: true,min: 87,max: 89,top: 'bottom',realTime: false,calculable: true,inRange: {color: ['#1A2344', '#69D4D3']}},series: [{type: 'map',roam: false,data: data,map: 'GanSu',mapType: 'LX',label: {normal: {show: false,textStyle: {color: "#fff",},},emphasis: {textStyle: {color: "#fff",},},},itemStyle: {normal: {borderColor: "#002fff",borderWidth: 1.5,areaColor: "#12235c",},emphasis: {areaColor: "#d3da19",borderWidth: 0,color: "green",},},zoom: 1.1}]};map.setOption(mapOption);},

Echart地图geo map轮播相关推荐

echarts地图的tooltip轮播，并高亮当前市
关键API:dispatchAction 实现代码: // tooltip轮播autoTooltip = () => {const dataLength = this.props.mapData ...
echarts地图的常见用法：基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图
前言最近几天用echarts做中国地图,就把以前写的demo:在vue中实现中国地图拿来用,结果到项目里直接报错了,后来发现是因为版本的问题,没办法只能从头进行踩坑了.以下内容基于vue3 和 e ...
echarts实现3D地图，轮播功能、背景图片、鼠标悬浮展示数据，附源码！
echarts实现3D地图,轮播功能.背景图片.鼠标悬浮展示数据,附源码! 一.图片效果二. 代码一.图片效果由于本地图片上传失败,无法展示完整的,不过是在此图的基础上加了轮播和底纹二. 代码 ...
中国地图tooltip轮播以及点击tooltip进行页面跳转
中国地图tooltip轮播以及点击tooltip进行页面跳转 tooltip轮播点击进行页面跳转废话不说,直接上代码 <div id="ChartsChina" ref=& ...
Echarts 地图+散点图结合 +闪点+轮播
Echarts 地图+散点图结合 +闪点+轮播 1.jsp: <%--Created by IntelliJ IDEA.User: lenovoDate: 2018/12/11Time: 19: ...
echarts：实现3D地图版块叠加动效散点+轮播高亮效果
需求描述如下图所示,展示3D效果的地图版块,并叠加显示动效散点: 实现思路首先是3D地图版块效果的实现,可以参考广州3D地图:而动效散点的实现,可以参考地图发散分布. 这里再提一个经过尝试并不行的 ...
Echarts 地图使用，以及tooltip轮播使用
一,首先下载Echarts npm install echarts --save 二,引入Echarts 全局引入main.js中 // echarts-4.0 import echarts from ...
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案：svg + popper.js 定位引擎
要实现的效果如下图,3d 地图高亮自动轮播,展示白云区各个镇街的人口数局. 原由为什么想到这个方案,是因为我在用 echarts-gl 实现 3d 地图效果的过程中,我发现通过 dispatchA ...
echarts 地图实现轮播（二）
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>EC ...

Echart地图geo map轮播

Echart地图geo map轮播相关推荐

最新文章

热门文章