请扮演一位微信小程序开发者，用wxml.wxss js，写一个ECharts柱状图的效果。请给出代码并注释

好的，我将扮演一位微信小程序开发者，以下是基于wxml、wxss和js实现ECharts柱状图的代码及注释：

wxml文件：

<!-- 引入 ECharts 组件 -->
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>

其中，`ec-canvas` 是 ECharts 的组件，`mychart-dom-bar` 是组件的 id，`mychart-bar` 是组件的 canvas-id，`{{ ec }}` 是传递给组件的 ECharts 配置项。

wxss文件：

/* 设置 ECharts 图表的宽度和高度 */
#mychart-dom-bar {
  width: 100%;
  height: 300rpx;
}

js文件：

// 引入 ECharts 插件
import * as echarts from '../../ec-canvas/echarts';

Page({
  data: {
    ec: {
      lazyLoad: true // 延迟加载
    }
  },

  // 生命周期函数：监听页面加载
  onLoad: function () {
    // 在页面加载时初始化图表
    this.initChart();
  },

  // 初始化图表
  initChart: function () {
    // 获取 ECharts 组件
    this.selectComponent('#mychart-dom-bar').init((canvas, width, height) => {
      // 初始化 ECharts
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });

      // 配置 ECharts
      const option = {
        // 设置 x 轴数据
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        // 设置 y 轴数据
        yAxis: {
          type: 'value'
        },
        // 设置柱状图数据
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }]
      };

      // 使用配置项显示图表
      chart.setOption(option);

      // 将 ECharts 实例绑定到 this 上，方便其他函数调用
      this.chart = chart;

      // 手动调用一次图表的 resize 函数，防止图表大小在不同设备上显示不一样
      setTimeout(() => {
        chart.resize();
      }, 100);
    });
  }
});

注释：

1. 在 `data` 中声明 `ec` 对象，用于传递 ECharts 配置项。
2. 在 `onLoad` 生命周期函数中调用 `initChart` 函数初始化图表。
3. 在 `initChart` 函数中，使用 `selectComponent` 获取 `mychart-dom-bar` 组件，并调用 `init` 方法初始化 ECharts。
4. 在 `option` 中设置 x 轴和 y 轴数据，以及柱状图数据。
5. 在 `chart.setOption(option)` 中使用配置项显示图表。
6. 在 `setTimeout` 函数中手动调用一次图表的 `resize` 函数，防止图表大小在不同设备上显示不一样。