示例
柱状图
PCPhonePad
<page >
<module height="400px" style="margin: 0">
<customchart :options="options" :beforeRender="beforeRender5">
</customchart>
</module>
</page>
export default XPage({
data: {
options: {
/*bar 需要配置tooltip类型*/
'tooltip': {
axisPointer: {
type: 'shadow'
}
},
'legend': {'data': ['线下', '线上', '线上占比']},
'xAxis': {
type: 'category',
'data': ['01/01', '01/02', '01/03', '01/04', '01/05', '01/06', '01/07']
},
'yAxis': {
'type': 'value',
name: '总量'
},
'series': [
{
name: '线下',
type: 'bar',
stack: '总量',
data: [37.39, 33.33, 44.29, 39.27, 54.01, 22, 78.33]
}
]
}
},
beforeRender5 (opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/) {
return {
...options
};
}
});
PCPhonePad
<page >
<module height="400px" style="margin: 0">
<customchart :options="options" :beforeRender="beforeRender6">
</customchart>
</module>
</page>
export default XPage({
data:{
options:{
/*bar 需要配置tooltip类型*/
'tooltip': {
axisPointer: {
type: 'shadow'
}
},
'legend': { 'data': ['Forest', 'Steppe', 'Desert', 'Wetland'] },
'xAxis': {
type: 'category',
'data': ['01/01', '01/02', '01/03', '01/04', '01/05']
},
'yAxis': {
'type': 'value',
'name': '总量'
},
'series': [
{
name: 'Forest',
type: 'bar',
'barMaxWidth': 10,
data: [320, 332, 301, 334, 390]
},
{
name: 'Steppe',
type: 'bar',
'barMaxWidth': 10,
data: [220, 182, 191, 234, 290]
},
{
name: 'Desert',
type: 'bar',
'barMaxWidth': 10,
data: [150, 232, 201, 154, 190]
},
{
name: 'Wetland',
type: 'bar',
'barMaxWidth': 10,
data: [98, 77, 101, 99, 40]
}
]
}
},
beforeRender6(opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/) {
return {
...options
};
},
});
PCPhonePad
<page >
<module height="400px" style="margin: 0">
<customchart :options="options" :beforeRender="beforeRender7">
</customchart>
</module>
</page>
export default XPage({
data: {
options: {
'tooltip': {
axisPointer: {
type: 'shadow'
}
},
'legend': {'data': ['邮件营销', '联盟广告', '视频广告']},
'xAxis': {
type: 'category',
'data': ['01/01', '01/02', '01/03', '01/04', '01/05', '01/06', '01/07']
},
'yAxis': {
'type': 'value',
name: '总量'
},
'series': [
{
name: '邮件营销',
type: 'bar',
stack: '总量',
data: [37.39, 33.33, 44.29, 39.27, 54.01, 22, 78.33]
},
{
name: '联盟广告',
type: 'bar',
stack: '总量',
data: [30.43, 29.41, 52.86, 69.86, 72.09, 22, 10]
},
{
name: '视频广告',
type: 'bar',
stack: '总量',
data: [26.09, 42.86, 60.94, 71.63, 69.41, 22, 12]
}
]
}
},
beforeRender7 (opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/) {
return {
...options
};
}
});
PCPhonePad
<page >
<module height="400px" style="margin: 0">
<customchart :options="options" :beforeRender="beforeRender8">
</customchart>
</module>
</page>
export default XPage({
data:{
options:{
'tooltip': {
axisPointer: {
type: 'shadow'
}
},
'legend': { 'data': ['邮件营销', '联盟广告', '视频广告'] },
'xAxis': {
type: 'category',
'data': ['01/01', '01/02', '01/03', '01/04', '01/05', '01/06', '01/07']
},
'yAxis': {
'type': 'value',
name: '总量',
axisLabel: {
show: true,
formatter: '{value}%'
}
},
'series': [
{
name: '邮件营销',
type: 'bar',
stack: '总量',
data: [37.39, 33.33, 44.29, 39.27, 54.01, 22, 78.33]
},
{
name: '联盟广告',
type: 'bar',
stack: '总量',
data: [30.43, 29.41, 52.86, 69.86, 72.09, 22, 10]
},
{
name: '视频广告',
type: 'bar',
stack: '总量',
data: [26.09, 42.86, 60.94, 71.63, 69.41, 22, 12]
}
]
}
},
beforeRender8(opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/) {
return options
},
});
PCPhonePad
<page >
<module height="400px" style="margin: 0">
<customchart :options="options" :beforeRender="beforeRender12">
</customchart>
</module>
</page>
export default XPage({
data: {
options: {
'legend': {'data': ['线下', '线上', '线上占比']},
'xAxis': {
'data': ['01/01', '01/02', '01/03', '01/04', '01/05', '01/06', '01/07']
},
'yAxis': [
{
type: 'value',
'scale': true
},
{
type: 'value',
'scale': true,
'splitLine': {'show': false}
}
],
'series': [
{
'type': 'bar',
'name': '线上',
'stack': 'Y',
'yAxisIndex': null,
'data': ['382679', '356571', '344679', '291502', '312182', '284532']
},
{
'type': 'line',
'name': '线上占比',
'stack': null,
'yAxisIndex': '1',
'data': ['51.93', '52.27', '52.89', '55.10', '54.88', '61.69']
}]
}
},
beforeRender12 (opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/) {
/*注意yAxis配置*/
return options
}
});
PCPhonePad
<page style='padding: 10px'>
<module height='400px' style='margin: 0'>
<customchart :options='options' :beforeRender='beforeRender14'>
</customchart>
</module>
</page>
export default XPage({
data:{options:{
'legend': { 'data': ['线下', '线上', '线上占比'] },
'xAxis': {
'data': ['01/01', '01/02', '01/03', '01/04', '01/05', '01/06', '01/07']
},
'yAxis': [
{
type: 'value',
'scale': true
},
{
type: 'value',
'scale': true,
'splitLine': { 'show': false }
}
],
'series': [
{
'type': 'bar',
'name': '线上',
'stack': 'Y',
'yAxisIndex': null,
'data': ['382679', '356571', '344679', '291502', '312182', '284532']
},
{
'type': 'bar',
'name': '线下',
'stack': 'Y',
'yAxisIndex': null,
'data': ['354293', '325546', '307062', '237523', '256711', '176690']
},
{
'type': 'line',
'name': '线上占比',
'stack': null,
'yAxisIndex': '1',
'data': ['51.93', '52.27', '52.89', '55.10', '54.88', '61.69']
}]
}},
beforeRender14(opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/) {
/*注意yAxis配置*/
return options
},
});
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 | -- |