echarts實現折線圖

前端框架使用的angular，折線圖使用echarts實現。

這里實現的折線圖只是簡單是折線圖，折線圖顯示在table中，不需要xy軸的數據說明。

1. item.component.html

<tr *ngFor="let item of items">
    <td>
        <!--指定一個容器用來存放echarts，也就是一個設置寬高屬性的 DOM節點 -->
        <div class="box" style="width: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);
        }
    }
}

效果如圖：