线状图 LineChart

示例

折线图

<lineChart
    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 },
        ],
    },
});

曲线图

<lineChart smooth
    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 },
        ],
    },
});

填充下方区域

<lineChart smooth fill
    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 },
        ],
    },
});

隐藏图例

<lineChart smooth 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 },
        ],
    },
});

单位

<lineChart border title="每星期访问量"
    xAxis={@({ key: 'week' })}
    yAxis={@({ min: 0, name: '个' })}
    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 },
        ],
    },
});

API

Class

LineChart

继承自。

Options

new LineChart()

参数	类型	默认值	数据流向	描述
`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.smooth`	boolean	`false`	outside => inside	是否用光滑曲线
`data.fill`	boolean	`false`	outside => inside	是否填充区域
`data.border`	boolean	`false`	outside => inside	是否显示边框
`data.legend`	boolean	`true`	outside => inside	是否显示图例
`data.visible`	boolean	`true`	outside => inside	是否显示
`data.class`	string	`'m-lineChart'`	outside => inside	补充class