ECharts line 如何设置,使得折线图只显示部分

bohe2005 发布于 2015/12/24 14:04
阅读 3K+
收藏 0

@Kener-林峰 你好,想跟你请教个问题:这两天刚开始使用ECharts(版本2.2.7)想实现类似下图效果的时候,遇到难题,即如何传值,使得折线图只显示部分。

折线显示全部的代码为

var option = {
	tooltip : {
		trigger: 'axis'
	},
	toolbox: {
		show : true,
		feature : {
			mark : {show: true},
			dataView : {show: true, readOnly: false},
			magicType: {show: true, type: ['line', 'bar']},
			restore : {show: true},
			saveAsImage : {show: true}
		}
	},
	calculable : false,
	legend: {
		data : [ '指标值', '预测极限', '基线期行业平均水平' ]
	},
	xAxis : [{
		type : 'category',
		data : [ '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005' ]
	}],
	 yAxis : [{
		type : 'value'
	}],
	series : [{
		name : '指标值',
		type : 'bar',
		data : [ 0.39, 0.35, 0.31, 0.29, 0.29, 0.19, 0.18, 0.41, 0.24, 0.38 ]
	},
	{
		name : '预测极限',
		type : 'line',
		data : [ 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34, 0.34 ]
	},
	{
		name : '基线期行业平均水平',
		type : 'line',
		data : [ 0.241, 0.241, 0.241, 0.241, 0.241, 0.241, 0.241, 0.241, 0.241, 0.241 ]
	}]
};

根据http://www.oschina.net/question/2243470_172820,进行修改,将y轴数值类型改为category,将“Prediction Limit(0.340)”的部分数据替换成“-”,反而出不来了,代码如图

var option = {
	tooltip : {
		trigger: 'axis'
	},
	toolbox: {
		show : true,
		feature : {
			mark : {show: true},
			dataView : {show: true, readOnly: false},
			magicType: {show: true, type: ['line', 'bar']},
			restore : {show: true},
			saveAsImage : {show: true}
		}
	},
	calculable : false,
	legend: {
		data : [ '指标值', '预测极限', '基线期行业平均水平' ]
	},
	xAxis : [{
		type : 'category',
		data : [ '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005' ]
	}],
	yAxis : [{
		type : 'category'
	}],
	series : [{
		name : '指标值',
		type : 'bar',
		data : [ '0.39', '0.35', '0.31', '0.29', '0.29', '0.19', '0.18', '0.41', '0.24', '0.38' ]
	},
	{
		name : '预测极限',
		type : 'line',
		data : [ '-', '-', '0.34', '0.34', '0.34', '0.34', '0.34', '0.34', '0.34', '0.34' ]
	},
	{
		name : '基线期行业平均水平',
		type : 'line',
		data : [ '0.241', '0.241', '0.241', '0.241', '0.241', '0.241', '0.241', '0.241', '0.241', '0.241' ]
	}]
};


补充:上述代码数据是写死的,后期要做成动态的,所以折线图的显示最好只跟传入的数据有关联,不用做过多修改。谢谢。



加载中
0
bohe2005
bohe2005

刚查找ECharts官网实例的时候,看到一个例子http://echarts.baidu.com/doc/example/line.html,里面的y轴的type为value,“直接访问”的数据,部分为‘-’,其他都是数字。按这样修改,可以实现功能。

总结:刚开始以为type为category,数值就必须要加上引号。如果type为value,数值部分不能包含'-',实际是没有必然关系的。

返回顶部
顶部