/**
 * @Auther wuxiangyu
 * @createTime 2021/06/15
 * @description 整合echarts的所有类型基础数据以及基础的展现形式
 *
 */

/**
 * @param title
 * @description echarts的图标名称，暂时用不到，show置为false
 */
const title = {
    show: false,
};
/**
 * @param tooltip
 * @description echarts的坐标轴触发类型，
 * axis：柱状图，折线图
 * item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
 */
const tooltip = {
    trigger: "axis",
    backgroundColor: "#FDFEFF",
    borderWidth: 0,
    borderColor: "none",

    // formatter: function(params, ticket, callback) {
    //     let paramsHtml = "";
    //     //处理鼠标指上去数据与html结合
    //     if (item.innerHtml) {
    //         paramsHtml = item.innerHtml(params);
    //     }
    //     callback(ticket, paramsHtml);
    //     return paramsHtml;
    // }
};
/**
 * @param legend
 * @description legend标签卡（显示或者隐藏某条折线数据）
 * @data array[] ["参数"] / [{name: "参数",icon："base64"}]
 * @right 设置位置为靠右
 * @itemHeight 设置图例高度
 */
const legend = {
    show: true,
    right: "4%",
    top: "15",
    data: [],
};

/**
 * @param grid
 * @description echarts图表在整个区域内 上下左右的距离
 * @containLabel 坐标刻度是否显示
 */
const grid = {
    top: "70",
    left: "10",
    right: "4%",
    bottom: "40",
    containLabel: true,
};

/**
 * @param xAxis
 * @description echarts X 坐标轴的数据源，以及坐标点是否由0开发
 * @containLabel 坐标刻度是否显示
 * @type： 'value' 数值轴，适用于连续数据。
 *         'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
 *         'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
 *          'log' 对数轴。适用于对数数据。
 */

const xAxis = {
    type: "category",
    // 坐标起始位置是否为左侧坐标线
    boundaryGap: false,
    data: [],
    nameTextStyle: {
        color: "#999999",
        fontSize: 12,
    },
    axisTick: {
        show: false,
    },
    axisLine: {
        show: false,
    },
    splitLine: {
        show: true,
        lineStyle: {
            color: "#EBEFF5",
            width: "1",
            type: "dashed",
        },
    },
};

/**
 * @param yAxis
 * @description echarts Y 坐标轴刻度以及标识,设置固定最小最大值可适配y周刻度
 */
const yAxis = {
    type: "value",
    min: undefined,
    max: undefined,
    splitNumber: 3,
    alignTicks: true,
    nameTextStyle: {
        padding: [0, 0, 0, 0], //index > 0 ? [0, 0, 0, -20] : [0, -20, 0, 0],
        fontSize: 12,
        align: "right", //index > 0 ? "right" : "left",
    },
    axisLabel: {
        fontStyle: 11,
        formatter: (value) => {
            let valueStr = value && value.toString().split('.')[1]
            if(valueStr && valueStr.length > 4){
                return Math.round(value * 10000 / 10000).toFixed(0)
            }else{
                return value
            }
        }
    },
    axisLine: {
        show: false,
    },
    splitLine: {
        show: true,
        lineStyle: {
            color: "#EBEFF5",
            width: "1",
            type: "dashed",
        },
    },
};

const visualMap = {
    right: "4%",
    top: "15",
    orient: "horizontal",
    min: undefined,
    max: undefined,
    calculable: true,
    realtime: false,
    inRange: {
        color: "",
        symbol: "circle",
    },
};

/**
 * @param series
 * @description echarts 数据源
 * @type 设置值为'line' / 'bar'
 * @lineStyle 设置线宽以及是否为虚线 solid / dotted
 * @label 是否展示线上刻度值
 */
const series = {
    id: null,
    name: "",
    type: "line",
    itemStyle: {
        color: "",
    },
    lineStyle: {
        width: 1,
        type: "solid",
    },
    label: {
        show: false,
    },
    emphasis: {
        lineStyle: {
            color: "",
        },
    },
    data: [],
};
const dataZoom = [
    {
        type: "inside",
        start: 0,
        end: 100,
    },
    {
        brushSelect: false,
        show: true,
        bottom: "0",
        height: "24",
        backgroundColor: "rgba(240, 242, 245, 1)",
        handleSize: "80%",
        handleIcon:
            "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHpSURBVHgBtVXLbcJAFFybv4TAiAa4cgsVhA6gA0QF0EGgAzpISoAKEm7c4MYfuQAQhgN/cGYcHJHEthxsRrLXfl7P7O57OysJB3S7XSUej1d0Xc/jyiCUuX7SJEnqoW2ez+dWNptV7Tgkq2C/388EAoFXkOSTyaSIxWIiEomIUChkfD8ej8a1Xq/FZrMREHnDVXcS+sZoNKpMJpPlfD7X8ZPuBuw7HA6Xg8Gg6kg+Ho9fZrOZfjgc9P+C/0ynU50ctiO/l/y3yJ+ZcM05RS/ktyJcYnKSWzZuslxLp9OKmUQvIIcCsEgMbiohWIKA7U+dTsdVzEQqlRKsQJZ5EA9FlqETdrudq5gJrIhgeZ9Opyqe5UIikRB+g4PGMj3LyMtTOBwWfoMbE9wZJlkJBoPCb1wLxhB4KCigIhnCb9CrAE1GFalOFXEvOGjkoCfD0Nrb7Vb4jdVqxaYlR6PRBl8ul4ttZ/RxFbsFbRwzaBovMLp3Wq5fIBcM78sqeMMylTXgmhhPIMdisdCgU//xgRb7MLs2AeOreT1wyOE4RarzbHCbEx6r7MszwGrktoc+mhr8pETTojNy65uWwhrf7/dGpbACIfIBrbLVoW8pcCsERyyghIvYkE8IKYyDTEWjom1jkzZyuZxmx/EJrZz2vp5XBP8AAAAASUVORK5CYII=",
    },
];

export {
    title,
    tooltip,
    legend,
    grid,
    dataZoom,
    xAxis,
    yAxis,
    visualMap,
    series,
};
