uniappにチャート表示機能を実装する方法

"dependencies": {
  "echarts": "^4.9.0"
}

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

<view class="chart-container">
  <ec-canvas id="chart" @init="initChart" @dispose="disposeChart"></ec-canvas>
</view>

export default {
  data() {
    return {
      chart: null
    };
  },
  methods: {
    initChart(e) {
      const { width, height } = e.detail;
      this.chart = echarts.init(e.detail.canvas, null, {
        width: width,
        height: height
      });
      this.chart.setOption({
        // 图表配置
      });
    },
    disposeChart() {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
    }
  }
}

"dependencies": {
  "u-charts": "^2.0.39"
}

import uCharts from '@/components/u-charts/u-charts.min.js';

<view class="chart-container">
  <u-charts :canvas-id="'chart'" :opts="chartOptions"></u-charts>
</view>

export default {
  data() {
    return {
      chartOptions: {}
    };
  },
  onReady() {
    const ctx = uni.createCanvasContext('chart', this); 
    this.chartOptions = {
      $this: this,
      canvasId: 'chart',
      type: 'line',
      categories: ['一月', '二月', '三月', '四月', '五月'],
      series: [{
        name: '销量',
        data: [150, 200, 300, 180, 250]
      }]
    };
    new uCharts().init(this.chartOptions);
  },
  detached() {
    new uCharts().destroy(this.chartOptions);
  }
}