uniapp h5 怎么使用 echart.js

你可以按照以下步骤在uniapp中使用echarts.js：

1. 安装echarts

在uniapp的项目根目录中打开终端，执行以下命令安装echarts：

npm install echarts -S

2. 引入echarts

在需要使用echarts的页面中，引入echarts：

import echarts from 'echarts'

3. 在template中添加canvas

在需要展示echarts图表的页面中，在template中添加一个canvas标签：

<canvas id="myChart" style="width: 100%; height: 400px;"></canvas>

4. 初始化echarts

在页面的onLoad方法中，初始化echarts：

onLoad() {
  const myChart = echarts.init(this.$refs.myChart)
  // 在这里配置你的echarts图表
}

5. 配置echarts图表

在初始化echarts之后，你可以按照echarts的API文档，配置你的图表。例如，下面是一个简单的柱状图配置：

onLoad() {
  const myChart = echarts.init(this.$refs.myChart)
  myChart.setOption({
    title: {
      text: '柱状图示例'
    },
    tooltip: {},
    xAxis: {
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20, 10]
    }]
  })
}

6. 注意事项

在使用echarts时，需要注意以下几点：

- canvas的宽度和高度需要设置为具体的数值，不能使用百分比，否则会出现显示异常的问题。
- 在使用uniapp时，需要将canvas的id设置为myChart，否则会出现显示异常的问题。
- 在使用echarts时，需要先引入echarts，否则会出现undefined的错误。