國慶總結:echarts自定義顏色主題,保證你看的明明白白

南風晚來晚相識發表於2021-10-05
Echarts

為什麼需要使用顏色主題

隨著使用者審美越來越高，不再是過去那樣只注重功能。
所以對介面的顏色樣式都具有一定的審美要求
此時顏色是否好看就非常重要了
因為人都是視覺動物
對介面的第一印象肯定都是顏色。
如果顏色好看，使用者肯定會被吸引的。
所以我們不得不去配置一下顏色

使用預設顏色主題

我們發現的問題

我們發現紅色和黑色進行搭配
真的是看著不是很舒服
好不客氣的講就是難看到爆炸
所以我們需要對顏色進行自定義。
主要是改變顏色

配置顏色的兩種方式

對於配置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')

效果

可憐的哀求

如果你覺得我寫的不錯的話，請給我一個推薦或者打賞
這是我寫下去的動力
感謝各位看官，感謝
聽說推薦或者打賞的都找到女盆友或者男盆友了
不信你試一試

相關文章