1 全局设置样式
this.chart2.source(this.data,{
value:{
min : 0 // 坐标轴的起始值
max :1 // 坐标轴的结束值
formatter: val => { // 设置坐标轴和提示框的文字
return val + '%';
},
tickInterval: 0.003, // 设置坐标轴间隔
alias: '比例' // 提示信息起别名
},
});
注意起别名不要和.scale一起用,会把这里的信息抹去
效果图:
2 坐标轴处理:
// // 坐标轴的处理
this.chart4.scale('date', {
range: [0, 1],
tickCount: 8,
// type: 'timeCat',
// mask: 'HH:MM',
});
对日期类型,分间隔
3 字段重命名
// 纵坐标替换
const ds = new DataSet();
const dv = ds.createView().source(this.data);
dv.transform({
type: 'rename', // 字段重命名
map: {
day: 'date', // 将day和week换为date
week:'date'
}
});
4 字段展开
const ds = new DataSet();
const dv = ds.createView().source(data);
// fold 方式完成了行列转换,如果不想使用 DataSet 直接手工转换数据即可
dv.transform({
type: 'fold',
fields: ['china', 'london'], // 展开字段集
key: 'city', // key字段
value: 'temperature' // value字段
});
5 中英文切换:
const pieTitleMap = {
vehicleFailure: '车辆故障',
batteryEfficiency: '电池效能',
efficiencyLevel: '能耗水平',
dataQuality: '数据质量',
dringViolation: '驾驶违规',
};
this.chart1 .source(dv,{
type:{
formatter: val => {
return pieTitleMap[val];
},
},
value:{
formatter: val => { // 设置坐标轴和提示框的文字
return val + '%';
},
}
});
效果图: