Using Echarts with Uniapp: Tutorial

In uni-app, you can use echarts by following these steps:

1. To install ECharts using npm, open your terminal and run the following command:

npm install echarts

1. Import echarts in the vue file of the page where you need to use echarts.

import * as echarts from 'echarts';

1. When the page is loaded

onLoad() {
  this.chart = echarts.init(this.$refs.chartRef); // chartRef为echarts容器的ref属性
  // 初始化配置项
  let option = {
    // echarts配置项
  };
  this.chart.setOption(option);
},

1. prepared

onReady() {
  // 调整echarts的大小
  this.chart.resize();
},

1. when the page unloads

onUnload() {
  this.chart.dispose();
},

1. Create a container in the template for displaying Echarts charts.

<view ref="chartRef" class="chart-container"></view>

1. Set the size of the container in the style.

.chart-container {
  width: 100%;
  height: 300rpx; // 设置合适的高度
}

The above are the basic steps for using Echarts in uni-app. For specific Echarts configurations and usage, you can refer to the official Echarts documentation.