CECharts 图表组件

功能说明

该组件是对百度ECharts的封装，用于在小程序环境中渲染各类图表，支持触摸交互和数据更新。支持柱状图、折线图、饼图等各种ECharts支持的图表类型，组件内部已优化tooltip显示和触摸事件处理。

引用方式

import { CECharts } from '@components/plugins/echarts';

组件参数

• canvasId (String，默认值：随机生成)：画布ID，用于标识图表实例
• disableTouch (Boolean，默认值：false)：是否禁用触摸交互
• onReady (Function，可选)：图表准备就绪的回调函数
• 参数：chart (Object) ECharts实例对象，可通过此对象设置图表配置和数据

实例方法

• init：初始化图表方法
• callback (Function，必填)：初始化完成的回调函数，参数为 (canvas, width, height, dpr)
• canvasToTempFilePath：将图表转为临时文件路径
• opt (Object，必填)：微信小程序 canvasToTempFilePath 的参数对象

使用示例

基础用法

<template>
  <view class="page">
    <view class="chart-container">
      <CECharts
        ref="salesChart"
        :onReady="handleSalesChartReady"
      />
    </view>
  </view>
</template>

<script>
import { CECharts } from '@components/plugins/echarts';

export default {
  components: {
    CECharts
  },
  data() {
    return {
      salesData: []
    }
  },
  methods: {
    // 图表准备就绪回调
    handleSalesChartReady(chart) {
      // 保存图表实例
      this.chart = chart;
      
      // 设置图表配置
      chart.setOption({
        title: {
          text: '月度销售统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '销量',
          type: 'bar',
          data: [10, 52, 200, 334, 390, 330]
        }]
      });
    },
    
    // 更新图表数据
    updateChartData(newData) {
      if (!this.chart) return;
      
      this.chart.setOption({
        series: [{
          data: newData
        }]
      });
    }
  },
  mounted() {
    // 获取数据
    setTimeout(() => {
      const newData = [50, 120, 180, 80, 70, 110];
      this.updateChartData(newData);
    }, 2000);
  }
}
</script>

保存图表为图片

// 保存图表为图片
saveChartAsImage() {
  const _this = this;
  this.$refs.salesChart.canvasToTempFilePath({
    success(res) {
      console.log('保存成功:', res.tempFilePath);
      // 可以进一步使用 wx.saveImageToPhotosAlbum 保存到相册
    },
    fail(err) {
      console.error('保存失败:', err);
    }
  });
}

注意事项

• 该组件暂时仅适用于小程序环境，文件名为 CECharts.weapp.vue
• 在小程序端使用需要确保 canvas 的 type 属性设置为 "2d"
• 小程序对 canvas 的性能有一定限制，复杂图表可能会有性能问题
• 组件自动会处理触摸事件，支持图表交互
• 组件已禁用了渐进式渲染（progressive: 0）以提高兼容性
• 组件内置了默认的 tooltip 样式和位置优化逻辑