echarts中常見圖表顏色自定義

1：折線圖

　　①：單條折線

　　在與series同級的地方放置color數組：

　　如圖　：　

         

 

 

 　　效果如圖

　　

 

 

 ②：多條折線：

同理在與series同級的地方放置color數組：例如

 

color: ["#7EC0EE", "#FF9F7F", "#FFD700", "#C9C9C9", "#E066FF", "#C0FF3E"],其中：當顏色不夠時，會從第一個顏色再次開始遍歷。

效果如圖：

 

 

 2：餅狀圖：顏色設置同上

效果圖：

 

 

 

 

 主要注意形態變化：

series: [
          {
            name: this.title,
            type: "pie",
            radius: "50%",
            radius: ["50%", "70%"], //環形圖
            center: ["50%", "70%"], //餅圖
            roseType: "radius",//外邊距不一的環形圖 如上圖
            data: this.data,
            color: this.color,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],

　　3：柱狀圖

 ①：單條柱狀圖；

series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        itemStyle: {
              normal: {
                color:"#FFD700",
              },
            },
    }]

　　效果如圖

 

②多條折線

  series: [
          {
            type: "bar",
            itemStyle: {
              normal: {
                color: “#2C71C1”,
              },
            },
          },
          {
            type: "bar",
            itemStyle: {
              normal: {
                color: “#36A2EB”,
              },
            },
          },
          {
            type: "bar",
            itemStyle: {
              normal: {
                color: “#4BC0C0”, 
              },
            },
          },
        ],

　　效果：

 

 暫時先寫三種較為常用的，以后有用到別的再改