柱状图 BarChart

示例

基本形式

<barChart
    xAxis={@({ key: 'week' })}
    yAxis={@({ min: 0 })}
    series={@([{ key: 'number' }])}
    data={data} />

let component = new RGUI.Component({
    template,
    data: {
        data: [
            { week: '星期一', number: 150 },
            { week: '星期二', number: 300 },
            { week: '星期三', number: 28 },
            { week: '星期四', number: 200 },
            { week: '星期五', number: 74 },
            { week: '星期六', number: 532 },
            { week: '星期日', number: 420 },
        ],
    },
});

堆叠数据

<barChart stack
    xAxis={@({ key: 'week' })}
    yAxis={@({ min: 0 })}
    series={@(series)}
    data={data} />

let component = new RGUI.Component({
    template,
    data: {
        series: [{ key: 'rds' }, { key: 'ncr' }, { key: 'nce' }],
        data: [
            { week: '星期一', rds: 150, ncr: 200, nce: 50 },
            { week: '星期二', rds: 300, ncr: 340, nce: 20 },
            { week: '星期三', rds: 28, ncr: 56, nce: 28 },
            { week: '星期四', rds: 200, ncr: 78, nce: 40 },
            { week: '星期五', rds: 74, ncr: 100, nce: 74 },
            { week: '星期六', rds: 532, ncr: 200, nce: 32 },
            { week: '星期日', rds: 420, ncr: 260, nce: 20 },
        ],
    },
});

隐藏图例

<barChart legend={false}
    xAxis={@({ key: 'week' })}
    yAxis={@({ min: 0 })}
    series={@([{ key: 'number' }])}
    data={data} />

let component = new RGUI.Component({
    template,
    data: {
        data: [
            { week: '星期一', number: 150 },
            { week: '星期二', number: 300 },
            { week: '星期三', number: 28 },
            { week: '星期四', number: 200 },
            { week: '星期五', number: 74 },
            { week: '星期六', number: 532 },
            { week: '星期日', number: 420 },
        ],
    },
});

其它

<barChart border title="每星期访问量"
    xAxis={@({ key: 'week' })}
    yAxis={@({ min: 0, name: '个' })}
    series={@([{ key: 'number', name: '访问量' }])}
    data={data} />

let component = new RGUI.Component({
    template,
    data: {
        data: [
            { week: '星期一', number: 150 },
            { week: '星期二', number: 300 },
            { week: '星期三', number: 28 },
            { week: '星期四', number: 200 },
            { week: '星期五', number: 74 },
            { week: '星期六', number: 532 },
            { week: '星期日', number: 420 },
        ],
    },
});

API

Class

BarChart

继承自。

Options

new BarChart()

参数	类型	默认值	数据流向	描述
`data`	Object			绑定属性
`data.width`	string	`'100%'`	outside => inside	图表宽度
`data.height`	string	`'480px'`	outside => inside	图表高度
`data.title`	string	`''`	outside => inside	标题
`data.titleTemplate`	string	`''`	outside @=> inside	标题模板
`data.tooltipTemplate`	string	`''`	outside @=> inside	工具提示模板
`data.data`	Array		outside => inside	数据。如果为`undefined`，表示数据正在加载；如果为`[]`，表示数据为空。
`data.xAxis`	Object		outside => inside	横坐标信息
`data.yAxis`	Object		outside => inside	纵坐标信息
`data.series`	Array	`[]`	outside => inside	序列信息
`data.border`	boolean	`false`	outside => inside	是否显示边框
`data.legend`	boolean	`true`	outside => inside	是否显示图例
`data.visible`	boolean	`true`	outside => inside	是否显示
`data.class`	string	`'m-barChart'`	outside => inside	补充class