國慶總結:echarts自定義顏色主題,保證你看的明明白白
阿新 • • 發佈:2021-10-05
為什麼需要使用顏色主題
隨著使用者審美越來越高,不再是過去那樣只注重功能。
所以對介面的顏色樣式都具有一定的審美要求
此時顏色是否好看就非常重要了
因為人都是視覺動物
對介面的第一印象肯定都是顏色。
如果顏色好看,使用者肯定會被吸引的。
所以我們不得不去配置一下顏色
使用預設顏色主題
我們發現的問題
我們發現紅色和黑色進行搭配
真的是看著不是很舒服
好不客氣的講就是難看到爆炸
所以我們需要對顏色進行自定義。
主要是改變顏色
配置顏色的兩種方式
對於配置echarts的顏色。 有小夥伴們會立刻想到在echarts渲染的時候 配置每一個echarts的顏色 如果echarts不是很多的話,還是可以接受的 但是如果圖表很多,那麼一個一個的設定還是很麻煩的 所以我們需要對專案進行整體設定。
echarts自定義顏色主題(使用第二種方式)
echarts配置顏色主題的地址:https://echarts.apache.org/zh/theme-builder.html
這裡有很多種顏色主題。
我們可以進行選擇自己喜歡的
如果你選擇好了之後。
點選下載主題,下載好之後。在你的專案種引入就ok了
下面我看看引入後的顏色是不是比之前好看一些了。
在專案種使用顏色主題
01==>下載好主題色之後在專案引入。在echarts之後引入 <script src="./macarons.js"></script> 02==> 設定顏色主題 需要我們在初始化echats時指定主題名稱即可, 主題名(macarons)稱就是主題的檔名(macarons), var myChart = echarts.init(document.getElementById("main6"),"macarons");
詳細程式碼和圖表展示情況
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> <!-- 引入你剛剛下載的顏色主題配置檔案 --> <script src="./macarons.js"></script> </head> <body> <div id="main6" style="width: 1200px;height: 400px; background-color: #ccc;" ></div> <script> //需要我們在初始化echats時指定主題名稱即可, //主題名(macarons)稱就是主題的檔名(macarons), var myChart = echarts.init(document.getElementById("main6"),"macarons"); var option = { tooltip: { trigger: "item", }, legend: { top: "5%", left: "center", }, series: [ { type: "pie", radius: ["50%", "70%"], avoidLabelOverlap: false, label: { show: false, position: "center", }, // 餅狀圖不要中間的文字提示資訊 emphasis: { label: { show: false, //將這個設定為false }, }, labelLine: { show: false, }, data: [ { value: 12, name: "華為手機" }, { value: 11, name: "蘋果手機" }, ], }, ], }; myChart.setOption(option); </script> </body> </html>
關於顏色主題的注意點
echarts.registerTheme('macarons', {
"color": [
"#2ec7c9",
"#b6a2de",
"#5ab1ef",
"#ffb980",
"#d87a80",
"#8d98b3",
"#e5cf0d",
"#97b552",
"#95706d",
"#dc69aa",
"#07a2a4",
"#9a7fd1",
"#588dd5",
"#f5994e",
"#c05050",
"#59678c",
"#c9ab00",
"#7eb00a",
"#6f5553",
"#c14089"
],
這是我們下載echarts顏色主題的一部分程式碼
我們發現顏色主題一共有20個
換一句話說就是如果資料不止20條
那麼echarts種的顏色會重複
恭喜你回答正確。
就算你不去配置echarts的顏色主題
資料超過20條的時候顏色同樣也會重複。
如果不相信肯下面這張圖片
下面這個echarts沒有進行任何配置,但是顏色已經重複
這個圖說明了:就算你echarts沒有配置顏色,資料超過20條,顏色同樣會重複!
這個跟是否配置顏色主題沒有半毛錢的關係
所以大家不必要去糾結顏色重複這個問題了
vue專案中如何去配置顏色了
第一步:引入需要的顏色主題
import 'echarts/theme/macarons.js' //我使用的是這個顏色主題
// import 'echarts/theme/shine.js'
// import 'echarts/theme/vintage.js'
第二步:配置使用
let demo = echarts.init(document.getElementById("demo"),'macarons')
效果
可憐的哀求
如果你覺得我寫的不錯的話,請給我一個推薦或者打賞
這是我寫下去的動力
感謝各位看官,感謝
聽說推薦或者打賞的都找到女盆友或者男盆友了
不信你試一試
作者:明月人倚樓 出處:https://www.cnblogs.com/IwishIcould/
想問問題,打賞了卑微的博主,求求你備註一下的扣扣或者微信;這樣我好聯絡你;(っ•̀ω•́)っ✎⁾⁾!
如果覺得這篇文章對你有小小的幫助的話,記得在右下角點個“推薦”哦,或者關注博主,在此感謝!
萬水千山總是情,打賞5毛買辣條行不行,所以如果你心情還比較高興,也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾!
想問問題,打賞了卑微的博主,求求你備註一下的扣扣或者微信;這樣我好聯絡你;(っ•̀ω•́)っ✎⁾⁾!
支付寶 微信 本文版權歸作者所有,歡迎轉載,未經作者同意須保留此段宣告,在文章頁面明顯位置給出原文連線如果文中有什麼錯誤,歡迎指出。以免更多的人被誤導。