ECharts Configuration

Used to configure the default display behavior of the popup when inserting charts. If you want to customize the ECharts chart configuration. Added in v6.0.0

Default Configuration

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

Configuration Options

echarts.mode

Description: The default mode opened when setting up the chart.

Type: Number

Default Value: 1

Options:

• 0: Directly use the options JSON source mode of ECharts.
• 1: Visualization mode, allowing you to create charts through configuration.

echarts.renderImage

Description: Whether to render as an image. If true, an ECharts image will be saved while displaying the image. This is mainly used in scenarios where complex graphics cannot be generated by Word but require a similar effect.

Type: Boolean

Default Value: false

Options:

• true: Generate an image.
• false: Do not generate an image.

echarts.onCustomSettings

Description: Custom ECharts options method.

Type: Function.

Parameters:

• data: Array, ECharts chart data.
• config: Object, current ECharts chart configuration.
  1. seriesType: String, chart display type bar|line|pie representing bar chart, line chart, and pie chart respectively
  2. legend: Boolean, whether to show legend true: show legend, false: hide legend
  3. legendleft: String, legend horizontal position left|center|right representing left, center, and right alignment respectively
  4. legendlocation: String, legend vertical position top|bottom representing top and bottom alignment respectively
  5. legendorient: String, legend layout orientation horizontal|vertical representing horizontal and vertical layout respectively
  6. smooth: Boolean, whether to smooth line chart display true: smooth display, false: default display
  7. titleText: String, chart title content
  8. titleleft: String, chart title position left|center|right representing left, center, and right alignment respectively

Example:

The following code demonstrates how to configure the onCustomEChartSettings method to implement chart customization:

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)

<template>
  <umo-editor 
    :echarts="{ onCustomSettings }" 
  />
</template>
 
<script setup>
import { UmoEditor } from '@umoteam/editor'
 
const 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
}
</script>

Return Value：Object，return ECharts options configuration object.