echarts使用笔记

最新推荐文章于 2023-03-03 15:17:54 发布
最新推荐文章于 2023-03-03 15:17:54 发布
阅读量430 收藏 1
点赞数
分类专栏： echarts 文章标签： echarts 关系力图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ssxhcsz/article/details/78222340
版权

前段时间由于项目需要，对echarts的关系图进行了简单的了解，虽然都是一些简单的用法，很久不用还是会忘，好记性不如烂笔头，还是写下来吧。


首先，以官网中的http://echarts.baidu.com/demo.html#graph-simple 为例



创建图示关系图可分为三步：1. 引入echarts.js文件  2 .为关系图准备一个div并设置好宽高  3.创建echarts实例，通过option指定图表的配置项和数据。如下图


关于option里面的配置项,主要用到的是series


 详细如下


data属性，详细如下


links属性，详细如下


如果要用图片替换节点图标，可在series下或每个节点中添加symbol属性，如：symbol:'image://./img/server.png'


以下为上图代码，只在官网的例子上改动了一点点

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title></title>  
  6.         <script src="js/echarts.js"></script>  
  7.     </head>  
  8.     <body>  
  9.         <div id="main" style="width: 600px;height:400px;"></div>  
  10.         <script type="text/javascript">  
  11.         // 基于准备好的dom，初始化echarts实例  
  12.         var myChart = echarts.init(document.getElementById('main'));  
  13.         // 指定图表的配置项和数据  
  14.         var option = {  
  15.             title: {  
  16.                 text: 'Graph 简单示例'  
  17.             },  
  18.             tooltip: {},  
  19.             animationDurationUpdate: 1500,  
  20.             animationEasingUpdate: 'quinticInOut',  
  21.             series : [  
  22.                 {  
  23.                     type: 'graph',  
  24.                     layout: 'none',  
  25.                     symbol:'image://./img/server.png',  
  26.                     symbolSize: [60,80],//设置节点宽高，为一个数字时,则宽高相同  
  27.                     roam: true,  
  28.                     label: {  
  29.                         normal: {  
  30.                             show: true  
  31.                         }  
  32.                     },  
  33.                     edgeSymbol: ['circle', 'arrow'],  
  34.                     edgeSymbolSize: [4, 10],  
  35.                     edgeLabel: {  
  36.                         normal: {  
  37.                             textStyle: {  
  38.                                 fontSize: 20  
  39.                             }  
  40.                         }  
  41.                     },  
  42.                     data: [{  
  43.                         name: '节点1',  
  44.                         x: 300,  
  45.                         y: 300  
  46.                     }, {  
  47.                         name: '节点2',  
  48.                         x: 800,  
  49.                         y: 300  
  50.                     }, {  
  51.                         name: '节点3',  
  52.                         x: 550,  
  53.                         y: 100  
  54.                     }, {  
  55.                         name: '节点4',  
  56.                         x: 550,  
  57.                         y: 500  
  58.                     }],  
  59.                     links: [{  
  60.                         source: 0,  
  61.                         target: 1,  
  62.                         symbolSize: [5, 20],  
  63.                         label: {  
  64.                             normal: {  
  65.                                 show: true  
  66.                             }  
  67.                         },  
  68.                         lineStyle: {  
  69.                             normal: {  
  70.                                 width: 5,  
  71.                                 curveness: 0.2  
  72.                             }  
  73.                         }  
  74.                     }, {  
  75.                         source: '节点2',  
  76.                         target: '节点1',  
  77.                         label: {  
  78.                             normal: {  
  79.                                 show: true  
  80.                             }  
  81.                         },  
  82.                         lineStyle: {  
  83.                             normal: { curveness: 0.2 }  
  84.                         }  
  85.                     }, {  
  86.                         source: '节点1',  
  87.                         target: '节点3'  
  88.                     }, {  
  89.                         source: '节点2',  
  90.                         target: '节点3'  
  91.                     }, {  
  92.                         source: '节点2',  
  93.                         target: '节点4'  
  94.                     }, {  
  95.                         source: '节点1',  
  96.                         target: '节点4'  
  97.                     }],  
  98.                     lineStyle: {  
  99.                         normal: {  
  100.                             opacity: 0.9,  
  101.                             width: 2,  
  102.                             curveness: 0  
  103.                         }  
  104.                     }  
  105.                 }  
  106.             ]  
  107.         };  
  108.         // 使用刚指定的配置项和数据显示图表。  
  109.         myChart.setOption(option);  
  110.         </script>  
  111.     </body>  
  112. </html>  

上面提到的两个没试出来的属性，有知道的小伙伴可以交流一下。












ssxhcsz
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts 网格属性_echarts 绘制网格 教你使用graphic
weixin_39715907的博客
12-19 1437
echarts 绘制网格 教你使用graphic主子镇楼不经常使用的echarts的同学对于echarts 的认识基本停留在饼图，柱形图，条形图，折线图等一系列常规图形上，对于网格基本是一脸懵，小伙伴会问了网格不都是用canvas或者svg话的吗？ 这一类不特殊图标一般都是D3定制的(不了解D3的小伙伴请移步：D3.js官网)就不多解释了！我们一般不会为了一个图，而引用一个插件或者图库，代价太大，...
echarts使用小记
qq_29738977的博客
03-19 100
echarts2 https://echarts.baidu.com/echarts2/index.html echarts3 https://echarts.baidu.com/ 一、标题居中 //left的值为'left', 'center', 'right' title:{ left:'center' } 二、主副标题之间的间距 title:{ //默认为10 i...
echarts关系图graph修改图片，自定义鼠标节点和线悬停，图片下载，拖拽，右键弹框等功能的实现
笑到世界都狼狈的博客
09-04 1万+
1.首先看一下效果图： 2.代码目录结构 3.参考地址：https://gallery.echartsjs.com/editor.html?c=xCLEj67T3H 4.代码部分：（如果不懂，可以看我之前写的关于echarts树图tree部分的代码，步骤都比较清楚，所以这边我直接上全部代码了，就不拆分解释说明了） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8".
echarts_自定义graph关系图
编程知识分享，主打前端
01-13 3万+
自定义路径图参考自定义测试函数处理定义数据类型(树状结构)处理坐标x、y封装成组件效果 参考 ecahrts官方文档 自定义测试 探索：关系图的关键 起点 终点 线条 其次 标签文字 线条标签 配置关键: { title: { text: "2021->2022 我的职业", color: "#fff", x: "left", width: 120, height: 80,
ECharts两种动画效果
ZHI_MO_WEN的博客
03-03 7361
实现echarts桑基图两种动画效果
用echarts的simplegraph做的功能随笔
weixin_44231698的博客
12-21 273
1.html中引用echarts.min.js的js，定义一个div放echarts画的图。比如id为"main";<div>要放在写的js上面；否则加载不上，2.像官网中的option似的，给option赋值；var myChart = echarts.init(document.getElementById('main'));option ...此处省略...myChart.set...
echarts工作笔记
weixin_42450794的博客
10-18 152
轴线的名字 轴线的样式 xAxis: { type: 'category', name:'时间', axisLine:{ lineStyle:{ color: '#f74c4c' } } }, 轴线显示tooltip lineChart.dispatch...
echarts 学习笔记 文档
02-26
echarts 学习笔记 文档
echarts练习笔记
03-11
在“echarts练习笔记”这个项目中，我们可以看到两个主要的文件夹：`templates`和`static`。这表明项目是围绕着构建一个Web应用进行的，其中`templates`通常用于存放HTML模板文件，而`static`则用于存放不随应用程序...
echarts练习笔记-图表模板
最新发布
03-11
**ECharts练习笔记-图表模板** ECharts是一款由百度开源的、基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，支持自定义交互和视觉效果，广泛应用于Web数据可视化场景。...
echarts笔记.zip
09-09
在"echarts笔记.zip"这个压缩包中，我们可以推测包含的是一份关于ECharts的学习笔记或教程，可能涵盖了ECharts的基础使用方法、高级特性以及实战案例等内容。这份笔记可能会帮助我们深入理解并熟练掌握ECharts的各个...
Echarts学习笔记保姆级教程学完加薪
11-22
Echarts学习笔记保姆级教程学完加薪 Echarts是一种商业级的数据可视化图表库，由Baidu团队开发和维护。该库提供了多种数据可视化图表，包括柱状图、饼状图、折线图、散点图、雷达图、漏斗图、仪表盘、关系图、树形...
ECharts学习笔记.md
07-25
ECharts学习笔记.md
Apache ECharts简单使用
01-29
Apache ECharts简单使用
使用echarts制作泡泡效果
Sunshine_hj的博客
09-28 3491
公司项目需要泡泡效果，项目已经引入了vue和echarts框架，就按着两个框架找了找，在echarts官网找到个例子，再结合自己的需求制作而成。只是记录给自己看的，如能帮上别人的忙也是乐意的。 先给个效果图。 这里使用的是echarts的关系图做的，即series的type=graph。下面先上代码后解释。 <div class="paopao" ref="paopaoChart...
ECharts关系图(详细示例——满满的注释)
热门推荐
GRAY_KEY的博客
06-01 4万+
图表效果如下：具体代码如下：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;关系图案例&lt;/title&gt; &lt;!-- 引入 ECharts 文件 --&gt; &lt;script src="js/
echarts中graph控制节点大小
zfan520的博客
01-08 2万+
1、根据value值控制节点大小 1.1 效果 1.2 代码控制 option = { series: [{ type: 'graph', layout: 'force', label: { normal: {
echarts关系图graph报错
qq_42264793的博客
09-03 2657
echarts关系图 报错__focusNodeAdjacency of undefined // echarts关系图 报错 Uncaught TypeError: Cannot read property '__focusNodeAdjacency' of undefined at GraphView.js:184 at Graph.graphProto.eachEdge (Graph.js:250) at ExtendedClass.render (GraphView.js:1
echarts 柱状图使用
09-07
- *2* *3* *4* [ECharts的基本使用（一）：柱状图与通用配置【第一日学习笔记】](https://blog.csdn.net/fzy2003/article/details/123689863)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630",...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值