自定义系列：标记图
图表底层基于 ECharts，所以参考 ECharts 官方配置项文档使用即可。
同时，在 ECharts 之上我们对其能力做了扩展，暴露了部分自定义配置项（均以 dv 前缀进行命名，以和 ECharts 配置项做以区分），在这里进行说明。
自定义标记图适应的问题场景
自定义散点图适应场景大致为一组需要依赖图表某一对坐标轴的自定义图形标记的显示，交互和动画。
且扩展了以下功能
-
支持个性化配置每个【标记】中每个图元的样式、动画
-
扩展了自定义配置项以及辅助函数，以满足范式中涉及的功能
概念约定
【约定】：dv 开头的配置项称作【自定义配置项】
【约定】：每个标记整体命名为【图形】，图形中的最小单元形状命名为【图元】
实时调试预览
function Example() {
const markData = [
{
value: [3, 300],
itemStyle: {
textStyle: {
style: {
text: '第一个标签',
},
},
},
},
{
value: [6, 280],
itemStyle: {
textStyle: {
style: {
text: '第二个标签',
},
},
},
},
{
value: [16, 340],
itemStyle: {
textStyle: {
style: {
text: '第三个标签',
},
},
},
},
{
value: [20, 230],
itemStyle: {
textStyle: {
style: {
text: '第四个标签',
},
},
},
},
{
value: [25, 360],
itemStyle: {
textStyle: {
style: {
text: '第五个标签',
},
},
},
},
];
// 尝试不同的配置项组合，实现你想要的图表吧
const option = {
xAxis: {
type: 'category',
},
yAxis: {
type: 'value',
},
series: {
type: 'dvMarker',
data: markData,
markerType: 'flag',
dvItemStyle: {
rectStyle: {
style: {
fill: '#f07c82',
},
},
textStyle: {
style: {
padding: [5, 0],
},
},
lineStyle: {
style: {
lineWdith: 3,
},
},
},
},
};
// 以下为Demo固定内容，一般不修改
return (
<StandardChart
style={{ width: 640, height: 480 }}
theme="mobile-app-light"
option={option}
/>
);
}
自定义配置项
以下配置项只在 series.type: 'dvMarker' 时有效
series.markerType
- 类型
'flag' | 'pin'
信息
该配置项表示整个系列对应的标记类型。
series.dvItemStyle
- 类型如下：
// T: 目前有 'flag' 和 'pin' 两个类型
// 'flag' 对应的itemStyle类型为FlagStyleProps
// 'pin' 对应的itemStyle类 型为PinStyleProps
// baseStyleProps属性格式可见https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable
export interface FlagMarkerData {
lineStyle?: {
style?: baseStyleProps
},
circleStyle?: {
shape?: {
r?: number;
},
style?: baseStyleProps
},
textStyle?: {
style?: baseStyleProps
},
rectStyle?: {
shape?: {
width?: number;
height?: number;
}
style?: baseStyleProps
}
};
export interface PinMarkerData {
pinStyle?: {
shape?: {
width?: number;
height?: number;
},
style?: baseStyleProps
},
}
series.data
- 类型
DvMarkerData
export interface DvMarkerData {
// 单个数据值的x轴坐标和y做
value: [number, number];
markerType?: T;
// 对单个数据的图形设置差异化样式, 样式同dvItemStyle
itemStyle?: MarkerTypeMap[T];
}
// T: 目前有 'flag' 和 'pin' 两个类型
// 'flag' 对应的itemStyle类型为FlagStyleProps
// 'pin' 对应的itemStyle类型为PinStyleProps
附录 1：itemStyle
itemStyle 中包含以下属性
【tip】：由于在同一个图形中可能存在俩个相同类型的图元，所以在每个图形类型中，都对任意一个图元进行了命名，需要通过在 itemStyle 中添加 id 属性，来将描述的 itemStyle 对象分发给对应的图元
还有部分属性，官方文档中并没有描述
比如enterFrom和leaveTo等，这些部分可以在这里找到
附录 2：图形类型
本附录着重描述每种图形类型的自定义配置项与图元 ID
flag
itemStyle 配置项：
| 配置项 | 类型 | 默认值 | 描述 |
|---|---|---|---|
lineStyle? | 自定义直线 | 小旗子标签的旗杆直线部分 | |
circleStyle? | 自定义圆点 | undefined | 旗子的起始圆点 |
rectStyle? | 自定义矩形 | undefined | 旗子方框 |
textStyle? | 自定义文字 | 方框的文字，可支持富文本 |
默认样式
const defaultItemStyle = {
lineStyle: {
type: 'line',
style: {
// 这里的lineHeight只是一个预估值，框架内部会在布局过程中调整线长
lineWidth: 2,
lineHeight: 60,
stroke: 'rgba(255,36,54,0.70)',
},
},
rectStyle: {
type: 'rect',
shape: {
// 矩形宽高默认可适配文字宽高
// width: 60,
// height: 30
},
style: {
fill: 'rgba(255,36,54,0.70)',
},
},
circleStyle: {
type: 'circle',
shape: {
// cx cy 为相对默认位置的偏移
cx: 0,
cy: 0,
r: 2.5,
},
style: {
fill: 'rgba(255,36,54,0.70)',
stroke: '#fff',
},
},
textStyle: {
type: 'text',
style: {
// 文字相对默认位置的偏移
x: 0,
y: 0,
},
},
};