echarts 如何让图例两行显示

gdx19jrr  于 2022-11-03  发布在  Echarts
关注(0)|答案(8)|浏览(448)

// 基于准备好的dom,初始化echarts示例
var myChart=echarts.init(document.getElementById("main"));

var option={
		//全局背景色
		backgroundColor:'#fff', 
		//标题
		title:{
			text:'盈利能力分析',
			left:42,
		},

		//图例
		legend:{
			orient: 'horizontal', 
			x:'left',
			y:'bottom',
			left:50,
			borderWidth:0,
			itemGap:0,
			padding: [
		    0,  // 上
		    0, // 右
		    0,  // 下
		    0, // 左
			],
			data:['EBIT(万元)','营业收入(万元)','销售期间费用率(%)','管理费用率(%)','销售费用率(%)','财务费用率(%)']
		},
		//x轴
		xAxis:{
			//控制X轴线是否显示
			axisLine:{
				show:false
			},
			//是否显示y轴刻度
			axisTick:{
      show:false
  	},
  	axisLabel: {
        textStyle: {
          color:'#868798',
          fontSize:15,
        }
   },
			data:["2010","2011","2012","2013","2014","2015","2016","2017"]
		},

		//y轴
		 yAxis: [
        {
            min: 0,
            max: 60,
            interval:10,
            axisLabel: {
                formatter:'{value} 万',
                color:'#AFB5C0'
            },
            //控制y轴线是否显示
						axisLine:{
							show:false
						},
						//是否显示y轴刻度
						axisTick:{
            show:false
        	},
        },{
            min: -10,
            max:30,
            interval: 5,
            axisLabel: {
              textStyle:{
              	color:'#AFB5C0'
              } 
            },
            //控制y轴线是否显示
						axisLine:{
							show:false
						},
						//控制是否显示Y轴分割线
						 splitLine:{
            show:false
        	},
        	//是否显示y轴刻度
						axisTick:{
            show:false
        	},
        },
	],
		series:[{
				name:'EBIT(万元)',
				type:'bar',
				color:'#4D7EFA',
				barWidth:20,//柱图宽度
				data:[7,10,11,16,11,18,10,11]
		},{
			name:'营业收入(万元)',
			type:'bar',
			color:'#5D6BE5',
			barWidth:20,//柱图宽度
			data:[15,20,28,33,40,46,52,60]
		},{
			name:'销售期间费用率(%)',
			type:'line',
			color:'#C76BF0',
			smooth: true,
			data:[42,38,36,35,44,42,38,35]
		},{
			name:'管理费用率(%)',
			type:'line',
			color:'#4D7DFB',
			smooth: true,
			data:[23,33,25,37,32,25,32,28]
		},{
			name:'销售费用率(%)',
			type:'line',
			color:'#FA7D7E',
			smooth: true,
			data:[31,24,23,24,28,32,25,22]
		},{
			name:'财务费用率(%)',       
			type:'line',
			color:'#F9804C',
			smooth: true,
			data:[6,15,10,16,14,12,15,8]
		}]
	};
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
yvt65v4c

yvt65v4c1#

增强 是要等待更新版本嘛

ev7lccsx

ev7lccsx2#

目前没有计划支持,暂时先打个 tag 标记下

c9qzyr3d

c9qzyr3d3#

希望能在下个版本支持这个

nhaq1z21

nhaq1z214#

// 基于准备好的dom,初始化echarts示例
var myChart=echarts.init(document.getElementById("main"));

var option={
	//全局背景色
	backgroundColor:'#fff', 
	//标题
	title:{
		text:'盈利能力分析',
		left:42,
	},
	grid:{
		bottom:100
	},
	//图例
	legend:{
		orient: 'vertical', 
		 align: 'left',
            textStyle: {
                color: '#666666',
                fontSize: 12
            },
			bottom:0,
		left:50,
		borderWidth:0,
		itemGap:20,
		width:800,
		height:50,
		padding: [
	    0,  // 上
	    0, // 右
	    0,  // 下
	    0, // 左
		],
		formatter:function(name){
				return name;
		},
		data:['EBIT(万元)','营业收入(万元)','销售期间费用率(%)','管理费用率(%)',{
			name:'a',
			icon:'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z',
			textStyle:{
				color:'#fff'
			}
		},'销售费用率(%)',{
			name:'b',
			icon:'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z',
			textStyle:{
				color:'#fff'
			}
		},'财务费用率(%)']
	},
	//x轴
	xAxis:{
		//控制X轴线是否显示
		axisLine:{
			show:false
		},
		//是否显示y轴刻度
		axisTick:{
  show:false
},
axisLabel: {
    textStyle: {
      color:'#868798',
      fontSize:15,
    }

},
data:["2010","2011","2012","2013","2014","2015","2016","2017"]
},

//y轴
	 yAxis: [
    {
        min: 0,
        max: 60,
        interval:10,
        axisLabel: {
            formatter:'{value} 万',
            color:'#AFB5C0'
        },
        //控制y轴线是否显示
					axisLine:{
						show:false
					},
					//是否显示y轴刻度
					axisTick:{
        show:false
    	},
    },{
        min: -10,
        max:30,
        interval: 5,
        axisLabel: {
          textStyle:{
          	color:'#AFB5C0'
          } 
        },
        //控制y轴线是否显示
					axisLine:{
						show:false
					},
					//控制是否显示Y轴分割线
					 splitLine:{
        show:false
    	},
    	//是否显示y轴刻度
					axisTick:{
        show:false
    	},
    },
],
	series:[{
			name:'EBIT(万元)',
			type:'bar',
			color:'#4D7EFA',
			barWidth:20,//柱图宽度
			data:[7,10,11,16,11,18,10,11]
	},{
		name:'营业收入(万元)',
		type:'bar',
		color:'#5D6BE5',
		barWidth:20,//柱图宽度
		data:[15,20,28,33,40,46,52,60]
	},{
		name:'销售期间费用率(%)',
		type:'line',
		color:'#C76BF0',
		smooth: true,
		data:[42,38,36,35,44,42,38,35]
	},{
		name:'管理费用率(%)',
		type:'line',
		color:'#4D7DFB',
		smooth: true,
		data:[23,33,25,37,32,25,32,28]
	},
	{
		name:'a',
		type:'pie',
		data:[]
	},
	{
		name:'销售费用率(%)',
		type:'line',
		color:'#FA7D7E',
		smooth: true,
		data:[31,24,23,24,28,32,25,22]
	},{
		name:'b',
		type:'pie',
		data:[]
	},
	{
		name:'财务费用率(%)',       
		type:'line',
		color:'#F9804C',
		smooth: true,
		data:[6,15,10,16,14,12,15,8]
	}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

给你想了个hack的办法,你自己把data里面的icon改成白色背景的就可以了

5fjcxozz

5fjcxozz5#

@ChristianYU 欢迎研究源代码给提 PR 呀~

x3naxklr

x3naxklr6#

近期也遇到这问题
原因存在双Y轴,需求希望将两个Y轴对应的图例分开显示,以便区分数据
官方是否可以考虑让图表支持多个legend?

w3nuxt5m

w3nuxt5m7#

其实可以这样:

legend: [{
        x: 'center',
        top: 30,
        data: ['20', '50', '80']
    }, {
        top: 50,
        data: ['100', '150']
    }],

http://gallery.echartsjs.com/editor.html?c=xSy3SVOIPQ&v=2

b1payxdu

b1payxdu8#

之前看到过一种写法是 legend: [ data: ['20', '50', '80', '\n', '100', '150'] ]

相关问题