<template>
    <div :class="className">
        <div :id="id" class="spiritChartBox"></div>
    </div>
</template>
 
<script>
import { mapState } from "vuex";
import echarts from "@/utils/initEcharts";
import deepMerge from "@/utils/deepMerge";
export default {
    name: "spiritChart",
    props: {
        className: {
            type: String,
            default: "spiritChartBox"
        },
        id: {
            type: String,
            default: "spiritChart"
        },
        options: {
            type: Object,
            default: function() {
                return {};
            }
        }
    },
    data() {
        return {
            chart: null
        };
    },
    watch: {
        options() {
            this.setOption();
        },
        clientWidth() {
            this.setOption();
        }
    },
    mounted() {
        const self = this;
        self.initChart();
    },
    computed: {
        ...mapState({
            clientWidth: state => state.init.clientWidth
        })
    },
    methods: {
        initChart() {
            const self = this;
            self.chart = echarts.init(document.getElementById(self.id));
            window.addEventListener("resize", () => {
                self.chart.resize();
            });
            self.setOption();
        },
        setOption() {
            const self = this;
            const { options, clientWidth } = self;
            const maxData = 100;
            const spirit =
                "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAA+CAYAAADeQLDtAAAACXBIWXMAAAsSAAALEgHS3X78AAABpElEQVRYhe2YQU6EMBSGf4n7coTxBHoAFrhg7dxAvcEcAW/g3ABP4Ljuxkk4gNwAb1BOgHljIQ22fR2GMcb0Twjh9ZWvpS389KLve3Aq6u4GQAngzkhtKCYzsePqs5Ci7tYAXj0pjzIT1WxIUXcpgBaAYBp7KzPx7ipMmMoPAYAhzykOkgcA2DwOkgZCvHkc5CMQ4s3jIN5ZE5rnhchMUAu3DKDhpjDXEwJtADw5it9CJkfQisf3mlnpG9JZAdjJTLQhdYMhp+jSvCjqLj9ibfjUmuM09qSoOwreL9gBeoHmMhMq0YByYQDpepjah54UdacC31FzdJXocTgXgLRm18kCSn8Dwq/4c0Kamfez1nNBNjMh1nr/f0wiJEIiJEL+OkRZ4kHO0KHPSVgl2lS/GMFtqP10qDTC9BGrTHNHrkVpKF3P8a+Hf0ftm1fDf+RoU30/ltMbAXjW5s0q/STGp3H07NKNsY2jU3HFR0iEREiEREiEnAIZ7I7r82uN+yC2vUcyEObZ1H5wOlNx2+i0c00HtbAyN/+1haIysj8Up/KfPQHwBdyuiCoNTDAkAAAAAElFTkSuQmCC";
            self.chart.setOption({
                title: {
                    text: "景区饱和度",
                    x: "center",
                    y: "15%",
                    textStyle: {
                        color: "#fff",
                        fontSize: 24,
                        fontWeight: 600
                    }
                },
                tooltip: { show: false },
                xAxis: {
                    max: maxData,
                    splitLine: { show: false },
                    axisTick: { show: false },
                    axisLine: { show: false },
                    axisLabel: { show: false }
                },
                yAxis: {
                    data: options.yAxisData || [],
                    inverse: true,
                    axisTick: { show: false },
                    axisLine: { show: false },
                    axisLabel: {
                        formatter: val => {
                            const strArr = val.split("_");
                            return `{a|${strArr[0]}}\n{b|${strArr[1]}}`;
                        },
                        rich: {
                            a: {
                                color: "#fff",
                                fontSize: 12,
                                lineHeight: 20
                            },
                            b: {
                                color: "#fbee21",
                                fontSize: 16
                            }
                        }
                    }
                },
                grid: { top: "25%", height: "60%", width: "43%", right: "10%" },
                series: [
                    {
                        type: "pictorialBar",
                        symbol: spirit,
                        symbolRepeat: "fixed",
                        symbolMargin: "15%",
                        symbolClip: true,
                        symbolSize: [15, 30],
                        symbolBoundingData: maxData,
                        data: options.seriesData || [],
                        z: 10
                    },
                    {
                        type: "pictorialBar",
                        itemStyle: {
                            normal: {
                                opacity: 0.2
                            }
                        },
                        animationDuration: 0,
                        symbolRepeat: "fixed",
                        symbolMargin: "15%",
                        symbol: spirit,
                        symbolSize: [15, 30],
                        symbolBoundingData: maxData,
                        data: options.seriesData || [],
                        z: 5
                    }
                ]
            });
        }
    }
};
</script>
 
<style scoped>
.spiritChartBox {
    width: 100%;
    height: 100%;
}
</style>