let myChart = echarts.init(document.getElementById('echarts-one'));
let myChart12 = echarts.init(document.getElementById('echarts-one1'));
let myChart2 = echarts.init(document.getElementById('echarts-two'));

function initEchartsOne(value) {
    let option = {
        backgroundColor: 'transparent',
        title: [
            {
                text: value + '%',
                x: 'center',
                y: '40%',
                textStyle: {
                    fontSize: 24,
                    fontWeight: '600',
                    fontFamily: 'Alibaba PuHuiTi R',
                    color: '#333',
                },
            },
            {
                text: '今日任务完成率',
                x: 'center',
                y: '54%',
                textStyle: {
                    fontSize: 14,
                    fontFamily: 'Alibaba PuHuiTi R',
                    color: '#333',
                }
            }
        ],
        series: [
            {
                type: 'liquidFill',
                radius: '63%',
                center: ['50%', '50%'],
                amplitude: 10,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(27, 192, 179, 0.22)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(27, 192, 179, 0.22)',
                        },
                    ],
                },
                data: [0.5, 0.5, 0.44],
                backgroundStyle: {
                    borderWidth: 1,
                    color: 'rgba(27, 192, 179, 0.06)',
                },
                label: {
                    normal: {
                        formatter: '',
                    },
                },
                outline: {
                    show: false,
                },
            },
            {
                type: 'pie',
                clockWise: true,
                hoverAnimation: false,
                radius: ['76%', '80%'],
                center: ['50%', '50%'],
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        },
                    },
                },
                data: [
                    {
                        value: 100,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0.2, 1, 0.3, 0, [
                                    {
                                        offset: 0,
                                        color: 'rgba(54, 72, 71, 1)',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(17, 192, 178, 1)',
                                    },
                                ]),
                            },
                        },
                    },
                ],
            },
            {
                type: 'pie',
                silent: true,
                hoverAnimation: false,
                radius: ['90%', '92%'],
                center: ['50%', '50%'],
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        },
                    },
                },
                data: _pie(),
            },
        ],
    };

    function _pie() {
        let dataArr = [];
        for (var i = 0; i < 100; i++) {
            if (i % 2 === 0) {
                dataArr.push({
                    value: 10,
                    itemStyle: {
                        normal: {
                            color: 'rgba(17, 192, 178, 1)',
                        },
                    },
                });
            } else {
                dataArr.push({
                    value: 10,
                    itemStyle: {
                        normal: {
                            color: 'rgba(0,0,0,0)',
                        },
                    },
                });
            }
        }
        return dataArr;
    }

    myChart.setOption(option, true);
}
function initEchartsOne1(value) {
    let option = {
        backgroundColor: 'transparent',
        title: [
            {
                text: value + '%',
                x: 'center',
                y: '40%',
                textStyle: {
                    fontSize: 24,
                    fontWeight: '600',
                    fontFamily: 'Alibaba PuHuiTi R',
                    color: '#333',
                },
            },
            {
                text: '预警处理完成率',
                x: 'center',
                y: '54%',
                textStyle: {
                    fontSize: 14,
                    fontFamily: 'Alibaba PuHuiTi R',
                    color: '#333',
                }
            }
        ],
        series: [
            {
                type: 'liquidFill',
                radius: '63%',
                center: ['50%', '50%'],
                amplitude: 10,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(27, 192, 179, 0.22)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(27, 192, 179, 0.22)',
                        },
                    ],
                },
                data: [0.5, 0.5, 0.44],
                backgroundStyle: {
                    borderWidth: 1,
                    color: 'rgba(27, 192, 179, 0.06)',
                },
                label: {
                    normal: {
                        formatter: '',
                    },
                },
                outline: {
                    show: false,
                },
            },
            {
                type: 'pie',
                clockWise: true,
                hoverAnimation: false,
                radius: ['76%', '80%'],
                center: ['50%', '50%'],
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        },
                    },
                },
                data: [
                    {
                        value: 100,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0.2, 1, 0.3, 0, [
                                    {
                                        offset: 0,
                                        color: 'rgba(54, 72, 71, 1)',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(17, 192, 178, 1)',
                                    },
                                ]),
                            },
                        },
                    },
                ],
            },
            {
                type: 'pie',
                silent: true,
                hoverAnimation: false,
                radius: ['90%', '92%'],
                center: ['50%', '50%'],
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        },
                    },
                },
                data: _pie(),
            },
        ],
    };

    function _pie() {
        let dataArr = [];
        for (var i = 0; i < 100; i++) {
            if (i % 2 === 0) {
                dataArr.push({
                    value: 10,
                    itemStyle: {
                        normal: {
                            color: 'rgba(17, 192, 178, 1)',
                        },
                    },
                });
            } else {
                dataArr.push({
                    value: 10,
                    itemStyle: {
                        normal: {
                            color: 'rgba(0,0,0,0)',
                        },
                    },
                });
            }
        }
        return dataArr;
    }

    myChart12.setOption(option, true);
}

function initEchartsTwo(val) {
    let demoData = {
        name: '违章发现率',
        value: val,
    };
    let option = {
        backgroundColor: 'transparent',
        title: [{
            text: '{num|' + demoData.value + '%}',
            x: '50%',
            y: '58%',
            textAlign: 'center',
            textStyle: {
                rich: {
                    num: {
                        fontWeight: '600',
                        color: '#02C2A2',
                        fontFamily: 'Alibaba PuHuiTi R',
                        fontSize: 24,
                    },
                },
            },
        },
        {
            text: '违章发现率',
            x: 'center',
            y: '72%',
            textStyle: {
                fontSize: 15,
                fontFamily: 'Alibaba PuHuiTi R',
                color: '#02C2A2',
            }
        }],
        series: [
            {
                type: 'gauge',
                radius: '135%', // 1行3个
                center: ['50%', '90%'],
                splitNumber: 10,
                // min: 0,
                max: 100,
                startAngle: 180,
                endAngle: 0,
                z: 99,
                // 线
                axisLine: {
                    lineStyle: {
                        width: 1,
                        color: [[1, 'rgba(255,255,255,0)']],
                    },
                    detail: {
                        formatter: '{value}',
                    },
                    data: [
                        {
                            value: 50,
                            name: 'SCORE',
                        },
                    ],
                },
                //刻度标签。
                axisTick: {
                    show: true,
                    splitNumber: 6, //刻度的段落数
                    lineStyle: {
                        color: '#02C2A2',
                        width: 2, //刻度的宽度
                        shadowColor: '#67FFFC',
                        shadowBlur: 2,
                    },
                    length: 2, //刻度的长度
                },
                splitLine: {
                    //文字和刻度的偏移量
                    show: true,
                    length: -10, //长度
                    lineStyle: {
                        color: '#02C2A2',
                        width: 4,
                    },
                },
                // //刻度线文字
                axisLabel: {
                    show: true,
                    color: '#02C2A2',
                    fontSize: 16,
                    fontFamily: 'Alibaba PuHuiTi R',
                    distance: -30,
                },
                data: [
                    {
                        value: demoData.value,
                        name: 'SCORE',
                        itemStyle: {
                            color: '#02C3A2',
                        },
                    },
                ],
                pointer: {
                    show: true,
                    length: '12%',
                    radius: '50%',
                    width: 5, //指针粗细
                    offsetCenter: [0, -108]
                },
                detail: {
                    show: false
                },
                title: {
                    // 仪表盘标题。
                    show: false,
                },
            },
            {
                name: demoData.name,
                type: 'pie',
                radius: ['90%', '110%'],
                center: ['50%', '90%'],
                startAngle: 180,
                endAngle: 0,
                color: [
                    {
                        type: 'linear',
                        x: 1,
                        y: 0,
                        x2: 0,
                        y2: 0,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'transparent', // 0% 处的颜色
                            },
                            {
                                offset: 0.5,
                                color: '#64BDEB', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: '#33A391', // 100% 处的颜色
                            },

                        ],
                    },
                    'transparent',
                ],
                hoverAnimation: true,
                legendHoverLink: false,
                z: 10,
                labelLine: {
                    normal: {
                        show: false,
                    },
                },
                data: [
                    {
                        value: (50 * (demoData.value + 10)) / 100,
                    },
                    {
                        value: 100 - (50 * (demoData.value + 10)) / 100,
                    },
                ],
            },
            {
                type: 'pie',
                hoverAnimation: false,
                label: {
                    show: false,
                },
                center: ['50%', '90%'],
                radius: ['0%', '80%'],
                startAngle: 180,
                data: [
                    {
                        value: 100,
                        itemStyle: {
                            normal: {
                                color: {
                                    type: 'radial',
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.5,
                                    colorStops: [
                                        { offset: 0, color: '#00C2EB' },
                                        { offset: 1, color: '#094461' },
                                    ],
                                },
                                opacity: 0.2,
                            },
                        },
                    },
                    {
                        value: 100,
                        color: 'transparent',
                    },
                ],
            },
        ],
    };

    myChart2.setOption(option, true);
}