echarts的3D地图实在太丑了，还一堆bug使用阿里的Antv可视化库L7，实现3D地图，底图是mapbox参考示例：https://l7.antv.antgroup.com/zh/examples/polygon/3d#floatMap如果不需要底图样式，可把Scene的style设置为blank直接上代码了，vue的就不说了，项目是html的mapbox依赖scriptsrc='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js'>/script>linkhref='https://api.mapbox.com/mapbox-

背景在官网项目中，需要使用一个地图，展示产品的分布区域及数量。希望的交互是，鼠标放上标点，tooltip展示地点和数量等信息。鼠标滚动，则页面随着滚动。但是鼠标事件是被地图代理了的，鼠标滚动意味着地图的缩放。问题解决我们首先想到的就是关闭地图的缩放constscene=newScene({id:'map',map:newGaodeMap({zIndex:0,pitch:0,style:'light',center:[36.753416,33.142173],zoom:1,rotateEnable:false,zoomEnable:false,//关闭地图缩放dragEnable:false//

1简介AntV是一个数据可视化（https://so.csdn.net/so/search?q=数据可视化&spm=1001.2101.3001.7020）的工具（https://antv.vision/zh/），可以方便的创建图表或者其他图形，让我们的页面开发比较轻松的让数据可视化。进入网站后，我们可以看到七个模块：G2：数据驱动，高度易用，可扩展的可视化图形语法S2：开箱即用的多维可视分析表格G6：便捷的关系数据可视化引擎与图分析工具X6：极易定制、开箱即用、数据驱动的图编辑引擎L7：高性能、高渲染质量的地理空间数据可视化框架F2：专注于移动端的可视化解决方案，兼容H5/小程序/Weex等

使用AntVX6首先用AntVX6官网的一句简介了解一下什么是X6X6是基于HTML和SVG的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建DAG图、ER图、流程图、血缘图等应用。知道了X6是什么，那么我们就要开始使用了首先得确定框架，其次就要安装X6由于项目是vue2的，所以选择的框架为vue2，当然自己也在vue3中写了一版，如有需要vue3的请私信1.首先在项目中新建一个xxx.vuetemplate>divclass="container1"style="width=100%;height=100%">divid="container">/div>/div>di

AntVG6是一款图可视化与分析开源引擎。《AntVG6的坑之——XXX》系列文章持续更新中，总结常见问题及神坑解决方案。任何问题可在GitHubIssue中提问，求GitHubStar⭐️https://github.com/antvis/g6原文链接：https://g6.antv.antgroup.com/manual/faq/performance-opt在面对复杂数据的图可视分析，你的G6应用是否出现了卡顿、掉帧、不流畅现象？跟着本文的tips排查和优化，提升你的图可视化应用的性能。G6的性能瓶颈主要在两个方面：渲染、计算。本小节介绍性能瓶颈的一些原理，对理论不感兴趣只想直接优化代码

本案例antvg6版本："@antv/g6":"^3.4.8",效果：1.引入antvg6和echarts差不多importG6from'@antv/g6';exportdefault{data(){return{//拓扑数据结构//定义数据源data:{"nodes":[{"id":"1","name":"service-1","type":"service","statistics":{"trace_num":435,"duration_avg":2.312,"alert_num":21,"situation_num":3}},{"id":"2","name":"service-2","t

使用antv/G6开发流程图前言一、什么是G6？二、使用步骤1.安装依赖并导入2.初始化数据3.树图实现（1）首先配置自定义节点（2）自定义带箭头的贝塞尔曲线（连接线）（3）设置默认样式（4）配置树图并渲染（6）小地图插件4.一般图实现（1）自定义节点（2）配置图属性并渲染（3）自定义tooltip5.插件三、注意事项总结前言设计师提供了一版样式较复杂的流程图，我搜了一些常用的vue-super-flow和vue-x6-flow等都只支持简单的样式。之前自己写过纯展示流程图不涉及太多交互，感觉还是找一个成熟的插件开发更适合，也方便其他同事参考，所以最后选择了用antv/G6自己个性化开发，总结

目录一、项目背景二、使用方式三、自定义图表的样式公司的小程序项目需求中需要使用图表展示一些数据趋势，于是就去调研了一些图表的组件库，最后结合各组件库的图表样式、性能以及后期维护和扩展等方面决定使用antv/f2这个图表库，记录一下使用方式、样式等属性的修改方法以及遇到的一些坑点。一、项目背景项目技术框架是使用的Taro脚手架搭建的（React+ts），antv/f2是适用于移动端的图表组件库，适用于vue、react以及小程序（快速上手|F2），官方文档上也介绍了如何在vue、react以及小程序中使用。but官网上介绍的小程序的使用方法是在小程序原生框架上的，墙裂建议文档上可以介绍一下在ta

安装&引用 在项目中引入G6有以下两种方式：npm引入，CDN引入。1在项目中使用npm包引入Step1: 使用命令行在项目目录下执行以下命令：npminstall--save@antv/g6Step2: 在需要用的G6的JS文件中导入：importG6from'@antv/g6';2在HTML中使用CDN引入scriptsrc="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/g6.js">注意在 {$version} 中填写版本号，例如 3.2.0；最新版为3.2.0，可以在 npm 查看最新版本；详情参

先放官网和图片，最好的学习地方仍然是官网。官网：https://x6.antv.antgroup.com/介绍：X6是基于HTML和SVG的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建DAG图、ER图、流程图、血缘图等应用。这个流程图其实是Echarts没有的，相信很多和我一样的人。做项目要用到Echarts没有，然后就搜索到了这个。你如果会用Echarts，其实你已经会了一半，虽然Echarts是基于Canvas画图的，但是两者的用法和API调用基本相同，实际用起来去官网看API即可。一、了解antv/x6刚才上面提到了它是基于HTML和SVG的图编辑引擎，我们可以