echarts 关系流向图带框

原创 于 2024-01-17 09:39:07 发布 · 880 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#echarts #前端

1：坐标定位画一个框区分流向效果

在这里插入图片描述

     let dataLists = [
                {
   
   
                    name: '111',
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
   
   
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [240, 0],
                    x: 200,
                    y: 500,
                    fixed: true,
                    category: 1,
                    itemStyle: {
   
   
                        normal: {
   
   
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
   
   
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
   
   
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },
                {
   
   
                    name: '222',
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
   
   
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [105, 50],
                    x: 200,
                    y: 500,
                    fixed: true,
                    category: 1,
                    itemStyle: {
   
   
                        normal: {
   
   
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
   
   
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
   
   
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },
                {
   
   
                    name: '333',
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
   
   
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [105, 110],
                    x: 200,
                    y: 500,
                    fixed: true,
                    category: 1,
                    itemStyle: {
   
   
                        normal: {
   
   
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
   
   
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
   
   
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },
                {
   
    name: "444", symbol: "", value: [105, 180], symbolSize: [10, 10] },
                {
   
    name: "555", symbol: "", value: [40, 180], symbolSize: [10, 10] },
                {
   
    name: "666", symbol: "", value: [170, 180], symbolSize: [10, 10] },


                {
   
   
                    name: '888',
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
   
   
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [40, 330],
                    x: 200,
                    y: 500,
                    fixed: true,
                    category: 1,
                    itemStyle: {
   
   
                        normal: {
   
   
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
   
   
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
   
   
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },

                {
   
   
                    name: '777',
                    deviceType: "ZONGHE",
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
   
   
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [40, 230],
                    x: 200,

                    y: 500,

                    fixed: true,

                    category: 1,

                    itemStyle: {
   
   

                        normal: {
   
   

                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [

                                {
   
   
                                    offset: 0,
                                    color: '#ffb402',
                                },
                                {
   
   
                                    offset: 1,
                                    color: '#ffdc84',
                                },
                            ]),
                        },
                    },
                },
                {
   
   
                    name: '999',
                    deviceType: "CAIJI",
                    symbol: "",
                    symbolSize: [40, 20],
                    label: {
   
   
                        color: '#53B5EA',
                        position: 'bottom',
                    },
                    value: [170, 230],
                    x: 170,
                    y: 230,
                    fixed: true,
                    category: 1,
                    itemStyle: {
   
   
                        normal: {
   
   

                            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [

                                {
   
   

                                    offset: 0,

                                    color: '#ffb402',

                                },

                                {
   
   

                                    offset: 1,

                                    color: '#ffdc84',

                                },

                            ]),

                        },

                    },
                },
                {
   
    name: "1010", symbol: "", value: [170, 270], symbolSize: [10, 10] },
                {
   
    name: "1111", symbol: "", value: [110, 270]
最低0.47元/天 解锁文章

新学期VIP享超值加赠
echarts map流向图
hrcsdn13的博客
07-23 848
我没有附上CSS代码，所以样式会与图上有所不同。全国各地到上海的流向图。
基于Echarts的数据流向图
weixin_34341229的博客
06-12 5180
模拟数据采集的流程，利用echarts制作出动态的数据流向图：界面：<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>ECharts</title></head><body> &...
echarts连接后台数据流向图实例
05-17
echarts连接后台数据流向图实例，包括数据库文件。 echarts连接后台数据流向图map.jsp.
echarts 关系数据流向图
weixin_46263815的博客
01-05 4503
echarts 动态关系数据流向图
Echarts 在地图上绘制流向图
rain_pen的博客
10-25 2624
Echarts 在地图上绘制流向图
echarts3生成关系网络关系力向图
热门推荐
续汉冕的专栏
10-28 2万+
echarts3生成关系网络关系力向图 力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力，每次迭代节点会在各个斥力和引力的作用下移动位置，多次迭代后节点会静止在一个受力平衡的位置，达到整个模型的能量最小化。力引导布局的结果有良好的对称性和局部聚合性，也比较美观，我们也常常用来模拟人物关系等。 echarts3相比于之前的版本有着不小的变化，其生成力向图
echarts地图带光柱标记_Cesium实战项目
weixin_39908462的博客
12-20 1260
前言从毕业到现在，差不多两年的时间，一直从事Cesium相关的GIS开发工作，现将项目中最常用的一些功能封装出来，帮助各位刚入门的新同学(大神略过)。说明Cesium实战项目目前共83个实例(后面会继续增加)，项目基于Cesium1.72+VUE 实现，现有实例如下：基础底图1.ArcGIS在线底图2.谷歌在线底图3.高德在线底图点状对象4.Cesium点聚合15.Cesium点聚合26.Bill...
vue+echarts实现中国地图流动效果
vue+echarts实现中国地图流动效果
01-25 4173
@vue+echarts实现中国地图流动效果 #话不多说看效果图 操作步骤： 执行命令:npm run echarts -s 并回车 看到这样的提示代表安装成功 PS：网络不好的情况建议用cnpm淘宝镜像（全局终端执行命令：npm i -g cnpm --registry=https://registry.npm.taobao.org） 下载china.js（提取码：a5b9） 点击下载 引入 import echarts from 'echarts/lib/echarts';
vue+echarts实现流动中国地图（二）
m0_50093785的博客
04-21 1777
1.接上一章，整理出来网上的一个例子，那个例子的截图如下： 2.之前因为没有整理好代码一直没有实现这个例子。现在整理好了。接上一章写，在mounted（）{}中写如下： mounted(){ let data = [ { "name": "北京", "dataCount": [0, 1, 0, 0, 0, 0, 1], "id": "247" }, { "name": "天津", "dataCount": [0, 0,
使用echarts实现带流向的地图
weixin_43505216的博客
08-18 1582
因为工作原因会经常使用到图表，在此记录一下，使用echarts实现简单动态的地图效果。
地图流向图
08-08
echarts 和 百度地图结合使用实现流向图 echarts 和 百度地图结合使用实现流向图
echarts 路径图
05-14
路径图：用于带有起点和重点信息的线数据的绘制，主要用于地图上的航班，路线的可视化。支持二维的直角坐标系和地理坐标系。详细介绍：https://blog.csdn.net/qq_36437172/article/details/106123884
echarts动态关系图示例
11-02
echarts动态加载关系图示例，三层结构，中心关系子层，子层再次关系子层。echarts动态加载关系图示例，三层结构，中心关系子层，子层再次关系子层。
arcgis4.8 echarts 流动线路，迁移图片
10-23
现在的很多的arcgis和echarts都是3.几版本的我做了一个4.8版本的而且封装的很完善，可以直接使用，只需要给，坐标点的参数。arcgis4.8/echarts/线路流动、人口迁移 ，启动方式，直接，node app.js然后http://127.0.0.1:8081/demo/index1-1.html
可视化-echarts流向图制作及recharts
symoriaty的博客
01-10 9421
前段时间用echarts做了流程图，在此记录下制作步骤。 一、Echarts是什么 Echarts，缩写来自 Enterprise Charts，商业级数据图表，是百度的一个开源的数据可视化工具，一个纯 Javascript  的图表库，能够在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的...
番外-Echart流向图
木卯彳亍的博客
08-18 725
北京迁出目的地流向图。
echarts 地图流向图的实现方法
sinat_33255495的博客
02-14 2189
【代码】echarts 地图流向图的实现方法。
echarts地图数据信息流向图效果
见贤思齐焉，见不贤内自省
06-29 1673
先看效果： 前提 npm i echarts 代码： <template> <div class="echarts"> <div :style="{height:'500px',width:'500px'}" ref="myEchart"></div> </div> </template> <script> import echarts from "echarts"; var geoCoordMap = {
Echarts世界流向图
weixin_43751946的博客
12-09 3671
【前言】 Echarts----世界流向图 demo 【效果图】 效果图如下： 【CODE】 code如下： /* 图中相关城市经纬度,根据需求添加数据 关于国家的经纬度，可以用首都的经纬度或者其他城市的经纬度 */ var geoCoordMap = { '南宁': [108.479, 23.1152], '广州': [113.5107, 23.2196], ...
Vue实现带涟漪与流向箭头的中国地图组件
从标签“vue 中国地图 涟漪效果 流向图”可以看出，该组件包强调了数据可视化的几个方面，通过集成的ECharts库，它能够展示中国地图并加入涟漪效果和流向图这两种高级的可视化技术，为数据展示提供了更多的可能性。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

默默无闻的FYH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值