關(guān)于微信小程序使用echarts/數(shù)據(jù)刷新重新渲染/圖層遮擋問(wèn)題
1、微信小程序使用echarts,首先下載echarts并導(dǎo)入小程序項(xiàng)目中,因小程序后期上線對(duì)文件大小有要求,所以建議進(jìn)行定制下載導(dǎo)入可減少文件大小占比,也可以下載以前舊版本文件比較小的應(yīng)付使用
下載echarts: https://echarts.apache.org/zh/download.html
定制下載:https://echarts.apache.org/zh/builder.html
舊版本查看: https://archive.apache.org/dist/echarts/
下載好后,在使用頁(yè)面的json文件中配置
{
"component": true,
"usingComponents": {
"ec-canvas": "../../../ec-canvas/ec-canvas"
}
}在需要使用的wxml和wxss中寫(xiě)好容器的樣式代碼
<view class="echarts1" >
<view wx:if="{{canvasIsShow}}" class="container" style="width: 100%; height: 100%;">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas>
</view>
</view>最后在js文件中引用并編寫(xiě)圖例代碼及數(shù)據(jù)即可
import * as echarts from '../../../ec-canvas/echarts'
function initChart(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // 像素
});
canvas.setChart(chart);
var option = {
barWidth: 20,
grid:{
x:40, //圖例左邊距
y:30, //圖例上邊距
x2:25, //圖例右邊距
y2:20, //圖例下邊距
},
xAxis: {
type: 'category',
data: ['1','2','3','5','6','7','8'], //x軸數(shù)據(jù)
axisLabel: {
interval: 0,
textStyle: {
show:true,
fontSize: '9',
},
},
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
show:true,
fontSize: '10',
},
},
},
series: [
//柱形圖
{
data: [10,20,30,40,50,60,70],
type: 'bar',
color: 'rgb(0, 153, 255)',
},
//線型圖
{
data: [15,25,35,45,55,65,75],
type: 'line',
color: 'rgb(255, 136, 0)',
itemStyle: {
normal: {
label: {
show: true, //開(kāi)啟顯示
position: 'top', //在上方顯示
textStyle: { //數(shù)值樣式
color: 'black',
fontSize: '9'
}
}
}
},
}
]
};
chart.setOption(option);
return chart;
}
Page({
data: {
ec: {
onInit: initChart
},
canvasIsShow: true, //圖表是否渲染
},
})2、圖例重新渲染方法
使用后,如果需要讓圖例隨數(shù)據(jù)變化而變化或者重新渲染,可直接使用
wx:if="{{ }}"來(lái)進(jìn)行條件渲染,即可做到重新刷新3、圖例圖層太高,可能會(huì)導(dǎo)致部分樣式被遮擋,如下圖情況:

給被遮擋標(biāo)簽加入position:fixed;z-index:9999后,在模擬器中顯示正常,但在真機(jī)上這個(gè)問(wèn)題依舊存在,把被遮擋的<view>改為<cover-view>就可以解決問(wèn)題,如下圖

但是在<cover-view>標(biāo)簽里,無(wú)法使用<input>或者<picker>等標(biāo)簽,那可以投機(jī)取巧靈活使用
<picker bindchange="bindCasPickerChange" value="{{casIndex1}}" range="{{casArray}}">
<cover-view class="epidemic-header">
<cover-view class="cover-input">
{{casArray[casIndex]}}
</cover-view>
</cover-view>
</picker>這樣就可以修改<cover-view>里的顯示內(nèi)容啦
到此這篇關(guān)于微信小程序使用echarts/數(shù)據(jù)刷新重新渲染/圖層遮擋問(wèn)題的文章就介紹到這了,更多相關(guān)微信小程序echarts內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS基于遞歸實(shí)現(xiàn)網(wǎng)頁(yè)版計(jì)算器的方法分析
這篇文章主要介紹了JS基于遞歸實(shí)現(xiàn)網(wǎng)頁(yè)版計(jì)算器的方法,結(jié)合實(shí)例形式分析了javascript采用遞歸算法實(shí)現(xiàn)網(wǎng)頁(yè)版計(jì)算器的步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
JS實(shí)現(xiàn)數(shù)組扁平化的方法分享
數(shù)組扁平化指的是:將一個(gè)多層嵌套的數(shù)組,處理成只有一層的數(shù)組。本文主要和大家介紹了幾個(gè)常用的JS數(shù)組扁平化方法,希望對(duì)大家有所幫助2023-04-04
url傳遞的參數(shù)值中包含&時(shí),url自動(dòng)截?cái)鄦?wèn)題的解決方法
下面小編就為大家?guī)?lái)一篇url傳遞的參數(shù)值中包含&時(shí),url自動(dòng)截?cái)鄦?wèn)題的解決方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
微信小程序?qū)Ш綑诨瑒?dòng)定位功能示例(實(shí)現(xiàn)CSS3的positionsticky效果)
這篇文章主要介紹了微信小程序?qū)Ш綑诨瑒?dòng)定位功能,可實(shí)現(xiàn)CSS3的positionsticky效果,涉及微信小程序事件監(jiān)聽(tīng)、狀態(tài)判斷及屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
JavaScript調(diào)試技巧之console.log()詳解
對(duì)于JavaScript程序的調(diào)試,相比于alert(),使用console.log()是一種更好的方式,原因在于:alert()函數(shù)會(huì)阻斷JavaScript程序的執(zhí)行,從而造成副作用;而console.log()僅在控制臺(tái)中打印相關(guān)信息,因此不會(huì)造成類(lèi)似的顧慮2014-03-03
javascript伸縮型菜單實(shí)現(xiàn)代碼
這是一款真正的JavaScript伸展收縮型菜單,鼠標(biāo)放上看一看,是不是很酷?鼠標(biāo)劃出菜單項(xiàng)的時(shí)候,背景會(huì)伸長(zhǎng)。菜單沒(méi)有加鏈接,想用的自己加,再美化一下,絕對(duì)夠個(gè)性吧。2015-11-11
mui 打開(kāi)新窗口的方式總結(jié)及注意事項(xiàng)
這篇文章主要介紹了mui 打開(kāi)新窗口的方式總結(jié)及注意事項(xiàng),需要的朋友可以參考下2017-08-08
js實(shí)現(xiàn)繼承的方法及優(yōu)缺點(diǎn)總結(jié)
這篇文章主要給大家介紹了關(guān)于js實(shí)現(xiàn)繼承的方法及優(yōu)缺點(diǎn)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
JavaScript中innerHTML使用方法實(shí)例
js中常常用到innerHTML,其作用就是獲取到標(biāo)簽里面的內(nèi)容,同時(shí)也可以為標(biāo)簽添加內(nèi)容,下面這篇文章主要給大家介紹了關(guān)于JavaScript中innerHTML使用方法的相關(guān)資料,需要的朋友可以參考下2022-10-10

