需求:使用echarts^4.2.0-rc.2版本写折线图,数据源 funListT01: [ { id: 1, name: "天线1XYZ角度变化情况", data: [ { id: 1, time: "2022-10-10", amount: 45, }, { id: 2, time: "2022-10-11", amount: 20, }, { id: 2, time: "2022-10-12", amount: 30, }, { id: 3, time: "2022-10-13", amount:
时间: 2024-03-20 13:43:46 浏览: 109
根据你的需求,下面是使用 ECharts ^4.2.0-rc.2 版本编写折线图的示例代码,数据源为 funListT01:
```javascript
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入折线图和提示框等组件
require('echarts/lib/chart/line');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');
require('echarts/lib/component/dataZoom');
require('echarts/lib/component/markPoint');
// 初始化图表实例对象
var myChart = echarts.init(document.getElementById('myChart'));
// 定义数据
var xAxisData = [];
var seriesData = [];
funListT01[0].data.forEach(function(item) {
xAxisData.push(item.time);
seriesData.push(item.amount);
});
// 配置项
var option = {
title: {
text: funListT01[0].name
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['数量']
},
xAxis: {
type: 'category',
data: xAxisData
},
yAxis: {
type: 'value'
},
dataZoom: [{
type: 'slider',
start: 0,
end: 100,
show: true
}],
series: [
{
name: '数量',
type: 'line',
data: seriesData,
smooth: true,
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
}
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
```
在代码中,我们首先通过遍历 `funListT01[0].data` 获取 `xAxisData` 和 `seriesData`,并将它们分别用于配置项中的 `xAxis.data` 和 `series.data`。
同时,我们还添加了数据缩放功能,可以通过滑动缩放数据范围。另外,我们还添加了标记点的功能,用于标记最大值和最小值。
你可以根据自己的需求进行修改和定制。
阅读全文