fj-dc-ui/.svn/pristine/e4/e424b68376a73cf9c5dcbcfc6f0bbdf1911d34c8.svn-base

<!--  -->
<template>
  <div>
    <div class="simple_header">
      <div class="simple_header_icon"></div>
      <div class="simple_header_text">
        问题趋势
      </div>
      <div class="simple_header_control">
            <el-radio-group v-model="radio" size="mini" class="myRadio" @change="changeLine()">
                <el-radio label="inc">增量</el-radio>
                <el-radio label="total" style="margin-left:0;">累计</el-radio>
            </el-radio-group>
      </div>
    </div>
    <div class="right_QuestionLineChart_content" >
        <div v-show="lineShow" style="width:100%;height:100%;"  ref="QuestionLineChart"></div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import echarts from 'echarts'
// import theme from '../../store/theme'
    export default {
    //import引入的组件需要注入到对象中才能使用
    props:['GlobalSttmTime','GlobalEntmTime','rightTimeLimit',"xData","yData"],
    components: {},
    data() {
        //这里存放数据
        return {
            radio: "inc",
            lineShow:true,
            chartType:'bar',
            searchTime:'',
            themeColor:'rgba(80, 105, 122, 1)',
        };
    },
    //监听属性 类似于data概念
    computed: {
        msg(){
            // return theme.state.testMsg;
            return this.$store.state.theme.testMsg;
		},
    },
    //监控data中的数据变化
    watch: {
    
        rightTimeLimit(newValue,oldValue){
            this.rightTimeLimit = newValue;
        },
        xData(newValue,oldValue){
            this.initIncChart();
        },
        yData(newValue,oldValue){
            this.initIncChart();
        },
        msg(n,o){
            if( n == 'dark'){
                this.themeColor = 'rgba(177, 210, 254, 1)';
                this.initIncChart();
            }else{
                this.themeColor = 'rgba(80, 105, 122, 1)';
                this.initIncChart();
            }
        }
    },
    //方法集合
    methods: {
        //切换增量、统计
        changeLine(){
            if(this.radio === 'inc'){
                this.$emit('trendLineChartType',this.radio);
                this.chartType = 'bar';
                this.initIncChart();
            }else{
                this.$emit('trendLineChartType',this.radio);
                this.chartType = 'line';
                this.initIncChart();
            }
        },
        //绘制图表
        initIncChart:function(){
            var _this = this;
            let chart = echarts.init(this.$refs['QuestionLineChart']);
            let option = {
                // backgroundColor:'rgba(226,250,255,1)',
                grid:{
                    top:'10%',
                    bottom:'10%',
                    left:'5%',
                    right:'10%',
                    containLabel:true
                },
                tooltip: {
                    trigger: 'axis',
                    label: {
                        show: true
                    },
                    formatter: function (params) {
                        return params[0].axisValue + ': ' +params[0].data + '个'
                    }
                },
                xAxis: {
                    axisLabel:{
                        color:_this.themeColor
                    },
                    axisLine: {
                        show: true,
                            lineStyle: {
                            color: 'rgba(63, 158, 255, 1)'
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false,
                        alignWithLabel: true
                    },
                    type: 'category',
                    data: _this.xData
                },
                yAxis: {
                    axisLabel:{
                        color:_this.themeColor
                    },
                    axisLine: {
                        show: true,
                            lineStyle: {
                            color: 'rgba(63, 158, 255, 1)'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(33,148,246,0.2)'
                        }
                    },
                    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;
                    },
                    min: function(value) {
                        return value.min;
                    },
                },
                series: [
                    // 堆叠样式
                    // {
                        //     type: 'bar',
                    //     itemStyle: {
                        //         normal: {
                            //             color: '#ddd'
                    //         }
                    //     },
                    //     silent: true,
                    //     barGap: '-100%', // Make series be overlap
                    //     data: [60, 60, 60, 60]
                    // },
                    {
                    barMaxWidth: '50%',
                    symbol: 'emptyCircle',
                    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: "rgba(122, 189, 250, 1)"
                                },
                                {
                                    offset: 1,
                                    color: "rgba(101, 142, 253, 1)"
                                }
                            ])
                        },
                    },
                    label: {
                        show: false,
                        distance: 1,
                        emphasis: {
                            show: true,
                            offset: [25, -2],
                            color: '#FFF',
                            height: 36,
                            rich: {
                                bg: {
                                    width: 78,
                                    color: '#FFF',
                                },
                                br: {
                                    width: '100%',
                                    height: '100%'
                                }

                            }
                        }
                    },
                    data: _this.yData,
                    type: _this.chartType,
                    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实例）
    created() {
       
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.$emit('trendLineChartType',this.radio);
        this.chartType = 'bar';
        this.initIncChart();
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 960px) {
  @import "@scss/homeForPad";
}
// @media screen and (min-width: 1024px) {
//   @import "@scss/home1024";
// }
@media  screen and (min-width: 1024px) and (max-width:1920px){
	@import "@scss/home";
}
@media screen and (min-width: 1920px) {
  @import "@scss/home1920";
}
</style>