|
|
|
@ -173,13 +173,15 @@ |
|
|
|
line-height: 1.8rem; |
|
|
|
padding-left: 2.02rem; |
|
|
|
} |
|
|
|
|
|
|
|
/* 各场馆人次占比 */ |
|
|
|
.pcgrbox{ |
|
|
|
.pcgrbox { |
|
|
|
margin-top: 1.6rem; |
|
|
|
padding-bottom: 4rem; |
|
|
|
height: 8rem; |
|
|
|
} |
|
|
|
.pcgrbox .pcb_title{ |
|
|
|
|
|
|
|
.pcgrbox .pcb_title { |
|
|
|
background-image: url("../assets/img/tyc_tbg.png"); |
|
|
|
background-position: 0 0; |
|
|
|
background-repeat: no-repeat; |
|
|
|
@ -188,11 +190,13 @@ |
|
|
|
line-height: 1.8rem; |
|
|
|
padding-left: 2.02rem; |
|
|
|
} |
|
|
|
.pcgrbox .pcbcon{ |
|
|
|
|
|
|
|
.pcgrbox .pcbcon { |
|
|
|
width: 100%; |
|
|
|
margin-top: 2rem; |
|
|
|
} |
|
|
|
.pcgrbox .pcbcon .pcbitem{ |
|
|
|
|
|
|
|
.pcgrbox .pcbcon .pcbitem { |
|
|
|
width: 30%; |
|
|
|
height: 5rem; |
|
|
|
float: left; |
|
|
|
@ -202,13 +206,16 @@ |
|
|
|
background-position: 100%, 100%; |
|
|
|
background-repeat: no-repeat; */ |
|
|
|
} |
|
|
|
.pcgrbox .pcbcon .pcbitem div{ |
|
|
|
|
|
|
|
.pcgrbox .pcbcon .pcbitem div { |
|
|
|
float: left; |
|
|
|
} |
|
|
|
.pcgrbox .pcbcon .pcbitem div:first{ |
|
|
|
|
|
|
|
.pcgrbox .pcbcon .pcbitem div:first { |
|
|
|
margin-left: 0; |
|
|
|
} |
|
|
|
.pcgrbox .pcbcon .pcbitem .pcbval{ |
|
|
|
|
|
|
|
.pcgrbox .pcbcon .pcbitem .pcbval { |
|
|
|
height: 5rem; |
|
|
|
width: 5rem; |
|
|
|
background-image: url('../assets/img/ty_pcb_val.png'); |
|
|
|
@ -219,7 +226,8 @@ |
|
|
|
line-height: 5rem; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
.pcgrbox .pcbcon .pcbitem .pcbdesc{ |
|
|
|
|
|
|
|
.pcgrbox .pcbcon .pcbitem .pcbdesc { |
|
|
|
background-image: url('../assets/img/ty_pcb_desc.png'); |
|
|
|
background-position: 0 0; |
|
|
|
background-repeat: no-repeat; |
|
|
|
@ -236,23 +244,23 @@ |
|
|
|
|
|
|
|
/* 各场馆人数趋势 */ |
|
|
|
.gcgrs { |
|
|
|
margin-top: 1.06rem; |
|
|
|
margin-top: 1.06rem; |
|
|
|
} |
|
|
|
|
|
|
|
.gcgrs .gcgrs_title { |
|
|
|
background-image: url("../assets/img/wh_tbg.png"); |
|
|
|
background-position: 0 0; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
height: 1.8rem; |
|
|
|
line-height: 1.4rem; |
|
|
|
padding-left: 2.02rem; |
|
|
|
background-image: url("../assets/img/wh_tbg.png"); |
|
|
|
background-position: 0 0; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
height: 1.8rem; |
|
|
|
line-height: 1.4rem; |
|
|
|
padding-left: 2.02rem; |
|
|
|
} |
|
|
|
|
|
|
|
.gcgrs .gcgrs_charts { |
|
|
|
margin-top: 2rem; |
|
|
|
width: 100%; |
|
|
|
height: 19rem; |
|
|
|
margin-top: 2rem; |
|
|
|
width: 100%; |
|
|
|
height: 19rem; |
|
|
|
} |
|
|
|
</style> |
|
|
|
<script> |
|
|
|
@ -278,7 +286,15 @@ export default { |
|
|
|
var option; |
|
|
|
|
|
|
|
option = { |
|
|
|
|
|
|
|
tooltip: { |
|
|
|
trigger: 'axis', |
|
|
|
axisPointer: { |
|
|
|
type: 'shadow' |
|
|
|
}, |
|
|
|
formatter: function (params) { |
|
|
|
return params[0].name + "</br>" + params[0].value |
|
|
|
} |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
left: '3%', |
|
|
|
right: '3%', |
|
|
|
@ -402,149 +418,162 @@ export default { |
|
|
|
option && myChart.setOption(option); |
|
|
|
}, |
|
|
|
// 场馆人流趋势 |
|
|
|
cg_line(){ |
|
|
|
cg_line() { |
|
|
|
var chartDom = document.getElementById("gc_charts"); |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
|
|
|
|
var option |
|
|
|
var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',]; |
|
|
|
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',] |
|
|
|
var name = ['体育场', '体育馆', '游泳场馆'] |
|
|
|
var data = [ |
|
|
|
[137, 34, 135, 161, 74, 152, 110, 100, 150], |
|
|
|
[174, 137, 135, 34, 152, 135, 140, 160, 100], |
|
|
|
[134, 74, 137, 135, 161, 137, 300, 220, 250], |
|
|
|
] |
|
|
|
|
|
|
|
var series = []; |
|
|
|
for (var i = 0; i < 6; i++) { |
|
|
|
series.push({ |
|
|
|
name: name[i], |
|
|
|
type: "line", |
|
|
|
symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ] |
|
|
|
symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' |
|
|
|
smooth: true, //是否平滑曲线显示 |
|
|
|
showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示 |
|
|
|
areaStyle: { |
|
|
|
normal: { |
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|
|
|
offset: 0, |
|
|
|
color: color[i] |
|
|
|
}, { |
|
|
|
offset: 0.8, |
|
|
|
color: 'rgba(255,255,255,0)' |
|
|
|
}], false), |
|
|
|
// shadowColor: 'rgba(255,255,255, 0.1)', |
|
|
|
shadowBlur: 10, |
|
|
|
opacity: 0.3, |
|
|
|
} |
|
|
|
}, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: color[i], |
|
|
|
lineStyle: { |
|
|
|
width: 1, |
|
|
|
type: 'solid' //'dotted'虚线 'solid'实线 |
|
|
|
}, |
|
|
|
borderColor: color[i], //图形的描边颜色。支持的格式同 color |
|
|
|
borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] |
|
|
|
barBorderRadius: 0, |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
opacity: 0.5, |
|
|
|
} |
|
|
|
}, |
|
|
|
data: data[i], |
|
|
|
|
|
|
|
}) |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
|
|
|
|
var option |
|
|
|
var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',]; |
|
|
|
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',] |
|
|
|
var name = ['体育场', '体育馆', '游泳场馆'] |
|
|
|
var data = [ |
|
|
|
[137, 34, 135, 161, 74, 152, 110, 100, 150], |
|
|
|
[174, 137, 135, 34, 152, 135, 140, 160, 100], |
|
|
|
[134, 74, 137, 135, 161, 137, 300, 220, 250], |
|
|
|
] |
|
|
|
|
|
|
|
var series = []; |
|
|
|
for (var i = 0; i < 6; i++) { |
|
|
|
series.push({ |
|
|
|
name: name[i], |
|
|
|
type: "line", |
|
|
|
symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ] |
|
|
|
symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' |
|
|
|
smooth: true, //是否平滑曲线显示 |
|
|
|
showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示 |
|
|
|
areaStyle: { |
|
|
|
normal: { |
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|
|
|
offset: 0, |
|
|
|
color: color[i] |
|
|
|
}, { |
|
|
|
offset: 0.8, |
|
|
|
color: 'rgba(255,255,255,0)' |
|
|
|
}], false), |
|
|
|
// shadowColor: 'rgba(255,255,255, 0.1)', |
|
|
|
shadowBlur: 10, |
|
|
|
opacity: 0.3, |
|
|
|
} |
|
|
|
option = { |
|
|
|
// backgroundColor: "#141f56", |
|
|
|
legend: { |
|
|
|
bottom: 0, |
|
|
|
right:20, |
|
|
|
itemGap: 15, |
|
|
|
itemWidth: 15, |
|
|
|
textStyle: { |
|
|
|
color: '#fff', |
|
|
|
fontSize: '14' |
|
|
|
}, |
|
|
|
data: name |
|
|
|
}, |
|
|
|
title: { |
|
|
|
// text: "负面言论分领域趋势", |
|
|
|
textStyle: { |
|
|
|
color: '#fff', |
|
|
|
fontSize: '22', |
|
|
|
fontWeight: 'normal', |
|
|
|
}, |
|
|
|
subtextStyle: { |
|
|
|
color: '#90979c', |
|
|
|
fontSize: '16', |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
borderWidth: 0, |
|
|
|
top: 240, |
|
|
|
bottom: 240, |
|
|
|
textStyle: { |
|
|
|
color: "#fff" |
|
|
|
} |
|
|
|
}, |
|
|
|
xAxis: [{ |
|
|
|
type: "category", |
|
|
|
axisLine: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样 |
|
|
|
axisTick: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
splitArea: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
inside: false, |
|
|
|
textStyle: { |
|
|
|
color: '#FFFFFF', |
|
|
|
fontWeight: 'normal', |
|
|
|
fontSize: '12', |
|
|
|
}, |
|
|
|
}, |
|
|
|
data: xData, |
|
|
|
}], |
|
|
|
yAxis: { |
|
|
|
type: 'value', |
|
|
|
axisTick: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#32346c ', |
|
|
|
} |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
textStyle: { |
|
|
|
color: '#0095FF', |
|
|
|
fontWeight: 'normal', |
|
|
|
fontSize: '12', |
|
|
|
}, |
|
|
|
formatter: '{value}', |
|
|
|
}, |
|
|
|
}, |
|
|
|
series: series, |
|
|
|
}, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: color[i], |
|
|
|
lineStyle: { |
|
|
|
width: 1, |
|
|
|
type: 'solid' //'dotted'虚线 'solid'实线 |
|
|
|
}, |
|
|
|
borderColor: color[i], //图形的描边颜色。支持的格式同 color |
|
|
|
borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] |
|
|
|
barBorderRadius: 0, |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
opacity: 0.5, |
|
|
|
} |
|
|
|
}, |
|
|
|
data: data[i], |
|
|
|
|
|
|
|
}) |
|
|
|
} |
|
|
|
option = { |
|
|
|
// backgroundColor: "#141f56", |
|
|
|
legend: { |
|
|
|
bottom: 0, |
|
|
|
right: 20, |
|
|
|
itemGap: 15, |
|
|
|
itemWidth: 15, |
|
|
|
textStyle: { |
|
|
|
color: '#fff', |
|
|
|
fontSize: '14' |
|
|
|
}, |
|
|
|
data: name |
|
|
|
}, |
|
|
|
title: { |
|
|
|
// text: "负面言论分领域趋势", |
|
|
|
textStyle: { |
|
|
|
color: '#fff', |
|
|
|
fontSize: '22', |
|
|
|
fontWeight: 'normal', |
|
|
|
}, |
|
|
|
subtextStyle: { |
|
|
|
color: '#90979c', |
|
|
|
fontSize: '16', |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
trigger: "axis", |
|
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效 |
|
|
|
type: 'line', // 默认为直线，可选为：'line' | 'shadow' |
|
|
|
lineStyle: { |
|
|
|
color: '#57617B' |
|
|
|
} |
|
|
|
}, |
|
|
|
formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}', |
|
|
|
backgroundColor: 'rgba(0,0,0,0.7)', // 背景 |
|
|
|
padding: [8, 10], //内边距 |
|
|
|
extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影 |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
borderWidth: 0, |
|
|
|
top: 240, |
|
|
|
bottom: 240, |
|
|
|
textStyle: { |
|
|
|
color: "#fff" |
|
|
|
} |
|
|
|
}, |
|
|
|
xAxis: [{ |
|
|
|
type: "category", |
|
|
|
axisLine: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样 |
|
|
|
axisTick: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
splitArea: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
inside: false, |
|
|
|
textStyle: { |
|
|
|
color: '#FFFFFF', |
|
|
|
fontWeight: 'normal', |
|
|
|
fontSize: '12', |
|
|
|
}, |
|
|
|
}, |
|
|
|
data: xData, |
|
|
|
}], |
|
|
|
yAxis: { |
|
|
|
type: 'value', |
|
|
|
axisTick: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#32346c ', |
|
|
|
} |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
textStyle: { |
|
|
|
color: '#0095FF', |
|
|
|
fontWeight: 'normal', |
|
|
|
fontSize: '12', |
|
|
|
}, |
|
|
|
formatter: '{value}', |
|
|
|
}, |
|
|
|
}, |
|
|
|
series: series, |
|
|
|
} |
|
|
|
|
|
|
|
option && myChart.setOption(option); |
|
|
|
option && myChart.setOption(option); |
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
|
‘daijinzheng@xingtongworld.com’
3 years ago
