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); } } }

效果如圖：