import * as echarts from '../../component/ec-canvas/echarts';


function initChart(canvas, width, height, dpr) {
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height,
      devicePixelRatio: dpr // 将此选项设置为 2，可以在高分辨率屏幕上绘制更清晰的图表
    });
    canvas.setChart(chart);
    const option = {
      xAxis: {
        type: 'category',
        data: ['16:41', '22:41', '04:41', '10:41', '16:41']
      },
      yAxis: {
        type: 'value',
        data: ['0ml','560ml']
      },
      series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'bar',
        barWidth: 15,
        itemStyle: {    //柱状颜色和圆角
              color: {
                  x:0,
                  y:1,
                  colorStops:[{
                      offset: 0,
                      color: '#FFBBAC',
                  },{
                      offset: 1,
                      color: '#FF512A'
                  }]
              },
              barBorderRadius: [5, 5, 0, 0], // （顺时针左上，右上，右下，左下）
      },
      }]
    };
    chart.setOption(option);
    return chart;
  }
  

Page({
    data: {
      imagePath: '',
      ec: {
        onInit:initChart
     },
    },
    onReady() {
    },
    onLoad(){
        let that = this
        setTimeout(()=>{
            const ecComponent = that.selectComponent("#mychart-dom-bar")
            // 将 canvas 内容转换为临时图片文件
            ecComponent.canvasToTempFilePath({
            // canvasId: 'mychart-dom-bar',
            success: (result) => {
                this.base64({
                    url:result.tempFilePath,
                    type:'png',
                }).then((res)=>{
                    that.setData({
                        imagePath:res
                    })
                })
                
                // console.log('转换成功，图片路径：', result.tempFilePath);
            },
            fail: (err) => {
                console.error('转换失败:', err);
            }
            });
        },2000)
    },
    base64({ url, type }) {
        return new Promise((resolve, reject) => {
            wx.getFileSystemManager().readFile({
                filePath: url, //选择图片返回的相对路径
                encoding: 'base64', //编码格式
                success: res => {
                    resolve('data:image/' + type.toLocaleLowerCase() + ';base64,' + res.data)
                },
                fail: res => reject(res.errMsg)
            })
        })
    },
    
  });