echarts 仪表盘样式配置整理

项目里有仪表盘，整理下样式配置：

 

代码：

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

/**
 * 仪表盘
 * 文档：https://echarts.apache.org/zh/option.html#series-gauge.axisLine
 * demo：https://echarts.apache.org/examples/zh/editor.html?c=gauge-stage
 */
export class Dashboard {
    constructor(myChart) {
        myChart.setOption(this.getOptions());
        this.doRandomStyle(myChart);
    }

    /**
     * 设置随机样式
     */
    doRandomStyle(myChart) {
        let self = this;
        setInterval(function () {
            myChart.setOption({
                series: [
                    {
                        data: [
                            {
                                value: +(Math.random() * 100).toFixed(2)
                            }
                        ],
                        axisLine: {
                            lineStyle: {
                                color: self.getRandomRange(), // 颜色区间设置
                            }
                        }
                    }
                ]
            });
        }, 2000);
    }

    getOptions() {
        return {
            series: [
                {
                    type: 'gauge',
                    center: [ 400, 400 ], // 的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
                    // center : ['50%', '50%'], // 支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。
                    // radius: '55%', // 仪表盘半径
                    radius: 240, // 仪表盘半径
                    startAngle: 225, // 仪表盘起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。默认 225
                    endAngle: -45, // 仪表盘结束角度。默认 -45
                    clockwise: true, // 仪表盘刻度是否是顺时针增长。 默认 true
                    splitNumber: 10, // 刻度的分割段数。
                    min: 0, // 最小的数据值，映射到 minAngle。
                    max: 120, // 最大的数据值，映射到 maxAngle。
                    axisLine: { // 仪表盘轴线相关配置。
                        show: true, // 是否显示仪表盘轴线。
                        roundCap: false, // 是否在两端显示成圆形。
                        lineStyle: { // 仪表盘轴线样式。 { color , width , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
                            width: 30,
                            color: this.getRandomRange(), // 颜色区间设置
                        }
                    },
                    pointer: { // 仪表盘指针。
                        show: true, // 是否显示指针。
                        showAbove: true, // 指针是否显示在标题和仪表盘详情上方。
                        // icon:'none', // ECharts 提供的标记类型包括 circle|rect|roundRect|triangle|diamond|pin|arrow|none，可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
                        offsetCenter: [ 0, 0 ], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                        length: '60%', // 指针长度，可以是绝对数值，也可以是相对于半径的半分比。
                        width: 10, // 指针宽度。
                        itemStyle: { // 指针样式。{ color , borderColor , borderWidth , borderType , borderDashOffset , borderCap , borderJoin , borderMiterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
                            color: 'auto'
                        }
                    },
                    anchor: { // 表盘中指针的固定点。跟仪表盘指针配置差不多
                        show: true,
                        size: 10,
                        showAbove: true, // 固定点是否显示在指针上面。
                        icon: 'circle', // ECharts 提供的标记类型包括 circle|rect|roundRect|triangle|diamond|pin|arrow|none，可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
                        offsetCenter: [ 0, 0 ], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                        itemStyle: { // 指针样式。{ color , borderColor , borderWidth , borderType , borderDashOffset , borderCap , borderJoin , borderMiterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
                            color: '#fff'
                        }
                    },
                    splitLine: { // 分隔线样式。
                        show: true, // 是否显示分隔线。
                        distance: -30, // 分隔线与轴线的距离。
                        length: 30, // 分隔线线长。支持相对半径的百分比。
                        lineStyle: { // { color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
                            color: '#fff',
                            width: 4
                        }
                    },
                    axisTick: { // 刻度样式。
                        show: true, // 是否显示刻度。
                        splitNumber: 5, // 分隔线之间分割的刻度数。默认 5
                        distance: -30, // 分隔线与轴线的距离。
                        length: 8, // 刻度线长。支持相对半径的百分比。
                        lineStyle: { // { color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
                            color: '#fff',
                            width: 2
                        }
                    },
                    axisLabel: {
                        show: true, // 是否轴线显示标签。
                        color: 'auto', // 文字的颜色。 默认 auto 归属区间颜色
                        fontStyle: 'normal', // 文字字体的风格。 normal|italic|oblique
                        fontWeight: 'bold', // 文字字体的粗细。 normal|bold|bolder|lighter
                        distance: 40, // 标签与刻度线的距离。
                        fontSize: 20, // 字体样式相关
                        // formatter: '{value} km/h', // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。
                        // formatter: function (value) {
                        //     return value + 'km/h';
                        // },
                    },
                    detail: { // 仪表盘详情，用于显示数据。
                        show: true, // 是否显示详情。
                        valueAnimation: true, // 是否开启标签的数字动画。
                        formatter: '{value} km/h', // 格式化函数或者字符串
                        color: 'auto', // 文本颜色，默认取数值所在的区间的颜色。
                        offsetCenter: [ 0, '40%' ], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                        // 字体相关样式
                    },
                    data: [
                        {
                            value: 70,
                            itemStyle: { // 数据项的指针样式。
                                color: 'auto', // 图形的颜色。
                                borderWidth: 1, // 描边线宽。为 0 时无描边。
                                borderColor: '#eee',
                            }
                        }
                    ],
                }
            ]
        };
    }

    /**
     * 获取随机颜色区间配置
     * @return [
     *    [ 0.3, '#67e0e3' ],
     *    [ 0.7, '#37a2da' ],
     *    [ 1, '#fd666d' ]
     * ]
     */
    getRandomRange() {
        let arr = Pieces.getRandomPercentByCount(5);
        let res = [];
        let num = 0;
        for (let i = 0; i < arr.length; i++) {
            num += arr[i];
            res.push([ num, Pieces.getColor() ]);
        }
        return res;
    }
}