问题描述
VChart 里坐标轴的网格线是直线，如何设置为虚线，以及如何调整虚线的样式？
解决方案
在 VChart 里，坐标轴网格线样式的配置项是 axes[i].grid.style。你可以通过配置 lineDash 属性将实线调整为你想要的虚线效果。
lineDash使用一组值来指定描述模式的线和间隙的交替长度。例如：
lineDash: [2, 3];
lineDash: [0]; // 实线
代码示例
🔔 下面的代码，可以复制粘贴到编辑器中查看效果
const spec = {
type: 'line',
data: {
values: [
{
time: '2:00',
value: 8
},
{
time: '4:00',
value: 9
},
{
time: '6:00',
value: 11
},
{
time: '8:00',
value: 14
},
{
time: '10:00',
value: 16
},
{
time: '12:00',
value: 17
},
{
time: '14:00',
value: 17
},
{
time: '16:00',
value: 16
},
{
time: '18:00',
value: 15
}
]
},
axes:[
{
orient:'left',
grid:{
style:{
stroke:"black",
lineDash:[5,5]
}
}
},
{
orient:'bottom',
grid:{
visible: true,
style:{
stroke:"black",
lineDash:[5,5]
}
}
}
],
xField: 'time',
yField: 'value'
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
