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,初始化的時候循環設置圖表
