uniapp中如何引用echarts

在uniapp中引用echarts的方法

安装echarts依赖

通过npm或yarn安装echarts库，在项目根目录下运行命令：

npm install echarts --save

引入echarts核心模块

在需要使用echarts的页面或组件中，引入echarts核心模块：

import * as echarts from 'echarts';

创建canvas容器

在模板中添加一个canvas元素作为图表容器，并设置宽高：

<template>
  <view>
    <canvas canvas-id="chart" id="chart" class="chart"></canvas>
  </view>
</template>

<style>
.chart {
  width: 100%;
  height: 300px;
}
</style>

初始化图表

在页面生命周期函数中初始化echarts实例：

export default {
  onReady() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(document.getElementById('chart'));
      chart.setOption({
        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'
        }]
      });
    }
  }
}

处理uniapp适配问题

由于uniapp的特殊环境，可能需要使用uni.createCanvasContext来适配：

const ctx = uni.createCanvasContext('chart');
const chart = echarts.init(ctx);

注意事项

确保在页面销毁时释放图表资源：

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

使用echarts插件

如需使用地图等扩展功能，需要额外引入对应模块：

import 'echarts/map/js/china';

以上方法适用于大多数uniapp项目，可根据实际需求调整图表配置和容器尺寸。