- 博客(14)
- 收藏
- 关注
RSS订阅原创 我的学习笔记12.21
2021SC@SDUSCecharts源码分析Series渲染过程Scatter 散点图ScatterSeriesScatterSeries通过extend方法扩展自Series Model，重写了defaultOption属性以及getInitialData等方法。ScatterViewScatterView通过extendChartView方法扩展自Chart View，重写了render、updateTransform等方法，主要实现代码如下：render: func
2021-12-21 15:46:51
231
原创 我的学习笔记12.15
2021SC@SDUSCecharts源码分析Series渲染过程在ECharts中用 series表示各类图表。有line（折线图）、bar（柱状图）、pie（饼图）等Series。用户通过传递option对象来设置相应的Series。在这部分中echarts采用了Model以及View的架构来管理Series：Model层：model/Series.js 管理Series数据。View：view/Charts.js 负责渲染Chart视图。Line 折线图LineSeri.
2021-12-15 15:02:19
1560
原创 我的学习笔记12.8
2021SC@SDUSCecharts源码分析各个Component的渲染过程在echarts中，Component（组件）是除Series（图表）外的其他配置项，有datazoom（区域缩放）、visualMap（视图映射）、tooltip（提示框组件）、toolbox（工具栏）、brush（区域选择组件）、timeline（时间轴）、graphic（原生图形组件）、dataset（数据集）、marker（包括markPoint（图标标注）、markLine（图表标线）、markArea（图表
2021-12-08 12:10:15
231
原创 我的学习笔记12.1
2021SC@SDUSCecharts源码分析echarts如何渲染展示坐标轴上的label数据存储首先考虑label data的存储过程，以直角坐标系为例，data存储的调用链如下所示：echarts.setOption()Global.setOption()Global.mergeOption()Component.optionUpdated()AxisModelCreator.optionUpdated()，将OrdinalMeta.createByAxisModel().
2021-12-01 12:36:47
388
原创 我的学习笔记11.29
2021SC@SDUSCecharts源码分析之坐标系坐标系Grid 直角坐标系Grid为echarts中的直角坐标系组件。gridSimplegridSimple通过extendComponentView扩展自Component View，重写了render方法，主要代码如下：render: function (gridModel, ecModel) { this.group.removeAll(); if (gridModel.get('show')) {
2021-11-29 12:58:10
736
原创 我的学习笔记11.24
2021SC@SDUSC雷达坐标轴配置雷达图坐标系与极坐标系不同的是它的每一个轴（indicator 指示器）都是一个单独的维度，可以通过 name、axisLine、axisTick、axisLabel、splitLine、 splitArea 几个配置项配置指示器坐标轴线的样式。radar.zlevel：radar 组件所有图形的 zlevel 值。zlevel 用于 Canvas 分层，不同 zlevel 值的图形放置在不同的 Canvas 中，zlevel 大的 Canvas 会放在
2021-11-24 14:04:03
599
原创 我的学习笔记11.17
2021SC@SDUSC直角坐标轴Axis为直角坐标系Grid中的坐标轴，包括xAxis（x轴）以及yAxis（y轴）。AxisModelAxisModel通过extend方法扩展自Component Model，重写了init、mergeOption等方法，并使用AxisModelCreator分别创建xAxisModel以及yAxisModelCartesianAxisViewCartesianAxisView通过extend方法扩展自AxisView，重写了render方法，定
2021-11-17 13:36:36
354
原创 我的学习笔记11.10
2021SC@SDUSC坐标轴配置xAxis：直角坐标系 grid 中的 x 轴。xAxis.show：是否显示 x 轴。缺省为true。xAxis.gridIndex：x 轴所在的 grid 的索引，默认位于第一个 grid。缺省值为0。xAxis.position ：x 轴的位置。可选：'top''bottom'默认 grid 中的第一个 x 轴在 grid 的下方（'bottom'），第二个 x 轴视第一个 x 轴的位置放在另一侧。xAxis.offset ：X ..
2021-11-10 14:42:18
827
原创 我的学习笔记11.3
2021SC@SDUSCAxisPointer.jsAxisPointer为echarts中的坐标指示器，包括直角坐标以及极坐标等。axisPointer.js文件中注册了axisPointer对外api，主要代码如下：echarts.registerAction({ type: 'updateAxisPointer', event: 'updateAxisPointer', update: ':updateAxisPointer'}, axisTrigger);
2021-11-03 13:19:56
300
原创 我的学习笔记10.27
2021SC@SDUSCecharts中的Component是除Series外的其他配置项，有title（图标标题）、legend（图例组件）、AxisPointer（坐标轴指示器）、坐标系以及坐标轴等。用户通过传递option对象来设置相应的Component内容。在echarts中，采用了Model以及View的架构来管理Component：Model：model/Component.js 管理Component数据； View：view/Component.js 负责渲染Compone
2021-10-27 19:39:08
169
原创 我的学习笔记10.20
2021SC@SDUSCsetOption()方法echarts通过setOption()方法，使用用户指定的option进行图表的渲染。echarts中有一系列方法来实现这一功能。OptionManagerOptionManager为option管理器，对option进行了管理与处理，定义了setOption、mountOption等方法，包括对原生option的处理，原生option格式如下：var option = { baseOption: { ti
2021-10-20 19:05:40
496
原创 我的学习笔记10.13
2021SC@SDUSCecharts如何实现图表绘制例：用户使用echarts实现绘制折线图的代码const echartsInstance = echarts.init(document.getElementById("main"))const option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },...
2021-10-13 19:24:44
231
原创 我的学习笔记10.6
2021SC@SDUSC由于echarts是依赖矢量图形库zrender进行实现的，所以要解读echarts源码，首先需要对于zrender有大致的了解。zrender是canvas的一个类库，也就是说zrender是基于canvas实现的。github网址：GitHub - ecomfe/zrender: A lightweight graphic library providing 2d draw for Apache ECharts文件夹：animation 动画有关；co
2021-10-07 18:10:35
271
原创 我的学习笔记9.30
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图
2021-09-30 09:04:29
101
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人