文档章节

angular7中echarts关系图实战

o
 osc_g8254g7s
发布于 2019/08/19 17:01
字数 666
阅读 11
收藏 0

精选30+云产品,助力企业轻松上云!>>>

Echarts关系图实战效果图

 

  第一步:

    下载echarts(4.1.0)和ngx-echarts(4.1.0)的依赖包,在angular.json中引入echarts.js,在公共模块中引入

      

 

  第二步:

    html页面:<div style="height: 450px" echarts [options]="option" class="bar-chart" (chartInit)="onChartInit($event)"></div>

    这里的onChartInit()函数是用来刷新拓扑图的

  第三步:

    在ts页面创建拓扑图,简单的配置api上可以找到,这个图一共有两个地方有点麻烦

      1.

        该图一个节点有3行数据,官方api可以找到使用方法

        rich{  //这里的rich可以写在公共的label对象里面

          zhong:{color:'#000',fontWeight:800},  //样式

          img1:{backgroundColor:{image:'/WebApi/asset/static/dist/portrait/assets/image/router.png'},height:50}   //图片样式

        }

         使用方法:在data>label下有个formatter属性,后面的值可以使用拼接的方法

          

        这里写完后,可以通过定义label中position来设置数据位置,然后通过offset[,]把数据移动到理想的位置

      

      2.

        该图的关系线离节点两端都有距离

            红圈其实很好弄,在公共itemStyle中定义,borderwidth是定义边框的宽度,borderColor是定义边框的颜色,

              白色的边框不就刚好可以实现这个效果了吗?刷新页面后你会发现节点变小了,给边框设置能看见的透明色会发现边框会占大小,会把图片往

              中间挤压,这个时候只需要调整symbolSize的值就好了,边框宽度是多少我就加多少

 

            蓝圈的我想了很久,有想过加大borderWidth,但那样当前节点的左右空白会和其他节点不一样,最后一直在api上想找到解决方法,一直在想为什么

              不能给关系线一个属性length,后来想到一个办法,试了一下果然行了,方法就是在data>label中添加一个背景颜色backgroundColor:'#fff',然后

              设置它的高度就可以实现效果了

              上图中我注释了symbol这个标签,symbol也是可以放图片的,也是可以实现难点1的效果,但是在难点2中,它没有办法让线实现断开的效果,因为它始终

              占据100%的位置,borderWidht的空间也被他覆盖了导致线始终和它相连,最后只有放弃symbol这个属性,转而使用rich属性

               

  第四步:如果节点数据是后台传递渲染的,并且会通过条件更新,就需要onChartInit这个函数

      public echartsInstance: any;  //声明一个变量

      if (this.echartsInstance) {   //添加完数据后,来刷新数据源
        this.echartsInstance.setOption(this.option)
      }

        //为这个变量赋值

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
ECharts GL 1.0 alpha 发布

距离 ECharts-X 最近一个版本已经过去了两年多时间,期间我们不断被开发者在各种渠道询问 ECharts-X 为什么还不升级新版本,是不是不再维护了等等,对于这些问题我们只能回答我们还没准备好。...

ECharts
2017/04/17
9K
29
一、ECharts(各种统计图)

一、ECharts 1、简介 ECharts是百度的一个项目,后来百度把Echart捐给apache,用于图表展示,提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图...

yzhSWJ
06/13
0
0
ECharts图表插件(4.x版本)使用(一、关系图force节点显示为自定义图像/图片,带分类选择)

导读 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形...

osc_ikbuen62
2018/11/23
24
0
动态echarts及tree型图

一、 动态折线图 该部分是基于echarts开发的,主要有两部分组成,折线图和柱状图,其中末端的垂直细线和小圆球为柱状图部分,小球是柱状图的markPoint设置的,柱状图的data数据是与折线图dat...

osc_8jk0uanm
2018/12/25
20
0
ECharts发布2.2.2版本

ECharts 2.2.2 发布 在五一劳动节的前一天,ECharts发布了一个非常2的版本,2.2.2。在本版本中,我们一共做了以下重大升级: 新增韦恩图(venn)及Treemap 发布 ECharts 在线构建工具 新增对数...

diysimon
2015/04/30
66
0

没有更多内容

加载失败,请刷新页面

加载更多

等到所有jQuery Ajax请求都完成了吗? - Wait until all jQuery Ajax requests are done?

问题: How do I make a function wait until all jQuery Ajax requests are done inside another function? 我如何让一个函数等到所有jQuery Ajax请求都在另一个函数中完成之后? In short...

富含淀粉
29分钟前
17
0
OSChina 周日乱弹 —— 那么长的绳子,你这是放风筝呢

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @ 巴拉迪维:黑豹乐队的单曲《无地自容》 耳畔突然响起旋律,是那首老歌。中国摇滚有了《一无所有》不再一无所有;中国摇滚有了《无地自容》不...

小小编辑
今天
65
1
《吐血整理》-顶级程序员书单集

你知道的越多,你不知道的越多 给岁月以文明,而不是给文明以岁月 前言 王潇:格局决定了一个人的梦想,梦想反过来决定行为。 那格局是什么呢? 格局是你能够看见的深度、广度和密度。 王潇认...

敖丙
2019/12/11
15
0
我可以在Android版式中加下划线吗? - Can I underline text in an Android layout?

问题: 如何在Android布局xml文件中定义带下划线的文本? 解决方案: 参考一: https://stackoom.com/question/A31z/我可以在Android版式中加下划线吗 参考二: https://oldbug.net/q/A31z/...

法国红酒甜
今天
26
0
干掉ELK | 使用Prometheus+Grafana搭建监控平台

什么是Prometheus? Prometheus是由SoundCloud开发的开源监控报警系统和时序列数据库(TSDB)。Prometheus使用Go语言开发,是Google BorgMon监控系统的开源版本。 Prometheus的特点 · 多维度...

木九天
今天
34
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部