示例
饼图
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 | -- |