uniapp中如何引用echarts

在uniapp中引用echarts的方法

安装echarts依赖

通过npm或yarn安装echarts到uniapp项目。在项目根目录下执行命令：

npm install echarts --save

引入echarts库

在需要使用echarts的页面或组件中，通过import引入echarts：

import * as echarts from 'echarts';

适配uniapp环境

由于uniapp没有传统DOM环境，需要使用ec-canvas组件。在pages.json中配置easycom自动引入：

"easycom": {
  "autoscan": true,
  "custom": {
    "^ec-canvas$": "@/components/ec-canvas/ec-canvas.vue"
  }
}

创建图表容器

在vue文件中添加canvas容器：

<template>
  <view>
    <ec-canvas id="chart" canvas-id="chart" ref="canvas"></ec-canvas>
  </view>
</template>

初始化图表

在methods中定义初始化方法：

methods: {
  initChart() {
    const chart = echarts.init(this.$refs.canvas);
    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'
      }]
    });
  }
}

处理跨平台兼容性

针对不同平台可能需要特殊处理。在H5端直接使用DOM API，在小程序端使用对应API：

const systemInfo = uni.getSystemInfoSync();
const pixelRatio = systemInfo.pixelRatio;

注意事项

确保在onReady生命周期调用初始化方法，避免canvas未准备好。图表宽度需显式设置，推荐使用rpx单位适配不同屏幕：

#chart {
  width: 750rpx;
  height: 500rpx;
}

对于复杂图表，建议使用按需引入减少包体积：

import { LineChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
echarts.use([LineChart, GridComponent]);