Echarts简单封装配置

MrJun — Fri, 30 May 2025 10:59:30 +0800

1 问题引入

Echarts是常用的前端开源图表库，但是其配置项实在太多了，对于一个小型简单的应用场景，数据更新起来代码显得非常冗余。为了使得模板文件代码的清晰简洁，可对Echarts进行简单封装。

2 解决方案

针对主要的数据引入Series进行链式调用封装，其他的样式接口可直接进行初始化设置。

export class BuildSeries {

    constructor() {
        this.series = [];
    }

    confidence_band(id, data, color = '#ccc') {
        this.series.push({
            id: `${id}-L`,
            name: 'L',
            type: 'line',
            data: data.map(function (item) {
                return [item.date, item.value - item.l];
            }),
            lineStyle: {
                opacity: 0
            },
            stack: 'confidence-band',
            symbol: 'none'
        })
        this.series.push({
            id: `${id}-U`,
            name: 'U',
            type: 'line',
            data: data.map(function (item) {
                return [item.date, item.u + item.l];
            }),
            lineStyle: {
                opacity: 0
            },
            areaStyle: {
                color: color,
                opacity: 0.5
            },
            stack: 'confidence-band',
            symbol: 'none'
        })
        this.series.push({
            id: `${id}-line`,
            type: 'line',
            data: data.map(function (item) {
                return [item.date, item.value];
            }),
            lineStyle: {
                opacity: 1
            },
            showSymbol: false
        })
        return this;
    }

    line(id, data, color = '#ccc') {
        this.series.push({
            id: `${id}-line`,
            type: 'line',
            data: data.map(function (item) {
                return [item.date, item.value];
            }),
            lineStyle: {
                opacity: 1,
                color: color
            },
            showSymbol: false
        })
        return this;
    }

    markline(id, name, y, color = '#ccc') {
        this.series.push({
            id: `${id}-markLine`,
            type: 'line',
            data: [],
            markLine: {
                data: [{
                    name: name,
                    yAxis: y,
                    label: {
                        formatter: '{b}',
                        position: 'insideStartTop'
                    }
                }]
            }
        })
    }

    getSeries() {
        return this.series;
    }

    getOption() {
        return {
            series: this.series
        };
    }

    setOption(chart){
        const option = this.getOption()
        chart.value.setOption(option)
    }
}

// 创建配置类
const series_obj = new BuildSeries()
// 链式调用
series_obj.confidence_band(id, data, color).line(id, data, color)
series_obj.setOption(chart)

vscode远程连接使用frp内网穿透安全配置

MrJun — Sat, 19 Apr 2025 09:34:16 +0800

1 问题引入

由于经常使用vscode连接组里服务器进行远程操作，为了方便远程开发遂使用自己搭建的frp内网穿透将服务器的ssh服务穿透到公网上，导致服务器的ssh端口常常被扫描爆破。

网上查询到常使用的方案有：

1、设置密钥等里等方式增加破解门槛，但是由于服务器具有其他账户，部分账户账号密码简单容易被爆破；

2、使用fail2ban限制IP登陆次数，由于该软件是直接读取日志进行操作，且FRP穿透后的流量均为统一IP，封锁IP直接把自己封了，不可取；

这些操作均不能解决使用frp内网穿透时的安全保护问题，或者解决方案不够优雅。

2 解决方案

针对内网穿透的特殊性，为了便捷操作，我们可以直接在运行内网穿透的服务端（frps）的服务器上进行操作，具体采取以下两种方案解决问题：

1、直接限制IP段入站白名单

2、通过内网穿透服务器做跳板

首先限制frp穿透的端口白名单为本地127.0.0.1；

VSCode remote ssh配置：

Host XXX
   HostName 127.0.0.1
   User xxx
   Port 2323
   PreferredAuthentications publickey
   IdentityFile ~/.ssh/xx
   ProxyJump FrpServer

Host FrpServer
   HostName xx.xx.xx.xx
   User root
   PreferredAuthentications publickey
   IdentityFile ~/.ssh/xx

说明：

HostName：跳板机（frps服务器）本地ip，直接填写127.0.0.1；

Port：frp穿透的端口

ProxyJump FrpServer：FrpServer配置为跳板机（frps服务器）信息。

All Posts - MrJun's Blog

Echarts简单封装配置

1 问题引入

2 解决方案

vscode远程连接使用frp内网穿透安全配置

1 问题引入

2 解决方案