小程序模板網(wǎng)

解決微信小程序引用echarts視圖模糊的問題

發(fā)布時間:2020-05-14 10:29 所屬欄目:小程序開發(fā)教程

在小程序項(xiàng)目中需要用到echarts圖表

但是展示的時候遇到了問題 圖表高度失真 體驗(yàn)感非常差

經(jīng)過一番查找實(shí)驗(yàn),終于找到了解決方案

下面上代碼!

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; //默認(rèn)的數(shù)據(jù)長度,既真實(shí)數(shù)組的長度,必須設(shè)置,長度來源:后臺傳輸

//這里是echart基礎(chǔ)配置

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, //顯示數(shù)據(jù)結(jié)束位置

},

{

type: ‘inside’,

realtime: true,

startValue: dataLength – 7,

endValue: dataLength – 1, //顯示數(shù)據(jù)結(jié)束位置

}

],

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里面調(diào)用

這樣就解決了 解決后的效果圖


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/25177.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢