Angular2配合Echart,boostrap日历组件的使用

先上图（虽然比较丑，但是该功能跟效果有就好了~~）

首先，肯定先导入包要下载ngx-echarts的包

import { AngularEchartsModule } from 'ngx-echarts';

导入到你的项目模块的declarations里面。

<div   echarts [options]="monthoption"  class="echartsStyle" style="height: 500px"></div>

高度为必须设定.

接下来定义三个数组用于提示，横坐标与纵坐标

public total=new Array();
public time=new Array();
public uid=new Array();

用于提示，横坐标与纵坐标

定义图绑定的值

public option:any;

var url: string = “”";//你接口地址
this.http.get(url)
    .toPromise().then(data => {
    var result = data.json();
    this.data = result.list;
    console.log(result.list.length);
    this.lastPage = Math.floor(result.length / (this.rowsOnPage + 0.1)) + 1;
    if(result.list.length==0){
        this.po=3;
    }
    for (var i = 0; i < result.list.length; i++) {  //将数组push上去图表中
        this.total.push(result.list[i].total);
        this.time.push(result.list[i].create_time);
        this.uid.push(result.list[i].id);
    }
    this.option = {
        title: {
            text: '日消耗',
            left: 'center',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        xAxis: {
            name: "日期",
            data: this.time,
            axisLabel: {
                inside: false,
                textStyle: {
                    color: '#fff' //横坐标 数据颜色
                }
            },
            nameTextStyle: {
                color: "#fff"
            },
            axisTick: {
                show: true
            },
            axisLine: {
                show: true
            },
            z: 10
        },
        yAxis: {
            name: "数量",
            nameTextStyle: {
                color: "#fff"
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {

                textStyle: {
                    color: '#fff'
                }
            }
        },
        dataZoom: [
            {
                type: 'inside'
            }
        ],
        series: [
            { // For shadow
                name: "数量",
                type: 'line',
                itemStyle: {
                    normal: {color: '#fff'}
                },
                barWidth: '60%',
                barGap: '-100%',
                barCategoryGap: '40%',
                data: this.total,
                animation: true,
                lineStyle: {
                    normal: {
                        width: 4,
                        shadowColor: 'black',
                        shadowBlur: 10,
                        shadowOffsetY: 10
                    }
                },
            },
            {
                type: 'bar',
                name: '数量',
                color: "#fff",
                itemStyle: {
                    normal: {
                        color: '#ff0032'
                    },
                    emphasis: {
                        color: '#ff0032'
                    }
                },
                data: this.total
            }
        ]
    };
});

到这，图表创建完成

如果业务场景需要每隔一段时间刷新一次或者是需要变换数据时，要使用splice 函数清除掉数组数据，然后再次push新的数据上去

例如以下清除方式。

this.month_total.splice(0,this.month_total.length);
this.month_time.splice(0,this.month_time.length);
this.month_uid.splice(0,this.month_uid.length);

配合boostrap的日历组件，可以做出按时间查询的图表类型，丰富体验

~