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

例：

在页面中引入 echarts 组件

<template>
  <view class="echarts-container">
    <ec-canvas id="mychart" canvas-id="mychart" :canvas-type="canvasType" :disable-scroll="true"></ec-canvas>
  </view>
</template>

<script>
  import * as echarts from '../../components/ec-canvas/echarts'; // 引入 echarts

  export default {
    data() {
      return {
        canvasType: '2d', // canvas 类型，默认为 2d
        chartData: {}, // 图表数据
        chartOptions: {} // 图表配置
      }
    },
    onReady() {
      // 页面加载完成后渲染图表
      this.renderChart();
    },
    methods: {
      // 获取图表数据
      getChartData() {
        uni.request({
          url: 'http://xxx.com/data', // 数据接口
          success: (res) => {
            if (res.data) {
              this.chartData = res.data;
            }
          }
        })
      },
      // 渲染图表
      renderChart() {
        this.getChartData(); // 获取图表数据
        this.$nextTick(() => {
          let chart = echarts.init(uni.$refs['mychart']); // 初始化图表
          chart.setOption(this.chartOptions); // 设置图表配置
          chart.setOption({ // 设置图表数据
            series: [{
              data: this.chartData
            }]
          })
        })
      }
    }
  }
</script>

<style>
  .echarts-container {
    width: 100%;
    height: 400rpx;
  }
</style>

在图表配置中设置图表类型和样式

export default {
  data() {
    return {
      chartOptions: {
        title: {
          text: '柱状图示例' // 图表标题
        },
        tooltip: {}, // 提示框
        xAxis: { // x 轴
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] // x 轴数据
        },
        yAxis: {}, // y 轴
        series: [{ // 图表数据
          type: 'bar', // 图表类型
          data: [] // 图表数据，此处留空，渲染时再设置
        }]
      }
    }
  },
  ...
}

获取数据后将数据传入图表

getChartData() {
  uni.request({
    url: 'http://xxx.com/data', // 数据接口
    success: (res) => {
      if (res.data) {
        this.chartData = res.data;
        let chart = echarts.init(uni.$refs['mychart']); // 初始化图表
        chart.setOption({ // 设置图表数据
          series: [{
            data: this.chartData
          }]
        })
      }
    }
  })
}