Vue+ECharts实现中国地图的绘制及各省份自动轮播高亮显示
目录
- 实现效果
- 完整代码+详细注释
- 要点小结
实现效果
完整代码+详细注释
<template>
<div class="echart">
<div class="content">
<div id="map_cn"></div>
</div>
</div>
</template>
<script>
import echarts from "echarts";
import 'echarts/map/js/china.js' //这一步必须引入
export default {
data() {
return {
//地图中的数据
dataList: [
{
name: "南海诸岛",
value: 25,
},
{
name: "北京",
value: 71,
},
{
name: "天津",
value: 52,
},
{
name: "上海",
value: 14,
},
{
name: "重庆",
value: 50,
},
{
name: "河北",
value: 20,
},
{
name: "河南",
value: 30,
},
{
name: "云南",
value: 55,
},
{
name: "辽宁",
value: 50,
},
{
name: "黑龙江",
value: 40,
},
{
name: "湖南",
value: 6,
},
{
name: "安徽",
value: 96,
},
{
name: "山东",
value: 75,
},
{
name: "新疆",
value: 45,
},
{
name: "江苏",
value: 15,
},
{
name: "浙江",
value: 8,
},
{
name: "江西",
value: 78,
},
{
name: "湖北",
value: 78,
},
{
name: "广西",
value: 36,
},
{
name: "甘肃",
value: 25,
},
{
name: "山西",
value: 140,
},
{
name: "内蒙古",
value: 85,
},
{
name: "陕西",
value: 85,
},
{
name: "吉林",
value: 74,
},
{
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 = `
<div>
<p style="line-height: 30px; font-weight: 600">${data.name}</p>
<p><span>景点数量 : </span><span>${data.number}处</span></p>
<p><span>5A级 : </span><span>${data.five}处</span></p>
<p><span>4A级 : </span><span>${data.four}处</span></p>
<p><span>3A级 : </span><span>${data.three}处</span></p>
<p><span>2A级 : </span><span>${data.two}处</span></p>
<p><span>1A级 : </span><span>${data.one}处</span></p>
</div>
`;
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: "rgba(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);
});
//显示地图
myChart.setOption(this.option);
},
//修改echart配制
setEchartOption() {
this.option.series[0].data = this.dataList;
},
},
created() {
this.setEchartOption();
},
mounted() {
this.$nextTick(() => {
this.draw_map();
});
}
};
</script>
<style scoped lang="less">
.echart {
width: 100%;
.content {
width: 95.8%;
height: 100px;
margin: auto;
#map_cn {
width: 65%;
height: 7rem;
background-color: #eaeaea;
margin: auto;
}
}
}
</style>
要点小结
1.setTimeout() 与 setInterval() 的区别
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式，只执行一次；
setInterval() 可在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除，多次调用。
2.使用 setInterval() 方法后，必须使用箭头函数形式而不能用 function
如果使用 function，后续在该方法中调用 data 中的数据如 console.log(this.dataList.length);会报如下错误(其实就是找不到该数据)；
这是因为 fun()、(function(){ ... })() 或回调函数中的 this 默认都指向 window，而 window 中是找不到你所要用的 data 中的数据的，我们应该改为箭头函数形式。
以上就是Vue+ECharts实现中国地图的绘制及各省份自动轮播高亮显示的详细内容，更多关于Vue ECharts 中国地图绘制的资料请关注我们其它相关文章！
相关推荐
-
vue+echarts实现中国地图流动效果(步骤详解)
@vue+echarts实现中国地图流动效果 #话不多说看效果图 操作步骤: 执行命令:npm run echarts -s 并回车 看到这样的提示代表安装成功 PS:网络不好的情况建议用cnpm淘宝镜像(全局终端执行命令:npm i -g cnpm --registry=https://registry.npm.taobao.org) 下载china.js 链接: https://pan.baidu.com/s/1EODVh9tJNEbFebbrhKyd_Q 提取码: gjz4 引入 impo
-
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
随着前端技术的飞速发展,大数据时代的来临,我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏,可以直观的展示用户想要的数据,同时炫酷的界面也会深受客户的喜欢. 大屏展示其实就是一堆的图表能够让人一目了然地看到该系统下的一些基本数据信息的汇总,也会有一些实时数据刷新,信息预警之类的.笔者在之前也做过一些大屏类的数据展示,但是由于都是一些图表类的,觉得没什么可说的,加之数据也都牵扯到公司,所以没有沉淀下来什么. 最近有朋友要做一个大屏,问了自己一个问题,自己也刚好做了一个简单的大屏数据展示
-
vue中echarts引入中国地图的案例
如下所示: <div id="myChartChina" :style="{width: '100%', height: '500px'}"></div> mounted() { this.drawLine(); }, drawLine(){ // 基于准备好的dom,初始化echarts实例 var myChartContainer = document.getElementById('myChartChina'); var resizeM
-
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
本文介绍了vue+vuex+axios+echarts画一个动态更新的中国地图的方法,分享给大家,具体如下: 一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china-map # 安装项目依赖 npm install # 安装 vuex npm install vuex --save # 安装 axios npm install axios --save
-
Vue+ECharts实现中国地图的绘制及各省份自动轮播高亮显示
目录 实现效果 完整代码+详细注释 要点小结 实现效果 完整代码+详细注释 <template> <div class="echart"> <div class="content"> <div id="map_cn"></div> </div> </div> </template> <script> import echarts from
-
vue使用echarts实现中国地图和点击省份进行查看功能
目录 1,实现的效果和功能 2,安装ECharts 1.1 地图数据的位置 1.2 还可以自己下载这些地图数据 3,main.js里面引入echarts 4,实现如下 5,遇到的问题 5.1 渲染中国地图时警告地图不存在: 5,2 点击tooltip提示框中的详情 生产省份地图失败,警告如下: 6,用到的模拟数据 1,实现的效果和功能 vue使用echarts实现中国地图和点击省份进行查看:下面是效果图:主要实现的功能如下:1,第一张是实现中国地图,点击任意省份能够显示tooltip提示框 :2
-
vue+echarts5实现中国地图的示例代码
使用echarts5.0版本实现中国地图,E charts在5.0版本之后,地图不能直接引入了,需要自己去下载. 地图文件下载地址:下载地址(http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.772340792178525&lng=103.94573258937584&zoom=9.5) 注意: 将下载后的json文件放置/public目录下 map类型的地图 <template> <
-
vue + echarts实现中国省份地图点击联动
引入echarts npm下载 npm install echarts cdn引入 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js" ></script> 引入中国地图china.js <script type="text/javascript" src="https:/
-
利用python绘制中国地图（含省界、河流等）
我们可以使用Basemap这个工具包来实现中国地图的绘制 首先需要加载一些包: import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.basemap import Basemap Basemap包就是气象画图的利器,现在我们就可以愉快的画图了! plt.figure(1) map=Basemap() map.drawcoastlines() plt.title(r'$World\ Map$',fontsize=2
-
Python pyecharts实现绘制中国地图的实例详解
目录 实例演示 1.pyecharts 1.9.1 版本安装与数据准备 2.添加数据项,默认中国地图显示 常用配置项及参数解析 1.设置是否默认选中 2.设置地图颜色类型是否分段显示 3.缩放平移配置 4.启用和关闭图形标记 5.关闭标签名称显示 6.颜色设置:标签颜色.区域颜色.边框颜色 实例演示 先给大家看下效果图哈. 1.pyecharts 1.9.1 版本安装与数据准备 首先需要安装 pyecharts 库,直接 pip install pyecharts 就好了. 新版本的话不需要单独
-
vue 使用 echarts 绘制中国地图的实现代码
1. 插入echarts 所需模块 import echarts from "echarts"; import 'echarts/map/js/china' // 使用中国地图需把China.js文件引入 2. 正式代码部分 //初始化echarts实例 通过传参获取要放置的id名称 var myChart = echarts.init(document.getElementById("容器的id名称")); // 指定图表的配置项和数据 var optionMap