uniapp知识图谱（echarts）

一、导入echarts插件百度图表 echarts（暂时停止，请不要下载使用） - DCloud 插件市场

二、代码

<l-echart ref="chart" style="width: 100%;height: 260rpx;margin-top: 20rpx;"></l-echart><script>import * as echarts from '@/uni_modules/lime-echart/components/l-echart/echarts';import {seriesLinks,seriesData} from './knowdata.js'export default{data(){return{option: {// 动画更新变化时间animationDurationUpdate: 1500,animationEasingUpdate: 'quinticInOut',tooltip: {show: false},series: [{type: 'graph',layout: 'force',legendHoverLink: true, //是否启用图例 hover(悬停) 时的联动高亮。hoverAnimation: true, //是否开启鼠标悬停节点的显示动画edgeLabel: {position: 'center', //边上的文字样式normal: {formatter: "{c}",show: true,}},edgeSymbol: ['', ''],force: {edgeLength: 10,repulsion: 300 //节点之间的斥力因子},//color: ['#1CF3E6', '#FE8F0D', '#29F5FF'],color: [{type: 'radial',x: 0.5,y: 0.5,r: 0.9,colorStops: [{offset: 1,color: '#28F7FF' // 0% 处的颜色}, {offset: 0,color: '#06243f' // 100% 处的颜色}],global: false // 缺省为 false}, {type: 'radial',x: 0.5,y: 0.5,r: 0.9,colorStops: [{offset: 1,color: '#FE8F0D' // 0% 处的颜色}, {offset: 0,color: '#06243f' // 100% 处的颜色}],global: false // 缺省为 false}, {type: 'radial',x: 0.5,y: 0.5,r: 0.9,colorStops: [{offset: 1,color: '#187bd8' // 0% 处的颜色}, {offset: 0,color: '#06243f' // 100% 处的颜色}],global: false // 缺省为 false}],roam: true, //是否开启鼠标缩放和平移漫游，draggable: true, //每个节点的拖拉itemStyle: {color: ['#28F7FF', '#FE8F0D', '#187bd8'], //字体颜色// borderWidth: 5,// borderType: 'dashed',bordercolor: '#f00',normal: {cursor: 'pointer',label: {//formatter: "{c}",为什么这个写上就不打开了？show: true,position: [-10, -15],textStyle: { //标签的字体样式color: ['#28F7FF', '#FE8F0D', '#187bd8'], //字体颜色fontStyle: 'normal', //文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜fontWeight: 'bolder', //'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...fontFamily: 'sans-serif', //文字的字体系列fontSize: 12, //字体大小}},nodeStyle: {brushType: "both",borderColor: "rgba(255,215,0,0.4)",borderWidth: 5,},},//鼠标放上去有阴影效果emphasis: {shadowColor: '#447EFA',shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 40,},},lineStyle: {width: 2,color: {type: 'linear',x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0,color: '#28F7FF' // 0% 处的颜色}, {offset: 1,color: '#06243f' // 100% 处的颜色}],global: false // 缺省为 false}},label: {color: ['#28F7FF', '#FE8F0D', '#187bd8'],fontSize: 18,},symbolSize: 14, //节点大小links: seriesLinks,data: seriesData,cursor: 'pointer',categories: [{name: '类目0'}, {name: '类目1'}, {name: '类目2'}]}]},
},
mounted() {this.$refs.chart.init(config => {const {canvas} = config;const chart = echarts.init(canvas, null, config);canvas.setChart(chart);chart.setOption(this.option);//点击事件chart.on('click', (params) => {console.log(params)})// 需要把 chart 返回return chart;});}}}
</script>
//数据 knowdata.js
export const seriesData = [{"id": "50000","name": "知识结构(80)","category": "百科","isClicked": true,"isRoot": true,"symbolSize": 80, //尺寸大小"category": 0,"colors": '#f00'},{"id": "01","parentId": "50000","category": "外文名","name": "指挥知识(70)","isClicked": false,"symbolSize": 70, //尺寸大小"category": 1},{"id": "02","parentId": "50000","category": "别名","name": "综合知识(50)","isClicked": false,"symbolSize": 50, //尺寸大小"category": 1},{"id": "03","parentId": "50000","category": "国籍","name": "专业知识(60)","isClicked": false,"symbolSize": 60, //尺寸大小"category": 1},{"id": "001","parentId": "01","category": "爱好","name": "军事战略(40)","isClicked": false,"category": 2,"symbolSize": 40, //尺寸大小},{"id": "002","parentId": "01","category": "爱好","name": "军事思想(40)","isClicked": false,"category": 2,"symbolSize": 40, //尺寸大小},{"id": "003","parentId": "02","category": "爱好","name": "管理学(40)","isClicked": false,"category": 2,"symbolSize": 40, //尺寸大小},{"id": "004","parentId": "03","category": "爱好","name": "军事地形(30)","isClicked": false,"category": 2,"symbolSize": 30, //尺寸大小},{"id": "005","parentId": "03","category": "爱好","name": "军事装备(30)","isClicked": false,"category": 2,"symbolSize": 30, //尺寸大小},{"id": "006","parentId": "03","category": "爱好","name": "信息技术(40)","isClicked": false,"category": 2,"symbolSize": 40, //尺寸大小},{"id": "007","parentId": "03","category": "爱好","name": "军事高科技(50)","isClicked": false,"category": 2,"symbolSize": 50, //尺寸大小},
]export const seriesLinks = [{"value": "","target": "50000","source": "01"},{"value": "","target": "50000","source": "02"},{"value": "","target": "50000","source": "03"},{"value": "","target": "01","source": "001"},{"value": "","target": "01","source": "002"},{"value": "","target": "02","source": "003"},{"value": "","target": "03","source": "004"},{"value": "","target": "03","source": "005"},{"value": "","target": "03","source": "006"},{"value": "","target": "03","source": "007"}
]

效果图

uniapp知识图谱（echarts）相关推荐

人物关系知识图谱echarts斗破苍穹
采用html代码引用jquery和echarts库实现斗破苍穹的人物关系知识图谱. 环境:HBuilder X <!DOCTYPE html> <html> <head& ...
知识图谱---echarts关系图
一:三级关系图知识图谱最近写了个demo,主要功能是搜索实体,搜索结果显示与该实体相关的公司.子公司.设备.位置.状态.危害这六类,数据是通过我司的数据标注系统提供的.后端用到的技术栈是python ...
基于Neo4j中医方剂药材知识图谱大数据可视化分析系统的设计与开发
基于Neo4j中医方剂药材知识图谱大数据可视化分析系统的设计与开发设计背景这个系统的开发初衷是笔者希望通过这个系统来学习一下Neo4j的相关技术,包括与python.java的对接.可视化等方面, ...
使用echarts实现简单的疾病知识图谱
var size = 60; var size1 = 30; var yy = 200; var yy1 = 250;var listdata = []; var links = [];var med ...
CCKS-2017 行业知识图谱构建与应用-下篇
http://www.sohu.com/a/192557627_99934777 摘要: 这篇是PPT的下半部分,更加偏重于实战中关键技术的难点剖析. 行业知识图谱关键技术上篇我们讲行业知识图谱生命 ...
关于汽车领域的知识图谱实战入门
根据https://www.bilibili.com/video/BV1iv411k7qG整理 01实体识别基于nlp的g3语言去抽取实体对象和基于关系抽取的情境下,用到命名实体识别命名实体识别通 ...
【知识图谱】实践篇——基于知识图谱的《红楼梦》人物关系可视化及问答系统实践：part6基于图谱的问答实现
前序文章: [知识图谱]实践篇--基于知识图谱的<红楼梦>人物关系可视化及问答系统实践:part1项目介绍与环境准备 [知识图谱]实践篇--基于知识图谱的<红楼梦>人物关系可视 ...
知识图谱实践（网易课程，汽车）
课程特色和目录环境安装项目需求说明基于搜索引擎的商业数据分析项目整体架构设计系统体系结构和关键技术说明数据层应该叫知识层,是我们建立知识体系的数据存储科研优先级和工程时间优先级的顺序相反 ...
【技术免费分享-知识图谱的构建】SpringBoot+Vue.js知识图谱中药可视化系统
讲两句现在基本上网上很少有知识图谱完整案例的构建,咱们开发者对于怎么构建没有一点思路,知识图谱基本就两个构建方法:方法1 neo4j图数据库: 方法2 echarts图谱插件. 我觉得方法2比较简单 ...

uniapp知识图谱（echarts）

uniapp知识图谱（echarts）相关推荐

最新文章

热门文章