基于vue的地图特效(飞线和标注)

这段代码的主要功能是在页面加载完成后,初始化一个 echarts 地图图表,并配置了相关的地理数据、散点数据、线条数据以及样式效果,最后在指定的 div 元素中进行展示。

需要再vue中的框架实现,不能单独直接运行。

标注

  • type: 'effectScatter' 表示这是一个带有特效的散点图。
  • coordinateSystem: 'geo' 表明其坐标系统基于地理坐标系。
  • label 配置了标签的显示格式、位置和是否显示。
  • itemStyle 设定了元素的阴影模糊度、阴影颜色和自身颜色。
  • symbolSize: 20 定义了散点的大小。
  • rippleEffect 配置了涟漪效果的相关参数。
  • data 数组中包含了几个具有名称和坐标值的城市数据,用于在地图上显示散点。

代码:

html 复制代码
{
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    label: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    },
                    itemStyle: {
                        shadowBlur: 10,
                        shadowColor: '#f00',
                        color:'#f00'
                    },
                    symbolSize:20,
                     rippleEffect: {
                        brushType: 'stroke',
                        scale:3
                    },
                    data:[
                        {name:'北京',value: [116.46, 39.92]},
                        {name:'乌鲁木齐',value: [87.68, 43.77]},
                        {name:'海口',value:  [110.35, 20.02]},
                        {name:'大连',value: [121.62, 38.92]}
                        ],
                },

飞线

  • type: "lines" 表示这是一个线条类型的图表。
  • effect 配置了线条的特效显示相关参数,如是否显示、周期和符号。
  • lineStyle 设定了线条的颜色、宽度、透明度和弯曲度。
  • data 数组中包含了两组坐标数据,用于绘制线条。
html 复制代码
 //箭头动画
                {
                    type:"lines",
                    effect:{
                        show:true,
                        period:5,
                        shmbol:'arrow',
                        symbolSize:10
                    },
                    lineStyle:{
                        color:'#C1A43C',
                        width:1,
                        opacity:1,
                        curveness:0.1,
                    },
                    data:[
                        [
                            {coord: [91.11, 29.97],},
                            {coord:[121.48, 31.22]}
                        ],
                        [
                            {coord:  [110.35, 20.02]},
                            {coord: [121.62, 38.92]}
                        ]
                    ]
                }

完整代码:

<script setup> 部分

  • 引入了 VuerefreactiveonMounted 钩子,以及 echarts 库和中国地图数据 chinaMap
  • 定义了一个 ref 变量 chart ,用于引用模板中的 div 元素。
  • onMounted 钩子中调用 chartInit 函数进行图表的初始化。
  • chartInit 函数中:
    • 使用 echarts.init 基于 chart.value 初始化图表实例 myChart
    • 注册了名为 china 的地图。
    • 配置了图表的选项 option ,包括地理信息(geo)部分的地图类型、地图数据、标签样式、区域颜色和强调效果等,以及两个系列的数据(一个是散点效果,一个是线条效果),并设置了相关的样式和数据。
    • 最后使用 setOption 方法应用配置选项显示图表。

<template> 部分

  • 定义了一个具有 ref="chart" 属性的 div 元素,用于展示图表,并设置了宽度为 100% ,高度为 600 像素。
html 复制代码
<script setup>
import {ref,reactive, onMounted} from 'vue'
import * as echarts from 'echarts';
import chinaMap from '../../assets/json/china.json'

let chart =ref();
onMounted(()=>{
    chartInit()
})
function chartInit(){
     // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(chart.value);
      echarts.registerMap('china',chinaMap)

      // 指定图表的配置项和数据
      var option = {
            geo:{
                type:'map',
                map:'china',
                label:{
                    show:true,
                    color:'#fff',
                    fontSize:10
                },
                itemStyle:{
                    areaColor:'#4D98FB',
                    borderColor:'#fff'
                },
                zoom:1.2,
                emphasis:{
                        lable:{
                            color:'#333'
                        },
                        itemStyle:{
                            areaColor:"#1BC1AD"
                        }
                    }
            },
            series:[
                {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    label: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    },
                    itemStyle: {
                        shadowBlur: 10,
                        shadowColor: '#f00',
                        color:'#f00'
                    },
                    symbolSize:20,
                     rippleEffect: {
                        brushType: 'stroke',
                        scale:3
                    },
                    data:[
                        {name:'北京',value: [116.46, 39.92]},
                        {name:'乌鲁木齐',value: [87.68, 43.77]},
                        {name:'海口',value:  [110.35, 20.02]},
                        {name:'大连',value: [121.62, 38.92]}
                        ],
                },
                //箭头动画
                {
                    type:"lines",
                    effect:{
                        show:true,
                        period:5,
                        shmbol:'arrow',
                        symbolSize:10
                    },
                    lineStyle:{
                        color:'#C1A43C',
                        width:1,
                        opacity:1,
                        curveness:0.1,
                    },
                    data:[
                        [
                            {coord: [91.11, 29.97],},
                            {coord:[121.48, 31.22]}
                        ],
                        [
                            {coord:  [110.35, 20.02]},
                            {coord: [121.62, 38.92]}
                        ]
                    ]
                }
            ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
}
</script>

<template>
  <div ref="chart" style="width: 100%;height:600px;"></div>
</template>

<style scoped>

</style>
相关推荐
并不会1 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子1 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、1 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜1 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师1 小时前
CSS的三个重点
前端·css
耶啵奶膘2 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^4 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie4 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic5 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿5 小时前
webWorker基本用法
前端·javascript·vue.js