Echarts简单封装配置

May 30, 2025

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)