echarts实现折线图

前端框架使用的angular，折线图使用echarts实现。

这里实现的折线图只是简单是折线图，折线图显示在table中，不需要xy轴的数据说明。

1. item.component.html

<tr *ngFor="let item of items">
    <td>
        <!--指定一个容器用来存放echarts，也就是一个设置宽高属性的 DOM节点 -->
        <div class="box" style="80px;height:30px;"></div>
    </td>
</tr>

2. item.component.ts

ngAfterViewInit() {
    // 获取DOM节点，然后初始化
    const that = this;
    for (let i = 0; i < that.element.nativeElement.querySelectorAll('.box').length; i++) {
        const myChart = echarts.init(that.element.nativeElement.querySelectorAll('.box')[i]);
        const data = ITEMS[i].trend;
        // 图表设置
        const option = {
            grid: { // 设置折现图与table单元格的距离
                top: 5,
                bottom: 5,
            },
            xAxis: [{
                show: false,
                type: 'category' 
            }],
            yAxis: [{
                show: false,
                type: 'value',
                min: function (value) {
                    return value.min - 20;
                },
                max: function (value) {
                    return value.max + 20;
                }
            }],
            series: [{
                name: 'price',
                type: 'line',
                showSymbol: false,
                color: ['#66AEDE'],
                data: data
            }]
        }
        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
        }
    }
}

效果如图：