<!-- 柱状 - 圆柱 -->
<template>
    <div :id="id" class="chart" />
</template>

<script>
    import ChartBase from '@/components/Base/ChartsBase.js';
    import {
        ChartStyle
    } from '@/common/const.js';
    import echarts from 'echarts';

    export default {
        mixins: [ChartBase],
        methods: {
            setOptions(chartData) {
                if (!this.chart || !chartData) return;
                let option = {
                    tooltip: {
                        formatter: params => {
                            if (!params.value) return '';
                            return params.value;
                        }
                    },
                    title: [],
                    xAxis: [],
                    yAxis: [],
                    series: [],
                    grid: [],
                };
                // 找到最大值,作为单轴时y轴的最大值
                let yMax;
                for (let i = 0; i < chartData.length; i++) {
                    for (let j = 0; j < chartData[i].dataList.length; j++) {
                        for (let k = 0; k < chartData[i].dataList[j].value.length; k++) {
                            if(!yMax || yMax < chartData[i].dataList[j].value[k]) yMax = chartData[i].dataList[j].value[k];
                        }
                    }
                }
                for (let i = 0, len = chartData.length; i < len; i++) {
                    option.title.push({
                        text: '{a| }   ' + chartData[i].title,
                        textStyle: {
                            color: ChartStyle.title.color,
                            fontSize: ChartStyle.title.fontSize,
                            // width: '100%',
                            fontWeight: 200,
                            rich: {
                                a: {
                                    width: 5,
                                    height: 5,
                                    backgroundColor: ChartStyle.title.color,
                                    borderRadius: 50,
                                    shadowColor: 'rgba(147,252,255,0.30)',
                                    shadowBlur: 5,
                                }
                            }
                        },
                        left: 100 / len / 2 + (100 / len) * i - 1 + '%',
                        top: '3',
                        textAlign: 'center'
                    });
                    option.xAxis.push({
                        data: chartData[i].xAxis,
                        axisLine: {
                            lineStyle: {
                                color: ChartStyle.axis.color,
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: ChartStyle.axis.color,
                            fontSize: ChartStyle.axis.fontSize
                        },
                        gridIndex: i
                    });
                    option.yAxis.push({
                        max: yMax * 1.2, // 单轴
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        gridIndex: i
                    });
                    option.grid.push({
                        top: '20%',
                        left: (100 / len) * i + 15 + '%',
                        right: (100 / len) * (len - i - 1) + 15 + '%',
                        bottom: '5%',
                        containLabel: true
                    });
                    for (let j = 0; j < chartData[i].dataList.length; j++) {
                        option.series.push({
                            type: 'bar',
                            data: chartData[i].dataList[j].value,
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(0, 0, 0, 0.1)'
                            },
                            itemStyle: {
                                color: 'transparent'
                            },
                            barMaxWidth: 25,
                            xAxisIndex: i,
                            yAxisIndex: i
                        });
                        option.series.push({
                            type: 'pictorialBar',
                            data: chartData[i].dataList[j].value,
                            symbolSize: [25, 10],
                            symbolOffset: [0, -10],
                            symbolPosition: 'start',
                            itemStyle: {
                                normal: {
                                     color: ChartStyle.color[i],
                                }
                            },
                            xAxisIndex: i,
                            yAxisIndex: i
                        });
                        option.series.push({
                            type: 'pictorialBar',
                            name: chartData[i].dataList[j].name,
                            data: chartData[i].dataList[j].value,
                            symbol: 'rect',
                            symbolClip: true,
                            symbolSize: [25, '100%'],
                            symbolOffset: [0, -15],
                            symbolPosition: 'start',
                            itemStyle: {
                                // 4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: ChartStyle.color2[i] },
                                    { offset: 1, color: ChartStyle.color[i] },
                                ])
                            },
                            xAxisIndex: i,
                            yAxisIndex: i
                        });
                        option.series.push({
                            type: 'pictorialBar',
                            data: chartData[i].dataList[j].value,
                            symbolSize: [25, 10],
                            symbolOffset: [0, -5],
                            symbolPosition: 'end',
                            itemStyle: {
                                normal: {
                                     color: ChartStyle.color2[i],
                                     shadowColor: ChartStyle.color[i],
                                     shadowBlur: 1
                                }
                            },
                            // label: {
                            //     show: true, 
                            //     position: 'top', 
                            //     color: ChartStyle.label.color,
                            //     fontSize: ChartStyle.label.fontSize ,
                            // },
                            xAxisIndex: i,
                            yAxisIndex: i
                        })
                    }
                }
                this.chart.setOption(option);
            },
        }
    };
</script>

<style lang="scss" scoped>
    .chart {
        width: 100%;
        height: 100%;
    }
</style>
