示例
堆叠面积图
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 >
<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="beforeRender13">
</customchart>
</module>
</page>
export default XPage({
data: {
options: {
'tooltip': {
axisPointer: {
type: 'shadow'
}
},
'legend': {'data': ['邮件营销', '联盟广告', '视频广告']},
'xAxis': {
'type': 'value',
name: '总量',
axisLabel: {
show: true,
formatter: '{value}%'
}
},
'yAxis': {
type: 'category',
'data': ['01/01', '01/02', '01/03', '01/04', '01/05', '01/06', '01/07']
},
'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]
}
]
}
},
beforeRender13 (opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/) {
/*条形图在柱状图基础上调换xAxis 和yAxis配置即可*/
return options;
}
});
饼图
PCPhonePad
<page >
<module height="400px" style="margin: 0">
<customchart :options="options" :beforeRender="beforeRender15">
</customchart>
</module>
</page>
export default XPage({
data: {
options: {
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
]
}
},
beforeRender15 (opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/) {
/*饼图配置项*/
let data = options.data;
return {
legend: {
/*必要配置请勿修改*/
type: 'scroll',
orient: 'vertical',
left: '60%',
/*必要配置结束*/
/*top bottom 数值保持一致，需要根据实际 数据调整大小使legend 上下居中*/
top: '30%',
bottom: '30%',
formatter: function (name) {
/*展示 pie数据在 legend 后面*/
var index = 0;
data.forEach(function (item, i) {
if (item.name === name) {
index = i;
}
});
/*此处无法插入 html*/
return `${name} ${data[ index ].value}`;
}
},
'tooltip': {
trigger: 'item'
},
'series': [
{
center: ['35%', '50%'],
'type': 'pie',
'name': '访问来源',
data
}
]
};
}
});
双环形图
PCPhonePad
<page >
<module height="400px" style="margin: 0">
<customchart :options="options" :beforeRender="beforeRender16">
</customchart>
</module>
</page>
export default XPage({
data: {
options: {
data1: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
],
data2: [
{value: 10, name: '搜擎'},
{value: 22, name: '直接'},
{value: 30, name: '邮件'},
{value: 10, name: '联盟'},
{value: 50, name: '视频'}
]
}
},
beforeRender16(opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/) {
/*环饼图配置项*/
let data = options.data1;
let data2 = options.data2;
data.map((el, index) => {
el.itemStyle = {
color: colors[ index % colors.length ].color
}
return el
})
data2.map((el, index) => {
el.itemStyle = {
color: colors[ index % colors.length ].color
}
return el
})
return {
legend: {
/*必要配置请勿修改*/
type: 'scroll',
orient: 'vertical',
left: '60%',
/*必要配置结束*/
/*top bottom 数值保持一致，需要根据实际 数据调整大小使legend 上下居中*/
top: '10%',
bottom: '10%',
formatter: function (name) {
/*展示 pie数据在 legend 后面*/
var index = -1;
data.forEach(function (item, i) {
if (item.name === name) {
index = i;
}
});
if (index === -1) {
data2.forEach(function (item, i) {
if (item.name === name) {
index = i;
}
});
}
/*此处无法插入 html*/
return `${name} ${data[ index ].value}`;
}
},
'tooltip': {
trigger: 'item'
},
'series': [
{
/*环大小
* 单环推荐['50%', '70%']
* 双环推荐 ['20%', '40%'],['50%', '70%']
* */
radius: ['20%', '40%'],
center: ['35%', '50%'],
'type': 'pie',
'name': '访问来源',
data
},
{
radius: ['50%', '70%'],/*环大小*/
center: ['35%', '50%'],
'type': 'pie',
'name': '访问来源',
data: data2
}
]
};
}
});
单环形图
PCPhonePad
<page style='padding: 10px'>
<module height='400px' style='margin: 0'>
<customchart :options='options' :beforeRender='beforeRender17'>
</customchart>
</module>
</page>
export default XPage({
data: {
options: {
title: '主标题',
subtext: '副标题',
data: [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' },
{ value: 484, name: '联盟广告' },
{ value: 300, name: '视频广告' }
]
}
},
beforeRender17(opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/) {
/*环饼图配置项*/
let data = options.data;
return {
legend: {
/*必要配置请勿修改*/
type: 'scroll',
orient: 'vertical',
left: '60%',
/*必要配置结束*/
/*top bottom 数值保持一致，需要根据实际 数据调整大小使legend 上下居中*/
top: '30%',
bottom: '30%',
formatter: function(name) {
/*展示 pie数据在 legend 后面*/
var index = -1;
data.forEach(function(item, i) {
if (item.name === name) {
index = i;
}
});
/*此处无法插入 html*/
return `${name} ${data[ index ].value}`;
}
},
'tooltip': {
trigger: 'item'
},
title: {
text: options.title,//主文案
left: '34.5%',//调整位置保持文案居中
top: '40%',
textStyle: {
fontSize: 32
},
itemGap: 10,/*主副标题间距*/
//副文案
subtext: options.subtext/*todo 位置靠上*/
},
'series': [
{
/*环大小
* 单环推荐['50%', '70%']
* 双环推荐 ['20%', '40%'],['50%', '70%']
* */
radius: ['50%', '70%'],
center: ['35%', '50%'],
'type': 'pie',
'name': '访问来源',
data
}
]
};
}
});
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 | -- |