CN110286905A - 一种基于Echarts的数据展示方法 - Google Patents

Abstract

本发明涉及一种基于Echarts的数据展示方法，涉及数据可视化技术领域。本发明给出了一种基于Echarts的数据展示方法，尤其是一种悬浮提示框数据展示方法，能根据用户需求个性化定制，满足不同场景需求。Echarts作为数据可视化领域的佼佼者，在功能上很大程度上满足了当前可视化需，但是在数据展示方面依然不够灵活。由于Echarts是基于HTML5的Canvas开发的，因此本发明选用了同样是操作Canvas的js库CreateJS搭配方法实现一种用于Echarts实例的数据展示框，能够实现数据的灵活展示。

Description

一种基于Echarts的数据展示方法

技术领域

本发明涉及神经信号处理技术领域，具体涉及一种基于Echarts的数据展示方法。

背景技术

近年来，数据可视化技术作为高新技术的一种，在大数据时代下显得尤为重要，现已被应用于各领域及场景的数据显示。Echarts作为数据可视化技术的一种被许多前端开发人员作为数据展示的一种技术选型，Echarts对绝大多数的功能及样式进行了严格的封装，不能满足部分个性需求的要求，其中作为数据展示作用的悬浮提示框不能满足大数据的多样化展示场景需要，数据的展示方式不够灵活，存在很不友好的用户体验。

发明内容

(一)要解决的技术问题

本发明要解决的技术问题是：如何实现一种基于Echarts实例的灵活数据展示方法。

(二)技术方案

为了解决上述技术问题，本发明提供了一种基于Echarts的数据展示方法，包括以下步骤：

步骤一、数据展示，具体包括：

步骤1.1、自定义提示框tooltip的基本配置属性，包括标识、引导线的颜色、引导线的默认动画时间、引导线的默认长度、提示文字默认配置动画时间、文字内容、提示文字颜色、提示文字与边框间的距离、提示文字宽度、提示文字高度、背景颜色；

步骤1.2、计算tooltip浮层位置及尺寸

先定义一个方法getPosOrSize用来计算tooltip浮层位置及尺寸，其参数为type、point；type决定计算提示框的尺寸还是显示位置；point是当type为‘size’时从echarts地图里传来的当前鼠标的位置；

计算位置和尺寸所需的公共数据计算如下：

约定引导线根据勾股定理计算提示框tooltip的宽度w和高度h；计算tooltip浮层尺寸具体实现如下：

当传入的参数type为‘size’，通过计算改变步骤1.1定义的自定义提示框tooltip的基本配置项config.width＝w,config.height＝h，最后将config中的自定义项传递到页面的容器中，最终来规定提示框的尺寸、字体颜色、线条颜色、背景色这些基本属性；

计算tooltip浮层位置具体实现如下：

当传入的参数type为‘pos’，意味着已经在地图外另一个图层上创建了一个标识为config.ecBoxId的元素作为提示框，而且这时规定必须传入当前鼠标的位置point；首先，先获取到这个元素box为document.getElementById(config.ecBoxId)；由html元素视图的基本属性可拿到box水平方向所占尺寸为box.offsetWidth，在垂直方向锁占尺寸为box.offsetHeight；其次，计算此时鼠标在地图画布的横坐标为point[0]，纵坐标为point[1]；如果此时鼠标所在位置横坐标和tooltip宽度之和大于tooltip在水平方向所占尺寸，则对tooltip水平方向位置进行校准以规避出界问题，tooltip的横坐标x为鼠标横坐标位置减去tooltip的宽再减去5像素做微调；这里规定tooltip朝向为top向上，计算tooltip的纵坐标y为鼠标的纵坐标减去tooltip的高减去5像素做微调，如果小于0，那么赋值为鼠标的纵坐标。

步骤1.3、定义一个类myTooltip来创建一个tooltip

定义一个myTooltip的构造器，并在其实现引导线和提示文字，为引导线和提示文字添加出场动画，该构造器的方法体包括constructor、初始化方法init、tooltip展示的启动方法begin、引导线L1实现方法、引导线L2实现方法、数据绘制方法addText、舞台更新方法update；最终实现myTooltip构造器；

步骤二、场景应用

实例化步骤1.3实现的tooltip构造器，将其附着于Echarts实例之上，实现两种效果：其一，鼠标放在Echarts数据源点时显示个性化定制的tooltip进行数据展示，其二，实现提示框数据自动轮询显示。

鼠标放在Echarts数据源点时显示个性化定制的tooltip进行数据展示具体实现为：

在Echarts实例的tooltip中传入步骤1.2实现的位置获取方法；并在其中实例化步骤1.3定义的tooltip构造器；

提示框自动轮询具体实现如下：

先由echarts根据don获取实例；在定时器中手动触发action，对tooltip展示的启动方法begin中启动的提示框动作做出控制，定时触发鼠标悬浮数据源操作实现自动轮询显示。

优选地，步骤1.1中，先定义一个空对象config，识别该提示框tooltip的标识ecBoxId；设置引导线的颜色lineColor；引导线L1、引导线L2的默认动画时间time，引导线L2的起始位置为引导线L1的结束位置；提示文字默认配置动画时间、文字内容text、颜色color，提示文字与边框间的距离padding、宽度config.width、高度config.height、背景颜色backgroundColor。

优选地，步骤1.2中，引导线L1与水平线呈45度夹角，根据勾股定理，得出引导线L1在水平面的投影长度为x1为config.L1.long*Math.sin(Math.PI/4)；所以得出tooltip的宽w为x1+config.L2.long+config.text.width；高h为x1+config.text.height/2。

优选地，步骤1.3具体包括：

1.3.1在constructor属性中：初始动画时长this.totalTime为0s，创建一个舞台this.stage作为容器来承载将要实现的引导线及数据展示区，再创建一条时间轴用来承载动，画一条线并实例化为shape实例，再为后续的数据展示准备一个容器，然后将它们都添加到舞台上；最后，把将要实现的初始化方法this.init()，开始方法this.begin()和更新舞台方法this.update()指向myTooltip构造器；

1.3.2初始化方法init为：

在这个方法中初始化tooltip初始坐标位置；

1.3.3 tooltip展示的启动方法begin

调用引导线L1实现方法this.L1()、引导线L2实现方法this.L2()和展示数据绘制方法this.addText()。

优选地，步骤1.3具体还包括：

1.3.4引导线L1实现方法：

1、约定tooltip的基本配置为c等于步骤1.1定义好的config；

2、将构造函数的this指向自定义变量me；

3、使用TimelineMax()构造器定义一条时间轴tl，用来控制提示框的动画效果，将给时间轴tl传参，这个参数是一个包含配置设置的key:value键值的对象字面量的对象，从而实例化一条新的时间轴；

4、继承init：初始化方法中的start属性，由此计算出动画的结束位置L1End为[me.start[0]–x1,me.start[1]–x1]，me.start[0]为步骤1.3.2初始化方法中赋值的tooltip的宽度，me.start[1]为tooltip的高度，x1＝c.L1.long*Math.sin(Math.PI/4)；

5、添加一个tl.to()动画到时间轴，传入动画作用的对象、动画持续的时间，tl.to(scale,c.L1.time)在其回调中进行动画更新；

其中，g:步骤1.3.1constructor中的绘图实例；

c():new createjs.Graphics()的简写，创建一个绘图，开始画线；

s():setStrokeStyle()的简写，设定线的样式；

mt():moveTo()的简写，将画笔移动到一点；

lt():lineTo()的简写，画线到一点；

c.lineColor：步骤1.1中规定的线条颜色；

me.start：步骤1.3.2初始化方法中规定的tooltip起始位置坐标；

...me.start：…为js语法，复制一个数组；

然后将L1的动画添加到constructor的时间轴上:

将引导线L1所需时间加到总动画时长中。

优选地，步骤1.3具体还包括：

1.3.5引导线L2实现方法

L2引导线的实现方法与引导线L1的实现方法仅区别于其位置计算。

优选地，步骤1.3具体还包括：

1.3.6数据绘制方法addText：

1、约定tooltip的基本配置为c等于步骤1.1定义好的config；

2、将构造函数的this指向自定义变量me；

3、使用TimelineMax()构造器定义一条时间轴tl；

4、数据展示区的位置计算基于引导线L2的结束位置；

5、添加一个tl.to()动画到时间轴，传入动画作用的对象、动画持续的时间，tl.to(scale,c.L1.time)在其回调中进行动画更新；

创建文本阈并进行样式初始化；

进行数据展示区的左上角定点的坐标位置确定；

文本阈实例化为shape实例；

最后将数据展示区追加到舞台。

优选地，步骤1.3具体还包括：

1.3.7更新舞台方法update

每一步绘制完都将整个舞台进行更新，以实现页面数据的实时变化。

(三)有益效果

本发明给出了一种基于Echarts的数据展示方法，尤其是一种悬浮提示框数据展示方法，能根据用户需求个性化定制，满足不同场景需求。Echarts作为数据可视化领域的佼佼者，在功能上很大程度上满足了当前可视化需，但是在数据展示方面依然不够灵活。由于Echarts是基于HTML5的Canvas开发的，因此本发明选用了同样是操作Canvas的js库CreateJS搭配方法实现一种用于Echarts实例的数据展示框，能够实现数据的灵活展示。

附图说明

图1为本发明的坐标计算示意图；

图2为本发明的动画分解示意图；

图3为本发明的场景应用示意图。

具体实施方式

为使本发明的目的、内容、和优点更加清楚，下面结合附图和实施例，对本发明的具体实施方式作进一步详细描述。

本发明给出了一种基于Echarts的数据展示方法，尤其是一种悬浮提示框数据展示方法，能根据用户需求个性化定制，满足不同场景需求。Echarts作为数据可视化领域的佼佼者，在功能上很大程度上满足了当前可视化需，但是在数据展示方面依然不够灵活。由于Echarts是基于HTML5的Canvas开发的，因此本发明选用了同样是操作Canvas的js库CreateJS(一组模块化代码库和工具套件)搭配方法实现一种用于Echarts实例的数据展示框(下文均用tooltip代替表示)，能够实现数据的灵活展示。

本发明提供的一种基于Echarts的数据展示方法包括两个步骤：数据展示、场景应用；

步骤一、数据展示，具体为：

步骤1.1、自定义提示框tooltip的基本配置属性，包括标识、引导线的颜色、引导线的默认动画时间、引导线的默认长度、提示文字默认配置动画时间、文字内容、提示文字颜色、提示文字与边框间的距离、提示文字宽度、提示文字高度、背景颜色；

本实施例中，先定义一个空对象config，默认识别该提示框tooltip的标识ecBoxId为‘chart-panel’；引导线的颜色lineColor为白色‘#fff’；引导线L1、引导线L2(引导线L2的起始位置为引导线L1的结束位置)的默认动画时间time为0.3s，默认长度long为40px；提示文字默认配置动画时间为time为0.5s，文字内容text为空‘’，颜色color为白色‘#fff'，提示文字与边框间的距离padding为10px，宽度config.width为120px，高度config.height为60px，背景颜色backgroundColor为半透明’rgba(50,50,50，.8)。

步骤1.2、计算tooltip浮层位置及尺寸

先定义一个方法getPosOrSize用来计算tooltip浮层位置及尺寸，其参数为type,point；type决定着计算提示框的尺寸还是显示位置；point是type为‘size’时从echarts地图里传来的当前鼠标的位置；

计算位置和尺寸所需的公共数据计算如下：

约定引导线根据勾股定理计算提示框tooltip的宽度和高度；如图1所示，引导线L1与水平线呈45度夹角，根据勾股定理，可得出引导线L1在水平面的投影长度为x1为config.L1.long*Math.sin(Math.PI/4)；所以得出tooltip的宽w为x1+config.L2.long+config.text.width；高h为x1+config.text.height/2；

计算tooltip浮层尺寸具体实现如下：

当传入的参数type为‘size’。通过计算改变步骤1.1定义的自定义提示框tooltip的基本配置项config.width＝w,config.height＝h。最后将config中的自定义项传递到页面的容器中，即<canvas id＝"tCanvas"width＝"${config.width}"height＝"${config.height}"></canvas>。最终来规定提示框的尺寸、字体颜色、线条颜色、背景色等基本属性。

计算tooltip浮层位置具体实现如下：

当传入的参数type为‘pos’。这意味着已经在地图外另一个图层上创建了一个标识为config.ecBoxId的元素作为提示框(new myTooltip('tCanvas',config))，而且这时规定必须传入当前鼠标的位置point；首先，先获取到这个元素box为document.getElementById(config.ecBoxId)；由html元素视图的基本属性可以拿到box水平方向所占尺寸为box.offsetWidth,在垂直方向锁占尺寸为box.offsetHeight；其次，计算此时鼠标在地图画布的横坐标为point[0],纵坐标为point[1]；如果此时鼠标所在位置横坐标和tooltip宽度之和大于tooltip在水平方向所占尺寸，则对tooltip水平方向位置进行校准以此来规避出界问题，tooltip的横坐标为鼠标横坐标位置减去tooltip的宽再减去5像素做微调(x＝point[0]-w-5)；这里规定tooltip朝向为top向上，计算tooltip的纵坐标为鼠标的纵坐标减去tooltip的高减去5像素做微调(y＝point[1]-h-5)，如果小于0，那么赋值为鼠标的纵坐标(y＝point[1])，如图1所示。

步骤1.3、定义一个类myTooltip来创建一个tooltip

这里定义一个myTooltip的构造器，并在其实现引导线和提示文字，并为引导线和提示文字添加出场动画(如图2)，该构造器的方法体包括constructor，init(初始化方法)，begin(tooltip展示的启动方法)，L1(引导线L1实现方法)，L2(引导线L2实现方法)，addText(数据绘制方法)，update(舞台更新方法)；最终实现的myTooltip构造器如下：

1.3.1 constructor

在constructor属性中：初始动画时长为0s this.totalTime＝0，创建一个舞台this.stage＝new createjs.Stage(id)作为容器来承载将要实现的引导线及数据展示区，再创建一条时间轴用来承载动画this.timeline＝new TimelineMax({repeat:0})，画一条线并实例化为shape实例this.g＝new createjs.Graphics()，this.lineShape＝newcreatejs.Shape(this.g)，再为后续的数据展示准备一个容器this.textShape＝newcreatejs.Shape()，最后将它们都添加到舞台上this.stage.addChild(this.lineShape,this.textShape)。最后，把将下述将要实现的初始化方法this.init()，开始方法this.begin()和更新舞台方法this.update()指向myTooltip构造器。

1.3.2 init-初始化方法为：

在这个方法中初始化tooltip初始坐标位置this.start[0]＝this.config.width，this.start[1]＝this.config.height

1.3.3 begin-tooltip展示的启动方法

这个方法为tooltip展示的启动方法，在这里调用引导线L1实现方法this.L1()、引导线L2实现方法this.L2()和展示数据绘制方法this.addText()。

1.3.4 L1-引导线L1实现方法

1、约定tooltip的基本配置为c等于前面步骤1.1定义好的config。

2、将构造函数的this指向自定义变量me；

3、使用TimelineMax()构造器定义一条时间轴tl(tl＝new TimelineMax())，用来控制提示框的动画效果，将给时间轴tl传参，这个参数是一个包含配置设置的key:value键值的对象字面量的对象，从而实例化一条新的时间轴。

4、继承init-初始化方法中的start属性，由此计算出动画的结束位置L1End为[me.start[0]–x1,me.start[1]–x1]，如图1，me.start[0]为步骤1.3.2初始化方法中赋值的tooltip的宽度，me.start[1]为tooltip的高度，x1＝c.L1.long*Math.sin(Math.PI/4)，同前文不再解释。

5、添加一个tl.to()动画到时间轴，传入动画作用的对象、动画持续的时间：tl.to(scale,c.L1.time)在其回调中进行动画更新:

me.g.c().s(c.lineColor).mt(...me.start).lt(me.start[0]-x,me.start[1]-x)。

其中，g:步骤1.3.1constructor中的绘图实例；

c():new createjs.Graphics()的简写，创建一个绘图，开始画线；

s():setStrokeStyle()的简写，设定线的样式；

mt():moveTo()的简写，将画笔移动到某一点；

lt():lineTo()的简写，画线到某一点；

c.lineColor：步骤1.1中规定的线条颜色；

me.start：步骤1.3.2初始化方法中规定的tooltip起始位置坐标；

...me.start：…为js语法，复制一个数组，避免修改此处影响其他地方；

然后将L1的动画添加到constructor的时间轴上:

this.timeline.add(tl,this.totalTime).

将引导线L1所需时间加到总动画时长中:

this.totalTime+＝c.L1.time。

1.3.5 L2-引导线L2实现方法

L2引导线的实现方法基本同L1，仅区别于其位置计算：me.g.c().s(c.lineColor).mt(...me.start).lt(...me.L1End).lt(me.L1End[0]-c.L2.long,me.L1End[1])，引导线L2的起始位置为引导线L1的结束位置me.L1End。

1.3.6 addText-数据绘制方法

1、约定tooltip的基本配置为c等于前面步骤1.1定义好的config。

2、将构造函数的this指向自定义变量me；

3、使用TimelineMax()构造器定义一条时间轴tl。

4、数据展示区的位置计算基于引导线L2的结束位置：

L2End＝[me.L1End[0]+c.L2.long,me.L1End[1]]。

5、添加一个tl.to()动画到时间轴，传入动画作用的对象，动画持续的时间，tl.to(scale,c.L1.time)在其回调中进行动画更新：

me.g.c().s(c.lineColor).mt(...me.start).lt(...me.L1End).lt(...L2End)，参数解释同步骤1.3.4。

创建文本阈并进行样式初始化：

new createjs.Text(c.text.text,c.text.font,c.text.color)。

进行数据展示区的左上角定点的坐标位置确定，横坐标为：

me.text.x＝x+c.text.padding[0]，(x＝L2End[0]-c.text.width)，

纵坐标为：

me.text.y＝L2End[1]-c.text.height/2+c.text.padding[1]。

文本阈实例化为shape实例：

me.textShape.graphics.c().f(c.text.backgroundColor).rr(x,L2End[1]-c.text.height/2,c.text.width,c.text.height,5)。

最后将数据展示区追加到舞台：

me.stage.addChild(me.text)。

1.3.7update-更新舞台方法

每一步绘制完都要将整个舞台进行更新this.stage.update()，才能实现页面数据的实时变化。

步骤二、场景应用

实例化步骤1.3实现的tooltip构造器，将其附着于Echarts实例之上(如图3)，实现两种效果：其一，鼠标放在Echarts数据源点时显示个性化定制的tooltip进行数据展示，其二，实现提示框数据自动轮询显示。

鼠标放在Echarts数据源点时显示个性化定制的tooltip进行数据展示具体实现如下：

在Echarts实例的tooltip中传入上述步骤1.2实现的位置获取方法：

myChart.option.tooltip.position＝(pos)＝>return getPosOrSize('pos',pos)；

并在其中实例化步骤1.3定义的tooltip构造器：new myTooltip('tCanvas',config)，其中'tCanvas'为自定义的dom元素的id(<canvas id＝"tCanvas"></canvas>)

提示框自动轮询具体实现如下：

1、先由echarts根据don获取实例：EC＝echarts.getInstanceByDom(document.getElementById("chart-panel"))

2、在定时器中手动触发action，对步骤1.3.3中启动的提示框动作做出控制，定时触发鼠标悬浮数据源操作实现自动轮询显示setInterval(_＝>{EC.dispatchAction({})，3000}。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明技术原理的前提下，还可以做出若干改进和变形，这些改进和变形也应视为本发明的保护范围。

Claims (8)

1.一种基于Echarts的数据展示方法，其特征在于，包括以下步骤：

步骤一、数据展示，具体包括：

步骤1.1、自定义提示框tooltip的基本配置属性，包括标识、引导线的颜色、引导线的默认动画时间、引导线的默认长度、提示文字默认配置动画时间、文字内容、提示文字颜色、提示文字与边框间的距离、提示文字宽度、提示文字高度、背景颜色；

步骤1.2、计算tooltip浮层位置及尺寸

先定义一个方法getPosOrSize用来计算tooltip浮层位置及尺寸，其参数为type、point；type决定计算提示框的尺寸还是显示位置；point是当type为‘size’时从echarts地图里传来的当前鼠标的位置；

计算位置和尺寸所需的公共数据计算如下：

约定引导线根据勾股定理计算提示框tooltip的宽度w和高度h；计算tooltip浮层尺寸具体实现如下：

当传入的参数type为‘size’，通过计算改变步骤1.1定义的自定义提示框tooltip的基本配置项config.width＝w,config.height＝h，最后将config中的自定义项传递到页面的容器中，最终来规定提示框的尺寸、字体颜色、线条颜色、背景色这些基本属性；

计算tooltip浮层位置具体实现如下：

当传入的参数type为‘pos’，意味着已经在地图外另一个图层上创建了一个标识为config.ecBoxId的元素作为提示框，而且这时规定必须传入当前鼠标的位置point；首先，先获取到这个元素box为document.getElementById(config.ecBoxId)；由html元素视图的基本属性可拿到box水平方向所占尺寸为box.offsetWidth，在垂直方向锁占尺寸为box.offsetHeight；其次，计算此时鼠标在地图画布的横坐标为point[0]，纵坐标为point[1]；如果此时鼠标所在位置横坐标和tooltip宽度之和大于tooltip在水平方向所占尺寸，则对tooltip水平方向位置进行校准以规避出界问题，tooltip的横坐标x为鼠标横坐标位置减去tooltip的宽再减去5像素做微调；这里规定tooltip朝向为top向上，计算tooltip的纵坐标y为鼠标的纵坐标减去tooltip的高减去5像素做微调，如果小于0，那么赋值为鼠标的纵坐标；

步骤1.3、定义一个类myTooltip来创建一个tooltip

定义一个myTooltip的构造器，并在其实现引导线和提示文字，为引导线和提示文字添加出场动画，该构造器的方法体包括constructor、初始化方法init、tooltip展示的启动方法begin、引导线L1实现方法、引导线L2实现方法、数据绘制方法addText、舞台更新方法update；最终实现myTooltip构造器；

步骤二、场景应用

实例化步骤1.3实现的tooltip构造器，将其附着于Echarts实例之上，实现两种效果：其一，鼠标放在Echarts数据源点时显示个性化定制的tooltip进行数据展示，其二，实现提示框数据自动轮询显示；

鼠标放在Echarts数据源点时显示个性化定制的tooltip进行数据展示具体实现为：

在Echarts实例的tooltip中传入步骤1.2实现的位置获取方法；并在其中实例化步骤1.3定义的tooltip构造器；

提示框自动轮询具体实现如下：

先由echarts根据don获取实例；在定时器中手动触发action，对tooltip展示的启动方法begin中启动的提示框动作做出控制，定时触发鼠标悬浮数据源操作实现自动轮询显示。

2.如权利要求1所述的方法，其特征在于，步骤1.1中，先定义一个空对象config，识别该提示框tooltip的标识ecBoxId；设置引导线的颜色lineColor；引导线L1、引导线L2的默认动画时间time，引导线L2的起始位置为引导线L1的结束位置；提示文字默认配置动画时间、文字内容text、颜色color，提示文字与边框间的距离padding、宽度config.width、高度config.height、背景颜色backgroundColor。

3.如权利要求2所述的方法，其特征在于，步骤1.2中，引导线L1与水平线呈45度夹角，根据勾股定理，得出引导线L1在水平面的投影长度为x1为config.L1.long*Math.sin(Math.PI/4)；所以得出tooltip的宽w为x1+config.L2.long+config.text.width；高h为x1+config.text.height/2。

4.如权利要求3所述的方法，其特征在于，步骤1.3具体包括：

1.3.1 在constructor属性中：初始动画时长this.totalTime为0s，创建一个舞台this.stage作为容器来承载将要实现的引导线及数据展示区，再创建一条时间轴用来承载动，画一条线并实例化为shape实例，再为后续的数据展示准备一个容器，然后将它们都添加到舞台上；最后，把将要实现的初始化方法this.init()，开始方法this.begin()和更新舞台方法this.update()指向myTooltip构造器；

1.3.2 初始化方法init为：

在这个方法中初始化tooltip初始坐标位置；

1.3.3 tooltip展示的启动方法begin

调用引导线L1实现方法this.L1()、引导线L2实现方法this.L2()和展示数据绘制方法this.addText()。

5.如权利要求4所述的方法，其特征在于，步骤1.3具体还包括：

1.3.4 引导线L1实现方法：

1、约定tooltip的基本配置为c等于步骤1.1定义好的config；

2、将构造函数的this指向自定义变量me；

3、使用TimelineMax()构造器定义一条时间轴tl，用来控制提示框的动画效果，将给时间轴tl传参，这个参数是一个包含配置设置的key:value键值的对象字面量的对象，从而实例化一条新的时间轴；

4、继承init：初始化方法中的start属性，由此计算出动画的结束位置L1End为[me.start[0]–x1,me.start[1]–x1]，me.start[0]为步骤1.3.2初始化方法中赋值的tooltip的宽度，me.start[1]为tooltip的高度，x1＝c.L1.long*Math.sin(Math.PI/4)；

5、添加一个tl.to()动画到时间轴，传入动画作用的对象、动画持续的时间，tl.to(scale,c.L1.time)在其回调中进行动画更新；

其中，g:步骤1.3.1constructor中的绘图实例；

c():new createjs.Graphics()的简写，创建一个绘图，开始画线；

s():setStrokeStyle()的简写，设定线的样式；

mt():moveTo()的简写，将画笔移动到一点；

lt():lineTo()的简写，画线到一点；

c.lineColor：步骤1.1中规定的线条颜色；

me.start：步骤1.3.2初始化方法中规定的tooltip起始位置坐标；

...me.start：…为js语法，复制一个数组；

然后将L1的动画添加到constructor的时间轴上:

将引导线L1所需时间加到总动画时长中。

6.如权利要求5所述的方法，其特征在于，步骤1.3具体还包括：

1.3.5 引导线L2实现方法

L2引导线的实现方法与引导线L1的实现方法仅区别于其位置计算。

7.如权利要求6所述的方法，其特征在于，步骤1.3具体还包括：

1.3.6 数据绘制方法addText：

1、约定tooltip的基本配置为c等于步骤1.1定义好的config；

2、将构造函数的this指向自定义变量me；

3、使用TimelineMax()构造器定义一条时间轴tl；

4、数据展示区的位置计算基于引导线L2的结束位置；

5、添加一个tl.to()动画到时间轴，传入动画作用的对象、动画持续的时间，tl.to(scale,c.L1.time)在其回调中进行动画更新；

创建文本阈并进行样式初始化；

进行数据展示区的左上角定点的坐标位置确定；

文本阈实例化为shape实例；

最后将数据展示区追加到舞台。

8.如权利要求7所述的方法，其特征在于，步骤1.3具体还包括：

1.3.7 更新舞台方法update

每一步绘制完都将整个舞台进行更新，以实现页面数据的实时变化。