2021SC@SDUSC
文章平均质量分 56
Lingfur
这个作者很懒,什么都没留下…
展开
-
Echarts 源码解读 十三
2021SC@SDUSC单轴 SingleAxisSingleCreatorSingleCreator文件主要为创建单轴的逻辑代码,主要代码如下:function create(ecModel, api) { var singles = []; ecModel.eachComponent('singleAxis', function (axisModel, idx) { var single = new Single(axisModel, ecModel, api.原创 2021-12-26 20:16:54 · 516 阅读 · 0 评论 -
Echarts 源码解读 十二
2021SC@SDUSC平行坐标轴 ParallelAxisParallelAxisActionparallelAxisAction中注册了axisAreaSelected以及parallelAxisExpand API,主要代码如下:var actionInfo = { type: 'axisAreaSelect', event: 'axisAreaSelected' // update: 'updateVisual'};export function installP原创 2021-12-26 20:03:21 · 530 阅读 · 0 评论 -
Echarts 源码解读 十一
2021SC@SDUSC雷达坐标轴RadarViewRadarView通过extendComponentView方法扩展自Component View,重写了render、_buildAxes、_buildSplitLineAndArea,主要代码如下:RadarView.prototype.render = function (radarModel, ecModel, api) { var group = this.group; group.removeAll();.原创 2021-12-19 23:27:02 · 350 阅读 · 0 评论 -
Echarts 源码解读 十
2021SC@SDUSC直角坐标轴 Axis包括xAxis, yAxisCartesianAxisViewCartesianAxisView扩展自AxisView,重写了render,定义了splitLine以及splitArea方法,并扩展了xAxis yAxis View。主要代码如下:CartesianAxisView.prototype.render = function (axisModel, ecModel, api, payload) { this.group.r原创 2021-12-12 22:40:45 · 711 阅读 · 0 评论 -
Echarts 源码解读 九
2021SC@SDUSCAxisBuilderAxisBuilder中定义了axisLine、axisTickLabel以及axisName的渲染方法,主要代码如下:var builders = { axisLine: function (opt, axisModel, group, transformGroup) { var shown = axisModel.get(['axisLine', 'show']); if (shown === 'auto' &.原创 2021-12-05 19:57:41 · 968 阅读 · 0 评论 -
Echarts 源码解读 八
2021SC@SDUSCCartesianAxisPointer用extend扩展自BaseAxisPoointer,重写了makeEiOption、getHandleTransform以及updateHandleTransform方法,主要源码如下:import BaseAxisPointer from './BaseAxisPointer';CartesianAxisPointer.prototype.makeElOption = function (elOption, value,原创 2021-11-28 18:40:37 · 648 阅读 · 1 评论 -
Echarts 源码解读 七
2021SC@SDUSCAxisPointerAxisPointer为echarts中的坐标指示器,包括直角坐标以及极坐标等install.jsinstall.js文件中注册了axisPointer对外api,主要代码如下:registers.registerAction({ type: 'updateAxisPointer', event: 'updateAxisPointer', update: ':updateAxisPointer' }, axis.原创 2021-11-21 14:21:13 · 1277 阅读 · 0 评论 -
ECharts 源码解读 六
2021SC@SDUSCScroll legend.scroll 为可滚动的legend图例组件,主要包括ScrollableLegendAction、ScrollableLegendModel、ScrollableLegendView文件。ScrollableLegendAction中注册了legend对外API:legendScrollregisters.registerAction('legendScroll', 'legendscroll', function (payload, ec原创 2021-11-14 13:18:13 · 883 阅读 · 2 评论 -
ECharts 源码解读 五
2021SC@SDUSCComponent源码解读---接上篇plainlegend.plain为平面的legend图例组件,主要包含LegendAction、LegendModel和LegendView文件。import LegendModel from './LegendModel';import LegendView from './LegendView';import legendFilter from './legendFilter';import { installLe.原创 2021-11-07 22:25:54 · 567 阅读 · 0 评论 -
ECharts 源码解读 四
2021SC@SDUSCComponent源码解读主要介绍各component的渲染过程以及其使用的zrender graphicecharts对Component的定义呢,可以认为是除Series外的其他配置项。组件类型series 系列,legend 图例组件tooltip 提示框组件,toolbox 工具栏组件,xAxis 直角...原创 2021-10-31 22:43:30 · 590 阅读 · 0 评论 -
ECharts 源码解读 三
2021SC@SDUSCSetOption前面已经用init方法初始化过echarts,接下来只需配置option即可。setOption调用顺序为:echarts.setOption->GlobalModel.setOption(GlobalModel.js)->OptionManager.setOption(OptionManager.js)源码主要部分如下/** * @param {Object} option 配置项 * @param {boolean} n原创 2021-10-24 19:57:16 · 990 阅读 · 0 评论 -
ECharts 源码解读 二
2021SC@SDUSC源码结构和打包源码使用webpack打包,查看文件webpack.config.js可知,将echarts源码编译成三个版本,分别为常用版本,精简版本,完整版本,分别对应webpack入口文件为:index.common.js、index.simple.js、index.js。执行命令:npm install //安装所有依赖包webpack //打包web pack -p//打包成压缩包(.min.js)最后生成的文件在dist文件夹下源码结构ch原创 2021-10-17 11:19:44 · 783 阅读 · 0 评论 -
Echarts 源码解读 一:zrender源码分析1var zr = zrender.init(document.getElementById(‘main‘));
2021SC@SDUSC 因为Echarts是基于zrender进行实现的,所以解读echarts源码前,首先要对zrender有基本的了解。 zrender是canvas的一个类库,zrender是基于canvas实现的。目录zrender的src文件夹文件夹:animation动画相关contain包含判断core核心代码,包含一些工具(util.js)、事件(event.js)、唯一ID(guid.js)、矩阵运算有关(matrix.js)等dom...原创 2021-10-09 23:25:28 · 1334 阅读 · 0 评论 -
Echarts源码分析项目综述
Echarts简介 ECharts(Apache ECharts),一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。 Echarts提供丰富的可视化类型,多种数据格式无需转换就可直接使用,拥有千万数据的前端展示、深度的交互式数据探索、多维数据的支持以及丰富的视...原创 2021-09-30 19:26:47 · 615 阅读 · 0 评论