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;

}

總結

以上是生活随笔為你收集整理的小程序引入的echarts过大如何解决_解决微信小程序引用echarts视图模糊的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。