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

效果如图：