uni-app使用echarts详细教程

uni-app使用echarts的详细教程如下：

1. 安装echarts插件
在uni-app项目的根目录下，打开终端，执行以下命令安装echarts插件：

   npm install echarts --save

2. 在页面中引入echarts
在需要使用echarts的页面中，引入echarts的js文件。可以在`<script>`标签中使用`import`语句引入echarts：

   import * as echarts from 'echarts'

3. 创建echarts实例
在页面的`<template>`标签中，添加一个容器元素用于显示echarts图表：

   <view class="chart-container" id="chart"></view>

4. 初始化echarts实例
在页面的`<script>`标签中，使用`uni.createSelectorQuery()`方法获取到容器元素的节点，然后使用`echarts.init()`方法初始化echarts实例：

   onReady() {
     uni.createSelectorQuery().select('#chart').fields({ node: true, size: true }).exec((res) => {
       const canvas = res[0].node
       const ctx = canvas.getContext('2d')
       const dpr = uni.getSystemInfoSync().pixelRatio
       canvas.width = res[0].width * dpr
       canvas.height = res[0].height * dpr
       const chart = echarts.init(canvas, null, {
         width: res[0].width,
         height: res[0].height,
         devicePixelRatio: dpr
       })
       this.chart = chart
     })
   }

5. 配置echarts图表
在页面的`<script>`标签中，使用`this.chart.setOption()`方法配置echarts图表的选项，例如：

   this.chart.setOption({
     title: {
       text: '柱状图示例'
     },
     xAxis: {
       data: ['A', 'B', 'C', 'D', 'E']
     },
     yAxis: {},
     series: [{
       name: '销量',
       type: 'bar',
       data: [5, 20, 36, 10, 10]
     }]
   })

6. 渲染echarts图表
在页面的`<script>`标签中，使用`this.chart.render()`方法将echarts图表渲染到页面上：

   this.chart.render()

以上是uni-app使用echarts的详细教程。你可以根据需要进行配置和定制，实现各种类型的图表展示。