Echarts 顏色管理

1.Echarts的顏色設計

• Echarts的顏色的設置分為兩種：色盤和具體顏色
• 色盤適合做全局設置，因為他里面有多個顏色，通俗的說色盤就是顏色預設值列表，色盤統一使用color屬性進行配置。
• 而具體元素或者具體系列只有一個顏色時，可以單獨為其進行設置，他的值為單個顏色值，但是具體元素和具體系列的類別不一樣，沒有統一的配置項名稱，需要用時按文檔進行配置。
• 當某個系列需要多種顏色支持時，請使用色盤。當某個系列或者元素只有一個顏色時，且不項使用默認的顏色時，這時候可以進行具體的配置

2.色盤的介紹

色盤就是一個數組，每個元素是一個顏色值，每個系列的數據按照先后順序從色盤數組中依次取色，例如：
不同版本默認的色盤可能不一致，這是V4的默認效果：

3.設置全局色盤

option下面的color節點用來設置全局色盤的顏色,每個系列根據先后順序從色盤取色，全局色盤適用於折線圖，直方圖這種圖表，因為他們每個系列只有一種顏色。

option: {
   color:["#ff0000","#00ff00","#0000ff"],//紅綠藍
｝

4.設置系列的色盤

有時候只希望設置的色盤只在某個系列里面生效，可以將color屬性寫入到相應的系列里面
色盤是多顏色預設列表，如果設置在某個系列里面，需要這個系列支持多顏色，例如餅圖，餅圖一個系列需要多種顏色支持。而折線圖，直方圖這種圖表本身只有一個顏色，所以為其設置系列色盤時只有第一個顏色才有效，所以這種圖表不推薦設置色盤。
方法：在serise的元素中配置color屬性

option3: {
     series: [
          {
               color: ["#ff0000", "#00ff00", "#0000ff"],//紅綠藍
               name: '訪問來源',
               type: 'pie',    // 設置圖表類型為餅圖
               radius: '55%',  // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
               data: [          // 數據數組，name 為數據項名稱，value 為數據項值
                   { value: 235, name: '視頻廣告' },
                   { value: 274, name: '聯盟廣告' },
                   { value: 310, name: '郵件營銷' },
              ]
         }
    ]
}

注意：系列色盤的優先級高於全局色盤

4.設置具體系列或元素的顏色 itemStyle

為某個系列設置單個顏色時，可以使用itemStyle.color為其配置顏色，他的好處在於只在當前系列生效，不影響全局顏色分配

series: [
    { type: 'bar', name: "1", data: [20, 15, 10, 75, 85, 20] ,itemStyle:{color:'#ff0000'}},
    { type: 'bar', name: "2", data: [15, 25, 20, 85, 45, 50] ,itemStyle:{color:'#00ff00'}},
    { type: 'bar', name: "3", data: [10, 35, 40, 45, 25, 30] ,itemStyle:{color:'#0000ff'}},
]

series: [
    { type: 'line', name: "1", data: [20, 15, 10, 75, 85, 20] ,itemStyle:{color:'#ff0000'}},
    { type: 'line', name: "2", data: [15, 25, 20, 85, 45, 50] ,itemStyle:{color:'#00ff00'}},
    { type: 'line', name: "3", data: [10, 35, 40, 45, 25, 30] ,itemStyle:{color:'#0000ff'}},
]

itemStyle中的color屬性值可以是一個函數，data中每個數據渲染時都會執行一遍，通過參數可以返回不同的顏色值，從而讓每個數據代表的元素擁有不同的顏色

itemStyle:{
       color:function(e){
           //e.dataIndex
           var colorArr = ['red','yellow','green']
           return colorArr[e.dataIndex]
      }
}

5.漸變色生成函數

前面使用的顏色都是單一的顏色值，Echarts還支持漸變色，漸變色設置有2中方法：

• (1)配置法：將color屬性的值設置為對象，通過相應的配置來生成漸變色
• (2)api調用法：通過調用相應的api，傳入配置項來返回想要的漸變色。

漸變有兩個因素：顏色和角度。
在Echarts中，角度由四個坐標決定，即: (x2 - x)會有一個橫向的向量距離，(y2 - y)會有一個縱向的向量距離,這兩個向量連接起來的角度就是漸變的角度

下面兩種效果是一致的

series: [{
    type: 'bar',
    name: "1",
    data: [20, 15, 10, 75, 85, 20],
    itemStyle: {
        color: {
            type: 'linear',//漸變類型 線性漸變
            x: 0,y: 0,x2: 0,y2: 1,
            //四個坐標決定漸變的角度
            colorStops: [{
                offset: 0,
                color: '#ff0000' // 0% 處的顏色
            },
            {
                offset: 1,
                color: '#00ff00' // 100% 處的顏色
            }],
            globalCoord: false // false表示四個坐標值使用比例 true則表示四個坐標值是絕對的像素位置
        }
    }
},
{
    type: 'bar',
    name: "1",
    data: [20, 15, 10, 75, 85, 20],
    itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, //四個坐標決定漸變的角度    
        [{
            offset: 0,
            color: '#ff0000' ,// 0% 處的顏色
        },
        {
            offset: 1,
            color: '#00ff00',// 100% 處的顏色
        },
        ])
    }
},
]

將四個坐標設置成下面

x: 0,y: 0,x2: 1,y2: 1,