// 圆饼
export function pieOption(option) {
console.log('option.legend?.icon', option.legend?.icon)
  return {
    title: {
      show: option.title?.text ? true: false,
      text: option.title?.text, // 圆饼的title
      y: option.title?.y || "75%",
      x: option.title?.x || "center",
      textStyle: option.title?.textStyle || {
        color: "#fff",
        fontSize: 14
      }
    },
    tooltip: option?.tooltip || {
      trigger: "item",
      formatter: "{b} : {c} ({d}%)"
    },
    legend: {
      icon: option.legend?.icon || "circle", // ’circle’(圆形), ‘rect’(长方形), ‘roundRect’(带圆角长方形), ‘triangle’(三角形), ‘diamond’(菱形), ‘pin’(也是圆形), ‘arrow’(箭头), ‘none’，
      // y: option.legend?.y || '', // y 有值top就不会生效
      top: option.legend?.top || null, // 标注里图表的距离
      bottom: option.legend?.bottom || null, // bottom:"20%" // 组件离容器的距离
      right: option.legend?.right || null, //left:"10%"  // // 组件离容器的距离
      left: option.legend?.left || null, //left:"10%"  // // 组件离容器的距离
      width: option.legend?.width || "auto", // 图例组件的宽度
      height: option.legend?.height || "auto", // 图例组件的高度
      orient: option.legend?.orient || "horizontal", // 图例列表的布局朝向。 'horizontal' 水平    'vertical'垂直
      
      align: "auto", // 图例标记和文本的对齐
      textStyle: option.legend?.textStyle || {
        color: "#999",
        fontSize: 12
      },
      formatter: option.legend?.formatter || null
      
      // formatter: function (name) {
      //   let data = option.series[0].data
      //   console.log(data, 'data')
      //   let total = 0
      //   let tarValue
      //   for (let i = 0; i < data.length; i++) {
      //     total += data[i].value
      //     if (data[i].name == name) {
      //       tarValue = data[i].value
      //     }
      //   }
      //   let v = tarValue
      //  return '{a|'+name+'}'+'{b|'+v+'}'+'{a|个}'
      // },
    //  textStyle:{
    //     rich:{
    //     a:{
    //       color:'red',
    //     },
    //     b:{
    //       color:'#66FFcc',
    //       fontSize:19,
    //     }
    //   }
    //  }
    },
    series: [
      {
        type: "pie",
        radius: option.series[0]?.radius || ["30%", "50%"],
        center: option.series[0]?.center || ['50%', '50%'], // 调整饼图的位置
        avoidLabelOverlap: option.series[0]?.avoidLabelOverlap || false,
        labelLine: {
          show: false
        },
        label: {
          show: false
        },
        data: option.series[0]?.data || [],
        emphasis: option?.emphasis || {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0,0,0,0.5)"
          }
        }
      }
    ],
    // center: ["10%", "50%"] // 这个属性调整图像的位置！！！！！
  }

}
// 柱状
export function barOption(option) {
  const grid = Object.assign({}, { containLabel: true }, option?.grid)
  const tooltip = Object.assign({}, {
    trigger: "axis", // 设置鼠标滑动到柱上显示柱上的所有的,可选值: axis item none
    axisPointer: { // 设置鼠标滑动上去的效果是
      type: "shadow" // 有阴影 可选值：line shadow none cross（十字准星指示器）
    }}, option?.tooltip)
  const series = option.series.map(item => {
    const obj = {
      name: item.name,
      type: item?.type || "bar",
      // stack: "total", // 所有的值都显示在一个柱上面
      stack: item?.stack || null,
      label: item?.label ||  {
        show: false
      },
      emphasis: {
        focus: "series"
      },
      showSymbol: item?.showSymbol || false,
      areaStyle: item?.areaStyle || {},
      barWidth: item?.barWidth || "auto", // 柱状的宽度
      data: item.data
    }
    return obj
  })


  return {
    title: {
      show: option.title?.text ? true: false,
      text: option.title?.text,
      y: option.title?.y || "75%",
      x: option.title?.x || "center",
      textStyle: option.title?.textStyle || {
        color: "#999",
        fontSize: 14
      }
    },
    tooltip,
    // 标注
    legend: {
      icon: option.legend?.icon || "circle", // ’circle’(圆形), ‘rect’(长方形), ‘roundRect’(带圆角长方形), ‘triangle’(三角形), ‘diamond’(菱形), ‘pin’(也是圆形), ‘arrow’(箭头), ‘none’，
      top: option.legend?.top || null, // 标注里图表的距离
      bottom: option.legend?.bottom || null, // bottom:"20%" // 组件离容器的距离
      right: option.legend?.right || null, //left:"10%"  // // 组件离容器的距离
      left: option.legend?.left || "center", //left:"10%"  // // 组件离容器的距离
      width: option.legend?.width || "auto", // 图例组件的宽度
      height: option.legend?.height || "auto", // 图例组件的高度
      orient: option.legend?.orient || "horizontal", // 图例列表的布局朝向。 'horizontal' 水平    'vertical'垂直
      align: "auto", // 图例标记和文本的对齐
      textStyle: option.legend?.textStyle || {
        color: "#999",
        fontSize: 12
      },
    },
    grid,
    xAxis: {
      type: option.xAxis?.type || "category", // 设置x柱表示类目柱还是 value柱
      data: option.xAxis?.data || null,
      axisLabel: option.xAxis?.axisLabel || {},
      // {   // 设置字体倾斜
      //   interval:0,
      //     rotate:-30  //倾斜的程度
      // }
      boundaryGap: option.xAxis?.boundaryGap || true
    },
    yAxis: {
      type: option.yAxis?.type || "value",
      data: option.yAxis?.data || null,
      axisLabel: option.yAxis?.axisLabel || {
        // 设置字体倾斜
        // interval:0,
        //   rotate:-30  //倾斜的程度
      }
    },
    series
  }
}
// 折线
export function lineOption(option) {
  const grid = Object.assign({}, {left:'3%',right: '3%', bottom:'3%', containLabel: true }, option?.grid)
  const tooltip = Object.assign({}, {
    trigger: "axis", // 设置鼠标滑动到柱上显示柱上的所有的,可选值: axis item none
    axisPointer: { // 设置鼠标滑动上去的效果是
      type: "shadow" // 有阴影 可选值：line shadow none cross（十字准星指示器）
    }
  }, option?.tooltip)

  const series = option.series.map(item => {
    const obj = {
      name: item.name,
      type: item?.type || "line",
      stack: item?.stack || null,
      smooth: item?.smooth || false,
      lineAtyle: item?.lineAtyle || {
        width: 0
      },
      showSymbol: item?.showSymbol || false,
      areaStyle: item?.areaStyle || null,
      emphasis: {
        focus: "series"
      },
      data: item.data
    }
    return obj
  })
  return {
    color: option?.color || ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074','#546570', '#c4ccd3'],
    tooltip,
    // 标注
    legend: {
      icon: option.legend?.icon || "circle", // ’circle’(圆形), ‘rect’(长方形), ‘roundRect’(带圆角长方形), ‘triangle’(三角形), ‘diamond’(菱形), ‘pin’(也是圆形), ‘arrow’(箭头), ‘none’，
      top: option.legend?.top || null, // 标注里图表的距离
      bottom: option.legend?.bottom || null, // bottom:"20%" // 组件离容器的距离
      right: option.legend?.right || null, //left:"10%"  // // 组件离容器的距离
      left: option.legend?.left || "center", //left:"10%"  // // 组件离容器的距离
      width: option.legend?.width || "auto", // 图例组件的宽度
      height: option.legend?.height || "auto", // 图例组件的高度
      orient: option.legend?.orient || "horizontal", // 图例列表的布局朝向。 'horizontal' 水平    'vertical'垂直
      align: "auto", // 图例标记和文本的对齐
      textStyle: option.legend?.textStyle || {
        color: "#999",
        fontSize: 12
      },
    },
    toolbox: {
      // 是否显示下载
      // feature:{
      //   saveAsImage:{}
      // }
    },
    grid,
    xAxis: {
      type: option.xAxis?.type || "category", // 设置x柱表示类目柱还是 value柱
      data: option.xAxis?.data || null,
      axisLabel: option.xAxis?.axisLabel || {},
      // {   // 设置字体倾斜
      //   interval:0,
      //     rotate:-30  //倾斜的程度
      // }
      boundaryGap: option.xAxis?.boundaryGap || true
    },
    yAxis: {
      type: option.yAxis?.type || "value",
      data: option.yAxis?.data || null,
      axisLabel: option.yAxis?.axisLabel || {
        // 设置字体倾斜
        // interval:0,
        //   rotate:-30  //倾斜的程度
      }
    },
    series: series
  }
}