關於echarts的重新載入與渲染

2021-09-29 15:51:47 字數 2510 閱讀 1805

!!!踩了多少的坑我的天吶!!!!echarts催人命!!!!!

坑坑1:

根據返回資料載入不同的echarts元件

import react from 'react';

import from 'mobx-react';

import intl from 'react-intl-universal';

import echarts from 'echarts/lib/echarts';

import from '../../../components/antd/index';

import monthgrowthtrend from './monthgrowthtrend';

import earlywarnranking from './earlywarnranking';

import distributionlog from './distributionlog';

// 引入柱狀圖

import 'echarts/lib/chart/bar';

// 引入提示框和標題元件

import 'echarts/lib/component/tooltip';

import 'echarts/lib/component/title';

@observer

class monitordataflowcontainer extends react.component

}@observer

class monthgrowthtrendcomponent extends react.component

};@observer

class earlywarnrankingcomponent extends react.component

};@observer

class distributionlogcomponent extends react.component

};@observer

export default class dataflowmonitor extends react.component

let showcardslist = this.props.store.showcardslist;

var com1 = null

var com2 = null

var com3 = null

var com4 = null

//倒霉需求,還得排序!!!!!

if (showcardslist.length)

資料更新於

//按順序載入元件 傳入store

已展示資訊

可新增資訊

)}

}

坑坑2:按順序載入含有echarts的元件實現了,還要實現定時請求資料重新渲染!

echarts是個月球,踩不完的坑。。。

要知道echarts是根據id找到的容器,再繪製圖表的。而乙個頁面中只允許有乙個id。

找不到id容器的話,是不會繪製圖表的。

所以要先在元件載入完成之後渲染echarts

componentdidmount();
然後在函式中要判斷是否已經有了這個id,是否還需要再次例項化!

renderchart()

$(window).resize(mychart.resize);

// 繪製圖表

if(this.props.store.dataflowxlist.length)

},grid: ,

xaxis:

},},

yaxis:

},series: [

,opacity:'0.9'

},},}]

},true);}}

再設定時器請求資料

componentdidmount(),60000)

}componentwillunmount();

坑坑3:還要能放大縮小echarts圖表呢~~~~

我喜歡全屏。

constructor(props)}
fullscreen() else 

this.setstate()

};requestfullscreen() else if (dom.mozrequestfullscreen) else if (dom.webkitrequestfullscreen)

};exitfullscreen() else if (dom.mozcancelfullscreen) else if (dom.webkitcancelfullscreen)

};watchfullscreen());

},false

);};

齊活兒!頭疼

載入dict vim的重新載入與自動補全

重磅乾貨,第一時間送達 圖 pexels 日期 2021.1.6 重新載入當前檔案 e e 放棄當前修改,強制重新載入 重新載入所有開啟的檔案 bufdo e 或者 bufdo e bufdo命令表示把後面的命令應用到所有buffer中的檔案。在insert模式下,vim在不借助任何外掛程式的情況下...

JavaScript重新載入與重新整理

1 window.location.href url 當前頁面開啟url頁面,改變url位址,如果url為空則重新開啟當前頁面。1 與self.location.href url self.location.href url 相同 2 this.location.href url 當前頁面開啟url...

關於echarts的dataZoom組裝

兩邊未選中的滑動條區域的顏色 showdatashadow false 是否顯示資料陰影 預設auto showdetail false 即拖拽時候是否顯示詳細數值資訊 預設true handleicon m 292,322.2c 3.2,0 6.4 0.6 9.3 1.9c 2.9 1.2 5.4...