- 调色盘:
调色盘,可以在 option 中设置。它给定了一组颜色,图形、系列会自动从其中选择颜色。 可以设置全局的调色盘,也可以设置系列自己专属的调色盘。
option = {
// 全局调色盘。
color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
series: [{
type: 'bar',
// 此系列自己的调色盘。
color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
...
}, {
type: 'pie',
// 此系列自己的调色盘。
color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
...
}]
}
- itemStyle
折线拐点标志的样式。 - dataZoom
数据区域缩放组件 - series
var option = {
...,
series: [{
type: 'custom',
renderItem: function (params, api) {
// 对于 data 中的每个 dataItem,都会调用这个 renderItem 函数。
// (但是注意,并不一定是按照 data 的顺序调用)
// 这里进行一些处理,例如,坐标转换。
// 这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
var categoryIndex = api.value(0);
// 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
var startPoint = api.coord([api.value(1), categoryIndex]);
var endPoint = api.coord([api.value(2), categoryIndex]);
// 这里使用 api.size(...) 获得 Y 轴上数值范围为 1 的一段所对应的像素长度。
var height = api.size([0, 1])[1] * 0.6;
// shape 属性描述了这个矩形的像素位置和大小。
// 其中特殊得用到了 echarts.graphic.clipRectByRect,意思是,
// 如果矩形超出了当前坐标系的包围盒,则剪裁这个矩形。
// 如果矩形完全被剪掉,会返回 undefined.
var rectShape = echarts.graphic.clipRectByRect({
// 矩形的位置和大小。
x: startPoint[0],
y: startPoint[1] - height / 2,
width: endPoint[0] - startPoint[0],
height: height
}, {
// 当前坐标系的包围盒。
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
});
// 这里返回为这个 dataItem 构建的图形元素定义。
return rectShape && {
// 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
type: 'rect',
shape: rectShape,
// 用 api.style(...) 得到默认的样式设置。这个样式设置包含了
// option 中 itemStyle 的配置和视觉映射得到的颜色。
style: api.style()
};
},
data: [
[12, 44, 55, 60], // 这是第一个 dataItem
[53, 31, 21, 56], // 这是第二个 dataItem
[71, 33, 10, 20], // 这是第三个 dataItem
...
]
}]
}
renderItem 函数提供了两个参数:
-
params:包含了当前数据信息(如
seriesIndex
、dataIndex
等等)和坐标系的信息(如坐标系包围盒的位置和尺寸)。 -
api:是一些开发者可调用的方法集合(如
api.value()
、api.coord()
)。
renderItem 函数须返回根据此 dataItem
绘制出的图形元素的定义信息,参见 renderItem.return。
一般来说,renderItem 函数的主要逻辑,是将 dataItem
里的值映射到坐标系上的图形元素。这一般需要用到 renderItem.arguments.api 中的两个函数:
-
api.value(...),意思是取出
dataItem
中的数值。例如api.value(0)
表示取出当前dataItem
中第一个维度的数值。 -
api.coord(...),意思是进行坐标转换计算。例如
var point = api.coord([api.value(0), api.value(1)])
表示dataItem
中的数值转换成坐标系上的点。
有时候还需要用到 api.size(...) 函数,表示得到坐标系上一段数值范围对应的长度。
返回值中样式的设置可以使用 api.style(...) 函数,他能得到 series.itemStyle 中定义的样式信息,以及视觉映射的样式信息。也可以用这种方式覆盖这些样式信息:api.style({fill: 'green', stroke: 'yellow'})
。
书写完 renderItem
方法后,自定义系列的 90% 工作就做完了。剩下的是一些精化工作。
网友评论