ECharts 配置

用于配置插入图表时的弹窗的默认显示行为，如果您要自定义 ECharts 图表配置。v6.0.0 新增

默认配置

{
  echarts: {
    mode: 1,
    haveImage: false,
    onCustomSettings() {
      return null
    },
  },
}

配置项说明

echarts.mode

说明：图表设置时，默认打开的模式。

类型：Number

默认值：1

可选值：

0：直接使用 ECharts 的 options json 源码模式
1：可视化模式，可以通过配置创建图表

echarts.renderImage

说明：是否渲染成图片，如果为 true 则在图片展示的同时保存一张 ECharts 图片，主要用于复杂图形模式 Word 无法生成但又要有类似效果场景。

类型：Boolean

默认值：false

可选值：

true：生成图片
false：不生成图片

echarts.onCustomSettings

说明：自定义 ECharts 图表配置方法。

类型：Function。

参数：

data：Array，图表数据。
config：Object，用户当前 ECharts 图表配置。
1. seriesType：String，图表显示类型 bar|line|pie 分别表示柱状图、折线图、饼图
2. legend：Boolean，是否显示图例 true:显示图例，false:不显示图例
3. legendleft：String，图例横向显示位置 left|center|right 分别表示居左、居中、居右
4. legendlocation：String，图例纵向显示位置 top|bottom 分别表示居上、居下
5. legendorient：String，图例显示方向布局 horizontal|vertical 分别表示水平布局、垂直布局
6. smooth：Boolean，折线是否平滑显示 true:表示折线平滑显示 false:表示默认显示
7. titleText：String，图表标题显示内容
8. titleleft：String，图表标题所在位置 left|center|right 分别表示居左、居中、居右

示例：

以下代码演示如何配置 onCustomEChartSettings 方法，实现展示图表扩展：

import { useUmoEditor } from '@umoteam/editor'
 
const options = {
  echarts: {
    onCustomSettings(data, config) {
      const { title, seriesType, legend } = config
      const option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true,
          },
        ],
      }
      return option
    },
  },
}
 
app.use(useUmoEditor, options)

返回值：Object，返回 ECharts 图表的 options 配置对象。

AI 文档助手配置 Web 页面配置