示例
折线图
PCPhonePad
<page>
<module height='400px' style='margin: 0'>
<customchart :options='options' :beforeRender='beforeRender1' @chart="(chart)=>{custom('aaa',chart)}">
</customchart>
</module>
</page>
export default XPage({
data:{
options:{
'legend': {'data': ['线下', '线上', '线上占比']},
'xAxis': {
'data': ['01/01', '01/02', '01/03', '01/04', '01/05', '01/06']
},
'yAxis': [
{
'type': 'value',
'min': 0,
'name': '百分比'
}
],
'series': [
{
'type': 'line',
'name': '线上占比',
'data': ['51.93', '52.27', '10.89', '55.10', '54.88', '61.69']
}
]
}
},
beforeRender1 (opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/) {
/*这里可以对options 做2次调整，已满足部分UI差异*/
return options
},
custom(name,chart){
console.log(name,chart)
}
});
面积图
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 ]
}
]
};
}
});
桑基图
PCPhonePad
<page style='padding: 10px'>
<module height='400px' style='margin: 0'>
<customchart :options='options' :beforeRender='beforeRender20'>
</customchart>
</module>
</page>
export default XPage({
data: {
options: {
series: {
type: 'sankey',
layout: 'none',
emphasis: {
focus: 'adjacency'
},
data: [{
name: 'a'
}, {
name: 'b'
}, {
name: 'a1'
}, {
name: 'a2'
}, {
name: 'b1'
}, {
name: 'c'
}],
links: [{
source: 'a',
target: 'a1',
value: 5
}, {
source: 'a',
target: 'a2',
value: 3
}, {
source: 'b',
target: 'b1',
value: 8
}, {
source: 'a',
target: 'b1',
value: 3
}, {
source: 'b1',
target: 'a1',
value: 1
}, {
source: 'b1',
target: 'c',
value: 2
}]
}
}
},
beforeRender20 (opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/) {
/*块颜色*/
let levels = Array.from({length: 12}, (value, index) => {
return {
depth: index,
itemStyle: {
color: colors[ index % colors.length ].color
},
lineStyle: {
color: 'source',
opacity: 0.6/*连接带透明度*/
}
}
});
return {
series: {...options.series, levels}
};
}
});
漏斗图
PCPhonePad
<page style='padding: 10px'>
<module height='400px' style='margin: 0'>
<customchart :options='options' :beforeRender='beforeRender23'>
</customchart>
</module>
</page>
export default XPage({
data: {
options: {
series: [
{
name: '漏斗图',
type: 'funnel',
top: '30%',
bottom: '10%',
//x2: 80,
// height: {totalHeight} - y - y2,
min: 0,
max: 100,
minSize: '20%',
maxSize: '80%',
sort: 'descending',
gap: 5,
label: {
show: true,
position: 'inside',/*位置*/
color: '#fff'/*字体颜色*/
},
data: [
{
value: 20, name: '访问', itemStyle: {
color: '#57a5ff'
}
},
{value: 40, name: '咨询', itemStyle: {color: '#008aff'}},
{value: 60, name: '订单', itemStyle: {color: '#0f62fe'}},
{value: 80, name: '点击', itemStyle: {color: '#0043e7'}},
{value: 100, name: '展现', itemStyle: {color: '#0043e7'}}
]
}
]
}
},
beforeRender23 (opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/, callback/*异步回调*/) {
return {
legend: {
data: ['展现', '点击', '访问', '咨询', '订单']
},
tooltip: {
trigger: 'item'
},
series: options.series
};
}
});
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 | -- |