ECharts图表组件

组件名称

CECharts - 用于在小程序环境中渲染ECharts图表的组件

组件说明

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

使用方法

<CECharts
  :canvasId="'chart-' + Math.random()"
  :onReady="handleChartReady"
/>

// 图表初始化回调
handleChartReady(chart) {
  chart.setOption({
    title: {
      text: '销售统计'
    },
    tooltip: {},
    xAxis: {
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  });
}

属性说明

| onReady | Function | - | 图表准备就绪的回调函数，参数为chart实例 |

方法说明

组件内部对外暴露的方法：

使用示例

<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>

默认配置说明

组件已经内置了一些默认配置：

1. 禁用了渐进式渲染（progressive: 0）
2. 配置了默认的 tooltip 样式
3. 优化了 tooltip 的定位逻辑

注意事项

1. 该组件暂时仅适用于小程序环境，文件名为 CECharts.weapp.vue
2. 在小程序端使用需要确保 canvas 的 type 属性设置为 "2d"
3. 小程序对 canvas 的性能有一定限制，复杂图表可能会有性能问题
4. 组件自动会处理触摸事件，支持图表交互
5. 如需保存图表为图片，可使用 canvasToTempFilePath 方法