import * as echarts from 'echarts'

export function pieUtils(id, name, data) {
  // 验证 这个 是否被创建了
  let linearBarDom = echarts.getInstanceByDom(id)

  if (linearBarDom == null) {
    linearBarDom = echarts.init(id)
  }

  linearBarDom.setOption({
    title: {
      text: name, // 设置主标题文本
      show: true, // 显示标题组件
      x: 'left', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
      y: 'top', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
      padding: [10, 0, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
    },
    // 这个就是旁边的那个颜色小方块
    legend: {
      //朝向 ： 垂直
      orient: 'vertical',
      x: 'right', //可设定图例在left、right、center
      y: 'top', //可设定图例在top、bottom、center
      padding: [10, 50, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
      // 这个是 圆形旁边的 小方块 自定义
      formatter: function (name) {
        // 通过name获取到数组对象中的单个对象
        let singleData = data.filter(function (item) {
          return item.name == name
        })
        return `${name} | ${singleData[0].value} ${singleData[0].unit}`
      },
    },
    tooltip: {
      //提示框组件
      trigger: 'item', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
      // backgroundColor: 'rgba(255,255,255,0.8)', //设置背景图片 rgba格式
      // color: 'black',
      // borderWidth: '1', //边框宽度设置1
      // borderColor: 'gray', //设置边框颜色
      // textStyle: {
      //   color: 'black', //设置文字颜色
      // },
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
      // formatter: '{a} <br/>{b} : {c} <br/>百分比 : {d}%', //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
      //原来的 替换成我需要的 这个是鼠标移上去出现的
      formatter: function (data) {
        return `
        <span style="background-color:${data.color};display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px"></span>
              <span>${data.seriesName}<span><br/>
              <span>${data.name} : <span style="color:red;">${data.value}</span> ${data.data.unit}<span><br/>
              <span>百分比 : ${data.percent} %</span>
              `
      },
    },
    series: [
      {
        center: ['50%', '50%'],
        radius: '50%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
        type: 'pie', // 类型 圆形
        data: data, // 数据
        name: name, // 名字
        minAngle: 10, //设置扇形的最小占比 不然有些太小了 就看不到了
      },
    ],
    //color: createColorCode(data),
  })
  window.onresize = function () {
    //自适应大小, 不用的话不会自适应大小。
    linearBarDom.resize()
  }
}

export function barUtils(id, name, Xdata, Ydata) {
  // 验证 这个 是否被创建了
  let linearBarDom = echarts.getInstanceByDom(id)
  if (linearBarDom == null) {
    linearBarDom = echarts.init(id)
  }
  linearBarDom.setOption({
    title: {
      text: name,
    },
    xAxis: {
      type: 'category',
      data: Xdata,
    },
    yAxis: {
      type: 'value',
    },
    tooltip: {},
    dataZoom: [
      // 这个是数据过多 就可以横线拉动
      {
        type: 'slider',
        show: true,
        start: 0,
        end: 50,
        xAxisIndex: [0],
      },
    ],
    series: [
      {
        data: Ydata,
        type: 'bar',
        // 这个是在柱状图中显示 数字
        label: {
          // 开启
          show: true,
          // 显示在上方
          position: 'top',
          //颜色
          color: 'black',
        },
      },
    ],
  })
  window.onresize = function () {
    //自适应大小, 不用的话不会自适应大小。
    linearBarDom.resize()
  }
}

// 主题注册 也没有用到
export function echartsZhuTiZhuCe() {
  zhuTi.filter((item) => {
    echarts.registerTheme(item.zhuTiName, item)
  })
}

// 随机生成 颜色 这个占时没有用到
export function createColorCode(data) {
  var list = []
  for (let i = 0; i < data.length; i++) {
    let color = ''
    let r = Math.floor(Math.random() * 256)
    let g = Math.floor(Math.random() * 256)
    let b = Math.floor(Math.random() * 256)
    color = `rgb(${r},${g},${b})`
    list.push(color)
  }
  return list
}
