<template>
  <!--    图标插件  传入参数跟echart参数一样，根据自己需要传  chartConfig =

                  {
                      xAxis:{
                          data: []//x轴数据
                      },
                      legend: {
                          data: ['粉丝', '点赞'],//配置标签样式
                          align: 'left',
                          top: 10
                      },
                      series:[
                          //y轴数据格式---注释不要删除
                          // {
                          //     name: "粉丝",//y轴数据名称
                          //     type: 'bar',//图表类型
                          //     data: [1,2,3,4,5],//y轴数据
                          // },
                      ],
                  }
      后续想添加新的功能，请不要在组件内做路由判断来控制新功能的显示隐藏，
      通过外部传入数据来控制，所有新增的功能需加注释及设置默认关闭
  -->
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
    import echarts from 'echarts'

    require('echarts/theme/macarons') // echarts theme
    import resize from './mixins/resize'

    export default {
        mixins: [resize],
        data() {
            return {
                chart: null,
                //如果没有传入配置，则按这个配置显示
                chartDefaultConfig: {
                    xAxis: {
                        data: [],
                        axisLabel: {
                            fontSize: 16,
                            verticalAlign: "top",
                            color: "#c2c2c2",
                            fontWeight: "600"
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                width: 0,
                                color: "#00e6f2"
                            },
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        },
                        padding: [5, 10],
                        show: true
                    },
                    grid: {
                        top: 40,
                        left: 0,
                        right: 0,
                        bottom: 0,
                        containLabel: true
                    },
                    legend: {
                        data: [],
                        align: 'left',
                        top: 10
                    },
                    yAxis: [
                        {
                            splitLine: {show: true},//去除网格线
                            type: 'value',
                            splitArea: {show: false},//保留网格区域
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    width: 0,
                                    color: "#00e6f2"
                                },
                            },
                            axisTick: {
                                show: false,
                                alignWithLabel: true
                            },
                            axisLabel: {
                                fontSize: 16,
                                verticalAlign: "top",
                                color: "#c2c2c2",
                                fontWeight: "600"
                            }
                        }
                    ],
                    series: [
                        {
                            name: "",
                            type: 'line',
                            data: [],
                            lineStyle: {
                                color: 'rgb(0,139,210)',
                                width: 5,
                                shadowColor: 'rgba(0, 0, 0, 0.3)',
                                shadowBlur: 15,
                                shadowOffsetY: 10
                            },
                            itemStyle: {
                                borderColor: 'rgb(0,139,210)',
                            },
                            areaStyle: {
                                color: "rgb(138,230,255)"
                            },
                        }
                    ]
                },
            }
        },
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '100%'
            },
            height: {
                type: String,
                default: '350px'
            },
            //  外部传进来的配置
            chartConfig: {
                type: Object,
                default(){
                    return null
                }
            },
        },
        watch: {
            chartConfig:{
                immediate:true,
                handler(){
                    if(this.chartConfig){
                        if(this.chartConfig.x){
                            this.chartDefaultConfig.xAxis.data=this.chartConfig.x
                        }
                        if(this.chartConfig.y){
                            this.chartDefaultConfig.series[0].data=this.chartConfig.y
                        }
                        if(this.chart){
                            this.setOptions();
                        }
                    }
                }
            },
        },
        mounted() {
            //将表格重置大小的方法绑定在window的resize上面，这样就可以从外面触发
            var res = () => {
                if (this.chart) {
                    this.$nextTick(() => {
                        this.chart.resize();
                    })
                }
            }
            window.addEventListener("resize", res)
            //初始化表格
            this.$nextTick(() => {
                this.initChart()
            })
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose();
            this.chart = null
        },
        methods: {
            initChart() {
                this.chart = echarts.init(this.$el, 'macarons')
                this.setOptions(this.chartDefaultConfig)
            },
            setOptions() {
                this.chart.setOption(this.chartDefaultConfig);
                this.chart.resize();
            }
        }
    }
</script>
