EChart 图表容器

基于 ECharts 的微信小程序图表渲染组件的封装，支持高度自定义配置与自动交互。

引入

组件位置

/main/pages/component/eChart/index

在 app.json 或 index.json 中引入组件：

"usingComponents": {
  "eChart": "/main/pages/component/eChart/index"
}

代码演示

基础用法

<eChart 
  height="400rpx" 
  option="{{ chartOption }}"
>
</eChart>

Page({
  data: {
    chartOption: {
      color: ['#209A56'],
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
        smooth: true
      }],
      tooltip: {
        show: true,
        trigger: 'axis'
      },
      grid: {
        left: '10%',
        right: '10%',
        bottom: '15%',
        top: '10%',
        containLabel: true
      }
    }
  }
})

自动显示 Tooltip

通过 autoShowTooltip 属性，可以实现图表渲染后自动在最后一个点位触发 Tooltip 展示（常用于只有一条数据序列的情况）。

<eChart 
  height="400rpx" 
  option="{{ chartOption }}" 
  autoShowTooltip="{{ true }}"
/>

API

Props

参数	说明	类型	默认值
height	容器高度，需包含单位 (如 400rpx, 300px)	string	-
option	ECharts 配置项，支持所有原生 ECharts 配置	Object	-
autoShowTooltip	是否自动在第一个序列 (series[0]) 的最后一个点位显示 Tooltip	boolean	false

Events

事件名	说明	回调参数
componentLoaded	当组件实例加载完成且内部 ready 生命周期触发时触发	-

进阶说明

Tooltip 样式优化

当传入的 option 中包含 tooltip 对象时，组件会自动合并以下配置以优化小程序端的显示效果：

• confine: true: 限制 Tooltip 在 Canvas 区域内。
• shadowBlur: 0 / shadowColor: '#e7e8e8': 阴影处理。
• borderColor: '#e7e8e8': 边框颜色。
• padding: [0, 0, 0, 0]: 内边距重置。

动态数据更新

组件通过 observers 监听 option 属性。当您通过 setData 更新 option 时，图表会执行重绘，无需手动调用初始化方法。

原生库依赖

该组件依赖 miniprogram/components/tgj/ec-canvas 下的 ECharts 小程序适配层。