echarts中树节点样式的修改方法

关于echarts中修改问题:

在 echarts 中 markPoint 的样式内置了 ‘circle’(圆), ‘rect’(正方形), ‘roundRect’(圆角正方形), ‘triangle’(三角形), ‘diamond’(菱形), ‘pin’(饼图), ‘arrow’(箭头) ,我们还可以通过自定义样式。

自定义样式有两种(设置图片、画适量路径)

通过 image://url 设置图片,url为图片链接。

通过 path:// 将图标设置任意的适量路径,并且可以设置为任意颜色。路径图形会自适应调整为合适的大小。

使用 path 标签时,就像用指令的方式来控制一只画笔,比如:移动画笔到某一坐标位置,画一条线,画一条曲线等等。

注意:X,Y 代表坐标轴上一个点,(0,0)为坐标轴中心,X 轴水平向右为正, Y 轴水平向下为正。

指令可用于路径数据:

M = moveto(M X,Y) :将画笔移动到指定的坐标位置

L = lineto(L X,Y) :画直线到指定的坐标位置

H = horizontal lineto(H X):画水平线到指定的X坐标位置

V = vertical lineto(V Y):画垂直线到指定的Y坐标位置

C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三次贝赛曲线

S = smooth curveto(S X2,Y2,ENDX,ENDY)

Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY):二次贝赛曲线

T = smooth quadratic Belzier curveto(T ENDX,ENDY):映射

A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线

Z = closepath():关闭路径

//示例: 画一个简单的正方形,从坐标(0,0)依次画直线到坐标(20,0) (20,20) (0,20) (0,0)

Path:// M0,0 L20,0 L20,20, L0,20 L0,0 Z

1、树中的样式:

Echarts中每一个图表实例用 option 来描述
Series:系列,是指一组数值以及他们映射成的图。
series.type:就是图表类型,包括line(折线图)、bar(柱状图)、pie(饼图)、scatter(散点图)、graph(关系图)、tree(树图)等

2、修改树的展开间距:

//通过判断节点个数,虽然不能获取哪些节点是根节点哪些节点是叶子节点,但是知道所有的节点数也给我们提供了一个可以利用的值来计算大致的一个高度或者宽度来让我们的echart更好的显示。因为总的来说总的节点的数目*一个大于节点显示宽度的数,可以确保让节点之间有间距。

3、echarts样式

symbol: ‘emptyRect’,

// 设置节点样式,如果要有区分是否有自己点,要使用empyt…, 矩形使用 empytRect, 圆角矩形使用 empytRoundRect, 圆形使用 empytCircle.

roam: true,

// 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 ‘scale’ 或者 ‘move’。设置成 true 为都开启

expandAndCollapse: false,

// 是否收缩,默认树只展示三级,设为false后全部展示,但是全部展开后不能通过点击再收缩。

猜你喜欢

转载自blog.csdn.net/weixin_40307206/article/details/109896784