Echarts源码修改

项目中要画树图，但echarts的树图的线只支持贝塞尔曲线，修改曲线的弧度也只能改成直线，但需求是折线。所以通过修改echarts的源码来满足需求。

以下是效果图：

步骤：1、下载源码 2、修改 3、webpack打包安装

1、下载地址： https://github.com/apache/incubator-echarts/releases/tag/4.2.1

2、（1）解压打开，找到树图的文件夹，路径有两个地方：分别在src和lib目录下

C:\Users\who\Desktop\echartSource\incubator-echarts-4.2.1\src\chart\tree

C:\Users\who\Desktop\echartSource\incubator-echarts-4.2.1\lib\chart\tree

（2）树图的样式在TreeView.js文件中，选择一个打开，搜索一下贝塞尔曲线：BezierCurve，找到相信的函数。

（3）把贝塞尔曲线修改成折线。

（4）修改shape参数，参数是通过：getEdgeShape这个函数获取的，所以查看函数的代码

修改最下面的返回值：

（5）src和lib目录下的两个地方的文件都按照上面修改，

3、webpack打包安装

（1）卸载项目原来的echarts：npm uninstall echarts

(2)本地安装修改后的echarts：npm install C:\Users\who\Desktop\echartSource\incubator-echarts-4.2.1（本地代码的路径）

4、后面就是画ecahrts图，看效果了。

（1）建议修改调试时用html引入的方式，不用每次都打包安装.

（2）关于折线（Polyline）和贝塞尔曲线（BezierCurve）api的使用方式可查看zrender官网：https://ecomfe.github.io/zrender-doc/public/api.html#zrenderbeziercurve

Echarts源码修改相关推荐

修改Echarts源码实现柱状图的炫彩闪烁效果
本次工作需要使用Echarts设计大屏展示,考虑到风险告警功能要对超过阈值的数据标记高亮,同时加强提醒,需要对柱状图的高亮做出一些修改. 查阅资料,有博主已经做出了我想实现的效果,如下图所示,附上原博 ...
ECharts 源码解读二
2021SC@SDUSC 源码结构和打包源码使用webpack打包,查看文件webpack.config.js可知,将echarts源码编译成三个版本,分别为常用版本,精简版本,完整版本,分别对应w ...
Deep Compression阅读理解及Caffe源码修改
Deep Compression阅读理解及Caffe源码修改作者:may0324 更新: 没想到这篇文章写出后有这么多人关注和索要源码,有点受宠若惊.说来惭愧,这个工作当时做的很粗糙,源码修改的比 ...
Android6.0 源码修改之仿IOS添加全屏可拖拽浮窗返回按钮...
Android6.0 源码修改之仿IOS添加全屏可拖拽浮窗返回按钮前言之前写过屏蔽系统导航栏功能的文章,具体可看Android6.0 源码修改之屏蔽导航栏虚拟按键(Home和RecentAPP) ...
echarts源码打包_Echarts源码阅读指南
前言由于echarts是基于zrender进行实现的,所以要解读echarts源码,首先要对zrender有大致的了解,在这篇文章中,我将对zrender的整体结构进行大致的解读. 介绍 zrend ...
写一个PE的壳_Part 5：PE格式修复+lief源码修改
系列汇总写一个PE的壳_Part 1:加载PE文件到内存写一个PE的壳_Part 2:ASLR+修复输入表(IAT)+重定位表支持(.reloc) 写一个PE的壳_Part 3:Section里实 ...
adb 工具源码修改
adb 工具源码修改 1.修改客户端输入后的判断逻辑,使带密码的命令可以通过命令检查修改 system/core/adb/client/commandline.cpp 在最前面新增一个函数用来 ...
grbl控制3轴机械臂原理实现（四）之GRBL源码修改驱动三轴机械臂
往期回顾: 第一篇:grbl控制3轴机械臂原理实现 (一) 之2D机械臂模拟及实现第二篇:grbl控制3轴机械臂原理实现 (二) 之3D机械臂模拟及实现第三篇:grbl控制3轴机械臂原理 ...
file-uploader-cli 关于上传至京东云中文件夹问题的源码修改
file-uploader-cli源码修改注:可以直接跳到最下面看需要修改的部分最近由于Gitee的开源审查,导致其无法再作为图床使用.在对比了多家OSS服务后,决定使用京东云作为新图床,并使用f ...
Android Dialer，Mms，Contacts源码修改笔记，移动端混合开发经验
②在AndroidManifest.xml中修改相应Activity的theme <activity android:name=".HomeActivity" android ...

Echarts源码修改

Echarts源码修改相关推荐

最新文章

热门文章