- 博客(14)
- 收藏
- 关注
原创 我的学习笔记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关注的人