解决微信小程序引用echarts视图模糊的问题

在小程序项目中需要用到echarts图表

但是展示的时候遇到了问题 图表高度失真 体验感非常差

经过一番查找实验，终于找到了解决方案

下面上代码！

functioninitchart(canvas,width,height,dpr){ constchart=echarts.init(canvas,null,{ width:width, height:height, devicepixelratio:dpr//解决小程序视图模糊的问题，必写 }); canvas.tchart(chart); varcheckname=‘今天’; vardatalength=14;//默认的数据长度，既真实数组的长度，必须设置，长度来源：后台传输 //这里是echart基础配置 varoption={ backgroundcolor:‘rgba(25,1,169,.05)’, tooltip:{ trigger:‘axis’, axispointer:{ type:‘shadow’, backgroundcolor:‘rgba(245,245,245,1)’, 计算机基础知识试题borderwidth:1, //padding:10, } }, datazoom:[{ show:fal,//是否显示下方滚动条 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:fun入党的原因ction(params){ //通过判断选中的名字改变柱子的颜色样式 if(checkname===params){ return‘rgba(38,74,2微信群的名字55,1)’; }el{ return‘rgba(38,74,255,.3)’; } }, textstyle:{ fontsize:14 }, padding:[10,0]

},

}], yaxis:[{ show:fal, axislabel:{ formatter:‘{value}’, color:‘#e2e9ff’, }, axisline:{ show:fal }, splitline:{ linestyle:{ color:‘rgba(255,255,255,0.12)’ } } }], 小学数学教师ries:[{ 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)’; }el{ return‘rgba(38,74,255,.3)’; } } }

}, label:{ normal:{ show:true, position:‘top’, textstyle:{ color:‘#b9c5fc’, fontsize:’12’ }, formatter:‘{c}分’ } } }] }; chart.toption(option); returnchart; } 在小程序的data里面调用

这样就解决了 解决后的效果图