G2-------数据的处理(如设置横纵坐标，提示信息，时间间隔的处理，字段集展开，字段重命名等)

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 + '%';
        },
    }

});

效果图：