Echarts 地图中地点轮播

今天做了个上海地图，要求自动轮播每一个区，本来以为会很难搞，但是去网上看了看，复制粘贴就搞定了，以此记录下，方便以后查找。

第一步：我们在页面中引入echarts和所需的依赖

import echarts from "echarts";
import "echarts/map/js/province/shanghai.js";

第二步：我们要准备一个有宽高的dom

<div class="visual_chart" id="main1"></div>

第三步：在methods里面写方法，把配置项等具体内容放在方法里，当然要在mounted里面挂在你写的方法。

//mounted里面挂载
this.initLeft1();

//method里面的方法，方法名可以自定义，与mounted里面挂载的保持一致即可
initLeft1() {var myChart1 = echarts.init(document.getElementById("main1"));var data = [{ name: "崇明区", value: 10 },{ name: "宝山区", value: 20 },{ name: "嘉定区", value: 30 },{ name: "青浦区", value: 40 },{ name: "杨浦区", value: 50 },{ name: "虹口区", value: 60 },{ name: "闸北区", value: 70 },{ name: "普陀区", value: 80 },{ name: "静安区", value: 90 },{ name: "黄浦区", value: 70 },{ name: "卢湾区", value: 66 },{ name: "长宁区", value: 55 },{ name: "徐汇区", value: 44 },{ name: "浦东新区", value: 77 },{ name: "松江区", value: 33 },{ name: "闵行区", value: 63 },{ name: "金山区", value: 83 },{ name: "奉贤区", value: 63 },{ name: "南汇区", value: 85 },];var option1 = {tooltip: {padding: 0,backgroundColor: "#6B99FF",padding: 10,textStyle: {color: "#fff",lineHeight: "18px",},formatter: (params) => {return params.name + "<br/>" + "活动次数：" + params.value + "次";},},legend: {show: false,orient: "vertical",x: "right",data: ["数据名称"],},dataRange: {show: false,min: 0,max: 100,color: ["#0765fc", "#b2e7fa"],text: ["高", "低"], // 文本，默认为数值文本calculable: true,},series: [{name: "数据名称",type: "map",zoom: 1.25,mapType: "上海",selectedMode: "single",showLegendSymbol: false,itemStyle: {// normal: { label: { show: true } },emphasis: {label: { show: true, color: "#fff", position: "inside" },},},data: data,},],};myChart1.setOption(option1);.........==以上为常规地图====以下为自动轮播的方法==.........var hourIndex = 0;var fhourTime = null;fhourTime = setInterval(function () {myChart1.dispatchAction({type: "downplay",seriesIndex: 0,});myChart1.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: hourIndex,});myChart1.dispatchAction({type: "showTip",seriesIndex: 0,dataIndex: hourIndex,});hourIndex++;if (hourIndex > data.length) {hourIndex = 0;}}, 3000);//鼠标移入停止轮播myChart1.on("mousemove", function (e) {clearInterval(fhourTime);myChart1.dispatchAction({type: "downplay",seriesIndex: 0,});myChart1.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: e.dataIndex,});myChart1.dispatchAction({type: "showTip",seriesIndex: 0,dataIndex: e.dataIndex,});});//鼠标移出恢复轮播myChart1.on("mouseout", function () {fhourTime = setInterval(function () {myChart1.dispatchAction({type: "downplay",seriesIndex: 0,});myChart1.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: hourIndex,});myChart1.dispatchAction({type: "showTip",seriesIndex: 0,dataIndex: hourIndex,});hourIndex++;if (hourIndex > data.length) {hourIndex = 0;}}, 3000);});},

希望能对大家有所帮助。

Echarts 地图中地点轮播相关推荐

echarts地图的tooltip轮播，并高亮当前市
关键API:dispatchAction 实现代码: // tooltip轮播autoTooltip = () => {const dataLength = this.props.mapData ...
利用swiper在vue中做轮播图，并改变轮播图的原有箭头、图片等内容
目标:利用swiper在vue中做轮播图,并改变轮播图的原有箭头.图片等内容. 实现效果:1.点击左右箭头可切换图片. 2.点击后图片出现最左侧样式效果,只有被点击的图片有此效果,不被点击恢复默认效果 ...
uniapp中设置轮播图
实现:在uniapp中设置轮播图先看效果图找不到现成的接口,先在网上找几张图片,为了防链接失效,直接把图片传到文章里,文章在图就在 https://img-blog.csdnimg.cn/img_ ...
HTML中图片轮播效果
这是一段简单的Html网页中嵌入的图片轮回播放的js源代码,为增添Html一点效果: 代码: <!doctype html> <html> <head> <m ...
vue之猫眼json数据的获取直接用于自己的vue项目中,swiper轮播插件的坑
vue之猫眼json数据的获取直接用于自己的vue项目中遇到问题总结: 加载不出猫眼数据,无法调用,数据被限制猫眼电影图片的拼接及删除问题 swiper的迷幻坑** 首先来说一下第一问题加载不出 ...
html5carousel图片轮播,全面解析Bootstrap中Carousel轮播的使用方法
本文实例为大家全面的解析了Bootstrap中Carousel的使用方法,供大家参考,具体内容如下源码文件: Carousel.scss Carousel.js 实现原理: 隐藏所有要显示的元素,然 ...
php 播放 flash,PHPWEB网站中FLASH轮播广告不显示的解决方案
在用PHPWEB模板的时候,碰到首页有一个FLASH轮播广告,在IE浏览器下可以正常显示播放,在谷歌浏览器中却显示不了,解决办法如下: 1.找到advs/templates/tpl_advsflash ...
页面中实现轮播图效果
html部分代码 <div class="imgbox" id="imgbox"><div class="inner"&g ...
vant 索引城市不对_vue，vant，使用过程中 Swipe 轮播自定义大小遇到的坑
今天讲一下使用vantSwipe 轮播控件过程中遇到的问题主要是使用swiper自定义的大小的时候,宽度适应不同分辨率的移动设备适应宽度的同时还需控件的正常使用先看一下需要实现的功能, 一个简单 ...
html中简单轮播图实现原理,常见轮播效果及其实现原理
常见轮播效果及其实现原理说明: 本项目只做最基础的原理分析与最简单的应用场景. 1. 简单做法:css定位 + js滑动动画思路: 在同一个父容器内, 1. 通过改变父容器的`left` 值实现- ...

Echarts 地图中地点轮播

第一步：我们在页面中引入echarts和所需的依赖

第二步：我们要准备一个有宽高的dom

第三步：在methods里面写方法，把配置项等具体内容放在方法里，当然要在mounted里面挂在你写的方法。

Echarts 地图中地点轮播相关推荐

最新文章

热门文章