echarts图表(设置图例 legend 自定义换行)

539 阅读1分钟

效果:

image.png 做法:只需要在legend的data中,加入‘’ 空字符串,就能让前后的元素换行。 示例:

 that.chart04.setOption({legend: {
    show: true,
    left: "2%",
    //top: 25,
    align: "left",
    textStyle: {
      color: "#fff"
    },
   data:['1#机侧热量实测值','1#焦侧热量实测值','1#机侧温度实测值', '1#焦侧温度实测值', '', '1#机侧热量推荐值', '1#焦侧热量推荐值','','1#机侧温度预测值', '1#焦侧温度预测值']
 }});    
 
 that.chart04.setOption({ series: [{ name: '1#机侧热量实测值', type: 'line', data: y1 }, { name: '1#焦侧热量实测值', type: 'line', data: y2 }, 
            { name: '1#机侧温度实测值', type: 'line', yAxisIndex: 1, data: y3 }, { name: '1#焦侧温度实测值', type: 'line', yAxisIndex: 1, data: y4 }, 
            { name: '1#机侧热量推荐值', type: 'line', data: y5 }, { name: '1#焦侧热量推荐值', type: 'line', data: y6 },
            { name: '1#机侧温度预测值', type: 'line', yAxisIndex: 1, data: y7 }, { name: '1#焦侧温度预测值', type: 'line', yAxisIndex: 1, data: y8 }] });