fj-dc-ui/.svn/pristine/80/80056937bd02f2a3ea0dc4c9ad0be25f4782a0b5.svn-base

<!--  -->
<template>
    <div style="width:100%;height:100%;">
		<div class="simple_header">
			<div class="simple_header_icon"></div>
			<div class="simple_header_text">{{mapTitleFocusName +"数量分布"}}</div>
		</div>
		<div class="" style="width: 100%;" :style="{'height':heightCont +'px'}">
             <div style="width:100%;height:100%;" id="barChart" ref="barChart"></div>
		</div>
	</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import echarts from 'echarts'
export default {
    //import引入的组件需要注入到对象中才能使用
    props:['mapTitleFocusName','barData','barStartColor','barEndColor','barsChooseUnit'],
    components: {},
    data() {
    //这里存放数据
        return {
            xData:[],
            yData:[],
            themeColor:'rgba(93, 104, 118, 1)',
            themeColorSplitLine:'#888ea3'
        };
    },
    //监听属性 类似于data概念
    computed: {
        msg(){
            return this.$store.state.theme.testMsg;
        },
        heightCont(){
            if(window.innerWidth <= 1366){
                return window.innerHeight *0.17;
            }else{
                return window.innerHeight *0.15;
            }
        }
    },
    //监控data中的数据变化

    watch: {
        barData(newValue,oldValue){
            this.initIncChart();
        },
        msg(n,o){
            if( n == 'dark'){
                this.themeColor = 'rgba(177, 210, 254, 1)';
                this.themeColorSplitLine = 'rgba(177, 210, 254, 1)';
                this.initIncChart();
            }else{
                this.themeColor = 'rgba(93, 104, 118, 1)';
                this.themeColorSplitLine = 'rgba(177, 210, 254, 1)';
                this.initIncChart();
            }
        }
    },
    //方法集合
    methods: {
        initIncChart:function(){
            var _self = this;
            _self.barData.forEach(element => {
                if(element.name){
                    _self.xData.push(element.name.replace(/\省|\市|\自治区|\维吾尔自治区|\生产建设|\壮族|\回族/ig, ''));
                    _self.yData.push(element.total);
                }
            });
            let chart = echarts.init(this.$refs['barChart']);
            let option = {
                // backgroundColor:'rgba(226,250,255,1)',
                grid:{
                    top:'3%',
                    bottom:'3%',
                    left:'3%',
                    right:'3%',
                    containLabel:true
                },
                tooltip: {
                    trigger: 'axis',
                    label: {
                        show: true
                    },
                    formatter: function (params) {
                        return params[0].axisValue + ': ' +params[0].data + _self.barsChooseUnit
                    }
                },
                xAxis: {
                    axisLabel:{
                        rotate:30,
                        color:_self.themeColor
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false,
                        alignWithLabel: true
                    },
                    type: 'category',
                    data: _self.xData
                },
                yAxis: {
                    axisLabel:{
                        color:_self.themeColor
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: _self.themeColorSplitLine
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: 'transparent'//浅色主题
                            // color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
                        }
                    },
                    type: 'value',
                    max: function(value) {
                        return value.max + 1;
                    },
                    min: function(value) {
                        return 0;
                    },
                },
                series: [{
                    barMaxWidth: '30%',
                    symbolSize: 7,
                    lineStyle: {
                        color: 'rgba(124, 129, 255, 1)',
                        shadowBlur: 12,
                        shadowColor: 'rgba(33,148,246,0.9)',
                        shadowOffsetX: 1,
                        shadowOffsetY: 1
                    },
                    itemStyle: {

                        borderWidth: 1,
                        color: 'rgba(124, 129, 255, 1)',
                        borderColor: 'rgba(124, 129, 255, 1)',
                        normal: {
                            barBorderRadius:[5,5,0,0],
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                    color: this.barStartColor
                                },
                                {
                                    offset: 1,
                                    color: this.barEndColor
                                }
                            ])
                        },
                    },

                    data: _self.yData,
                    type: 'bar',
                    areaStyle: {
                        // color: 'rgba(63, 158, 255, 0.3)',
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: "rgba(63, 158, 255, 0.6)"
                                },
                                {
                                    offset: 1,
                                    color: "rgba(63, 158, 255, 0.3)"
                                }
                            ])
                        }
                    }
                }]
            };
            chart.setOption(option);
            this.xData = [];
            this.yData = [];
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

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

</style>