uniapp开发h5,pc端适配uchars
ucharts引入和注册就不废话了,进入正题。
首先,根据需要设置宽高
getSysInfo(){
uni.getSystemInfo({
success: (res)=> {
//_self即this,具体用的时候自己设定
//利用uni.upx2px将宽高转换为px,uni中一般用rpx或upx做单位,在此保留其特性,注意:宽为750时默认为100%
_self.cWidth = uni.upx2px(res.windowWidth*1.7);
_self.cHeight = uni.upx2px(res.windowHeight*1.7);
}
});
},
对应的图表的宽高也要设置为相同值,避免出现变形
<view class="center" v-else-if="status=='end2'">
<view class="qiun-charts" :style="{height:cHeight+'px',width:cWidth+'px'}">
<canvas canvas-id="canvasColumn" id="canvasColumn" :style="{height:cHeight+'px',width:cWidth+'px'}" class="charts" @touchstart="touchColumn"></canvas>
</view>
</view>
<style>
.qiun-charts {
padding-bottom: 20px;
}
.charts {
padding-bottom: 20px;
background-color: transparent;
}
</style>
pc端用px即可,用rpx再乘以2效果一样
然后添加数据即可
附完整代码
<template>
<view>
<view class="center">
<view class="qiun-charts" :style="{height:cHeight+'px',width:cWidth+'px'}">
<canvas canvas-id="canvasColumn" id="canvasColumn" :style="{height:cHeight+'px',width:cWidth+'px'}" class="charts"
@touchstart="touchColumn"></canvas>
</view>
</view>
</view>
</template>
<script>
import uCharts from '@/component/u-charts/u-charts.js';
var _self;
var canvaColumn = null;
var canvaLineA = null;
export default {
data() {
return {
cWidth: '',
cHeight: '',
pixelRatio: 1,
serverData: '',
chartData: {
"categories": ["2012", "2013", "2014", "2015", "2016", "2017"],
"series": [{
"name": "成交量1",
"data": [15, {
"value": 20,
"color": "#f04864"
}, 45, 37, 43, 34]
}, {
"name": "成交量2",
"data": [30, {
"value": 40,
"color": "#facc14"
}, 25, 14, 34, 18]
}]
}
}
},
onLoad() {
_self = this;
this.getSysInfo()
this.getServerData();
},
methods: {
getSysInfo() {
uni.getSystemInfo({
success: (res) => {
//_self即this,具体用的时候自己设定
//利用uni.upx2px将宽高转换为px,uni中一般用rpx或upx做单位,在此保留其特性
_self.cWidth = uni.upx2px(res.windowWidth * 1.7);
_self.cHeight = uni.upx2px(res.windowHeight * 1.7);
}
});
},
getServerData() {
console.log(_self === this)
// _self.serverData=this.chartData;
let Column = {
categories: [],
series: []
};
//这里我后台返回的是数组,所以用等于,如果您后台返回的是单条数据,需要push进去
Column.categories = this.chartData.categories;
Column.series = this.chartData.series;
this.showColumn("canvasColumn", Column);
},
showColumn(canvasId, chartData) {
canvaColumn = new uCharts({
$this: _self,
canvasId: canvasId,
type: 'column',
legend: {
show: true,
position: 'top',
float: 'right',
},
fontSize: 11,
background: '#FFFFFF',
pixelRatio: _self.pixelRatio,
animation: true,
categories: chartData.categories,
series: chartData.series,
xAxis: {
disableGrid: true,
},
yAxis: {
// gridType:'dash',
// gridColor:'#CCCCCC',
dashLength: 10,
splitNumber: 5,
min: 0,
max: 50,
format: (val) => {
return val.toFixed(0) + '万元'
}
// disabled:true
},
dataLabel: true,
width: _self.cWidth * _self.pixelRatio,
height: _self.cHeight * _self.pixelRatio,
extra: {
column: {
type: 'group',
width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length
}
}
});
},
//pc端无效果
touchColumn(e) {
canvaColumn.showToolTip(e, {
format: function(item, category) {
if (typeof item.data === 'object') {
return category + ' ' + item.name + ':' + item.data.value
} else {
return category + ' ' + item.name + ':' + item.data
}
},
});
},
},
}
</script>
<style>
.center {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: flex-end;
}
.qiun-charts {
padding-bottom: 20px;
}
.charts {
padding-bottom: 20px;
background-color: transparent;
}
</style>