用e-charts画element ui表格后两列的相关曲线
时间: 2023-06-26 21:07:51 浏览: 77
你可以使用 ECharts 中的折线图(line chart)来绘制这两列数据的相关曲线。具体步骤如下:
1. 在 HTML 中插入一个 div 元素,作为 ECharts 图表的容器:
```html
<div id="chart-container" style="width: 100%; height: 400px;"></div>
```
2. 在 JavaScript 中引入 ECharts 库,并初始化一个 chart 实例:
```javascript
import echarts from 'echarts';
const chart = echarts.init(document.getElementById('chart-container'));
```
3. 定义数据,并将数据传入 chart 实例中:
```javascript
const data = {
columns: ['日期', '数据1', '数据2'],
rows: [
['2022-01-01', 10, 20],
['2022-01-02', 20, 30],
['2022-01-03', 30, 40],
// ...
]
};
const option = {
xAxis: {
type: 'category',
data: data.rows.map(row => row[0])
},
yAxis: {
type: 'value'
},
series: [
{
name: '数据1',
type: 'line',
data: data.rows.map(row => row[1])
},
{
name: '数据2',
type: 'line',
data: data.rows.map(row => row[2])
}
]
};
chart.setOption(option);
```
在上面的代码中,我们首先定义了一个数据对象 `data`,其中包含了两列数据和对应的日期。然后,在 ECharts 的配置对象 `option` 中,我们通过 `map` 方法将数据对象中的数据转换成 ECharts 能够识别的格式,并分别作为两个系列(series)传入了 chart 实例中。在系列的配置中,我们指定了折线图的类型为 `line`,并分别指定了系列的名称和对应的数据。
通过上述步骤,你就可以使用 ECharts 来绘制 Element UI 表格后两列的相关曲线了。