89 lines
1.5 KiB
Vue
89 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<view class="qiun-columns">
|
||
|
|
|
||
|
|
<view class="qiun-charts">
|
||
|
|
<canvas canvas-id="canvasRadar" id="canvasRadar" class="charts"></canvas>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import uCharts from '@/js_sdk/u-charts/u-charts.js'
|
||
|
|
var _self;
|
||
|
|
var canvaRadar = null;
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
series: {
|
||
|
|
type: Array,
|
||
|
|
default: function() {
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
categories: {
|
||
|
|
type: Array,
|
||
|
|
default: function() {
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
cWidth: '',
|
||
|
|
cHeight: '',
|
||
|
|
pixelRatio: 1,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
open() {
|
||
|
|
console.log('open')
|
||
|
|
},
|
||
|
|
showRadar(canvasId, categories, series) {
|
||
|
|
canvaRadar = new uCharts({
|
||
|
|
$this: this,
|
||
|
|
canvasId: canvasId,
|
||
|
|
type: 'radar',
|
||
|
|
fontSize: 11,
|
||
|
|
background: '#FFFFFF',
|
||
|
|
pixelRatio: this.pixelRatio,
|
||
|
|
animation: true,
|
||
|
|
dataLabel: true,
|
||
|
|
categories: categories,
|
||
|
|
series: series,
|
||
|
|
width: 350,
|
||
|
|
height: 350,
|
||
|
|
legend: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
// extra: {
|
||
|
|
// radar: {
|
||
|
|
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
|
||
|
|
.qiun-charts {
|
||
|
|
width: 350px;
|
||
|
|
height: 350px;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.charts {
|
||
|
|
transform: scale(1.18);
|
||
|
|
width: 100%;
|
||
|
|
height: 350px;
|
||
|
|
margin-left: 15rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|