bizcharts入坑问题Part2:X轴与Y轴添加单位

import React from "react";
import {
  Chart
} from "bizcharts@3.5.8";

class Basic extends React.Component {
  render() {
    const cols = {
      value: {
        min: 0,
        range:[0,0.93],
        alias:'次'
      },
      year: {
        range: [0, 0.9],
        alias:'时间'
      }
    };
    return (
      <div>
        <Chart height={400} data={data} scale={cols} forceFit>
            <Axis name="year"
                  position='bottom'//top、bottom、left、right
                  title={{
                  position:'end',// position: 'start' || 'center' || 'end' 标题的位置
                  offset:15,//设置标题 title 距离坐标轴线的距离
                  textStyle: {
                    fontSize: '12',
                    textAlign: 'center',
                    fill: '#999',
                    fontWeight: 'bold',
                    rotate: 0,
                    autoRotate:true//是否需要自动旋转,默认为 true
                }// 坐标轴文本属性配置
              }} />
              <Axis name="value"  title={{
                  position:'end',
                  offset:5.5,
                  textStyle: {
                    fontSize: '12',
                    textAlign: 'right',
                    fill: '#999',
                    fontWeight: 'bold',
                    rotate: 0
                }
          }}/>
        </Chart>
      </div>
    );
  }
}

ReactDOM.render(<Basic />, mountNode)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值