解决微信小程序引用echarts视图模糊的问题
程序员文章站
2022-06-28 18:34:58
在小程序项目中需要用到echarts图表 但是展示的时候遇到了问题 图表高度失真 体验感非常差 经过一番查找实验，终于找到了解决方案 下面上代码！ function initChart(canvas, width, height,dpr) { const chart = echarts.init(c ......
在小程序项目中需要用到echarts图表
但是展示的时候遇到了问题 图表高度失真 体验感非常差
经过一番查找实验，终于找到了解决方案
下面上代码！
function initchart(canvas, width, height,dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicepixelratio: dpr //解决小程序视图模糊的问题，必写
});
canvas.setchart(chart);
var checkname = '今天';
var datalength = 14; //默认的数据长度，既真实数组的长度，必须设置，长度来源：后台传输
//这里是echart基础配置
var option = {
backgroundcolor: 'rgba(25,1,169,.05)',
tooltip: {
trigger: 'axis',
axispointer: {
type: 'shadow',
backgroundcolor: 'rgba(245, 245, 245, 1)',
borderwidth: 1,
// padding: 10,
}
},
datazoom: [{
show: false, //是否显示下方滚动条
realtime: true,
startvalue: datalength - 7,
endvalue: datalength - 1, //显示数据结束位置
},
{
type: 'inside',
realtime: true,
startvalue: datalength - 7,
endvalue: datalength - 1, //显示数据结束位置
}
],
grid: {
top: '20%',
right: '0',
left: '0',
bottom: '12%'
},
xaxis: [{
type: 'category',
data: ['02.25', '02.26', '02.27', '02.28', '03.01', '03.02', '03.02', '02.25', '02.26', '02.27', '02.28', '03.01', '03.02', '今天'],
axisline: {
linestyle: {
color: 'rgba(255,255,255,0.12)'
}
},
position: 'top',
axislabel: {
color: function(params) {
//通过判断选中的名字改变柱子的颜色样式
if (checkname === params) {
return 'rgba(38,74,255,1)';
} else {
return 'rgba(38,74,255,.3)';
}
},
textstyle: {
fontsize: 14
},
padding: [10, 0]
},
}],
yaxis: [{
show: false,
axislabel: {
formatter: '{value}',
color: '#e2e9ff',
},
axisline: {
show: false
},
splitline: {
linestyle: {
color: 'rgba(255,255,255,0.12)'
}
}
}],
series: [{
type: 'bar',
data: [300, 450, 770, 203, 255, 188, 156, 300, 450, 770, 203, 255, 188, 156],
// itemstyle: {
// normal: {
// color: 'rgba(38,74,255,.3)',
// }
// },
itemstyle: {
normal: {
label: {
show: true
},
color: function(params) {
//通过判断选中的名字改变柱子的颜色样式
if (checkname === params.name) {
return 'rgba(38,74,255,1)';
} else {
return 'rgba(38,74,255,.3)';
}
}
}
},
label: {
normal: {
show: true,
position: 'top',
textstyle: {
color: '#b9c5fc',
fontsize: '12'
},
formatter: '{c}分'
}
}
}]
};
chart.setoption(option);
return chart;
}
在小程序的data里面调用
这样就解决了 解决后的效果图