vue echarts map 做迁徙图

最新推荐文章于 2023-12-20 14:57:28 发布
最新推荐文章于 2023-12-20 14:57:28 发布
阅读量294 收藏
点赞数
文章标签： vue.js echarts javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50867375/article/details/132343568
版权 
<chart-map tmpId="passengerFlowMap" :data="proAreaList"></chart-map>
import chartMap from '@/charts/ChartMap'
//ChartMap.vue文件
<template>
    <div>
        <div :id="tmpId" class="main"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
import geoJson from '@/assets/json/china.json'//中国地图的json文件
export default {
    data() {
        return {
            myChart: null,
            dataAll: 0
        }
    },
    props: {
        data: {
            type: Array,
            default: () => [],
            required: true
        },
        tmpId: {
            type: String,
            default: () => 'id_chartpie' + Date.now(),
            required: false
        }
    },
    watch: {
        data: {
            handler(val) {
                this.init()
            }
        }
    },
    mounted() {
        let _this = this
        echarts.registerMap('china', geoJson)
        this.myChart = echarts.init(document.getElementById(this.tmpId))
        window.addEventListener('resize', () => {
            setTimeout(function timer() {
                _this.myChart.resize()
            }, 100)
        })
        this.init()
    },
    methods: {
        init() {
            let _this = this
            this.dataAll = 0
            let chinaGeoCoordMap = {}
            let chinaDatas = []
            let curIndex = 0
            if (this.data.length === 0) {
                return
            }
            this.data.forEach(e => {
                chinaGeoCoordMap[e.name] = [e.longitude, e.latitude]
                chinaDatas.push({
                    name: e.name,
                    value: e.num
                })
                _this.dataAll += Number(e.num)
            })
            chinaGeoCoordMap[_this.$setting.mapCenterName] = _this.$setting.mapCenter
            var series = []
            var option = {
                layoutCenter: ['50%', '72.5%'],
                layoutSize: 800,
                tooltip: {
                    trigger: 'item',
                    backgroundColor: '#000',
                    borderColor: '#00748D',
                    textStyle: {
                        // 提示框浮层的文本样式。
                        color: '#fff',
                        fontStyle: 'normal',
                        fontWeight: 'normal',
                        fontFamily: 'sans-serif',
                        fontSize: 14
                    },
                    showDelay: 0,
                    hideDelay: 0,
                    enterable: true,
                    transitionDuration: 0,
                    extraCssText: 'z-index:100',
                    formatter: function(params, ticket, callback) {
                        //根据业务自己拓展要显示的内容
                        var res = ''
                        var name = params.name
                        var value = params.value[params.seriesIndex + 1]
                        if (params.seriesType !== 'effectScatter') {
                            return
                        }
                        if (params.name == _this.$setting.mapCenterName) {
                            res =
                                "<div class='tooltip-icon'></div><div class='tooltip-name'>" +
                                name +
                                "</div><br/><span class='tooltip-unit'>人次：</span><span class='tooltip-num'>" +
                                _this.dataAll +
                                '</span>'
                            return res
                        }
                        res = "<div class='tooltip-icon'></div><div class='tooltip-name'>" + name + "</div><br/><span class='tooltip-unit'>人次：</span><span class='tooltip-num'>" + value + '</span>'
                        return res
                    }
                },
                backgroundColor: '#041A20',
                // visualMap: { //图例值控制
                //   min: 0,
                //   max: 1,
                //   calculable: true,
                //   show: true,
                //   color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
                //   textStyle: {
                //     color: '#fff'
                //   }
                // },
                geo: {
                    map: 'china',
                    zoom: 0.9,
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    roam: true, //是否允许缩放
                    itemStyle: {
                        normal: {
                            color: '#000002', //地图背景色
                            borderColor: '#647D88', //省市边界线00fcff 516a89
                            borderWidth: 1
                        },
                        emphasis: {
                            color: 'rgba(37, 43, 61, .5)' //悬浮背景
                        }
                    }
                },
                series: series
            }
            var convertData = function(data) {
                var res = []
                for (var i = 0; i < data.length; i++) {
                    var dataItem = data[i]
                    var fromCoord = chinaGeoCoordMap[dataItem.name]
                    var toCoord = _this.$setting.mapCenter
                    if (fromCoord && toCoord) {
                        if (i < 3) {
                            res.push([
                                {
                                    coord: fromCoord,
                                    value: dataItem.value,
                                    lineStyle: {
                                        width: 1, //尾迹线条宽度
                                        color: '#f81d22',
                                        opacity: 1, //尾迹线条透明度
                                        curveness: 0.3 //尾迹线条曲直度
                                    }
                                },
                                {
                                    coord: toCoord
                                }
                            ])
                        } else {
                            res.push([
                                {
                                    coord: fromCoord,
                                    value: dataItem.value
                                },
                                {
                                    coord: toCoord
                                }
                            ])
                        }
                    }
                }
                return res
            }

            ;[[_this.$setting.mapCenterName, chinaDatas]].forEach(function(item, i) {
                series.push(
                    {
                        type: 'lines',
                        zlevel: 2,
                        effect: {
                            show: true,
                            period: 9, //箭头指向速度，值越小速度越快
                            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                            symbol: 'arrow', //箭头图标
                            symbolSize: 6 //图标大小
                        },
                        lineStyle: {
                            normal: {
                                width: 1, //尾迹线条宽度
                                color: '#27C7E9',
                                opacity: 1, //尾迹线条透明度
                                curveness: 0.3 //尾迹线条曲直度
                            }
                        },
                        data: convertData(item[1])
                    },
                    {
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        rippleEffect: {
                            //涟漪特效
                            period: 4, //动画时间，值越小速度越快
                            brushType: 'stroke', //波纹绘制方式 stroke, fill
                            scale: 4 //波纹圆环最大限制，值越大波纹越大
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'right', //显示位置
                                offset: [5, 0], //偏移设置
                                formatter: function(params) {
                                    //圆环显示文字
                                    return params.data.name
                                },
                                fontSize: 13
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        symbol: 'circle',
                        symbolSize: function(val) {
                            let l = 0
                            let num = val[2]
                            while (num >= 1) {
                                num = num / 10
                                l++
                            }
                            return 5 + l * 2 //圆环大小
                        },
                        itemStyle: {
                            normal: {
                                show: false,
                                color: '#28C8EA'
                            }
                        },
                        data: item[1].map(function(dataItem, index) {
                            if (index < 3) {
                                return {
                                    name: dataItem.name,
                                    value: chinaGeoCoordMap[dataItem.name].concat([dataItem.value]),
                                    itemStyle: {
                                        color: '#f81d22'
                                    }
                                }
                            } else {
                                return {
                                    name: dataItem.name,
                                    value: chinaGeoCoordMap[dataItem.name].concat([dataItem.value])
                                }
                            }
                        })
                    },
                    //被攻击点
                    {
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        rippleEffect: {
                            period: 4,
                            brushType: 'stroke',
                            scale: 4
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'left',
                                //offset:[5, 0],
                                color: '#EDA461',
                                formatter: '{b}',
                                textStyle: {
                                    fontSize: '14px',
                                    color: '#EDA461'
                                }
                            },
                            emphasis: {
                                show: true,
                                color: '#EDA461'
                            }
                        },
                        symbol: 'circle',
                        symbolSize: 20,
                        itemStyle: {
                            normal: {
                                show: false,
                                color: '#EDA461'
                            }
                        },
                        data: [
                            {
                                name: item[0],
                                value: chinaGeoCoordMap[_this.$setting.mapCenterName].concat([10])
                            }
                        ]
                    }
                )
            })
            this.myChart.setOption(option)

            // // 自动
            clearInterval(this.timer)
            this.timer = null
            // if (curIndex == null) {
            //     console.log('1111null', '饼图自动')
            //     this.myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 0 })
            // } else {
            //     // 取消高亮
            //     this.myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: curIndex })
            //     if (curIndex == null) {
            //         this.myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 0 })
            //     } else {
            //         // 取消高亮
            //         let that = this
            //         this.myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: curIndex })
            //         this.timer = setInterval(function() {
            //             setTimeout(function() {
            //                 var dataLen = that.data.length
            //                 // 取消高亮
            //                 that.myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: curIndex })

            //                 curIndex = (curIndex + 1) % dataLen
            //                 //设置高亮
            //                 that.myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: curIndex })
            //                 // 显示tooltip
            //                 that.myChart.dispatchAction({
            //                     type: 'showTip',
            //                     seriesIndex: 0,
            //                     dataIndex: curIndex
            //                 })
            //             }, 0)
            //         }, 3000)
            //     }
            // }
        }
    }
}
</script>
<style scoped lang="less">
.main {
    width: 100%;
    height: 120%;
    // height: 100%;
    position: absolute;
    top: -200px;
    left: 0;
    z-index: 11;
}
/deep/ .tooltip-name {
    font-size: 14px;
    color: #fff;
    margin: 0 20px 0 0;
}
/deep/ .tooltip-icon {
    width: 6px;
    height: 6px;
    content: '';
    margin: 10px 5px;
    float: left;
    background: #eda461;
}
/deep/ .tooltip-unit {
    color: #a5bfcb;
    font-size: 12px;
}
/deep/ .tooltip-num {
    color: #28c8ea;
    font-size: 13px;
}
</style>
@搬砖工
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue遇到echarts5.x，迁徙图怎么办？
weixin_61176546的博客
12-20 945
工作中经常使用到echarts，最近用到迁徙图的时候突然发现，自从echarts 更新到5.0之后，迁徙图变得不可用了，echarts 官方在新版本中移除了行政区域的map数据，再想实现迁徙图怎么办，这里提供一种思路 故事前景：同事先写的代码直接在项目中安装了 echarts（@5.2.2）新版本提供了更为细致的模块化引用，例如： ``` // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。 import * as echarts from 'echarts/core
echarts迁徙图 vue_vue中高德搭配echarts做数据迁徙流线图
weixin_29923451的博客
12-24 1039
前言此系列共分为以下几篇《vue中高德地图的使用》《vue中基于高德的多行政区域覆盖》《vue中高德搭配echarts做数据迁徙流线图》(本篇)本篇效果 实现步骤1. 思路分析第一篇的基础讲解，加上上一片的行政区域行政区域展示(描边及背景)，其实可以完成很多炫酷效果了。本篇讲述系列篇的最后一篇：vue中高德搭配echarts做数据迁徙流线图。由于流线图使用的曲线是贝塞尔曲线，而在高德中无法直接简...
echarts 迁徙图+百度地图
11-01
echarts 迁徙图+百度地图
Vue Echarts实现可视化世界地图代码实例
11-28
Echarts实现可视化世界地图模拟迁徙，以我自己开发过程。 下载Echarts依赖： npm install echarts 成功以后引入依赖： import echarts from 'echarts' peopleInsertCharts为生成echarts容器。 let myChart = echarts.init(document.getElementById('peopleInsertCharts')) 容器一定要给宽高，否则echarts生成初始化页面不会显示。需要自适应的可以js获取宽高给定容器。  直接贴代码 // 绘制图表 myChart.setOption({
百度地图+Echarts+迁徙
11-25
百度地图+Echarts+迁徙图
在Vue项目中使用echarts完成迁徙图（Map组件）
m0_49304996的博客
07-13 2222
在Vue项目中使用echarts完成迁徙图 此章个人理解：参考原有的代码基础上，完成了一个地图迁徙的组件先了解一下整体代码， 有能力的可以参照整体完成， 下面也会列出详细步骤解答 前言 以下封装了组件作为在地图中国使用 只需传入以下格式的数据即可 [ { 'name': '北京', 'value': 6 }, { 'name': '湖南', 'value': 3 }, { 'name': '广东', 'value': 2 }, { 'name': '山西', 'val
Vue项目中Echarts流向图迁徙图实现
Data_Money的博客
05-21 4032
在数据可视化中，地图可视化是高频应用的一种。我们在一些新闻报道和商业杂志上，会经常看到运用地图来分析展示商业现象，这样的利用地图来反映和分析数据的形式叫数据地图。数据地图可以最直观的表达出数据之间的空间关系，因此在很多数据分析场景中被广泛应用。流向地图也是地图可视化的一种，本文来分享Vue项目中流向地图使用技巧。什么是流向地图？ 流向地图在地图上显示信息或物体从一个位置到另一个位置的移动及其数量。 通常用来显示人物、动物和产品的迁移数据。单一流向线所代表的移动规模或数量由其粗细度表示，有助显示迁移活动的地理
VUE 中实现echarts中国地图 人口迁徙
前端互助会
02-19 1550
VUE 中实现echarts中国地图 人口迁徙 效果图： 安装Echarts依赖 要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echarts版本(据了解低版本的echarts，默认并没有地图相关数据) "echarts": "^4.0.4" 引入Echarts 以及 地图数据 import echarts from 'echarts' import 'echarts/map/js/china' //引入中国地图
vue echarts 实现一个简单的散点地图，迁移效果
好巧的博客
11-12 1897
前言最新的 echarts 5 版本，不再内置地图，要么自行下载 china.js，在项目里引入，要么使用echarts4.9echart 官方文档 - 去除内置的-geojson1.安装依赖 组件使用 geo配置项，隐藏南海诸岛（可选） 效果图如果本篇文章对你有帮助的话，很高兴能够帮助上你。当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。
vue echarts 地图使用
weixin_38355349的博客
12-25 644
1.首先安装echart 2.引用 import echarts from ‘echarts’ Vue.prototype.$echarts = echarts; 3.引入地图数据 import worldJson from ‘echarts/map/json/world.json’ 注意：name与你引入的echart库,保持一致 { name: ‘United States’, value:...
vue中使用echarts实现地图散点图
upStar1的博客
05-31 4790
在vue中使用echarts实现地图自定义浮窗内容及样式_芝士焗红薯的博客-CSDN博客_浮窗vue中介绍了echarts中地图的简单使用，实现了自定义浮窗的功能。 在vue中使用echarts实现地图颜色渐变及自定义浮窗内容_芝士焗红薯的博客-CSDN博客实现了地图上地区的颜色渐变，对地图进行了一些简化。 在很多大屏功能上是需要地图实现很密集的散点图，这个可以参考别的文章，本文使用散点图，是因为客户需要显示省直的信息，我个人认为在旁边放个点或者什么东西显示省直信息太奇怪了，正好想学一下散点，所以就用一
springboot echarts vue 柱状图
01-25
在本项目中，我们结合了SpringBoot、Vue和ECharts三个技术栈，旨在实现一个后端数据驱动的前端柱状图展示。以下是关于这些技术及其整合应用的详细知识点： 1. **SpringBoot**： SpringBoot是Spring框架的一个简化...
vue中使用echarts制作圆环图的实例代码
10-18
主要介绍了vue中使用echarts制作圆环图的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue-echarts可视化模板
06-04
Vue-Echarts 可视化模板是一个专为 Vue.js 开发者设计的项目模板，它集成了 Echarts 图表库，方便快速构建数据可视化的前端应用。Echarts 是一个基于 JavaScript 的开源图表库，提供了丰富的图表类型，如折线图、...
vue_echarts_demo:vue echarts项目
04-05
Vue.js是目前非常流行的前端JavaScript框架，它简化了组件化的开发流程，而ECharts是百度开源的一款高效、易用、功能丰富的数据可视化库，支持多种图表类型，如折线图、柱状图、饼图等。 在这个项目中，首先需要...
Vue+Echarts 实现迁徒图
www658的博客
12-20 456
echarts +vue 地图
利用ECharts3来实现ECharts2实例中的模拟迁徙效果，即背景地图为百度地图。 标签： ECharts3Echarts2模拟迁徙百度地图引入 2016-10-24 16:21 10065人阅
zhang8907xiaoyue的博客
10-14 1030
利用ECharts3来实现ECharts2实例中的模拟迁徙效果，即背景地图为百度地图。 标签： ECharts3Echarts2模拟迁徙百度地图引入 2016-10-24 16:21 10065人阅读 评论(67) 收藏 举报  分类： ECharts（3）  版权声明：本文为博主原创文章，未经博主允许不得转载。 很多小伙伴都来要de
echarts迁徙图 vue_vue中使用 echarts3.0 或 echarts2.0 (模拟迁徙图，折线图)
weixin_42349005的博客
02-01 366
三、可能适合你的做法1、便于数据变更的处理方法是：首先在 data 中定义全局变量data(){return{myChart: null,option: []}}然后在 mounted 中将获取到的dom节点赋值给myChartthis.myChart = echarts.init(document.getElementById(‘myChart‘))在 methoes 中封装一个方法 drawL...
vue项目 使用svg渲染地图 并添加点击事件，动态改变背景颜色
蓝胖子的博客
06-21 3003
vue项目 使用svg渲染地图 添加点击事件 动态改变背景颜色
vue echarts map中点的点击事件
最新发布
04-06
1. 首先，在Vue组件中引入Echarts和地图数据文件，例如： ```javascript import echarts from 'echarts' import 'echarts/map/js/world' ``` 2. 在Vue组件的`mounted`生命周期钩子函数中初始化Echarts实例，并绑定...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值