1. 程式人生 > 實用技巧 >echarts中常見圖表顏色自定義

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”, 
              },
            },
          },
        ],

  效果:

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