示例
面积图
PCPhonePad
<page >
<module height="400px" style="margin: 0">
<customchart :options="options" :beforeRender="beforeRender2">
</customchart>
</module>
</page>
export default XPage({
data: {
options: {
'legend': {'data': ['线下', '线上', '线上占比']},
'xAxis': {
type: 'category',
'data': ['01/01', '01/02', '01/03', '01/04', '01/05', '01/06', '01/07']
},
'yAxis': [
{
type: 'value'
}
],
'series': [
{
name: '线下',
type: 'line',
stack: '总量',
smooth: true,
data: [120, 132, 101, 134, 90, 230, 210]
}
]
}
},
beforeRender2 (opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/) {
/*这里可以对options 做2次调整，已满足部分UI差异*/
return {
...options,
series: [
{
...options.series[0],
areaStyle: {
color: {
//填充的颜色
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: colors[ 0 ].linerCorS // 0% 处的颜色
},
{
offset: 1,
color: colors[ 0 ].linerCorE // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
}
]
}
}
});
PCPhonePad
<page >
<module height="400px" style="margin: 0">
<customchart :options="options" :beforeRender="beforeRender3">
</customchart>
</module>
</page>
export default XPage({
data: {
options: {
data: [
[120, 132, 101, 134, 90, 230, 210],
[220, 182, 191, 234, 290, 330, 310],
[150, 232, 201, 154, 190, 330, 410]
]
}
},
beforeRender3 (opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/) {
return {
'legend': {'data': ['线下', '线上', '线上占比']},
'xAxis': {
type: 'category',
'data': ['01/01', '01/02', '01/03', '01/04', '01/05', '01/06', '01/07']
},
'yAxis': [
{
type: 'value'
}
],
'series': [
{
name: '线下',
type: 'line',
stack: '总量',
smooth: true,
areaStyle: {
color: {
//填充的颜色
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: colors[ 0 ].linerCorS // 0% 处的颜色
},
{
offset: 1,
color: colors[ 0 ].linerCorE // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
data: options.data[ 0 ]
},
{
name: '线上',
type: 'line',
stack: '总量',
smooth: true,
areaStyle: {
color: {
//填充的颜色
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: colors[ 1 ].linerCorS // 0% 处的颜色
},
{
offset: 1,
color: colors[ 1 ].linerCorE // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
data: options.data[ 1 ]
},
{
name: '线上占比',
type: 'line',
stack: '总量',
smooth: true,
areaStyle: {
color: {
//填充的颜色
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: colors[ 2 ].linerCorS // 0% 处的颜色
},
{
offset: 1,
color: colors[ 2 ].linerCorE // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
data: options.data[ 2 ]
}
]
};
}
});
PCPhonePad
<page >
<module height="400px" style="margin: 0">
<customchart :options="options" :beforeRender="beforeRender4">
</customchart>
</module>
</page>
export default XPage({
data: {
options: {
dataX: ['01/01', '01/02', '01/03', '01/04', '01/05', '01/06', '01/07'],
dataSeries: [
[37.39, 33.33, 44.29, 39.27, 54.01, 22, 78.33],
[30.43, 29.41, 52.86, 69.86, 72.09, 22, 10],
[26.09, 42.86, 60.94, 71.63, 69.41, 22, 12]
]
}
},
beforeRender4 (opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/) {
return {
'legend': {'data': ['线下', '线上', '线上占比']},
'xAxis': {
type: 'category',
'data': options.dataX
},
'yAxis': {
'type': 'value',
'min': 0,
axisLabel: {
show: true,
formatter: '{value}%'
}
},
'series': [
{
name: '线上占比',
type: 'line',
stack: '总量',
smooth: true,
areaStyle: {
color: {
//填充的颜色
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: colors[ 0 ].linerCorS // 0% 处的颜色
},
{
offset: 1,
color: colors[ 0 ].linerCorE // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
data: options.dataSeries[ 0 ]
},
{
name: '线上',
type: 'line',
stack: '总量',
smooth: true,
areaStyle: {
color: {
//填充的颜色
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: colors[ 1 ].linerCorS // 0% 处的颜色
},
{
offset: 1,
color: colors[ 1 ].linerCorE // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
data: options.dataSeries[ 1 ]
},
{
name: '线下',
type: 'line',
stack: '总量',
smooth: true,
areaStyle: {
color: {
//填充的颜色
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: colors[ 2 ].linerCorS // 0% 处的颜色
},
{
offset: 1,
color: colors[ 2 ].linerCorE // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
data: options.dataSeries[ 2 ]
}
]
};
}
});
Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 端 | 版本 |
|---|---|---|---|---|---|---|
| options | 图表配置，符合echart配置项 | string | PC/Mobile | -- |
event
| 参数 | 说明 | 类型 | 端 | 版本 |
|---|---|---|---|---|
| beforeRender | 每次渲染前处理options,参数(opt,options,color,callback,lighting高亮色)，需要返回真实options | function | PC/Mobile | -- |
| chart | chart实例，用于自定义chart事件处理 | chartInstance | PC/Mobile | -- |
beforeRender
| 参数 | 说明 | 类型 | 端 | 版本 |
|---|---|---|---|---|
| opt | 系统默认配置包含tooltip\ xAxis\ yAxis\grid\legend | String | PC/Mobile | -- |
| options | 用户配置项 | function | PC/Mobile | -- |
| colors | 当前渲染颜色 (使用默认即可) | Array | PC/Mobile | -- |
| lighting | 高亮颜色 (使用默认即可) | Array | PC/Mobile | -- |