在分析完echarts Component渲染过程之后,我们便开始进行echarts Series渲染过程的分析。
希望和小伙伴们一起进步呀!!加油!!
前言
在这篇博文中我们将探讨line(折线图)、bar(柱状图)、pie(饼图)等Series。
用户通过传递option对象来设置相应的Series。
在这部分中echarts采用了Model以及View的架构来管理Series:
- Model:model/Series.js 管理Series数据。
在分析完echarts Component渲染过程之后,我们便开始进行echarts Series渲染过程的分析。
希望和小伙伴们一起进步呀!!加油!!
在这篇博文中我们将探讨line(折线图)、bar(柱状图)、pie(饼图)等Series。
用户通过传递option对象来设置相应的Series。
在这部分中echarts采用了Model以及View的架构来管理Series:
在本篇博文中,我们将继续Component源码解读,我将主要介绍各Component的渲染过程以及其使用的zrender graphic。希望和小伙伴们一起进步呀!!加油!!
echarts对Component的定义呢,可以认为是除Series外的其他配置项,在这篇博文中我们将探讨datazoom(区域缩放)、visualMap(视图映射)、tooltip(提示框组件)、toolbox(工具栏)、brush(区域选择组件)、timeline(时间轴)、graphic(原生图形组件)、dataset(数据集)、marker(包括markPoint(图标标注)、markLine(图表标线)、markArea(图表标域))这些Component。
用户通过传递option对象来设置相应的Component。
分析完echarts简单的结构之后,我们就进入到了Component源码解读,在这篇博文中,我将主要介绍各Component的渲染过程以及其使用的zrender graphic。希望和小伙伴们一起进步呀!!加油!!
echarts对Component的定义呢,可以认为是除Series外的其他配置项,在这篇博文中我们将探讨title(图标标题)、legend(图例组件)、AxisPointer(坐标轴指示器)、坐标系以及坐标轴这些Component。
用户通过传递option对象来设置相应的Component。
在这部分中echarts采用了Model以及View的架构来管理Component:
继解读完zrender源码之后,我们便开始进入echarts源码解读,echarts是在zrender基础上进行开发的,在这篇博文中,我将会分析在使用echarts时,echarts的渲染过程,接下来系列博文中我将从echarts的Component以及View进行解读echarts如何实现图表绘制。
希望能够一起努力学习呀!!加油!!
我们首先来看一个简单的echarts折线图Demo:
1 | const echartsInstance = echarts.init(document.getElementById("main")) |
2019年首次发博,不知道大家有没有出去过520呢??我反正是脚伤了!哭
今天7月份我将入职腾讯,我的工作导师于3月份让我学习可视化,前段时间一直在忙毕设,也就耽搁下来了。
在echarts源码解读系列文章中,我将会记录我学习echarts源码时的过程,并对echarts的基本实现进行大致的解读,写博客是为了能够让自己对echarts有更好的了解,也希望能够通过博客帮助到需要学习解读echarts源码的小伙伴们,一起加油吧!!!
由于echarts是基于zrender进行实现的,所以要解读echarts源码,首先要对zrender有大致的了解,在这篇文章中,我将对zrender的整体结构进行大致的解读。