低代码高性能原生UI框架Word 词云图
平台兼容性
| Android uni-app-x | iOS uni-app-x | web | 小程序 |
|---|---|---|---|
| √ | x | x | x |
示例代码
html
<template>
<ux-page :colors="['black']">
<ux-navbar title="Word" :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="Word" :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 } from "@/uni_modules/ux-frame/libs/types/chart.uts"
export default {
data() {
return {
title: '',
}
},
computed: {
chart() : UXChart {
return {
dataSet: `function(data) {
const dv = new window.DataSet.View().source(data);
const range = dv.range('value');
const min = range[0];
const max = range[1];
const MAX_FONTSIZE = 36;
const MIN_FONTSIZE = 12;
dv.transform({
type: 'tag-cloud',
fields: [ 'x', 'value' ],
size: [ 375, 260 ],
font: 'Verdana',
padding: 0,
timeInterval: 5000,
rotate: function() {
let random = ~~(Math.random() * 4) % 4;
if (random == 2) {
random = 0;
}
return random * 90; // 0, 90, 270
},
fontSize: function(d) {
if (d.value) {
return (d.value - min) / (max - min) * (MAX_FONTSIZE - MIN_FONTSIZE) + MIN_FONTSIZE;
}
return 0;
}
});
return dv.rows
}`,
source: {
data: this.getData(),
conf: {
x: {
nice: false
},
y: {
nice: false
}
}
},
geom: {
point: [{
position: 'x*y',
color: {
field: 'category',
},
shape: {
shape: 'cloud'
}
}]
},
registerShape: [{
type: 'point',
name: 'cloud',
draw: `function (cfg, container) {
const attrs = F2.Util.mix({}, {
fillOpacity: cfg.opacity,
fontSize: cfg.origin._origin.size,
rotate: cfg.origin._origin.rotate * Math.PI / 180,
text: cfg.origin._origin.text,
textAlign: 'center',
fontFamily: cfg.origin._origin.font,
fill: cfg.color,
textBaseline: 'Alphabetic'
}, cfg.style);
const x = cfg.x;
const y = this._coord.y.start - cfg.y;
return container.addShape('text', {
attrs: F2.Util.mix(attrs, {
x,
y
})
});
}`
}]
} as UXChart
}
},
onLoad(e : OnLoadOptions) {
this.title = e.get('title') ?? ''
},
methods: {
getData() : UTSJSONObject[] {
return [
{
"x": "China",
"value": 1383220000,
"category": "asia"
},
{
"x": "India",
"value": 1316000000,
"category": "asia"
},
{
"x": "United States",
"value": 324982000,
"category": "america"
},
{
"x": "Indonesia",
"value": 263510000,
"category": "asia"
},
{
"x": "Brazil",
"value": 207505000,
"category": "america"
},
{
"x": "Pakistan",
"value": 196459000,
"category": "asia"
},
{
"x": "Nigeria",
"value": 191836000,
"category": "africa"
},
{
"x": "Bangladesh",
"value": 162459000,
"category": "asia"
},
{
"x": "Russia",
"value": 146804372,
"category": "europe"
},
{
"x": "Japan",
"value": 126790000,
"category": "asia"
},
{
"x": "Mexico",
"value": 123518000,
"category": "america"
},
{
"x": "Ethiopia",
"value": 104345000,
"category": "africa"
},
{
"x": "Philippines",
"value": 104037000,
"category": "asia"
},
{
"x": "Egypt",
"value": 93013300,
"category": "africa"
},
{
"x": "Vietnam",
"value": 92700000,
"category": "asia"
},
{
"x": "Germany",
"value": 82800000,
"category": "europe"
},
{
"x": "Democratic Republic of the Congo",
"value": 82243000,
"category": "africa"
},
{
"x": "Iran",
"value": 80135400,
"category": "asia"
},
{
"x": "Turkey",
"value": 79814871,
"category": "asia"
},
{
"x": "Thailand",
"value": 68298000,
"category": "asia"
},
{
"x": "France",
"value": 67013000,
"category": "europe"
},
{
"x": "United Kingdom",
"value": 65110000,
"category": "europe"
},
{
"x": "Italy",
"value": 60599936,
"category": "europe"
},
{
"x": "Tanzania",
"value": 56878000,
"category": "africa"
},
{
"x": "South Africa",
"value": 55908000,
"category": "africa"
},
{
"x": "Myanmar",
"value": 54836000,
"category": "asia"
},
{
"x": "South Korea",
"value": 51446201,
"category": "asia"
},
{
"x": "Colombia",
"value": 49224700,
"category": "america"
},
{
"x": "Kenya",
"value": 48467000,
"category": "africa"
},
{
"x": "Spain",
"value": 46812000,
"category": "europe"
},
{
"x": "Argentina",
"value": 43850000,
"category": "america"
},
{
"x": "Ukraine",
"value": 42541633,
"category": "europe"
},
{
"x": "Sudan",
"value": 42176000,
"category": "africa"
},
{
"x": "Uganda",
"value": 41653000,
"category": "africa"
},
{
"x": "Algeria",
"value": 41064000,
"category": "africa"
},
{
"x": "Poland",
"value": 38424000,
"category": "europe"
},
{
"x": "Iraq",
"value": 37883543,
"category": "asia"
},
{
"x": "Canada",
"value": 36541000,
"category": "america"
},
{
"x": "Morocco",
"value": 34317500,
"category": "africa"
},
{
"x": "Saudi Arabia",
"value": 33710021,
"category": "asia"
},
{
"x": "Uzbekistan",
"value": 32121000,
"category": "asia"
},
{
"x": "Malaysia",
"value": 32063200,
"category": "asia"
},
{
"x": "Peru",
"value": 31826018,
"category": "america"
},
{
"x": "Venezuela",
"value": 31431164,
"category": "america"
},
{
"x": "Nepal",
"value": 28825709,
"category": "asia"
},
{
"x": "Angola",
"value": 28359634,
"category": "africa"
},
{
"x": "Ghana",
"value": 28308301,
"category": "africa"
},
{
"x": "Yemen",
"value": 28120000,
"category": "asia"
},
{
"x": "Afghanistan",
"value": 27657145,
"category": "asia"
},
{
"x": "Mozambique",
"value": 27128530,
"category": "africa"
},
{
"x": "Australia",
"value": 24460900,
"category": "australia"
},
{
"x": "North Korea",
"value": 24213510,
"category": "asia"
},
{
"x": "Taiwan",
"value": 23545680,
"category": "asia"
},
{
"x": "Cameroon",
"value": 23248044,
"category": "africa"
},
{
"x": "Ivory Coast",
"value": 22671331,
"category": "africa"
},
{
"x": "Madagascar",
"value": 22434363,
"category": "africa"
},
{
"x": "Niger",
"value": 21564000,
"category": "africa"
},
{
"x": "Sri Lanka",
"value": 21203000,
"category": "asia"
},
{
"x": "Romania",
"value": 19760000,
"category": "europe"
},
{
"x": "Burkina Faso",
"value": 19632147,
"category": "africa"
},
{
"x": "Syria",
"value": 18907000,
"category": "asia"
},
{
"x": "Mali",
"value": 18875000,
"category": "africa"
},
{
"x": "Malawi",
"value": 18299000,
"category": "africa"
},
{
"x": "Chile",
"value": 18191900,
"category": "america"
},
{
"x": "Kazakhstan",
"value": 17975800,
"category": "asia"
},
{
"x": "Netherlands",
"value": 17121900,
"category": "europe"
},
{
"x": "Ecuador",
"value": 16737700,
"category": "america"
},
{
"x": "Guatemala",
"value": 16176133,
"category": "america"
},
{
"x": "Zambia",
"value": 15933883,
"category": "africa"
},
{
"x": "Cambodia",
"value": 15626444,
"category": "asia"
},
{
"x": "Senegal",
"value": 15256346,
"category": "africa"
},
{
"x": "Chad",
"value": 14965000,
"category": "africa"
},
{
"x": "Zimbabwe",
"value": 14542235,
"category": "africa"
},
{
"x": "Guinea",
"value": 13291000,
"category": "africa"
},
{
"x": "South Sudan",
"value": 12131000,
"category": "africa"
},
{
"x": "Rwanda",
"value": 11553188,
"category": "africa"
},
{
"x": "Belgium",
"value": 11356191,
"category": "europe"
},
{
"x": "Tunisia",
"value": 11299400,
"category": "africa"
},
{
"x": "Cuba",
"value": 11239004,
"category": "america"
},
{
"x": "Bolivia",
"value": 11145770,
"category": "america"
},
{
"x": "Somalia",
"value": 11079000,
"category": "africa"
},
{
"x": "Haiti",
"value": 11078033,
"category": "america"
},
{
"x": "Greece",
"value": 10783748,
"category": "europe"
},
{
"x": "Benin",
"value": 10653654,
"category": "africa"
},
{
"x": "Czech Republic",
"value": 10578820,
"category": "europe"
},
{
"x": "Portugal",
"value": 10341330,
"category": "europe"
},
{
"x": "Burundi",
"value": 10114505,
"category": "africa"
},
{
"x": "Dominican Republic",
"value": 10075045,
"category": "america"
},
{
"x": "Sweden",
"value": 10054100,
"category": "europe"
},
{
"x": "United Arab Emirates",
"value": 10003223,
"category": "asia"
},
{
"x": "Jordan",
"value": 9889270,
"category": "asia"
},
{
"x": "Azerbaijan",
"value": 9823667,
"category": "asia"
},
{
"x": "Hungary",
"value": 9799000,
"category": "europe"
},
{
"x": "Belarus",
"value": 9498600,
"category": "europe"
},
{
"x": "Honduras",
"value": 8866351,
"category": "america"
},
{
"x": "Austria",
"value": 8773686,
"category": "europe"
},
{
"x": "Tajikistan",
"value": 8742000,
"category": "asia"
},
{
"x": "Israel",
"value": 8690220,
"category": "asia"
},
{
"x": "Switzerland",
"value": 8417700,
"category": "europe"
},
{
"x": "Papua New Guinea",
"value": 8151300,
"category": "australia"
}
]
}
}
}
</script><script>
import { UXChart } from "@/uni_modules/ux-frame/libs/types/chart.uts"
export default {
data() {
return {
title: '',
}
},
computed: {
chart() : UXChart {
return {
dataSet: `function(data) {
const dv = new window.DataSet.View().source(data);
const range = dv.range('value');
const min = range[0];
const max = range[1];
const MAX_FONTSIZE = 36;
const MIN_FONTSIZE = 12;
dv.transform({
type: 'tag-cloud',
fields: [ 'x', 'value' ],
size: [ 375, 260 ],
font: 'Verdana',
padding: 0,
timeInterval: 5000,
rotate: function() {
let random = ~~(Math.random() * 4) % 4;
if (random == 2) {
random = 0;
}
return random * 90; // 0, 90, 270
},
fontSize: function(d) {
if (d.value) {
return (d.value - min) / (max - min) * (MAX_FONTSIZE - MIN_FONTSIZE) + MIN_FONTSIZE;
}
return 0;
}
});
return dv.rows
}`,
source: {
data: this.getData(),
conf: {
x: {
nice: false
},
y: {
nice: false
}
}
},
geom: {
point: [{
position: 'x*y',
color: {
field: 'category',
},
shape: {
shape: 'cloud'
}
}]
},
registerShape: [{
type: 'point',
name: 'cloud',
draw: `function (cfg, container) {
const attrs = F2.Util.mix({}, {
fillOpacity: cfg.opacity,
fontSize: cfg.origin._origin.size,
rotate: cfg.origin._origin.rotate * Math.PI / 180,
text: cfg.origin._origin.text,
textAlign: 'center',
fontFamily: cfg.origin._origin.font,
fill: cfg.color,
textBaseline: 'Alphabetic'
}, cfg.style);
const x = cfg.x;
const y = this._coord.y.start - cfg.y;
return container.addShape('text', {
attrs: F2.Util.mix(attrs, {
x,
y
})
});
}`
}]
} as UXChart
}
},
onLoad(e : OnLoadOptions) {
this.title = e.get('title') ?? ''
},
methods: {
getData() : UTSJSONObject[] {
return [
{
"x": "China",
"value": 1383220000,
"category": "asia"
},
{
"x": "India",
"value": 1316000000,
"category": "asia"
},
{
"x": "United States",
"value": 324982000,
"category": "america"
},
{
"x": "Indonesia",
"value": 263510000,
"category": "asia"
},
{
"x": "Brazil",
"value": 207505000,
"category": "america"
},
{
"x": "Pakistan",
"value": 196459000,
"category": "asia"
},
{
"x": "Nigeria",
"value": 191836000,
"category": "africa"
},
{
"x": "Bangladesh",
"value": 162459000,
"category": "asia"
},
{
"x": "Russia",
"value": 146804372,
"category": "europe"
},
{
"x": "Japan",
"value": 126790000,
"category": "asia"
},
{
"x": "Mexico",
"value": 123518000,
"category": "america"
},
{
"x": "Ethiopia",
"value": 104345000,
"category": "africa"
},
{
"x": "Philippines",
"value": 104037000,
"category": "asia"
},
{
"x": "Egypt",
"value": 93013300,
"category": "africa"
},
{
"x": "Vietnam",
"value": 92700000,
"category": "asia"
},
{
"x": "Germany",
"value": 82800000,
"category": "europe"
},
{
"x": "Democratic Republic of the Congo",
"value": 82243000,
"category": "africa"
},
{
"x": "Iran",
"value": 80135400,
"category": "asia"
},
{
"x": "Turkey",
"value": 79814871,
"category": "asia"
},
{
"x": "Thailand",
"value": 68298000,
"category": "asia"
},
{
"x": "France",
"value": 67013000,
"category": "europe"
},
{
"x": "United Kingdom",
"value": 65110000,
"category": "europe"
},
{
"x": "Italy",
"value": 60599936,
"category": "europe"
},
{
"x": "Tanzania",
"value": 56878000,
"category": "africa"
},
{
"x": "South Africa",
"value": 55908000,
"category": "africa"
},
{
"x": "Myanmar",
"value": 54836000,
"category": "asia"
},
{
"x": "South Korea",
"value": 51446201,
"category": "asia"
},
{
"x": "Colombia",
"value": 49224700,
"category": "america"
},
{
"x": "Kenya",
"value": 48467000,
"category": "africa"
},
{
"x": "Spain",
"value": 46812000,
"category": "europe"
},
{
"x": "Argentina",
"value": 43850000,
"category": "america"
},
{
"x": "Ukraine",
"value": 42541633,
"category": "europe"
},
{
"x": "Sudan",
"value": 42176000,
"category": "africa"
},
{
"x": "Uganda",
"value": 41653000,
"category": "africa"
},
{
"x": "Algeria",
"value": 41064000,
"category": "africa"
},
{
"x": "Poland",
"value": 38424000,
"category": "europe"
},
{
"x": "Iraq",
"value": 37883543,
"category": "asia"
},
{
"x": "Canada",
"value": 36541000,
"category": "america"
},
{
"x": "Morocco",
"value": 34317500,
"category": "africa"
},
{
"x": "Saudi Arabia",
"value": 33710021,
"category": "asia"
},
{
"x": "Uzbekistan",
"value": 32121000,
"category": "asia"
},
{
"x": "Malaysia",
"value": 32063200,
"category": "asia"
},
{
"x": "Peru",
"value": 31826018,
"category": "america"
},
{
"x": "Venezuela",
"value": 31431164,
"category": "america"
},
{
"x": "Nepal",
"value": 28825709,
"category": "asia"
},
{
"x": "Angola",
"value": 28359634,
"category": "africa"
},
{
"x": "Ghana",
"value": 28308301,
"category": "africa"
},
{
"x": "Yemen",
"value": 28120000,
"category": "asia"
},
{
"x": "Afghanistan",
"value": 27657145,
"category": "asia"
},
{
"x": "Mozambique",
"value": 27128530,
"category": "africa"
},
{
"x": "Australia",
"value": 24460900,
"category": "australia"
},
{
"x": "North Korea",
"value": 24213510,
"category": "asia"
},
{
"x": "Taiwan",
"value": 23545680,
"category": "asia"
},
{
"x": "Cameroon",
"value": 23248044,
"category": "africa"
},
{
"x": "Ivory Coast",
"value": 22671331,
"category": "africa"
},
{
"x": "Madagascar",
"value": 22434363,
"category": "africa"
},
{
"x": "Niger",
"value": 21564000,
"category": "africa"
},
{
"x": "Sri Lanka",
"value": 21203000,
"category": "asia"
},
{
"x": "Romania",
"value": 19760000,
"category": "europe"
},
{
"x": "Burkina Faso",
"value": 19632147,
"category": "africa"
},
{
"x": "Syria",
"value": 18907000,
"category": "asia"
},
{
"x": "Mali",
"value": 18875000,
"category": "africa"
},
{
"x": "Malawi",
"value": 18299000,
"category": "africa"
},
{
"x": "Chile",
"value": 18191900,
"category": "america"
},
{
"x": "Kazakhstan",
"value": 17975800,
"category": "asia"
},
{
"x": "Netherlands",
"value": 17121900,
"category": "europe"
},
{
"x": "Ecuador",
"value": 16737700,
"category": "america"
},
{
"x": "Guatemala",
"value": 16176133,
"category": "america"
},
{
"x": "Zambia",
"value": 15933883,
"category": "africa"
},
{
"x": "Cambodia",
"value": 15626444,
"category": "asia"
},
{
"x": "Senegal",
"value": 15256346,
"category": "africa"
},
{
"x": "Chad",
"value": 14965000,
"category": "africa"
},
{
"x": "Zimbabwe",
"value": 14542235,
"category": "africa"
},
{
"x": "Guinea",
"value": 13291000,
"category": "africa"
},
{
"x": "South Sudan",
"value": 12131000,
"category": "africa"
},
{
"x": "Rwanda",
"value": 11553188,
"category": "africa"
},
{
"x": "Belgium",
"value": 11356191,
"category": "europe"
},
{
"x": "Tunisia",
"value": 11299400,
"category": "africa"
},
{
"x": "Cuba",
"value": 11239004,
"category": "america"
},
{
"x": "Bolivia",
"value": 11145770,
"category": "america"
},
{
"x": "Somalia",
"value": 11079000,
"category": "africa"
},
{
"x": "Haiti",
"value": 11078033,
"category": "america"
},
{
"x": "Greece",
"value": 10783748,
"category": "europe"
},
{
"x": "Benin",
"value": 10653654,
"category": "africa"
},
{
"x": "Czech Republic",
"value": 10578820,
"category": "europe"
},
{
"x": "Portugal",
"value": 10341330,
"category": "europe"
},
{
"x": "Burundi",
"value": 10114505,
"category": "africa"
},
{
"x": "Dominican Republic",
"value": 10075045,
"category": "america"
},
{
"x": "Sweden",
"value": 10054100,
"category": "europe"
},
{
"x": "United Arab Emirates",
"value": 10003223,
"category": "asia"
},
{
"x": "Jordan",
"value": 9889270,
"category": "asia"
},
{
"x": "Azerbaijan",
"value": 9823667,
"category": "asia"
},
{
"x": "Hungary",
"value": 9799000,
"category": "europe"
},
{
"x": "Belarus",
"value": 9498600,
"category": "europe"
},
{
"x": "Honduras",
"value": 8866351,
"category": "america"
},
{
"x": "Austria",
"value": 8773686,
"category": "europe"
},
{
"x": "Tajikistan",
"value": 8742000,
"category": "asia"
},
{
"x": "Israel",
"value": 8690220,
"category": "asia"
},
{
"x": "Switzerland",
"value": 8417700,
"category": "europe"
},
{
"x": "Papua New Guinea",
"value": 8151300,
"category": "australia"
}
]
}
}
}
</script>css
<style lang="scss">
</style><style lang="scss">
</style>