Vue环境下用ECharts绘制中国地图，并实现拖动、缩放与各省份自动轮播高亮显示
},
{
name: “福建”,
value: 20,
},
{
name: “贵州”,
value: 74,
},
{
name: “广东”,
value: 47,
},
{
name: “青海”,
value: 45,
},
{
name: “西藏”,
value: 41,
},
{
name: “四川”,
value: 3,
},
{
name: “宁夏”,
value: 7,
},
{
name: “海南”,
value: 7,
},
{
name: “台湾”,
value: 200,
},
{
name: “香港”,
value: 2,
},
{
name: “澳门”,
value: 5,
}
],
//指定图表的配置项和数据
option: {
//标题组件
title: {
show: true,
text: ‘全国各省份旅游景点(已评级)数量’,
subtext: ‘截至到2021年12月’,
left: “center”,
top: 16,
},
//提示框组件
tooltip: {
show: true,
//触发类型：数据项图形触发
trigger: ‘item’,
padding: 10,
borderWidth: 1,
borderColor: ‘#409eff’,
backgroundColor: ‘rgba(255,255,255,0.4)’,
textStyle: {
color: ‘#000000’,
fontSize: 12
},
//提示框内容格式器
formatter: (e) => {
let data = e.data;
//此处将各等级景点数量表示为0-10内的随机整数
data.five = Math.random() * 10 | 0;
data.four = Math.random() * 10 | 0;
data.three = Math.random() * 10 | 0;
data.two = Math.random() * 10 | 0;
data.one = Math.random() * 10 | 0;
//景点数量 - 五个等级之和
data.number = data.five + data.four + data.three + data.two + data.one;
//字符串模板
let context = `
${data.name}
景点数量 : ${data.number}处
5A级 : ${data.five}处
4A级 : ${data.four}处
3A级 : ${data.three}处
2A级 : ${data.two}处
1A级 : ${data.one}处
`;
return context;
}
},
//视觉映射组件(左下角)
visualMap: {
show: true,
left: 26,
bottom: 40,
showLabel: true,
// 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
calculable: false,
// 拖拽时，是否实时更新
realtime: true,
align: ‘left’,
//各颜色代表的区域
pieces: [
{
gte: 100,
label: “> 100”,
color: “#FDB669”
},
{
gte: 50,
lt: 99,
label: “50 - 99”,
color: “#FECA7B”
},
{
gte: 30,
lt: 49,
label: “30 - 49”,
color: “#FEE191”
},
{
gte: 10,
lt: 29,
label: “10 - 29”,
color: “#FFF0A8”
},
{
lt: 9,
label: ‘< 10’,
color: “#FFFFBF”
}
]
},
//地理坐标系组件
geo: {
//使用 registerMap 注册的地图名称
map: “china”,
//是否开启鼠标缩放和平移漫游
roam: true,
//当前视角缩放比例
zoom: 1,
//滚轮缩放的极限控制
scaleLimit: {
min: 1, //最小1倍
max: 3 //最大3倍
},
//地图组件离容器的距离
top: 90,
left: ‘center’,
//图形上的文本标签
label: {
show: true,
fontSize: “11”
},
//地图区域的多边形 图形样式
itemStyle: {
borderColor: “r 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 gba(0, 0, 0, 0.2)”,
shadowColor: ‘rgba(0, 0, 0, 0.2)’,
shadowBlur: 10,
// 高亮状态(鼠标移入后)的多边形和标签样式
emphasis: {
areaColor: “#f98333”,
shadowOffsetX: 2,
shadowOffsetY: 2,
},
}
},
series: [
{
type: “map”,
roam: true,
geoIndex: 0,
data: ‘’,
label: {
show: true,
}
}
]
},
};
},
methods: {
//定义方法 draw_map 绘制中国地图
draw_map() {
let myChart = this.$echarts.init(document.getElementById(‘map_cn’));
//高亮轮播展示
var hourIndex = 0;
var carouselTime = null;
//setInterval() 可在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除
//使用setInterval方法后,必须使用箭头函数而不能写function,否则后续在该方法中无法调用data中的数据
//carouselTime =setInterval(function(){ //错误写法
carouselTime = setInterval(() => {
//dispatchAction echarts的API：触发图表行为
myChart.dispatchAction({
type: “downplay”, //downplay 取消高亮指定的数据图形
seriesIndex: 0
});
myChart.dispatchAction({
type: “highlight”, //highLight 高亮指定的数据图形
seriesIndex: 0, //系列index
dataIndex: hourIndex //数据index
});
myChart.dispatchAction({
type: “showTip”, //showTip 显示提示框
seriesIndex: 0,
dataIndex: hourIndex
});
hourIndex++;
//当循环到数组当中的最后一条数据后，重新进行循环
if (hourIndex > this.dataList.length) {
hourIndex = 0;
}
}, 3000);
//鼠标移入组件时停止轮播
myChart.on(“mousemove”, (e) => {
clearInterval(carouselTime); //清除循环
myChart.dispatchAction({
type: “downplay”,
seriesIndex: 0,
});
myChart.dispatchAction({
type: “highlight”,
seriesIndex: 0,
dataIndex: e.dataIndex
});
myChart.dispatchAction({
type: “showTip”,
seriesIndex: 0,
dataIndex: e.dataIndex
});
});
//鼠标移出组件时恢复轮播
myChart.on(“mouseout”, () => {
carouselTime = setInterval(() => {
myChart.dispatchAction({
type: “downplay”,
seriesIndex: 0,
});
myChart.dispatchAction({
type: “highlight”,
seriesIndex: 0,
dataIndex: hourIndex
});
myChart.dispatchAction({
type: “showTip”,
seriesIndex: 0,
dataIndex: hourIndex
});
hourIndex++;
if (hourIndex > this.dataList.length) {
hourIndex = 0;
}
}, 3000);
});
Vue环境下用ECharts绘制中国地图，并实现拖动、缩放与各省份自动轮播高亮显示相关推荐
- vue使用echarts绘制中国地图
vue使用echarts绘制中国地图 //myMap.vue <div id="geo"></div>//china.js下载地址 https://down ...
- echarts 绘制中国地图（中英文转换）
echarts 绘制中国地图 1.引入echarts npm install echarts import echarts from 'echarts' 2.引入地图china.js(网上自行搜索下载 ...
- vue中使用echarts绘制中国地图
首先需要一个绘制中国地图的json文件(资源还在审核,审核过后会重新贴上来) 1.首先引入echarts和json文件,在需要的地方引即可 import echarts from 'echarts'; ...
- 广西地图html插件,ECharts绘制中国地图、广西地图
准备工作:导入ECharts依赖.和地图需要的.js文件. 文件获取方式: 官网:url github:url (下载完后 :incubator-echarts-4.8.0mapjsprovince目 ...
- vue集成echarts 绘制中国地图
最近项目遇见了需要以中国地图展示的需求 了解到 echarts 是一个很好用的图表展示工具 ,但发现官网没有关于中国地图的 组件,经过了解,echarts 5.0以上 将中国地图去掉了,需要用到chi ...
- vue3+echarts绘制中国地图
最近接到一个需求是做一个中国地图 样式大概是这样的 需求是要去掉南海,但是由于csdn地图校验,图片如果没有南海会出现图片违规情况,要实现去掉南海,百度查阅相关资料都是说要这样,这个方法的大概意思就是 ...
- Vue引入 - echarts5.0版本绘制中国地图(可缩放)
1. npm 下载 echarts 最新版本 npm install echarts --save 2. 全局使用 main.js 入口文件中引入: import * as echarts from ...
- 基于VUE+TS中引用ECharts的中国地图和世界地图密度表
(第一次写掘金,嗯也不知道写啥好.想了想,先来一份简单可口的老菜谱.虽然以前在其他平台也上过,换个地方说不准口味刚好呢哈哈哈哈-) 首先先附上官网 http://echarts.baidu.com/o ...
- echaer 地图_用echarts绘制中国地图
在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...
最新文章
- 手机通讯录分组名称_基于Aandroid的手机操作系统（7）
- leetcode算法题--寻找两个有序数组的中位数★★
- 《量化投资：以MATLAB为工具》连载(1)基础篇-N分钟学会MATLAB（上）
- 论文浅尝 - ICLR2020 | Pretrained Encyclopedia: 弱监督知识预训练语言模型
- c语言水仙花数（输入判断）,用c语言判断一个数是否为水仙花数？
- windows下使用net-snmp实现agent扩展（四）
- isis network-entity 49含义_电影《狮子王》真人版上映，经典英语台词背后的含义你看懂了吗...
- Memory Monitor
- Word2vec 模型构建及可视化
- 网站分析05——流量分析
- 深度学习图像处理（一）
- 酰肼PEG酰肼，HZ-PEG-HZ
- [图形计算器]Desmos
- 屏蔽百度搜索结果页的推送广告
- 数据采集：Flume和Logstash的工作原理和应用场景
- Py西游攻关之IO model
- sentinel限流介绍
- 逻辑思维-03取水问题
- Redis key过期监听
- 知乎高赞：假如我有500w存进余额宝，可以每天坐着等吃吗？