h5頁(yè)面,echarts的datazoom滾動(dòng)、圖例點(diǎn)擊都失效(暫時(shí)發(fā)現(xiàn)這些)
1.首先下載插件,把插件中static的echarts.js放到自己的項(xiàng)目中榔袋,也可以去echarts網(wǎng)站自行下載
2.在項(xiàng)目中新建一個(gè)頁(yè)面,把插件中index頁(yè)面內(nèi)容復(fù)制粘貼铡俐,然后進(jìn)行改造
3.參數(shù)的作用
<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
<button @click="changeOption">更新數(shù)據(jù)</button>
頁(yè)面有兩部分script標(biāo)簽凰兑,兩部分需要互相傳遞數(shù)據(jù),分別編號(hào)1审丘、2吏够,下面用1、2表示
(1) @click="echarts.onClick"
2需要調(diào)用1的方法可以這樣使用滩报,常用到點(diǎn)擊圖表做一些操作
(2):prop="option" :change:prop="echarts.updateEcharts"
updateEcharts方法就是監(jiān)測(cè)option的變化锅知,:prop可以放需要監(jiān)測(cè)的內(nèi)容
(3)@click="changeOption" ????changeOption就是更新數(shù)據(jù)的作用
4. 項(xiàng)目中使用
<view class="btnClass"><button @click="changeOption">折線圖篩選</button></view>
<view class="fold-charts">
<view @click="echarts.onClick" :prop="lineOption" style="width: 380px;height: 300px;" :change:prop="echarts.updateEcharts" id="linechart" class="linechart"></view>
</view>
不需要發(fā)送請(qǐng)求,可以直接使用脓钾;
發(fā)送請(qǐng)求
(1)web運(yùn)行兩部分可以正常通信售睹,但在手機(jī)或模擬器運(yùn)行會(huì)通訊受阻,且renderjs中不能使用uni的api可训,所以在renderjs這部分發(fā)網(wǎng)絡(luò)請(qǐng)求有點(diǎn)困難嘗試用fetch發(fā)請(qǐng)求昌妹,但是在手機(jī)運(yùn)行中,json方法不生效握截,axios也不行(可能沒(méi)找對(duì)方法)所以放棄在該部分發(fā)送請(qǐng)求
(2)網(wǎng)絡(luò)請(qǐng)求放到了第一部分
因?yàn)轫?yè)面需要初始化數(shù)據(jù)飞崖,這部分就把lineOption傳入了請(qǐng)求返回的數(shù)據(jù),這里lineOption一有變動(dòng)updateEcharts就會(huì)接收到數(shù)據(jù)谨胞,就可以設(shè)置折線圖了
初始化的時(shí)候可能會(huì)存在dom沒(méi)加載完成固歪,或者js執(zhí)行順序的問(wèn)題,加上了定時(shí)器和this.$nextTick()