yrxzy/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>
        </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:250px;"></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: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>
        <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:250px;"></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 {
                list:[
                    {article_header:'中国生态效率时空演化研究',count:'132'},
                    {article_header:'中国生态效率时空演化研究',count:'132'},
                    {article_header:'中国生态效率时空演化研究',count:'132'},
                    {article_header:'中国生态效率时空演化研究',count:'132'},
                    {article_header:'中国生态效率时空演化研究',count:'132'},
                ]
            }
        },
        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.meet_count);
                var myChart6 = this.$echarts.init(this.$refs.meet_time);
                // 学科期刊
                let option = {
                    backgroundColor: '#fff',

                    // title: {
                    //     text: 'Customized Pie',
                    //     left: 'center',
                    //     top: 20,
                    //     textStyle: {
                    //         color: '#ccc'
                    //     }
                    // },
                    color:['#9379ff','#62A2FF', '#FFD053', '#FF9F41','#FF542C'],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                            
                    // visualMap: {
                    //     show: false,
                    //     min: 80,
                    //     max: 600,
                    //     inRange: {
                    //         colorLightness: [0, 1]
                    //     }
                    // },
                    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:'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: [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, 1, 0, [{
                                        offset: 0,
                                        color: '#FF852C'
                                    }, {
                                        offset: 1,
                                        color: '#FFCF29'
                                    }]),
                                    label: {
                                        show: true,		//开启显示
                                        position: 'right',	//在上方显示
                                        textStyle: {	    //数值样式
                                            color: '#666666',
                                            fontSize: 14
                                        }
                                    }
                                },
                            } 
                        }
                    ]
                };
                // 文章来源分布
                let option3 = {
                    backgroundColor: '#fff',

                    // title: {
                    //     text: 'Customized Pie',
                    //     left: 'center',
                    //     top: 20,
                    //     textStyle: {
                    //         color: '#ccc'
                    //     }
                    // },
                    color:['#FA9022','#DCDB01', '#8C70F8', '#34A6FE','#2A4AD1'],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                            
                    // visualMap: {
                    //     show: false,
                    //     min: 80,
                    //     max: 600,
                    //     inRange: {
                    //         colorLightness: [0, 1]
                    //     }
                    // },
                    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 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',
                            }
                        },
                        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
                    }] 
                };
                // 会议主办方统计
                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
                    }] 
                };
                myChart.setOption(option);
                myChart1.setOption(option1);
                myChart2.setOption(option2);
                myChart3.setOption(option3);
                myChart4.setOption(option4);
                myChart5.setOption(option5);
                myChart6.setOption(option6);
            }
        },
        mounted(){
            this.getEcharts();
        },
        created(){
            
        }
    }
</script>
<style lang='scss' scoped>      
    section{
        // width:100%;
        .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;
                    .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;
                }
                .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>