echarts地图的常见用法:基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图、飞线图

2023-11-18

前言

最近几天用echarts做中国地图,就把以前写的demo:在vue中实现中国地图 拿来用,结果到项目里直接报错了,后来发现是因为版本的问题,没办法只能从头进行踩坑了。以下内容基于vue3echarts 5.32

常用的功能应该就这些,已经非常全了,创作不易,觉得不错就点个赞。

基本使用

获取地图数据

可以从 阿里云数据可视化平台 下载,下面都以山东地图为例(要下载包含子区域的)

有时候阿里云数据平台会升级服务导致无法下载地图数据,我从网上找了一份也可以用下面的下载

链接: 百度云地图json下载
提取码: abcd

demo

<template>
    <div class="echart-demo" id="demo"></div>
</template>

<script setup lang="ts">
//引入echart和json数据
import * as echarts from 'echarts'
import shanDong from './shandong.json'
import { onMounted } from 'vue'

//设置echart数据
let setOption = () => {
    //获取echart对象
    let dom = document.getElementById('demo')
    if (dom) {
        //初始化
        let myEchart = echarts.init(dom)
        //注册地图
        echarts.registerMap('山东', shanDong)
        let option = {
            series: [{
                tooltip: {
                    trigger: 'item',
                },
                name: '山东省数据',
                type: 'map',
                map: '山东', // 自定义扩展图表类型
                showLegendSymbol: true, // 存在legend时显示
                label: { // 文字
                    show: true,
                    color: '#fff',
                    fontSize: 10
                },
                itemStyle: { // 地图样式
                    areaColor: '#282C34',  //区域颜色
                    borderColor: '#ffffff',  //边框颜色
                    borderWidth: 1
                },
                emphasis: { // 鼠标移入时显示的默认样式
                    itemStyle: {
                        areaColor: '#4adcf0',
                        borderColor: '#404a59',
                        borderWidth: 1
                    },
                    label: { // 文字
                        show: true,
                        color: '#0D5EFF',
                        fontSize: 12,
                        fontWeight: 600
                    },
                },
                data: [],
            }],
        }
        myEchart.setOption(option);
        window.addEventListener('resize', function () {
            myEchart.resize();
        });
    }

}

onMounted(() => {
    setOption()
})

</script>

<style scoped lang="scss">
.echart-demo {
    width: 800px;
    height: 600px;
    border: 1px solid red;
}
</style>

效果图
在这里插入图片描述

区域分级

就拿疫情为例,之前有段时间烟台的疫情比较严重,我想让烟台显示为红色

series: [{
 tooltip: {
     trigger: 'item',
 },
 name: '山东省数据',
 type: 'map',
 map: '山东', // 自定义扩展图表类型
 showLegendSymbol: true, // 存在legend时显示
 label: { // 文字
     show: true,
     color: '#fff',
     fontSize: 10
 },
 itemStyle: { // 地图样式
     areaColor: '#282C34',  //区域颜色
     borderColor: '#ffffff',  //边框颜色
     borderWidth: 1
 },
 emphasis: { // 鼠标移入时显示的默认样式
     itemStyle: {
         areaColor: '#4adcf0',
         borderColor: '#404a59',
         borderWidth: 1
     },
     label: { // 文字
         show: true,
         color: '#0D5EFF',
         fontSize: 12,
         fontWeight: 600
     },
 },
 data: [
     {
         name: '烟台市',
         //自定义区域的颜色
         itemStyle: {
                 areaColor: '#F50508',
                 borderColor: '#1773c3', // 区域边框
                 shadowColor: '#1773c3', // 阴影
         }
     }
 ],
}],
}

效果:
在这里插入图片描述
注意点:
1、name的属性值必须要对应,比如地图上是烟台市,name值要是烟台,那么就不会生效。
2、你注册的地图名称,必须与map值一致,比如

 echarts.registerMap('山东', shanDong)
 map: '山东', // 自定义扩展图表类型

实际应用:
实际应用时一定会请求后台,可以根据后台返回的数据,来返回相应的data数据

水波

水波是比较常见的,一般是在中国地图上某几个市显示水波,这里就让省会济南显示水波。查询经纬度可以使用 百度拾取坐标系统

水波需要用到effectScatter,具体配置见:series-effectScatter

let option = {
   geo: {
       map: '山东',
       show: true,
       roam: true,
       label: {
           emphasis: {
               show: false
           }
       },
       // 地图的背景色
       itemStyle: {
           normal: {
               areaColor: '#091632',
               borderColor: '#9adcfa',
               shadowColor: '#09184F',
               shadowBlur: 20
           }
       }
   },
   series: [
       {
           tooltip: {
               trigger: 'item',
           },
           name: '山东省数据',
           type: 'map',
           map: '山东', // 自定义扩展图表类型
           showLegendSymbol: true, // 存在legend时显示
           label: { // 文字
               show: true,
               color: '#fff',
               fontSize: 10
           },
           itemStyle: { // 地图样式
               areaColor: '#282C34',  //区域颜色
               borderColor: '#ffffff',  //边框颜色
               borderWidth: 1
           },
           emphasis: { // 鼠标移入时显示的默认样式
               itemStyle: {
                   areaColor: '#4adcf0',
                   borderColor: '#404a59',
                   borderWidth: 1
               },
               label: { // 文字
                   show: true,
                   color: '#0D5EFF',
                   fontSize: 12,
                   fontWeight: 600
               },
           },
           data: [],
           zlevel: 0  //层级,层级大的会在层级小的上面
       },
       // 气泡
       {
           type: 'effectScatter',
           coordinateSystem: 'geo',  //使用地理坐标系
           //要有对应的经纬度才显示,先经度再维度
           data: [{ name: '济南', value: [117, 36.67] }],
           showEffectOn: 'render',  //绘制完成后显示特效
           rippleEffect: {
               scale: 4, // 波纹的最大缩放比例
               brushType: 'stroke'
           },
           hoverAnimation: true,
           label: {  //图形上的文本标签
               show: true,
               formatter: '{b}',
               position: 'right',
               fontWeight: 500,
               fontSize: 10
           },
           //默认样式
           itemStyle: {
               color: '#32cd32',
               shadowBlur: 10,
               shadowColor: '#333'
           },
           //鼠标移入时样式
           emphasis: {
               itemStyle: {
                   color: '#f4e925' // 高亮颜色
               }
           },
           zlevel: 1
       }
   ],
}

关键点:
1、要显示水波的数据格式

//要有对应的经纬度才显示,先经度再维度
 data: [{ name: '济南', value: [117, 36.67] }],

2、必须添加geo,否则水波不会显示,搞了好久才发现问题在哪。具体配置见:geo配置

效果:
在这里插入图片描述

轮播高亮

思路:当鼠标移入时,区域会高亮,轮播高亮无非就是模拟鼠标移入(当然可能不太准确),下面会给一个简单demo,细节方面可能会有问题,大家自己改一下就好。

实现轮播高亮我们需要借助官方提供的:dispatchActionhighlightdownplay 这3个API来实现

//设置轮播
myEchart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,  //指定哪一个系列,就是series里的哪一个
    dataIndex: 0  //指定高亮的下标
})

在这里插入图片描述
注意: 必须在设置完属性后,再使用

接下来无法就是用个定时器,动态改变dataIndex的值就好

效果:
在这里插入图片描述

完整代码:

<template>
    <div class="echart-demo" id="demo"></div>
</template>

<script setup lang="ts">
//引入echart和json数据
import * as echarts from 'echarts'
import shanDong from './shandong.json'
import { onMounted } from 'vue'

//记录echart对象
let myEchartRef: any = null

//记录高亮的下标
let activeIndex = 0

//改变激活项
let changeIndex = () => {
    //山东省有16个地级市,就随机生成0~15之间的正整数
    let index = parseInt(Math.random() * 16)
    //清除之前的高亮
    myEchartRef.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: activeIndex
    });
    //设置高亮
    myEchartRef.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,  //指定哪一个系列,就是series里的哪一个
        dataIndex: index  //指定高亮的下标
    })
    //跟新标识
    activeIndex = index
}

//设置echart数据
let setOption = () => {
    //获取echart对象
    let dom = document.getElementById('demo')
    if (dom) {
        //初始化
        myEchartRef = echarts.init(dom)
        //注册地图
        echarts.registerMap('山东', shanDong)
        let option = {
            series: [
                {
                    tooltip: {
                        trigger: 'item',
                    },
                    name: '山东省数据',
                    type: 'map',
                    map: '山东', // 自定义扩展图表类型
                    showLegendSymbol: true, // 存在legend时显示
                    label: { // 文字
                        show: true,
                        color: '#fff',
                        fontSize: 10
                    },
                    itemStyle: { // 地图样式
                        areaColor: '#282C34',  //区域颜色
                        borderColor: '#ffffff',  //边框颜色
                        borderWidth: 1
                    },
                    emphasis: { // 鼠标移入时显示的默认样式
                        itemStyle: {
                            areaColor: '#4adcf0',
                            borderColor: '#404a59',
                            borderWidth: 1
                        },
                        label: { // 文字
                            show: true,
                            color: '#0D5EFF',
                            fontSize: 12,
                            fontWeight: 600
                        },
                    },
                    data: [],
                    zlevel: 0  //层级,层级大的会在层级小的上面
                },
            ],
        }
        myEchartRef.setOption(option);

        window.addEventListener('resize', function () {
            myEchartRef.resize();
        });
    }

}

onMounted(() => {
    setOption()
    setInterval(() => {
        changeIndex()
    }, 2000)
})

</script>

<style scoped lang="scss">
.echart-demo {
    width: 800px;
    height: 600px;
    border: 1px solid red;
}
</style>

注意:
要考虑鼠标的移入移出问题:当鼠标移入时清除定时器,当前移入项设置为高亮。当鼠标移出时重新执行定时器。这个就不处理了,有用到的话,自己处理一下。

官方的鼠标事件

给地图添加背景图片和图标

效果图
效果图比较简陋,大体上差不多
在这里插入图片描述
代码

<template>
    <div class="echart-demo" id="demo"></div>
</template>

<script setup lang="ts">
// 引入echart和json数据
import * as echarts from 'echarts';
import shanDong from './shandong.json';
import { onMounted } from 'vue';
import bg from './bg.png';
import home from './home.png';

// 设置echart数据
const setOption = () => {
    // 获取echart对象
    const dom = document.getElementById('demo');
    if (dom) {
        // 初始化
        const myEchart = echarts.init(dom);
        // 注册地图
        echarts.registerMap('山东', shanDong);
        const option = {
            geo: {
                map: '山东',
                show: true,
                roam: true,
                label: {
                    emphasis: {
                        show: false
                    }
                }
            },
            series: [
                {
                    tooltip: {
                        trigger: 'item'
                    },
                    name: '山东省数据',
                    type: 'map',
                    map: '山东', // 自定义扩展图表类型
                    showLegendSymbol: true, // 存在legend时显示
                    label: { // 文字
                        show: true,
                        color: 'black',
                        fontSize: 15
                    },
                    itemStyle: { // 地图样式
                    //  areaColor: '#282C34', // 区域颜色
                        areaColor: {
                            image: bg,
                            repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'
                        },
                        borderColor: '#ffffff', // 边框颜色
                        borderWidth: 1
                    },
                    emphasis: { // 鼠标移入时显示的默认样式
                        itemStyle: {
                            areaColor: '#4adcf0',
                            borderColor: '#404a59',
                            borderWidth: 1
                        },
                        label: { // 文字
                            show: true,
                            color: '#0D5EFF',
                            fontSize: 12,
                            fontWeight: 600
                        }
                    },
                    data: []
                },
                {
                    type: 'effectScatter',
                    coordinateSystem: 'geo', // 使用地理坐标系
                    // 要有对应的经纬度才显示,先经度再维度
                    data: [{ name: '济南', value: [117, 36.67] }],
                    showEffectOn: 'render', // 绘制完成后显示特效
                    hoverAnimation: true,
                    label: { // 图形上的文本标签
                        show: true,
                        formatter: '{b}',
                        position: 'right',
                        fontWeight: 500,
                        fontSize: 10,
                        width: 50,
                        height: 50,
                        backgroundColor: {
                            image: home
                        }
                    },
                    // 默认样式
                    itemStyle: {
                        color: 'transparent',
                        shadowBlur: 10,
                        shadowColor: '#333'
                    },
                    zlevel: 1
                }
            ]
        };
        myEchart.setOption(option);
        window.addEventListener('resize', function() {
            myEchart.resize();
        });
    }
};

onMounted(() => {
    setOption();
});

</script>

<style scoped lang="scss">
.echart-demo {
    width: 800px;
    height: 600px;
    border: 1px solid red;
}
</style>

注意点:

1、地图的背景

在地图中有一个itemStyle属性,可以指定背景图片

itemStyle: { // 地图样式
//  areaColor: '#282C34', // 区域颜色
    areaColor: {
        image: bg,
        repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'
    },
    borderColor: '#ffffff', // 边框颜色
    borderWidth: 1
},

2、图标需要借助geo才可以实现

图标图片通过设置label的背景颜色实现

label: { // 图形上的文本标签
     show: true,
     formatter: '{b}',
     position: 'right',
     fontWeight: 500,
     fontSize: 10,
     width: 50,
     height: 50,
     backgroundColor: {
         image: home
     }
 },

geo默认会有一个带颜色的圆圈,这会影响显示,这里设置成透明色

 // 默认样式
 itemStyle: {
     color: 'transparent',
     shadowBlur: 10,
     shadowColor: '#333'
 },

3d地图

最近又研究了一下3d地图,还是非常简单的,与普通的平面地图区别不大,具体配置见:GL配置

效果图
在这里插入图片描述
完整代码

<template>
    <div class="echart-demo" id="demo"></div>
</template>

<script setup lang="ts">
// 引入echart和json数据
import * as echarts from 'echarts';
import 'echarts-gl';
// 地图json数据
import shanDong from './shandong.json';
import { onMounted } from 'vue';

// 设置echart数据
const setOption = () => {
    // 获取echart对象
    const dom = document.getElementById('demo');
    if (dom) {
        // 初始化
        const myEchart = echarts.init(dom);
        // 注册地图
        echarts.registerMap('shandong', shanDong);
        const option = {
            title: {
                text: '山东地图',
                left: 'center'
            },
            series: [
                {
                    tooltip: {
                        trigger: 'item'
                    },
                    name: '山东省数据',
                    type: 'map3D',
                    map: 'shandong', // 自定义扩展图表类型
                    showLegendSymbol: true, // 存在legend时显示
                    label: { // 文字
                        show: true,
                        color: '#fff8dc',
                        fontSize: 10
                    },
                    itemStyle: { // 地图样式
                        color: '#47D6FC', // 区域颜色
                        borderColor: '#708090', // 边框颜色
                        borderWidth: 1
                    },
                    emphasis: { // 鼠标移入时显示的默认样式
                        itemStyle: {
                            areaColor: '#0E1738',
                            borderColor: '#404a59',
                            borderWidth: 1
                        },
                        label: { // 文字
                            show: true,
                            color: '#deb887',
                            fontSize: 14
                        }
                    },
                    data: []
                }]
        };
        myEchart.setOption(option);
        window.addEventListener('resize', function() {
            myEchart.resize();
        });
    }
};

onMounted(() => {
    setOption();
});

</script>

<style scoped lang="scss">
.echart-demo {
    width: 800px;
    height: 600px;
    border: 1px solid red;
}
</style>

飞线图

前两天有个同学留言问飞线图怎么实现,刚好今天有空,百度查了一下资料实现了。
飞线图的核心是必须要设置geo属性,否则无法实现。剩下的东西,就是原有知识点的添加。气泡和坐标部分可以不用,只是用来突出起点和终点的;起点和终点也可以都是气泡(坐标)

效果图
在这里插入图片描述

完整代码

<template>
    <div class="echart-demo" id="demo"></div>
</template>

<script setup lang="ts">
// 引入echart和json数据
import * as echarts from 'echarts';
import shanDong from './shandong.js';
import { onMounted } from 'vue';

// 设置echart数据
let setOption = () => {
    // 获取echart对象
    let dom = document.getElementById('demo');
    if (dom) {
        // 初始化
        let myEchart = echarts.init(dom);
        // 注册地图
        echarts.registerMap('山东', shanDong);
        let option = {
            geo: {
                map: '山东',
                show: true,
                roam: true,
                label: {
                    emphasis: {
                        show: false
                    }
                },
                // 地图的背景色
                itemStyle: {
                    normal: {
                        areaColor: '#091632',
                        borderColor: '#9adcfa',
                        shadowColor: '#09184F',
                        shadowBlur: 20
                    }
                }
            },
            series: [
                // 地图信息
                {
                    tooltip: {
                        trigger: 'item'
                    },
                    name: '山东省数据',
                    type: 'map',
                    map: '山东', // 自定义扩展图表类型
                    showLegendSymbol: true, // 存在legend时显示
                    label: { // 文字
                        show: true,
                        color: '#fff',
                        fontSize: 10
                    },
                    itemStyle: { // 地图样式
                        areaColor: '#282C34', // 区域颜色
                        borderColor: '#ffffff', // 边框颜色
                        borderWidth: 1
                    },
                    emphasis: { // 鼠标移入时显示的默认样式
                        itemStyle: {
                            areaColor: '#4adcf0',
                            borderColor: '#404a59',
                            borderWidth: 1
                        },
                        label: { // 文字
                            show: true,
                            color: '#0D5EFF',
                            fontSize: 12,
                            fontWeight: 600
                        }
                    },
                    data: []
                },
                // 飞线
                {
                    type: 'lines',
                    zlevel: 1,
                    effect: {
                        show: true,
                        period: 4, // 箭头指向速度,值越小速度越快
                        trailLength: 0.1, // 特效尾迹长度[0,1]值越大,尾迹越长重
                        symbol: 'arrow', // 箭头图标
                        symbolSize: 10 // 图标大小
                    },
                    lineStyle: {
                        normal: {
                            width: 1, // 尾迹线条宽度
                            opacity: 1, // 尾迹线条透明度
                            curveness: 0.3 // 尾迹线条曲直度
                        }
                    },
                    data: [
                        {
                            fromName: '济南',
                            toName: '烟台',
                            coords: [
                                [117, 36.67], // 起始
                                [121.4, 37.54] // 结束
                            ]
                        }
                    ]
                },
                // 气泡,用于突出目的地
                {
                    type: 'effectScatter',
                    coordinateSystem: 'geo', // 使用地理坐标系
                    // 要有对应的经纬度才显示,先经度再维度
                    data: [
                        { name: '烟台市', value: [121.4, 37.54] }
                    ],
                    showEffectOn: 'render', // 绘制完成后显示特效
                    rippleEffect: {
                        scale: 4, // 波纹的最大缩放比例
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: { // 图形上的文本标签
                        show: true,
                        formatter: '{b}',
                        position: 'right',
                        fontWeight: 500,
                        fontSize: 10
                    },
                    // 默认样式
                    itemStyle: {
                        color: '#32cd32',
                        shadowBlur: 10,
                        shadowColor: '#333'
                    },
                    // 鼠标移入时样式
                    emphasis: {
                        itemStyle: {
                            color: '#f4e925' // 高亮颜色
                        }
                    },
                    zlevel: 1
                },
                // 坐标用于突出起点
                {
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    rippleEffect: {
                        period: 3,
                        brushType: 'stroke',
                        scale: 3
                    },
                    symbol: 'pin',
                    symbolSize: 50,
                    data: [
                        {
                            name: '济南市',
                            value: [117, 36.67]
                        }
                    ]
                }
            ]
        };
        myEchart.setOption(option);
        window.addEventListener('resize', function() {
            myEchart.resize();
        });
    }
};

onMounted(() => {
    setOption();
});

</script>

<style scoped lang="scss">
.echart-demo {
    width: 800px;
    height: 600px;
    border: 1px solid red;
}
</style>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

echarts地图的常见用法:基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图、飞线图 的相关文章

  • 我需要从带有数据页的页面在组件中运行函数

    我有一个用于绘制图形或树的组件 并且我在页面中使用此组件 我的 axios 在页面上并提供数据 我需要将数据传递给组件的函数 然后从页面数据中绘制我的树 My Page
  • Vue.js - 如何获取 v-for 子组件中的最后一个子引用

    我想在页面加载后播放最新的音频
  • 在 Vue.js 中,如何防止子路由的导航?

    好的一点是beforeRouteLeave是你可以防止在某些情况下导航离开 我有一个使用子路由来渲染页面的一部分的设置 我希望在子路线上设置一个导航守卫 以防止在未保存数据的情况下切换到另一条路线 path customers view c
  • Vue.js 路由器 - 条件组件渲染

    routes path name home get component if Vue loggedIn return Home else return Login 我添加了一个吸气剂 似乎工作正常 但我在 if 语句中使用的任何变量或函数都
  • 如何在vue中覆盖materializecss sass变量?

    我想改变物化中的变量 变量 scss https github com Dogfalo materialize blob master sass components variables scss e g primary color col
  • 可以在 Vue 模板中渲染 VNode 吗?

    我遇到的情况是 我有一个渲染函数将一些数据传递到作用域槽 作为此数据的一部分 我想包含一些由渲染函数构造的 VNode 这些 VNode 可以选择由作用域插槽使用 无论如何 在模板中编写作用域槽以输出收到的原始 VNode 时是否存在 Vu
  • 超出最大调用堆栈大小 - Vue.js

    我有一个计算方法 可以让我计算产品的总价和折扣值 并希望获得以下值 总计 折扣 cartTotal var total 0 var discount Math round 0 1 this cartTotal 100 100 this ca
  • 在 docker 容器内运行 vite 开发服务器

    我有一个 Vue cli 应用程序 我正在尝试将其转换为 vite 我正在使用 Docker 来运行服务器 我看了几个教程 并让 vite 在开发模式下运行 没有错误 但是 浏览器无法访问该端口 也就是说 当我在 macbook 的命令行上
  • 如何使用 VueJS router-link 活动样式

    我的页面当前有 Navigation vue 组件 我想让每个导航悬停并处于活动状态 这hover有效但是active没有 这是 Navigation vue 文件的样子
  • vue.js keyup, keydown 事件落后一个字符

    我正在使用 keydown keyup 事件 它调用一个 javascript 函数 该函数将输入框的值打印到控制台 以及事件的 currentTarget 字段的值 并且我注意到它晚了一个字符 例如 如果我输入hello进入输入框 我只看
  • vue中有自动更新这段代码的东西吗?

    我在导航器中找到了这个按钮 当用户登录时会显示该按钮 而当用户注销时该按钮就会消失 但现在我需要在按钮删除 出现之前刷新页面 这是我的代码 Button div div class div div
  • 如何预渲染多个Vue应用页面?

    我正在尝试 未成功 在使用 Vue CLI 搭建的同一项目中预渲染多个 Vue 应用程序的 HTML 由于多种原因 我不想使用 Vue Router 或 Nuxt 等 我尝试过使用预渲染 Spa 插件 https github com ch
  • 观察者不触发

    我正在使用带有选项 API 的 Vue 3 如下面发布的代码所示 在watch对象 我监视发生的变化isToggleBtnLabelDigitizePolygon 在方法中onDigitizePolygon我改变的值isToggleBtnL
  • 使用 vee-validate 在 vue js 中进行验证有错误

    我想在 vuejs 中进行验证 因为我正在使用 vee validate 我的vue js版本是2 6 10 并安装 run npm install vee validate 我在 main ts 中声明 import VeeValidat
  • 媒体查询在 VueJS 样式标签中不起作用

    我正在尝试在 VueJS 组件的样式标签中使用 media media 中的样式始终有效 而不是使用宽度规则
  • 如何从特定索引渲染 v-for

    我想在 v for 中循环假设从数字 5 到 10 循环希望在 5 点开始并在 10 点结束 我试过这个 div div 但我想要更有效的循环方式 有谁知道如何让循环从 5 开始 对于你的例子来说是可能的 div some code her
  • vuejs 延迟加载组件,无需路由器

    vue 中的延迟加载组件使用 webpack 并不困难 https alligator io vuejs lazy loading vue cli 3 webpack https alligator io vuejs lazy loadin
  • Vuex存储数据总是驻留在内存中?

    首先 我希望您能理解我蹩脚的英语 我想知道Vuex的存储数据是否总是驻留在内存中 让我用一个例子来解释一下 当进入页面A时 我们从服务器收到一个列表 并实现将其存储在商店中 这是否意味着当我进入页面A并移动到页面B时 A的列表将保留在内存中
  • 当 Vuejs 中的 props 值发生变化时,DOM 不会更新

    我有父母和孩子 在父级中 我将 3 个变量作为 props 传递给子级 在孩子中我正在使用watch 寻找变量的变化 当孩子第一次被创建时watch按预期工作 但是当更新 props 中的数据时 子级的 DOM 不会更新 正在寻找变量数据变
  • Vue Draggable - 如何仅替换所选项目以防止移动网格上的所有其他项目?

    这是一个要测试的示例 https codesandbox io s j4vn761455 file src App vue 112 116 https codesandbox io s j4vn761455 file src App vue

随机推荐

  • Recovery系统升级(2)--- 软件架构

    软件架构 Recovery升级系统原理 Main System下载新版本升级包到设备存储 重启进入Recovery System Recovery从设备存储load升级包并升级Main System 最后重启回到Main System 与之
  • DLT(Diagnostic Log and Trace)嵌入式系统程序运行记录

    http blog csdn net yanlinembed article details 49837975 DLT的使用有属于Application范畴与Context范畴 在使用DLT时 需要包含以下头文件 include
  • 浅谈在线IDE的搭建,配置,体验

    首先想说一句 在线IDE体验不是很好 也可能是对于在线的IDE有了太多的期望 网页实现一些软件的功能确实比较困难 已经体验的IDE有 腾讯家的Coding Cloud Studio 亚马逊家的 Cloud9 代码沙盒 Codesandbox
  • 慧眼识才、认识自己

    慧眼识才的十二杆标尺 学历 经历 掌控特质 老虎性格 表现特质 孔雀性格 耐心特质 考拉性格 精确特质 猫头鹰性格 自信心 精力水平 现场爆发力 策略规划力 支持执行力 敏锐度 慧眼识才的十二杆标尺包括由表及里的五个圈层 最外层是学历和经历
  • maven [INFO] Generating project in Batch mode

    搜资料很简单是某些东西被Q了 那么解决方法也很简单 S S T A P全局模式就OK了
  • Flask框架的web开发02(web项目整体架构)

    目录 一 flask框架整体构造 1 介绍 2 构造图 二 核心对象 管理 启动模块 1 核心对象app py模块 2 管理模块manager py 3 启动模块server py 三 配置文件模块 四 forms验证模块 五 libs公共
  • 关于华三HCL使用时,设备端口状态为down的解决

    内存不能低于默认值 可以通过关闭一些模拟器中的设备 可以关闭物理机上一些正在使用的应用和后台程序 一台或少量的启动设备
  • 习题

    1 在路由器上配置SSH服务器的过程 2 简述以太网交换机Mac地址表的学习过程 首先当4台pc机连接到交换机相互通信时 交换机会取出每个数据包的源MAC地址 通过算法找到相应的位置 如果是新地址 则创建地址表项 填写相应的端口信息 生命周
  • 1132. 合法的三角数

    给定一个包含非负整数的数组 你的任务是计算从数组中选出的可以制作三角形的三元组数目 如果我们把它们作为三角形的边长 样例 输入 2 2 3 4 输出 3 解释 合法的组合如下 2 3 4 使用第一个 2 2 3 4 使用第二个 2 2 2
  • 【机试练习】【C++】随机选择算法

    随机选择算法的实现 include
  • 【并发多线程】java.util.concurrent简介

    主要的组件 Executor ExecutorService ScheduledExecutorService Future CountDownLatch CyclicBarrier Semaphore ThreadFactory java
  • matlab遗传算法求多元函数最小值,matlab遗传算法求函数最小值

    function obj yichuan lb ub px pm lb ub为自变量的下界与上界 px为杂交概率 pm为变异概率 popsize 40 设定种群大小为40 maxgen 500 设定最大遗传代数为500代 dim 20 定义
  • 鸡和兔子共36脚100Matlab,matlab编程.ppt

    matlab编程 ppt 由会员分享 可在线阅读 更多相关 matlab编程 ppt 51页珍藏版 请在人人文库网上搜索 1 1 Matlab 编程基础 数学实验 数学软件 Matlab 2 本讲主要内容 M 文件 Matlab 编程基础
  • c语言基础回顾 —— 其他知识点

    参考 c语言基础回顾 其他知识点 作者 丶PURSUING 发布时间 2021 03 11 14 48 59 网址 https blog csdn net weixin 44742824 article details 114666007
  • python实现微信机器人: 登录微信、消息接收、自动回复

    安装wxpy pip install U wxpy 登录微信 导入模块 from wxpy import 初始化机器人 扫码登陆 bot Bot 运行以上代码 会生成一个二维码 通过图片扫描二维码即可登录微信 如果是在服务器上运行代码 无法
  • 了解java

    目录 一 Java是什么 二 Java语言特性 1 简单性 2 面向对象 3 健壮性 4 多线程 5 可移植性 跨平台 三 Java两种核心机制 1 Java虚拟机 Java Virtal Machine 2 垃圾收集机制 Garbage
  • 【22-23 春学期】人工智能基础--AI作业10-经典卷积网络

    LeNet MNIST LeNet是由Yann LeCun及其合作者于1998年开发的一种具有开创性的卷积神经网络架构 它的设计目的是识别手写数字并执行图像分类任务 MNIST是一个用于手写数字识别的大型数据库 常被用于训练图像处理系统 L
  • VTK C++版本本地编译(含OOCT编译及创建项目)

    官方编译 以Linux为主 也有Window的处理方式 可以参考 讲述Windows环境下如何进行处理 前期准备 VTK ZIP 建议下载最新版 否则会出错 也可按照需要自行选择 CMake Visualstudio 版本无要求 我下载的是
  • [仿真]PMSM矢量控制——滑模速度环

    PMSM在Simulink下的FOC滑模速度环仿真 摘要 PMSM的FOC模型 PI速度环 PMSM的FOC模型 滑模速度环 关于滑模速度环改进的讨论 摘要 本文将通过一个PMSM在Simulink下的FOC仿真 来对比PI速度环和滑模速度
  • echarts地图的常见用法:基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图、飞线图

    前言 最近几天用echarts做中国地图 就把以前写的demo 在vue中实现中国地图 拿来用 结果到项目里直接报错了 后来发现是因为版本的问题 没办法只能从头进行踩坑了 以下内容基于vue3 和 echarts 5 32 常用的功能应该就