renderjs-echarts-demo插件使用(發送網絡請求和多個圖表)


h5頁面,echarts的datazoom滾動、圖例點擊都失效(暫時發現這些)


1.首先下載插件,把插件中static的echarts.js放到自己的項目中,也可以去echarts網站自行下載

2.在項目中新建一個頁面,把插件中index頁面內容復制粘貼,然后進行改造

3.參數的作用

<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>

<button @click="changeOption">更新數據</button>

頁面有兩部分script標簽,兩部分需要互相傳遞數據,分別編號1、2,下面用1、2表示

(1) @click="echarts.onClick"


 

2需要調用1的方法可以這樣使用,常用到點擊圖表做一些操作

(2):prop="option" :change:prop="echarts.updateEcharts"

updateEcharts方法就是監測option的變化,:prop可以放需要監測的內容

(3)@click="changeOption"     changeOption就是更新數據的作用

4. 項目中使用

<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>

不需要發送請求,可以直接使用;

發送請求

(1)web運行兩部分可以正常通信,但在手機或模擬器運行會通訊受阻,且renderjs中不能使用uni的api,所以在renderjs這部分發網絡請求有點困難嘗試用fetch發請求,但是在手機運行中,json方法不生效,axios也不行(可能沒找對方法)所以放棄在該部分發送請求

(2)網絡請求放到了第一部分


 

因為頁面需要初始化數據,這部分就把lineOption傳入了請求返回的數據,這里lineOption一有變動updateEcharts就會接收到數據,就可以設置折線圖了


 

初始化的時候可能會存在dom沒加載完成,或者js執行順序的問題,加上了定時器和this.$nextTick()


 

多個圖表展示(儀表盤)


 

跟單個圖表一樣的做法,在獲取參數的時候設置gaugeOptions,初始化的時候循環設置圖表


 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM