|
|
|
@ -1,45 +1,73 @@ |
|
|
|
<template> |
|
|
|
<!-- <v-scale-screen width="1920" height="1080"> --> |
|
|
|
<v-scale-screen width="1920" height="1080"> |
|
|
|
<div id="ty"> |
|
|
|
|
|
|
|
<div class="main"> |
|
|
|
<div class="left"> |
|
|
|
<div class="tiyuBla"> |
|
|
|
<div style="position: absolute; right: 28%; top: 52%">体育</div> |
|
|
|
<div style="position: absolute; right: 32%; top: 52%">体育</div> |
|
|
|
<span style="position: absolute; right: 12%; top: 72%;font-size: 16px;" class="wh_small">体育场 | |
|
|
|
体育馆 | 游泳场馆</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="tongji"></div> |
|
|
|
<div class="tongji"> |
|
|
|
<span class="institle">总计进馆人数</span> |
|
|
|
<!-- 今日进馆人数 --> |
|
|
|
<div class="insval"> |
|
|
|
<img src="../../assets/wh/td_ins.png" /> |
|
|
|
<span id="insv" class="insv">234,098</span> |
|
|
|
<span class="inst">今日进馆人数</span> |
|
|
|
</div> |
|
|
|
<!-- 本月进馆人数 --> |
|
|
|
<div class="insval"> |
|
|
|
<img src="../../assets/wh/tm_ins.png" /> |
|
|
|
<span id="insv2" class="insv">234,098</span> |
|
|
|
<span class="inst">本月进馆人数</span> |
|
|
|
</div> |
|
|
|
<!-- 本年进馆人数 --> |
|
|
|
<div class="insval"> |
|
|
|
<img src="../../assets/wh/tyear_ins.png" /> |
|
|
|
<span id="insv3" class="insv">234,098</span> |
|
|
|
<span class="inst">本年进馆人数</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="bfb"> |
|
|
|
<div class="renshu"><span><img src="../../assets/ty/rliu.png"></span>进馆人数</div> |
|
|
|
<div class="dinszone"> |
|
|
|
<span class="dins_title">24小时总进馆人流趋势</span> |
|
|
|
<!-- 柱状统计图 --> |
|
|
|
<div class="dins_chart" id="dinschart" style="height: 22vh; width: 100%"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- <div class="bfb"> |
|
|
|
<div class="renshu"><span><img src="../../assets/ty/rliu.png"></span>进馆人数</div> |
|
|
|
|
|
|
|
<div class="num">24,352,345</div> |
|
|
|
<div class="num">24,352,345</div> --> |
|
|
|
|
|
|
|
<!-- <div class="cntTxt"> |
|
|
|
<!-- <div class="cntTxt"> |
|
|
|
<div style="font-size: 30px;font-weight: bold;color: white;">75%</div> |
|
|
|
<div style="color: #0082FF;font-size: 14px;">人流饱和</div> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
<!-- <div class="cntTxt"> |
|
|
|
<!-- <div class="cntTxt"> |
|
|
|
<canvas id="PvqalmgjxGnTCXyTJMOKLkntpbgRzGND" :width="cWidth" :height="cHeight" class="charts" |
|
|
|
@click="tap" /> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
<div class="rsType"> |
|
|
|
<div class="typeItem"> |
|
|
|
<div>安静</div> |
|
|
|
<img style="width: 45%; height: 40%; margin-top: 10%" src="../../assets/ty/quiet.png" /> |
|
|
|
</div> |
|
|
|
<div class="typeItem"> |
|
|
|
<div>舒适</div> |
|
|
|
<img style="width: 45%; height: 40%; margin-top: 10%" src="../../assets/ty/soft.png" /> |
|
|
|
</div> |
|
|
|
<div class="typeItem"> |
|
|
|
<div>拥挤</div> |
|
|
|
<img style="width: 45%; height: 40%; margin-top: 10%" src="../../assets/ty/crowd.png" /> |
|
|
|
</div> |
|
|
|
<!-- <div class="rsType"> |
|
|
|
<div class="typeItem"> |
|
|
|
<div>安静</div> |
|
|
|
<img style="width: 45%; height: 40%; margin-top: 10%" src="../../assets/ty/quiet.png" /> |
|
|
|
</div> |
|
|
|
<div class="typeItem"> |
|
|
|
<div>舒适</div> |
|
|
|
<img style="width: 45%; height: 40%; margin-top: 10%" src="../../assets/ty/soft.png" /> |
|
|
|
</div> |
|
|
|
<div class="typeItem"> |
|
|
|
<div>拥挤</div> |
|
|
|
<img style="width: 45%; height: 40%; margin-top: 10%" src="../../assets/ty/crowd.png" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="center"> |
|
|
|
@ -50,17 +78,59 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="right"> |
|
|
|
<div class="item"></div> |
|
|
|
<div class="item"></div> |
|
|
|
<div class="item"></div> |
|
|
|
<!-- <div class="item"></div> --> |
|
|
|
<div class="pcgrliu"> |
|
|
|
<span class="pcg_title">各场馆人次占比</span> |
|
|
|
<div class="venue_proportion_box" style="width: 100%; height: 290px"> |
|
|
|
<!-- <div class="venue_proportion"> |
|
|
|
<div class="venue_proportion_top"> |
|
|
|
<img src="../../assets/ty/bf8231e42be621a362407655f4da8af.png" alt=""> |
|
|
|
<span class="venue_proportion_box_num">25%</span> |
|
|
|
</div> |
|
|
|
<div class="venue_proportion_bo"> |
|
|
|
<img src="../../assets/ty/f01e9db82fd27cf0062761bb2f96e8a.png" alt=""> |
|
|
|
<span>体育场</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="venue_proportion"> |
|
|
|
<div class="venue_proportion_top"> |
|
|
|
<img src="../../assets/ty/bf8231e42be621a362407655f4da8af.png" alt=""> |
|
|
|
<span class="venue_proportion_box_num">25%</span> |
|
|
|
</div> |
|
|
|
<div class="venue_proportion_bo"> |
|
|
|
<img src="../../assets/ty/f01e9db82fd27cf0062761bb2f96e8a.png" alt=""> |
|
|
|
<span>体育场</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="venue_proportion"> |
|
|
|
<div class="venue_proportion_top"> |
|
|
|
<img src="../../assets/ty/bf8231e42be621a362407655f4da8af.png" alt=""> |
|
|
|
<span class="venue_proportion_box_num">25%</span> |
|
|
|
</div> |
|
|
|
<div class="venue_proportion_bo"> |
|
|
|
<img src="../../assets/ty/f01e9db82fd27cf0062761bb2f96e8a.png" alt=""> |
|
|
|
<span>体育场</span> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
</div> |
|
|
|
<!-- <div id="pcgchart1" style="width: 100%;height: 25vh;margin-top: 20px;"></div> --> |
|
|
|
</div> |
|
|
|
<!-- 各场馆人流趋势 --> |
|
|
|
<div class="pcgrliu"> |
|
|
|
<span class="pcg_title">各场馆人流趋势</span> |
|
|
|
<div id="pcgchart2" style="width: 100%; height: 290px"></div> |
|
|
|
</div> |
|
|
|
<!-- <div class="item"></div> --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<!-- </v-scale-screen> --> |
|
|
|
</v-scale-screen> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
// 引入echarts |
|
|
|
import * as echarts from "echarts"; |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return {}; |
|
|
|
@ -74,8 +144,545 @@ export default { |
|
|
|
} else { |
|
|
|
cc.classList.add("ty_bg"); |
|
|
|
} |
|
|
|
this.ty_bar1() |
|
|
|
// this.ty_bar2() |
|
|
|
this.ty_bar3() |
|
|
|
this.addNumber(0, 234098, 'insv') |
|
|
|
this.addNumber(0, 234098, 'insv2') |
|
|
|
this.addNumber(0, 234098, 'insv3') |
|
|
|
// window.onresize = () => { |
|
|
|
// // 基于准备好的dom，初始化echarts实例 |
|
|
|
// let myChart = this.$echarts.init(document.getElementById('pcgchart2')); |
|
|
|
// myChart.resize(); |
|
|
|
// }; |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
ty_bar1() { |
|
|
|
var chartDom = document.getElementById("dinschart"); |
|
|
|
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','18:00', '20:00', '21:00', '22:00']; |
|
|
|
|
|
|
|
// var data = [10000, 20000, 10000, 20000, 10000, 20000, 25000, 50000, 30000, 13000, 15000, 11000, 12000] |
|
|
|
// var data = [Math.random() * 300] |
|
|
|
var option = { |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis', |
|
|
|
axisPointer: { |
|
|
|
type: 'shadow' |
|
|
|
}, |
|
|
|
formatter: function (params) { |
|
|
|
return params[0].name + "</br>" + params[0].value |
|
|
|
} |
|
|
|
}, |
|
|
|
// legend: { |
|
|
|
// data: ['厂用电量'] |
|
|
|
// }, |
|
|
|
grid: { |
|
|
|
left: 0, |
|
|
|
right: 0, |
|
|
|
bottom: '3%', |
|
|
|
top: '10%', |
|
|
|
containLabel: true |
|
|
|
}, |
|
|
|
xAxis: [{ |
|
|
|
data: [ |
|
|
|
'08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', |
|
|
|
], |
|
|
|
axisLine: { |
|
|
|
lineStyle: { |
|
|
|
color: '#0095FF', |
|
|
|
width: 1, |
|
|
|
type: 'solid', |
|
|
|
}, |
|
|
|
show: true |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
// interval: 0, |
|
|
|
// rotate: 0 |
|
|
|
show: true, |
|
|
|
textStyle: { |
|
|
|
color: '#fff' |
|
|
|
} |
|
|
|
} |
|
|
|
}], |
|
|
|
yAxis: [{ |
|
|
|
type: 'value', |
|
|
|
// name: ' 今日发电量( KWh )', |
|
|
|
axisLine: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
// 使用深浅的间隔色 |
|
|
|
color: '#027eff' |
|
|
|
} |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
color: '#0095FF', |
|
|
|
} |
|
|
|
}], |
|
|
|
series: [{ |
|
|
|
// name: '厂用电量', |
|
|
|
type: 'bar', |
|
|
|
barGap: '5%', |
|
|
|
barWidth: '10%', |
|
|
|
barCategoryGap: '60%', |
|
|
|
stack: 1, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
barBorderRadius: [30, 30, 0, 0], |
|
|
|
color: new echarts.graphic.LinearGradient( |
|
|
|
0, 0, 0, 1, [{ |
|
|
|
offset: 0, |
|
|
|
color: '#00EAFF' |
|
|
|
}, |
|
|
|
// { |
|
|
|
// offset: 0.5, |
|
|
|
// color: '#00feff' |
|
|
|
// }, |
|
|
|
{ |
|
|
|
offset: 1, |
|
|
|
color: '#001AFF' |
|
|
|
} |
|
|
|
] |
|
|
|
) |
|
|
|
} |
|
|
|
}, |
|
|
|
data: [ |
|
|
|
14000, |
|
|
|
11000, |
|
|
|
10000, |
|
|
|
9000, |
|
|
|
8000, |
|
|
|
7000, |
|
|
|
5000, |
|
|
|
4000, |
|
|
|
3000, |
|
|
|
], |
|
|
|
zlevel: 11 |
|
|
|
}, |
|
|
|
{ |
|
|
|
// name: '厂用电量', |
|
|
|
type: 'scatter', |
|
|
|
stack: 1, |
|
|
|
xAxisIndex: 0, |
|
|
|
symbolOffset: [0, 0], //相对于原本位置的偏移量 |
|
|
|
data: [0, 0, 0, 0, 0, 0, 0, 0, 0], |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: '#fff' |
|
|
|
} |
|
|
|
}, |
|
|
|
symbolSize: 13, |
|
|
|
zlevel: 10, |
|
|
|
z: 2, |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '背景', |
|
|
|
type: 'bar', |
|
|
|
barWidth: '10%', |
|
|
|
barGap: '-100%', |
|
|
|
data: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000], |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: '#004298', |
|
|
|
barBorderRadius: 30, |
|
|
|
// backgroundColor:'#091C24' |
|
|
|
// borderColor:'#00D1F0' |
|
|
|
} |
|
|
|
}, |
|
|
|
z: 1, |
|
|
|
}, |
|
|
|
] |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
option && myChart.setOption(option); |
|
|
|
}, |
|
|
|
|
|
|
|
ty_bar2() { |
|
|
|
var chartDom = document.getElementById("pcgchart1"); |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
|
|
|
|
var option |
|
|
|
// var xData = function() { |
|
|
|
// var data = []; |
|
|
|
// for (var i = 2011; i < 2017; i++) { |
|
|
|
// data.push(i + "年"); |
|
|
|
// } |
|
|
|
// return data; |
|
|
|
// }(); |
|
|
|
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], |
|
|
|
// [3.5, 15.2, 16.1, 17.4, 13.4, 6.1], |
|
|
|
// [16.1, 13.5, 3.7, 17.4, 15.2, 18.9], |
|
|
|
// [17.4, 6.1, 13.4, 15.2, 13.7, 5.2], |
|
|
|
// [3.5, 15.2, 16.1, 17.4, 13.4, 6.1], |
|
|
|
// [16.1, 13.5, 3.7, 17.4, 15.2, 18.9], |
|
|
|
// [17.4, 6.1, 13.4, 15.2, 13.7, 5.2], |
|
|
|
] |
|
|
|
|
|
|
|
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], |
|
|
|
|
|
|
|
}) |
|
|
|
} |
|
|
|
option = { |
|
|
|
// backgroundColor: "#141f56", |
|
|
|
legend: { |
|
|
|
top: 0, |
|
|
|
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); |
|
|
|
}, |
|
|
|
ty_bar3() { |
|
|
|
var chartDom = document.getElementById("pcgchart2"); |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
|
|
|
|
var option |
|
|
|
// var xData = function() { |
|
|
|
// var data = []; |
|
|
|
// for (var i = 2011; i < 2017; i++) { |
|
|
|
// data.push(i + "年"); |
|
|
|
// } |
|
|
|
// return data; |
|
|
|
// }(); |
|
|
|
var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00']; |
|
|
|
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',] |
|
|
|
var name = ['体育场', '体育馆', '游泳场馆'] |
|
|
|
var data = [ |
|
|
|
[0, 134, 435, 561, 674, 552, 810, 300, 550, 460, 650, 790], |
|
|
|
[0, 437, 535, 634, 752, 435, 740, 560, 900, 440, 580, 350], |
|
|
|
[0, 0, 337, 635, 861, 637, 500, 620, 450, 630, 800, 320], |
|
|
|
// [3.5, 15.2, 16.1, 17.4, 13.4, 6.1], |
|
|
|
// [16.1, 13.5, 3.7, 17.4, 15.2, 18.9], |
|
|
|
// [17.4, 6.1, 13.4, 15.2, 13.7, 5.2], |
|
|
|
// [3.5, 15.2, 16.1, 17.4, 13.4, 6.1], |
|
|
|
// [16.1, 13.5, 3.7, 17.4, 15.2, 18.9], |
|
|
|
// [17.4, 6.1, 13.4, 15.2, 13.7, 5.2], |
|
|
|
] |
|
|
|
|
|
|
|
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, |
|
|
|
} |
|
|
|
}, |
|
|
|
markPoint: { |
|
|
|
data: [ |
|
|
|
{ |
|
|
|
name: '最大值', |
|
|
|
type: 'max' |
|
|
|
} |
|
|
|
] |
|
|
|
|
|
|
|
}, |
|
|
|
data: data[i], |
|
|
|
|
|
|
|
}) |
|
|
|
} |
|
|
|
option = { |
|
|
|
// backgroundColor: "#141f56", |
|
|
|
legend: { |
|
|
|
top: 270, |
|
|
|
right: 0, |
|
|
|
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: 230, |
|
|
|
bottom: 240, |
|
|
|
right: 20, |
|
|
|
left: 36, |
|
|
|
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 ', |
|
|
|
} |
|
|
|
}, |
|
|
|
splitNumber:10, |
|
|
|
// interval:4.10, |
|
|
|
axisLabel: { |
|
|
|
textStyle: { |
|
|
|
color: '#0095FF', |
|
|
|
fontWeight: 'normal', |
|
|
|
fontSize: '12', |
|
|
|
}, |
|
|
|
formatter: '{value}', |
|
|
|
}, |
|
|
|
}, |
|
|
|
series: series, |
|
|
|
} |
|
|
|
|
|
|
|
option && myChart.setOption(option); |
|
|
|
}, |
|
|
|
|
|
|
|
addNumber(start, end, id) { |
|
|
|
var o = document.getElementById(id); |
|
|
|
var i = start; |
|
|
|
var Interval; |
|
|
|
if (i < end) { |
|
|
|
Interval = setInterval(function () { |
|
|
|
i += 4000; // 设置每次增加的动态数字，可调整 |
|
|
|
if (i > end) { |
|
|
|
clearInterval(Interval); // 清除setInterval的time，这个方法w3c可具体查看文档 |
|
|
|
o.innerHTML = end.toLocaleString(); // 此赋值是为了避免最后一次增加过后的数据和真实数据不同 |
|
|
|
i = 0; |
|
|
|
} else { |
|
|
|
o.innerHTML = i.toLocaleString(); |
|
|
|
} |
|
|
|
}, 10); // 数据跳转的速度控制 |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
methods: {}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style> |
|
|
|
@ -83,18 +690,23 @@ export default { |
|
|
|
clear: both; |
|
|
|
background-image: url("../../assets/ty/tybg.jpg") !important; |
|
|
|
} |
|
|
|
|
|
|
|
.screen-box { |
|
|
|
background: none !important; |
|
|
|
} |
|
|
|
</style> |
|
|
|
<style lang="less" scoped> |
|
|
|
.main { |
|
|
|
display: flex; |
|
|
|
justify-content: space-evenly; |
|
|
|
|
|
|
|
justify-content: space-around; |
|
|
|
|
|
|
|
|
|
|
|
.left { |
|
|
|
width: 38%; |
|
|
|
width: 33%; |
|
|
|
height: 75vh; |
|
|
|
// height: 100%; |
|
|
|
// border: 1px solid red; |
|
|
|
margin-left: 2%; |
|
|
|
// margin-left: 2%; |
|
|
|
margin-top: -4%; |
|
|
|
|
|
|
|
.tiyuBla { |
|
|
|
@ -107,12 +719,97 @@ export default { |
|
|
|
font-size: 38px; |
|
|
|
font-weight: bold; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.wh_small { |
|
|
|
padding-top: 12px; |
|
|
|
font-size: 12px; |
|
|
|
text-align: right; |
|
|
|
padding-right: 10px; |
|
|
|
color: white; |
|
|
|
position: absolute; |
|
|
|
right: 0; |
|
|
|
top: 0; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.tongji { |
|
|
|
width: 100%; |
|
|
|
height: 35%; |
|
|
|
border: 1px solid #019ade; |
|
|
|
// float: left; |
|
|
|
height: 2.4rem; |
|
|
|
background-image: url("../../assets/wh/ins_count.png"); |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
margin-top: 0.48rem; |
|
|
|
|
|
|
|
.institle { |
|
|
|
color: #00c6ff; |
|
|
|
padding-left: 0.9rem; |
|
|
|
line-height: 0.38rem; |
|
|
|
height: 0.38rem; |
|
|
|
display: block; |
|
|
|
font-size: 16px; |
|
|
|
} |
|
|
|
|
|
|
|
.insval { |
|
|
|
width: 30%; |
|
|
|
height: 1.68rem; |
|
|
|
float: left; |
|
|
|
margin-left: 0.16rem; |
|
|
|
} |
|
|
|
|
|
|
|
.insval:first { |
|
|
|
margin-left: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.insval img { |
|
|
|
padding-top: 0.268rem; |
|
|
|
display: block; |
|
|
|
text-align: center; |
|
|
|
height: 0.78rem; |
|
|
|
margin-left: auto; |
|
|
|
margin-right: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.insval span { |
|
|
|
display: block; |
|
|
|
width: 100%; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.insval .insv { |
|
|
|
height: 0.48rem; |
|
|
|
line-height: 0.18rem; |
|
|
|
font-size: 22px; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
|
|
|
|
.insval .inst { |
|
|
|
color: #6a6c7c; |
|
|
|
font-size: 12px; |
|
|
|
height: 0.12rem; |
|
|
|
line-height: 0.12rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.dinszone { |
|
|
|
margin-top: 0.22rem; |
|
|
|
width: 100%; |
|
|
|
height: 0.48rem; |
|
|
|
float: left; |
|
|
|
} |
|
|
|
|
|
|
|
.dinszone .dins_title { |
|
|
|
display: block; |
|
|
|
height: 0.58rem; |
|
|
|
line-height: 0.44rem; |
|
|
|
color: #fff; |
|
|
|
font-size: 0.2rem; |
|
|
|
background-image: url('../../assets/wh/dins_title_bg.png'); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-position: 0 0; |
|
|
|
background-repeat: no-repeat; |
|
|
|
padding-left: 0.96rem; |
|
|
|
} |
|
|
|
|
|
|
|
.bfb { |
|
|
|
@ -185,7 +882,7 @@ export default { |
|
|
|
.center { |
|
|
|
margin-top: 3%; |
|
|
|
width: 30%; |
|
|
|
height: 76vh; |
|
|
|
height: 72vh; |
|
|
|
// border: 1px solid #019ade; |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
@ -193,42 +890,99 @@ export default { |
|
|
|
align-content: center; |
|
|
|
justify-content: center; |
|
|
|
background-image: url("../../assets/ty/vbig_bg.png"); |
|
|
|
background-size: contain; |
|
|
|
background-size: 100% 90%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
|
|
|
|
.item { |
|
|
|
width: 80%; |
|
|
|
height: 30%; |
|
|
|
margin-top: 5px; |
|
|
|
width: 70%; |
|
|
|
height: 34%; |
|
|
|
|
|
|
|
background-image: url("../../assets/ty/vsmall_bg.png"); |
|
|
|
background-size: contain; |
|
|
|
background-repeat: no-repeat; |
|
|
|
|
|
|
|
&:nth-child(1) { |
|
|
|
margin-top: -65px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.right { |
|
|
|
margin-top: 3%; |
|
|
|
width: 38%; |
|
|
|
width: 33%; |
|
|
|
height: 76vh; |
|
|
|
// border: 1px solid #019ade; |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
// align-items: center; |
|
|
|
align-content: center; |
|
|
|
justify-content: center; |
|
|
|
background-image: url("../../assets/ty/vbig_bg.png"); |
|
|
|
background-size: contain; |
|
|
|
background-repeat: no-repeat; |
|
|
|
// display: flex; |
|
|
|
// flex-wrap: wrap; |
|
|
|
|
|
|
|
.item { |
|
|
|
width: 80%; |
|
|
|
height: 30%; |
|
|
|
margin-top: 5px; |
|
|
|
background-image: url("../../assets/ty/vsmall_bg.png"); |
|
|
|
background-size: contain; |
|
|
|
background-repeat: no-repeat; |
|
|
|
.pcgrliu { |
|
|
|
width: 100%; |
|
|
|
// width: 634px; |
|
|
|
// height: 290px; |
|
|
|
flex: 1; |
|
|
|
|
|
|
|
&:nth-child(2) { |
|
|
|
// margin-top: 0.5rem; |
|
|
|
} |
|
|
|
|
|
|
|
.venue_proportion_box { |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
align-items: center; |
|
|
|
color: #00A7FF; |
|
|
|
|
|
|
|
.venue_proportion { |
|
|
|
flex: 1; |
|
|
|
// text-align: center; |
|
|
|
|
|
|
|
.venue_proportion_top { |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
.venue_proportion_box_num { |
|
|
|
color: white; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.venue_proportion_bo { |
|
|
|
|
|
|
|
// text-align: center; |
|
|
|
img { |
|
|
|
margin-left: 48px; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.pcg_title { |
|
|
|
display: block; |
|
|
|
height: 4vh; |
|
|
|
line-height: 3vh; |
|
|
|
background: url('../../assets/wh/pcg_t_bg.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
background-position: 0 center; |
|
|
|
padding-left: 0.98rem; |
|
|
|
color: #fff; |
|
|
|
font-size: 16px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// align-items: center; |
|
|
|
// align-content: center; |
|
|
|
// justify-content: center; |
|
|
|
// background-image: url("../../assets/ty/vbig_bg.png"); |
|
|
|
// background-size: contain; |
|
|
|
// background-repeat: no-repeat; |
|
|
|
|
|
|
|
// .item { |
|
|
|
// width: 80%; |
|
|
|
// height: 30%; |
|
|
|
// margin-top: 5px; |
|
|
|
// background-image: url("../../assets/ty/vsmall_bg.png"); |
|
|
|
// background-size: contain; |
|
|
|
// background-repeat: no-repeat; |
|
|
|
// } |
|
|
|
|
|
|
|
// .item:nth-child(2), |
|
|
|
// .item:nth-child(4) { |
|
|
|
// margin-right: 60px; |
|
|
|
@ -244,5 +998,20 @@ export default { |
|
|
|
width: 550px; |
|
|
|
height: 250px; |
|
|
|
} |
|
|
|
|
|
|
|
// .btgym { |
|
|
|
// width: 100%; |
|
|
|
// height: 100%; |
|
|
|
// background-image: url('../../assets/index/bg.jpg') !important; |
|
|
|
// background-size: 100% 100%; |
|
|
|
// background-position: 100% 100%; |
|
|
|
// background-repeat: no-repeat; |
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
// .wh_bg { |
|
|
|
// clear: both; |
|
|
|
// background-image: url("../../assets/wh/whbg.jpg") !important; |
|
|
|
// } |
|
|
|
} |
|
|
|
</style> |
123456
3 years ago
