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

Page({
  data: {
    ecBox: {
      onInit: function (canvas, width, height, dpr) {
        const boxChart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        canvas.setChart(boxChart);
        boxChart.setOption(getBoxOption());

        return boxChart;
      }
    },
    ecLine: {
      onInit: function (canvas, width, height, dpr) {
        const lineChart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        canvas.setChart(lineChart);
        lineChart.setOption(getLineOption());

        return lineChart;
      }
    },
    ecScatter: {
      onInit: function (canvas, width, height, dpr) {
        const scatterChart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        canvas.setChart(scatterChart);
        scatterChart.setOption(getScatterOption());

        return scatterChart;
      }
    },
    ecBar: {
      onInit: function (canvas, width, height, dpr) {
        const barChart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr
        });
        canvas.setChart(barChart);
        barChart.setOption(getBarOption());
        return barChart;
      }
    },
    ecPie: {
      onInit: function (canvas, width, height, dpr) {
        const pieChart = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        canvas.setChart(pieChart);
        pieChart.setOption(getPieOption());

        return pieChart;
      }
    }
  },

  onReady() {
    // You can add any additional logic here if needed
  }
});

function getBarOption() {
  return {
    title: {
      text: 'Basic Bar Chart'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['Sales']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Sales',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20, 30],
        itemStyle: {
          color: '#c23531'
        }
      }
    ]
  }
}
function getBoxOption() {
  return {
    title: {
      text: 'Sample ΔpH'
  },
  tooltip: {
      trigger: 'item',
      axisPointer: {
          type: 'shadow'
      }
  },
  grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
  },
  xAxis: {
      type: 'category',
      data: Array.from({length: 27}, (_, i) => i + 1) // 生成 1 到 27 的样本编号
  },
  yAxis: {
      type: 'value',
      name: 'ΔpH',
      min: -1.5,
      max: 0.5
  },
  series: [
      {
          name: 'ΔpH',
          type: 'boxplot',
          data: [
              // 每个数组代表一个样本的箱型图数据
              // 格式为 [min, Q1, median, Q3, max]，可以包含异常值作为单独的数组元素
                [-0.8, -0.6, -0.5, -0.3, 0.0], 
                [-0.7, -0.5, -0.4, -0.2, 0.1], 
                [-0.9, -0.7, -0.6, -0.4, -0.1], 
                [-1.0, -0.8, -0.7, -0.5, -0.3], 
                [-1.1, -0.9, -0.8, -0.6, -0.4], 
                [-1.2, -1.0, -0.9, -0.7, -0.5], 
                [-1.3, -1.1, -1.0, -0.8, -0.6], 
                [-1.4, -1.2, -1.1, -0.9, -0.7], 
                [-1.5, -1.3, -1.2, -1.0, -0.8], 
                [-1.4, -1.2, -1.1, -0.9, -0.7], 
                [-1.3, -1.1, -1.0, -0.8, -0.6], 
                [-1.2, -1.0, -0.9, -0.7, -0.5], 
                [-1.1, -0.9, -0.8, -0.6, -0.4], 
                [-1.0, -0.8, -0.7, -0.5, -0.3], 
                [-0.9, -0.7, -0.6, -0.4, -0.1], 
                [-0.8, -0.6, -0.5, -0.3, 0.0], 
                [-0.7, -0.5, -0.4, -0.2, 0.1], 
                [-0.6, -0.4, -0.3, -0.1, 0.2], 
                [-0.5, -0.3, -0.2, 0.0, 0.3], 
                [-0.4, -0.2, -0.1, 0.1, 0.4], 
                [-0.3, -0.1, 0.0, 0.2, 0.5], 
                [-0.2, 0.0, 0.1, 0.3, 0.6], 
                [-0.1, 0.1, 0.2, 0.4, 0.7], 
                [0.0, 0.2, -0.3, 0.5, 0.8], 
                [-0.1, 0.3, -0.4, 0.6, 0.9], 
                [-0.2, 0.4, -0.5, 0.7, 1.0], 
                [-0.3, 0.5, -0.6, 0.8, 1.1]  
          ],
          tooltip: {
              formatter: function (param) {
                  return [
                      'Experiment ' + param.name + ': ',
                      'upper: ' + param.data[5],
                      'Q3: ' + param.data[4],
                      'median: ' + param.data[3],
                      'Q1: ' + param.data[2],
                      'lower: ' + param.data[1]
                  ].join(' ');
              }
          }
      }
  ]
  };
}

function getScatterOption() {
  return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: ['True vs Predicted']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          name: 'True Values',  // 对应 Python 中的 Ytest
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          name: 'Predicted Values',  // 对应 Python 中的 y_pred
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        series: [
          {
            name: 'True vs Predicted',
            type: 'scatter',
            data: [
              [-0.003333333333333854, -0.45726666666666654], [-0.1733333333333329, -0.1726333333333331], 
              [-0.6233333333333331, -0.5226666666666667], [-0.7088888888888892, -0.4791888888888889], 
              [-0.3366666666666669, -0.3630666666666673], [-0.8888888888888887, -0.48272222222222183], 
              [-0.5633333333333326, -0.7492444444444444], [-0.7333333333333325, -0.5572666666666672], 
              [-0.3366666666666663, -0.29379999999999984], [-1.176666666666666, -0.8544111111111106], 
              [-0.7122222222222225, -0.4959777777777775], [-0.7699999999999996, -0.6149666666666669]
            ],
            symbolSize: 10,
            itemStyle: {
              
            }
          },
          {
            name: 'Trendline',
            type: 'line',
            data: [
              // 绘制对角线 y = x (这就是理想情况下 True 和 Predicted 的值相等)
              [-1.2,-1.2],  // 最小值
              [-0.0034, -0.0034]   // 最大值
            ],
            lineStyle: {
              type: 'dashed',
              
            }
          }
        ]
      };
}

function getLineOption() {
  return {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Random Forest', 'XGBoost', 'Gradient Boosting']  // 模型名称
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%']  // train_sizes按10%递增
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Random Forest',
        type: 'line',
        data: [-0.17101591951095463, -0.556719360354051, -0.04083550751401055, -0.20858221504075436, 0.07297292282221035, 0.19857845644421734, 0.28407131176770184, 0.27979356883596496, 0.36904808817286416, 0.4183018571701477]  // 使用您的实际R2分数数据
      },
      {
        name: 'XGBoost',
        type: 'line',
        data: [-1.1811781145886937, -1.5645641005612534, -0.12619079632263497, 0.03324096120721032, 0.06969290639267578, 0.12375262461601955, 0.5331670468884062, 0.49454793164801647, 0.31904329339597803, 0.2712670704381914]
      },
      {
        name: 'Gradient Boosting',
        type: 'line',
        data: [-0.8583039298789095, -1.073316171952042, 0.09659300885027666, 0.06097833957434784, 0.191975498544109, 0.3718334600546489, 0.3948098332187753, 0.4398778520728397, 0.452609022210963, 0.41484634172723023]
      }
    ]
  };
}

function getPieOption() {
  return {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['示例1', '示例2', '示例3']
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [
          { value: 335, name: '示例1' },
          { value: 310, name: '示例2' },
          { value: 234, name: '示例3' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
}