写一个uniapp 获取数据传入图表的完整示例

以下是一个简单的示例，展示如何获取数据并将其传递给图表：

在页面中定义一个图表组件，例如 echarts：

<template>
  <view>
    <ec-canvas id="mychart" canvas-id="mychart-canvas" :ec="ec"></ec-canvas>
  </view>
</template>

<script>
  import * as echarts from '@/components/ec-canvas/echarts';

  export default {
    data() {
      return {
        ec: {
          lazyLoad: true
        },
        chartData: null
      }
    },
    methods: {
      initChart() {
        this.ecComponent = this.selectComponent('#mychart');
        this.ecComponent.init((canvas, width, height) => {
          const chart = echarts.init(canvas, null, {
            width: width,
            height: height
          });
          this.setChartData(chart);
          return chart;
        });
      },
      setChartData(chart) {
        if (this.chartData) {
          chart.setOption({
            xAxis: {
              type: 'category',
              data: this.chartData.categories
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: this.chartData.data,
              type: 'bar'
            }]
          });
        }
      },
      fetchData() {
        // 调用接口获取数据
        // 例如：this.$http.get('/api/data').then(res => { this.chartData = res.data; });
        // 这里使用固定数据进行演示
        this.chartData = {
          categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          data: [120, 200, 150, 80, 70, 110, 130]
        };
      }
    },
    mounted() {
      this.initChart();
      this.fetchData();
    }
  }
</script>

在页面中引入 echarts 组件：

{
  "usingComponents": {
    "ec-canvas": "@/components/ec-canvas/ec-canvas"
  }
}

在页面中调用接口获取数据，例如使用 uni.request() 方法：

uni.request({
  url: '/api/data',
  success: (res) => {
    this.chartData = res.data;
  }
});

以上示例中，使用了 echarts 组件来绘制图表，并在页面中调用接口获取数据。获取到数据后，将其传递给图表组件，并更新图表的配置。在 mounted 生命周期中，调用 initChart() 方法初始化图表，并在 fetchData() 方法中获取数据并更新图表。