uniapp中使用Echarts

1. 安装echarts

在uniapp项目的根目录执行以下命令：

npm install echarts --save

2. 引入echarts

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

import * as echarts from '@/libs/echarts';

3. 创建图表容器

在页面中添加一个`<canvas>`标签，用于显示echarts图表：

<canvas id="myChart"></canvas>

在页面中找到这个`<canvas>`标签，获取它的上下文对象：

const context = uni.createCanvasContext('myChart');

4. 创建图表实例

使用`echarts.init`方法创建一个echarts实例：

const chart = echarts.init(context);

5. 配置图表

使用`chart.setOption`方法配置echarts图表：

chart.setOption({
  title: {
    text: '某地区蒸发量和降水量'
  },
  tooltip: {},
  legend: {
    data:['蒸发量','降水量']
  },
  xAxis: {
    data: ["1月","2月","3月","4月","5月","6月"]
  },
  yAxis: {},
  series: [{
    name: '蒸发量',
    type: 'bar',
    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7]
  }, {
    name: '降水量',
    type: 'bar',
    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7]
  }]
});

6. 显示图表

使用`chart.render`方法将图表显示到页面上：

chart.render();