如题 用自己的项目写清晰度有问题，pixelRatio设置异常，但是扫码看的还行，不知道是配置的问题还是因为扫码的是之前用1.0编译的
现有代码如下
<template> <view> <view style="width: 100%; overflow: auto"> <canvas canvas-id="BZLQRRaiIfTwKrNLbnMZLCqbeOEjQvMY" id="BZLQRRaiIfTwKrNLbnMZLCqbeOEjQvMY" class="charts" style="canvasStyle" @touchend="tap" /> </view></view>
</template>
<script>
import uCharts from './components/uCharts/js_sdk/u-charts/u-charts';
var uChartsInstance = {};
export default {
data() {
return {
cWidth: 750, // canvas 样式宽度
cHeight: 500, // canvas 样式高度
pixelRatio: 1, // 设备像素比
canvasStyle: {}, // canvas 的样式
}
},
onReady() {
uni.getSystemInfo({
success: (res) => {
console.log('System Info:', res);
// 获取设备像素比
this.pixelRatio = res.pixelRatio || 1;
// 将 rpx 转换为 px
const cWidth = uni.upx2px(750); // 750rpx 转换为 px
const cHeight = uni.upx2px(500); // 500rpx 转换为 px
// 设置 canvas 的样式宽高
this.cWidth = cWidth;
this.cHeight = cHeight;
console.log('Pixel Ratio:', this.pixelRatio);
console.log('Canvas Width:', this.cWidth);
console.log('Canvas Height:', this.cHeight);
// 获取数据并绘制图表
this.getServerData();
}
});
},
methods: {
getServerData() {
// 模拟从服务器获取数据时的延时
setTimeout(() => {
// 模拟服务器返回数据
let res = {
categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
series: [
{
name: "曲面",
type: "area",
style: "curve",
data: [70, 50, 85, 130, 64, 88]
},
{
name: "柱1",
index: 1,
type: "column",
data: [40, { "value": 30, "color": "#f04864" }, 55, 110, 24, 58]
},
{
name: "柱2",
index: 1,
type: "column",
data: [50, 20, 75, 60, 34, 38]
},
{
name: "曲线",
type: "line",
style: "curve",
color: "#1890ff",
disableLegend: true,
data: [70, 50, 85, 130, 64, 88]
},
{
name: "折线",
type: "line",
color: "#2fc25b",
data: [120, 140, 105, 170, 95, 160]
},
{
name: "点",
index: 2,
type: "point",
color: "#f04864",
data: [100, 80, 125, 150, 112, 132]
}
]
};
this.drawCharts('BZLQRRaiIfTwKrNLbnMZLCqbeOEjQvMY', res);
}, 500);
},
drawCharts(id, data) {
const ctx = uni.createCanvasContext(id, this);
// 设置 canvas 的实际渲染宽高（乘以 pixelRatio）
uChartsInstance[id] = new uCharts({
type: "mix",
context: ctx,
width: this.cWidth , // 使用样式宽度
height: this.cHeight, // 使用样式高度
pixelRatio:this.pixelRatio
categories: data.categories,
series: data.series,
animation: true,
background: "#FFFFFF",
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
padding: [15, 15, 0, 15],
enableScroll: false,
legend: {},
xAxis: {
disableGrid: true,
title: "单位：年"
},
yAxis: {
disabled: false,
disableGrid: false,
splitNumber: 5,
gridType: "dash",
dashLength: 4,
gridColor: "#CCCCCC",
padding: 10,
showTitle: true,
data: [
{ position: "left", title: "折线" },
{ position: "right", min: 0, max: 200, title: "柱状图", textAlign: "left" },
{ position: "right", min: 0, max: 200, title: "点", textAlign: "left" }
]
},
extra: {
mix: {
column: {
width: 20
}
}
}
});
},
tap(e) {
uChartsInstance[e.target.id].touchLegend(e);
uChartsInstance[e.target.id].showToolTip(e);
}
}
}
</script>
<style scoped>
.charts {
width: 100vw;
height: 500rpx;
}
</style>
如果不单独设置pixelRatio，图表长宽展示没有问题，但是会模糊，但是如果获取pixelRatio如开发者工具通过uni.getSystemInfo获取为3，真机华为3.5,设置后如果不单独设置宽高，则图表内容变大，canvas大小正常图表样式崩溃，如果全设置那么整体变大后远超class宽高只能显示出部分
0 个回复