Supported Regions:上海

More Charts

This is a versatile chart component capable of configuring 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.

Applicable Scenarios

When the official component library's bar charts, line charts, and pie charts fall short of requirements, you can use this component.

Before using, please go to Echarts official website to browse 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 sets of commonly used chart templates, such as line charts, area charts, pie charts, etc.

2. Chart Configuration Items (Option)

You can also customize the Chart Configuration Items Option to instantly implement any chart. Navigate to the example configurations, copy the Option configuration object, and quickly implement your chart. As follows:

Below is a brief introduction to configuration items. For details, please visit the Echarts official website to learn and refer to the Echarts official configuration documentation.

Set Data

Data is primarily configured through xAxis and series, where series allows configuring multiple datasets, such as multiple lines in a line chart. See details.

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

Set Tags

Control chart labels via the label property. See details

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

To customize labels, refer to the formatting formatter function documentation

Set Title

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

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

Set Legend

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

Set Color Scheme

Set colors and styles for different series via lineStyle, itemStyle, and areaStyle in series. See details in Chart Custom 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

Chart width, height, and other properties can be configured. See details in the opts configuration options for chart initialization init method

4. echart official website examples

Taking the official Flight Seat Selection example from echart as a reference, to implement this effect in WeiDa components, follow these steps:

1) "Create New javascript method" chartInit in Current Page

2) Define the "chartInit" method

Adapt from 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 component properties and bind the "chartInit" function

Property Description

External properties received by the component

initialization parameter	`opts`	`object`	Configurable rendering mode, corresponding to the opts configuration item of the chart initialization init method (https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/chart/Chart#attribute-description) For Echarts chart configuration, see configure project Example: {}
Template	`template`	`string`	System preset template Can be used to select different templates for quick configuration of required chart types Example: "square"
Chart configuration options	`option`	`object`	Common charts support multiple Echarts chart types. The `type` attribute in `Option` specifies the chart type. You can directly view template examples for quick configuration of different chart types. For details, see the Common Charts Operation Instructions. For Echarts chart configuration, see configure project Example: {}
dark mode	`dark`	`boolean`	Example: false

Event Description

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

Chart Ready	`onReady`	`object` echartsInstance: `object` 图表实例可以通过图表实例进行图表的相关操作，具体操作内容见Echarts官方说明 echarts: `object` echarts对象相当于项目中直接引入echarts，可以通过echarts对象直接调用其内部方法进行相应操作，例如echarts.color、echarts.graphic等，具体内容见Echarts官方说明	Compatible with all platforms	The current chart has completed instance initialization.
click	`click`		Mobile,PC	This method is triggered when a coordinate point in the graph is clicked. For details, see [Echarts Official Event Description](echarts.apache.org/zh/api.html#events.% E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6.click)
double-click	`dblclick`		Mobile,PC	Double-click A coordinate point in the chart to trigger this method. See the Echarts official event description for details.

Properties 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

Chart instance	`echartsInstance`	`object`	Chart operations can be performed through the chart instance. For specific operation content, see the official documentation from Echarts.
echarts object	`echarts`	`object`	This is equivalent to directly introducing echarts into the project. You can directly call its internal methods through the echarts object to perform corresponding operations, such as echarts.color, echarts.graphic, etc. For details, see Official Description of 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()

Configure charts	`setOption`	`object` option: `object` 图表配置 opts: `object` notMerge: `boolean` 是否不跟之前设置的 option 进行合并 replaceMerge: 用户可以在这里指定一个或多个组件，如：xAxis, series，这些指定的组件会进行 "replaceMerge"。如果用户想删除部分组件，也可使用 "replaceMerge" lazyUpdate: `boolean` 在设置完 option 后是否不立即更新图表，如果为 true，则会在下一个 animation frame 中，才更新图表	Set the configuration item and data of a chart instance. The versatile api allows ALL parameter and data modification through setOption. You can directly view the official Echarts illustrative example.
Set topic	`setTheme`	`object` theme: `string`	Set the theme of the chart instance. Different types of themes are supported, with dart and auto as defaults. You can also register a theme through the registerTheme method officially provided by Echarts.

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

root element

.wd-chart

tree component root element

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

PC-side root element

.wd-pc-chart

Write styles for 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 root element

.wd-h5-chart

Write style for 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 capable of configuring 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 data-agnostic. Data statistics can be achieved through Query, where data aggregation is performed via APIs or the MySQL connector, and then bound to the Universal Chart component.

More Charts

Applicable Scenarios​

Basic Features​

1. Template​

2. Chart Configuration Items (Option)​

Set Data​

Set Tags​

Set Title​

Set Legend​

Set Color Scheme​

3. Initialize Chart Opts​

4. echart official website examples​

1) "Create New javascript method" chartInit in Current Page​

2) Define the "chartInit" method​

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

Property Description​

Event Description​

Properties API​

Method API​

Style API​

Frequently Asked Questions​

Relationship Between Chart Component and Universal Chart Component​