|
|
@@ -22,7 +22,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class='header-item'>
|
|
|
-
|
|
|
+ <div>搜索热词</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class='index-main'>
|
|
|
@@ -53,7 +53,7 @@
|
|
|
<div class='main-content'>
|
|
|
<div class='c1'>
|
|
|
<div class='c1-title'>文章来源分析</div>
|
|
|
- <div ref='article_sorce' style="width:100%;height:300px;"></div>
|
|
|
+ <div ref='article_sorce' style="width:100%;height:250px;"></div>
|
|
|
</div>
|
|
|
<div class='c2'>
|
|
|
<div class='c2-title'>文章发布/时间统计</div>
|
|
|
@@ -61,7 +61,20 @@
|
|
|
</div>
|
|
|
<div class='c1'>
|
|
|
<div class='c1-title'>文章阅读量TOP5</div>
|
|
|
- <div ref='article_ready' style="width:100%;height:300px;"></div>
|
|
|
+ <div ref='article_ready' style="width:100%;height:250px;">
|
|
|
+ <div class='h2'>
|
|
|
+ <span>序号</span>
|
|
|
+ <span>文章标题</span>
|
|
|
+ <span>阅读次数</span>
|
|
|
+ </div>
|
|
|
+ <div class='con2' v-for='(item,index) in list' :key='index'>
|
|
|
+ <span>{{index+1}}</span>
|
|
|
+ <span>{{item.article_header}}</span>
|
|
|
+ <span>{{item.count}}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -73,7 +86,7 @@
|
|
|
<div class='main-content'>
|
|
|
<div class='c1'>
|
|
|
<div class='c1-title'>会议主办方统计</div>
|
|
|
- <div ref='meet_count' style="width:100%;height:300px;"></div>
|
|
|
+ <div ref='meet_count' style="width:100%;height:250px;"></div>
|
|
|
</div>
|
|
|
<div class='c1'>
|
|
|
<div class='c2-title'>会议发布/时间统计</div>
|
|
|
@@ -88,7 +101,13 @@ import echarts from 'echarts';
|
|
|
export default {
|
|
|
data(){
|
|
|
return {
|
|
|
-
|
|
|
+ list:[
|
|
|
+ {article_header:'中国生态效率时空演化研究',count:'132'},
|
|
|
+ {article_header:'中国生态效率时空演化研究',count:'132'},
|
|
|
+ {article_header:'中国生态效率时空演化研究',count:'132'},
|
|
|
+ {article_header:'中国生态效率时空演化研究',count:'132'},
|
|
|
+ {article_header:'中国生态效率时空演化研究',count:'132'},
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
@@ -99,7 +118,8 @@ import echarts from 'echarts';
|
|
|
|
|
|
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);
|
|
|
+ var myChart5 = this.$echarts.init(this.$refs.meet_count);
|
|
|
+ var myChart6 = this.$echarts.init(this.$refs.meet_time);
|
|
|
// 学科期刊
|
|
|
let option = {
|
|
|
// backgroundColor: '#fff',
|
|
|
@@ -192,7 +212,7 @@ import echarts from 'echarts';
|
|
|
axisLabel:{
|
|
|
formatter:function(val) {
|
|
|
console.log(val,"")
|
|
|
- return '中国科学院成都生物研究所 中国科学院成都生物研究所' //对每个标签处理后的结果（通过js字符串方法处理）
|
|
|
+ return '中国科' //对每个标签处理后的结果（通过js字符串方法处理）
|
|
|
},
|
|
|
// x轴字体颜色
|
|
|
textStyle: {
|
|
|
@@ -200,8 +220,8 @@ import echarts from 'echarts';
|
|
|
// lineHeight: 20,
|
|
|
fontSize: 12
|
|
|
},
|
|
|
- align:'left',
|
|
|
- padding:[10,0 ,0,-40],
|
|
|
+ align:'center',
|
|
|
+ // padding:[10,0 ,0,-40],
|
|
|
}
|
|
|
|
|
|
}
|
|
|
@@ -236,7 +256,7 @@ import echarts from 'echarts';
|
|
|
{
|
|
|
name: '直接访问',
|
|
|
type: 'bar',
|
|
|
- barWidth: '60%',
|
|
|
+ barWidth: '40%',
|
|
|
data: [10, 52, 200, 334],
|
|
|
itemStyle: {
|
|
|
//柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
|
|
|
@@ -302,7 +322,7 @@ import echarts from 'echarts';
|
|
|
normal: {
|
|
|
//柱形图圆角，初始化效果
|
|
|
barBorderRadius:[10, 10, 10, 10],
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
|
|
offset: 0,
|
|
|
color: '#FF852C'
|
|
|
}, {
|
|
|
@@ -382,15 +402,25 @@ import echarts from 'echarts';
|
|
|
};
|
|
|
// 文章分布/时间统计
|
|
|
let option4 = {
|
|
|
+ color:"#FFB81E",
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ top:'10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: '#D4D8EE',
|
|
|
width: 2 ,
|
|
|
- type:'dotted',
|
|
|
+ // type:'dotted',
|
|
|
}
|
|
|
},
|
|
|
+ data:['','','','','','',''],
|
|
|
axisLabel:{
|
|
|
formatter:function(val) {
|
|
|
console.log(val,"")
|
|
|
@@ -400,10 +430,10 @@ import echarts from 'echarts';
|
|
|
textStyle: {
|
|
|
color: '#999999',
|
|
|
// lineHeight: 20,
|
|
|
- fontSize: 12
|
|
|
+ // fontSize: 12
|
|
|
},
|
|
|
align:'left',
|
|
|
- padding:[10,0 ,0,-40],
|
|
|
+ // padding:[10,0 ,0,-40],
|
|
|
}
|
|
|
},
|
|
|
yAxis: {
|
|
|
@@ -421,11 +451,192 @@ import echarts from 'echarts';
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
- boundaryGap: ['0%', '10%'],
|
|
|
+ boundaryGap: ['0%', '30%'],
|
|
|
},
|
|
|
series: [{
|
|
|
- data: [20, 50, 100, 200, 250, 300, 200],
|
|
|
+ data: [50, 200, 20, 300, 150, 300, 100],
|
|
|
type: 'line',
|
|
|
+ symbol: 'none', //取消折点圆圈
|
|
|
+ areaStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0, color: '#FFC765' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1, color: '#ffffff' // 100% 处的颜色
|
|
|
+ }],
|
|
|
+ global: false // 缺省为 false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ smooth: true
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ // 会议主办方统计
|
|
|
+ let option5 = {
|
|
|
+ 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: ['', '', '', '','','',],
|
|
|
+
|
|
|
+ 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:'center',
|
|
|
+ // 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: '40%',
|
|
|
+ data: [50, 52, 200, 334,45,190,240],
|
|
|
+ itemStyle: {
|
|
|
+ //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
|
|
|
+ normal: {
|
|
|
+ //柱形图圆角，初始化效果
|
|
|
+ barBorderRadius:[10, 10, 10, 10]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ // 会议发布/时间统计
|
|
|
+ let option6 = {
|
|
|
+ color:"#FFB81E",
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ top:'10%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#D4D8EE',
|
|
|
+ width: 2 ,
|
|
|
+ // type:'dotted',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data:['','','','','','',''],
|
|
|
+ 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%', '30%'],
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ data: [50, 200, 20, 300, 150, 300, 100],
|
|
|
+ type: 'line',
|
|
|
+ symbol: 'none', //取消折点圆圈
|
|
|
+ areaStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0, color: '#FFC765' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1, color: '#ffffff' // 100% 处的颜色
|
|
|
+ }],
|
|
|
+ global: false // 缺省为 false
|
|
|
+ }
|
|
|
+ },
|
|
|
smooth: true
|
|
|
}]
|
|
|
};
|
|
|
@@ -434,6 +645,8 @@ import echarts from 'echarts';
|
|
|
myChart2.setOption(option2);
|
|
|
myChart3.setOption(option3);
|
|
|
myChart4.setOption(option4);
|
|
|
+ myChart5.setOption(option5);
|
|
|
+ myChart6.setOption(option6);
|
|
|
}
|
|
|
},
|
|
|
mounted(){
|
|
|
@@ -445,12 +658,8 @@ import echarts from 'echarts';
|
|
|
}
|
|
|
</script>
|
|
|
<style lang='scss' scoped>
|
|
|
- /deep/.el-main{
|
|
|
-
|
|
|
- }
|
|
|
section{
|
|
|
- width:100%;
|
|
|
- overflow:scroll;
|
|
|
+ // width:100%;
|
|
|
.index_header{
|
|
|
background: #FFFFFF;
|
|
|
height:102px;
|
|
|
@@ -533,6 +742,43 @@ import echarts from 'echarts';
|
|
|
}
|
|
|
.c1{
|
|
|
flex:1;
|
|
|
+ .h2{
|
|
|
+ font-size:14px;
|
|
|
+ color:#999999;
|
|
|
+ height:40px;
|
|
|
+ line-height:40px;
|
|
|
+ span:nth-of-type(2){
|
|
|
+ margin-left:20px;
|
|
|
+ }
|
|
|
+ span:last-child{
|
|
|
+ float:right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .con2{
|
|
|
+ font-size:14px;
|
|
|
+ color:#333333;
|
|
|
+ height:36px;
|
|
|
+ line-height:36px;
|
|
|
+ background:#FAFAFA;
|
|
|
+ border-radius:7px;
|
|
|
+ margin-bottom:8px;
|
|
|
+ padding:0 10px;
|
|
|
+ &:nth-of-type(2){
|
|
|
+ color:#EF3D3D;
|
|
|
+ }
|
|
|
+ &:nth-of-type(3){
|
|
|
+ color:#FDAD23;
|
|
|
+ }
|
|
|
+ &:nth-of-type(4){
|
|
|
+ color:#56CCF6;
|
|
|
+ }
|
|
|
+ span:nth-of-type(2){
|
|
|
+ margin-left:20px;
|
|
|
+ }
|
|
|
+ span:last-child{
|
|
|
+ float:right;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.c2{
|
|
|
flex:1.5;
|
zt_yangl