echarts写飞机航线类图形

2024-03-22 21:50
文章标签 图形 飞机 echarts 航线

本文主要是介绍echarts写飞机航线类图形,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 var geoCoordMap = {'黑龙江': [127.9688, 45.368],'北京': [116.4551, 40.2539],"陕西": [109.1162, 34.2004],"新疆": [87.9236, 43.5883],"西藏": [91.11, 29.97],"重庆": [108.384366, 30.439702],"贵州": [106.6992, 26.7682],"云南": [102.9199, 25.4663],"广东": [113.12244, 23.009505],'上海': [121.4648, 31.2891],'温江区': [103.9526, 30.7617],};var dataT = [{name: '上海',value: 321 },{name: '广东',value: 123,},{name: '重庆',value: 433,},{name: '北京',value: 111,},{name: '云南',value: 261,},{name: '陕西',value: 123,},{name: '新疆',value: 771,},{name: '西藏',value: 91,},{name: '贵州',value: 230,},{name: '黑龙江',value: 165,}];geoCoordMap['四川'] = [103.9526, 30.7617];var GZData = [];var tempData = ['四川', GZData];dataT.map((item, index) => {var arr = [];arr.push(item)arr.push({name: '四川'})GZData.push(arr)})var convertData = function(data) {var res = [];for (var i = 0; i < data.length; i++) {var dataItem = data[i];var fromCoord = geoCoordMap[dataItem[0].name];var toCoord = geoCoordMap[dataItem[1].name];if (fromCoord && toCoord) {res.push({fromName: dataItem[0].name,toName: dataItem[1].name,coords: [fromCoord, toCoord],value: dataItem[0].value});}}return res;};var color = ['#00ff78', '#ff971b', '#acff43', '#ff73b7', '#ffff46', '#27bbfe'];var series = [{type: 'map',map: 'china',//    width: '100%',zoom: 1.1  //可以显示map最外围的边框轮廓geoIndex: 1,zlevel: 1,//    aspectScale: 0.75, //长宽比showLegendSymbol: false, // 存在legend时显示label: {normal: {show: false,},emphasis: {show: false,textStyle: {color: '#fff'}}},roam: false,itemStyle: {normal: {areaColor: 'rgba(128, 128, 128, 0)',borderColor: '#49a7d5', //省市边界线00fcff 516a89},emphasis: {areaColor: 'rgba(128, 128, 128, 0)',}},data: [{name: '南海诸岛',value: 0,itemStyle: {normal: {opacity: 0,label: {show: false}}}}]}, ];series.push({name: tempData[0],type: 'lines',zlevel: 3,symbol: ['none', 'circle'], effect: {show: true,period: 3, //箭头指向速度,值越小速度越快trailLength: 0.01, //特效尾迹长度[0,1]值越大,尾迹越长重symbolSize: 4, //图标大小},lineStyle: {normal: {opacity: 1,curveness: 0.4, //曲线的弯曲程度color: '#609fd4'}},data: convertData(tempData[1])}, {name: tempData[0],type: 'scatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: {brushType: 'stroke'},label: {normal: {show: true,position: 'right',formatter: '{b}',}},symbolSize: function (val) {console.log(val)return val[2]/20+5;},itemStyle: {normal: {//                fontSize: 80,}},data: tempData[1].map(function(dataItem) {return {name: dataItem[0].name,value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])};})}, {type: 'effectScatter',coordinateSystem: 'geo',zlevel: 4,symbolSize: 30,label: {normal: {show: true,position: 'right',formatter: '{b}',color: 'white'}},itemStyle: {normal: {color: 'white'}},rippleEffect: {scale: 4,brushType: 'stroke'},data: [{name: tempData[0],value: geoCoordMap[tempData[0]],visualMap: false}],});option = {tooltip: {trigger: 'item',formatter: function(params) {if (params.seriesType == "scatter" && params.name != tempData[0]) {return "<br>" + params.data.name + " ---> " + params.seriesName + "<br />数量1:" + params.data.value[2];} else if (params.seriesType == "lines") {return "<br>" + params.data.fromName + " ---> " + params.data.toName + "<br />数量2:" + params.data.value;} else {return params.name;}}},visualMap: {min: 70,max: 1000,//            textStyle: {//                color: '#fff',//            },show: true,pieces: [{max: 200,label: '未请假',color: '#c23c33'},{min: 200,label: '无异常',color: '#2c9a42'}],color: '#fff',textStyle: {color: '#fff',},},geo: {map: 'china',zoom: 0.98,zlevel: 2,label: {emphasis: {show: false},},roam: false, //是否允许缩放itemStyle: {normal: {areaColor: '#214278',borderColor: '#195BB9', //省市边界线00fcff 516a89},emphasis: {color: '#112246' //悬浮背景}},},series: series};

生成图片如下
在这里插入图片描述

这篇关于echarts写飞机航线类图形的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/836270

相关文章

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

第六章习题11.输出以下图形

🌏个人博客:尹蓝锐的博客 希望文章能够给到初学的你一些启发~ 如果觉得文章对你有帮助的话,点赞 + 关注+ 收藏支持一下笔者吧~ 1、题目要求: 输出以下图形

一个图形引擎的画面风格是由那些因素(技术)决定的?

可能很多人第一直覺會認為shader決定了視覺風格,但我認為可以從多個方面去考慮。 1. 幾何模型 一個畫面由多個成分組成,最基本的應該是其結構,在圖形學中通常稱為幾何模型。 一些引擎,如Quake/UE,有比較強的Brush建模功能(或應稱作CSG),製作建築比較方便。而CE則有較強的大型地表、植被、水體等功能,做室外自然環境十分出色。而另一些遊戲類型專用的引擎,例

「大数据分析」图形可视化,如何选择大数据可视化图形?

​图形可视化技术,在大数据分析中,是一个非常重要的关键部分。我们前期通过数据获取,数据处理,数据分析,得出结果,这些过程都是比较抽象的。如果是非数据分析专业人员,很难清楚我们这些工作,到底做了些什么事情。即使是专业人员,在不清楚项目,不了解业务规则,不熟悉技术细节的情况下。要搞清楚我们的大数据分析,这一系列过程,也是比较困难的。 我们在数据处理和分析完成后,一般来说,都需要形成结论报告。怎样让大

OpenGL/GLUT实践:流体模拟——数值解法求解Navier-Stokes方程模拟二维流体(电子科技大学信软图形与动画Ⅱ实验)

源码见GitHub:A-UESTCer-s-Code 文章目录 1 实现效果2 实现过程2.1 流体模拟实现2.1.1 网格结构2.1.2 数据结构2.1.3 程序结构1) 更新速度场2) 更新密度值 2.1.4 实现效果 2.2 颜色设置2.2.1 颜色绘制2.2.2 颜色交互2.2.3 实现效果 2.3 障碍设置2.3.1 障碍定义2.3.2 障碍边界条件判定2.3.3 障碍实现2.3.

Echarts使用笔记--饼图,柱状图

开始做前端了,感觉自己是要变成全栈工程师了。。。 今天使用了echart,用之前觉得好高大上好厉害,肯定很复杂。用了以后才发现,使用起来超简单,当然,精通很难,里面的各种配置太多了,本文记录一下自己用到的东西。 echart使用 现在直接引用js文件就可以了 <script src="echarts.min.js"></script> echart组件需要在一个宽高固定的DOM里才能显示

【python web】Flask+Echarts 实现动图图表

flask 是python web开发的微框架,Echarts酷炫的功能主要是javascript起作用,将两者结合起来,发挥的作用更大。下面将Echarts嵌套进Flask的html模板中。 项目结构: 打开demo.py运行,点击console中的链接http://127.0.0.1:5000/ 就可以看到我们想要的动态图表。 demo.py #coding:utf-8fro

Android shape 图形

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <!-- "oval","rectangle", "line","ring" 形状--><!-- 圆角 --><cornersandroid

QGraphicsView、QGraphicsScene和QGraphicsItem图形视图框架(二)疑难杂症

疑难杂症1 1.问题: 设置场景的背景图片时,采用setBackgroundBrush()方法和重写drawBackground()函数得到的结果很不一样,而且通过setSceneRect设置场景原点位置之后得到的结果也有很大区别。 如下图 第一个和第三个中重写了QGraphicsScene的drawBackground()函数,区别在于第一个的场景原点在左上角,第三个的原点在中心。

图形API学习工程(0):工程目的环境配置

工程目的 我想要不借助引擎,而直接使用底层图形API(如DirectX和OpenGL等)来生成图像。 我认为这将有利于图形学算法与渲染框架相关的学习,因为: 游戏引擎往往对渲染进行了豪华的封装,而不利于看到图形学算法本质。UE4虽然开放了源代码,但是想要完全掌握渲染方面的代码也需要较高成本。 另外,我想对不止一个主流API进行封装,而是多个图形API进行封装,包括: OpenGLD3D1