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 时,适用于折线图,标签对应着刻度。效果如下:
更多参数
Documentation - Apache ECharts(incubating)