在小程(cheng)序項目(mu)中需要用到(dao)echarts圖表(biao)
但是展示的時(shi)候(hou)遇到了問題(ti) 圖(tu)表高度失真 體驗感非常差
經過一番查找實驗，終于找到了解(jie)決方(fang)案
下面上代碼！
function initChart(canvas, width, height,dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr //解決(jue)小程序視(shi)圖模糊(hu)的問題(ti)，必寫
});
canvas.setChart(chart);
var checkName = ‘今天(tian)’;
var dataLength = 14; //默認的(de)數據長度(du)(du)，既(ji)真實數組的(de)長度(du)(du)，必須(xu)設置，長度(du)(du)來源：后臺傳輸
//這里是echart基礎配置(zhi)
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, //是否顯示下方滾動(dong)條
realtime: true,
startValue: dataLength – 7,
endValue: dataLength – 1, //顯示數(shu)據結(jie)束位置
},
{
type: ‘inside’,
realtime: true,
startValue: dataLength – 7,
endValue: dataLength – 1, //顯示數據(ju)結束位置
}
],
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’, ‘今(jin)天’],
axisLine: {
lineStyle: {
color: ‘rgba(255,255,255,0.12)’
}
},
position: ‘top’,
axisLabel: {
color: function(params) {
//通過判斷(duan)選中的名字改變柱子的顏色樣式(shi)
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) {
//通過判斷選(xuan)中(zhong)的(de)名字改變柱子的(de)顏色樣式
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}分(fen)’
}
}
}]
};
chart.setOption(option);
return chart;
}
在小程序的data里面調用
這樣就解決了 解決后的效果圖
