全网最详细教写可视化面板（js、css3、html5）（三）

$.ajax({
    type: "GET",
    url: "json/index.json",
    data: {},
    success: function (res) {
        // console.log(res);
        if (res != null) {
            fn(res[0].first);
            tx(res[1]);
            xr(res[0].first);
            dindan(res[2])
            xianxhang();
            shuju();
            wcl();
            yuan();
            pinpai();
            qsfx();
        } else {
            alert('请求失败');
        }
    }
})
let names = [];
let datas = [];
let yf = [];
let fz = [];
let zs = [];
let sp = [];
let fzs = [];
let dx = [17050, 21900, 17900, 21100, 18910];
function fn(data) {
    // 月份
    yf = [];
    // 服装
    fz = [];
    fzs = [];
    // 装饰
    zs = [];
    // 食品
    sp = [];
    names = [];
    value = [];
    for (let i = 0; i < data[0].data.length; i++) {
        yf[yf.length] = data[0].data[i].name;
    }
    for (let a = 0; a < data.length; a++) {
        for (let j = 0; j < data[a].data.length; j++) {
            let obj = {
                names: data[a].data[j].name,
                value: data[a].data[j].value,
            }
            fz.push(obj);
        }
    }
    for (let q = 5; q < 10; q++) {
        zs[zs.length] = fz[q];
    }
    for (let q = 10; q < 15; q++) {
        sp[sp.length] = fz[q];
    }
    for (let q = 0; q < 5; q++) {
        fzs[fzs.length] = fz[q];
    }
    box();
}
let COLORS = ['#61a0a8', '#d48265', '#91c7ae', '#749f83'];
function box() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementsByClassName('top')[0]);
    // 指定图表的配置项和数据
    var option = {
        title: {
            show: true,
            text: '营业额数据统计',
            textStyle: {
                color: '#fff'
            },
            textAlign: "left",
            textVerticalAlign: "top",
            padding: [15, 0, 0, 20]
        },
        tooltip: {
            top: 0,
            feature: {
                //点击图表可直接将柱形图与折线图进行切换
                magicType: {
                    show: true,
                    type: ['line', 'bar']
                },
            }
        },
        legend: {
            top: '30px',
            right: '70px',
            textStyle: {
                color: '#fff'
            }
        },
        xAxis: {
            data: yf,
            splitLine: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#fff"
                }
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            splitLine: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#fff"
                }
            },
            axisTick: {
                show: true
            }
        },
        series: [{
            itemStyle: {
                color: '#00BAFF'
            },
            name: '服装',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
                focus: 'series'
            },
            data: fzs
        }, {
            itemStyle: {
                color: '#ADDBEA'
            },
            name: '装饰',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
                focus: 'series'
            },
            data: zs
        },
        {
            itemStyle: {
                color: '#41DDEA'
            },
            name: '食品',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
                focus: 'series'
            },
            data: sp
        },
        {
            type: 'line',
            data: dx,
            emphasis: {
                focus: 'series'
            },
        }
        ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
let sj = [100]
function tx(data) {
    let a = document.getElementsByClassName('ratio')[0];
    let b = a.getElementsByTagName('span')[0];
    let c = a.getElementsByTagName('span')[2];
    b.innerHTML = data.value;
    c.innerHTML = data.mave;
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementsByClassName('xr')[0]);
    var option = {
        series: [{
            type: 'pie',
            hoverAnimation: false,
            radius: ['90%', '82%'],
            labelLine: {
                show: false
            },
            itemStyle: {
                color: "#04F4F6"
            },
            data: sj
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    var myCharts = echarts.init(document.getElementsByClassName('xrs')[0]);
    var options = {
        series: [{
            type: 'pie',
            hoverAnimation: false,
            radius: ['90%', '82%'],
            labelLine: {
                show: false
            },
            itemStyle: {
                color: "#04F4F6"
            },
            data: sj
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myCharts.setOption(options);
}
function xr(data) {
    console.log(document.getElementsByClassName('tus')[0]);
    yf = [];
    for (let i = 0; i < data[0].data.length; i++) {
        yf[yf.length] = data[0].data[i].name;
    }
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementsByClassName('tus')[0]);
    option = {
        title: {
            text: '单位(单)',
            textStyle: {
                color: "#fff"
            },
            top: '20px',
            left: '10px'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['收益', '支出'],
            top: '20px',
            right: '70px',
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            data: yf,
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#fff"
                }
            },
            splitLine: {
                show: true
            },
            boundaryGap: false,
            type: 'category'
        }],
        yAxis: [{
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#fff"
                }
            },
            splitLine: {
                show: true
            },
            type: 'value'
        }],
        series: [{
            itemStyle: {
                color: '#FF8538'
            },
            name: '收益',
            type: 'line',
            // 同一层级
            // stack: 'Total',
            // 头部圆化
            smooth: true,
            // 头部边框
            lineStyle: {
                width: 2
            },
            // 头部点
            showSymbol: false,
            areaStyle: {
                // 背景透明度
                opacity: 0.5,
            },
            // 隐藏
            emphasis: {
                focus: 'series'
            },
            data: [140, 232, 101, 264, 90, 340, 250]
        }, {
            itemStyle: {
                color: '#20BBF0'
            },
            name: '支出',
            type: 'line',
            // 同一层级
            // stack: 'Total',
            // 头部圆化
            smooth: true,
            // 头部边框
            lineStyle: {
                width: 2
            },
            // 头部点
            showSymbol: false,
            areaStyle: {
                // 背景透明度
                opacity: 0.5,
            },
            // 隐藏
            emphasis: {
                focus: 'series'
            },
            data: [240, 22, 201, 24, 190, 30, 20]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
// 开始的值，结束的值，在那个盒子，几秒跳一次
// 数字跳动
addNumber(3456.5, 9981, 'szs');
function addNumber(start, end, id) {
    var o = document.getElementsByClassName('szs')[0];
    var i = start;
    var Interval;
    if (i == end) {
        i = 3456.5;
    } else {
        if (i < end) {
            Interval = setInterval(function () {
                i += 1;
                if (i > end) {
                    clearInterval(Interval);
                    o.innerHTML = end.toLocaleString();
                    i = 0;
                } else {
                    o.innerHTML = i.toLocaleString();
                }
            }, 60);
        }
    }
}
// 名字
let monicker = [];
// 存周，月，年
let week = [];
let month = [];
let year = [];
let monickers = [];
let weeks = [];
let months = [];
let years = [];
function dindan(data) {
    monicker = [];
    // 存周，月，年
    week = [];
    month = [];
    year = [];
    monickers = [];
    weeks = [];
    months = [];
    years = [];
    console.log(data.data[1].data[0].data);
    // 一个两个对象，两个三个对象，三个数组包对象数据
    for (let i = 0; i < data.data[0].data[0].data.length; i++) {
        week[week.length] = data.data[0].data[0].data[i];
    }
    for (let i = 0; i < data.data[1].data[0].data[0].data.length; i++) {
        weeks[weeks.length] = data.data[1].data[0].data[0].data[i];
    }
    for (let i = 0; i < data.data[0].data[0].data.length; i++) {
        month[month.length] = data.data[0].data[1].data[i];
    }
    for (let i = 0; i < data.data[1].data[0].data[0].data.length; i++) {
        months[months.length] = data.data[1].data[0].data[1].data[i];
    }
    for (let i = 0; i < data.data[0].data[2].data.length; i++) {
        year[year.length] = data.data[0].data[2].data[i];
    }
    for (let i = 0; i < data.data[1].data[0].data[2].data.length; i++) {
        years[years.length] = data.data[1].data[0].data[2].data[i];
    }
    weekFirst();
    information();
    fenxi();
    message();
    qushi();
    let jt = document.getElementsByClassName('dates')[0];
    jt.addEventListener('click', function (e) {
        let nr = e.target;
        if (nr.innerHTML == '周') {
            weekFirst();
            changliang(0);
        } else if (nr.innerHTML == '月') {
            monthFirst();
            changliang(1);
        } else if (nr.innerHTML == '年') {
            yearFirst();
            changliang(2);
        }
    })
}
let sjs = [0, 0, 0, 0, 100, 20, 0, 0, 0, 0, 0, 0, 0];
function weekFirst() {
    changliang(0);
    changs(0);
    liangs(0);
    lianges(0);
    let str = '';
    let ddls = '';
    let yjzb = '';
    let yyes = '';
    console.log(document.getElementsByClassName('sz'));
    str = `<div class="zb">
    <span class="fp">${week[0].wan}</span>
    <span class="fp">${week[0].tu}</span>
    <span class="fp">${week[0].sui}</span>
    <span class="fp">${week[0].fo}</span>
    <span class="fp">${week[0].fai}</span>
    <span class="fp">${week[0].sks}</span>
    <b class="wyh">万元</b>
    <b class="bfb">${week[1].value}</b>
    <b class="bfb">%</b>
    <b class="bfb"><img src="./img/向上.svg" alt=""></b>
</div>`;
    $('.performance').html(str);
    ddls = `<span>${week[2].value}</span>`;
    document.getElementsByClassName('sz')[4].innerHTML = ddls;
    yjzb = `<div class="zb">
    <span class="fp">${weeks[0].wan}</span>
    <span class="fp">${weeks[0].tu}</span>
    <span class="fp">${weeks[0].sui}</span>
    <span class="fp">${weeks[0].fo}</span>
    <span class="fp">${weeks[0].fai}</span>
    <span class="fp">${weeks[0].sks}</span>
    <b class="wyh">万元</b>
    <b class="bfb">${weeks[1].value}</b>
    <b class="bfb">%</b>
    <b class="bfb"><img src="./img/向上.svg" alt=""></b>
</div>`;
    $('.indicator').html(yjzb);
    yyes = `<span>${weeks[2].value}</span>`;
    document.getElementsByClassName('sz')[5].innerHTML = yyes;
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementsByClassName('ddl')[0]);
    var option = {
        series: [{
            type: 'pie',
            hoverAnimation: false,
            radius: ['90%', '79%'],
            labelLine: {
                show: false
            },
            data: [0, 0, 0, 0, 100, 0, 0, 0, 0, 30, 0, 0, 0]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    var myCharts = echarts.init(document.getElementsByClassName('jye')[0]);
    var options = {
        series: [{
            type: 'pie',
            hoverAnimation: false,
            radius: ['90%', '79%'],
            labelLine: {
                show: false
            },
            data: [0, 0, 0, 0, 100, 0, 0, 0, 0, 60, 0, 0, 0]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myCharts.setOption(options);
}
function monthFirst() {
    let str = '';
    let ddls = '';
    let yjzb = '';
    let yyes = '';
    console.log(document.getElementsByClassName('sz'));
    str = `<div class="zb">
    <span class="fp">${month[0].wan}</span>
    <span class="fp">${month[0].tu}</span>
    <span class="fp">${month[0].sui}</span>
    <span class="fp">${month[0].fo}</span>
    <span class="fp">${month[0].fai}</span>
    <span class="fp">${month[0].sks}</span>
    <b class="wyh">万元</b>
    <b class="bfb">${month[1].value}</b>
    <b class="bfb">%</b>
    <b class="bfb"><img src="./img/向上.svg" alt=""></b>
</div>`;
    $('.performance').html(str);
    ddls = `<span>${month[2].value}</span>`;
    document.getElementsByClassName('sz')[4].innerHTML = ddls;
    yjzb = `<div class="zb">
    <span class="fp">${months[0].wan}</span>
    <span class="fp">${months[0].tu}</span>
    <span class="fp">${months[0].sui}</span>
    <span class="fp">${months[0].fo}</span>
    <span class="fp">${months[0].fai}</span>
    <span class="fp">${months[0].sks}</span>
    <b class="wyh">万元</b>
    <b class="bfb">${months[1].value}</b>
    <b class="bfb">%</b>
    <b class="bfb"><img src="./img/向上.svg" alt=""></b>
</div>`;
    $('.indicator').html(yjzb);
    yyes = `<span>${months[2].value}</span>`;
    document.getElementsByClassName('sz')[5].innerHTML = yyes;
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementsByClassName('ddl')[0]);
    var option = {
        series: [{
            type: 'pie',
            hoverAnimation: false,
            radius: ['90%', '79%'],
            labelLine: {
                show: false
            },
            data: [0, 0, 0, 0, 100, 0, 0, 0, 0, 30, 0, 0, 0]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    var myCharts = echarts.init(document.getElementsByClassName('jye')[0]);
    var options = {
        series: [{
            type: 'pie',
            hoverAnimation: false,
            radius: ['90%', '79%'],
            labelLine: {
                show: false
            },
            data: [0, 0, 0, 0, 100, 0, 0, 0, 0, 60, 0, 0, 0]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myCharts.setOption(options);
}
function yearFirst() {
    let str = '';
    let ddls = '';
    let yjzb = '';
    let yyes = '';
    console.log(document.getElementsByClassName('sz'));
    str = `<div class="zb">
    <span class="fp">${year[0].wan}</span>
    <span class="fp">${year[0].tu}</span>
    <span class="fp">${year[0].sui}</span>
    <span class="fp">${year[0].fo}</span>
    <span class="fp">${year[0].fai}</span>
    <span class="fp">${year[0].sks}</span>
    <b class="wyh">万元</b>
    <b class="bfb">${year[1].value}</b>
    <b class="bfb">%</b>
    <b class="bfb"><img src="./img/向上.svg" alt=""></b>
</div>`;
    $('.performance').html(str);
    ddls = `<span>${year[2].value}</span>`;
    document.getElementsByClassName('sz')[4].innerHTML = ddls;
    yjzb = `<div class="zb">
    <span class="fp">${years[0].wan}</span>
    <span class="fp">${years[0].tu}</span>
    <span class="fp">${years[0].sui}</span>
    <span class="fp">${years[0].fo}</span>
    <span class="fp">${years[0].fai}</span>
    <span class="fp">${years[0].sks}</span>
    <b class="wyh">万元</b>
    <b class="bfb">${years[1].value}</b>
    <b class="bfb">%</b>
    <b class="bfb"><img src="./img/向上.svg" alt=""></b>
</div>`;
    $('.indicator').html(yjzb);
    yyes = `<span>${years[2].value}</span>`;
    document.getElementsByClassName('sz')[5].innerHTML = yyes;
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementsByClassName('ddl')[0]);
    var option = {
        series: [{
            type: 'pie',
            hoverAnimation: false,
            radius: ['90%', '79%'],
            labelLine: {
                show: false
            },
            data: [0, 0, 0, 0, 100, 0, 0, 0, 0, 30, 0, 0, 0]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    var myCharts = echarts.init(document.getElementsByClassName('jye')[0]);
    var options = {
        series: [{
            type: 'pie',
            hoverAnimation: false,
            radius: ['90%', '79%'],
            labelLine: {
                show: false
            },
            data: [0, 0, 0, 0, 100, 0, 0, 0, 0, 60, 0, 0, 0]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myCharts.setOption(options);
}
function changliang(a) {
    let dates = document.getElementsByClassName('dates')[0];
    dates = dates.getElementsByTagName('span');
    for (let i = 0; i < dates.length; i++) {
        dates[i].style.border = ""
        dates[i].style.color = "#fff"
    }
    dates[a].style.border = "solid #00FFFB 0.5px"
    dates[a].style.color = "#00FFFB"
}
function changliangss() {
    let dates = document.getElementsByClassName('dates')[0];
    dates = dates.getElementsByTagName('span');
    dates[0].style.border = "solid #00FFFB 0.5px"
    dates[0].style.color = "#00FFFB"
}
function chang(a) {
    console.log(a);
    let dates = document.getElementsByClassName('dates')[1];
    dates = dates.getElementsByTagName('span');
    for (let i = 0; i < dates.length; i++) {
        dates[i].style.border = ""
        dates[i].style.color = "#fff"
    }
    dates[a].style.border = "solid #00FFFB 0.5px"
    dates[a].style.color = "#00FFFB"
}
function changs() {
    let dates = document.getElementsByClassName('dates')[1];
    dates = dates.getElementsByTagName('span');
    dates[0].style.border = "solid #00FFFB 0.5px"
    dates[0].style.color = "#00FFFB"
}
function fenxi() {
    let yuefen = document.getElementsByClassName('dates')[1];
    yuefen.addEventListener('click', function (e) {
        let nr = e.target;
        if (nr.innerHTML == '周') {
            chang(0);
            information();
        } else if (nr.innerHTML == '月') {
            chang(1);
            informations();
        } else if (nr.innerHTML == '年') {
            chang(2);
            informationss();
        }
    })
}
function information() {
    let sz = document.getElementsByClassName('sz')[6].innerHTML = 9120;
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementsByClassName('sc')[0]);
    option = {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        legend: {
            top: '-2%',
            left: 'right',
            width: '35%',
            itemGap: 35,
            textStyle: {
                color: '#fff'
            }
        },
        series: [
            {
                label: {
                    show: false
                },
                hoverAnimation: false,
                labelLine: {
                    show: false
                },
                type: 'pie',
                radius: ['90%', '60%'],
                itemStyle: {
                    borderColor: '#353654',
                    borderWidth: 10
                },
                data: [
                    { value: 1048, name: '数据一' },
                    { value: 735, name: '数据二' },
                    { value: 580, name: '数据三' },
                    { value: 484, name: '数据四' },
                    { value: 300, name: '数据五' }
                ]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
function informations() {
    let sz = document.getElementsByClassName('sz')[6].innerHTML = 17120;
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementsByClassName('sc')[0]);
    option = {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        legend: {
            top: '-2%',
            left: 'right',
            width: '35%',
            itemGap: 35,
            textStyle: {
                color: '#fff'
            }
        },
        series: [
            {
                label: {
                    show: false
                },
                hoverAnimation: false,
                labelLine: {
                    show: false
                },
                type: 'pie',
                radius: ['90%', '60%'],
                itemStyle: {
                    borderColor: '#353654',
                    borderWidth: 10
                },
                data: [
                    { value: 548, name: '数据一' },
                    { value: 235, name: '数据二' },
                    { value: 980, name: '数据三' },
                    { value: 884, name: '数据四' },
                    { value: 700, name: '数据五' }
                ]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
function informationss() {
    let sz = document.getElementsByClassName('sz')[6].innerHTML = 97120;
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementsByClassName('sc')[0]);
    option = {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        legend: {
            top: '-2%',
            left: 'right',
            width: '35%',
            itemGap: 35,
            textStyle: {
                color: '#fff'
            }
        },
        series: [
            {
                label: {
                    show: false
                },
                hoverAnimation: false,
                labelLine: {
                    show: false
                },
                type: 'pie',
                radius: ['90%', '60%'],
                itemStyle: {
                    borderColor: '#353654',
                    borderWidth: 10
                },
                data: [
                    { value: 948, name: '数据一' },
                    { value: 535, name: '数据二' },
                    { value: 980, name: '数据三' },
                    { value: 784, name: '数据四' },
                    { value: 900, name: '数据五' }
                ]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
function shuju() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementsByClassName('sheet')[0]);
    var option = {
        series: [{
            type: 'pie',
            hoverAnimation: false,
            radius: ['100%', '70%'],
            labelLine: {
                show: false
            },
            data: [0, 0, 0, 0, 100, 0, 0, 0, 0, 30, 0, 0, 0]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
function liang(a) {
    console.log(a);
    let dates = document.getElementsByClassName('dates')[2];
    dates = dates.getElementsByTagName('span');
    for (let i = 0; i < dates.length; i++) {
        dates[i].style.border = ""
        dates[i].style.color = "#fff"
    }
    dates[a].style.border = "solid #00FFFB 0.5px"
    dates[a].style.color = "#00FFFB"
}
function liangs() {
    let dates = document.getElementsByClassName('dates')[2];
    dates = dates.getElementsByTagName('span');
    dates[0].style.border = "solid #00FFFB 0.5px"
    dates[0].style.color = "#00FFFB"
}
function xianxhang() {
    let yuefen = document.getElementsByClassName('dates')[2];
    console.log(yuefen);
    yuefen.addEventListener('click', function (e) {
        let nr = e.target;
        if (nr.innerHTML == '周') {
            liang(0);
            message();
        } else if (nr.innerHTML == '月') {
            liang(1);
            messages();
        } else if (nr.innerHTML == '年') {
            liang(2);
            messagess();
        }
    })
}
function message() {
    let sz = document.getElementsByClassName('wd')[0];
    console.log(sz);
    sz = sz.getElementsByTagName('span')[0].innerHTML = 25;
    let str = '';
    str = ` <!-- 上 -->
    <div class="eshu">
        <p><span>今日线上运营额数:</span><b>18,654.12</b><span>元</span></p>
    </div>
    <!-- 下 -->
    <div class="fxrs">
        <!-- 左 -->
        <div class="sjfx">
            <p class="sjfxrs">数据分析人数</p>
            <p class="sks"><span>2432</span><span>人</span></p>
        </div>
        <!-- 右 -->
        <div class="yinyee">
            <p class="yiny">营业额</p>
            <p class="skss"><span>25,345.00</span><span>元</span></p>
        </div>
    </div>`;
    $('.wenzi').html(str);
}
function messages() {
    let sz = document.getElementsByClassName('wd')[0];
    console.log(sz);
    sz = sz.getElementsByTagName('span')[0].innerHTML = 18.5;
    let str = '';
    str = ` <!-- 上 -->
    <div class="eshu">
        <p><span>今日线上运营额数:</span><b>98,654.12</b><span>元</span></p>
    </div>
    <!-- 下 -->
    <div class="fxrs">
        <!-- 左 -->
        <div class="sjfx">
            <p class="sjfxrs">数据分析人数</p>
            <p class="sks"><span>10432</span><span>人</span></p>
        </div>
        <!-- 右 -->
        <div class="yinyee">
            <p class="yiny">营业额</p>
            <p class="skss"><span>105,345.00</span><span>元</span></p>
        </div>
    </div>`;
    $('.wenzi').html(str);
}
function messagess() {
    let sz = document.getElementsByClassName('wd')[0];
    console.log(sz);
    sz = sz.getElementsByTagName('span')[0].innerHTML = 32;
    let str = '';
    str = ` <!-- 上 -->
    <div class="eshu">
        <p><span>今日线上运营额数:</span><b>108,654.12</b><span>元</span></p>
    </div>
    <!-- 下 -->
    <div class="fxrs">
        <!-- 左 -->
        <div class="sjfx">
            <p class="sjfxrs">数据分析人数</p>
            <p class="sks"><span>20432</span><span>人</span></p>
        </div>
        <!-- 右 -->
        <div class="yinyee">
            <p class="yiny">营业额</p>
            <p class="skss"><span>285,345.00</span><span>元</span></p>
        </div>
    </div>`;
    $('.wenzi').html(str);
}
function wcl() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementsByClassName('canvas')[0]);
    var option = {
        series: [{
            type: 'pie',
            hoverAnimation: false,
            radius: ['75%', '90%'],
            labelLine: {
                show: false
            },
            data: [0, 0, 0, 0, 100, 0, 0, 0, 0, 50, 0, 0, 0]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    var myCharts = echarts.init(document.getElementsByClassName('canvas')[1]);
    var options = {
        series: [{
            type: 'pie',
            hoverAnimation: false,
            radius: ['75%', '90%'],
            labelLine: {
                show: false
            },
            data: [0, 0, 0, 0, 100, 0, 0, 0, 0, 30, 0, 0, 0]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myCharts.setOption(options);
}
function pinpai() {
    let arr2 = [{
        "yAxisleftdata": ['品牌一', '品牌二'],
        "yAxisrightvaluedata": [75, 80],
        "seriesdatamax": [100, 100]
    }]
    var myChart = echarts.init(document.getElementsByClassName('heng')[0]);
    var option = {
        // 标题
        title: {
            text: '完成情况',
            left: 'left',
            top: "2%",
            padding: [25, 0, 0, 40],
            textStyle: {
                color: '#fff',
                fontSize: "20",
                fontWeight: "400"
            }
        },
        // 横向条形图的位置
        grid: {
            // left: "-10%",
            // right: "10%",
            width: "80%",
            bottom: "1%",
            top: "30%",
            containLabel: true
        },
        xAxis: {
            type: "value",
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            }
        },
        yAxis: [{
            // y轴文字
            data: arr2[0].yAxisleftdata,
            axisLabel: {
                textStyle: {
                    show: true,
                    fontSize: "16",
                    fontWeight: "400",
                    fontFamily: '微软雅黑',
                    color: "#fff",
                },
            },
            type: "category",
            inverse: true,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
        },
        // 右侧数据
        {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
                textStyle: {
                    // color: 'rgb(6,182,254)',
                    fontSize: "18",
                    fontWeight: "800"
                }
            },
            //------------------右侧展示的具体内容
            data: [{
                value: `${arr2[0].yAxisrightvaluedata[0]}%`,
                textStyle: {
                    color: "rgb(246,154,20)"
                }
            },
            {
                value: `${arr2[0].yAxisrightvaluedata[1]}%`,
                textStyle: {
                    color: "rgb(6,180,254)"
                }
            }
            ],
        },
        ],
        series: [{
            zlevel: 1,
            type: "bar",
            barWidth: "13px",
            animationDuration: 1500,
            //------------------数据及其样式----------------------------
            data: [{
                value: arr2[0].yAxisrightvaluedata[0],
                itemStyle: {
                    color: "rgb(239,134,41)"
                }
            },
            {
                value: arr2[0].yAxisrightvaluedata[1],
                itemStyle: {
                    color: "rgb(38,149,254)"
                }
            }
            ],
            align: "center",
            itemStyle: {
                normal: {
                    barBorderRadius: 10
                }
            }
        },
        {
            type: "bar",
            barWidth: 13,
            barGap: "-100%",
            margin: "20",
            //------------------背景按最大值----------------------------
            data: arr2[0].seriesdatamax,
            textStyle: {
                //图例文字的样式
                fontSize: 10,
                color: "black"
            },
            itemStyle: {
                normal: {
                    color: "rgba(241,241,241,0.4)",
                    //width:"100%",
                    fontSize: 10,
                    barBorderRadius: 30
                },
            }
        }
        ]
    };
    myChart.setOption(option);
}
function yuan() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementsByClassName('yanLeft')[0]);
    option = {
        title: {
            text: `${75}%`,
            textStyle: {
                color: 'rgb(69,121,255)',
                fontSize: "20"
            },
            subtext: '完成率',
            subtextStyle: {
                color: '#fff',
                fontSize: '16'
            },
            itemGap: 50, // 主副标题距离
            left: 'center',
            top: 'center'
        },
        angleAxis: {
            max: 100,
            clockwise: true, // 逆时针还是顺时针旋转
            // 隐藏刻度线
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            }
        },
        radiusAxis: {
            type: 'category',
            // 隐藏刻度线
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            }
        },
        polar: {
            center: ['50%', '50%'],
            radius: '110%' //图形大小
        },
        series: [{
            type: 'bar',
            data: [{
                name: '完成率',
                value: 75,
                itemStyle: {
                    // 这里设置圆环的渐变颜色-----------------------
                    normal: {
                        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#F69816'
                        }, {
                            offset: 1,
                            color: '#E05C5B'
                        }])
                    }
                },
            }],
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 8,
            barGap: '-100%', // 两环重叠
            z: 2,
        }, { // 灰色环
            type: 'bar',
            data: [{
                value: 100,
                itemStyle: {
                    color: '#1C2136',
                    shadowColor: 'rgba(0, 0, 0, 0.2)',
                    shadowBlur: 5,
                    shadowOffsetY: 2
                }
            }],
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 5,
            barGap: '-100%', // 两环重叠
            z: 1
        }]
    }
    myChart.setOption(option);
    // 基于准备好的dom，初始化echarts实例
    var myCharts = echarts.init(document.getElementsByClassName('yanRight')[0]);
    options = {
        title: {
            text: `${80}%`,
            textStyle: {
                color: 'rgb(69,121,255)',
                fontSize: "20"
            },
            subtext: '完成率',
            subtextStyle: {
                color: '#fff',
                fontSize: '16'
            },
            itemGap: 50, // 主副标题距离
            left: 'center',
            top: 'center'
        },
        angleAxis: {
            max: 100,
            clockwise: true, // 逆时针还是顺时针旋转
            // 隐藏刻度线
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            }
        },
        radiusAxis: {
            type: 'category',
            // 隐藏刻度线
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            }
        },
        polar: {
            center: ['50%', '50%'],
            radius: '110%' //图形大小
        },
        series: [{
            type: 'bar',
            data: [{
                name: '完成率',
                value: 80,
                itemStyle: {
                    // 这里设置圆环的渐变颜色-----------------------
                    normal: {
                        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 0,
                            color: '#05B7FE'
                        }, {
                            offset: 1,
                            color: '#5966FF'
                        }])
                    }
                },
            }],
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 8,
            barGap: '-100%', // 两环重叠
            z: 2,
        }, { // 灰色环
            type: 'bar',
            data: [{
                value: 100,
                itemStyle: {
                    color: '#1C2136',
                    shadowColor: 'rgba(0, 0, 0, 0.2)',
                    shadowBlur: 5,
                    shadowOffsetY: 2
                }
            }],
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 5,
            barGap: '-100%', // 两环重叠
            z: 1
        }]
    }
    myCharts.setOption(options);
}
function qsfx() {
    let yuefen = document.getElementsByClassName('cut')[0];
    console.log(yuefen);
    yuefen.addEventListener('click', function (e) {
        let nr = e.target;
        if (nr.innerHTML == '周') {
            liange(0);
            qushi();
        } else if (nr.innerHTML == '月') {
            liange(1);
            qushis();
        } else if (nr.innerHTML == '年') {
            liange(2);
            qushiss();
        }
    })
}
function liange(a) {
    console.log(a);
    let dates = document.getElementsByClassName('cut')[0];
    dates = dates.getElementsByTagName('span');
    for (let i = 0; i < dates.length; i++) {
        dates[i].style.border = ""
        dates[i].style.color = "#fff"
    }
    dates[a].style.border = "solid #00FFFB 0.5px"
    dates[a].style.color = "#00FFFB"
}
function lianges() {
    let dates = document.getElementsByClassName('cut')[0];
    dates = dates.getElementsByTagName('span');
    dates[0].style.border = "solid #00FFFB 0.5px"
    dates[0].style.color = "#00FFFB"
}
let riqi;
let zou;
let zous;
let yue;
let yues;
let yzhou = [];
function qushis() {
    riqi = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 189, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];
    zou = [3580, 5200, 1640, 3200, 4210, 2500, 4280, 6700, 3000, 3800, 5210, 2200, 3300, 6700, 3000, 3800, 5210, 2200, 3300, 3580, 5200, 1640, 3200, 4210, 2200, 3300, 6700, 3000, 3800, 5210];
    zous = [4280, 6700, 3000, 3800, 5210, 2200, 3300, 3580, 5200, 1640, 3200, 4210, 2500, 5210, 2200, 3300, 6700, 3000, 3800, 5210, 2200, 3300, 3300, 6700, 3000, 3800, , 3580, 5200, 1640, 3200];
    yzhou = ['10000', '20000', '30000', '40000', '50000', '60000', '70000', '80000', '90000', '100000'];
    yue = '';
    yues = '';
    boxs();
}
function qushiss() {
    riqi = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
    zou = [3580, 5200, 1640, 3200, 4210, 2500, 1300, 6700, 3000, 3800, 5210, 2200,];
    zous = [4280, 6700, 3000, 3800, 5210, 2200, 3300, 1640, 3200, 4210, 2500, 1300];
    yzhou = ['100', '200', '300', '400', '500', '600', '700', '800', '900', '1000'];
    yue = zou;
    yues = zous;
    boxs();
}
function qushi() {
    riqi = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
    zou = [3580, 5200, 1640, 3200, 4210, 2500, 1300];
    zous = [4280, 6700, 3000, 3800, 5210, 2200, 3300];
    yzhou = ['1000', '2000', '3000', '4000', '5000', '6000', '7000', '8000', '9000', '10000'];
    yue = '';
    yues = '';
    boxs();
}
function boxs() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementsByClassName('contentss')[0]);
    // 指定图表的配置项和数据
    var option = {
        title: {
            show: true,
            text: '单位(元)',
            textStyle: {
                color: '#fff'
                , fontWeight: "400",
                fontSize: 17
            },
            textAlign: "left",
            textVerticalAlign: "top",
            padding: [15, 0, 0, 50]
        },
        tooltip: {
            top: 0,
            feature: {
                //点击图表可直接将柱形图与折线图进行切换
                magicType: {
                    show: true,
                    // type: ['line', 'bar']
                },
            }
        },
        legend: {
            top: '30px',
            right: '70px',
            textStyle: {
                color: '#fff'
            }
        },
        xAxis: {
            data: riqi,
            splitLine: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#fff"
                }
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            data: yzhou,
            type: 'value',
            splitLine: {
                show: true,
                boundaryGap: true
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#fff"
                }
            },
            axisTick: {
                show: false
            }
        },
        series: [{
            itemStyle: {
                barBorderRadius: [20, 20, 0, 0],
                color: '#FF8538'
            },
            name: '成本',
            type: 'bar',
            emphasis: {
                focus: 'series',
            },
            data: zou
        }, {
            itemStyle: {
                barBorderRadius: [20, 20, 0, 0],
                color: '#20BBF0'
            },
            name: '收益',
            type: 'bar',
            emphasis: {
                focus: 'series'
            },
            data: zous
        },
        {
            itemStyle: {
                color: '#FF8538'
            },
            type: 'line',
            data: yue,
            emphasis: {
                focus: 'series'
            },
        },
        {
            itemStyle: {
                color: '#20BBF0'
            },
            type: 'line',
            data: yues,
            emphasis: {
                focus: 'series'
            },
        }
        ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}