uni-app 堆叠条形图数字堆叠到一起

在处理uni-app中的堆叠条形图时，如果数字堆叠到一起，通常是由于数据标签（label）的显示位置没有正确设置。我们可以使用ECharts来绘制堆叠条形图，并通过调整label的position属性来解决数字堆叠的问题。以下是一个使用ECharts在uni-app中绘制堆叠条形图并设置标签位置的示例代码。

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

npm install echarts --save

然后，在你的页面组件中引入ECharts并配置堆叠条形图：

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

<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 // 新增参数
      });
      canvas.setChart(chart);

      const option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Email',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              position: 'insideRight' // 调整标签位置
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Affiliate',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              position: 'insideLeft' // 调整标签位置
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          }
          // 可以添加更多系列
        ]
      };

      chart.setOption(option);
      return chart;
    }
  }
};
</script>

<style>
/* 添加必要的样式 */
</style>

在这个示例中，我们通过设置label.position属性来控制每个系列标签的显示位置。insideRight和insideLeft分别表示将标签显示在条形图的右侧和左侧，从而避免数字堆叠到一起。

请根据你的具体需求调整option中的其他配置，如xAxis、yAxis和series等。这个示例提供了一个基本的框架，你可以在此基础上进行扩展和定制。