zky-admin/src/views/Index.vue

<template>
    <section class='index-content'>
        <div class='index_header'>
            <div class='header-item'>
                <div class='item-img'>
                    <img src="../assets/book.png" alt="">
                    <span class='text'>  期刊总数 <br/><span class='count'>356</span></span>
                </div>
                <div class='item-img'>
                    <img src="../assets/network.png" alt="">
                    <span class='text'>  文章发布量 <br/><span class='count'>356</span></span>
                </div>
            </div>
            <div class='header-item'>
                <div class='item-text'>
                    <div><span class='text'>活动举办次数</span> <span class='count'> 82</span></div>
                    <div><span class='text'>活动参与次数</span><span class='count'> 82</span></div>
                </div>
                <div class='item-text'>
                     <div><span class='text'>总阅读次数</span><span class='count'> 82</span></div>
                    <div><span class='text'>转发次数</span><span class='count'> 82</span></div>
                </div>
            </div>
            <div class='header-item'>
                
            </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='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>      
    /deep/.el-main{
        
    }
    section{
        width:100%;
        overflow:scroll;
        .index_header{
            background: #FFFFFF;
            height:102px;
            border-radius: 10px;
            display:flex;
            align-items: center;
            
            .header-item{
                flex:1;
                display:flex;
                justify-content: space-evenly;
                align-items: center;
                height:56px;
                &:not(:last-child){
                    border-right:1px solid #d8d8d8;
                }
                .text{
                    font-size: 16px;
                    color: #666666;
                }
                .count{
                    font-size: 32px;
                }
                .item-img{
                    display:flex;
                    img{
                        width:56px;
                        height:56px;
                        margin-right:30px;
                    }
                    .text{
                        position:relative;
                        top:-8px;
                    }
                    .count{
                        color: #208CFE;
                        position:relative;
                        bottom:-11px;
                    }
                }
                .item-text{
                    &>div{
                        display:flex;
                        align-items: center;
                        .text{
                            width:120px;
                        }
                    }
                }
                
            }
            
        
        }
        .index-main{
            background: #FFFFFF;
            border-radius: 10px;
            margin-top:20px;
            padding:20px;
            .main-item{
                position:relative;
                .item-title{
                    font-size: 18px;
                    font-weight: bold;
                    color: #333333;
                    margin-bottom:20px;
                }
                .item-more{
                    position:absolute;
                    top:20px;
                    right:20px;
                    font-size: 14px;
                    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>