bizcharts的双y轴,用的是view配合数据

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组件包裹,画出一条平均值的线。

你可能感兴趣的:(学习总结,前端,bizcharts)