低代码高性能原生UI框架Pie 饼图
平台兼容性
| Android uni-app-x | iOS uni-app-x | web | 小程序 |
|---|---|---|---|
| √ | x | x | x |
示例代码
html
<template>
<ux-page :colors="['black']">
<ux-navbar title="Pie" :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="Pie" :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 {
}
},
computed: {
chart() : UXChart {
return {
source: {
data: this.getData(),
conf: {
value: {
formatter: `function formatter(val) {
return val * 100 + '%';
}`
}
}
},
geom: {
interval: [{
position: 'a*value',
color: {
field: 'name',
colors: ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0'],
},
animate: {
appear: {
easing: 'bounceOut',
duration: 1000
}
},
adjust: 'stack',
}],
},
coord: {
polar: true,
transposed: true,
radius: 0.6,
innerRadius: 0.4
},
legend: {
position: 'top',
align: 'center',
itemFormatter: `function (name) {
let value = chart.get('data').filter(e => e.name == name)[0].value * 100
return name + ' ' + value + '%'
}`,
},
guide: {
html: [{
position: ['50%', '50%'],
html: `<div style="text-align: center;width: 150px;height: 40px;">
<p style="font-size: 12px;color: #999;margin: 0;" id="name"></p>
<p style="font-size: 18px;color: #343434;font-weight: bold;margin: 0;" id="value"></p>
</div>`
}]
},
pieLabel: {
sidePadding: 45,
activeShape: true,
label1: `function(data, color) {
return {
text: data.name,
fill: color
};
}`,
label2: `function(data) {
return {
text: data.value * 100 + '%',
fill: '#808080',
fontWeight: 'bold'
};
}`,
onClick: `function(ev) {
const data = ev.data;
if (data) {
$('#name').text(data.name);
$('#value').text(data.value * 100 + '%');
}
}`
},
afterRender: `function() {
const frontPlot = chart.get('frontPlot');
const coord = chart.get('coord');
frontPlot.addShape('sector', {
attrs: {
x: coord.center.x,
y: coord.center.y,
r: coord.circleRadius * coord.innerRadius * 1.2,
r0: coord.circleRadius * coord.innerRadius,
fill: '#000',
opacity: 0.15
}
});
chart.get('canvas').draw();
}`,
} as UXChart
}
},
onLoad(e : OnLoadOptions) {
},
methods: {
getData() : UTSJSONObject[] {
return [{
name: 'uniapp x',
value: 0.4,
a: '1'
}, {
name: 'uniapp',
value: 0.2,
a: '1'
}, {
name: 'flutter',
value: 0.18,
a: '1'
}, {
name: '鸿蒙 Next',
value: 0.15,
a: '1'
}, {
name: 'ios',
value: 0.05,
a: '1'
}, {
name: 'android',
value: 0.02,
a: '1'
}] as UTSJSONObject[]
}
}
}
</script><script>
import { UXChart } from "@/uni_modules/ux-frame/libs/types/chart.uts"
export default {
data() {
return {
}
},
computed: {
chart() : UXChart {
return {
source: {
data: this.getData(),
conf: {
value: {
formatter: `function formatter(val) {
return val * 100 + '%';
}`
}
}
},
geom: {
interval: [{
position: 'a*value',
color: {
field: 'name',
colors: ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0'],
},
animate: {
appear: {
easing: 'bounceOut',
duration: 1000
}
},
adjust: 'stack',
}],
},
coord: {
polar: true,
transposed: true,
radius: 0.6,
innerRadius: 0.4
},
legend: {
position: 'top',
align: 'center',
itemFormatter: `function (name) {
let value = chart.get('data').filter(e => e.name == name)[0].value * 100
return name + ' ' + value + '%'
}`,
},
guide: {
html: [{
position: ['50%', '50%'],
html: `<div style="text-align: center;width: 150px;height: 40px;">
<p style="font-size: 12px;color: #999;margin: 0;" id="name"></p>
<p style="font-size: 18px;color: #343434;font-weight: bold;margin: 0;" id="value"></p>
</div>`
}]
},
pieLabel: {
sidePadding: 45,
activeShape: true,
label1: `function(data, color) {
return {
text: data.name,
fill: color
};
}`,
label2: `function(data) {
return {
text: data.value * 100 + '%',
fill: '#808080',
fontWeight: 'bold'
};
}`,
onClick: `function(ev) {
const data = ev.data;
if (data) {
$('#name').text(data.name);
$('#value').text(data.value * 100 + '%');
}
}`
},
afterRender: `function() {
const frontPlot = chart.get('frontPlot');
const coord = chart.get('coord');
frontPlot.addShape('sector', {
attrs: {
x: coord.center.x,
y: coord.center.y,
r: coord.circleRadius * coord.innerRadius * 1.2,
r0: coord.circleRadius * coord.innerRadius,
fill: '#000',
opacity: 0.15
}
});
chart.get('canvas').draw();
}`,
} as UXChart
}
},
onLoad(e : OnLoadOptions) {
},
methods: {
getData() : UTSJSONObject[] {
return [{
name: 'uniapp x',
value: 0.4,
a: '1'
}, {
name: 'uniapp',
value: 0.2,
a: '1'
}, {
name: 'flutter',
value: 0.18,
a: '1'
}, {
name: '鸿蒙 Next',
value: 0.15,
a: '1'
}, {
name: 'ios',
value: 0.05,
a: '1'
}, {
name: 'android',
value: 0.02,
a: '1'
}] as UTSJSONObject[]
}
}
}
</script>css
<style lang="scss">
</style><style lang="scss">
</style>