xieziyu / ngx-echarts Goto Github PK

我想做到折线图点击有折线的都能得到event，要怎么做

执行点击事件后 console.log 发现模型发生了变化,但是视图没有改变
让其他模型再次变化后(例如随意在另一个绑定了ngModel的input里输入"123"),视图才发生了变化

Hello,

I have the following error when I try to display a pie chart :

PieChartComponent.html:1 ERROR ReferenceError: echarts is not defined 
at angular-echarts.directive.js:30
at ZoneDelegate.invoke (zone.js:392)
at Zone.run (zone.js:142)
at NgZone.runOutsideAngular (core.es5.js:3844)
at AngularEchartsDirective.createChart (angular-echarts.directive.js:30)
at AngularEchartsDirective.onOptionsChange (angular-echarts.directive.js:65)
at AngularEchartsDirective.ngOnChanges (angular-echarts.directive.js:50)
at checkAndUpdateDirectiveInline (core.es5.js:10831)
at checkAndUpdateNodeInline (core.es5.js:12330)
at checkAndUpdateNode (core.es5.js:12269)

I followed these steps for install:

• add npm packages in package.json

    "echarts": "^3.7.2",
    "ngx-echarts": "^1.2.4"
  

• include this lines in my webpack.common.js file :

  plugins: [
    new webpack.ProvidePlugin({
      echarts: "echarts"
    })
  ]
  

• include this line in my shared module:
  import { AngularEchartsModule } from 'ngx-echarts';

• call in my shared component:
  <div echarts [options]="chartOption"></div>

I'm using angular 4.2.6

Thanks in advance

如何清除缓存（饼图为例，最新数据为空时，保留上次图表内容）
1)setOption以及将对应数据置空，仍然不能清除缓存；

这个怎么销毁一个表？好像dispose不行。。。如果在切换option设置的时候，option = {}的话好像页面上的图表没有改变，还是切换前的设置。。。

core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'div'. ("

请帮忙看下。
步骤:

1.npm install echarts --save
npm install ngx-echarts --save

2. "../node_modules/echarts/dist/echarts.min.js"

import { NgxEchartsModule } from 'ngx-echarts';

@NgModule({
imports: [
...,
NgxEchartsModule
],
...
})
export class AppModule { }

4. Simple example:

html:

When I run the page with the chart, it gives me this error:

(I'm importing the script on angular-cli)

Any ideas?

请不知道你这个插件可以在angular上面做关于地图统计的图表吗？ 比如说引入**地图，或者某个省份的地图。

@xieziyu
Thanks for your contribution.
I saw there is an attribute named dataset. It can dynamic update the series.
Then, I need it also can dynamic update xAxis.data, because my date is real-time who is come from socket data.
Could you help me?

使用ng2-admin 引入 echarts 不报错，也不显示

Hello,
The navigation failed when i try to navigate after click on chart

public chartClicked(e: any): void { this.router.navigate(['/page/home']); }

<div echarts [options]="optionPieWhite" class="demo-chart-2" (chartClick)="chartClicked($event)"></div>

This is an issue from ngx-echarts or angular 4 ?

Thank for your response.

how add a change event?

我想在tabset组件中使用二次封装的折线图组件，但是经常报 Can't get dom width or height 警告，但是所有折线图还是会被渲染出来。当前的tab(页面加载时显示的tab)中的折线图宽高正常，但是切换到其余tab中的折线图，折线图宽度只有 100px,我设置的宽度均为 100%（为了自适应），不知道大佬有没有遇到过这个问题?有没有什么解决办法
我个人觉得可能是tabset动态插入模板的时候，app-total-line 组件无法获取到父容器的宽高导致的。

部分代码如下：

tabset

# app-tabset是一个tabset组件
# app-tab表示tab页
# app-total-line 是对echarts指令的二次封装的组件
<div class="line-tab">
    <app-tabset (onSelect)="onTabSelect($event)">
        <app-tab title="全部">
            <app-total-line></app-total-line>
        </app-tab>
        <app-tab title="一个月" [active]="true">
            <app-total-line></app-total-line>
        </app-tab>
        <app-tab title="24小时">
            <app-total-line></app-total-line>
        </app-tab>
    </app-tabset>
</div>

**tabset**组件模板

<nav class="tabset-style">
	<ul class="tabset-header" [ngClass]="customNavClass">
		<li role="presentation" *ngFor="let tab of tabs" [class.active]="tab.active"
			[class.disabled]="tab.disabled" (click)="changeActiveTab(tab)"
		>
			<span [appTabTransclude]="tab.headingTemplate">{{ tab.title }}</span>
		</li>
	</ul>
</nav>
<div class="tabs-container" [ngClass]="customTabsClass" [@.disabled]="!isAnimate">
	<div class="tabset-content">
		<ng-content></ng-content>
	</div>
</div>

app-total-line 组件

@Component({
    selector: 'app-total-line',
    template: `
        <div class="total-line">
            <app-line-echarts [option]="chartOption"></app-line-echarts>
        </div>
    `,
    styles: [`
        :host {
            width: 100%;
            height: 100%;
        }
    `]
})
export class TotalLineComponent {
    chartOption: ILineChart = {
        xAxisData: ['10-10', '10-11', '10-12', '10-13', '10-14', '10-15',
        '10-16', '10-17', '10-18', '10-19', '10-20', '10-21',
        '11-10', '11-11', '11-12', '11-13', '11-14', '11-15',
        '11-16', '11-17', '11-18', '11-19', '11-20', '11-21'],
        yAxisData1: [100, 123, 56, 12, 199,
            100, 123, 56, 12, 199,
            100, 123, 56, 12, 199,
            100, 123, 56, 12, 199,
            137, 7, 12, 342],
        yAxisData2: [137, 7, 12, 342, 341,
            137, 7, 12, 342, 341,
            137, 7, 12, 342, 341,
            137, 7, 12, 342, 341,
            143, 323, 112, 2]
    };
}

app-line-echarts 是对 echarts 指令的二次封装

@Component({
    selector: 'app-line-echarts',
    template: `
        <div class="line-echarts" echarts [options]="chartOption" (chartInit)="onChartInit($event)"
            [ngStyle]="{'width': chartWidth, 'height': chartHeight}"></div>
    `
})
export class LineChartComponent implements OnInit, OnChanges {
    chartInstance: any;
    private chartWidth: number | string = '100%';   // 宽度给的是100%，没有给固定值
    private chartHeight: number | string = '500px'; // 已经默认的给了一个高度500px
    @Input() option: ILineChart;
    @Input() showDataZoom = true;

    /**
     * 设置canvas的宽度
     * 支持数字和字符 或者 是 字符串带单位的形式
     */
    @Input()
    set width(val) {
        if (typeof val === 'number') {
           this.chartWidth = String(val) + 'px';
        } else if (typeof val === 'string' && (/^\d*$/g).test(val)) {
            this.chartWidth = val + 'px';
        } else {
            this.chartWidth = val;
        }
    }
    get width() {
        return this.chartWidth;
    }

    @Input()
    set height(val) {
        if (typeof val === 'number') {
           this.chartHeight = String(val) + 'px';
        } else if (typeof val === 'string' && (/^\d*$/g).test(val)) {
            this.chartHeight = val + 'px';
        } else {
            this.chartHeight = val;
        }
    }
    get height() {
        return this.chartHeight;
    }

    chartOption: any;

    constructor() {}
	
    onChartInit(ec) {
        this.chartInstance = ec;
    }
    ngOnInit(): void {
    }

    ngOnChanges(changes: SimpleChanges) {
 
        this._updateOption();
    }
	
	private _updateOption() {
	  // ...
	}
}	

What am I doing wrong here?

Ignore all the color variables

the chart shows an empty chart, no labels, no grids, no lines. Just a x and y axis line
like this
|_______

My pie chart works fine

<div echarts [options]="graphOptions" class="echart"></div>

            this.graphOptions = {
              backgroundColor: echarts.bg,
              color: [colors.danger, colors.primary, colors.info],
              xAxis: [
                {
                  type: 'time',
                  axisLine: {
                    lineStyle: {
                      color: echarts.axisLineColor,
                    },
                  },
                  axisLabel: {
                    textStyle: {
                      color: echarts.textColor,
                    },
                  },
                },
              ],
              yAxis: [
                {
                  type: 'value',
                  axisLine: {
                    lineStyle: {
                      color: echarts.axisLineColor,
                    },
                  },
                  splitLine: {
                    lineStyle: {
                      color: echarts.splitLineColor,
                    },
                  },
                  axisLabel: {
                    textStyle: {
                      color: echarts.textColor,
                    },
                  },
                },
              ],
              series: [
                {
                  name: 'Line 1',
                  type: 'line',
                  data: [
                    { name: "11/11/12", value: 1.1},
                    { name: "11/11/13", value: 2.1},
                    { name: "11/11/14", value: 2.1},
                    { name: "11/11/15", value: 1.1},
                    { name: "11/11/16", value: 1.1}
                  ]
                }
              ]
            };

你好，X轴的data好像不能赋值，我看dataset只是对series的值做操作，但是如果要做实时的曲线的，应该怎么实现的？谢谢了

点击饼图某一块时，重新设置options，出现startAngel of undefined并缺少某一块。但使用搜索或其他方式调用同样方法更新options却无此现象。

试了无数，唯一个可以真正工作的 Echarts Ng2 封装，1024 个赞。

As soon as a chart is initialized, even if it contains no data otherwise, it uses CPU resources even though it seems that if it's doing nothing, it shouldn't. How high the CPU usage is depends on the application but there always seems to be some.

This includes the ngx-echarts demo page, where I get 96% CPU usage from one Chrome process (as opposed to 0 everywhere on the Baidu echarts demo page).

Looking at the performance in Chrome's DevTools it seems a timer is triggered every 18ms or so that leads to various function calls.

Is this expected behavior? It doesn't seem so given the difference between the ngx-echarts and Baidu echarts demo pages, and it is causing problems on slower computers.

when doing a rollup, it gives me.

'AngularEchartsModule' is not exported by node_modules/ngx-echarts/bundles/ngx-echarts.umd.js

my rollup.config.js is

import angular from 'rollup-plugin-angular';
import typescript from 'rollup-plugin-typescript2';
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
import sass from 'node-sass';
import CleanCSS from 'clean-css';
import {
  minify as minifyHtml
} from 'html-minifier';
import uglify from 'rollup-plugin-uglify';

const cssmin = new CleanCSS();
const htmlminOpts = {
  caseSensitive: true,
};

export default {
  entry: 'src/main.ts',
  format: 'iife',
  dest: 'dist/bundle.js',
  plugins: [
    commonjs({
      include: 'node_modules/rxjs/**',
    }),
    angular({
      preprocessors: {
        template: template => minifyHtml(template, {
          collapseWhitespace: true,
          removeComments: true
        }),
        styleUrls: scss => {
          const css = sass.renderSync({
            data: scss
          }).css;
          return cssmin.minify(css).styles;
        }
      }
    }),
    typescript(),
    nodeResolve({
      jsnext: true,
      main: true
    }),
    uglify({
      toplevel: true,
      compress: {
        dead_code: true,
        sequences: true,
        unused: true,
        if_return: true,
        drop_console: true,
        drop_debugger: true,
        passes: 2
      }
    })
  ]
}

I've tried all sorts of dataZoom properties but I can not get the section selector to show up at all.

My graph is a line graph and has a full days worth of data being displayed. When putting this inside the options object, it does not work.

"dataZoom": [
      {
        "show": true,
        "realtime": true,
        "start": 65,
        "end": 100
      }
    ],

I've tried multiple combinations of slider / inside types and nothing.

Does dataZoom work with a dataset graph? Has anyone else got dataZoom to work with a dataset?

Hi,
how to resize chart?
thanks

Angular Version:5.0

errorInfo:

code:
我在网上找了一份**地图数据 this.es.registerMap('CHINA', geoJson); 不知道是否和这个有关

markLine:[ data: [ [ { name: '北京' }, { name: '上海', value: 95 } ], // [{ name: '北京', x: 40, y: 100 }, { name: '包头', x: 140, y: 100 }], ], geoCoord: { '上海': [121.4648, 31.2891], '北京': [116.4551, 40.2539], }, ] ]

如果能给出这样的列子,那就更好了

请问这个项目是基于angular 2 还是angular 4的？
我的一个项目是angular 2的 可以用吗？

单个实例里多个grid，非得点一下restore还原按钮才能 实现一起缩放
let dataZoomArr = []; let xAxisArr=[]; let yAxisArr=[]; dataArr.forEach((value, index) => { dataZoomArr.push(index); xAxisArr.push({ gridIndex: index }); yAxisArr.push({ name: _this.sensorUnit, gridIndex: index, axisLine: { 'onZero': false }, }) }) console.log(dataZoomArr, '***'); this.updatetimeFreqChart = { dataZoom: [{ show: true, type: 'inside', xAxisIndex: dataZoomArr }, { show: true, type: 'slider', xAxisIndex: dataZoomArr }], xAxis: xAxisArr, yAxis: yAxisArr, grid: function () { let arr = []; let len = dataArr.length let _height = (520 - len * 40) / len; for (let i = 0; i < dataArr.length; i++) { let model = { height: _height, y: i * _height + 40 + 50 * i, } arr.push(model) } return arr; }(), series: function () { let arr = []; for (let i = 0; i < dataArr.length; i++) { let model = { name: '传感器名',//传感器名 type: 'line', xAxisIndex: i, yAxisIndex: i, data: dataArr[i], hoverAnimation: false, smooth: true, symbol: 'none', markLine: { silent: true, data: [], lineStyle: { normal: { color: '#c23531' } } }, lineStyle: { normal: { width: 0.5 } }, }; arr.push(model) } return arr; }() }

例如pieselectchanged等等的功能，這是需要用於當selectedmode = single或multiple之用，感謝。

如题，option 是一模一样的配置，数据能显示但是省份名不出来

没错大佬又是我。。。我想对常用的一些图形进行再一次封装，例如,对玫瑰图进行封装

const randomNumber = function(max: number = 400, min: number = 55): number {
    return Math.floor(Math.random() * (max - min) + min);
};

@Component({
    selector: 'app-rose-echarts',
    template: `
        <div class="rose-echarts" echarts [options]="chartOption" (chartInit)="onChartInit($event)"></div>
    `,
    styles: [`
        .rose-echarts {
            height: 600px;
        }
    `]
})
export class RoseChartComponent implements OnInit, OnChanges {
    chartInstance: any;

    @Input() title = ''; // 图的标题
    @Input() showLegend = false; // 是否显示图例
    @Input() roseType: RoseType = 'area'; // 默认面积模式
    @Input() name: string; // 图的名称
    @Input() isSortable = false; // 是否对取回的数据进行排序操作
    // @Input() chartData: any; // 图的数据
    chartData = [
        {name: '视频', value: randomNumber() },
        {name: '游戏', value: randomNumber() },
        {name: '音乐', value: randomNumber() },
        {name: '新闻', value: randomNumber() },
        {name: '阅读', value: randomNumber() },
        {name: '书刊', value: randomNumber() },
        {name: '体育', value: randomNumber() },
        {name: '漫画', value: randomNumber() },
        {name: '直播', value: randomNumber() },
        {name: '其它', value: randomNumber() }
    ]; // 数据


    chartOption: any = {
        title: {
            text: this.title
        },
        tooltip: {
             trigger: 'item'
        },
        legend: {
            show: this.showLegend
        },
        calculable : true,
        series: [
            {
                name: this.name,
                type: 'pie',
                radius: [20, 110],
                center: ['25%', 200],
                roseType: this.roseType,
                // itemStyle: []、
                data: this.isSortable ? this.chartData.sort((a, b) => a.value - b.value) : this.chartData
            }
        ]
    };

    constructor() {}

    ngOnInit(): void {
        console.log('11', this.chartOption);
    }
}

这里有一些输入属性，html为

<app-rose-echarts [isSortable]="true" [name]="'网站类型TOP10'"></app-rose-echarts>

但是我发现echarts在这些输入属性绑定之前就已经被渲染了，所以这些输入属性没有绑定到子组件中去。于是我使用了 OnChanges 钩子

export class RoseChartComponent implements OnInit, OnChanges {
    chartInstance: any;

    ngOnInit(): void {
        console.log('11', this.chartOption);
    }
    // ...
    ngOnChanges(changes: SimpleChanges) {
        console.log('changes', changes);
        if (changes.name) {
            this.chartOption.title.text = String(changes.name.currentValue);
        }
    }
}

这样可以实现绑定，但是这种对每个属性进行分别判断设置的方式，我觉得不太优雅，扩展性也不强，想请问一下，有没有别的方式对ngx-echarts进行再次的封装?

用angular-cli组装的工程中，
npm顺利安装了"echarts": "^3.7.1", 以及 "ngx-echarts": "^1.2.4",
也在.angular-cli.json中添加了引用：
"scripts": [
"../../node_modules/echarts/dist/echarts.min.js"
],
然后在moudle中也顺利引入了import { AngularEchartsModule } from 'ngx-echarts';

但是编译的时候报了两个警告：
WARNING in ./~/_@[email protected]@@angular/core/@angular/core.es5.js
5659:15-36 Critical dependency: the request of a dependency is an expression

WARNING in ./~/_@[email protected]@@angular/core/@angular/core.es5.js
5675:15-102 Critical dependency: the request of a dependency is an expression

运行时报错：
Uncaught Error: Unexpected value 'AngularEchartsModule' imported by the module 'ScalepageModule'. Please add a @NgModule annotation.

请教大家，这是什么原因？该如何解决，非常感谢。

Can't bind to 'options' since it isn't a known property of 'div'. ("

hasData中的判断没有考虑timeline类型的图表。option示例参照http://echarts.baidu.com/demo.html#mix-timeline-finance

{
  "scripts": [
    // ...

    // add this:
    "../node_modules/echarts/dist/echarts.js" or "../node_modules/echarts/dist/echarts.min.js"
  ],
}

不用压缩的echarts.js打包根本就不能看。。。打包完script.js 2M多
要介绍一下吧

<div echarts class="demo-chart" [options]="PV_second.options" [loading]="chartLoading" theme="dark"></div>

我在controller里面设置了
private chartLoading = true ;
但是没有loading显示出来。

另外我发现我这么写，竟然有loading

<div echarts class="demo-chart" [loading]="PV_second.options" [options]="PV_second.options" theme="dark"></div>

对，没错，就是loading的值等于[options]的值，这样子就有loading动画，神秘莫测啊

这个是bug，还是本身就没有这个功能？

谢谢！

我用的是angular-cli开发项目，用了ngx-echarts后，没有问题，页面也可以正常显示，当我重新ng serve的时候，会出现异常
ERROR in Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are not supported. Co nsider replacing the function or lambda with a reference to an exported function, resolving symbol NgModule in /node_modules/[email protected]@ngx-echarts/node_modules/@angular/core/core.d.ts, resolving symbol Angular EchartsModule in /node_modules/[email protected]@ngx-echarts/index.d.ts, resolving symbol AngularEchartsModule in /node_modules/[email protected]@ngx-echarts/index.d. ts，
再次complie又成功了，所以就没放在心上。

但当我用ng build --prod 打包项目的时候就会抛出同样的错误：
ERROR in Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in E:master/project/node_modules/ngx-echarts/node_modules/@angular/core/core.d.ts, resolving symbol ɵf in E:/master/project/node_modules/ngx-echarts/node_modules/@angular/core/core.d.ts, resolving symbol ɵf in E:/master/project/node_modules/ngx-echarts/node_modules/@angular/core/core.d.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'E:\master\project\s
rc'
@ ./src/main.ts 5:0-74
@ multi ./src/main.ts`

1.2.3版本安装的包下有index.ts 和 index.js ，typescript 下引入的是index.ts ,这个文件没有封装ng 的module。

Hi ziyu,

thanks for your efforts in this plugin! But we need some new features in echarts 3.7, for example, put sign at end of line chart, can you upgrade to the latest version?

I am trying to add themes to my echarts but none is working and only default theme is set. I have attached 3 files. In first one, you can see I have included 'theme' property in my html file. In second file, you can see that I have imported that theme in my .angular-cli.json. In third file, you can see that my theme is there in node_modules>echarts>theme folder. Am I missing something?
I am following this link: " [https://xieziyu.github.io/ngx-echarts/#/usage/theme] ".

看过几个echarts示例，这个界面感觉很卡不知道是ui的原因还是示例本身有问题

我定义了一个组件名叫app-pal-line-chart

<div echarts [options]="options" (chartInit)="onChartInit($event)" class="charts"></div>

在另一个组件中想要用ngFor动态渲染多个图表

<div class="pure-u-1-5" *ngFor="let pal of palValues">
    <app-pal-line-chart [palInfo]="pal" [subDateList]="dateList"></app-pal-line-chart>
</div>

但是在app-pal-line-chart组件里，ngOnChanges钩子里能够去到pal的值，但是无法取到ecInstance对象。如果不使用ngFor就可以取到。

我不可以循环去创建组件吗？

dynamic图是可以的 但是热力图好像不会更新？

<div style="width: 100%;height:400px" echarts [options]="pieOption" (chartInit)="onSponsorPieChartInit($event)">
    loading..
</div>
<div style="width: 100%;height: 400px" echarts [options]="barOption" (chartInit)="onSponsorBarChartInit($event)">
    loading..
</div>

我有两个一模一样的模板，在另外的组件能生成图表在另外的组件则不起作用，没有任何提示信息，chartInit 事件绑定的函数也没有调用

我在一个cli的项目里面执行
npm install echarts --save
npm install ngx-echarts --save
之后就出现好几个类似这种的错误
ERROR in .//jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'xmlhttprequest' in 'F:\test\lite-version\node_modules\jquery\lib'
@ .//jquery/lib/node-jquery.js 8:28-53
@ ./src/lib.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4321 ./src/main.ts,
请教一下如何解决...

你好，第一次运行报这个错：

只要到引入ngx-echarts的模块中将

这一行剪切后再粘贴，保存一下就会自动运行，然后运行就成功了

很好奇为什么会有这种操作

echarts V3中有contextmenu事件，是否考虑增加一下这个emitter？

我想异步加载'china.json'数据，然后再设置 geo: {map: 'china'}, 但是在异步请求之前echarts已经实例化了，出现报错信息： 'Map chinanot exists. You can download map file on'.

代码部分：
@Component({ selector: 'app-geographical-trend', template: <div echarts [options]="chartOption" class="demo-chart" (chartClick)="onClick($event)" *ngIf="!isLoading">`
})
class GeographicalTrendComponent implements OnInit {
isLoading = true;
chartInstance: any;
chinaGeo: string;
chartOption: any = undefined; // echarts 配置

constructor(@Inject('APP_CONFIG') private config: Object, private http: HttpClient) {
console.log(config); // { map: "../../assets/maps" }
this.chinaGeo = config['map'] + 'china.json'; // china.json 地图的地址
console.log(this.chinaGeo);
http.get(this.chinaGeo).subscribe((chinaMap) => { // 异步请求数据
this.isLoading = false;
echarts.registerMap('china', chinaMap); // 注册地图
console.log('init ', chinaMap);

this.chartOption = Object.assign({}, this.defaultOption, {
geo: {
map: 'china', // 声明map
// roam: true,
// ...
},
yAxis: {
data: this.categoryData.slice(0, 10).sort()
},
series : [
{
name: '选择器',
// type: 'scatter',
type: 'map',
mapType: 'china',
geoIndex: 0, // 同步数据
coordinateSystem: 'geo',
roam: true,
selectedMode: 'single',
itemStyle: {
normal: {
label: {
show: true,
color: '#fff' // 字体颜色
}
},
emphasis: {
label: {
show: true
}
}
},
data: this.provsName
},
{
id: 'bar',
zlevel: 2,
type: 'bar',
// ...
},
}
],
});
});
}
}
`
请问针对这种异步加载的情况有什么解决办法吗？

setInterval(() => {
this.i = this.i + 1;
this.season.shift();
this.season.push(this.getSeason()[this.i]);
this.count.shift();
this.count.push(this.getCount()[this.i]);
this.increase.shift();
this.increase.push(this.getIncrease()[this.i]);
this.option.xAxis[0].data = this.season.slice();
this.option.series[0].data = this.count.slice();
this.option.series[1].data = this.increase.slice();
}, 5000);