ngx-wangeditor-echarts

Angular standalone component for embedding configurable ECharts blocks inside wangEditor.

中文说明

这是一个可直接在 Angular 中使用的独立组件，用于在 wangEditor 里插入和编辑 ECharts 图表块。

安装

npm install ngx-wangeditor-echarts echarts wangeditor

使用方式

import { Component } from '@angular/core';
import {
  ChartEditorDocument,
  WangEditorChartEditorComponent
} from 'ngx-wangeditor-echarts';

@Component({
  selector: 'app-editor',
  standalone: true,
  imports: [WangEditorChartEditorComponent],
  templateUrl: './editor.component.html'
})
export class EditorComponent {
  documentState: ChartEditorDocument = {
    html: '<p>Insert a chart from the toolbar.</p>',
    charts: []
  };

  handleDocumentChange(documentState: ChartEditorDocument): void {
    this.documentState = documentState;
  }

  handleDocumentSaved(documentState: ChartEditorDocument): void {
    // 在这里把 documentState 持久化到后端。
  }
}

<ngx-wangeditor-echarts
  [initialDocument]="documentState"
  (documentChange)="handleDocumentChange($event)"
  (documentSaved)="handleDocumentSaved($event)">
</ngx-wangeditor-echarts>

说明

• initialDocument：编辑器初始内容，包含 html 和 charts
• documentChange：内容变化时触发
• documentSaved：调用组件实例的 save() 方法时触发

Screenshot

Install

npm install ngx-wangeditor-echarts echarts wangeditor

Exports

• WangEditorChartEditorComponent
• ChartType
• ChartConfig
• EmbeddedChartEntry
• ChartEditorDocument

Usage

import { Component } from '@angular/core';
import {
  ChartEditorDocument,
  WangEditorChartEditorComponent
} from 'ngx-wangeditor-echarts';

@Component({
  selector: 'app-editor',
  standalone: true,
  imports: [WangEditorChartEditorComponent],
  templateUrl: './editor.component.html'
})
export class EditorComponent {
  documentState: ChartEditorDocument = {
    html: '<p>Insert a chart from the toolbar.</p>',
    charts: []
  };

  handleDocumentChange(documentState: ChartEditorDocument): void {
    this.documentState = documentState;
  }
}

<ngx-wangeditor-echarts
  [initialDocument]="documentState"
  (documentChange)="handleDocumentChange($event)">
</ngx-wangeditor-echarts>

Persistence Model

Persist ChartEditorDocument as a single object:

interface ChartEditorDocument {
  html: string;
  charts: Array<{
    id: string;
    type: 'line' | 'bar' | 'pie';
    config: ChartConfig;
  }>;
}

html contains placeholder nodes only. Runtime ECharts instances are restored from charts metadata.

Versioning

This package follows semantic versioning:

• patch: fixes and documentation-only publish updates
• minor: backward-compatible features
• major: breaking API, persistence, peer dependency, or Angular compatibility changes