数据图例的说明一般是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内配置即可