1.数据
因为是双y轴所以时间上time字段要对上,
y轴左边显示data的数据,工作收入数据
y轴右边显示data2的数据,收入的百分比数据
const data = [
{
time: "10:10",
name: 'jone',
salary: 32,
},
{
time: "10:15",
name: 'jone',
salary: 53,
},
{
time: "10:20",
call: 13,
name: 'jone',
salary:123,
},
{
time: "10:10",
name: 'sare',
salary: 32,
},
{
time: "10:15",
name: 'sare',
salary: 53,
},
{
time: "10:20",
call: 13,
name: 'sare',
salary:123,
},
];
const data2 = [
{
time: "10:10",
name: 'kitte',
rate:"20%",
},
{
time: "10:15",
name: 'kitte',
rate:"50%",
},
{
time: "10:20",
call: 13,
name: 'kitte',
rate:"50%",
},
{
time: "10:10",
name: 'yiyi',
rate:"76%",
},
{
time: "10:15",
name: 'yiyi',
rate:"25%",
},
{
time: "10:20",
call: 13,
name: 'yiyi',
rate:"27%",
},
];
1.配置 scale
let scale = {
salary: {
alias: '工资', // y轴别名
tickCount: 8,
type: 'linear-strict',
},
rate: {
alias: '百分比', // y轴别名
tickCount: 8,
type: 'linear-strict',
},
time: {
alias: "日期",
},
} as {[key:string]: any}
3.重点是使用了view, padding={0}
代码
{/*折线图*/}
bizcharts的平均值也是原理,用view组件包裹,画出一条平均值的线。