Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

如何让图例两行显示 #8943

Open
ChristianYU opened this issue Aug 24, 2018 · 8 comments
Open

如何让图例两行显示 #8943

ChristianYU opened this issue Aug 24, 2018 · 8 comments
Assignees
Labels

Comments

@ChristianYU
Copy link

@ChristianYU ChristianYU commented Aug 24, 2018

image
image
// 基于准备好的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);
@ChristianYU

This comment has been minimized.

Copy link
Author

@ChristianYU ChristianYU commented Aug 30, 2018

增强 是要等待更新版本嘛

@Ovilia

This comment has been minimized.

Copy link
Contributor

@Ovilia Ovilia commented Aug 30, 2018

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

@ChristianYU

This comment has been minimized.

Copy link
Author

@ChristianYU ChristianYU commented Aug 30, 2018

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

@loopnz

This comment has been minimized.

Copy link

@loopnz loopnz commented Aug 30, 2018

// 基于准备好的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改成白色背景的就可以了

@Ovilia

This comment has been minimized.

Copy link
Contributor

@Ovilia Ovilia commented Aug 30, 2018

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

@Gyyi

This comment has been minimized.

Copy link

@Gyyi Gyyi commented Aug 31, 2018

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

@Ovilia

This comment has been minimized.

Copy link
Contributor

@Ovilia Ovilia commented Aug 31, 2018

其实可以这样:

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

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

100pah added a commit that referenced this issue Jan 12, 2019
@surplus-cat

This comment has been minimized.

Copy link

@surplus-cat surplus-cat commented Mar 26, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
6 participants
You can’t perform that action at this time.