|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <section>
|
|
|
+ <section class='index-content'>
|
|
|
<div class='index_header'>
|
|
|
<div class='header-item'>
|
|
|
<div class='item-img'>
|
|
|
@@ -30,22 +30,427 @@
|
|
|
<div class='item-title'>期刊统计</div>
|
|
|
<div class='item-more'>查看更多>></div>
|
|
|
</div>
|
|
|
+ <div class='main-content'>
|
|
|
+ <div class='c1'>
|
|
|
+ <div class='c1-title'>学期期刊分布</div>
|
|
|
+ <div ref='subject' style="width:100%;height:250px;"></div>
|
|
|
+ </div>
|
|
|
+ <div class='c2'>
|
|
|
+ <div class='c2-title'>单位期刊统计</div>
|
|
|
+ <div ref='company' style="width:100%;height:250px;"></div>
|
|
|
+ </div>
|
|
|
+ <div class='c1'>
|
|
|
+ <div class='c1-title'>期刊文章TOP5</div>
|
|
|
+ <div ref='article' style="width:100%;height:250px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class='index-main'>
|
|
|
+ <div class='main-item'>
|
|
|
+ <div class='item-title'>文章统计</div>
|
|
|
+ <div class='item-more'>查看更多>></div>
|
|
|
+ </div>
|
|
|
+ <div class='main-content'>
|
|
|
+ <div class='c1'>
|
|
|
+ <div class='c1-title'>文章来源分析</div>
|
|
|
+ <div ref='article_sorce' style="width:100%;height:300px;"></div>
|
|
|
+ </div>
|
|
|
+ <div class='c2'>
|
|
|
+ <div class='c2-title'>文章发布/时间统计</div>
|
|
|
+ <div ref='article_time' style="width:100%;height:250px;"></div>
|
|
|
+ </div>
|
|
|
+ <div class='c1'>
|
|
|
+ <div class='c1-title'>文章阅读量TOP5</div>
|
|
|
+ <div ref='article_ready' style="width:100%;height:300px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class='index-main'>
|
|
|
+ <div class='main-item'>
|
|
|
+ <div class='item-title'>会议统计</div>
|
|
|
+ <div class='item-more'>查看更多>></div>
|
|
|
+ </div>
|
|
|
+ <div class='main-content'>
|
|
|
+ <div class='c1'>
|
|
|
+ <div class='c1-title'>会议主办方统计</div>
|
|
|
+ <div ref='meet_count' style="width:100%;height:300px;"></div>
|
|
|
+ </div>
|
|
|
+ <div class='c1'>
|
|
|
+ <div class='c2-title'>会议发布/时间统计</div>
|
|
|
+ <div ref='meet_time' style="width:100%;height:250px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</section>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import echarts from 'echarts';
|
|
|
export default {
|
|
|
data(){
|
|
|
return {
|
|
|
|
|
|
}
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ getEcharts(){
|
|
|
+ var myChart = this.$echarts.init(this.$refs.subject);
|
|
|
+ var myChart1 = this.$echarts.init(this.$refs.company);
|
|
|
+ var myChart2 = this.$echarts.init(this.$refs.article);
|
|
|
+
|
|
|
+ var myChart3 = this.$echarts.init(this.$refs.article_sorce);
|
|
|
+ var myChart4 = this.$echarts.init(this.$refs.article_time);
|
|
|
+ // var myChart5 = this.$echarts.init(this.$refs.article_ready);
|
|
|
+ // 学科期刊
|
|
|
+ let option = {
|
|
|
+ // backgroundColor: '#fff',
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
|
+ },
|
|
|
+ // color:['#9379ff','#62A2FF', '#FFD053', '#FF9F41','#FF542C'],
|
|
|
+ visualMap: {
|
|
|
+ show: false,
|
|
|
+ min: 80,
|
|
|
+ max: 600,
|
|
|
+ inRange: {
|
|
|
+ // colorLightness: [0, 1]
|
|
|
+ color:['#9379ff','#62A2FF', '#FFD053', '#FF9F41','#FF542C'],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '访问来源',
|
|
|
+ type: 'pie',
|
|
|
+ radius: '55%',
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ data: [
|
|
|
+ {value: 335, name: '学术'},
|
|
|
+ {value: 310, name: '学术'},
|
|
|
+ {value: 274, name: '学术'},
|
|
|
+ {value: 235, name: '学术'},
|
|
|
+ {value: 400, name: '学术'}
|
|
|
+ ].sort(function (a, b) { return a.value - b.value; }),
|
|
|
+ roseType: 'radius',
|
|
|
+ label: {
|
|
|
+ color: 'rgba(102, 102, 102,1)',
|
|
|
+ fontSize:14
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(000, 000, 000, 0.1)'
|
|
|
+ },
|
|
|
+ smooth: 0.2,
|
|
|
+ length: 8,
|
|
|
+ length2: 5
|
|
|
+ },
|
|
|
+ // itemStyle: {
|
|
|
+
|
|
|
+ // // color: '#c23531',
|
|
|
+ // // shadowBlur: 200,
|
|
|
+ // // shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ // },
|
|
|
+
|
|
|
+ animationType: 'scale',
|
|
|
+ animationEasing: 'elasticOut',
|
|
|
+ animationDelay: function (idx) {
|
|
|
+ return Math.random() * 200;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ // 单位期刊统计
|
|
|
+ let option1 = {
|
|
|
+ color: ['#5066FF'],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
|
+ type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ top:'10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu'],
|
|
|
+
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#D4D8EE',
|
|
|
+ width: 2 ,
|
|
|
+ type:'dotted',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel:{
|
|
|
+ formatter:function(val) {
|
|
|
+ console.log(val,"")
|
|
|
+ return '中国科学院成都生物研究所 中国科学院成都生物研究所' //对每个标签处理后的结果（通过js字符串方法处理）
|
|
|
+ },
|
|
|
+ // x轴字体颜色
|
|
|
+ textStyle: {
|
|
|
+ color: '#999999',
|
|
|
+ // lineHeight: 20,
|
|
|
+ fontSize: 12
|
|
|
+ },
|
|
|
+ align:'left',
|
|
|
+ padding:[10,0 ,0,-40],
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ boundaryGap: ['0%', '20%'],
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: '#666666', //更改坐标轴文字颜色
|
|
|
+ fontSize : 14 //更改坐标轴文字大小
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle:{
|
|
|
+ type:'dashed'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // data:['0' , '100' , '200' , '300,400]
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '直接访问',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '60%',
|
|
|
+ data: [10, 52, 200, 334],
|
|
|
+ itemStyle: {
|
|
|
+ //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
|
|
|
+ normal: {
|
|
|
+ //柱形图圆角，初始化效果
|
|
|
+ barBorderRadius:[10, 10, 10, 10]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ // 期刊文章前5
|
|
|
+ let option2 = {
|
|
|
+ // title: {
|
|
|
+ // text: '世界人口总量',
|
|
|
+ // subtext: '数据来自网络'
|
|
|
+ // },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // legend: {
|
|
|
+ // data: ['2011年', '2012年']
|
|
|
+ // },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ top:'10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'value',
|
|
|
+ show:false,
|
|
|
+ // boundaryGap: ['0', '50%']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ // show:false,
|
|
|
+ type: 'category',
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: ['应用物理', '应用物理', '应用物理', '应用物理', '应用物理']
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ // {
|
|
|
+ // name: '2011年',
|
|
|
+ // type: 'bar',
|
|
|
+ // data: [18203, 23489, 29034, 104970, 131744]
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ name: '2012年',
|
|
|
+ type: 'bar',
|
|
|
+ data: [19325, 23438, 31000, 121594, 134141],
|
|
|
+ barWidth: '30%',
|
|
|
+ itemStyle: {
|
|
|
+ //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
|
|
|
+ normal: {
|
|
|
+ //柱形图圆角，初始化效果
|
|
|
+ barBorderRadius:[10, 10, 10, 10],
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#FF852C'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#FFCF29'
|
|
|
+ }]),
|
|
|
+ label: {
|
|
|
+ show: true, //开启显示
|
|
|
+ position: 'right', //在上方显示
|
|
|
+ textStyle: { //数值样式
|
|
|
+ color: '#666666',
|
|
|
+ fontSize: 14
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ // 文章来源分布
|
|
|
+ let option3 = {
|
|
|
+ // backgroundColor: '#fff',
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
|
+ },
|
|
|
+ // color:['#9379ff','#62A2FF', '#FFD053', '#FF9F41','#FF542C'],
|
|
|
+ visualMap: {
|
|
|
+ show: false,
|
|
|
+ min: 80,
|
|
|
+ max: 600,
|
|
|
+ inRange: {
|
|
|
+ // colorLightness: [0, 1]
|
|
|
+ color:['yellow','#62A2FF', '#FFD053', '#FF9F41','#FF542C'],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '访问来源',
|
|
|
+ type: 'pie',
|
|
|
+ radius: '55%',
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ data: [
|
|
|
+ {value: 300, name: '液晶与显示'},
|
|
|
+ {value: 310, name: '化学进展'},
|
|
|
+ {value: 274, name: '化学进展'},
|
|
|
+ {value: 235, name: '化学进展'},
|
|
|
+ {value: 400, name: '化学进展'}
|
|
|
+ ].sort(function (a, b) { return a.value - b.value; }),
|
|
|
+ roseType: 'radius',
|
|
|
+ label: {
|
|
|
+ color: 'rgba(102, 102, 102,1)',
|
|
|
+ fontSize:14
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(000, 000, 000, 0.1)'
|
|
|
+ },
|
|
|
+ smooth: 0.2,
|
|
|
+ length: 8,
|
|
|
+ length2: 5
|
|
|
+ },
|
|
|
+ // itemStyle: {
|
|
|
+
|
|
|
+ // // color: '#c23531',
|
|
|
+ // // shadowBlur: 200,
|
|
|
+ // // shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ // },
|
|
|
+
|
|
|
+ animationType: 'scale',
|
|
|
+ animationEasing: 'elasticOut',
|
|
|
+ animationDelay: function (idx) {
|
|
|
+ return Math.random() * 200;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ // 文章分布/时间统计
|
|
|
+ let option4 = {
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#D4D8EE',
|
|
|
+ width: 2 ,
|
|
|
+ type:'dotted',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel:{
|
|
|
+ formatter:function(val) {
|
|
|
+ console.log(val,"")
|
|
|
+ return '中国科学院成都生物研究所 中国科学院成都生物研究所' //对每个标签处理后的结果（通过js字符串方法处理）
|
|
|
+ },
|
|
|
+ // x轴字体颜色
|
|
|
+ textStyle: {
|
|
|
+ color: '#999999',
|
|
|
+ // lineHeight: 20,
|
|
|
+ fontSize: 12
|
|
|
+ },
|
|
|
+ align:'left',
|
|
|
+ padding:[10,0 ,0,-40],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle:{
|
|
|
+ type:'dashed'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ interval:100,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ boundaryGap: ['0%', '10%'],
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ data: [20, 50, 100, 200, 250, 300, 200],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ myChart1.setOption(option1);
|
|
|
+ myChart2.setOption(option2);
|
|
|
+ myChart3.setOption(option3);
|
|
|
+ myChart4.setOption(option4);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.getEcharts();
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-<style lang='scss' scoped>
|
|
|
+<style lang='scss' scoped>
|
|
|
+ /deep/.el-main{
|
|
|
+
|
|
|
+ }
|
|
|
section{
|
|
|
- // border:1px solid red;
|
|
|
width:100%;
|
|
|
+ overflow:scroll;
|
|
|
.index_header{
|
|
|
background: #FFFFFF;
|
|
|
height:102px;
|
|
|
@@ -101,16 +506,17 @@
|
|
|
|
|
|
}
|
|
|
.index-main{
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-top:20px;
|
|
|
+ padding:20px;
|
|
|
.main-item{
|
|
|
- margin-top:20px;
|
|
|
- padding:20px;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 10px;
|
|
|
position:relative;
|
|
|
.item-title{
|
|
|
font-size: 18px;
|
|
|
font-weight: bold;
|
|
|
color: #333333;
|
|
|
+ margin-bottom:20px;
|
|
|
}
|
|
|
.item-more{
|
|
|
position:absolute;
|
|
|
@@ -120,6 +526,30 @@
|
|
|
color: #3895FE;
|
|
|
}
|
|
|
}
|
|
|
+ .main-content{
|
|
|
+ display:flex;
|
|
|
+ &>div:not(:last-child){
|
|
|
+ border-right:1px solid #eee;
|
|
|
+ }
|
|
|
+ .c1{
|
|
|
+ flex:1;
|
|
|
+ }
|
|
|
+ .c2{
|
|
|
+ flex:1.5;
|
|
|
+ }
|
|
|
+ .c1,.c2{
|
|
|
+ width:100%;
|
|
|
+ // flex:1;
|
|
|
+ padding:10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .c1-title,.c2-title{
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #666666;
|
|
|
+ // margin-top:20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
zt_yangl