ECharts 应用-最小最大值、XY 轴交换(横向柱状图)、详细 X 轴、边界缺口

作者:vkvi 来源:ITPOW(原创) 日期:2020-12-5

Y 轴最小值、最大值,最小刻度、最大刻度

ECharts 会根据值,自动调整 Y 轴最小值、最大值,最小刻度、最大刻度,但我们也可以自己指定。

yAxis: {
	type: 'value',
	minInterval: 1,
	maxInterval: 1,
	min: 10,
	max: 30
},

XY 轴交换(横向柱状图)

默认 Y 轴(其 type 为 value)显示值,有时候需要反过来 X 轴(其 type 为 category)显示值,比如横向柱头图时就需要,其实实现方法非常简单,就是把 xAxis 属性值和 yAxis 属性值交换一下。

详细 X 轴

当 X 轴内容多时,会自动省略掉一些标签,如何全部显示呢?axisLabel: { interval:0 },如下:

xAxis: {
	type: 'category',
	boundaryGap: true,
	data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
	axisLabel: { interval:0 }
},

指定线条、柱状图颜色,平滑曲线

给对应序列 itemStyle 指定颜色,smooth 指定平滑。

var series = {
	name: nameValue[0],
	type: type,
	data: nameValue[1].split(","),
	itemStyle: '#f00',
	smooth: true
};

边界缺口

上述代码中已经提到了 boundaryGap: true,当为 true 时,适用于柱状图,X 轴标签对应着柱状图中间,当为 flase 时,适用于折线图,标签对应着刻度。效果如下:

ECharts 边界缺口

ECharts 边界缺口

更多参数

Documentation - Apache ECharts(incubating)

相关文章