如何在uniapp的小程序中使用echarts图

在uniapp中，使用ECharts绘制图表的方法与使用原生小程序的方法基本相同。下面是一个简单的示例：

1.安装echarts

首先需要安装`echarts`，可以使用npm或者yarn进行安装：

npm install echarts --save

2.复制echarts.min.js到项目中

将echarts.min.js文件复制到项目的static目录下，这里以将echarts.min.js复制到static/js目录下为例。

3.在页面中引入echarts.min.js

在需要使用ECharts的页面中，在`<script>`标签中引入echarts.min.js文件：

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

<script>
import * as echarts from '@/static/js/echarts.min';

export default {
  data() {
    return {
      ec: {
        lazyLoad: true,
      },
    };
  },
  onReady() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.$refs['mychart'].init((canvas, width, height) => {
        // 初始化echarts
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height,
        });
        // 绘制图表
        chart.setOption({
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          },
          yAxis: {
            type: 'value',
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
          }],
        });
        // 将图表实例绑定到this上，方便后续调用
        this.chart = chart;
        // 返回图表实例
        return chart;
      });
    },
  },
};
</script>

在上面的示例中，我们首先在`<script>`标签中引入了echarts.min.js文件，然后在页面中使用`<ec-canvas>`组件来绘制图表。在`<ec-canvas>`组件中，我们需要指定一个id和canvas-id，然后将ec属性绑定到页面的data中。在onReady钩子函数中，我们调用了initChart方法来初始化图表。

在initChart方法中，我们使用`this.$refs['mychart'].init`方法来初始化图表，然后使用`chart.setOption`方法来设置图表的数据和样式。最后，我们将图表实例绑定到this上，方便后续调用。