function culturalTourism() { // 文化旅游 $('.cumulat').removeClass('click'); $('.thisMonth').addClass('click'); var shbzTableHtml = ` ` $(".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 = `
`+ params[0].axisValue + `:
`+ total.toLocaleString() + `人次
` + params[0].seriesName + `: `+ params[0].value.toLocaleString() + `人次
` + params[1].seriesName + `: `+ params[1].value.toLocaleString() + `人次
` 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 = ` ` $(".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 = `
`+ params[0].axisValue + `:
`+ total.toLocaleString() + `人次
` + params[0].seriesName + `: `+ params[0].value.toLocaleString() + `人次
` + params[1].seriesName + `: `+ params[1].value.toLocaleString() + `人次
` 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 = ` ` $(".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 = `
`+ params[0].axisValue + `:
`+ total.toLocaleString() + `人次
` + params[0].seriesName + `: `+ params[0].value.toLocaleString() + `人次
` + params[1].seriesName + `: `+ params[1].value.toLocaleString() + `人次
` 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); }) }