/*
 * @Author: your name
 * @Date: 2021-10-09 11:01:19
 * @LastEditTime: 2021-12-23 16:37:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
 */
import * as echarts from "echarts";
import {doStr} from "@/utils/gol/dataTool"
let colors = ['#5B8FF9','#7DAAFF','#9AC5FF','#B9E2FF','#3A9EC0','#5BB9DB','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA'
,'#5B8FF9','#7DAAFF','#9AC5FF','#B9E2FF','#3A9EC0','#5BB9DB','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA']
function createData(ds = []) {
  let arr = [];
  for (let i = 0; i < ds.length; i++) {
    let arr1 = ds[i];
    for (let j = 0; j < arr1.length; j++) {
      let n = arr.findIndex(ele => {
        return ele.name === arr1[j].Key;
      })
      if (n === -1) {
        let obj =
        {
          name: arr1[j].Key,
          type: 'bar',
          stack: 'total',
          barWidth: 48,
          barGap: "-100%",
          emphasis: {
            focus: 'series'
          },
          label: {
            show: true,
            position: 'inside',
            color: '#000',
            fontWeight: 600,
            formatter: (res) => {
              return res.data + '%'
            }
          },
          itemStyle: {
            normal: {
              //柱体的颜色
              //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
              color: function () {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: colors[j]
                  },
                  {
                    offset: 1,
                    color: colors[j]
                  }
                ], false);
              }
            }

          },
          data: [arr1[j].Value]
        }
        arr.push(obj)
      } else {
        arr[n].data.push(arr1[j].Value)
      }
    }
  }
  return arr;
}
export default function createOpt(dx = [], ds = []) {
  const data = createData(ds);
  return {
    grid: {
      left: 10,
      right: 10,
      bottom: 10,
      containLabel: true
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "#08182F",
      color: "#fff",
      borderColor: "#3373CC",
      textStyle: {
        color: "#fff", //设置文字颜色
      },
      formatter: function(param) {
        let htmlStr = `<div>${param[0].name}</div>`;
        for(let i = 0; i < param.length; i++) {
            htmlStr += `<div style="display: flex;justify-content: space-between;margin-top: 4px">
            <span style="margin-right: 24px">${param[i].marker} ${param[i].seriesName} </span>
            <span> ${param[i].value} %</span>
            </div>`
        }
        return htmlStr
      },
      extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
    },
    color: colors,
    legend: {
      textStyle: { //图例文字的样式
        color: '#000',
        fontSize: 10
      },
      y: 10,
      x: 10,
      itemWidth: 12,
      itemHeight: 12,
      borderRadius: 1, //圆角半径
    },
    xAxis: {
      type: 'category',
      axisLabel :{  
          interval:0, 
          formatter: (value) => {
              let res = doStr(value, 10);
              return res
          }
      }, 
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#000",
        },
      },
      data: dx
    },
    yAxis: {
      type: 'value',
      max: 100,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#000",
        },
      },
      axisLabel: {
        formatter: (value) => {
          return value + '%'
        }
      },
      splitLine: {
        lineStyle: {
          type: "dashed", // y轴分割线类型
          color: "#012b4b",
        },
      },
    },
    series: data
  }

}