简介

基于uni-app ts, 封装echarts库，适配H5端微信小程序端，其它端未测试，支持按需引入,支持导出为图片。

1、安装项目依赖

npm install echarts lodash -S

2、将下载插件中的com-echarts文件夹复制到项目components目录下

3、在需要用到的页面引入该组件

<script setup lang="ts">
  import { ref } from 'vue'

  <!-- 按需引入chart -->
  import { PieChart } from 'echarts/charts'
  <!-- 引入组件 -->
  import comEcharts from '[XXXXX]/components/com-echarts/com-echarts.vue'
  ...

  const chartsRef = ref()

  const refresh = () => {
    chartsRef.value?.reStore()
  }
  const saveImg = () => {
    chartsRef.value?.saveImage()
  }

<script setup lang="ts">


<template>
  <!-- 页面使用 -->
  <com-echarts ref="echartsRef" height="850rpx" :chartList="[PieChart]" :options="options"></com-echarts>
  ...
<template>

4、组件props 及事件说明

** props **

canvasId: string - canvas id

chartList: chart list - 从echarts/chart按需引入的chart列表

options: any - 图表数据配置

width: string - 图表宽度，默认：100% 代表充满屏幕

height: string - 图表高度，默认：1000rpx

** 暴露的组件实例方法 **

reStore 重绘图表

saveImage 导出图片