【蓝牙小程序】echart 折线图中如何标出最大值的点，并在其上面显示最大值

在微信小程序中使用 ECharts 绘制折线图时，可以通过 markPoint 来标记最大值点，并在该点上显示最大值。以下是实现步骤和示例代码。

---

实现步骤

1. 引入 ECharts 库：
   确保已经在微信小程序中引入了 ECharts 库。可以通过以下方式引入：

   • 下载 ECharts 小程序版本。

   • 将 ec-canvas 组件和相关文件放入小程序项目中。

2. 配置 markPoint：
   在 ECharts 的配置项中，使用 markPoint 标记最大值点，并通过 label 显示最大值。

3. 动态计算最大值：
   使用 JavaScript 计算数组中的最大值及其索引。

---

示例代码

1. WXML 文件

在页面中引入 ec-canvas 组件。

xml

复制

<view class="container"><ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ec}}"></ec-canvas>
</view>

 

运行 HTML

2. WXSS 文件

设置图表容器的样式。

css

复制

.container {width: 100%;height: 500px;
}
ec-canvas {width: 100%;height: 100%;
}

3. JS 文件

在页面逻辑中初始化 ECharts 并配置图表。

javascript

复制

import * as echarts from '../../ec-canvas/echarts'; // 引入 EChartsPage({data: {ec: {onInit: initChart // 初始化图表的函数}}
});function initChart(canvas, width, height, dpr) {const chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr});canvas.setChart(chart);// 示例数据const data = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];// 找到最大值及其索引const maxValue = Math.max(...data);const maxIndex = data.indexOf(maxValue);// 配置项const option = {title: {text: '折线图最大值标记'},tooltip: {trigger: 'axis'},xAxis: {type: 'category',data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']},yAxis: {type: 'value'},series: [{name: '数据',type: 'line',data: data,markPoint: {data: [{name: '最大值',type: 'max', // 标记最大值点valueIndex: maxIndex, // 最大值点的索引label: {formatter: '最大值: {c}', // 显示最大值position: 'top' // 标签位置}}]}}]};chart.setOption(option);return chart;
}

---

代码说明

1. 引入 ECharts：

   • 在 JS 文件中引入 ECharts 库。

   • 使用 ec-canvas 组件初始化图表。

2. 计算最大值：

   • 使用 Math.max(...data) 找到数组中的最大值。

   • 使用 indexOf 找到最大值的索引。

3. 配置 markPoint：

   • 在 series 中配置 markPoint，使用 type: 'max' 标记最大值点。

   • 通过 label 的 formatter 显示最大值，{c} 表示当前点的值。

4. 设置图表样式：

   • 在 WXSS 文件中设置图表容器的宽高。

---

运行效果

• 折线图上会标记出最大值点。

• 最大值点上会显示一个标签，内容为 最大值: xxx（xxx 是最大值）。

---

注意事项

1. ECharts 版本：

   • 确保使用的是支持微信小程序的 ECharts 版本。

2. 性能优化：

   • 如果数据量较大，建议对图表进行性能优化，例如减少不必要的动画或使用增量渲染。

3. 动态更新数据：

   • 如果需要动态更新数据，可以调用 chart.setOption 方法重新设置数据。