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
组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 说明 |
---|
chart初始化参数 | opts | object | 可以参考Echarts图表配置,详见配置项目 示例:{} |
模板 | template | string | 预设模板,可以通过选择不同的模板快速配置所需的图表类型 示例:"square" |
图表配置项(option) | option | object | 可以参考Echarts图表配置,详见配置项目 示例:{} |
深色模式 | dark | boolean | 示例:false |
Event Description
组件暴露的事件,可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
---|
图表Ready | onReady | object
| 兼容三端 | 当前图表已完成实例初始化 |
单击 | click | 移动端,PC端 | 当点击图表中的坐标点时触发该方法,具体可以见Echarts官方事件说明 | |
双击 | dblclick | 移动端,PC端 | 当双击图表中的坐标点时触发该方法,具体可以见Echarts官方事件说明 |
Property API
通过属性 API,可以获取组件内部的状态和属性值,可以通过$w.componentId.propertyName
来访问组件内部的值,如 $w.input1.value
,详请请参考 属性 API
只读属性名 | 属性标识 | 类型 | 说明 |
---|
图表实例 | echartsInstance | object | 可以通过图表实例进行图表的相关操作,具体操作内容见Echarts官方说明 |
echarts对象 | echarts | object | 相当于项目中直接引入echarts,可以通过echarts对象直接调用其内部方法进行相应操作,例如echarts.color、echarts.graphic等,具体内容见Echarts官方说明 |
Method API
通过方法 API,可以通过程序触发组件内部的方法,比如提交表单,显示弹窗等, 可以通过$w.componentId.methodName
来调用组件方法,如 $w.form1.submit()
方法名 | 方法标识 | 参数 | 方法说明 |
---|
设置图表配置 | setOption | object
| 设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过 setOption 完成,您可以直接查看Echarts官方图表示例 |
设置主题 | setTheme | object
| 设置图表实例的主题,支持设置不同类型的主题,默认有dart、auto,也可以通过Echarts官方提供的registerTheme方法注册主题 |
Style API
通过样式 API,可以覆盖组件中内部元素的样式来实现自定义,例如在低代码编辑器中中通过 #wd-page-root .wd-btn
即可为所有的按钮组件编写样式,通过 :scope
可以控制单个组件样式, 详细说明请参考样式 API
名称 | 类名 | 说明和示例 |
---|
根元素 | .wd-chart | 树组件根元素
|
PC 端根元素 | .wd-pc-chart | 可以为 PC 端的编写样式
|
H5 端根元素 | .wd-h5-chart | 可以为 H5 端的编写样式
|
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.