import {setOptions} from "@/echarts/echarts";
import * as echarts from 'echarts';
import {requestInstance} from "@/service";
export function setEcharts(ele,option){
    setOptions(ele,option)
}


let  option = {
    color:['#5EA6E5','#FE4F4E','#C0A5F1','#FABA52'],
    tooltip: {
        show:false,
        trigger: 'item',
    },
    legend: {
        bottom: '0%',
        left: 'center',
        padding:[0,40,0,40],
        textStyle: {
            color:'#25a9ee',
            fontSize: 13
        }

    },
    grid:{
        left:'5%',
        bottom:'0%',
        right:'5%',
        top:'5%',
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%','70%'],
            center: ['50%','40%'],
            avoidLabelOverlap: false,
            label: {
                normal :{
                    show: true,
                    position:'center',
                    textStyle:{
                        fontSize:15,
                        color:'#fff',
                        padding: [-20,0,0,0],
                    },
                    formatter:'0'
                },
            },
            emphasis: {
                label: {
                    show: true,
                    formatter: [
                        '{b}',
                        '({c})','{d}%'
                    ].join('\n'),
                    fontSize: '13',
                    padding: [30,0,0,0],
                    fontWeight: 'bold'
                }
            },
            data: [
                {value: 0, name: '建设管理'},
                {value: 0, name: '房屋管理'},
                {value: 0, name: '城市管理'},
                {value: 0, name: '综合管理'}
            ],

        }
    ]
};
let gjTrend =  {
    color:['#5684d1'],
    tooltip:{
        // show:true,
        trigger:'axis',
        axisPointer: {
            type: 'shadow'
        },
        formatter: '{a} <br/> {b}：{c}次'
    },
    grid:{
        containLabel:false,
        left:'10%',
        right:'6%',
        top:'5%',
        bottom:'10%',
    },
    xAxis: {
        axisTick:{
            show:false,
        },
        type: 'category',
        boundaryGap: false,
        data:  [],
        axisLine:{
            lineStyle:{
                color:'#fff'
            }
        },
        axisLabel:{
            color:'#fff'
        }

    },
    yAxis: {
        splitLine: {
            lineStyle:{
                type:'dashed',
                color:'rgba(255,255,255,0.5)'
            }
        },
        axisTick:{
            show:false,
        },
        type: 'value',
        axisLine:{
            lineStyle:{
                color:'#fff'
            }
        },
        axisLabel:{
            color:'#fff',
            formatter : function (value)
            {
                let valueTxt = '';
                if (value> 1000000) {
                    valueTxt = value/10000 + '万';
                }
                else {
                    valueTxt = value;
                }
                return valueTxt ;
            }

        }
    },
    series: [{

        name:'服务调用趋势',
        data: [],
        type: 'line',
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
                offset: 0,
                color: '#0284a8'
            }, {
                offset: 1,
                color: '#062541'
            }
        ]),
        areaStyle: {}
    }]
};
let zlEchartsOpt =  {
    color: ['#1F88FE', '#59FFC1', '#F8FE44', '#C7A2F2'],
    tooltip:{
        // show:true,
        trigger:'axis',
        axisPointer: {
            type: 'shadow'
        },
    },
    legend: {
        left:'right',
        icon:'rect',
        itemWidth:14,
        itemHeight:14,

        textStyle:{
            color:'#fff'
        }
    },

    grid: {
        top:'13%',
        left: '5%',
        right: '4%',
        bottom: '5%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data:  [],
            axisLine:{
                lineStyle:{
                    color:'#fff'
                }
            },
            axisLabel:{
                color:'#fff'
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLine:{
                lineStyle:{
                    color:'#fff'
                }
            },
            splitLine: {
                lineStyle:{
                    type:'dashed',
                    color:'rgba(255,255,255,0.5)'
                }
            },
            axisLabel:{
                color:'#fff',
                formatter : function (value)
                {
                    let valueTxt = '';
                    if (value> 1000000) {
                        valueTxt = value/10000 + '万';
                    }
                    else {
                        valueTxt = value;
                    }
                    return valueTxt ;
                }
            }
        }
    ],
    series: [
        {
            name: '质检',
            type: 'line',

            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,

            emphasis: {
                focus: 'series'
            },
            areaStyle: {
                opacity: 0.5,

            },
            data: []
        },
        {
            name: '清洗',
            type: 'line',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.5,

            },
            emphasis: {
                focus: 'series'
            },
            data: []
        },
        {
            name: '标签',
            type: 'line',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.5
            },
            emphasis: {
                focus: 'series'
            },
            data: []
        },
        {
            name: '安全',
            type: 'line',

            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.5,
            },
            emphasis: {
                focus: 'series'
            },
            data: []
        },
    ]
};
let qzjEchartsOpt = {
    grid: {
        top:'5%',
        left: '3%',
        right: '4%',
        bottom: '5%',
        containLabel: true
    },
    xAxis: {
        axisTick:{
            show:false,
        },
        type: 'category',
        data: ['前置机1', '前置机2', '前置机3', '前置机4', '前置机5'],
        axisLine:{
            lineStyle:{
                color:'#fff'
            }
        },
        axisLabel:{
            color:'#fff'
        }
    },
    yAxis: {
        splitLine:{
            show:false
        },
        axisTick:{
            show:false,
        },
        type: 'value',
        axisLine:{
            lineStyle:{
                color:'#fff'
            }
        },
        axisLabel:{
            color:'#fff'
        }
    },
    series: [
        {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0,
                    color: '#927e41'
                }, {
                    offset: 1,
                    color: '#915725'
                }
            ]),
            barWidth:30,
            data: [
                120, 200, 150, 80, 70],
            type: 'bar'
        }
    ]
};
let shareEchartsOpt = {
    color:['#55fec6','#fef205'],
    tooltip:{
        // show:true,
        trigger:'axis',
        axisPointer: {
            type: 'shadow'
        },
    },
    legend: {
        left: 'right',
        textStyle: {
            color:'#fff',
            fontSize: 14
        },

    },
    grid:{
        left:'10%',
        right:'5%',
        top:'10%',
        bottom:'10%'
    },
    xAxis: {

        axisTick:{
            show:false,
        },
        type: 'category',
        data: [],
        axisLine:{
            lineStyle:{
                color:'#fff'
            }
        },
        axisLabel:{
            color:'#fff',

        }
    },
    yAxis: {
        splitLine: {
            lineStyle:{
                type:'dashed',
                color:'rgba(255,255,255,0.5)'
            }
        },
        axisTick:{
            show:false,
        },
        type: 'value',
        axisLine:{
            lineStyle:{
                color:'#fff'
            }
        },
        axisLabel:{
            color:'#fff',
            formatter : function (value)
            {
                let valueTxt = '';
                if (value> 1000000) {
                    valueTxt = value/10000 + '万';
                }
                else {
                    valueTxt = value;
                }
                return valueTxt ;
            }
        }
    },
    series: [{
        name:'空间',
        data: [],
        type: 'line',
        symbol: 'circle',
        symbolSize: 10,
        smooth: true,
        lineStyle: {
            color: '#54fdbb',

            type: 'dashed'
        },
        itemStyle:{
            color: '#54fdbb',
        }
    },
        {
            name:'业务',
            data: [],
            type: 'line',
            symbol: 'circle',
            symbolSize: 10,
            smooth: true,
            lineStyle: {
                color: '#fef205',

                type: 'dashed'
            },
            itemStyle:{
                color: '#fef205',
            }
        }
    ]
};
let t10EchartsOpt = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '5%',
        right: '5%',
        bottom: '0%',
        top: '5%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        show:false
    },
    yAxis: {
        type: 'category',
        data: [],
        splitLine: {show: false},
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        offset: 10,
        nameTextStyle: {
            fontSize: 15
        },
        axisLabel:{
            color:'#fff',
            formatter : function (value)
            {
                let valueTxt = '';
                if (value.length > 8) {
                    valueTxt = value.substring(0, 9) + '...';
                }
                else {
                    valueTxt = value;
                }
                return valueTxt ;
            }
        }
    },
    series: [
        {
            name: '数量',
            type: 'bar',
            data: [],
            barWidth: 14,
            barGap: 10,
            smooth: true,
            label: {
                normal: {
                    show: false,
                    position: 'right',
                    offset: [5, -2],
                    textStyle: {
                        color: '#F68300',
                        fontSize: 13
                    }
                }
            },
            itemStyle: {
                emphasis: {
                    barBorderRadius: 7
                },
                normal: {
                    barBorderRadius: 7,
                    color: new echarts.graphic.LinearGradient(
                     0, 0, 1, 0,
                     [
                         {offset: 0, color: '#2f79cc'},
                         {offset: 1, color: '#07f9fe'}

                     ]
                    )
                }
            }
        }
    ]
}

//柱状图
export const HistogramChartOption ={
    backgroundColor: '#ffffff',
    color: ['#f58220', '#f15b6c', '#6950a1'],
    title: {
        text: '',
        textStyle: {
            fontSize: 19,
            fontWeight: 400,
            color: '#a8aab0'
        },
        left: 'center',
        top: '5%'
    },
    grid: {
        left: '5%',
        right: '5%',
        bottom: '10%',
        top: '18%',
        containLabel: true,
    },
    tooltip: {
        //提示框组件
        trigger: 'axis',
        formatter: function (params) {
            var relVal = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
                relVal += '<br/>';
                relVal += '<span style="display:inline-block;margin-right:5px;border-radius:2px;width:9px;height:9px;background-color:' + params[i].color + '"></span>';
                relVal += params[i].seriesName + ' : ' + params[i].value;
            }
            return relVal;
        },
        axisPointer: {
            type: 'shadow',
        },
        textStyle: {
            color: '#a8aab0',
            fontStyle: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 12,
        },
    },
    legend: {
        //图例组件，颜色和名字
        bottom: '0',
        itemWidth: 10,
        itemHeight: 10,
        data: [
            {
                name: '订单总量',
            },
            {
                name: '已结算订单',
            },
            {
                name: '已退订单',
            },
        ],
        textStyle: {
            color: '#a8aab0',
            fontStyle: 'normal',
            fontFamily: '微软雅黑',
            fontSize: 12,
        },
    },
    xAxis: [
        {
            type: 'category',
            //	boundaryGap: true,//坐标轴两边留白
            data: ['爱立信端局', '中兴端局', '爱立信HSS', '中兴HSS', '华为HSS', '中兴VIMS',  '华为智能网'],
            axisLabel: {
                //坐标轴刻度标签的相关设置。
                //		interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
                //	margin:15,
                textStyle: {
                    color: '#204C6F',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 12,
                },
            },
            axisTick: {
                //坐标轴刻度相关设置。
                show: false,
            },
            axisLine: {
                //坐标轴轴线相关设置
                lineStyle: {
                    color: '#204C6F',
                    opacity: 0.2,
                },
            },
            splitLine: {
                //坐标轴在 grid 区域中的分隔线。
                show: false,
            },
        },
    ],
    yAxis: [
        {
            type: 'value',
            splitNumber: 5,
            axisLabel: {
                textStyle: {
                    color: '#204C6F',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 12,
                },
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: ['#204C6F'],
                    opacity: 0.3,
                },
            },
            boundaryGap: ['0', '20%'],
        },
    ],
    series: [
        {
            name: '订单总量',
            type: 'bar',
            data: [500, 200, 50, 60, 36, 900, 9],
            // barWidth: 5
        },
        {
            name: '已结算订单',
            type: 'bar',
            data: [400, 180, 40,30, 31, 200, 8],
            // barWidth: 5
        },
        {
            name: '已退订单',
            type: 'bar',
            data: [300, 120, 20, 20, 26, 120, 7],
            // barWidth: 5
        },
    ],
}
//饼图
export const PieChartOption = {
    backgroundColor: '#ffffff',
    color: ['#f58220', '#f15b6c', '#6950a1'],
    title: {
        text: '某站点用户访问来源',
        textStyle: {
            fontSize: 19,
            fontWeight: 400,
            color: '#a8aab0'
        },
        left: 'center'
    },
    grid: {
        left: '5%',
        right: '5%',
        bottom: '2%',
        top: '15%',
        containLabel: true,
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
}
//折线图
export const  PolylineChartOption = {
    backgroundColor: '#ffffff',
    color: ['#f58220', '#f15b6c', '#6950a1', '#F56948', '#9E87FF'],
    title: {
        text: '全国6月销售统计',
        textStyle: {
            fontSize: 19,
            fontWeight: 400
        },
        left: 'center',
        top: '5%'
    },
    legend: {
        icon: 'circle',
        top: '10%',
        right: '8%',
        itemWidth: 6,
        itemGap: 20,
        textStyle: {
            color: '#556677'
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            label: {
                show: true,
                backgroundColor: '#fff',
                color: '#556677',
                borderColor: 'rgba(0,0,0,0)',
                shadowColor: 'rgba(0,0,0,0)',
                shadowOffsetY: 0
            },
            lineStyle: {
                width: 0
            }
        },
        backgroundColor: '#fff',
        textStyle: {
            color: '#5c6c7c'
        },
        padding: [10, 10],
        extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
    },
    grid: {
        left: '5%',
        right: '5%',
        bottom: '2%',
        top: '18%',
        containLabel: true,
    },
    xAxis: [{
        type: 'category',
        data: ['北京', '上海', '广州', '深圳', '香港', '澳门', '台湾'],
        axisLine: {
            lineStyle: {
                color: '#DCE2E8'
            }
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            interval: 0,
            textStyle: {
                color: '#556677'
            },
            // 默认x轴字体大小
            fontSize: 12,
            // margin:文字到x轴的距离
            margin: 15
        },
        axisPointer: {
            label: {
                // padding: [11, 5, 7],
                padding: [0, 0, 10, 0],
                /*
    除了padding[0]建议必须是0之外，其他三项可随意设置

    和CSSpadding相同，[上，右，下，左]

    如果需要下边线超出文字，设左右padding即可，注：左右padding最好相同

    padding[2]的10:

    10 = 文字距下边线的距离 + 下边线的宽度

    如：UI图中文字距下边线距离为7 下边线宽度为2

    则padding: [0, 0, 9, 0]

                */
                // 这里的margin和axisLabel的margin要一致!
                margin: 15,
                // 移入时的字体大小
                fontSize: 12,
                backgroundColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: '#fff' // 0% 处的颜色
                    }, {
                        // offset: 0.9,
                        offset: 0.86,
                        /*
0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）

                        */
                        color: '#fff' // 0% 处的颜色
                    }, {
                        offset: 0.86,
                        color: '#33c0cd' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#33c0cd' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            }
        },
        boundaryGap: false
    }],
    yAxis: [{
        type: 'value',
        axisTick: {
            show: false
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#DCE2E8'
            }
        },
        axisLabel: {
            textStyle: {
                color: '#556677'
            }
        },
        splitLine: {
            show: false
        }
    }, {
        type: 'value',
        position: 'right',
        axisTick: {
            show: false
        },
        axisLabel: {
            textStyle: {
                color: '#556677'
            },
            formatter: '{value}'
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#DCE2E8'
            }
        },
        splitLine: {
            show: false
        }
    }],
    series: [{
        name: 'Adidas',
        type: 'line',
        data: [10, 10, 30, 12, 15, 3, 7],
        symbolSize: 1,
        symbol: 'circle',
        smooth: true,
        yAxisIndex: 0,
        showSymbol: false,
        lineStyle: {
            width: 5,
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: '#9effff'
            },
                {
                    offset: 1,
                    color: '#9E87FF'
                }
            ]),
            shadowColor: 'rgba(158,135,255, 0.3)',
            shadowBlur: 10,
            shadowOffsetY: 20
        }
    }, {
        name: 'Nike',
        type: 'line',
        data: [5, 12, 11, 14, 25, 16, 10],
        symbolSize: 1,
        symbol: 'circle',
        smooth: true,
        yAxisIndex: 0,
        showSymbol: false,
        lineStyle: {
            width: 5,
            color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
                offset: 0,
                color: '#73DD39'
            },
                {
                    offset: 1,
                    color: '#73DDFF'
                }
            ]),
            shadowColor: 'rgba(115,221,255, 0.3)',
            shadowBlur: 10,
            shadowOffsetY: 20
        }
    },
        {
            name: '老北京布鞋',
            type: 'line',
            data: [150, 120, 170, 140, 500, 160, 110],
            symbolSize: 1,
            yAxisIndex: 1,
            symbol: 'circle',
            smooth: true,
            showSymbol: false,
            lineStyle: {
                width: 5,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: '#fe9a'
                },
                    {
                        offset: 1,
                        color: '#fe9a8b'
                    }
                ]),
                shadowColor: 'rgba(254,154,139, 0.3)',
                shadowBlur: 10,
                shadowOffsetY: 20
            }
        }
    ]
}
//面积图
const color = ['#f58220', '#f15b6c', '#6950a1',"#FF515A","#8B5CFF","#00CA69"]
const hexToRgba = (hex, opacity) => {
    let rgbaColor = "";
    let reg = /^#[\da-f]{6}$/i;
    if (reg.test(hex)) {
        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
            "0x" + hex.slice(3, 5)
        )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
    }
    return rgbaColor;
}
export const  MeasureChartOption = {
    backgroundColor: "#ffffff",
    color: color,
    title: {
        text: '全国6月销售统计',
        textStyle: {
            fontSize: 19,
            fontWeight: 400
        },
        left: 'center',
        top: '5%'
    },
    legend: {
        right: 10,
        top: 10
    },
    grid: {
        left: '5%',
        right: '5%',
        bottom: '2%',
        top: '18%',
        containLabel: true,
    },
    tooltip: {
        trigger: "axis",
        formatter: function(params) {
            let html = '';
            params.forEach(v => {
                html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                ${v.seriesName}.${v.name}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
                万元`;
            })
            return html
        },
        extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
        axisPointer: {
            type: 'shadow',
            shadowStyle: {
                color: '#ffffff',
                shadowColor: 'rgba(225,225,225,1)',
                shadowBlur: 5
            }
        }
    },
    xAxis: [{
        type: "category",
        boundaryGap: false,
        axisLabel: {
            formatter: '{value}月',
            textStyle: {
                color: "#333"
            }
        },
        axisLine: {
            lineStyle: {
                color: "#D9D9D9"
            }
        },
        data: ["1", "2", "3", "4", "5", "6", "7", "8"]
    }],
    yAxis: [{
        type: "value",
        name: '',
        axisLabel: {
            textStyle: {
                color: "#666"
            }
        },
        nameTextStyle: {
            color: "#666",
            fontSize: 12,
            lineHeight: 40
        },
        splitLine: {
            lineStyle: {
                type: "dashed",
                color: "#E9E9E9"
            }
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        }
    }],
    series: [{
        name: "2018",
        type: "line",
        smooth: true,
        // showSymbol: false,/
        symbolSize: 8,
        zlevel: 3,
        lineStyle: {
            normal: {
                color: color[0],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[0], 0.5),
                shadowOffsetY: 8
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [{
                        offset: 0,
                        color: hexToRgba(color[0], 0.3)
                    },
                        {
                            offset: 1,
                            color: hexToRgba(color[0], 0.1)
                        }
                    ],
                    false
                ),
                shadowColor: hexToRgba(color[0], 0.1),
                shadowBlur: 10
            }
        },
        data: [100, 138, 350, 173, 180, 150, 180, 230]
    }, {
        name: "2019",
        type: "line",
        smooth: true,
        // showSymbol: false,
        symbolSize: 8,
        zlevel: 3,
        lineStyle: {
            normal: {
                color: color[1],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[1], 0.5),
                shadowOffsetY: 8
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [{
                        offset: 0,
                        color: hexToRgba(color[1], 0.3)
                    },
                        {
                            offset: 1,
                            color: hexToRgba(color[1], 0.1)
                        }
                    ],
                    false
                ),
                shadowColor: hexToRgba(color[1], 0.1),
                shadowBlur: 10
            }
        },
        data: [233, 233, 200, 180, 199, 233, 210, 180]
    },
        {
            name: "2020",
            type: "line",
            smooth: true,
            // showSymbol: false,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
                normal: {
                    color: color[1],
                    shadowBlur: 3,
                    shadowColor: hexToRgba(color[2], 0.5),
                    shadowOffsetY: 8
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [{
                            offset: 0,
                            color: hexToRgba(color[2], 0.3)
                        },
                            {
                                offset: 1,
                                color: hexToRgba(color[2], 0.1)
                            }
                        ],
                        false
                    ),
                    shadowColor: hexToRgba(color[2], 0.1),
                    shadowBlur: 10
                }
            },
            data: [121, 133, 100, 230, 109, 133, 110, 100]
        }]
}
//圆环图
export const CircleChartOption = {
    backgroundColor: '#ffffff',
    color: ['#f58220', '#f15b6c', '#6950a1', '#F56948', '#9E87FF'],
    title: {
        text: '某站点用户访问来源',
        left: 'center',
        textStyle: {
            fontSize: 19,
            fontWeight: 400,
            color: '#a8aab0'
        },
    },
    grid: {
        left: '5%',
        right: '5%',
        bottom: '2%',
        top: '15%',
        containLabel: true,
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'horizontal',
        // left: 10,
        y:'bottom',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: false,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ]
        }
    ]
}
export function setLabelStaLeftEcharts(ele,xData,data) {
   let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: xData,
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '数量',
                type: 'bar',
                barWidth: '60%',
                data: data
            }
        ]
    };
   setOptions(ele,option)
}
export function setLabelStaRightEcharts(ele,xData,data) {
    let  option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: xData,
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '数量',
                type: 'bar',
                barWidth: '60%',
                data: data
            }
        ]
    };
    setOptions(ele,option)
}
export function setLabelStaTopEcharts(ele,data) {
    let  option = {
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series: [
            {
                type: 'tree',
                id: 0,
                name: 'tree1',
                data: [data],

                top: '10%',
                left: '8%',
                bottom: '10%',
                right: '15%',

                symbolSize: 10,
                edgeShape: 'polyline',
                edgeForkPosition: '63%',
                initialTreeDepth: 3,

                lineStyle: {
                    width: 2,
                    color: "#0099cc"

                },

                label: {
                    backgroundColor: '#fff',
                    position: 'left',
                    verticalAlign: 'middle',
                    align: 'right'
                },

                leaves: {
                    label: {
                        position: 'right',
                        verticalAlign: 'middle',
                        align: 'left'
                    }
                },
                roam: true,
                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750
            }
        ]
    };
    setOptions(ele,option)
}
export {
    option,
    gjTrend,
    zlEchartsOpt,
    qzjEchartsOpt,
    shareEchartsOpt,
    t10EchartsOpt
}
export function setDataQualityStaSourceEcharts(ele,code,inspection_num,unitMap,error_num){
    let option = {
        tooltip: {
            confine: true,
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                // color:'#0062ff',
                shadowStyle: {
                    color: '#FFA980',
                    opacity: 0.1
                }
            },
            formatter: function(param) {
                let resultTooltip = "";
                resultTooltip =
                    "<div style='text-align:center;'>" + unitMap[param[0].name] + "</div>" +
                    "<div style='padding-top:5px;'>"
                for (let i = 0; i < param.length; i++) {
                    if (i > 0) {
                        resultTooltip += "<div style='padding-top:2px;'>"
                    }
                    resultTooltip +=
                        param[i].marker +
                        "</span><span style = 'float:right;'>" + param[i].value + "</span>"
                }
                return resultTooltip
            },
        },
        legend: {
            selectedMode: false,
            data: ['正常数据', '异常数据'],
            right: 30,
            top: 23,
            icon: "circle"
        },
        label: {
            textStyle: {
                color: 'black',
                fontSize: 16,
                fontWeight: 600
            }
        },
        grid: {
            height: 'auto',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: code,
            axisTick: { // 去除坐标轴上的刻度线
                show: false
            },
            splitLine: { // 控制网格线是否显示
                lineStyle: { //  改变样式
                    width: '0.2',
                    color: '#507b7d' // 修改网格线颜色
                }
            },
            axisLine: { // y轴的颜色和宽度
                show: false,
                lineStyle: {
                    color: 'rgba(0,0,0,0.4)', // y坐标轴的轴线颜色
                }
            },
            axisLabel: { // x轴的字体样式
                show: true, //这行代码控制着坐标轴x轴的文字是否显示
                textStyle: {
                    fontSize: 10, // x轴字体大小
                },
                formatter: function (value) {
                    let texts = []
                    texts.push(unitMap[value])
                    return texts
                }
            }

        },
        yAxis: {
            type: 'value',
            axisTick: { // 去除坐标轴上的刻度线
                show: false
            },
            splitLine: { // 控制网格线是否显示
                lineStyle: { //  改变样式
                    width: '0.2',
                    color: '#507b7d' // 修改网格线颜色
                }
            },
            axisLine: { // y轴的颜色和宽度
                show: false,
                lineStyle: {
                    color: 'rgba(0,0,0,0.4)', // y坐标轴的轴线颜色
                }
            },
            axisLabel: { // x轴的字体样式
                show: true, //这行代码控制着坐标轴x轴的文字是否显示
                textStyle: {
                    fontSize: 10, // x轴字体大小
                }
            }
        },
        series: [{
            name: '正常数据',
            type: 'bar',
            data: inspection_num,
            itemStyle: {
                barBorderRadius: [90, 90, 0, 0],
                color: "#0373ca"
            },
            barWidth: '6%',
        },
            {
                name: '异常数据',
                type: 'bar',
                data: error_num,
                itemStyle: {
                    barBorderRadius: [90, 90, 0, 0],
                    color: "#ff120c"
                },
                barWidth: '6%',

            }
        ]
    };

    return setOptions(ele,option)
}

export function setDataQualityStaSourceEchartsUnit(ele,inspection_num,error_num,month){
    let option = {
        tooltip: {
            confine: true,
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                // color:'#0062ff',
                shadowStyle: {
                    color: '#FFA980',
                    opacity: 0.1
                }
            },
            formatter: function(param) {
                var resultTooltip = "";
                resultTooltip =
                    "<div style='text-align:center;'>" + param[0].name + "</div>" +
                    "<div style='padding-top:5px;'>"
                for (var i = 0; i < param.length; i++) {
                    if (i > 0) {
                        resultTooltip += "<div style='padding-top:2px;'>"
                    }
                    resultTooltip +=
                        param[i].marker +
                        "</span><span style = 'float:right;'>" + param[i].value + "</span>"
                }
                return resultTooltip
            },
        },
        legend: {
            selectedMode: false,
            data: ['正常数据', '异常数据'],
            right: 0,
            top: 23,
            icon: "circle"
        },
        label: {
            textStyle: {
                color: 'black',
                fontSize: 16,
                fontWeight: 600
            }
        },
        grid: {
            height: 'auto',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: month,
            axisTick: { // 去除坐标轴上的刻度线
                show: false
            },
            splitLine: { // 控制网格线是否显示
                lineStyle: { //  改变样式
                    width: '0.2',
                    color: '#507b7d' // 修改网格线颜色
                }
            },
            axisLine: { // y轴的颜色和宽度
                show: false,
                lineStyle: {
                    color: 'rgba(0,0,0,0.4)', // y坐标轴的轴线颜色
                }
            },
            axisLabel: { // x轴的字体样式
                show: true, //这行代码控制着坐标轴x轴的文字是否显示
                textStyle: {
                    fontSize: 10, // x轴字体大小
                }
            }

        },
        yAxis: {
            type: 'value',
            axisTick: { // 去除坐标轴上的刻度线
                show: false
            },
            splitLine: { // 控制网格线是否显示
                lineStyle: { //  改变样式
                    width: '0.2',
                    color: '#507b7d' // 修改网格线颜色
                }
            },
            axisLine: { // y轴的颜色和宽度
                show: false,
                lineStyle: {
                    color: 'rgba(0,0,0,0.4)', // y坐标轴的轴线颜色
                }
            },
            axisLabel: { // x轴的字体样式
                show: true, //这行代码控制着坐标轴x轴的文字是否显示
                textStyle: {
                    fontSize: 10, // x轴字体大小
                }
            }
        },
        series: [{
            name: '正常数据',
            type: 'bar',
            data: inspection_num,
            itemStyle: {
                barBorderRadius: [90, 90, 0, 0],
                color: "rgba(116,41,201, 1)"
            },
            barWidth:14,
        },
            {
                name: '异常数据',
                type: 'bar',
                data: error_num,
                itemStyle: {
                    barBorderRadius: [90, 90, 0, 0],
                    color: "rgba(255,108,62, 1)"
                },
                barWidth: 14,

            }
        ]
    };

    return setOptions(ele,option)
}
export function setQualityCheckStaEcharts(ele,xAxisData,bgColor,yAxisData1,yAxisData2){
  const options=  {
      backgroundColor: bgColor,
      color: color,
      legend: {
          right: 10,
          top: 10
      },
      tooltip: {
          trigger: "axis",
          formatter: function(params) {
              let html = '';
              params.forEach(v => {
                  console.log(v)
                  html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                ${v.seriesName}.${v.name}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>`;
              })



              return html
          },
          extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
          axisPointer: {
              type: 'shadow',
              shadowStyle: {
                  color: '#ffffff',
                  shadowColor: 'rgba(225,225,225,1)',
                  shadowBlur: 5
              }
          }
      },
      grid: {
          top: '20%',
          left:'5%',
          right:'5%',
          bottom:'10%',
          containLabel: true
      },
      xAxis: [{
          type: "category",
          boundaryGap: false,
          axisLabel: {
              formatter: '{value}',
              textStyle: {
                  color: "#333"
              }
          },
          axisLine: {
              lineStyle: {
                  color: "#D9D9D9"
              }
          },
          data: xAxisData
      }],
      yAxis: [{
          type: "value",
          name: '单位：条',
          axisLabel: {
              textStyle: {
                  color: "#666"
              }
          },
          nameTextStyle: {
              color: "#666",
              fontSize: 12,
              lineHeight: 40
          },
          splitLine: {
              lineStyle: {
                  type: "dashed",
                  color: "#E9E9E9"
              }
          },
          axisLine: {
              show: false
          },
          axisTick: {
              show: false
          }
      }],
      series: [{
          name: "正常条数",
          type: "line",
          smooth: true,
          // showSymbol: false,/
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
              normal: {
                  color: color[0],
                  shadowBlur: 3,
                  shadowColor: hexToRgba(color[0], 0.5),
                  shadowOffsetY: 8
              }
          },
          areaStyle: {
              normal: {
                  color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [{
                          offset: 0,
                          color: hexToRgba(color[0], 0.3)
                      },
                          {
                              offset: 1,
                              color: hexToRgba(color[0], 0.1)
                          }
                      ],
                      false
                  ),
                  shadowColor: hexToRgba(color[0], 0.1),
                  shadowBlur: 10
              }
          },
          data: yAxisData1
      }, {
          name: "异常条数",
          type: "line",
          smooth: true,
          // showSymbol: false,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
              normal: {
                  color: color[1],
                  shadowBlur: 3,
                  shadowColor: hexToRgba(color[1], 0.5),
                  shadowOffsetY: 8
              }
          },
          areaStyle: {
              normal: {
                  color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [{
                          offset: 0,
                          color: hexToRgba(color[1], 0.3)
                      },
                          {
                              offset: 1,
                              color: hexToRgba(color[1], 0.1)
                          }
                      ],
                      false
                  ),
                  shadowColor: hexToRgba(color[1], 0.1),
                  shadowBlur: 10
              }
          },
          data: yAxisData2
      }]
  };
  setOptions(ele,options)
}
export function setQualityQuestionTypeStaEcharts(ele,colorList,data1){
    const options =  {
        backgroundColor: '#fff',
        "title": {
            "text": "",
            x: "4%",
            width: 0,
            height: 0,
            fontSize: 22,
            textStyle: {
                color: '#05F0EE',
                fontSize: '22'
            },
            subtextStyle: {
                color: '#90979c',
                fontSize: '16',

            },
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',//图例列表的布局朝向
            top:'center',
            right:'15%',
            textStyle: {
                fontSize: 14,
                color: '#90979c',
            },
        },
        series: [
            {
                name: '',
                type: 'pie',
                center: ['35%', '50%'],
                radius: ['24%', '45%'],
                avoidLabelOverlap: false,
                color:colorList,
                label: {
                    show: false,
                    position: 'center'
                },
                // itemStyle: {
                //     normal: {
                //         color: function(params) {
                //             return colorList[params.dataIndex]
                //         }
                //     }
                // },
                emphasis: {//高亮的扇区和标签样式
                    label: {
                        show: true,
                        position: 'outside',
                        fontSize: '12',
                        formatter: function(params) {
                            let percent = 0;
                            let total = 0;
                            for (let i = 0; i < data1.length; i++) {
                                total += data1[i].value;
                            }
                            percent = ((params.value / total) * 100).toFixed(0);
                            if(params.name !== '') {
                                return params.name + '\n' + params.value + '台' + '\n' + '占百分比：' + percent + '%';
                            }else {
                                return '';
                            }
                        },
                    },
                },
                labelLine: {
                    show: false
                },
                data: data1
            }
        ]
    };
    setOptions(ele,options)
}
export function setDataHandleHomeEventStaEcharts(ele,Originaldata){
    let option = {
        tooltip: {
            trigger: 'item',
            formatter: "{b}<br/>{c} ({d}%)"
        },
        legend: {
            icon: "circle",
            type: 'scroll',
            orient: 'vertical',
            right: 150,
            top: 70,
            bottom: 20,
            formatter: function (name) {
                var msg = "";
                for (var i = 0 ; i < Originaldata.length; i++) {
                    if (name == Originaldata[i].name) {
                        msg = name + "  " + Originaldata[i].value;
                    }
                }
                return msg
            }
        },
        series: [
            {
                name:'',
                type:'pie',
                radius: ['50%', '70%'],
                center:['30%','50%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:Originaldata,
                //color: ["#36639c", "#AAADB3", "#FF7F7E", "#b4c6e7"]
                color: ["#36639c", "#FF7F7E"]
            }
        ]
    }
    setEcharts(ele,option)
}
export function setDataUserLoginStaEcharts(ele,colors,data1,data2){

    let options   = {
        color: colors,

        tooltip: {
            trigger: 'none',
            axisPointer: {
                type: 'cross'
            }
        },
        legend: {
            data: [ '空间系统登录次数', '非空间系统登录次数']
        },
        grid: {
            top: 70,
            bottom: 50
        },

        xAxis: [
            {
                type: 'category',
                // axisTick: {
                //     alignWithLabel: true
                // },
                // axisLine: {
                //     onZero: false,
                //     lineStyle: {
                //         color: colors[1]
                //     }
                // },
                splitLine:{
                    show:false
                },
                nameTextStyle:{
                    color:'#abb8ce'
                },
                axisLabel: {
                    color:'#abb8ce',
                },
                axisTick:{ //y轴刻度线
                    show:false
                },
                axisLine:{ //y轴
                    show:false
                },

                axisPointer: {
                    label: {
                        formatter: function (params) {
                            return '非空间系统登录次数  ' + params.value
                             + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                        }
                    }
                },
                data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"]
            },
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: {
                    onZero: false,
                    lineStyle: {
                        color: colors[0]
                    }
                },
                show: false,
                axisPointer: {
                    label: {
                        formatter: function (params) {
                            return '空间系统登录次数  ' + params.value
                             + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                        }
                    }
                },
                data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"]
            }
        ],
        yAxis: [
            {
                type: 'value',

                splitLine:{
                    show:false     //去掉网格线
                },
                nameTextStyle:{
                    color:'#abb8ce'
                },
                axisLabel: {
                    color:'#abb8ce',
                },
                axisTick:{ //y轴刻度线
                    show:false
                },
                axisLine:{ //y轴
                    show:false
                },
            }
        ],
        series: [
            {
                name: '空间系统登录次数',
                type:'line',
                xAxisIndex: 1,
                smooth: true,
                data: data1,
                areaStyle: {normal: {
                        //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                        color: [new echarts.graphic.LinearGradient(
                         1, 0, 1, 1,
                         [
                             {offset: 0, color: '#ECEFF6'},

                             {offset: 1, color: '#E8EBF2'}
                         ]
                        )],
                    }
                },
            },
            {
                name: '非空间系统登录次数',
                type:'line',
                smooth: true,
                data: data2,
                areaStyle: {normal: {
                        //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                        color: [new echarts.graphic.LinearGradient(
                         1, 0, 1, 1,
                         [
                             {offset: 0, color: '#FF7F7E'},

                             {offset: 1, color: '#FF7F7E'}
                         ]
                        )],

                    }
                },
            }
        ]
    };
     setOptions(ele,options)
}
export function setDataDatabaseEcharts(ele,date,data1,data2){
    let options    = {
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                itemStyle: {
                    color: '#36629E',
                    borderColor: '#36629E',  //拐点边框颜色
                },
                name: '节点一连接数',
                type: 'line',
                stack: '总量',
                data: data1
            },
            // {
            //     itemStyle: {
            //         color: '#36629E',
            //         borderColor: '#36629E',  //拐点边框颜色
            //     },
            //     name: '节点二连接数',
            //     type: 'line',
            //     stack: '总量',
            //     data: data2
            // },
        ]
    };
    setOptions(ele,options)
}
export function setDataBaseWatchEcharts(ele,xdata,data){
    // let options = {
    //     tooltip: {
    //         trigger: 'axis'
    //     },
    //     grid: {
    //         left: '3%',
    //         right: '4%',
    //         bottom: '3%',
    //         containLabel: true
    //     },
    //     xAxis: {
    //         type: 'category',
    //         boundaryGap: false,
    //         data:date
    //     },
    //     yAxis: {
    //         type: 'value'
    //     },
    //     series: [
    //         {
    //             itemStyle: {
    //                 color: '#36629E',
    //                 borderColor: '#36629E',  //拐点边框颜色
    //             },
    //             name: '节点一连接数',
    //             type: 'line',
    //             stack: '总量',
    //             data: data1
    //         },
    //         {
    //             itemStyle: {
    //                 color: '#36629E',
    //                 borderColor: '#36629E',  //拐点边框颜色
    //             },
    //             name: '节点二连接数',
    //             type: 'line',
    //             stack: '总量',
    //             data: data2
    //         },
    //     ]
    // };
    const xData = xdata
    let options = {


        tooltip: {
            textStyle:{
                color:'#fff',
                fontSize:14
            },
            backgroundColor:'rgba(0,0,0,0.6)',
            borderColor:'transparent',
            show:true,
            trigger: 'item',
            formatter(item){
                console.log('sa',item)
                return `<div>${xData[item.dataIndex]}</div>`+
                 `<div><span class="echarts-circle"></span><span>${item.value}</span></div>`
            }
        },
        xAxis: {

            axisLine:{
                lineStyle:{
                    color:'#dcdfe6'
                }
            },
            axisLabel:{
              color:'#333'
            },
            axisTick:{
                show:false,
            },
            type: 'category',
            boundaryGap: false,
            data: xData
        },
        yAxis: {
            splitLine:{
                lineStyle:{
                    type:'dashed'
                }
            },
            axisTick:{
                show:false,
            },
            type: 'value'
        },
        grid:{
            containLabel:true,
          bottom:0,
            left:'2%',
            right:'2%',
            top:'5%'
        },
        series: [
            {



                itemStyle: {
                    color:'#108EE9'
                },
                lineStyle:{
                    color:'#108EE9',
                },
                data: data,
                type: 'line',
                smooth:true,
                areaStyle: {
                    color: 'rgba(24,144,255,0.1)'
                }
            }
        ]
    };
    setOptions(ele,options)
}
