我的学习笔记10.27

最新推荐文章于 2023-01-06 11:38:43 发布

FreezeYM

最新推荐文章于 2023-01-06 11:38:43 发布

阅读量184

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_55691400/article/details/120999701

版权

本文介绍了Echarts中的Component，包括Title（图标标题）和Legend（图例组件）的详细内容。Title组件的Model和View层分别在model/Component.js和view/Component.js中管理，而Legend分为plain和scroll两种类型，提供了用户交互功能。

摘要由CSDN通过智能技术生成

2021SC@SDUSC

echarts中的Component是除Series外的其他配置项，有title（图标标题）、legend（图例组件）、AxisPointer（坐标轴指示器）、坐标系以及坐标轴等。用户通过传递option对象来设置相应的Component内容。

在echarts中，采用了Model以及View的架构来管理Component：

Model：model/Component.js 管理Component数据；
View：view/Component.js 负责渲染Component视图。

Model层
model/Component.js。Component扩展自Model（Model是Echarts中最基本的元素，其定义了mergeOption等方法，混合了LineStyle、AraeStyle、ItemStyle以及TextStyle），重写了init及mergeOption等方法，定义了mergeDefaultAndTheme、getDefaultOption等方法以及defaultOption、componentIndex等属性。

View层
view/Component.js。Component中定义了group等属性以及init、render、dispose等方法。

Title（图标标题）

title是用户在使用echarts图表时设置的标题组件

title: {
    left: 'center',
    text: '例子Title',
}

title文件中Model部分通过extendComponentModel方法扩展自Component Model，重写了defaultOption属性，用于设置title的默认option。

View部分通过extendComponentView方法扩展Component View，重写了render方法对title进行渲染，主要代码如下：

render: function (titleModel, ecModel, api) {
    ...
    // 通过zrender的Text图形新建文本元素
    var textEl = new graphic.Text({
        style: graphic.setTextStyle({}, textStyleModel, {
            text: titleModel.get('text'),
            textFill: textStyleModel.getTextColor()
        }, {disableBox: true}),
        z2: 10
    });

    var textRect = textEl.getBoundingRect();

    var subText = titleModel.get('subtext');
    // 创建subText元素
    var subTextEl = new