如何在uniapp中使用echarts画出折线图

在uniapp中使用echarts可以通过uni-echarts插件来实现。下面是一个简单的折线图实现步骤：

1. 安装插件：在HBuilderX中，打开项目，右键选择工具 -> 插件市场，搜索 uni-echarts 插件并安装。

2. 在需要使用图表的页面中引入 echarts 和 uni-echarts 组件。

<template>
  <view class="container">
    <uni-echarts :option="echartsOption" :config="echartsConfig"></uni-echarts>
  </view>
</template>

<script>
  import * as echarts from 'echarts'
  import uniEcharts from '@/components/uni-echarts/uni-echarts.vue'

  export default {
    components: {
      uniEcharts
    },
    data() {
      return {
        echartsOption: {},
        echartsConfig: {}
      }
    }
  }
</script>

3. 在页面的 data 中定义 echartsOption 和 echartsConfig，其中 echartsOption 是图表的配置项，echartsConfig 是图表的全局配置。

data() {
  return {
    echartsOption: {
      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'
      }]
    },
    echartsConfig: {
      lazyLoad: true // 懒加载
    }
  }
}

4. 在页面的 onReady 生命周期中初始化图表。

onReady() {
  this.$nextTick(() => {
    this.echartsInit()
  })
},
methods: {
  echartsInit() {
    this.$refs.echarts.init((canvas, width, height) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      })
      chart.setOption(this.echartsOption)
      return chart
    })
  }
}

5. 至此，你已经成功地在uniapp中使用echarts画出了一个折线图。

以上是一个简单的折线图实现步骤，你可以根据自己的需求来调整和修改图表的配置项，以及添加更多的图表类型。