|
|
@@ -17,7 +17,7 @@
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
-<div style="width:100%;height:280px" id="header"></div>
|
|
|
+ <div style="width:100%;height:280px" id="header"></div>
|
|
|
<div class="main">
|
|
|
<div class="menu">
|
|
|
<ul class="tabs">
|
|
|
@@ -49,7 +49,7 @@
|
|
|
<div class="items div-wsyl">
|
|
|
<div class="range">
|
|
|
<button class="thisMonth click" style="border-radius: 4px 0px 0px 4px;border-right: none;"
|
|
|
- onclick="thisMonth()">本月</button>
|
|
|
+ onlick="thisMonth()">本月</button>
|
|
|
<button class="cumulat" style="border-radius: 0px 4px 4px 0px;border-left: none;"
|
|
|
onclick="cumulat()">累计</button>
|
|
|
</div>
|
|
|
@@ -57,16 +57,16 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-<div style="width:100%;" id="footer"></div>
|
|
|
+ <div style="width:100%;" id="footer"></div>
|
|
|
</body>
|
|
|
<script src="js/jquery-3.5.1.min.js"></script>
|
|
|
<script src="js/echarts.min.js"></script>
|
|
|
<script>
|
|
|
- // 文化旅游
|
|
|
+
|
|
|
var chartDom = document.getElementById('whlyEchar');
|
|
|
var myChart = echarts.init(chartDom);
|
|
|
+ var alldata = [[4256415, 225424, 322450, 31012], [31762696, 1724264, 2370899, 286838]];
|
|
|
var option;
|
|
|
- var alldata = [[4256415,225424,322450,31012],[31762696,1724264,2370899,286838]];
|
|
|
var data = alldata[0]
|
|
|
option = {
|
|
|
grid: {
|
|
|
@@ -86,8 +86,7 @@
|
|
|
backgroundColor: "rgb(0 0 0 / 40%)",
|
|
|
borderColor: 'none',
|
|
|
formatter: function (params) {
|
|
|
- console.log(params)
|
|
|
- let total = params[0].value+params[1].value;
|
|
|
+ let total = params[0].value + params[1].value;
|
|
|
var html = "";
|
|
|
html = `<div
|
|
|
style="font-size: 14px;font-family: Microsoft YaHei;color: #FFFFFF;width: 306px;border-radius: 10px;box-sizing: border-box;position: relative;">
|
|
|
@@ -171,25 +170,239 @@
|
|
|
]
|
|
|
};
|
|
|
option && myChart.setOption(option);
|
|
|
+ // 文化旅游
|
|
|
+ $('.thisMonth').click(function () {
|
|
|
+ $('.cumulat').removeClass('click');
|
|
|
+ $('.thisMonth').addClass('click');
|
|
|
+ var option;
|
|
|
+ var data = alldata[0]
|
|
|
+ option = {
|
|
|
+ grid: {
|
|
|
+ // 网格线配置
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: ["#e9e9e9"],
|
|
|
+ width: 1,
|
|
|
+ type: "solid",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ 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: 306px;border-radius: 10px;box-sizing: border-box;position: relative;">
|
|
|
+ <div>`+ params[0].axisValue + `：</div>
|
|
|
+ <div>`+ total + `人<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;"></span><span>` + params[0].seriesName + `：
|
|
|
+ `+ params[0].value + `人</span>
|
|
|
+ </div>
|
|
|
+ <div><span
|
|
|
+ style="width: 11px;height: 11px;background: `+ params[1].color + `;border-radius: 6px;"></span><span>` + params[1].seriesName + `：
|
|
|
+ `+ params[1].value + `人</span><span style="margin-left:20px;"></span>
|
|
|
+ </div>
|
|
|
+ <div style="position: absolute;border-right: 20px solid transparent;border-left: 20px solid transparent;
|
|
|
+ border-top: 20px solid rgb(0 0 0 / 60%);bottom: -30px;left: 20px;"></div>
|
|
|
+ </div>`
|
|
|
+ return html;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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: '海外游客',
|
|
|
+ data: [0, 0, 0, 0],
|
|
|
+ type: 'bar',
|
|
|
+ itemStyle: {
|
|
|
+ color: '#A7D0FD'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //4256415 225424 322450 31012
|
|
|
+ //31762696 1724264 2370899 286838
|
|
|
+ {
|
|
|
+ name: '海内游客',
|
|
|
+ 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 option;
|
|
|
+ var data = alldata[1]
|
|
|
+ option = {
|
|
|
+ grid: {
|
|
|
+ // 网格线配置
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: ["#e9e9e9"],
|
|
|
+ width: 1,
|
|
|
+ type: "solid",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ 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: 306px;border-radius: 10px;box-sizing: border-box;position: relative;">
|
|
|
+ <div>`+ params[0].axisValue + `：</div>
|
|
|
+ <div>`+ total + `人<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;"></span><span>` + params[0].seriesName + `：
|
|
|
+ `+ params[0].value + `人</span>
|
|
|
+ </div>
|
|
|
+ <div><span
|
|
|
+ style="width: 11px;height: 11px;background: `+ params[1].color + `;border-radius: 6px;"></span><span>` + params[1].seriesName + `：
|
|
|
+ `+ params[1].value + `人</span><span style="margin-left:20px;"></span>
|
|
|
+ </div>
|
|
|
+ <div style="position: absolute;border-right: 20px solid transparent;border-left: 20px solid transparent;
|
|
|
+ border-top: 20px solid rgb(0 0 0 / 60%);bottom: -30px;left: 20px;"></div>
|
|
|
+ </div>`
|
|
|
+ return html;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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: '海外游客',
|
|
|
+ data: [0, 0, 0, 0],
|
|
|
+ type: 'bar',
|
|
|
+ itemStyle: {
|
|
|
+ color: '#A7D0FD'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //4256415 225424 322450 31012
|
|
|
+ //31762696 1724264 2370899 286838
|
|
|
+ {
|
|
|
+ name: '海内游客',
|
|
|
+ data: data,
|
|
|
+ type: 'bar',
|
|
|
+ barGap: '-100%',//移动第二个柱子的位置实现重叠
|
|
|
+ z: '-1',//改变这根柱子的层级使这根柱子在下面,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#509EF3'
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.clear();
|
|
|
+ option && myChart.setOption(option);
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
<script>
|
|
|
setHeader()
|
|
|
setFooter()
|
|
|
- function setHeader(){
|
|
|
+ function setHeader() {
|
|
|
$("#header").load("https://www.cqna.gov.cn/ggbf_search/ggyr/2022top/head.html")
|
|
|
}
|
|
|
|
|
|
- function setFooter(){
|
|
|
+ function setFooter() {
|
|
|
$("#footer").load("https://www.cqna.gov.cn/ggbf_search/ggyr/2022foot/foot.html")
|
|
|
}
|
|
|
- //文化旅游菜单切换
|
|
|
- function thisMonth() {
|
|
|
- $('.cumulat').removeClass('click');
|
|
|
- $('.thisMonth').addClass('click');
|
|
|
- }
|
|
|
- function cumulat() {
|
|
|
- $('.cumulat').addClass('click');
|
|
|
- $('.thisMonth').removeClass('click');
|
|
|
- }
|
|
|
</script>
|
|
|
+
|
|
|
</html>
|
sunjuan