小程序echarts折线图获取page data中的数据
时间: 2024-05-06 15:16:30 浏览: 69
要在小程序中获取 `echarts` 折线图中的数据,需要先在页面中定义 `echarts` 实例,并将数据传递给实例。可以将数据存储在 `Page` 的 `data` 中,然后通过 `this.data` 来获取数据。
以下是一个示例代码:
```javascript
// 在 Page 中定义 echarts 实例
let chart = null;
Page({
data: {
// 存储数据
chartData: {
xData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
yData: [120, 200, 150, 80, 70, 110, 130]
}
},
// 在 onReady 生命周期中初始化 echarts 实例
onReady() {
this.initChart();
},
// 初始化 echarts 实例
initChart() {
let that = this;
chart = echarts.init(this.selectComponent('#mychart').dom);
chart.setOption(that.getOption());
// 监听点击事件,获取数据
chart.on('click', function (params) {
console.log(that.data.chartData.yData[params.dataIndex]);
});
},
// 获取图表配置
getOption() {
let option = {
xAxis: {
type: 'category',
data: this.data.chartData.xData
},
yAxis: {
type: 'value'
},
series: [{
data: this.data.chartData.yData,
type: 'line'
}]
};
return option;
}
})
```
以上代码中,我们在 `Page` 的 `data` 中存储了一个 `chartData` 对象,该对象包含了 `xData` 和 `yData` 两个数组。在页面的 `onReady` 生命周期中初始化了 `echarts` 实例,并在 `getOption` 方法中将 `xData` 和 `yData` 传递给了图表配置。在图表中监听了 `click` 事件,当用户点击图表时,可以通过 `params.dataIndex` 获取当前点击的数据索引,然后通过 `this.data.chartData.yData[params.dataIndex]` 来获取该索引的数据值。
阅读全文