在小程式專案中需要用到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里面呼叫
這樣就解決了 解決后的效果圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/43670.html
標籤：Html/Css
上一篇：解決 vs code 打開檔案總是只有一個tab標簽頁，新打開的tab標簽頁會替換掉舊的tab標簽頁
下一篇：【Vue】路由