|
@@ -1,379 +1,449 @@
|
|
|
function culturalTourism() {
|
|
|
- // 文化旅游
|
|
|
- $('.cumulat').removeClass('click');
|
|
|
- $('.thisMonth').addClass('click');
|
|
|
- var shbzTableHtml = `
|
|
|
- <ul class="title">
|
|
|
- <li style="width: 111px;">范围</li>
|
|
|
- <li><span>旅游总收入</span><span>(万元)</span></li>
|
|
|
- <li><span>旅游从业人数</span><span>(人)</span></li>
|
|
|
- </ul>
|
|
|
- <ul class="number">
|
|
|
- <li style="width: 110px;">2023年8月</li>
|
|
|
- <li>286332</li>
|
|
|
- <li>6652</li>
|
|
|
- </ul>
|
|
|
- `
|
|
|
- $(".wsylTable").empty().html(shbzTableHtml)
|
|
|
- var chartDom = document.getElementById('whlyEchar');
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
- var alldata = [[3418160, 352098], [33427158, 2604714]];
|
|
|
- var option;
|
|
|
- var data = alldata[0]
|
|
|
- option = {
|
|
|
- grid: {
|
|
|
- // 网格线配置
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: ["#e9e9e9"],
|
|
|
- width: 1,
|
|
|
- type: "solid",
|
|
|
- },
|
|
|
- left: 100
|
|
|
+ // 文化旅游
|
|
|
+ var chartDom = document.getElementById("whlyEchar");
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ var alldata = [
|
|
|
+ [3418160, 352098],
|
|
|
+ [33427158, 2604714],
|
|
|
+ ];
|
|
|
+ var option;
|
|
|
+ var data = alldata[0];
|
|
|
+ option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "cross",
|
|
|
+ crossStyle: {
|
|
|
+ color: "#999",
|
|
|
},
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ["海外游客", "国内游客", "国内游客同比增减", "海外游客同比增减"],
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ data: [
|
|
|
+ "2023年1月",
|
|
|
+ "2023年2月",
|
|
|
+ "2023年3月",
|
|
|
+ "2023年4月",
|
|
|
+ "2023年5月",
|
|
|
+ "2023年6月",
|
|
|
+ "2023年7月",
|
|
|
+ "2023年8月",
|
|
|
+ "2023年9月",
|
|
|
+ "2023年10月",
|
|
|
+ ],
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ name: "游客数",
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value} 人次",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ name: "同比增减",
|
|
|
+ interval: 5,
|
|
|
+ max: 50,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value} %",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "海外游客",
|
|
|
+ type: "bar",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ tooltip: {
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + " 人次";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [0, 788, 1026, 1740, 1967, 2200, 2720, 2748, 3231, 5539],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "国内游客",
|
|
|
+ type: "bar",
|
|
|
+ tooltip: {
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + " 人次";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ 4741245, 4821452, 4524574, 4054582, 4484144, 3325145, 4047415,
|
|
|
+ 3415412, 4851414, 4914414,
|
|
|
+ ],
|
|
|
+ itemStyle: {
|
|
|
+ color: "red",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "国内同比增减",
|
|
|
+ type: "line",
|
|
|
+ yAxisIndex: 1,
|
|
|
+ tooltip: {
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + " %";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ 33.46, 20.45, 26.2, 28.72, 18.09, 16.04, 10.66, 17.96, 13.98, 6.38,
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "海外同比增减",
|
|
|
+ type: "line",
|
|
|
+ yAxisIndex: 1,
|
|
|
+ tooltip: {
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + " %";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ option && myChart.setOption(option);
|
|
|
+
|
|
|
+ var chartDom = document.getElementById("gyykEchart");
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ var alldata = [
|
|
|
+ [3418160, 352098],
|
|
|
+ [33427158, 2604714],
|
|
|
+ ];
|
|
|
+ var option;
|
|
|
+ var data = alldata[0];
|
|
|
+ option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "cross",
|
|
|
+ crossStyle: {
|
|
|
+ color: "#999",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: [
|
|
|
+ "过夜游客",
|
|
|
+ "入境过夜住宿游客",
|
|
|
+ "过夜游客同比增减",
|
|
|
+ "入境过夜住宿游客同比增减",
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ data: [
|
|
|
+ "2023年1月",
|
|
|
+ "2023年2月",
|
|
|
+ "2023年3月",
|
|
|
+ "2023年4月",
|
|
|
+ "2023年5月",
|
|
|
+ "2023年6月",
|
|
|
+ "2023年7月",
|
|
|
+ "2023年8月",
|
|
|
+ "2023年9月",
|
|
|
+ "2023年10月",
|
|
|
+ ],
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ name: "游客数",
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value} 人次",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ name: "同比增减",
|
|
|
+ interval: 20,
|
|
|
+ max: 200,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value} %",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "过夜游客",
|
|
|
+ type: "bar",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ tooltip: {
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + " 人次";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ 254124, 303870, 300848, 355720, 326500, 310942, 389612, 352098,
|
|
|
+ 284177, 344331,
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "入境过夜住宿游客",
|
|
|
+ type: "bar",
|
|
|
+ tooltip: {
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + " 人次";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [0, 788, 1026, 1740, 1967, 2200, 2720, 2748, 3231, 5539],
|
|
|
+ itemStyle: {
|
|
|
+ color: "red",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "过夜游客同比增减",
|
|
|
+ type: "line",
|
|
|
+ yAxisIndex: 1,
|
|
|
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'
|
|
|
- },
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + " %";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ 22.09, 95.24, 132.26, 181.72, 116.83, 32.77, 106.47, 17.96, 26.06,
|
|
|
+ 18.81,
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "入境过夜住宿游客同比增减",
|
|
|
+ type: "line",
|
|
|
+ yAxisIndex: 1,
|
|
|
+ tooltip: {
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + " %";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
|
|
|
- },
|
|
|
- //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);
|
|
|
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- option && myChart.setOption(option);
|
|
|
- // 文化旅游
|
|
|
- $('.thisMonth').click(function () {
|
|
|
- $('.cumulat').removeClass('click');
|
|
|
- $('.thisMonth').addClass('click');
|
|
|
- var shbzTableHtml = `
|
|
|
- <ul class="title">
|
|
|
- <li style="width: 111px;">范围</li>
|
|
|
- <li><span>旅游总收入</span><span>(万元)</span></li>
|
|
|
- <li><span>旅游从业人数</span><span>(人)</span></li>
|
|
|
- </ul>
|
|
|
- <ul class="number">
|
|
|
- <li style="width: 110px;">2023年8月</li>
|
|
|
- <li>286332</li>
|
|
|
- <li>6652</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'
|
|
|
- }
|
|
|
+ var chartDom = document.getElementById("zsrEchart");
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ var alldata = [
|
|
|
+ [3418160, 352098],
|
|
|
+ [33427158, 2604714],
|
|
|
+ ];
|
|
|
+ var option;
|
|
|
+ var data = alldata[0];
|
|
|
+ option = {
|
|
|
+ title:{
|
|
|
+ text:'旅游总收入'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "cross",
|
|
|
+ crossStyle: {
|
|
|
+ color: "#999",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ["旅游总收入"],
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ data: [
|
|
|
+ "2023年1月",
|
|
|
+ "2023年2月",
|
|
|
+ "2023年3月",
|
|
|
+ "2023年4月",
|
|
|
+ "2023年5月",
|
|
|
+ "2023年6月",
|
|
|
+ "2023年7月",
|
|
|
+ "2023年8月",
|
|
|
+ "2023年9月",
|
|
|
+ "2023年10月",
|
|
|
+ ],
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ name: "总收入",
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value} 万元",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ name: "同比增减",
|
|
|
+ interval: 20,
|
|
|
+ max: 100,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value} %",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "旅游总收入",
|
|
|
+ type: "bar",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ tooltip: {
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + " 万元";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ 251414, 304154, 322454, 308451, 424215, 298541, 353411, 296332,
|
|
|
+ 384412, 311452,
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "旅游总收入同比增减",
|
|
|
+ type: "line",
|
|
|
+ yAxisIndex: 1,
|
|
|
+ tooltip: {
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + " %";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ 38.55, 24.93, 34.84, 20.75, 26.53, 20.44, 15.02, 20.03, 19.22, 8.82,
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- myChart.clear();
|
|
|
- option && myChart.setOption(option);
|
|
|
- })
|
|
|
- $('.cumulat').click(function () {
|
|
|
- $('.cumulat').addClass('click');
|
|
|
- $('.thisMonth').removeClass('click');
|
|
|
- var shbzTableHtml = `
|
|
|
- <ul class="title">
|
|
|
- <li style="width: 111px;">范围</li>
|
|
|
- <li><span>旅游总收入</span><span>(万元)</span></li>
|
|
|
- <li><span>旅游从业人数</span><span>(人)</span></li>
|
|
|
- </ul>
|
|
|
- <ul class="number">
|
|
|
- <li style="width: 110px;">截至2023年8月累计</li>
|
|
|
- <li>2548972</li>
|
|
|
- <li>535711</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'
|
|
|
- }
|
|
|
+ option && myChart.setOption(option);
|
|
|
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- myChart.clear();
|
|
|
- option && myChart.setOption(option);
|
|
|
- })
|
|
|
+ var chartDom = document.getElementById("cyrsEchart");
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ var alldata = [
|
|
|
+ [3418160, 352098],
|
|
|
+ [33427158, 2604714],
|
|
|
+ ];
|
|
|
+ var option;
|
|
|
+ var data = alldata[0];
|
|
|
+ option = {
|
|
|
+ title:{
|
|
|
+ text:'旅游从业人数'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "cross",
|
|
|
+ crossStyle: {
|
|
|
+ color: "#999",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ["旅游从业人数"],
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ data: [
|
|
|
+ "2023年1月",
|
|
|
+ "2023年2月",
|
|
|
+ "2023年3月",
|
|
|
+ "2023年4月",
|
|
|
+ "2023年5月",
|
|
|
+ "2023年6月",
|
|
|
+ "2023年7月",
|
|
|
+ "2023年8月",
|
|
|
+ "2023年9月",
|
|
|
+ "2023年10月",
|
|
|
+ ],
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ name: "旅游从业人数",
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value} 人次",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ name: "同比增减",
|
|
|
+ interval: 5,
|
|
|
+ max: 30,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value} %",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "旅游从业人数",
|
|
|
+ type: "bar",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ tooltip: {
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + " 人次";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ 33102, 33104, 33245, 33447, 33541, 33654, 33145, 33210, 32010, 32511,
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "旅游直接从业人数",
|
|
|
+ type: "bar",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ tooltip: {
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + " 万元";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [6642, 6647, 6721, 6842, 6847, 6719, 6641, 6652, 6622, 6421],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "旅游从业人数同比增减",
|
|
|
+ type: "line",
|
|
|
+ yAxisIndex: 1,
|
|
|
+ tooltip: {
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + " %";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [3.12, 3.05, 3.54, 4.2, 4.86, 5.23, 3.67, 5.57, 3.22, 4.07],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "旅游直接从业人数同比增减",
|
|
|
+ type: "line",
|
|
|
+ yAxisIndex: 1,
|
|
|
+ tooltip: {
|
|
|
+ valueFormatter: function (value) {
|
|
|
+ return value + " %";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [3.46, 3.46, 4.69, 6.66, 6.98, 5.15, 4.03, 4.76, 4.88, 2.88],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
|
|
|
+ option && myChart.setOption(option);
|
|
|
}
|