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

发布时间:2024年01月19日
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组件包裹,画出一条平均值的线。

文章来源:https://blog.csdn.net/tangxiaobao2016/article/details/135690160
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。