vue 使用 Echarts做地图及飞线效果

尚梦2023-12-16 22:35

前言：

效果图

一. 项目中安装以及引入Echarts

1.1 npm 命令安装echarts库

javascript 复制代码 
npm install echarts --save

1.2 yarn命令安装echarts库

javascript 复制代码 
yarn add echarts

1.3 引用

a. 在使用页面上引入 在Vue组件的script标签中引入echarts库

使用 echarts

javascript 复制代码 
import * as echarts from "echarts";

b. 全局引用 在main.js中引入echarts库

使用 this.$echarts

javascript 复制代码 
import echarts from 'echarts';
Vue.use(echarts);
Vue.prototype.$echarts = echarts;

二. 创建Echarts地图

1. echarts展示的盒子

Echarts父盒子有多大 Echarts就展示多大。

javascript 复制代码 
<template>
    <div class="linesbox">
        <div id="linesecharts" style="width: 100%; height: 100%"></div>
    </div>
</template>

2. 引入地图数据

javascript 复制代码 
import testjson from "./../../utils/bj.json";

这个地图数据是北京市各个区边界数据。下载地址：https://datav.aliyun.com/portal/school/atlas/area_selector

这地址我们可以下载自己所想要的地图边界数据。或者是找公司给我边界数据。格式必须跟这个一样。

把上面的数据下载下来 并引入我们就可以使用。

3. 飞线数据以及方法

javascript 复制代码 
sjfbEcharts: null,        // echarts实例

// 图片是base64也行
planePath:
                "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z",
linesData: [
    {
        fromName: '西城区',        // 飞线起始位置
        toName: '海淀区',          // 飞线结束位置
        coords: [
              [116.36567, 39.912028],    // 飞线起始位置
              [116.23328, 40.026927]     // 飞线结束位置
        ],
        value: 100
     },
     {
          fromName: '怀柔区',
          toName: '海淀区',
          coords: [
               [116.586079, 40.63069],
               [116.23328, 40.026927]
          ],
           value: 100
      },
],
javascript 复制代码 
mounted() {
   this.initMapEcharts();
},
initMapEcharts() {
    let zhenjie = "海淀区";  // 自己命名
    let data = testjson.features;
    let mapList = testjson;

    // 获取echarts盒子并初始化
    this.sjfbEcharts = this.$echarts.init(document.getElementById("linesecharts")); 
    this.$echarts.registerMap(zhenjie, mapList);

    let options = {
        geo: {
           type: "map",
           map: zhenjie, //chinaMap需要与registerMao中的变量名称保持一致
           raom: false,
               itemStyle: {
                   normal: {
                         areaColor: "rgb(4,46,84)",
                         borderColor: "#fff",
                    },
                    emphasis: {
                          areaColor: "#389bb7", //鼠标指上市时的颜色
                    },
                },
                label: {
                     normal: {
                        position: "bottom",
                        show: true, //不显示
                        textStyle: {
                            // 地图上散点的字体样式
                            fontSize: 16,
                            fontWeight: "400",
                            color: "#fff", // 点上字的颜色
                         },
                      },
                      emphasis: {
                         show: true,
                      },
                    },
                },

                series: [
                    // 地图配置
                    {
                        name: "海淀区信息",
                        type: "map",
                        map: zhenjie,
                        label: {
                            show: true, //是否显示市
                            normal: {
                                textStyle: {
                                    fontSize: 12,
                                    fontWeight: "bold",
                                    color: "#fff",
                                },
                            },
                        },
                        zoom: 1.2,
                        data: data,
                        itemStyle: {
                            normal: {
                                label: { show: true },
                                color: "#F4F4F4",
                                areaColor: "#1E62AC",
                                borderColor: "#53D9FF",
                                borderWidth: 1.3,
                                shadowBlur: 15,
                                shadowColor: "rgb(58,115,192)",
                                shadowOffsetX: 4,
                                shadowOffsetY: 4,
                            },
                            // 鼠标移入地区的样式
                            emphasis: {
                                label: { show: true, color: "#fff" },
                                borderWidth: 3,
                                borderColor: "#1eccc6",
                                areaColor: "#07b4af",
                                shadowColor: "#1eccc6",
                                shadowBlur: 15,
                            },
                        },
                    },
                    // 飞线配置
                    {
                        type: "lines",
                        zlevel: 2,
                        effect: {
                            show: true,
                            period: 5, // 箭头指向速度，值越小速度越快
                            trailLength: 0, // 特效尾迹长度[0,1]值越大，尾迹越长重
                            symbol: this.planePath, // 飞机图标
                            symbolSize: 15, // 图标大小
                            color: "#01AAED",
                        },

                        // 可以配置自己的飞线图标
                        // effect: {
                        //     show: true,
                        //     period: 5, // 箭头指向速度，值越小速度越快
                        //     trailLength: 0, // 特效尾迹长度[0,1]值越大，尾迹越长重
                        //     symbol: this.planePath, // 飞机图标
                        //     symbolSize: 15, // 图标大小
                        //     color: "#01AAED",
                        // },


                        lineStyle: {
                            normal: {
                                width: 0.8, // 尾迹线条宽度
                                opacity: 1, // 尾迹线条透明度
                                curveness: 0.3, // 尾迹线条曲直度
                            },
                        },
                        data: this.linesData,
                    },

                ],
            };
            this.sjfbEcharts.setOption(options);

            setTimeout(() => {
                window.addEventListener("resize", () => this.sjfbEcharts.resize());
            }, 0);
        },

三. 完整代码

javascript 复制代码 
<template>
    <div class="linesbox">
        <div id="linesecharts" style="width: 100%; height: 100%"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import testjson from "./../../utils/bj.json";
export default {
    data() {
        return {
            sjfbEcharts: null,
            //定义散点坐标
            scatterData: [
                { name: "东城区", value: [116.418757, 39.917544] },
                { name: "西城区", value: [116.366794, , 39.915309] },
            ],
            linesData: [
                {
                    fromName: '西城区',
                    toName: '海淀区',
                    coords: [
                        [116.36567, 39.912028],
                        [116.23328, 40.026927]
                    ],
                    value: 100
                },
                {
                    fromName: '怀柔区',
                    toName: '海淀区',
                    coords: [
                        [116.586079, 40.63069],
                        [116.23328, 40.026927]
                    ],
                    value: 100
                },
            ],
            planePath:
                "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z",
        };
    },
    mounted() {
        this.initMapEcharts();
    },
    methods: {
        initMapEcharts() {
            let zhenjie = "海淀区";
            let data = testjson.features;
            let mapList = testjson;
            this.sjfbEcharts = this.$echarts.init(
                document.getElementById("linesecharts")
            );
            this.$echarts.registerMap(zhenjie, mapList);

            let options = {
                geo: {
                    type: "map",
                    map: zhenjie, //chinaMap需要与registerMao中的变量名称保持一致
                    raom: false,
                    itemStyle: {
                        normal: {
                            areaColor: "rgb(4,46,84)",
                            borderColor: "#fff",
                        },
                        emphasis: {
                            areaColor: "#389bb7", //鼠标指上市时的颜色
                        },
                    },
                    label: {
                        normal: {
                            position: "bottom",
                            show: true, //不显示
                            textStyle: {
                                // 地图上散点的字体样式
                                fontSize: 16,
                                fontWeight: "400",
                                color: "#fff", // 点上字的颜色
                            },
                        },
                        emphasis: {
                            show: true,
                        },
                    },
                },

                series: [
                    {
                        name: "海淀区信息",
                        type: "map",
                        map: zhenjie,
                        label: {
                            show: true, //是否显示市
                            normal: {
                                textStyle: {
                                    fontSize: 12,
                                    fontWeight: "bold",
                                    color: "#fff",
                                },
                            },
                        },
                        zoom: 1.2,
                        data: data,
                        itemStyle: {
                            normal: {
                                label: { show: true },
                                color: "#F4F4F4",
                                areaColor: "#1E62AC",
                                borderColor: "#53D9FF",
                                borderWidth: 1.3,
                                shadowBlur: 15,
                                shadowColor: "rgb(58,115,192)",
                                shadowOffsetX: 4,
                                shadowOffsetY: 4,
                            },
                            // 鼠标移入地区的样式
                            emphasis: {
                                label: { show: true, color: "#fff" },
                                borderWidth: 3,
                                borderColor: "#1eccc6",
                                areaColor: "#07b4af",
                                shadowColor: "#1eccc6",
                                shadowBlur: 15,
                            },
                        },
                    },
                    {
                        //飞线图参数
                        type: "lines",
                        zlevel: 2,
                        effect: {
                            show: true,
                            period: 5, // 箭头指向速度，值越小速度越快
                            trailLength: 0, // 特效尾迹长度[0,1]值越大，尾迹越长重
                            symbol: this.planePath, // 飞机图标
                            symbolSize: 15, // 图标大小
                            color: "#01AAED",
                        },
                        // lineStyle: {
                        //     normal: {
                        //         width: 0.8, // 尾迹线条宽度
                        //         opacity: 1, // 尾迹线条透明度
                        //         curveness: 0.3, // 尾迹线条曲直度
                        //     },
                        // },
                        // effect: {
                        //     show: true,
                        //     period: 3,          // 箭头指向速度，值越小速度越快
                        //     trailLength: 0.2,   // 特效尾迹长度[0,1]值越大，尾迹越长重
                        //     symbol: "circle",   // 箭头图标circle
                        //     symbolSize: 4,      // 图标大小
                        //     color:'#fff',       // 流动的颜色
                        // },
                        lineStyle: {
                            normal: {
                                width: 0.8,     // 尾迹线条宽度
                                opacity:1,      // 尾迹线条透明度
                                curveness: 0.3, // 尾迹线条曲直度
                            },
                        },
                        data: this.linesData,
                    }
                ],
            };
            this.sjfbEcharts.setOption(options);

            setTimeout(() => {
                window.addEventListener("resize", () => this.sjfbEcharts.resize());
            }, 0);
        },
    },
};
</script>

<style lang="less" scoped>
.linesbox {
    width: 100%;
    height: 100%;
}
</style>
相关推荐
IT女孩儿41 分钟前
CSS查缺补漏（补充上一条）
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
天天进步20152 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz2 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇2 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒2 小时前
如何在Vue项目中应用TypeScript？应该注意那些点？
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐3 小时前
前端图像处理(一)
前端
程序猿阿伟3 小时前
《智能指针频繁创建销毁：程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒3 小时前
对 TypeScript 中函数如何更好的理解及使用？与 JavaScript 函数有哪些区别？
前端·javascript·typescript
热门推荐
01【音视频 | opus】opus编解码库(opus-1.4)详细介绍以及使用——附带解码示例代码02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04ICLR24大模型提示(1/11) | BadChain：大型语言模型的后门思维链提示05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07【postgresql 基础入门】多表联合查询 join与union 并，交，差等集合操作，两者的区别之处08玄机平台应急响应—webshell查杀09Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO10IT专业入门，高考假期预习指南