Supported Regions:上海

More Charts

This is a universal chart component that can be configured to generate multiple charts such as line charts, pie charts, area charts, maps, funnel charts, dashboards, and all charts. Using this component, you can quickly introduce all Echarts charts.

Applicable Scenarios

When the bar charts, line charts, and pie charts in the official component library do not meet your requirements, you can use this component.

Before use, please go to the Echarts official website to view chart examples to find the chart you need.
During use, directly configure Options to set chart data, styles, etc. You can also learn about configuration items through this document.

Basic Features

1. Template

This component provides several common chart templates, such as line charts, area charts, pie charts, etc.

2. Chart Configuration Options (Option)

You can also modify the chart configuration option Option by yourself to immediately implement any chart. Go to the example configuration, copy the configuration object Option, and then quickly implement the chart as follows:

For configuration items, here is a brief introduction. For details, please go to the Echarts official website to learn and view the Echarts Official Configuration Documentation.

Data Settings

Data is primarily configured through xAxis and series. series allows for the configuration of multiple data series, such as multiple lines in a line chart. See details

xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],  // x-axis data
},
yAxis: {},
series: [
    {
      type: 'line',  // type specifies the chart type, can be set to line, pie, bar, etc.
      // Chart values
      data: [150, 230, 224, 218, 135, 147, 260], // y-axis data
      name: 'Series 1'  // series name
    }
]

Label Settings

Control the chart labels via the label property. See details

label: {
      show: true,   // whether to display
      formatter: function(params){  // custom label display
        return params
      }
},

If you need to customize labels, please refer to the formatting formatter function documentation

Title Settings

Control the chart title and position via the title property. See details

title: {
        text: 'Chart Title',
        x: '50%' // chart title position
}

Legend Settings

Control the position and display of the legend via the legend property. See details

Color Settings

Set the colors and styles of different series via lineStyle, itemStyle, and areaStyle in series. See Custom Chart Styles

series: [{
    lineStyle: {
        color: '#2A70E2',
        width:'2',
        type: 'solid'
      },
      itemStyle:{
        color: 'auto',
      },
      areaStyle: {
        color: '#2A70E2',
        opacity: '0.5'
      }
   },{
    lineStyle: {
        color: '#2A70E2',
        width:'2',
        type: 'solid'
      },
      itemStyle:{
        color: 'auto',
      },
      areaStyle: {
        color: '#2A70E2',
        opacity: '0.5'
      }
}]

3. Initialize Chart Opts

Configurable chart width, height, etc. See opts configuration items of the chart initialization init method

4. echart official website examples

Take the Flight Seat Selection official example from echart as an example. To achieve this effect in WeDa components, the steps are as follows:

1) Create a new javascript method "chartInit" on the current page

2) Define the "chartInit" method

Adapt the echarts example and replace the corresponding component properties in the code: Replace echarts with $w.chart1.echarts, Replace myChart with $w.chart1.echartsInstance

export default async function ({ event, data }) {
  const res = await fetch(
    'https://lowcode-6g4bqrjy45e3e14b-1300677802.tcloudbaseapp.com/resources/2024-07/lowcode-1875317',
    {
      method: 'GET',
      headers: {
        'Content-Type': 'image/svg+xml',
      },
    }
  );
  const svg = await res.text();
  $w.chart1.echarts.registerMap('flight-seats', { svg: svg });
  const takenSeatNames = ['26E', '26D', '26C', '25D', '23C', '21A', '20F'];
  const option = {
    tooltip: {},
    geo: {
      map: 'flight-seats',
      roam: true,
      selectedMode: 'multiple',
      layoutCenter: ['50%', '50%'],
      layoutSize: '95%',
      tooltip: {
        show: true,
      },
      itemStyle: {
        color: '#fff',
      },
      emphasis: {
        itemStyle: {
          color: undefined,
          borderColor: 'green',
          borderWidth: 2,
        },
        label: {
          show: false,
        },
      },
      select: {
        itemStyle: {
          color: 'green',
        },
        label: {
          show: false,
          textBorderColor: '#fff',
          textBorderWidth: 2,
        },
      },
      regions: makeTakenRegions(takenSeatNames),
    },
  };
  function makeTakenRegions(takenSeatNames) {
    var regions = [];
    for (var i = 0; i < takenSeatNames.length; i++) {
      regions.push({
        name: takenSeatNames[i],
        silent: true,
        itemStyle: {
          color: '#bf0e08',
        },
        emphasis: {
          itemStyle: {
            borderColor: '#aaa',
            borderWidth: 1,
          },
        },
        select: {
          itemStyle: {
            color: '#bf0e08',
          },
        },
      });
    }
    return regions;
  }
  $w.chart1.echartsInstance.setOption(option);
  // Get selected seats.
  $w.chart1.echartsInstance.on('geoselectchanged', function (params) {
    const selectedNames = params.allSelected[0].name.slice();
    // Remove taken seats.
    for (var i = selectedNames.length - 1; i >= 0; i--) {
      if (takenSeatNames.indexOf(selectedNames[i]) >= 0) {
        selectedNames.splice(i, 1);
      }
    }
    console.log('selected', selectedNames);
  });
}

3) Set the component properties and bind the "chartInit" function

Property Description

External properties received by the component

chart初始化参数	`opts`	`object`	可配置render渲染模式等，对应图表初始化init方法的opts配置项可以参考Echarts图表配置，详见配置项目 Example: {}
模板	`template`	`string`	预设模板，可以通过选择不同的模板快速配置所需的图表类型 Example: "square"
图表配置项（option）	`option`	`object`	通用图表可配置多种Echarts的图表，Option的type属性指定图表类型。您可以直接查看模板示例，快速配置不同类型的图表。详见通用图表使用文档可以参考Echarts图表配置，详见配置项目 Example: {}
深色模式	`dark`	`boolean`	Example: false

Event Description

Events exposed by the component. You can listen to component events to trigger external actions

图表Ready	`onReady`	`object` echartsInstance: `object` 图表实例可以通过图表实例进行图表的相关操作，具体操作内容见Echarts官方说明 echarts: `object` echarts对象相当于项目中直接引入echarts，可以通过echarts对象直接调用其内部方法进行相应操作，例如echarts.color、echarts.graphic等，具体内容见Echarts官方说明	Compatible with all platforms	当前图表已完成实例初始化
单击	`click`		Mobile,PC	当点击图表中的坐标点时触发该方法，具体可以见Echarts官方事件说明
双击	`dblclick`		Mobile,PC	当双击图表中的坐标点时触发该方法，具体可以见Echarts官方事件说明

Property API

Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API

图表实例	`echartsInstance`	`object`	可以通过图表实例进行图表的相关操作，具体操作内容见Echarts官方说明
echarts对象	`echarts`	`object`	相当于项目中直接引入echarts，可以通过echarts对象直接调用其内部方法进行相应操作，例如echarts.color、echarts.graphic等，具体内容见Echarts官方说明

Method API

Through the Method API, you can programmatically trigger internal methods of components, such as submitting forms, displaying popups, etc. You can call component methods using $w.componentId.methodName, such as $w.form1.submit()

设置图表配置	`setOption`	`object` option: `object` 图表配置 opts: `object` notMerge: `boolean` 是否不跟之前设置的 option 进行合并 replaceMerge: 用户可以在这里指定一个或多个组件，如：xAxis, series，这些指定的组件会进行 "replaceMerge"。如果用户想删除部分组件，也可使用 "replaceMerge" lazyUpdate: `boolean` 在设置完 option 后是否不立即更新图表，如果为 true，则会在下一个 animation frame 中，才更新图表	设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，您可以直接查看Echarts官方图表示例
设置主题	`setTheme`	`object` theme: `string`	设置图表实例的主题，支持设置不同类型的主题，默认有dart、auto，也可以通过Echarts官方提供的registerTheme方法注册主题

Style API

Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API

根元素

.wd-chart

树组件根元素

/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-chart {
  /* Write CSS styles here */
}

PC 端根元素

.wd-pc-chart

可以为 PC 端的编写样式

/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-pc-chart {
  /* Write CSS styles here */
}

H5 端根元素

.wd-h5-chart

可以为 H5 端的编写样式

/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-h5-chart {
  /* Write CSS styles here */
}

Learn about Style API

Frequently Asked Questions

Relationship Between Chart Component and Universal Chart Component

The Universal Chart component is a versatile chart component that can be configured to generate various charts such as line charts, pie charts, area charts, maps, funnel charts, dashboards, and all other chart types. Using this component enables quick integration of all Echarts charts.
The UI configuration of the Universal Chart component is more flexible, supporting virtually all common chart types.
The Universal Chart component itself is independent of data. Data statistics can be achieved through Query, which is performed via APIs or MySQL connectors, and then bound to the Universal Chart component.

More Charts

Applicable Scenarios​

Basic Features​

1. Template​

2. Chart Configuration Options (Option)​

Data Settings​

Label Settings​

Title Settings​

Legend Settings​

Color Settings​

3. Initialize Chart Opts​

4. echart official website examples​

1) Create a new javascript method "chartInit" on the current page​

2) Define the "chartInit" method​

3) Set the component properties and bind the "chartInit" function​

Property Description​

Event Description​

Property API​

Method API​

Style API​

Frequently Asked Questions​

Relationship Between Chart Component and Universal Chart Component​