微信小程序 echarts折线图 点击折点显示数据

在微信小程序中使用 ECharts 绘制折线图并实现点击折点显示数据，首先你需要在页面中引入 ECharts 库，并在 WXML 中创建图表容器。以下是一个简单的步骤：

1. 引入 ECharts 和所需模块：
在你的项目中，通常需要在 `index.js` 或相关模块中引入 ECharts 和其他依赖库：

   import wx from 'wx';
   import echarts from '@vant/weapp/echarts';

2. 初始化 ECharts 实例：
在 WXML 文件（如 `chart.wxml`）中创建一个 `view` 用于存放图表：

   <view id="chartContainer" style="height: 400rpx;"></view>

在对应的 JS 文件中初始化图表：

   Page({
     data: {
       chart: null,
       seriesData: [],
     },
     onReady: function () {
       this.initChart();
     },
     initChart: function () {
       const chartContainer = wx.createSelectorQuery().select('#chartContainer');
       chartContainer.nodes.style.cssText = 'width: 100%; height: 100%;';
       this.chart = echarts.init(chartContainer);
       // ... 接下来设置图表配置和数据
     },
   });

3. 设置折线图配置和数据：

   initChart: function () {
     // ... (假设你已经有了 seriesData 数据)
     const option = {
       xAxis: { data: this.seriesData.map(item => item.name) }, // x轴数据
       yAxis: {}, // y轴配置
       series: [{ type: 'line', data: this.seriesData.map(item => item.value) }], // 折线系列配置
       onClick: this.handlePointClick, // 添加点击事件处理函数
     };
     this.chart.setOption(option);
   },
   
   handlePointClick: function (params) {
     const { name, value } = params.data; // 获取点击的点名称和值
     wx.showModal({
       title: '点击详情',
       content: `点名：${name}\n值：${value}`,
       showCancel: false,
     });
   },

4. 更新数据或重绘图表（如果需要动态数据）：
当数据更新后，调用 `this.chart.setOption()` 方法重新设置图表选项。