echarts中常見圖表顏色自定義
阿新 • • 發佈:2020-07-30
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”, }, }, }, ],
效果:
暫時先寫三種較為常用的,以後有用到別的再改