echarts地图导航飞线与层级穿透

清风笑～

已于 2022-11-15 10:14:23 修改

阅读量2.9k

点赞数

分类专栏： js前端 vue chartjs 文章标签： javascript reactjs echarts

于 2022-04-25 12:56:21 首次发布

本文链接：https://blog.csdn.net/ling369523246/article/details/124401114

版权

echarts展示地图时，需要导航飞线链接起始国家与目的国家，点击国家展示对应国家放大地图。如图
在这里插入图片描述

echarts版本

  "echarts": "^5.3.0",
  "echarts-countries-js": "^1.0.5",
  "echarts-gl": "^2.0.8",

vue中创建展示项目

<template>
    <div id="echart" style="width: 700px; height: 500px;">213</div>
</template>

<style lang="less">
@import "./index.less";
</style>
<script>
import index from "./index";
export default index;
</script>

地图展示(index.js)

import * as echarts from 'echarts';
import 'echarts-gl';

import map_CN from './utils/map_CN';

import AUT from './utils/AUT.geo.json';
import './utils/word';

import flights from './flights.json';

// 城市、国家 地理坐标
const geoCoordMap = {
   
    '上海': [120.52, 30.40],
    '北京': [115.25, 39.90],
    '重庆': [107.7539, 30.1904],
    '芬兰': [24.909912, 60.169095],
    '美国': [-100.696295, 33.679979],
    '日本': [139.710164, 35.706962],
    '韩国': [126.979208, 37.53875],
    '瑞士': [7.445147, 46.956241],
    '德国': [13.402393, 52.518569],
    '英国': [-0.126608, 51.208425]
};
const CQDestination = [
    [{
   
        name: '重庆'
    }, {
   
        name: "英国",
        value: 70
    }],
    [{
   
        name: '重庆'
    }, {
   
        name: "芬兰",
        value: 80
    }],
    [{
   
        name: '重庆'
    }, {
   
        name: "美国",
        value: 80
    }]
];
// 根据起始位置，获得线的地理位置
const convertData = (data) => {
   
    let res = [];
    for (let i = 0; i < data.length; i++) {
   
        let dataItem = data[i];
        let [fromCoord, toCoord] = [geoCoordMap[dataItem[0].name], geoCoordMap[dataItem[1].name]];
        if (fromCoord && toCoord) res.push([fromCoord, toCoord]);
    }
    return res;
}
//汉化国家名字
const translateName = () => {
   
    for (let key in map_CN) {
     
        map_CN[key.toLowerCase()] = map_CN[key];
    }
}
export default {
   
    data() {
   
        return {
   
        }
    },
    methods: {
   
        createEcharts() {
   
            translateName();
            let series2d = [];
            const CQDatas = [['重庆', CQDestination]]

            CQDatas.forEach(function (item) {
   
                // 散点 第一个为目的地散点
                // 第二个为始发地散点
                series2d.push({
   
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel: 3,
                    rippleEffect: {
   
                        brushType: 'stroke'
                    },
                    label: {
   
                        fontSize: 12,
                        show: true,
                        position: 'right',
                        formatter: '{b}'
                    },
                    itemStyle: {
   
                        normal