fj-dc-ui/.svn/pristine/d7/d70633b02b1d9bc9d4a8123e3fa3700fa6402db0.svn-base

<!--  -->
<template>
    <div>
            <el-row>
                <div style="width:58vw;height:49vh;" ref="barChart"></div>
            </el-row>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import echarts from 'echarts'
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    props:[],
    data() {
    //这里存放数据
        return {
            showTable:false,
            tableOrChart:'表格',
            radio:'1',
            title:'评论点赞TOP 5',
            color:['#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b'],
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        
    },
    //方法集合
    methods: {
        changeRadioEvent(item){
            if(item == '1'){
                this.title = '评论点赞TOP 5';
                this.color = ['#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b'];
                this.initChart();
            }else{
                this.title = '评论吐槽TOP 5';
                this.color = ['#ff5722', '#ff9800', '#ffc107', '#ffeb3b', '#cddc39'];
                this.initChart();
            }
        },
        initChart:function(){
				let _self = this;
                let chart = echarts.init(this.$refs['barChart']);
                var myColor = this.color;
                var chartData = [40,28,18,15,6];
                var chartName = ['差旅费异常、专家费、劳务费、招待费、发票异常、先付款、.pdf', '交通费报销2018-11-12月.xlsx', '水利部主机业务申请表-新版.docx', 'ZSFW-01-金水字[2017]01号-关于印发《财务支出审批管理办法》的通知-附件1：财务支出审批管理办法_看图王.pdf-新版.docx','border1.png'];
				let option = {
                    title: {
                            text: '资料下载量排行',
                            x: 'center',
                            top: "20",
                            textStyle: {
                                color: '#000',
                                fontSize: 16
                            }
                        },
                        backgroundColor: '#fff',
                        grid: {
                            left: '5%',
                            right: '5%',
                            bottom: '5%',
                            top: '5%',
                            containLabel: true
                        },
                        xAxis: [{
                                show: false,
                            },
                            {
                                show: false,
                            }
                        ],
                        yAxis: {
                            type: 'category',
                            inverse: true,
                            show: false
                        },

                        series: [

                            //亮色条 百分比
                            {
                                show: true,
                                type: 'bar',
                                barGap: '-100%',
                                barWidth: '20%',
                                z: 2,
                                itemStyle: {
                                    normal: {
                                        color: function(params) {
                                            var num = myColor.length;
                                            return myColor[params.dataIndex % num]
                                        }
                                    }
                                },
                                label: {
                                    normal: {
                                        show: true,
                                        textStyle: {
                                            color: '#000',
                                            fontSize: 12,
                                            fontWeight: 'bold'
                                        },
                                        position: 'right',
                                        formatter: function(data) {
                                            return (chartData[data.dataIndex]);
                                        }
                                    }
                                },
                                data: chartData,
                            },
                            //年份
                            {
                                show: true,
                                type: 'bar',
                                xAxisIndex: 1, //代表使用第二个X轴刻度
                                barGap: '-100%',
                                barWidth: '10%',
                                itemStyle: {
                                    normal: {
                                        barBorderRadius: 200,
                                        color: 'transparent'
                                    }
                                },
                                label: {
                                    normal: {
                                        show: true,
                                        position: [0, '-20'],
                                        textStyle: {
                                            fontSize:14,
                                            color: '#333',
                                        },
                                        formatter: function(data) {
                                            return chartName[data.dataIndex];
                                        }
                                    }
                                },
                                data: chartData
                            }
                        ]
                };
					chart.setOption(option,true);
            },
           
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.initChart();
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>

</style>