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}
<Axis name="salary" position='left' title />
<Axis name="rate" position='right' title />
代码
<Chart
height="400px"
data={data1}
autoFit
scale={scale}
padding={[20, 60, 60, 60]}
appendPadding={[10, 10]}
>
<Legend visible={false} />
<Tooltip shared={true} showCrosshairs/>
<Geom
type="line"
position="time*salary"
size={2}
color="key"
/>
<View data={ElectricData} padding={0} >
<Legend position='bottom'/>
<Axis name="rate" position='right' title />
{/*折线图*/}
<Line
position="time*rate"
color="key"
size={2}
shape="smooth"
/>
<Axis
name="time"
title
/>
</View>
<Axis
name="time"
title
/>
<Axis name="salary" position='left' title />
</Chart>
bizcharts的平均值也是原理,用view组件包裹,画出一条平均值的线。