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

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

实现步骤

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

  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'; // 引入 ECharts

Page({
  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 方法重新设置数据。

 

扩展：隐藏图表：无数据时隐藏 ec-canvas，显示提示文案。

<view wx:if="{{data.length > 0}}">
  <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ec}}"></ec-canvas>
</view>
<view wx:else>暂无数据</view>
posted @ 2025-03-19 14:19  FBshark  阅读(126)  评论(0)    收藏  举报