低代码高性能原生UI框架Point 气泡图
平台兼容性
| Android uni-app-x | iOS uni-app-x | web | 小程序 |
|---|---|---|---|
| √ | x | x | x |
示例代码
html
<template>
<ux-page :colors="['black']">
<ux-navbar title="Point" :border="false"></ux-navbar>
<ux-col>
<view style="height: 400px;">
<ux-chart ref="UxChart" :data="chart"></ux-chart>
</view>
</ux-col>
</ux-page>
</template><template>
<ux-page :colors="['black']">
<ux-navbar title="Point" :border="false"></ux-navbar>
<ux-col>
<view style="height: 400px;">
<ux-chart ref="UxChart" :data="chart"></ux-chart>
</view>
</ux-col>
</ux-page>
</template>ts
<script>
import { UXChart, UXChartGuideText } from "@/uni_modules/ux-frame/libs/types/chart.uts"
export default {
data() {
return {
}
},
computed: {
chart() : UXChart {
return {
source: {
data: this.getData(),
conf: {
x: {
alias: 'Daily fat intake', // 定义别名
tickInterval: 5, // 自定义刻度间距
nice: false, // 不对最大最小值优化
max: 96, // 自定义最大值
min: 62 // 自定义最小是
},
y: {
alias: 'Daily sugar intake',
tickInterval: 50,
nice: false,
max: 165,
min: 0
},
z: {
alias: 'Obesity(adults) %'
}
}
},
geom: {
point: [{
position: 'x*y',
size: {
field: 'z',
range: [ 10, 40 ]
},
color: {
color: '#1890ff',
},
shape: {
shape: 'circle'
},
style: {
field: 'x',
style: {
lineWidth: 1,
stroke: '#1890ff',
opacity: 0.3
}
},
animate: {
appear: {
delay: 300
}
},
}],
},
axis: [{
field: 'x',
conf: {
label: `function (text) {
return {
text: text + ' gr' // 格式化坐标轴显示文本
};
}`,
grid: {
stroke: '#d9d9d9',
lineWidth: 1,
lineDash: [ 2, 2 ]
}
}
},
{
field: 'y',
conf: {
line: `function() {
return F2.Util.mix({}, F2.Global._defaultAxis.line, {
top: false
})
}`,
label: `function (text) {
if (text > 0) {
return {
text: text + ' gr'
};
}
}`
}
}],
guide: {
text: this.getData().map((e: UTSJSONObject):UXChartGuideText => {
return {
position: [ e.getNumber('x'), e.getNumber('y') ],
content: e.getString('name'),
style: {
textAlign: 'center',
textBaseline: 'middle',
fill: '#1890FF'
}
} as UXChartGuideText
})
}
} as UXChart
}
},
onLoad(e : OnLoadOptions) {
},
methods: {
getData() : UTSJSONObject[] {
return [{
x: 95,
y: 95,
z: 13.8,
name: 'BE',
country: 'Belgium'
}, {
x: 86.5,
y: 102.9,
z: 14.7,
name: 'DE',
country: 'Germany'
}, {
x: 80.8,
y: 91.5,
z: 15.8,
name: 'FI',
country: 'Finland'
}, {
x: 80.4,
y: 102.5,
z: 12,
name: 'NL',
country: 'Netherlands'
}, {
x: 80.3,
y: 86.1,
z: 11.8,
name: 'SE',
country: 'Sweden'
}, {
x: 78.4,
y: 70.1,
z: 16.6,
name: 'ES',
country: 'Spain'
}, {
x: 74.2,
y: 68.5,
z: 14.5,
name: 'FR',
country: 'France'
}, {
x: 73.5,
y: 83.1,
z: 10,
name: 'NO',
country: 'Norway'
}, {
x: 71,
y: 93.2,
z: 24.7,
name: 'UK',
country: 'United Kingdom'
}, {
x: 69.2,
y: 57.6,
z: 10.4,
name: 'IT',
country: 'Italy'
}, {
x: 68.6,
y: 20,
z: 16,
name: 'RU',
country: 'Russia'
}, {
x: 65.5,
y: 126.4,
z: 35.3,
name: 'US',
country: 'United States'
}, {
x: 65.4,
y: 50.8,
z: 28.5,
name: 'HU',
country: 'Hungary'
}, {
x: 63.4,
y: 51.8,
z: 15.4,
name: 'PT',
country: 'Portugal'
}, {
x: 64,
y: 82.9,
z: 31.3,
name: 'NZ',
country: 'New Zealand'
}] as UTSJSONObject[]
},
}
}
</script><script>
import { UXChart, UXChartGuideText } from "@/uni_modules/ux-frame/libs/types/chart.uts"
export default {
data() {
return {
}
},
computed: {
chart() : UXChart {
return {
source: {
data: this.getData(),
conf: {
x: {
alias: 'Daily fat intake', // 定义别名
tickInterval: 5, // 自定义刻度间距
nice: false, // 不对最大最小值优化
max: 96, // 自定义最大值
min: 62 // 自定义最小是
},
y: {
alias: 'Daily sugar intake',
tickInterval: 50,
nice: false,
max: 165,
min: 0
},
z: {
alias: 'Obesity(adults) %'
}
}
},
geom: {
point: [{
position: 'x*y',
size: {
field: 'z',
range: [ 10, 40 ]
},
color: {
color: '#1890ff',
},
shape: {
shape: 'circle'
},
style: {
field: 'x',
style: {
lineWidth: 1,
stroke: '#1890ff',
opacity: 0.3
}
},
animate: {
appear: {
delay: 300
}
},
}],
},
axis: [{
field: 'x',
conf: {
label: `function (text) {
return {
text: text + ' gr' // 格式化坐标轴显示文本
};
}`,
grid: {
stroke: '#d9d9d9',
lineWidth: 1,
lineDash: [ 2, 2 ]
}
}
},
{
field: 'y',
conf: {
line: `function() {
return F2.Util.mix({}, F2.Global._defaultAxis.line, {
top: false
})
}`,
label: `function (text) {
if (text > 0) {
return {
text: text + ' gr'
};
}
}`
}
}],
guide: {
text: this.getData().map((e: UTSJSONObject):UXChartGuideText => {
return {
position: [ e.getNumber('x'), e.getNumber('y') ],
content: e.getString('name'),
style: {
textAlign: 'center',
textBaseline: 'middle',
fill: '#1890FF'
}
} as UXChartGuideText
})
}
} as UXChart
}
},
onLoad(e : OnLoadOptions) {
},
methods: {
getData() : UTSJSONObject[] {
return [{
x: 95,
y: 95,
z: 13.8,
name: 'BE',
country: 'Belgium'
}, {
x: 86.5,
y: 102.9,
z: 14.7,
name: 'DE',
country: 'Germany'
}, {
x: 80.8,
y: 91.5,
z: 15.8,
name: 'FI',
country: 'Finland'
}, {
x: 80.4,
y: 102.5,
z: 12,
name: 'NL',
country: 'Netherlands'
}, {
x: 80.3,
y: 86.1,
z: 11.8,
name: 'SE',
country: 'Sweden'
}, {
x: 78.4,
y: 70.1,
z: 16.6,
name: 'ES',
country: 'Spain'
}, {
x: 74.2,
y: 68.5,
z: 14.5,
name: 'FR',
country: 'France'
}, {
x: 73.5,
y: 83.1,
z: 10,
name: 'NO',
country: 'Norway'
}, {
x: 71,
y: 93.2,
z: 24.7,
name: 'UK',
country: 'United Kingdom'
}, {
x: 69.2,
y: 57.6,
z: 10.4,
name: 'IT',
country: 'Italy'
}, {
x: 68.6,
y: 20,
z: 16,
name: 'RU',
country: 'Russia'
}, {
x: 65.5,
y: 126.4,
z: 35.3,
name: 'US',
country: 'United States'
}, {
x: 65.4,
y: 50.8,
z: 28.5,
name: 'HU',
country: 'Hungary'
}, {
x: 63.4,
y: 51.8,
z: 15.4,
name: 'PT',
country: 'Portugal'
}, {
x: 64,
y: 82.9,
z: 31.3,
name: 'NZ',
country: 'New Zealand'
}] as UTSJSONObject[]
},
}
}
</script>css
<style lang="scss">
</style><style lang="scss">
</style>