各场馆实时进馆人数
@@ -120,6 +163,7 @@ export default {
mounted() {
this.showorders()
this.cgrs_line()
+ this.cgchart()
},
// 方法
methods: {
@@ -127,6 +171,7 @@ export default {
selitem(type) {
this.klselt = type;
},
+ // 圆柱图
showorders() {
// 基于准备好的dom，初始化echarts实例
var chartDom = document.getElementById('showorders');
@@ -134,31 +179,254 @@ export default {
// 指定图表的配置项和数据
var option;
+ // option = {
+ // grid: { //整张图的大小，距离left，right，bottom的距离
+ // left: '3%',
+ // right: '4%',
+ // bottom: '3%',
+ // containLabel: true
+ // },
+ // xAxis: {
+ // type: 'category',
+ // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ // },
+ // yAxis: {
+ // type: 'value'
+ // },
+
+ // series: [
+ // {
+ // data: [120, 200, 150, 80, 70, 110, 130],
+ // type: 'bar',
+ // showBackground: true,
+ // color: "#2626ff",
+ // backgroundStyle: {
+ // color: 'rgba(180, 180, 180, 0.2)'
+ // },
+
+ // }
+ // ]
+ // };
+ var data = [100, 200, 100, 200, 100, 200, 250, 50, 30, 130, 150, 110, 120]
+ // var data = [Math.random() * 300]
option = {
- grid: { //整张图的大小，距离left，right，bottom的距离
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
+ // backgroundColor: '#031245',
+ color: [
+ '#63caff',
+ '#49beff',
+ '#03387a',
+ '#03387a',
+ '#03387a',
+ '#6c93ee',
+ '#a9abff',
+ '#f7a23f',
+ '#27bae7',
+ '#ff6d9d',
+ '#cb79ff',
+ '#f95b5a',
+ '#ccaf27',
+ '#38b99c',
+ '#93d0ff',
+ '#bd74e0',
+ '#fd77da',
+ '#dea700',
+ ],
+ grid: {
+ containLabel: true,
+ left: 20,
+ right: 20,
+ bottom: 10,
+ top: 40,
},
xAxis: {
+ axisLabel: {
+ color: '#FFFFFF',
+ fontSize: 12,
+ interval: 0,
+ // show: false,
+ },
+ axisTick: {
+ lineStyle: {
+ color: '#384267',
+ },
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#0095FF',
+ width: 1,
+ type: 'solid',
+ },
+ show: true,
+ },
+ data: ['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'],
type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
- type: 'value'
+ // show:false,
+ axisLabel: {
+ color: '#0095FF',
+ fontSize: 14,
+ },
+ axisTick: {
+ lineStyle: {
+ color: '#0095FF',
+ width: 1,
+ },
+ show: false,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#0095FF',
+ type: 'solid',
+ },
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#0095FF',
+ width: 1,
+ type: 'solid',
+ },
+ show: false,
+ },
+ name: '',
},
-
series: [
{
- data: [120, 200, 150, 80, 70, 110, 130],
+ data: data,
type: 'bar',
- showBackground: true,
- color: "#2626ff",
- backgroundStyle: {
- color: 'rgba(180, 180, 180, 0.2)'
+ barMaxWidth: 'auto',
+ barWidth: 15,
+
+ itemStyle: {
+ normal: {
+ color: function () {
+ return new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+ { offset: 0, color: "#00B4FF" },
+ { offset: 1, color: "#2F00FF" }
+ ], false)
+ },
+ label: {
+ show: false,//柱状上的数据
+ }
+ },
+
},
+ label: {
+ show: true,
+ position: 'top',
+ distance: 15,
+ color: '#fff',
+ },
+ },
+ {
+ data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+ type: 'bar',
+ barMaxWidth: '15',
+ symbol: 'circle',
+ symbolOffset: [0, '50%'],
+ symbolSize: [10, 5],
+ color: '#fff',
+ },
+ {
+ data: data,
+ type: 'pictorialBar',
+ barMaxWidth: '15',
+ symbolPosition: 'end',
+ symbol: 'circle',
+ symbolOffset: [0, '-50%'],
+ symbolSize: [15, 7],
+ zlevel: 2,
+ },
+ {
+ data: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
+ type: 'bar',
+ barMaxWidth: 'auto',
+ barWidth: 15,
+ barGap: '-100%',
+ zlevel: -1,
+
+ itemStyle: {
+ normal: {
+ },
+ }
+ },
+ {
+ data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+ type: 'pictorialBar',
+ barMaxWidth: '15',
+ symbol: 'circle',
+ symbolOffset: [0, '50%'],
+ symbolSize: [15, 7],
+ zlevel: -2,
+ },
+ {
+ data: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
+ type: 'pictorialBar',
+ barMaxWidth: '15',
+ symbolPosition: 'end',
+ symbol: 'circle',
+ symbolOffset: [0, '-50%'],
+ symbolSize: [15, 7],
+ zlevel: -1,
+ itemStyle: {
+ shadowColor: 'rgba(0, 0, 0, 0.5)',
+ shadowBlur: 15
+ }
+ },
+ ],
+
+ };
+
+ option && myChart.setOption(option);
+ },
+
+ // 圆饼图
+ cgchart() {
+ var chartDom = document.getElementById('cgchart');
+ var myChart = echarts.init(chartDom);
+ var option;
+
+ option = {
+
+ color: ["#0780e2", "#fdff00"],
+ series: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: ['60%', '70%'], //曲线范围
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 40,
+ // borderColor: '#fff',
+ borderWidth: 1
+ },
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: 40,
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: false
+ },
+ data: [
+ { value: 1048, name: 'Search Engine' },
+ { value: 735, name: 'Direct' },
+ { value: 580, name: 'Email' },
+ { value: 484, name: 'Union Ads' },
+ { value: 300, name: 'Video Ads' }
+ ]
}
]
};
@@ -173,87 +441,130 @@ export default {
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'];
+ var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
+ var name = []
+ var data = [
+ [137, 34, 135, 161, 74, 152, 110, 100, 150, 137, 34, 135, 161],
+ [174, 137, 135, 34, 152, 135, 140, 160, 100, 174, 137, 135, 34],
+ [134, 74, 137, 135, 161, 137, 300, 220, 250, 134, 74, 137, 135],
+ [147, 134, 155, 131, 174, 122, 140, 160, 150, 127, 134, 175, 161],
+ [124, 147, 175, 134, 122, 175, 180, 110, 130, 154, 187, 125, 134],
+ [154, 174, 157, 175, 121, 157, 200, 250, 280, 134, 174, 157, 175],
+ // [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 = {
- toolbox: {
- feature: {
- saveAsImage: {}
- }
- },
+
grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: [
- {
- type: 'category',
- boundaryGap: false,
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ borderWidth: 0,
+ top: 160,
+ bottom: 160,
+ textStyle: {
+ color: "#fff"
}
- ],
- yAxis: [
- {
- type: 'value'
- }
- ],
- series: [
- {
- name: 'Email',
- type: 'line',
- stack: 'Total',
- areaStyle: {},
- emphasis: {
- focus: 'series'
- },
- data: [120, 132, 101, 134, 90, 230, 210]
+ },
+ xAxis: [{
+ type: "category",
+ axisLine: {
+ show: false,
},
- {
- name: 'Union Ads',
- type: 'line',
- stack: 'Total',
- areaStyle: {},
- emphasis: {
- focus: 'series'
- },
- data: [220, 182, 191, 234, 290, 330, 310]
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#0B0765',
+ }
},
- {
- name: 'Video Ads',
- type: 'line',
- stack: 'Total',
- areaStyle: {},
- emphasis: {
- focus: 'series'
- },
- data: [150, 232, 201, 154, 190, 330, 410]
+ boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
+ axisTick: {
+ show: false
},
- {
- name: 'Direct',
- type: 'line',
- stack: 'Total',
- areaStyle: {},
- emphasis: {
- focus: 'series'
- },
- data: [320, 332, 301, 334, 390, 330, 320]
+ splitArea: {
+ show: false
},
- {
- name: 'Search Engine',
- type: 'line',
- stack: 'Total',
- label: {
- show: true,
- position: 'top'
+ axisLabel: {
+ inside: false,
+ textStyle: {
+ color: '#FFFFFF',
+ fontWeight: 'normal',
+ fontSize: '12',
},
- areaStyle: {},
- emphasis: {
- focus: 'series'
+ },
+ data: xData,
+ }],
+ yAxis: {
+ type: 'value',
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#0B0765 ',
+ }
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#0B0765 ',
+ }
+ },
+ axisLabel: {
+ textStyle: {
+ color: '#0095FF',
+ fontWeight: 'normal',
+ fontSize: '12',
},
- data: [820, 932, 901, 934, 1290, 1330, 1320]
- }
- ]
- };
+ formatter: '{value}',
+ },
+ },
+ series: series,
+ }
option && myChart.setOption(option);
@@ -415,7 +726,8 @@ export default {
cursor: pointer;
}
-.klqs .klbtn span.spactive{
+/* 选择年月日后的样式变化 */
+.klqs .klbtn span.spactive {
background-image: url('../assets/sactive_bg.png');
background-repeat: no-repeat;
background-size: 100%;
@@ -426,11 +738,66 @@ export default {
.cgbox {
background-image: url("../assets/cgbox_bg.png");
width: 100%;
- height: 8.6rem;
- background-position: 0 0;
- background-size: 100%;
+ height: 12rem;
+ background-position: center center;
+ background-size: 100% 100%;
margin-top: 2.4rem;
- padding: 0.4rem;
+}
+
+/* 饼图 */
+.cgbox .cgpies {
+ width: 40%;
+ height: 12rem;
+ float: left;
+}
+
+.cgbox .cgleft {
+ width: 30%;
+ height: 12rem;
+ float: left;
+}
+
+.cgbox .cgleft>ul{
+ padding-left: 0.66rem;
+}
+.cgbox .cgright {
+ width: 30%;
+ height: 12rem;
+ float: left;
+}
+.cgbox .cgright>ul{
+ padding-left: 0.66rem;
+}
+.cgbox .cglist{
+ margin-top: 3rem;
+}
+.cgbox .cglist ul{
+ display: block;
+ width: 100%;
+}
+.cgbox .cglist ul li{
+ width: 100%;
+ list-style: none;
+ height: 0.66rem;
+ line-height: 0.66rem;
+ font-size: 0.66rem;
+ margin-top: 1rem;
+}
+.cgbox .cglist ul li span{
+ display: block;
+ float: left;
+ margin-left: 0.46rem;
+}
+
+.cgbox .cglist ul li span img{
+ width: 0.68rem;
+ height: 0.68rem;
+}
+
+.cgbox .cgright {
+ width: 30%;
+ height: 12rem;
+ float: left;
}
/* 今日人數 */
@@ -442,31 +809,33 @@ export default {
.today_rs .tdrs_title {
background-image: url("../assets/klqs_bg.png");
background-repeat: no-repeat;
- background-size: 100%;
- height: 3.8rem;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ height: 3.2rem;
+ line-height: 2.86rem;
background-position: -1.04rem 0.2rem;
- float: left;
- padding-left: 4rem;
+ padding-left: 4.6rem;
font-size: 1.6rem;
}
/** 各場館實時 */
-.pcgrs{
+.pcgrs {
clear: both;
margin-top: 2.6rem;
width: 100%;
}
-.pcgrs .pcgrs_title{
+
+.pcgrs .pcgrs_title {
background-image: url("../assets/klqs_bg.png");
background-repeat: no-repeat;
background-size: 100%;
height: 3.8rem;
background-position: -1.04rem 0.2rem;
- float: left;
- padding-left: 4rem;
+ padding-left: 4.6rem;
font-size: 1.6rem;
}
-.pcgrs .pcg_item{
+
+.pcgrs .pcg_item {
margin-top: 0.4rem;
background-image: url("../assets/pcg_bg.png");
background-repeat: no-repeat;
@@ -475,15 +844,17 @@ export default {
float: left;
margin-left: 2%;
}
-.pcgrs .pcg_item .pcpos{
+
+.pcgrs .pcg_item .pcpos {
text-align: right;
font-size: 0.68rem;
display: block;
float: right;
margin-top: 1.6rem;
- padding-right: 0.6rem;
+ padding-right: 1.18rem;
}
-.pcgrs .pcg_item .pcval{
+
+.pcgrs .pcg_item .pcval {
font-size: 1.086rem;
margin-top: 6rem;
width: 68%;
@@ -491,12 +862,12 @@ export default {
float: left;
text-align: center;
}
-.pcgrs .pcg_item .pcrate{
- width: 32%;
+
+.pcgrs .pcg_item .pcrate {
+ /* width: 32%; */
display: block;
float: left;
font-size: 0.86rem;
margin-top: 4rem;
text-align: center;
-}
-
\ No newline at end of file
+}
\ No newline at end of file
+
+