<!-- 折线图
-->
<template>
    <div>
        <div style="width: 100%; height: 100%" :id="echarts" class="echarts" ref="echarts"></div>
    </div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'
export default {
    name: 'EchartsComponents',
    props: {
        // 接收父组件传递过来的信息
        chartData: {}
    },
    data() {
        return {}
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById(this.echarts))
            let params = this.chartData
            // 绘制图表
            if (params) {
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        axisLine: {
                            show: true
                        },
                        splitArea: {
                            color: '#f00',
                            lineStyle: {
                                color: '#f00'
                            }
                        },
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#778FA4',
                                fontStyle: 'normal',
                                fontSize: 10
                            },
                            rotate: 35
                        },
                        splitLine: {
                            show: false
                        },
                        data: params.name
                    },
                    yAxis: {
                        type: 'value',
                        name: '(个)',
                        nameTextStyle: {
                            color: '#778FA4',
                            align: 'left'
                        },
                        splitNumber: 4,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(255,255,255,0.1)',
                                type: 'dashed'
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#778FA4',
                                fontStyle: 'normal',
                                fontSize: 12
                            }
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    legend: {
                        data: ['满意', '基本满意', '一般', '不满意'],
                        textStyle: {
                            color: '#BDDBF1'
                        }
                    },
                    series: [
                        {
                            name: '满意',
                            type: 'bar',
                            stack: 'Ad',
                            emphasis: {
                                focus: 'series'
                            },
                            data: params.num1,
                            symbolRepeat: 'fixed',
                            itemStyle: {
                                color: '#2D82F7'
                            }
                        },
                        {
                            name: '基本满意',
                            type: 'bar',
                            stack: 'Ad',
                            emphasis: {
                                focus: 'series'
                            },
                            data: params.num2,
                            symbolRepeat: 'fixed',
                            symbolMargin: 2,
                            itemStyle: {
                                color: '#6E7BEE'
                            }
                        },
                        {
                            name: '一般',
                            type: 'bar',
                            itemStyle: {
                                color: 'rgba(27, 26, 89, 1)'
                            },
                            stack: 'Ad',
                            emphasis: {
                                focus: 'series'
                            },
                            data: params.num3,
                            symbolRepeat: 'fixed',
                            // eslint-disable-next-line no-dupe-keys
                            itemStyle: {
                                color: '#D59035'
                            }
                        },
                        {
                            name: '不满意',
                            type: 'bar',
                            stack: 'Ad',
                            emphasis: {
                                focus: 'series'
                            },
                            data: params.num4,
                            symbolRepeat: 'fixed',
                            itemStyle: {
                                color: '#5ABAC7 '
                            },
                            barWidth: 10
                        }
                    ]
                })
            }
        }
    },
    computed: {
        echarts() {
            return 'echarts' + Math.random() * 100000
        }
    },
    mounted: function() {
        const vm = this
        vm.$nextTick(() => {
            vm.drawChart()
        })
    },
    created: () => {},
    watch: {
        chartData: {
            deep: true,
            immediate: false,
            handler(val) {
                this.drawChart()
            }
        }
    }
}
</script>
