echarts地图自动轮播

地图自动轮播

需求：地图有数据的置灰并且不轮播，有数据的轮播展示数据

/*
请勿在原图上直接修改保存
*/
function mapTooltipClick(name) {alert(name)
}function tooltipCharts() {console.log(arguments[0]);var myChart1 = echarts.init(document.getElementById('tooltipBarId'));var option = {tooltip: {},xAxis: {type: 'category',interval: true,axisLabel: {rotate: 45},axisTick: {show: false}},yAxis: {},color: ['#4FA8F9', '#F5A623'],grid: {show: true,backgroundColor: '#FAFAFA',left: 30,right: 20,top: 20},series: [{type: 'bar',smooth: true,seriesLayoutBy: 'row',barWidth: 10}]};myChart1.setOption(option);
}
option = {visualMap: {min: 0,max: 1000,left: 'left',top: 'bottom',text: ['高', '低'],calculable: false,orient: 'horizontal',inRange: {color: ['#ccc', '#006edd'],// symbolSize: [30, 100]}},tooltip: {padding:8,enterable: true,transitionDuration: 1,textStyle: {color: '#fff',decoration: 'none',}},series: [{name: '接入医院数量',type: 'map',mapType: 'china',itemStyle: {normal: {label: {show: false}},emphasis: {label: {show: true}}},label: {normal: { //静态的时候展示样式show: true, //是否显示地图省份得名称textStyle: {color: "#fff",fontSize: 12}},emphasis: { //动态展示的样式color: '#fff',},},data: [{name: '北京',value: 50,},{name: '天津',value: 100,},{name: '上海',value: 200,},{name: '重庆',value: 300,},{name: '河北',value: 400,},{name: '河南',value: 500,},{name: '云南',value: 600,},{name: '辽宁',value: 700,},{name: '黑龙江',value: 800,},{name: '湖南',value:900,},{name: '安徽',value: 1000,}]}, ]
}
var count = 0;
var timeTicket = null;
var dataLength = option.series[0].data.length;
timeTicket && clearInterval(timeTicket);
timeTicket = setInterval(function() {myChart.dispatchAction({type: 'downplay',seriesIndex: 0,});myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: (count) % dataLength});myChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: (count) % dataLength});count++;
}, 2000);myChart.on('mouseover', function(params) {console.log(params)clearInterval(timeTicket);myChart.dispatchAction({type: 'downplay',seriesIndex: 0});myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: params.dataIndex});myChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: params.dataIndex,});
});
myChart.on('mouseout', function(params) {timeTicket && clearInterval(timeTicket);timeTicket = setInterval(function() {myChart.dispatchAction({type: 'downplay',seriesIndex: 0,});myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: (count) % dataLength});myChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: (count) % dataLength});count++;}, 1000);
});

echarts地图自动轮播相关推荐

vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
要实现的功能比如:我们要实现白云地图24镇街的常住人口统计展示,然后需要我们实现 1s 自动轮播一次地区,自定义标签样式,自定义悬浮样式. 准备工作 1.安装依赖 npm i echarts -s ...
echarts 地图实现轮播（二）
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>EC ...
echarts柱状图自动轮播
1.这边重点在datazoom,然后执行计时器,this.intime() this.intime() dataZoom: [{show: false, // 是否开启滚轮height: 22,xAx ...
echarts 地图实现轮播（一）
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>EC ...
Echarts——自动轮播提示框插件使用
首先引入echarts_auto_tooltip.js文件文件如下: /*** echarts tooltip 自动轮播* @param chart* @param chartOption* @pa ...
漏刻有时数据可视化大屏数据可视化动态模拟演示与自动轮播
在数据可视化开发的过程中,存在着两种动画效果.一种是KPI指标的模拟演示动画数字滚动累加效果,一种是Echarts图表自动轮播实现自动演示的动画效果. 一.KPI指标的模拟演示动画数字滚动累加效果实 ...
Echarts 地图使用，以及tooltip轮播使用
一,首先下载Echarts npm install echarts --save 二,引入Echarts 全局引入main.js中 // echarts-4.0 import echarts from ...
echarts 4.0.4怎么下载_怎么让ECharts的提示框tooltip自动轮播?
1. 怎么让ECharts的提示框tooltip自动轮播? 在用ECharts做大屏或者可视化展示项目的时候,让提示框tooltip自动轮播是比较常见的需求,给大家推荐一个插件叫echarts-too ...
echarts实现3D地图，轮播功能、背景图片、鼠标悬浮展示数据，附源码！
echarts实现3D地图,轮播功能.背景图片.鼠标悬浮展示数据,附源码! 一.图片效果二. 代码一.图片效果由于本地图片上传失败,无法展示完整的,不过是在此图的基础上加了轮播和底纹二. 代码 ...
Echarts自动轮播插件echarts-auto-tooltip的使用（附停止轮播的方法）
Echarts自动轮播插件echarts-auto-tooltip的使用(附停止轮播的方法) echarts-auto-tooltip使用方法: //引入echarts-auto-tooltip.js ...

echarts地图自动轮播

地图自动轮播

echarts地图自动轮播相关推荐

最新文章

热门文章