import { Pieces } from "../@share/pieces";

/**
 * 柱形圖
 * xy 軸可交換
 * 柱體預設顏色，亦可設定區間顏色
 * 柵格分度數配置
 * 數值顯示位置配置 inside | top
 */
export class ColumnChart {
    TYPE_NORMAL = 'normal'; // normal | special
    TYPE_SPECIAL = 'special'; // normal | special
    timer = null;
    colorRange = Pieces.getRandomRange();
    max 
 
= 100;
    min = 0;
    week = [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ];

    constructor(myChart) {
        this.currentType = this.TYPE_NORMAL;
        // 繪製圖表
        myChart.setOption(this.getOptions(this));
        this.randomData(myChart);
        // 新增按鈕切換 xy 軸
        this.addButton(myChart);
    }

    
 
/**
     * 新增 button，用於切換 xy 軸顯示
     * @param myChart
     */
    addButton(myChart) {
        let self = this;
        $('body').append(`<button class="btn">切換xy</button>`);
        $('.btn').on('click', (e) => {
            this.currentType = this.currentType === this.TYPE_NORMAL ? this
 
.TYPE_SPECIAL : this.TYPE_NORMAL;
            myChart.clear();
            clearInterval(self.timer);
            myChart.setOption(self.getOptions(self));
            self.randomData(myChart);
        });
    }

    /**
     * 隨機繪圖資料
     * @param myChart
     */
    randomData(myChart) {
        let self = this;
        self.timer = setInterval(() => {
            myChart.setOption({
                series: [
                    {
                        data: self.getData(self),
                    }
                ]
            });
        }, 1000);
    }

    /**
     * 獲取配置項資訊
     * @param self
     * @returns {{yAxis, xAxis, series: [{data: *, color: string, type: string}]}}
     */
    getOptions(self) {
        return {
            xAxis: self.getXOptions(self),
            yAxis: self.getYOptions(self),
            series: [
                {
                    data: self.getData(self),
                    type: 'bar',
                    // color: Pieces.getColor(),
                    label: { // 文字位置
                        show: true,
                        position: 'inside', // inside | top
                    },
                }
            ],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function (params) {
                    let data =params[0];
                    return data['axisValue'] + ' : ' + data.value + ' (' + data.color + ')';
                },
                renderMode: 'richText',
                padding: [ 5, 10 ],
            },
        };
    }

    /**
     * 根據型別獲取x 軸配置項
     * @param self
     * @returns {{type: string}|{min: number, max: number, type: string}}
     */
    getXOptions(self) {
        return self.currentType === self.TYPE_NORMAL ? self.getCategoryAxis(self) : self.getValueAxis(self);
    }

    /**
     * 根據型別獲取 y 軸 配置資訊
     * @param self
     * @returns {{min: number, max: number, type: string}|{type: string}}
     */
    getYOptions(self) {
        return self.currentType === self.TYPE_NORMAL ? self.getValueAxis(self) : self.getCategoryAxis(self);
    }

    /**
     * 獲取類目軸配置
     */
    getCategoryAxis(self) {
        return {
            type: 'category',
            data: self.week,
        };
    }

    /**
     * 獲取數值軸配置
     */
    getValueAxis(self) {
        return {
            splitLine: {
                show: false, // 是否顯示柵格
            },
            interval: 25, // 強制設定座標軸分割間隔。
            type: 'value',
            max: self.max,
            min: self.min,
            axisLine: { // 座標軸軸線相關設定。
                show: true,
            },
            axisTick: { // 座標軸刻度相關設定。
                show: true,
            },
        };
    }

    /**
     * 獲取資料
     * @param self
     * @returns {*[]}
     */
    getData(self) {
        let data = [];
        for (let i = 0; i < self.week.length; i++) {
            let num = Pieces.getRandomNumberByCount(1, 100);
            // [1,3,4] 數值或 [1, {value: 3, itemStyle{}}, 4] 配置柱子樣式
            data.push({
                value: num,
                itemStyle: {
                    color: self.getColorByValue(self, num),
                }
            });
        }
        return data;
    }

    /**
     * 根據值獲取對應區間色值
     * @param self
     * @param num
     * @returns {string}
     */
    getColorByValue(self, num) {
        let total = self.max - self.min;
        let p = num / total;
        let range = self.colorRange;
        let color = '';
        for(let i = range.length - 1;i >= 0; i--) {
            if (p >= range[i][0]) {
                color = range[i][1];
                break;
            }
        }
        return color ? color : '#000';
    }
}

柱形圖大致配置跟折線圖類似，這裡只記錄個實現程式碼

demo：https://echarts.apache.org/examples/zh/editor.html?c=bar-data-color

文件：https://echarts.apache.org/zh/option.html#title