折线图
图表底层基于 ECharts，所以参考 ECharts 官方配置项文档使用即可。
同时，在 ECharts 之上我们对其能力做 了扩展，暴露了部分自定义配置项（均以 dv 前缀进行命名，以和 ECharts 配置项做以区分），在这里进行说明。
实时调试预览
function MyExample() {
// 尝试不同的配置项组合，实现你想要的图表吧
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
itemStyle: {
color: '#f00',
},
type: 'line',
},
],
};
// 以下为Demo固定内容，一般不修改
return (
<StandardChart
style={{ width: 640, height: 480 }}
theme="mobile-app-light"
option={option}
/>
);
}
自定义配置项
以下配置项只在 series.type: 'line' 时有效。
series.dvShowBreathPoint
提示
该配置项只适用于静态折线图，在动态折线图中有另外的配置。
在折线标记点大小series.symbolSize为 0 时无效。
- 类型
Boolean - 默认值
false
是否显示静态折线末尾的呼吸点。
示例配置：
{
series: {
type: 'line',
// 自定义配置项
dvShowBreathPoint: true,
// 需要将末尾点的大小设置为大于0的值
// 范式中折线在高密度（数据个数大于13）的情况下，折线节点大小为0， 因此要在高密度情况下显示呼吸点需要显式地将末尾节点大小设置为大于0的值
// 低密度下不需要设置symbolSize即可显示呼吸点
symbolSize (value, params) {
return params.dataIndex === data.length - 1 ? 5 : 0;
}
}
}
series.dvShowSymbolStrategy
注意
根据折现节点的个数控制折线上点的显隐策略，优先级高于series.showSymbol、series.showAllSymbol和所有在单个data内的showSymbol、showAllSymbol。
信息
根据设计规范，移动端主题的默认临界值为13。
- 类型
number - 默认值
undefined
判断折线上节点数量密度的临界值。高于该值则为高数据密度，隐藏所有节点；低于该值则为低数据密度，显示所有节点。
v0.4.0
series.dvEmphasisSymbolFill
- 类型
string - 默认值
#fff
这折线上的拐点标记在高亮时的填充色。
series.dvMaxLabelCount
提示
在配置项series.label.show为false时无效。
- 类型
number - 默认值
undefined
设置一条折线上最多能够显示的文字标签的数量。用于解决标签过于密集导致的重叠问题。
series.endLabel.dvZ
- 类型
number - 默认值
undefined
配置末尾标签单独层级，不设置则默认和折线同一层级。
series.endLabel.dvRotate
- 类型
'auto'或undefined - 默认值
undefined
v0.2.50+
设置是否根据折线前两个点自动计算末尾标签的旋转角度，不设置则默认为series.endLabel.rotate。
series.dvSymbolLineWidth
- 类型
number - 默认值
undefined
v0.2.40+
设置折线上默认 symbol 的描边线宽。
series.emphasis.dvSymbolLineWidth
- 类型
number - 默认值
undefined
v0.2.40+
设置折线上默认高亮 symbol 的描边线宽。