nazw/nngkxxdp/src/main/resources/static/natj/dataCenter/js/culturalTourism.js

function culturalTourism() {
    // 文化旅游
    $('.cumulat').removeClass('click');
    $('.thisMonth').addClass('click');
    var shbzTableHtml = `
        <ul class="title">
        <li style="width: 101px;">范围</li>
        <li><span>旅游总收入</span><span>（万元）</span></li>
        <li><span>旅游从业人数</span><span>（人）</span></li>
        </ul>
                    <ul class="number">
                        <li style="width: 100px;">当月</li>
                        <li>322,450</li>
                        <li>31,012</li>
                    </ul>
                `
    $(".wsylTable").empty().html(shbzTableHtml)
    var chartDom = document.getElementById('whlyEchar');
    var myChart = echarts.init(chartDom);
    var alldata = [[4256415, 225424], [31762696, 1724264]];
    var option;
    var data = alldata[0]
    option = {
        grid: {
            // 网格线配置
            show: true,
            lineStyle: {
                color: ["#e9e9e9"],
                width: 1,
                type: "solid",
            },
            left: 100
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            backgroundColor: "rgb(0 0 0 / 40%)",
            borderColor: 'none',
            formatter: function (params) {
                let total = params[0].value + params[1].value;
                var html = "";
                html = `<div
                    style="font-size: 14px;font-family: Microsoft YaHei;color: #FFFFFF;width: 206px;border-radius: 10px;box-sizing: border-box;position: relative;">
                    <div>`+ params[0].axisValue + `：</div>
                    <div>`+ total.toLocaleString() + `人次<span style="margin-left:20px;"></span></div>
                    <div style="width: 272px;height: 1px;background:rgb(255 255 255 / 32%);margin: 10px 0;"></div>
                    <div><span
                            style="width: 11px;height: 11px;background: `+ params[0].color + `;border-radius: 6px;display:inline-block;margin-right:5px;"></span><span>` + params[0].seriesName + `：
                        `+ params[0].value.toLocaleString() + `人次</span>
                    </div>
                    <div><span
                            style="width: 11px;height: 11px;background: `+ params[1].color + `;border-radius: 6px;display:inline-block;margin-right:5px;"></span><span>` + params[1].seriesName + `：
                        `+ params[1].value.toLocaleString() + `人次</span><span style="margin-left:20px;"></span>
                    </div>
                </div>`
                return html;
            },
            confine: true
        },
        xAxis: {
            type: 'category',
            data: ['接待海内外游客', '过夜游客'],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#333',  //更改坐标轴文字颜色
                    fontSize: 14      //更改坐标轴文字大小
                }
            },
            isTick: {
                show: true  //坐标轴刻度线
            },
            axisLine: { //轴线
                show: true
            },
            splitLine: { //网格线
                show: true
            },
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 5000000,
            interval: 1000000,
            axisLabel: {
                formatter: '{value}人次'
            },
            axisTick: {
                show: true  //坐标轴刻度线
            },
            axisLine: { //轴线
                show: true
            },
            splitLine: { //网格线
                show: true
            }
        },
        series: [
            {
                name: '海外游客',
                barWidth: 100,
                data: [0, 0],
                type: 'bar',
                itemStyle: {
                    color: '#A7D0FD'
                },

            },
            //4256415 225424 322450 31012
            //31762696 1724264 2370899 286838
            {
                name: '海内游客',
                barWidth: 100,
                data: data,
                type: 'bar',
                barGap: '-100%',//移动第二个柱子的位置实现重叠
                z: '-1',//改变这根柱子的层级使这根柱子在下面,
                itemStyle: {
                    color: '#509EF3'
                }

            }
        ]
    };
    option && myChart.setOption(option);
    // 文化旅游
    $('.thisMonth').click(function () {
        $('.cumulat').removeClass('click');
        $('.thisMonth').addClass('click');
        var shbzTableHtml = `
        <ul class="title">
        <li style="width: 101px;">范围</li>
        <li><span>旅游总收入</span><span>（万元）</span></li>
        <li><span>旅游从业人数</span><span>（人）</span></li>
        </ul>
                    <ul class="number">
                        <li style="width: 100px;">当月</li>
                        <li>322,450</li>
                        <li>31,012</li>
                    </ul>
                `
        $(".wsylTable").empty().html(shbzTableHtml)
        var option;
        var data = alldata[0]
        option = {
            grid: {
                // 网格线配置
                show: true,
                lineStyle: {
                    color: ["#e9e9e9"],
                    width: 1,
                    type: "solid",
                },
                left: 100
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                backgroundColor: "rgb(0 0 0 / 40%)",
                borderColor: 'none',
                formatter: function (params) {
                    let total = params[0].value + params[1].value;
                    var html = "";
                    html = `<div
                    style="font-size: 14px;font-family: Microsoft YaHei;color: #FFFFFF;width: 206px;border-radius: 10px;box-sizing: border-box;position: relative;">
                    <div>`+ params[0].axisValue + `：</div>
                    <div>`+ total.toLocaleString() + `人次<span style="margin-left:20px;"></span></div>
                    <div style="width: 272px;height: 1px;background:rgb(255 255 255 / 32%);margin: 10px 0;"></div>
                    <div><span
                            style="width: 11px;height: 11px;background: `+ params[0].color + `;border-radius: 6px;display:inline-block;margin-right:5px;"></span><span>` + params[0].seriesName + `：
                        `+ params[0].value.toLocaleString() + `人次</span>
                    </div>
                    <div><span
                            style="width: 11px;height: 11px;background: `+ params[1].color + `;border-radius: 6px;display:inline-block;margin-right:5px;"></span><span>` + params[1].seriesName + `：
                        `+ params[1].value.toLocaleString() + `人次</span><span style="margin-left:20px;"></span>
                    </div>
                </div>`
                    return html;
                },
                confine: true
            },
            xAxis: {
                type: 'category',
                data: ['接待海内外游客', '过夜游客'],
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#333',  //更改坐标轴文字颜色
                        fontSize: 14      //更改坐标轴文字大小
                    }
                },
                isTick: {
                    show: true  //坐标轴刻度线
                },
                axisLine: { //轴线
                    show: true
                },
                splitLine: { //网格线
                    show: true
                },
            },
            yAxis: {
                type: 'value',
                min: 0,
                max: 5000000,
                interval: 1000000,
                axisLabel: {
                    formatter: '{value}(人次)'
                },
                axisTick: {
                    show: true  //坐标轴刻度线
                },
                axisLine: { //轴线
                    show: true
                },
                splitLine: { //网格线
                    show: true
                }
            },
            series: [
                {
                    name: '海外游客',
                    barWidth: 100,
                    data: [0, 0],
                    type: 'bar',
                    itemStyle: {
                        color: '#A7D0FD'
                    }
                },
                //4256415 225424 322450 31012
                //31762696 1724264 2370899 286838
                {
                    name: '海内游客',
                    barWidth: 100,
                    data: data,
                    type: 'bar',
                    barGap: '-100%',//移动第二个柱子的位置实现重叠
                    z: '-1',//改变这根柱子的层级使这根柱子在下面,
                    itemStyle: {
                        color: '#509EF3'
                    }

                }
            ]
        };
        myChart.clear();
        option && myChart.setOption(option);
    })
    $('.cumulat').click(function () {
        $('.cumulat').addClass('click');
        $('.thisMonth').removeClass('click');
        var shbzTableHtml = `
        <ul class="title">
        <li style="width: 101px;">范围</li>
        <li><span>旅游总收入</span><span>（万元）</span></li>
        <li><span>旅游从业人数</span><span>（人）</span></li>
        </ul>
                    <ul class="number">
                        <li style="width: 100px;">累计</li>
                        <li>2,370,899</li>
                        <li>286,838</li>
                    </ul>
                `
        $(".wsylTable").empty().html(shbzTableHtml)
        var option;
        var data = alldata[1]
        option = {
            grid: {
                // 网格线配置
                show: true,
                lineStyle: {
                    color: ["#e9e9e9"],
                    width: 1,
                    type: "solid",
                },
                left: 110
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                backgroundColor: "rgb(0 0 0 / 40%)",
                borderColor: 'none',
                formatter: function (params) {
                    let total = params[0].value + params[1].value;
                    
                    var html = "";
                    html = `<div
                    style="font-size: 14px;font-family: Microsoft YaHei;color: #FFFFFF;width: 206px;border-radius: 10px;box-sizing: border-box;position: relative;">
                    <div>`+ params[0].axisValue + `：</div>
                    <div>`+ total.toLocaleString() + `人次<span style="margin-left:20px;"></span></div>
                    <div style="width: 272px;height: 1px;background:rgb(255 255 255 / 32%);margin: 10px 0;"></div>
                    <div><span
                            style="width: 11px;height: 11px;background: `+ params[0].color + `;border-radius: 6px;display:inline-block;margin-right:5px;"></span><span>` + params[0].seriesName + `：
                        `+ params[0].value.toLocaleString() + `人次</span>
                    </div>
                    <div><span
                            style="width: 11px;height: 11px;background: `+ params[1].color + `;border-radius: 6px;display:inline-block;margin-right:5px;"></span><span>` + params[1].seriesName + `：
                        `+ params[1].value.toLocaleString() + `人次</span><span style="margin-left:20px;"></span>
                    </div>
                </div>`
                    return html;
                },
                confine: true
            },
            xAxis: {
                type: 'category',
                data: ['接待海内外游客', '过夜游客'],
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#333',  //更改坐标轴文字颜色
                        fontSize: 14      //更改坐标轴文字大小
                    }
                },
                isTick: {
                    show: true  //坐标轴刻度线
                },
                axisLine: { //轴线
                    show: true
                },
                splitLine: { //网格线
                    show: true
                },
            },
            yAxis: {
                type: 'value',
                min: 0,
                max: 35000000,
                interval: 10000000,
                axisLabel: {
                    formatter: '{value}(人次)'
                },
                axisTick: {
                    show: true  //坐标轴刻度线
                },
                axisLine: { //轴线
                    show: true
                },
                splitLine: { //网格线
                    show: true
                }
            },
            series: [
                {
                    name: '海外游客',
                    barWidth: 100,
                    data: [0, 0],
                    type: 'bar',
                    itemStyle: {
                        color: '#A7D0FD'
                    }
                },
                //4256415 225424 322450 31012
                //31762696 1724264 2370899 286838
                {
                    name: '海内游客',
                    barWidth: 100,
                    data: data,
                    type: 'bar',
                    barGap: '-100%',//移动第二个柱子的位置实现重叠
                    z: '-1',//改变这根柱子的层级使这根柱子在下面,
                    itemStyle: {
                        color: '#509EF3'
                    }

                }
            ]
        };
        myChart.clear();
        option && myChart.setOption(option);
    })

}