示例
折线图
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 >
<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="beforeRender9">
</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: '总量',
'barMaxWidth': 30,
data: [37.39, 33.33, 44.29, 39.27, 54.01, 22, 78.33]
}
]
}
},
beforeRender9 (opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/) {
/*条形图在柱状图基础上调换xAxis 和yAxis配置即可*/
return options
}
});
分组条形图
PCPhonePad
<page >
<module height="400px" style="margin: 0">
<customchart :options="options" :beforeRender="beforeRender10">
</customchart>
</module>
</page>
export default XPage({
data: {
options: {
/*bar 需要配置tooltip类型*/
'tooltip': {
axisPointer: {
type: 'shadow'
}
},
'legend': {'data': ['Forest', 'Steppe', 'Desert', 'Wetland']},
'xAxis': {
'type': 'value',
'name': '总量'
},
'yAxis': {
type: 'category',
'data': ['01/01', '01/02', '01/03', '01/04', '01/05']
},
'series': [
{
name: 'Forest',
type: 'bar',
'barMaxWidth': 30,
data: [320, 332, 301, 334, 390]
},
{
name: 'Steppe',
type: 'bar',
'barMaxWidth': 30,
data: [220, 182, 191, 234, 290]
},
{
name: 'Desert',
type: 'bar',
'barMaxWidth': 30,
data: [150, 232, 201, 154, 190]
},
{
name: 'Wetland',
type: 'bar',
'barMaxWidth': 30,
data: [98, 77, 101, 99, 40]
}
]
}
},
beforeRender10 (opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/) {
/*条形图在柱状图基础上调换xAxis 和yAxis配置即可*/
return options
}
});
堆叠条形图
PCPhonePad
<page >
<module height="400px" style="margin: 0">
<customchart :options="options" :beforeRender="beforeRender11">
</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]
}
]
}
},
beforeRender11 (opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/) {
/*条形图在柱状图基础上调换xAxis 和yAxis配置即可*/
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 >
<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 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
},
});
饼图
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
}
]
};
}
});
气泡图
PCPhonePad
<page style='padding: 10px'>
<module height='400px' style='margin: 0'>
<customchart :options='options' :beforeRender='beforeRender18'>
</customchart>
</module>
</page>
export default XPage({
data: {
options: {
series: [
{
type: 'scatter',
name: 'Female',
symbolSize: function(data) {
/*按一定算法控制 点大小*/
return Math.sqrt(data[ 0 ]);
},
data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
[170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
[172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
[147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
[159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
[174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
[154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
[162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
[168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
[167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
[167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
[168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
[156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
[162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
[151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
[164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
[170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
[163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
[161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
[159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
[161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
[171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
[166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
[159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
[162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
[172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
[162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
[158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
[167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
[170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
[160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
[166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
[170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
[167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
[160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
[177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
[172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
[175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
[165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
[168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
[162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
[157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
[172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
[161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
[152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
[160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
[167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
[175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
[174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
[156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
[169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
[176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
]
},
{
type: 'scatter',
symbolSize: function(data) {
/*按一定算法控制 点大小*/
return Math.sqrt(data[ 0 ]);
},
name: 'Male',
data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
[181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
[180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
[184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
[176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
[178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
[183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
[170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
[186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
[182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
[169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
[163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
[177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
[167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
[171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
[174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
[180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
[180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
[175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
[176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
[184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
[157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
[165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
[185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
[177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
[188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
[166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
[185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
[190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
[176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
[172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
[167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
[172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
[193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
[167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
[188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
[171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
[182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
[188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
[175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
[177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
[174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
[167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
[175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
[177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
[174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
[174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
[180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
[170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
[180.3, 83.2], [180.3, 83.2]
]
}
]
}
},
beforeRender18(opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/) {
return {
'legend': {
data: ['Female', 'Male']
},
'xAxis': {
type: 'value',
scale: true,
axisLabel: {
formatter: '{value} cm'
},
splitLine: {
show: false
}
},
'yAxis': {
type: 'value',
scale: true,
axisLabel: {
formatter: '{value} kg'
}
},
series: options.series
};
}
});
散点图
PCPhonePad
<page style='padding: 10px'>
<module height='400px' style='margin: 0'>
<customchart :options='options' :beforeRender='beforeRender19'>
</customchart>
</module>
</page>
export default XPage({
data: {
options: {
series: [
{
type: 'scatter',
name: 'Female',
symbolSize: function(data) {
/*按一定算法控制 点大小*/
return Math.sqrt(data[ 0 ]);
},
data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
[170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
[172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
[147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
[159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
[174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
[154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
[162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
[168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
[167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
[167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
[168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
[156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
[162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
[151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
[164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
[170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
[163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
[161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
[159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
[161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
[171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
[166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
[159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
[162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
[172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
[162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
[158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
[167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
[170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
[160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
[166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
[170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
[167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
[160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
[177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
[172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
[175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
[165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
[168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
[162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
[157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
[172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
[161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
[152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
[160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
[167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
[175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
[174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
[156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
[169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
[176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
]
},
{
type: 'scatter',
symbolSize: function(data) {
/*按一定算法控制 点大小*/
return Math.sqrt(data[ 0 ]);
},
name: 'Male',
data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
[181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
[180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
[184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
[176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
[178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
[183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
[170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
[186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
[182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
[169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
[163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
[177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
[167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
[171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
[174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
[180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
[180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
[175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
[176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
[184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
[157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
[165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
[185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
[177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
[188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
[166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
[185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
[190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
[176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
[172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
[167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
[172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
[193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
[167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
[188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
[171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
[182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
[188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
[175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
[177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
[174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
[167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
[175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
[177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
[174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
[174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
[180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
[170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
[180.3, 83.2], [180.3, 83.2]
]
}
]
}
},
beforeRender18(opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/) {
return {
'legend': {
data: ['Female', 'Male']
},
'xAxis': {
type: 'value',
scale: true,
axisLabel: {
formatter: '{value} cm'
},
splitLine: {
show: false
}
},
'yAxis': {
type: 'value',
scale: true,
axisLabel: {
formatter: '{value} kg'
}
},
series: options.series
};
}
});
桑基图
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='beforeRender21'>
</customchart>
</module>
</page>
export default XPage({
data: {
options: {
data: [
{
'name': '花鸟市场',
'value': 1446,
},
{
'name': '汽车',
'value': 928,
},
{
'name': '视频',
'value': 906,
},
{
'name': '电视',
'value': 825,
},
{
'name': 'Lover Boy 88',
'value': 514,
},
{
'name': '动漫',
'value': 486,
},
{
'name': '音乐',
'value': 5999,
},
{
'name': '直播',
'value': 163,
},
{
'name': '广播电台',
'value': 86,
},
{
'name': '戏曲曲艺',
'value': 17,
},
{
'name': '演出票务',
'value': 6,
},
{
'name': '给陌生的你听',
'value': 1,
},
{
'name': '资讯',
'value': 1437,
},
{
'name': '商业财经',
'value': 422,
},
{
'name': '娱乐八卦',
'value': 353,
},
{
'name': '军事',
'value': 331,
},
{
'name': '科技资讯',
'value': 313,
},
{
'name': '社会时政',
'value': 307,
},
{
'name': '时尚',
'value': 43,
},
{
'name': '网络奇闻',
'value': 15,
},
{
'name': '旅游出行',
'value': 438,
},
{
'name': '景点类型',
'value': 957,
},
{
'name': '国内游',
'value': 927,
},
{
'name': '远途出行方式',
'value': 908,
},
{
'name': '酒店',
'value': 693,
},
{
'name': '关注景点',
'value': 611,
},
{
'name': '旅游网站偏好',
'value': 512,
},
{
'name': '出国游',
'value': 382,
},
{
'name': '交通票务',
'value': 312,
},
{
'name': '旅游方式',
'value': 187,
},
{
'name': '旅游主题',
'value': 163,
},
{
'name': '港澳台',
'value': 104,
},
{
'name': '本地周边游',
'value': 3,
},
{
'name': '小卖家',
'value': 1331,
},
{
'name': '全日制学校',
'value': 941,
},
{
'name': '基础教育科目',
'value': 585,
},
{
'name': '考试培训',
'value': 473,
},
{
'name': '语言学习',
'value': 358,
},
{
'name': '留学',
'value': 246,
},
{
'name': 'K12课程培训',
'value': 207,
},
{
'name': '艺术培训',
'value': 194,
},
{
'name': '技能培训',
'value': 104,
},
{
'name': 'IT培训',
'value': 87,
},
{
'name': '高等教育专业',
'value': 63,
},
{
'name': '家教',
'value': 48,
},
{
'name': '体育培训',
'value': 23,
},
{
'name': '职场培训',
'value': 5,
},
{
'name': '金融财经',
'value': 1328,
},
{
'name': '银行',
'value': 765,
},
{
'name': '股票',
'value': 452,
},
{
'name': '保险',
'value': 415,
},
{
'name': '贷款',
'value': 253,
},
{
'name': '基金',
'value': 211,
},
{
'name': '信用卡',
'value': 180,
},
{
'name': '外汇',
'value': 138,
},
{
'name': 'P2P',
'value': 116,
},
{
'name': '贵金属',
'value': 98,
},
{
'name': '债券',
'value': 93,
},
{
'name': '网络理财',
'value': 92,
},
{
'name': '信托',
'value': 90,
},
{
'name': '征信',
'value': 76,
},
{
'name': '期货',
'value': 76,
},
{
'name': '公积金',
'value': 40,
},
{
'name': '银行理财',
'value': 36,
},
{
'name': '银行业务',
'value': 30,
},
{
'name': '典当',
'value': 7,
},
{
'name': '海外置业',
'value': 1,
},
{
'name': '汽车',
'value': 1309,
},
{
'name': '汽车档次',
'value': 965,
},
{
'name': '汽车品牌',
'value': 900,
},
{
'name': '汽车车型',
'value': 727,
},
{
'name': '购车阶段',
'value': 461,
},
{
'name': '二手车',
'value': 309,
},
{
'name': '汽车美容',
'value': 260,
},
{
'name': '新能源汽车',
'value': 173,
},
{
'name': '汽车维修',
'value': 155,
},
{
'name': '租车服务',
'value': 136,
},
{
'name': '车展',
'value': 121,
},
{
'name': '违章查询',
'value': 76,
},
{
'name': '汽车改装',
'value': 62,
},
{
'name': '汽车用品',
'value': 37,
},
{
'name': '路况查询',
'value': 32,
},
{
'name': '汽车保险',
'value': 28,
},
{
'name': '陪驾代驾',
'value': 4,
},
{
'name': '网络购物',
'value': 1275,
},
{
'name': '做我的猫',
'value': 1088,
},
{
'name': '只想要你知道',
'value': 907,
},
{
'name': '团购',
'value': 837,
},
{
'name': '比价',
'value': 201,
},
{
'name': '海淘',
'value': 195,
},
{
'name': '移动APP购物',
'value': 179,
},
{
'name': '支付方式',
'value': 119,
},
{
'name': '代购',
'value': 43,
},
{
'name': '体育健身',
'value': 1234,
},
{
'name': '体育赛事项目',
'value': 802,
},
{
'name': '运动项目',
'value': 405,
},
{
'name': '体育类赛事',
'value': 337,
},
{
'name': '健身项目',
'value': 199,
},
{
'name': '健身房健身',
'value': 78,
},
{
'name': '运动健身',
'value': 77,
},
{
'name': '家庭健身',
'value': 36,
},
{
'name': '健身器械',
'value': 29,
},
{
'name': '办公室健身',
'value': 3,
},
{
'name': '商务服务',
'value': 1201,
},
{
'name': '法律咨询',
'value': 508,
},
{
'name': '化工材料',
'value': 147,
},
{
'name': '广告服务',
'value': 125,
},
{
'name': '会计审计',
'value': 115,
},
{
'name': '人员招聘',
'value': 101,
},
{
'name': '印刷打印',
'value': 66,
},
{
'name': '知识产权',
'value': 32,
},
{
'name': '翻译',
'value': 22,
},
{
'name': '安全安保',
'value': 9,
},
{
'name': '公关服务',
'value': 8,
},
{
'name': '商旅服务',
'value': 2,
},
{
'name': '展会服务',
'value': 2,
},
{
'name': '特许经营',
'value': 1,
},
{
'name': '休闲爱好',
'value': 1169,
},
{
'name': '收藏',
'value': 412,
},
{
'name': '摄影',
'value': 393,
},
{
'name': '温泉',
'value': 230,
},
{
'name': '博彩彩票',
'value': 211,
},
{
'name': '美术',
'value': 207,
},
{
'name': '书法',
'value': 139,
},
{
'name': 'DIY手工',
'value': 75,
},
{
'name': '舞蹈',
'value': 23,
},
{
'name': '钓鱼',
'value': 21,
},
{
'name': '棋牌桌游',
'value': 17,
},
{
'name': 'KTV',
'value': 6,
},
{
'name': '密室',
'value': 5,
},
{
'name': '采摘',
'value': 4,
},
{
'name': '电玩',
'value': 1,
},
{
'name': '真人CS',
'value': 1,
},
{
'name': '轰趴',
'value': 1,
},
{
'name': '家电数码',
'value': 1111,
},
{
'name': '手机',
'value': 885,
},
{
'name': '电脑',
'value': 543,
},
{
'name': '大家电',
'value': 321,
},
{
'name': '家电关注品牌',
'value': 253,
},
{
'name': '网络设备',
'value': 162,
},
{
'name': '摄影器材',
'value': 149,
},
{
'name': '影音设备',
'value': 133,
},
{
'name': '办公数码设备',
'value': 113,
},
{
'name': '生活电器',
'value': 67,
},
{
'name': '厨房电器',
'value': 54,
},
{
'name': '智能设备',
'value': 45,
},
{
'name': '个人护理电器',
'value': 22,
},
{
'name': '服饰鞋包',
'value': 1047,
},
{
'name': '服装',
'value': 566,
},
{
'name': '饰品',
'value': 289,
},
{
'name': '鞋',
'value': 184,
},
{
'name': '箱包',
'value': 168,
},
{
'name': '奢侈品',
'value': 137,
},
{
'name': '母婴亲子',
'value': 1041,
},
{
'name': '孕婴保健',
'value': 505,
},
{
'name': '母婴社区',
'value': 299,
},
{
'name': '早教',
'value': 103,
},
{
'name': '奶粉辅食',
'value': 66,
},
{
'name': '童车童床',
'value': 41,
},
{
'name': '关注品牌',
'value': 271,
},
{
'name': '宝宝玩乐',
'value': 30,
},
{
'name': '母婴护理服务',
'value': 25,
},
{
'name': '纸尿裤湿巾',
'value': 16,
},
{
'name': '妈妈用品',
'value': 15,
},
{
'name': '宝宝起名',
'value': 12,
},
{
'name': '童装童鞋',
'value': 9,
},
{
'name': '胎教',
'value': 8,
},
{
'name': '宝宝安全',
'value': 1,
},
{
'name': '宝宝洗护用品',
'value': 1,
},
{
'name': '软件应用',
'value': 1018,
},
{
'name': '系统工具',
'value': 896,
},
{
'name': '理财购物',
'value': 440,
},
{
'name': '生活实用',
'value': 365,
},
{
'name': '影音图像',
'value': 256,
},
{
'name': '社交通讯',
'value': 214,
},
{
'name': '手机美化',
'value': 39,
},
{
'name': '办公学习',
'value': 28,
},
{
'name': '应用市场',
'value': 23,
},
{
'name': '母婴育儿',
'value': 14,
},
{
'name': '游戏',
'value': 946,
},
{
'name': '手机游戏',
'value': 565,
},
{
'name': 'PC游戏',
'value': 353,
},
{
'name': '网页游戏',
'value': 254,
},
{
'name': '游戏机',
'value': 188,
},
{
'name': '模拟辅助',
'value': 166,
},
{
'name': '个护美容',
'value': 942,
},
{
'name': '护肤品',
'value': 177,
},
{
'name': '彩妆',
'value': 133,
},
{
'name': '美发',
'value': 80,
},
{
'name': '香水',
'value': 50,
},
{
'name': '个人护理',
'value': 46,
},
{
'name': '美甲',
'value': 26,
},
{
'name': 'SPA美体',
'value': 21,
},
{
'name': '花鸟萌宠',
'value': 914,
},
{
'name': '绿植花卉',
'value': 311,
},
{
'name': '狗',
'value': 257,
},
{
'name': '其他宠物',
'value': 131,
},
{
'name': '水族',
'value': 125,
},
{
'name': '猫',
'value': 122,
},
{
'name': '动物',
'value': 81,
},
{
'name': '鸟',
'value': 67,
},
{
'name': '宠物用品',
'value': 41,
},
{
'name': '宠物服务',
'value': 26,
},
{
'name': '书籍阅读',
'value': 913,
},
{
'name': '网络小说',
'value': 483,
},
{
'name': '关注书籍',
'value': 128,
},
{
'name': '文学',
'value': 105,
},
{
'name': '报刊杂志',
'value': 77,
},
{
'name': '人文社科',
'value': 22,
},
{
'name': '建材家居',
'value': 907,
},
{
'name': '装修建材',
'value': 644,
},
{
'name': '家具',
'value': 273,
},
{
'name': '家居风格',
'value': 187,
},
{
'name': '家居家装关注品牌',
'value': 140,
},
{
'name': '家纺',
'value': 107,
},
{
'name': '厨具',
'value': 47,
},
{
'name': '灯具',
'value': 43,
},
{
'name': '家居饰品',
'value': 29,
},
{
'name': '家居日常用品',
'value': 10,
},
{
'name': '生活服务',
'value': 883,
},
{
'name': '物流配送',
'value': 536,
},
{
'name': '家政服务',
'value': 108,
},
{
'name': '摄影服务',
'value': 49,
},
{
'name': '搬家服务',
'value': 38,
},
{
'name': '物业维修',
'value': 37,
},
{
'name': '婚庆服务',
'value': 24,
},
{
'name': '二手回收',
'value': 24,
},
{
'name': '鲜花配送',
'value': 3,
},
{
'name': '维修服务',
'value': 3,
},
{
'name': '殡葬服务',
'value': 1,
},
{
'name': '求职创业',
'value': 874,
},
{
'name': '创业',
'value': 363,
},
{
'name': '目标职位',
'value': 162,
},
{
'name': '目标行业',
'value': 50,
},
{
'name': '兼职',
'value': 21,
},
{
'name': '期望年薪',
'value': 20,
},
{
'name': '实习',
'value': 16,
},
{
'name': '雇主类型',
'value': 10,
},
{
'name': '星座运势',
'value': 789,
},
{
'name': '星座',
'value': 316,
},
{
'name': '算命',
'value': 303,
},
{
'name': '解梦',
'value': 196,
},
{
'name': '风水',
'value': 93,
},
{
'name': '面相分析',
'value': 47,
},
{
'name': '手相',
'value': 32,
},
{
'name': '公益',
'value': 90,
},
],
},
},
beforeRender21(opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/, callback/*词云图特殊处理*/, lighting/*高亮色*/) {
/*词云图的异步特殊性，需要特殊处理*/
var data = options.data;
data.map((el, index) => {
el.textStyle = {
color: colors[ index % colors.length ].color,
};
return el;
});
// 词云图图像
var image1 = 'data:image/png;base64,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';
var maskResource = new Image();
maskResource.onload = function() {
callback && callback({
series: {
maskImage: maskResource,
//词的类型
type: 'wordCloud',
//设置字符大小范围
sizeRange: [6, 78],
rotationRange: [-45, 90],
// textStyle: {
// normal: {
// //生成随机的字体颜色
// color: function() {
// return 'rgb(' + [
// Math.round(Math.random() * 160),
// Math.round(Math.random() * 160),
// Math.round(Math.random() * 160)
// ].join(',') + ')';
// }
// }
//
// },
//不要忘记调用数据
data,
},
});
};
maskResource.src = image1;
return null;
},
});
漏斗图
PCPhonePad
<page style='padding: 10px'>
<module height='400px' style='margin: 0'>
<customchart :options='options' :beforeRender='beforeRender22'>
</customchart>
</module>
</page>
export default XPage({
data: {
options: {
data: [
{
"value": 40,
"name": "Accessibility",
"path": "Accessibility"
},
{
"value": 180,
"name": "Accounts",
"path": "Accounts",
"children": [
{
"value": 76,
"name": "Access",
"path": "Accounts/Access",
"children": [
{
"value": 12,
"name": "DefaultAccessPlugin.bundle",
"path": "Accounts/Access/DefaultAccessPlugin.bundle"
},
{
"value": 28,
"name": "FacebookAccessPlugin.bundle",
"path": "Accounts/Access/FacebookAccessPlugin.bundle"
},
{
"value": 20,
"name": "LinkedInAccessPlugin.bundle",
"path": "Accounts/Access/LinkedInAccessPlugin.bundle"
},
{
"value": 16,
"name": "TencentWeiboAccessPlugin.bundle",
"path": "Accounts/Access/TencentWeiboAccessPlugin.bundle"
}
]
},
{
"value": 92,
"name": "Authentication",
"path": "Accounts/Authentication",
"children": [
{
"value": 24,
"name": "FacebookAuthenticationPlugin.bundle",
"path": "Accounts/Authentication/FacebookAuthenticationPlugin.bundle"
},
{
"value": 16,
"name": "LinkedInAuthenticationPlugin.bundle",
"path": "Accounts/Authentication/LinkedInAuthenticationPlugin.bundle"
},
{
"value": 20,
"name": "TencentWeiboAuthenticationPlugin.bundle",
"path": "Accounts/Authentication/TencentWeiboAuthenticationPlugin.bundle"
},
{
"value": 16,
"name": "TwitterAuthenticationPlugin.bundle",
"path": "Accounts/Authentication/TwitterAuthenticationPlugin.bundle"
},
{
"value": 16,
"name": "WeiboAuthenticationPlugin.bundle",
"path": "Accounts/Authentication/WeiboAuthenticationPlugin.bundle"
}
]
},
{
"value": 12,
"name": "Notification",
"path": "Accounts/Notification",
"children": [
{
"value": 12,
"name": "SPAAccountsNotificationPlugin.bundle",
"path": "Accounts/Notification/SPAAccountsNotificationPlugin.bundle"
}
]
}
]
},
{
"value": 1904,
"name": "AddressBook Plug-Ins",
"path": "AddressBook Plug-Ins",
"children": [
{
"value": 744,
"name": "CardDAVPlugin.sourcebundle",
"path": "AddressBook Plug-Ins/CardDAVPlugin.sourcebundle",
"children": [
{
"value": 744,
"name": "Contents",
"path": "AddressBook Plug-Ins/CardDAVPlugin.sourcebundle/Contents"
}
]
},
{
"value": 28,
"name": "DirectoryServices.sourcebundle",
"path": "AddressBook Plug-Ins/DirectoryServices.sourcebundle",
"children": [
{
"value": 28,
"name": "Contents",
"path": "AddressBook Plug-Ins/DirectoryServices.sourcebundle/Contents"
}
]
},
{
"value": 680,
"name": "Exchange.sourcebundle",
"path": "AddressBook Plug-Ins/Exchange.sourcebundle",
"children": [
{
"value": 680,
"name": "Contents",
"path": "AddressBook Plug-Ins/Exchange.sourcebundle/Contents"
}
]
},
{
"value": 432,
"name": "LDAP.sourcebundle",
"path": "AddressBook Plug-Ins/LDAP.sourcebundle",
"children": [
{
"value": 432,
"name": "Contents",
"path": "AddressBook Plug-Ins/LDAP.sourcebundle/Contents"
}
]
},
{
"value": 20,
"name": "LocalSource.sourcebundle",
"path": "AddressBook Plug-Ins/LocalSource.sourcebundle",
"children": [
{
"value": 20,
"name": "Contents",
"path": "AddressBook Plug-Ins/LocalSource.sourcebundle/Contents"
}
]
}
]
}
]
}
},
beforeRender22 (opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/, callback/*异步回调*/) {
function getLevelOption () {
return [
{
itemStyle: {
borderWidth: 0,
gapWidth: 5
}
},
{
itemStyle: {
gapWidth: 1
}
},
{
colorSaturation: [0.35, 0.5],
itemStyle: {
gapWidth: 1,
borderColorSaturation: 0.6
}
}
];
}
var diskData = options.data;
return {
tooltip: {
show: true,
formatter: function (info) {
return '2342342342';
}
},
legend: {
data: []
},
series: [
{
name: 'Disk Usage',
type: 'treemap',
visibleMin: 300,
label: {
show: true,
formatter: '{b}'
},
itemStyle: {
borderColor: '#fff'
},
levels: getLevelOption(),
data: diskData
}
]
};
}
});
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 | -- |