echarts-數據組圖例說明-legend

數據圖例的說明一般是legend內設置：不管是柱狀還是折線還是環形

lengend同時還可以點擊選擇顯示對應此項目圖例的表項

柱狀圖圖例設置例：

option:{
         legend: {
            data: ["報修量", "閉環量"],
            textStyle: {  // 圖列內容樣式
                color: '#23ffff',  // 字體顏色
            },
            x: "80%",//圖例位置，設置right發現圖例和文字位置反了，設置一個數值就好了
            y: "80%"//延Y軸居中
        },
}

series:[
 {
            name: "報修量",
            type: "bar",
            barWidth: 10, //柱圖寬度
            barGap: "100%", //多個並排柱子設置柱子之間的間距
            data: data1Arr,
            label: seriesLabel,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 1, color: "#23FFFF" }, //柱圖漸變色
                { offset: 0, color: "#1E62FF" }, //柱圖漸變色
              ]),
            },
          },
          {
            name: "閉環量",
            type: "bar",
            barWidth: 10, //柱圖寬度
            // barCategoryGap:'10%',
            barGap: "100%", //多個並排柱子設置柱子之間的間距
            label: seriesLabel,//柱子上設置說明
            data: data2Arr,
            // data: [150, 105, 110,33],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                // { offset: 1, color: "#23FFFF" }, //柱圖漸變色
                // { offset: 0, color: "#1E62FF" }, //柱圖漸變色
                 { offset: 1, color: "#ace42d" }, //柱圖漸變色
                { offset: 0, color: "#ffdd1e" }, //柱圖漸變色
              ]),
            },
          },
]

折線圖lengend圖例：

option:{
 legend: {
                     orient: 'horizontal',
                   data: ['自卸車', '牽引車', '總量', '載貨車'],
                   textStyle:{
                       color:"#fff"
                   }
                },
     series: [
                    {
                        lineStyle:{
                            width:4
                        },
                        name: '自卸車', // 紅色線條
                        type: 'line',
                        stack: '總量',
                        // data: [12, 13, 10, 13, 9, 23, 21,21,11,8,1,3]
                        data: this.caryunyingDate[0]
                    },
                    {
                         lineStyle:{
                            width:4
                        },
                        name: '牽引車', // 黃色線條
                        type: 'line',
                        stack: '總量',
                        // data: [22, 18, 19, 23, 29, 33, 31,22,11,43,12,5]
                        data: this.caryunyingDate[1]
                    },
                    {
                         lineStyle:{
                            width:4
                        },
                        name: '總量', // 藍色線條
                        type: 'line',
                        stack: '總量',
                        data: this.caryunyingDate[2]
                        // data: [15, 23, 20, 15, 19, 33, 41,22,11,11,13,3]
                    },
                    {
                         lineStyle:{
                            width:4
                        },
                        name: '載貨車', // 綠色線條
                        type: 'line',
                        stack: '總量',
                        data: this.caryunyingDate[3]
                        // data: [32, 33, 30, 33, 39, 33, 32,3,5,12,21,2]
                    }
                ]
}

需要額外注意的事項：

legend內的data是需要顯示在圖例上的項，需要跟series內每個對象數據的name一一對應上的，否則此項圖例就不會顯示出來。

圖例可以具體進行字體顏色位置調整的，具體調整在legend內配置即可