Vue Echarts飞机航线图

Vue Echarts飞机航线图声明本案例来着官方案例航线图效果图步骤①:文件导入②:基本配置③:图标配置④:生成结果①:文件导入<scriptsrc="../../js/echarts.min.js"></script><scriptsrc="../../js/china.js"></script><scriptsrc="../../js/vue.js"></script>②:基本配置letkinghi

声明本案例来着官方案例航线图

效果图

在这里插入图片描述

步骤

①:文件导入
②:基本配置
③:图标配置
④:生成结果

①:文件导入

    <script src="../../js/echarts.min.js"></script>
    <script src="../../js/china.js"></script>
    <script src="../../js/vue.js"></script>
只听到从架构师办公室传来架构君的声音:
江山故宅空文藻,云雨荒台岂梦思。有谁来对上联或下联?

②:基本配置

此代码由Java架构师必看网-架构君整理
let kinghiee=new Vue({ el:"#line", methods:{ loca(){}, createLine(seriesData){ let myChart = echarts.init(document.getElementById('airLine')); myChart.setOption({ backgroundColor:"#404a59",//设置整体背景色 title : {//标题设置 text: 'airLine', left: 'center', textStyle: { color: '#fff', fontFamily:"Monospace", fontWeight:"lighter" }, }, geo:{//地理坐标系组件用于地图的绘制,支持在地理坐标系上绘制散点图,线集。 map: 'china',//配置中国地图 roam:true,//是否开启鼠标缩放和平移漫游 itemStyle:{ areaColor: '#323c48',//设置区域颜色 borderColor: '#404a59'//设置各各省市边界颜色 }, emphasis:{ show: true, itemStyle: { areaColor: '#2a333d' } } }, series: seriesData }) } }, } mounted(){ this.createLine(this.loca()); } })

③:图标配置

输入数据

 data:{
            SHData :[//这是两地的数据
                [{name:'上海'},{name:'包头',value:95}],
                [{name:'上海'},{name:'昆明',value:90}],
                [{name:'上海'},{name:'广州',value:80}],
                [{name:'上海'},{name:'郑州',value:70}],
                [{name:'上海'},{name:'长春',value:60}],
                [{name:'上海'},{name:'重庆',value:50}],
                [{name:'上海'},{name:'长沙',value:40}],
                [{name:'上海'},{name:'北京',value:30}],
                [{name:'上海'},{name:'丹东',value:20}],
                [{name:'上海'},{name:'大连',value:10}]
            ],
            geoCoordMap :{//地理坐标
                '上海': [121.4648,31.2891],
                '丹东': [124.541,40.4242],
                '包头': [110.3467,41.4899],
                '北京': [116.4551,40.2539],
                '大连': [122.2229,39.4409],
                '广州': [113.5107,23.2196],
                '重庆': [107.7539,30.1904],
                '郑州': [113.4668,34.6234],
                '长沙': [113.0823,28.2568],
                '长春': [125.8154,44.2584],
                '昆明': [102.9199,25.4663],
            },
            //飞机
            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',
    },

配置线条

此代码由Java架构师必看网-架构君整理
methods:{ loca(){ let series=[]; [['上海',this.SHData]].forEach((item, i) =>{ //console.log(item[1]);//得到上海数组 series.push({ type: 'lines',//用于带有起点和终点信息的线数据的绘制,主要用于地图上的航线,路线的可视化。 zlevel: 1, effect: {//线特效的配置 show: true, period: 6,//特效动画的时间 trailLength: 0.7,//特效尾迹的长度。取从 0 到 1 的值,数值越大尾迹越长。 color: '#fff', symbolSize: 3,//特效标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示高和宽,例如 [20, 10] 表示标记宽为20,高为10。 }, lineStyle: { normal: { color: '#46bee9', width: 0, curveness: 0.2,//边的曲度,支持从 0 到 1 的值,值越大曲度越大 } }, data: this.convertData(item[1])//线数据集。 }, { type: 'lines', zlevel: 2, symbol: ['none', 'arrow'],//线两端的标记类型,可以是一个数组分别指定两端 symbolSize: 10, effect: { show: true, period: 6, trailLength: 0, symbol: this.planePath, symbolSize: 15 }, lineStyle: { color: '#46bee9', width: 1, opacity: 0.6, curveness: 0.2 }, data: this.convertData(item[1]) }, { type: 'effectScatter',//带有涟漪特效动画的散点(气泡)图。利用动画特效可以将某些想要突出的数据进行视觉突出。 coordinateSystem: 'geo',//该系列使用的坐标系 zlevel: 2, rippleEffect: {//涟漪特效相关配置 brushType: 'stroke' }, label: {//图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等 show: true, position: 'right', formatter: '{b}' }, symbolSize: function (val) {//标记的大小 return val[2] / 8; }, itemStyle: { color: '#46bee9' }, data: item[1].map((dataItem)=> { return { name: dataItem[1].name, value: this.geoCoordMap[dataItem[1].name].concat([dataItem[1].value]) }; }) }); }); return series; },

数据的坐标转换

 convertData(data) {
                var res = [];
                //console.log(data.length);长度为10
                for (var i = 0; i < data.length; i++) {
                    var dataItem = data[i];
                    var fromCoord = this.geoCoordMap[dataItem[0].name];//始发地
                    var toCoord = this.geoCoordMap[dataItem[1].name];//目的地
                    if (fromCoord && toCoord) {
                        res.push({
                            fromName: dataItem[0].name,
                            toName: dataItem[1].name,
                            coords: [fromCoord, toCoord],//一个包含两个到多个二维坐标的数组。在 polyline 设置为 true 时支持多于两个的坐标。
                        });
                    }
                }
                return res;
            },

④:生成结果

总代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kinghiee-航线图</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=5,user-scalable=yes" />
    <meta name="format-detection" content="telephone=no,email=no"/>
    <link rel="icon" type="image/x-icon" href="../../img/favicon.ico">
    <script src="../../js/echarts.min.js"></script>
    <script src="../../js/china.js"></script>
    <script src="../../js/vue.js"></script>
    <style>
        *{
            margin: 0;
        }
        html,body,#line,#airLine{
            height: 100%;
        }
    </style>
</head>
<body>
<div id="line">
    <div id="airLine"></div>
</div>
<script>
    let kinghiee=new Vue({
        el:"#line",
        data:{
            SHData :[
                [{name:'上海'},{name:'包头',value:95}],
                [{name:'上海'},{name:'昆明',value:90}],
                [{name:'上海'},{name:'广州',value:80}],
                [{name:'上海'},{name:'郑州',value:70}],
                [{name:'上海'},{name:'长春',value:60}],
                [{name:'上海'},{name:'重庆',value:50}],
                [{name:'上海'},{name:'长沙',value:40}],
                [{name:'上海'},{name:'北京',value:30}],
                [{name:'上海'},{name:'丹东',value:20}],
                [{name:'上海'},{name:'大连',value:10}]
            ],
            geoCoordMap :{
                '上海': [121.4648,31.2891],
                '丹东': [124.541,40.4242],
                '包头': [110.3467,41.4899],
                '北京': [116.4551,40.2539],
                '大连': [122.2229,39.4409],
                '广州': [113.5107,23.2196],
                '重庆': [107.7539,30.1904],
                '郑州': [113.4668,34.6234],
                '长沙': [113.0823,28.2568],
                '长春': [125.8154,44.2584],
                '昆明': [102.9199,25.4663],
            },
            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',
    },
        methods:{
            loca(){
                let  series=[];
                [['上海',this.SHData]].forEach((item, i) =>{
                    //console.log(item[1]);//得到上海数组
                   series.push({
                            type: 'lines',//用于带有起点和终点信息的线数据的绘制,主要用于地图上的航线,路线的可视化。
                            zlevel: 1,
                            effect: {//线特效的配置
                                show: true,
                                period: 6,//特效动画的时间
                                trailLength: 0.7,//特效尾迹的长度。取从 0 到 1 的值,数值越大尾迹越长。
                                color: '#fff',
                                symbolSize: 3,//特效标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示高和宽,例如 [20, 10] 表示标记宽为20,高为10。
                            },
                            lineStyle: {
                                normal: {
                                    color: '#46bee9',
                                    width: 0,
                                    curveness: 0.2,//边的曲度,支持从 0 到 1 的值,值越大曲度越大
                                }
                            },
                            data: this.convertData(item[1])//线数据集。
                        },
                        {
                            type: 'lines',
                            zlevel: 2,
                            symbol: ['none', 'arrow'],//线两端的标记类型,可以是一个数组分别指定两端
                            symbolSize: 10,
                            effect: {
                                show: true,
                                period: 6,
                                trailLength: 0,
                                symbol: this.planePath,
                                symbolSize: 15
                            },
                            lineStyle: {
                                color: '#46bee9',
                                width: 1,
                                opacity: 0.6,
                                curveness: 0.2
                            },
                            data: this.convertData(item[1])
                        },
                        {
                            type: 'effectScatter',//带有涟漪特效动画的散点(气泡)图。利用动画特效可以将某些想要突出的数据进行视觉突出。
                            coordinateSystem: 'geo',//该系列使用的坐标系
                            zlevel: 2,
                            rippleEffect: {//涟漪特效相关配置
                                brushType: 'stroke'
                            },
                            label: {//图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等
                                show: true,
                                position: 'right',
                                formatter: '{b}'
                            },
                            symbolSize: function (val) {//标记的大小
                                return val[2] / 8;
                            },
                            itemStyle: {
                                color:  '#46bee9'
                            },
                            data: item[1].map((dataItem)=> {
                                return {
                                    name: dataItem[1].name,
                                    value: this.geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                                };
                            })
                        });
                });
                return series;
            },
            convertData(data) {
                var res = [];
                //console.log(data.length);长度为10
                for (var i = 0; i < data.length; i++) {
                    var dataItem = data[i];
                    var fromCoord = this.geoCoordMap[dataItem[0].name];//始发地
                    var toCoord = this.geoCoordMap[dataItem[1].name];//目的地
                    if (fromCoord && toCoord) {
                        res.push({
                            fromName: dataItem[0].name,
                            toName: dataItem[1].name,
                            coords: [fromCoord, toCoord],//一个包含两个到多个二维坐标的数组。在 polyline 设置为 true 时支持多于两个的坐标。
                        });
                    }
                }
                return res;
            },

    createLine(seriesData){
                let myChart = echarts.init(document.getElementById('airLine'));
                myChart.setOption({
                    backgroundColor:"#404a59",//设置整体背景色
                    title : {//标题设置
                        text: 'airLine',
                        left: 'center',
                        textStyle: {
                            color: '#fff',
                            fontFamily:"Monospace",
                            fontWeight:"lighter"
                        },
                    },
                    geo:{//地理坐标系组件用于地图的绘制,支持在地理坐标系上绘制散点图,线集。
                        map: 'china',//配置中国地图
                        roam:true,//是否开启鼠标缩放和平移漫游
                        itemStyle:{
                            areaColor: '#323c48',//设置区域颜色
                            borderColor: '#404a59'//设置各各省市边界颜色
                        },
                        emphasis:{
                            show: true,
                        itemStyle: {
                            areaColor: '#2a333d'
                        }
                        }
                    },
                    series: seriesData
                })
            }
        },
        mounted(){

            this.createLine(this.loca());
        }
    });
</script>
</body>
</html>

效果访问Kinghiee

架构君码字不易,如需转载,请注明出处:https://javajgs.com/archives/212233
0
   

发表评论