echarts省市地图数据展示,echarts显示省地图区县
本文主要介绍了Vue ECharts实现中国地图的绘制、拖动、缩放和各省自动轮播高亮显示。这篇文章给你做了非常详细的介绍，对你的学习或者工作有一定的参考价值。有需要的朋友可以参考一下。
目录
实现效果完整代码详细注释要点汇总
实现效果
完整代码+详细注释
模板
div class=echart
div class=内容
div id=map_cn/div
/div
/div
/模板
脚本
从“echarts”导入e charts；
导入 e charts/map/js/China . js //这一步必须介绍
导出默认值{
data() {
返回{
//地图中的数据
数据列表：[
{
名称：南海诸岛，
价值：25，
},
{
名称：北京，
值：71，
},
{
名称：天津，
值：52，
},
{
名称：上海，
值：14，
},
{
名称：重庆，
价值：50，
},
{
名称：河北，
价值：20，
},
{
名称：河南，
值：30，
},
{
名称：云南，
价值：55，
},
{
名称：辽宁，
价值：50，
},
{
名称：黑龙江，
价值：40，
},
{
姓名：湖南，
值：6，
},
{
姓名：安徽，
值：96，
},
{
名称：山东，
价值：75，
},
{
名称：新疆，
值：45，
},
{
名称：江苏，
值：15，
},
{
名称：浙江，
值：8，
},
{
名称：江西，
值：78，
},
{
名称：湖北，
值：78，
},
{
名称：广西，
值：36，
},
{
名称：甘肃，
价值：25，
},
{
名称：山西，
价值：140，
},
{
名称：内蒙古，
价值：85，
},
{
名称：陕西，
价值：85，
},
{
名称：吉林，
值：74，
},
{
名称：福建，
价值：20，
},
{
名称：贵州，
值：74，
},
{
名称：广东，
值：47，
},
{
名称：青海，
值：45，
},
{
名称：西藏，
值：41，
},
{
名称：四川，
值：3，
},
{
名称：宁夏，
值：7，
},
{
名称：海南，
值：7，
},
{
名称：台湾省，
价值：200，
},
{
名称：香港，
值：2，
},
{
名称：澳门，
价值：5，
}
],
//指定图表的配置项和数据。
选项：{
//标题组件
标题：{
秀：真的，
正文：“中国所有省份的旅游景点数量(评级)”，
潜台词：“截至2021年12月”，
左：“中间”，
top: 16，
},
//提示框组件
工具提示：{
秀：真的，
//触发器类型：数据项图形触发器
触发器：“项目”，
填充：10，
borderWidth: 1，
边框颜色： #409eff ，
背景色： rgba(255，255，255，0.4)，
textStyle: {
颜色： #000000 ,
字体大小：12
},
//提示框内容格式器
格式化程序：(e)={
设数据=电子数据
//此处将各等级景点数量表示为0-10内的随机整数
数据。五=数学。random()* 10 0；
数据。四=数学。random()* 10 0；
数据。三=数学。random()* 10 0；
数据。二=数学。random()* 10 0；
数据。一=数学。random()* 10 0；
//景点数量-五个等级之和
数据。数字=数据。五个数据。四个数据。三个数据。两个数据。一；
//字符串模板
let context=`
差异
p style= line-height:30px；font-weight: 600${data.name}/p
磷化氢景点数量：/spanspan${data.number}处/span/p
pspan5A级：/spanspan${data.five}处/span/p
pspan4A级：/spanspan${data.four}处/span/p
pspan3A级：/spanspan${data.three}处/span/p
pspan2A级：/spanspan${data.two}处/span/p
pspan1A级：/spanspan${data.one}处/span/p
/div
`;
返回上下文；
}
},
//视觉映射组件（左下角)
视觉图：{
秀：真的，
左：26,
底部：40,
显示标签:没错，
//是否显示拖拽用的手柄（手柄能拖拽调整选中范围)
可计算：假，
//拖拽时，是否实时更新
实时：真，
对齐："左",
//各颜色代表的区域
件数：[
{
gte: 100，
标签:"100",
颜色： #FDB669
},
{
gte: 50，
lt: 99，
标签:"50 - 99",
颜色： #FECA7B
},
{
gte: 30，
lt: 49，
标签:"30 - 49",
颜色： #FEE191
},
{
gte: 10，
lt: 29，
标签:"10 - 29",
颜色： #FFF0A8
},
{
lt: 9，
标签:"10",
颜色： #FFFFBF
}
]
},
//地理坐标系组件
地理位置：{
//使用注册地图注册的地图名称
地图："中国",
//是否开启鼠标缩放和平移漫游
漫游：没错，
//当前视角缩放比例
缩放：1,
//滚轮缩放的极限控制
比例限制：{
最小值：1,//最小一倍
最大值：3 //最大3倍
},
//地图组件离容器的距离
top: 90，
左："中间",
//图形上的文本标签
标签:{
秀：真的，
字体大小："11"
},
//地图区域的多边形图形样式
项目样式：{
borderColor: rgba(0，0，0，0.2)，
阴影颜色： rgba(0，0，0，0.2)，
暗影模糊：10,
//高亮状态（鼠标移入后)的多边形和标签样式
重点：{
areaColor: #f98333 ，
shadowOffsetX: 2，
shadowOffsetY: 2，
},
}
},
系列：[
{
类型："地图",
漫游：没错，
地理索引：0,
数据： ,
标签:{
秀：真的，
}
}
]
},
};
},
方法：{
//定义方法绘制地图绘制中国地图
draw_map() {
让我的图表=这个图表。init(文档。getelementbyid( map _ cn )；
//高亮轮播展示
var小时指数=0；
var循环时间=空
//setInterval()可在每隔指定的毫秒数循环调用函数或表达式，直到间隙把它清除
//使用设置间隔方法后，必须使用箭头函数而不能写功能，否则后续在该方法中无法调用数据中的数据
//carousel time=setInterval(function(){//错误写法
carouselTime=setInterval(()={
//调度操作电子图表的API:触发图表行为
myChart.dispatchAction({
类型："淡化",//淡化取消高亮指定的数据图形
seriesIndex: 0
});
myChart.dispatchAction({
键入："突出显示",//突出显示高亮指定的数据图形
seriesIndex: 0，//系列指数
dataIndex: hourIndex //数据指数
});
myChart.dispatchAction({
类型：“showTip”，//showTip显示提示框
seriesIndex: 0，
数据索引：小时索引
});
小时指数；
//当循环到数组当中的最后一条数据后，重新进行循环
如果(小时指数这个。数据表。长度){
小时指数=0；
}
}, 3000);
//鼠标移入组件时停止轮播
myChart.on(mousemove ，(e)={
清除间隔(转盘时间)；//清除循环
myChart.dispatchAction({
类型：淡化，
seriesIndex: 0，
});
myChart.dispatchAction({
类型：突出显示，
seriesIndex: 0，
数据索引：e。数据索引
});
myChart.dispatchAction({
键入：显示提示，
seriesIndex: 0，
数据索引：e。数据索引
});
});
//鼠标移出组件时恢复轮播
myChart.on(mouseout ，()={
carouselTime=setInterval(()={
myChart.dispatchAction({
类型：淡化，
seriesIndex: 0，
});
myChart.dispatchAction({
类型：突出显示，
seriesIndex: 0，
数据索引：小时索引
});
myChart.dispatchAction({
键入：显示提示，
seriesIndex: 0，
数据索引：小时索引
});
小时指数；
如果(小时指数这个。数据表。长度){
小时指数=0；
}
}, 3000);
});
//显示地图
我的图表。setoption(这个。选项)；
},
//修改统计图配制
setEchartOption() {
this.option.series[0].data=this.dataList
},
},
已创建(){
这个。setechartoption()；
},
已安装(){
这个. nextTick(()={
这个。draw _ map()；
});
}
};
/脚本
样式范围语言=少。echart {
宽度：100%;内容{
宽度：95.8%;
高度：100像素
边距：自动；
#map_cn {
宽度：65%;
身高：7雷姆；
背景色：# eaeaea
边距：自动；
}
}
}
/风格
要点小结
1.setTimeout()与setInterval()的区别
setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式，只执行一次；
setInterval()可在每隔指定的毫秒数循环调用函数或表达式，直到间隙把它清除，多次调用。
2.使用setInterval()方法后，必须使用箭头函数形式而不能用功能
如果使用功能，后续在该方法中调用数据中的数据如控制台。日志(这个。数据表。长度)；会报如下错误（其实就是找不到该数据);
这是因为fun()、( function(){.})() 或回调函数中的这默认都指向窗口，而窗户中是找不到你所要用的数据中的数据的，我们应该改为箭头函数形式。
以上是Vue ECharts实现中国地图绘制和各省自动轮播高亮的详细内容。更多关于Vue ECharts中国地图绘制的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。