• 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

  • 相关阅读:
    解决运行docker命令要用sudo的问题
    python3 http.server 本地服务支持跨域
    Linux 命令速记本
    截取某段时间内的日志
    centos7 安装postgresql10
    centos 7 安装 mail
    centos7 mail
    centos7 mysql 5.7 官网下载tar安装
    修改storm ui 默认端口
    redis-trib构建集群
  • 原文地址:https://www.cnblogs.com/guofan/p/16261866.html
Copyright © 2020-2023  润新知