echarts 柱形图

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