renderjs-echarts-demo插件使用(發(fā)送網(wǎng)絡(luò)請(qǐng)求和多個(gè)圖表)

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

多個(gè)圖表展示(儀表盤)

跟單個(gè)圖表一樣的做法胯努,在獲取參數(shù)的時(shí)候設(shè)置gaugeOptions牢裳,初始化的時(shí)候循環(huán)設(shè)置圖表

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市叶沛,隨后出現(xiàn)的幾起案子蒲讯,更是在濱河造成了極大的恐慌,老刑警劉巖恬汁,帶你破解...
    沈念sama閱讀 217,542評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件伶椿,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡氓侧,警方通過(guò)查閱死者的電腦和手機(jī)脊另,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)约巷,“玉大人偎痛,你說(shuō)我怎么就攤上這事《览桑” “怎么了踩麦?”我有些...
    開(kāi)封第一講書人閱讀 163,912評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)氓癌。 經(jīng)常有香客問(wèn)我谓谦,道長(zhǎng),這世上最難降的妖魔是什么贪婉? 我笑而不...
    開(kāi)封第一講書人閱讀 58,449評(píng)論 1 293
  • 正文 為了忘掉前任反粥,我火速辦了婚禮,結(jié)果婚禮上疲迂,老公的妹妹穿的比我還像新娘才顿。我一直安慰自己,他們只是感情好尤蒿,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,500評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布郑气。 她就那樣靜靜地躺著,像睡著了一般腰池。 火紅的嫁衣襯著肌膚如雪尾组。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書人閱讀 51,370評(píng)論 1 302
  • 那天巩螃,我揣著相機(jī)與錄音演怎,去河邊找鬼。 笑死避乏,一個(gè)胖子當(dāng)著我的面吹牛爷耀,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播拍皮,決...
    沈念sama閱讀 40,193評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼歹叮,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了铆帽?” 一聲冷哼從身側(cè)響起咆耿,我...
    開(kāi)封第一講書人閱讀 39,074評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎爹橱,沒(méi)想到半個(gè)月后萨螺,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,505評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,722評(píng)論 3 335
  • 正文 我和宋清朗相戀三年慰技,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了椭盏。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,841評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡吻商,死狀恐怖掏颊,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情艾帐,我是刑警寧澤乌叶,帶...
    沈念sama閱讀 35,569評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站柒爸,受9級(jí)特大地震影響准浴,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜捎稚,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,168評(píng)論 3 328
  • 文/蒙蒙 一兄裂、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧阳藻,春花似錦晰奖、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,783評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至蛔外,卻和暖如春蛆楞,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背夹厌。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 32,918評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工豹爹, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人矛纹。 一個(gè)月前我還...
    沈念sama閱讀 47,962評(píng)論 2 370
  • 正文 我出身青樓臂聋,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親或南。 傳聞我的和親對(duì)象是個(gè)殘疾皇子孩等,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,781評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 前端常見(jiàn)的一些問(wèn)題 1.前端性能優(yōu)化手段? 1. 盡可能使用雪碧圖2. 使用字體圖標(biāo)代替圖片3. 對(duì)HTML采够,cs...
    十八人言閱讀 1,127評(píng)論 0 1
  • 這篇文章談及到的問(wèn)題: 關(guān)于ECharts圖表的實(shí)例化方式和Highcharts圖表的實(shí)例化方法有些類似肄方,都是通過(guò)...
    LiLi原上草閱讀 1,107評(píng)論 0 3
  • 場(chǎng)景 兩個(gè)按鈕,點(diǎn)擊按鈕A蹬癌,彈出彈窗权她,在彈窗的彈出回調(diào)中根據(jù)按鈕功能請(qǐng)求數(shù)據(jù)虹茶,然后獲取彈窗中的echarts容器,...
    月半小夜曲_閱讀 2,386評(píng)論 1 1
  • 1. 什么是echarts https://echarts.baidu.com/官網(wǎng) ECharts簡(jiǎn)單來(lái)說(shuō)是互...
    Java_桃夭閱讀 13,978評(píng)論 0 2
  • 日常學(xué)習(xí)知識(shí)點(diǎn)總結(jié)(JS篇) 1隅要、閉包: 閉包就是函數(shù)中的函數(shù)写烤,里面的函數(shù)可以訪問(wèn)外面函數(shù)的變量,外面的變量是內(nèi)部...
    依稀_Sting閱讀 2,070評(píng)論 0 1