Echarts实现标签画像

已于 2024-10-09 11:03:56 修改
阅读量283 收藏
点赞数 3
分类专栏： Echarts 文章标签： echarts 前端 javascript vue
于 2024-10-09 11:01:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43018598/article/details/142779610
版权

最近遇到的Vue项目设计图中出现了标签画像的需求，在以往接触的项目中基本都没遇到过，在参考了多个开源项目后，最后决定使用Echarts关系图来实现该需求，废话不多说，上代码

1、文件内引入echarts

// 引入echarts与echarts-gl
// 当前使用版本
// "echarts": "^5.0.2",
//  "echarts-gl": "^2.0.8",
import "echarts-gl";
import * as echarts from 'echarts';

2、HTML

<template>
    <div>
      <div id="BQHX"></div>
    </div>
<template>

3、Vue中 methods中添加方法，这里面添加了一个基本关系图型和三个描述模块,如下

 // 标签画像
    BQHX() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('BQHX'));
      let option = {
        animationDurationUpdate: 1000,
        animationEasingUpdate: 'quinticInOut',
        tooltip: {
          trigger: 'item',
        },
        series: [
          {
            type: 'graph',
            layout: 'none',
            symbolSize: 50,
            roam: false, // 是否可使用鼠标拖动、放大、缩小等
            label: {
              show: true,
              formatter: (item) => {
                // 各个关系节点内文字描述
                return item.name === 'Node4'?'{font0|标签画像总数}\n{font1|6个}': '{font2| 1 }'
              },
              // 设置不同文字描述样式
              rich: {
                font0: {
                  fontSize: 18,
                  letterSpacing: 10,
                  fontWeight: 400,
                  lineHeight: 24,
                },
                font1: {
                  fontSize: 24,
                  fontWeight: 600,
                  align: 'center',
                },
                font2: {
                  fontSize: 32,
                  fontWeight: 400,
                  color: 'rgb(123,23,47)',
                },
              }
            },
            edgeSymbol: ['arrow', 'circle'],// 连接线两头的样式 圆和箭头可自由调整
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 20
            },
            data: [
              {
                name: 'Node1',
                // 设置关系节点位置
                x: 410,
                y: 350,
                symbol: 'image://图片base码', // 前缀 image:// + 图片的base64码
                // 节点大小设置
                symbolSize: 70,
              },
              {
                name: 'Node2',
                x: 465,
                y: 270,
                symbol: 'image://图片base码', // image://前缀 + 图片的base64码
                symbolSize: 70,
              },
              {
                name: 'Node3',
                x: 550,
                y: 250,
                symbol: 'image://图片base码', // image://前缀 + 图片的base64码
                symbolSize: 70,
              },
              {
                name: 'Node4',
                x: 550,
                y: 400,
                // 设置点类型为参考坐标点,其他点都是相对于该点进行的位置调整
                type: 0,
                symbol: 'image://图片base码', // image://前缀 + 图片的base64码
                symbolSize: [250,150],
              },
              {
                name: 'Node5',
                x: 660,
                y: 270,
                symbol: 'image://图片base码', // image://前缀 + 图片的base64码
                symbolSize: 70,
              }
            ],
            // 添加数据关联关系
            links: [
              {
                source: 'Node4',
                target: 'Node1'
              },
              {
                source: 'Node4',
                target: 'Node2'
              },
              {
                source: 'Node4',
                target: 'Node3'
              },
              {
                source: 'Node4',
                target: 'Node3'
              },
              {
                source: 'Node4',
                target: 'Node5'
              },
              {
                source: 'Node4',
                target: 'Node6'
              },
            ],
            // 关系图连接线样式设置
            lineStyle: {
              opacity: 1,
              width: 2,
              curveness: 0,
              color: 'rgb(107,49,114)'
            }
          },
          {
            type: 'graph',
            layout: 'none',
            symbol: 'rect',
            symbolSize: 0,
            roam: false,
            // 禁用默认的节点绘制
            //symbolSize: 0,
            itemStyle: {
              normal: {
                // 设置节点背景颜色为指定颜色
                color: 'rgb(124,126,189)',
              }
            },
            label: {
              show: true,
              formatter: (item) => {
                let desc = '';
                switch (item.name) {
                  case 'Node1':
                    desc =
                        '文字描述1';
                    break;
                  case 'Node2':
                    desc =
                        '文字描述2';
                    break;
                  case 'Node3':
                    desc =
                        '文字描述3';
                    break;
                  case 'Node5':
                    desc =
                        '文字描述5';
                    break;
                  case 'Node6':
                    desc =
                        '文字描述6';
                    break;
                }
                return '{font0|' + desc + '}'
              },
              rich: {
                font0: {
                  fontSize: 12,
                  lineHeight: 24
                }
              }
            },
            data: [
              {
                name: 'Node1',
                x: 310,
                y: 405,
                symbolSize: [165, 75],
              },
              {
                name: 'Node2',
                x: 300,
                y: 280,
                symbolSize: [115, 75]
              },
              {
                name: 'Node3',
                x: 520,
                y: 220,
                symbolSize: [175, 48]
              },
              {
                name: 'Node4',
                x: 435,
                y: 400
              },
              {
                name: 'Node5',
                x: 600,
                y: 290,
                symbolSize: [115, 50]
              },
              {
                name: 'Node6',
                x: 590,
                y: 405,
                symbolSize: [172, 75],
              }
            ]
          },
          {
            type: 'graph',
            layout: 'none',
            symbol: 'rect',
            symbolSize: 0,
            roam: false,
            // 禁用默认的节点绘制
            //symbolSize: 0,
            itemStyle: {
              normal: {
                // 设置节点背景颜色为透明
                color: 'none',
              }
            },
            label: {
              show: true,
              formatter: (item) => {
                let desc = '{font0|描述}\n{font1| ';
                switch (item.name) {
                  case 'Node1':
                    desc += Node1+'}';
                    break;
                  case 'Node2':
                    desc += Node2+'}';
                    break;
                  case 'Node3':
                    desc += Node3+'}';
                    break;
                  case 'Node4':
                    desc = '';
                    break;
                  case 'Node5':
                    desc += Node5+'}';
                    break;
                  case 'Node6':
                    desc += Node6+'}';
                    break;
                  default:
                }
                return desc;
              },
              rich: {
                font0: {
                  color: 'rgb(255,255,255)',
                  fontSize: 9,
                  fontWeight: 400,
                  lineHeight: 16
                },
                font1: {
                  color: 'rgb(255,255,255)',
                  fontSize: 14,
                  fontWeight: 400,
                  align: 'center',
                },
              }
            },
            data: [
              {
                name: 'Node1',
                x: 270,
                y: 310,
              },
              {
                name: 'Node2',
                x: 285,
                y: 230,
              },
              {
                name: 'Node3',
                x: 380,
                y: 210,
              },
              {
                name: 'Node4',
                x: 435,
                y: 400
              },
              {
                name: 'Node5',
                x: 600,
                y: 240,
              },
              {
                name: 'Node6',
                x: 600,
                y: 310,
              }
            ]
          },
          {
            type: 'graph',
            layout: 'none',
            symbol: 'rect',
            symbolSize: 0,
            roam: false,
            // 禁用默认的节点绘制
            //symbolSize: 0,
            itemStyle: {
              normal: {
                // 设置节点背景颜色为无
                color: 'none',
              }
            },
            label: {
              show: true,
              formatter: (item) => {
                let desc = '';
                switch (item.name) {
                  case 'Node1':
                    desc = 'Node1';
                    break;
                  case 'Node2':
                    desc = 'Node2';
                    break;
                  case 'Node3':
                    desc = 'Node3';
                    break;
                  case 'Node5':
                    desc = 'Node5';
                    break;
                  case 'Node6':
                    desc = 'Node6';
                    break;
                  default:
                }
                return '{font0|'+desc+'}';
              },
              rich: {
                font0: {
                  color: 'rgba(255,255,255,0.5)',
                  fontSize: 18,
                  fontWeight: 500,
                },
              }
            },
            data: [
              {
                name: 'Node1',
                x: 290,
                y: 405,
              },
              {
                name: 'Node2',
                x: 345,
                y: 320,
              },
              {
                name: 'Node3',
                x: 435,
                y: 300,
              },
              {
                name: 'Node4',
                x: 435,
                y: 290
              },
              {
                name: 'Node5',
                x: 535,
                y: 320,
              },
              {
                name: 'Node6',
                x: 590,
                y: 405,
              }
            ]
          }
        ]
      };
      myChart.setOption(option)
    },

大家有什么好的方法，可以互相交流学习

 本文借鉴了其他网站的原型设计，以下是连接：

makeapie echarts社区图表可视化案例

https://www.ppchart.com/#/

Vue 和 ECharts 从零开始：打造客户画像数据分析页面 一步步教你用 Vue 和 ECharts 实现数据可视化分析页面 新手友好！使用 Vue 和 ECharts 构建动态数据图表页面 基于
南北极之间
11-04 534
Vue 和 ECharts 从零开始：打造客户画像数据分析页面 一步步教你用 Vue 和 ECharts 实现数据可视化分析页面 新手友好！使用 Vue 和 ECharts 构建动态数据图表页面 基于 Vue 的 ECharts 实战：客户画像分析页面开发 Vue + ECharts 初体验：轻松创建数据可视化图表页面
Echarts柱状图label如何实现个性化~
o_o6666的博客
07-05 2808
最近因为公司项目需展示大量图表，所以用到echarts超多，而且ui总是有自己的想法，为了满足只能自己不断地去探索，要实现效果如图所示： 一般柱状图label不是在左就是在右，而且只有一个；像这种内外兼有且样式不同，少；找了很久没找到，只能回官网看配置项，嘿，还真让我发现了；超简单！ series: [ { data: data, type: 'bar', barMaxWidth: 20, .
echarts rich实现自定义label样式
九段刀客的博客
11-23 1284
{class名称|显示的值} `{name|${params.name}}`; { name: '各效价袋数', type: 'pie', radius: '70%', bottom: '-40px', label: { show: true, position: 'inner', formatter(
echarts china_Echarts实现疫情地图和用户画像
weixin_39873356的博客
11-29 566
Echarts Chartjs最近由于公司图表展现需求较多，所以学习整理下相关资料。前端图表框架也比较多，这里介绍两款。Apache EchartsChartjsApache Echarts 涵盖各行业图表，满足各种需求，功能相当丰富。而后起之秀chartjs以其简单灵活特性，也深得开发设计人员喜爱。https://echarts.apache.org (Echarts)https://www.c...
实时标签开发——从零开始搭建实时用户画像(五)
大数据流动
06-11 1215
数据接入数据的接入可以通过将数据实时写入Kafka进行接入，不管是直接的写入还是通过oracle和mysql的实时接入方式，比如oracle的ogg，mysql的binlogoggGol...
echart个人图例展示
幸福有多远
07-08 522
前言： 百度有专门的echart个人开发中心，可以提交个人代码到平台上展示自己的图例 代码效果，编辑皆可见 https://gallery.echartsjs.com/explore.html?u=bd-3793071787&type=work#sort=rank~timeframe=all~author=all ...
Python与Echarts实现的职位画像系统
这篇论文详细介绍了如何使用Python编程语言和Echarts数据可视化工具来设计和实现一个职位画像系统。该系统旨在应对互联网招聘市场的快速发展，帮助求职者快速定位符合自身条件的职位。 在研究背景部分，论文指出...
基于“用户画像”的商品推送系统设计与实现.caj
10-20
其次对基于“用户画像”的商品推送系统从需求、设计和实现的三个方面进行详细的说明,本系统主要构成为以下两个部分:(1)用户画像系统,首先以用户的个人历史行为为基础,通过评分矩阵模型构建用户兴趣模型,然后基于标签...
Echarts实现思维导图绘制教程
二、思维导图的Echarts实现 使用Echarts绘制思维导图涉及的核心知识点包括： 1. 树状图（Tree Chart）：Echarts提供了树状图的系列接口，允许用户通过树形数据结构来展示层级关系。 - 节点（nodes）：每个节点...
ECharts 雷达图案例002 - 诈骗性质分析
最新发布
No_Name_Cao_Ni_Mei的博客
06-19 642
深入挖掘数据背后的故事，用可视化手段揭示诈骗行为的模式和趋势。
ECharts--基于力导向布局图功能更完善的人物关系图插件扩展-增加横纵滚动条
04-12
ECharts--基于力导向布局图功能更完善的人物关系图插件扩展-增加横纵滚动条
2024.1.20 用户画像标签开发,面向过程方法
白白的wj的博客
01-30 518
1.创建SparkSession对象。# 理赔活跃度的四级标签ID。
vue使用echarts画柱状图(个性化样式)
a_boy_bb的博客
08-24 982
根据ui设计实现的个性化柱状图，个人第一次弄，所以记录一下，如果你也刚好需要使用，可以借鉴一下：效果图如下。我相信你在使用的时候应该已经在项目可以正常使用echarts，所以就不必过多其他步骤，直接上代码。其实实现个性化主要在series数据里面,可以根据里面注解大概了解一下具体原理.
人物关系图谱:ECharts 实现
weixin_38409915的博客
03-04 5369
1、什么是ECharts ECharts是百度开源的纯 Javascript 图表库，目前开源可以与highcharts相匹敌的一个图表库，相信有很多国内用户使用。 官网 https://echarts.apache.org/ 2、开始简单配置关系图 1、首先配置series的type为graph。 2、layout为force，layout可以选择none、circular和force ‘none’ 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。 ‘circular’ 采用环形布局。 ‘fo
vue中使用echarts实现人体动态图
YL
03-04 1401
类型设置为 象形柱形图，象形柱图是可以设置各种具象图形元素（如图片、SVG PathData 等）的柱状图。然后边采用SVG PathData来实现，通过SVG PathData实现后发现图片更省事。这也算是长见识了，哈哈。最近一直处于开发大屏的项目，在开发中遇到了一个小知识点，在大屏中如何实现人体动态图。然后看了下echarts官方文档，根据文档中的示例调整出来自己想要的效果。以上代码便是实现人体形态动态效果，如果有不足欢迎大家点评指正。
vue 使用 echarts 热词图
收集、分享
02-02 419
vue 使用 echarts 热词图
Echarts开发人物关系网络图
热门推荐
nieji3057的博客
08-20 3万+
转载地址：https://blog.csdn.net/xqhadoop/article/details/78286270 引言:  人物关系可视化是将人与人之之间通过某属性进行连接而形成的关系网络,通过可视化技术展现出来。而baidu的Echarts是一款非常敏捷,迅速,酷炫的js可视化工具 1.Echarts介绍 ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 P...
pyechart练习三：黑色星期五用户画像
bb8886的博客
09-12 456
pyechart练习三：黑色星期五用户画像
Pyecharts(四) —— 黑色星期五用户画像
share16的博客
07-20 696
Pyecharts(四)：黑色星期五用户画像
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值