為餅圖添加對(duì)應(yīng)顏色邊框
大家看這張圖，搭眼望去很簡(jiǎn)單，只是一個(gè)大圓套小圓，然后外側(cè)三條數(shù)據(jù)而已。 但是仔細(xì)觀察，每一條展示數(shù)據(jù)外側(cè)都有一條對(duì)應(yīng)顏色的邊框，而且還要有邊距，最要命的是這個(gè)。。。 噔噔咚！ 是的，邊框顏色是不支持回調(diào)函數(shù)的，這就意味著我們不能統(tǒng)一設(shè)置數(shù)據(jù)的顏色，去博客找了一圈都沒有這樣設(shè)置的。但是在社區(qū)卻找到一個(gè)。 這里原版代碼過于冗長(zhǎng)，不給大家展示了。...
Echarts柱狀圖間隔變色
echarts柱狀圖能直觀的看出來數(shù)據(jù)的多少，當(dāng)有多條數(shù)據(jù)的時(shí)候，我們可以為每條數(shù)據(jù)設(shè)置它的color，從而達(dá)到多條數(shù)據(jù)多個(gè)顏色的效果。 但是有這樣一個(gè)需求，不僅要求柱體是漸變色，而且還要求每隔一個(gè)都要變化一次顏色。 間隔變色可以理解成奇偶數(shù)的變化，當(dāng)可以被2整除那么就是偶數(shù)，如果不能被2整除就可以理解為奇數(shù)，判斷有無余數(shù)，返回不同的值就可以實(shí)現(xiàn)間隔變化了。 經(jīng)過...
echarts巧用箭頭函數(shù)獲取Vue實(shí)例
之前已經(jīng)講過如何利用formatter自定義提示框內(nèi)容，echarts中示例的寫法是如下圖所示的，使用es5寫法可以省略‘：’和function，這也是vue中普通函數(shù)的寫法。 以上是需要實(shí)現(xiàn)的效果，使用tooltip就能實(shí)現(xiàn)，問題是7月15號(hào)這個(gè)標(biāo)題如何能加入到提示框組件中。其他的大家可以看我的上一篇文章來實(shí)現(xiàn)。 去百度查閱資料，有一種解決辦法是在每個(gè)data中的value添加一個(gè)新...
根據(jù)時(shí)間選擇器展示echarts軸時(shí)間
今天做頁面的時(shí)候有這樣一個(gè)需求，element的時(shí)間選擇器只能選擇一星期的數(shù)據(jù)，并且根據(jù)時(shí)間選擇器選擇的時(shí)間展示echarts軸的時(shí)間。這里一般的解決的方法是把時(shí)間范圍發(fā)給后端，后端會(huì)帶著數(shù)據(jù)返回。但是，前端也可以完成時(shí)間軸的獲取。 一、時(shí)間選擇一星期 Element有一個(gè)叫picker-options的屬性，可以控制禁止選取的日期。 它綁定data中的一個(gè)對(duì)象，對(duì)象中可...
echarts簡(jiǎn)單自動(dòng)切換實(shí)現(xiàn)
自動(dòng)切換是大屏中常用的表現(xiàn)方式，會(huì)讓你的頁面表現(xiàn)得沒有那么死板，今天來教給大家一個(gè)簡(jiǎn)單的自動(dòng)切換，首先，自動(dòng)切換其實(shí)就是一個(gè)定時(shí)器，每隔幾秒鐘的時(shí)間重新調(diào)用echarts的渲染，通常的接口中可能會(huì)包含多條表格數(shù)據(jù)，這種情況為了保護(hù)內(nèi)存，就不需要多次請(qǐng)求，而有的是每次請(qǐng)求給予一條數(shù)據(jù)，這種情況需要多次請(qǐng)求，這里我們以一次請(qǐng)求多條數(shù)據(jù)為例子。首先，我們需要請(qǐng)求接口，這里很簡(jiǎn)單，可以用ajax首先 你需...
2023-09-02
Echarts清空畫布
今天做餅圖的時(shí)候發(fā)現(xiàn)了一個(gè)小bug，我們進(jìn)入頁面一般是請(qǐng)求數(shù)據(jù)，渲染圖表，有數(shù)據(jù)就顯示，沒有數(shù)據(jù)就空著，但是如果請(qǐng)求的時(shí)候有數(shù)據(jù)，但是請(qǐng)求的條件沒有數(shù)據(jù)的情況呢，看下圖，我點(diǎn)擊了今日的按鈕，請(qǐng)求了今日00:00-23:59的數(shù)據(jù)，后端返回的值夜全部都是0，但因?yàn)檫M(jìn)入頁面時(shí)請(qǐng)求的是本月，所以今日的數(shù)據(jù)并沒有被渲染。本月和本周都因?yàn)橛袛?shù)據(jù)而渲染，單單今日沒有被渲染肯定不是數(shù)據(jù)配置的問題。 于是去百度搜...
