uni-app 秋云 ucharts echarts 高性能跨全端图表组件 有热力图的示例吗？

当然，uni-app 结合 ucharts 或 echarts 都可以实现高性能跨全端的图表组件，包括热力图。以下是如何在 uni-app 中使用 echarts 实现热力图的示例代码。由于 ucharts 的具体实现方式可能有所不同且文档较为有限，这里我们重点介绍 echarts 的实现方法。

首先，确保你的 uni-app 项目已经安装了 echarts。你可以通过 npm 安装：

npm install echarts --save

然后，在你的页面组件中引入并使用 echarts。以下是一个简单的热力图示例：

1. 在页面的 <template> 部分添加容器：

<template>
  <view>
    <ec-canvas id="mychart-dom-heatmap" canvas-id="mychart-heatmap" ec="{{ ec }}"></ec-canvas>
  </view>
</template>

2. 在页面的 <script> 部分初始化图表：

import * as echarts from 'echarts';

export default {
  data() {
    return {
      ec: {
        onInit: this.initChart
      }
    };
  },
  methods: {
    initChart(canvas, width, height, dpr) {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      canvas.setChart(chart);

      const option = {
        title: {
          text: '热力图示例'
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5']
        },
        visualMap: {
          min: 0,
          max: 10,
          calculable: true,
          orient: 'horizontal',
          left: 'center',
          bottom: '15%'
        },
        series: [{
          name: '伪数据',
          type: 'heatmap',
          data: [
            [0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0],
            [1, 0, 7], [1, 1, 1], [1, 2, 0], [1, 3, 3], [1, 4, 0],
            // ... 更多数据
          ],
          label: {
            show: true
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      };

      chart.setOption(option);
      return chart;
    }
  }
};

3. 在页面的 <style> 部分添加样式（可选）：

<style scoped>
/* 根据需要添加样式 */
</style>

这个示例展示了如何在 uni-app 中使用 echarts 创建一个简单的热力图。你可以根据实际需求调整 option 对象中的配置，例如修改数据、调整坐标轴、修改视觉映射等。记得在真机或模拟器上测试以确保跨平台兼容性。