<template>
<view class="bg-gray radius line-gray margin text-center padding-top-sm padding-bottom">
<view class="text-lg">
全息心理档案总体图
</view>
<!-- 折线图 -->
<view class="qiun-charts">
<view class="canvas"><canvas canvas-id="canvasLine0" id="canvasLine" class="charts"></canvas></view>
</view>
<view class="qiun-charts">
<view class="canvas"><canvas canvas-id="canvasLine1" id="canvasLine1" class="charts"></canvas></view>
</view>
<view class="qiun-charts">
<view class="canvas"><canvas canvas-id="canvasLine2" id="canvasLine2" class="charts"></canvas></view>
</view>
<view class="qiun-charts">
<view class="canvas"><canvas canvas-id="canvasLine3" id="canvasLine3" class="charts"></canvas></view>
</view>
<view class="qiun-charts">
<view class="canvas"><canvas canvas-id="canvasLine4" id="canvasLine4" class="charts"></canvas></view>
</view>
<view class="qiun-charts">
<view class="canvas"><canvas canvas-id="canvasLine4" id="canvasLine5" class="charts"></canvas></view>
</view>
<!-- 雷达图 -->
<view class="qiun-charts">
<view class="canvas"><canvas canvas-id="canvasRadar" id="canvasRadar" class="charts"></canvas></view>
</view>
</view>
</template>
<script>
import uCharts from '../../wxkj/ucharts.js';
var _self;
var canvasLine = null;
export default {
name: 'transaction',
data() {
return {
Backstage:{
id:12312321,
appUserId:21312,
data:{
// 因子得分
n:{
anxiety:[22,34,56],
},
a:{
altruism:[34,23,45],
}
},
// 因子准确度
accuracy:{
n:{
anxiety:[22,34,56],
},
a:{
altruism:[37,23,4],
}
},
createTime:123230000002
}
};
},
methods: {
toJSON(){},
// 折线图
getServerData() {
let json = {
success: true,
data:[
{
categories: ['2-23', '2-24', '2-25', '2-26'],
series: [{
data: [10, 8, 25, 37],
},
{
data: [10, 38, 15, 57],
}],
},
{
categories: ['2-29', '2-24', '2-25', '2-26'],
series: [{
data: [66, 8, 25, 37],
},
{
data: [10, 38, 15, 57],
}],
},
{
categories: ['2-29', '2-24', '2-25', '2-26'],
series: [{
data: [66, 8, 25, 37],
},
{
data: [10, 38, 15, 57],
}],
},
{
categories: ['2-29', '2-24', '2-25', '2-26'],
series: [{
data: [66, 8, 25, 37],
},
{
data: [10, 38, 15, 57],
}],
},
{
categories: ['2-29', '2-24', '2-25', '2-26'],
series: [{
data: [66, 8, 25, 37],
},
{
data: [10, 38, 15, 57],
}],
},
{
categories: ['2-29', '2-24', '2-25', '2-26'],
series: [{
data: [66, 8, 25, 37],
},
{
data: [10, 38, 15, 57],
}],
},
]
};
let Line = [{},{},{},{},{},{}];
for(let i = 0; i < json.data.length;i++){
Line[i].categories = json.data[i].categories;
Line[i].series = json.data[i].series;
_self.showLineA('canvasLine' + i, Line[i]);
}
},
// 雷达图的调用
rand(){
let json = {
data:{
categories: ['维度1', '维度2', '维度3', '维度4', '维度5', '维度6'],
series: [{
name: '成交量1',
data: [90, 110, 165, 195, 187, 172]
}, {
name: '成交量2',
data: [190, 210, 105, 35, 27, 102]
}]
}
}
let Radar = {categories:[],series:[]};
Radar.categories = json.data.categories;
Radar.series = json.data.series;
console.log(Radar.series);
_self.showRadar("canvasRadar",Radar);
},
//折线图基本配置
showLineA(canvasId,chartData) {
canvasLine = new uCharts({
$this: _self,
canvasId: canvasId,
type: 'line',
colors:['#16A085', '#BDC3C7'],//两条线的颜色
fontSize: 11,//字体大小
legend: {
show: false,//下方图例是否显示
},
dataLabel: false,//显示小数点上的数据
dataPointShape: true,
pixelRatio: _self.pixelRatio,
categories: chartData.categories,
series: chartData.series,
animation: true,
xAxis: {
disable:true,
disableGrid:true,
},
yAxis: {
gridType: 'solid',
gridColor: '#CCCCCC',
max:100,
min:0,
//return什么y轴就显示什么
format: val => {
return val.toFixed(0)
}
},
width: _self.cWidth * _self.pixelRatio,
height: _self.cHeight * _self.pixelRatio,
extra: {
line: {
type: 'straight'//折线图中的线为直线
}
}
});
},
// 雷达图基本配置
showRadar(canvasId,chartData){
canvaRadar = new uCharts({
$this:_self,
canvasId: canvasId,
type: 'radar',
fontSize:11,
legend:{show:false},
pixelRatio:_self.pixelRatio,
animation: true,
dataLabel: true,
categories: chartData.categories,
series: chartData.series,
width: _self.cWidth*_self.pixelRatio,
height: _self.cHeight*_self.pixelRatio,
extra: {
radar: {
max: 200
}
}
});
}
},
onLoad() {
_self = this;
this.cWidth = uni.upx2px(690);
this.cHeight = uni.upx2px(500);
this.pixelRatio = 1;
this.getServerData();
this.rand();
},
};
</script>
<style>
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.charts {
width: 690upx;
height: 500upx;
margin: 30rpx auto;
}
</style>
uniapp中uchart
最新推荐文章于 2024-07-30 15:44:32 发布