1.7.0 • Published 1 year ago
@ray-js/chart v1.7.0
English | 简体中文
@ray-js/chart
Tuya Ray Chart,基于 f2-v3
须知
- 由于线上环境 Function.prototype.toString 被禁用,所以 onInit 需要传入模版字符串。可以访问 F2、chart、data、theme、解构过的 extraData、callMethod、_(lodash)、console
- 模版字符串中只能编写 es5 代码,但是你可以使用 lodash 的方法来实现功能,直接调用
_.
就可以。 - 事件回调函数必须使用 useCallback 包裹,否则当页面状态更改时图表会重复渲染。
特性
- 开箱即用,无需关心 polyfill
- 降低心智负担,专注业务开发
- 解决了 f2 在小程序中 pinch 和 pan 不生效的问题
- 内置手势支持(基于 @ray-js/gesture)
- 内置响应式明暗主题支持
安装
$ npm install @ray-js/chart
// 或者
$ yarn add @ray-js/chart
使用
柱状图选中
import React from 'react';
import Chart from '@ray-js/chart';
import data from '../mock/sales.json';
export default function ColumnSelect() {
// 为了防止图表重复渲染,必须使用 React.useCallback 包裹一下回调函数
const onIntervalSelectStart = React.useCallback(event => {
console.log('onIntervalSelectStart', event);
}, []);
const onIntervalSelectEnd = React.useCallback(event => {
console.log('onIntervalSelectEnd', event);
}, []);
return (
<Chart
data={data}
interactions={['interval-select']}
onIntervalSelectStart={onIntervalSelectStart}
onIntervalSelectEnd={onIntervalSelectEnd}
onInit={`
chart.interval().position('year*sales');
chart.render();
chart.interaction('interval-select', {
// 小程序中使用 touchstart 表现才正常
startEvent: 'touchstart',
onStart: function(ev) {
callMethod('IntervalSelectStart', ev.data);
},
onEnd: function(ev) {
callMethod('IntervalSelectEnd', ev.data);
}
})
`}
/>
);
}
柱状体平移
import React, { useState, useEffect } from 'react';
import Chart from '@ray-js/chart';
import data from '../mock/steps.json';
export default function ColumnPan() {
const [dates, setDates] = useState([]);
useEffect(() => {
const originDates = [];
data.forEach(obj => {
if (obj.date >= '2018-05-01') {
originDates.push(obj.date);
}
});
setDates(originDates);
}, []);
// 为了防止图表重复渲染,必须使用 React.useCallback 包裹一下回调函数
const onPanStart = React.useCallback(event => {
console.log('onPanStart', event);
}, []);
const onPanProcess = React.useCallback(event => {
console.log('onPanProcess', event);
}, []);
const onPanEnd = React.useCallback(event => {
console.log('onPanEnd', event);
}, []);
return (
<Chart
data={data}
scale={{
date: {
type: 'timeCat',
tickCount: 5,
values: dates,
mask: 'MM-DD',
},
steps: {
tickCount: 5,
},
}}
interactions={['pan']}
onPanStart={onPanStart}
onPanProcess={onPanProcess}
onPanEnd={onPanEnd}
plugins={['scrollBar']}
onInit={`
chart
.interval()
.position('date*steps')
.style({
radius: [2, 2, 0, 0],
});
chart.scrollBar({
mode: 'x',
xStyle: {
backgroundColor: '#e8e8e8',
fillerColor: '#808080',
offsetY: -2,
},
});
chart.interaction('pan', {
onStart: function(ev) {
callMethod('PanStart', ev)
},
onProcess: function(ev) {
callMethod('PanProcess', ev);
},
onEnd: function(ev) {
callMethod('PanEnd', ev);
},
})
chart.render();
`}
/>
);
}
柱状图缩放
import React, { useState, useEffect } from 'react';
import Chart from '@ray-js/chart';
import data from '../mock/steps.json';
export default function ColumnPinch() {
const [dates, setDates] = useState([]);
useEffect(() => {
const originDates = [];
data.forEach(obj => {
if (obj.date >= '2018-05-01') {
originDates.push(obj.date);
}
});
setDates(originDates);
}, []);
// 为了防止图表重复渲染,必须使用 React.useCallback 包裹一下回调函数
const onPinchStart = React.useCallback(event => {
console.log('onPinchStart', event);
}, []);
const onPinchProcess = React.useCallback(event => {
console.log('onPinchProcess', event);
}, []);
const onPinchEnd = React.useCallback(event => {
console.log('onPinchEnd', event);
}, []);
return (
<Chart
data={data}
scale={{
date: {
type: 'timeCat',
tickCount: 5,
values: dates,
mask: 'MM-DD',
},
steps: {
tickCount: 5,
},
}}
interactions={['pinch']}
onPinchStart={onPinchStart}
onPinchProcess={onPinchProcess}
onPinchEnd={onPinchEnd}
onInit={`
chart
.interval()
.position('date*steps')
.style({
radius: [2, 2, 0, 0],
});
chart.interaction('pinch', {
onStart: function(ev) {
callMethod('PinchStart', ev);
},
onProcess: function(ev) {
callMethod('PinchProcess', ev);
},
onEnd: function(ev) {
callMethod('PinchEnd', ev);
},
});
chart.render();
`}
/>
);
}
柱状图快扫
import React from 'react';
import Chart from '@ray-js/chart';
import data from '../mock/sales.json';
export default function ColumnSwipe() {
// 为了防止图表重复渲染,必须使用 React.useCallback 包裹一下回调函数
const onSwipeStart = React.useCallback(event => {
console.log('onSwipeStart', event);
}, []);
const onSwipeEnd = React.useCallback(event => {
console.log('onSwipeEnd', event);
}, []);
return (
<Chart
data={data}
interactions={['swipe']}
onSwipeStart={onSwipeStart}
onSwipeEnd={onSwipeEnd}
onInit={`
chart.interval().position('year*sales');
chart.interaction('swipe', {
onStart: function(ev) {
callMethod('SwipeStart', ev);
},
onEnd: function(ev) {
callMethod('SwipeEnd', ev);
},
});
chart.render()
`}
/>
);
}
柱状图 tooltip
import React from 'react';
import Chart from '@ray-js/chart';
import data from '../mock/sales.json';
export default function ColumnTooltip() {
// 为了防止图表重复渲染,必须使用 React.useCallback 包裹一下回调函数
const onTooltipShow = event => {
console.log('onTooltipShow', event);
};
const onTooltipHide = React.useCallback(event => {
console.log('onTooltipHide', event);
}, []);
return (
<Chart
data={data}
onTooltipShow={onTooltipShow}
onTooltipHide={onTooltipHide}
onInit={`
chart.interval().position('year*sales');
chart.tooltip({
showItemMarker: false,
onShow: function(ev) {
var items = ev.items;
callMethod('TooltipShow', items[0]);
items[0].name = null;
items[0].name = items[0].title;
items[0].value = '¥ ' + items[0].value;
},
onHide: function(ev) {
callMethod('TooltipHide');
}
});
chart.render();
`}
/>
);
}
饼图选中
import React from 'react';
import Chart from '@ray-js/chart';
const chartData = [
{
name: '芳华',
percent: 0.4,
a: '1',
},
{
name: '妖猫传',
percent: 0.2,
a: '1',
},
{
name: '机器之血',
percent: 0.18,
a: '1',
},
{
name: '心理罪',
percent: 0.15,
a: '1',
},
{
name: '寻梦环游记',
percent: 0.05,
a: '1',
},
{
name: '其他',
percent: 0.02,
a: '1',
},
];
export default function PieSelect() {
// 为了防止图表重复渲染,必须使用 React.useCallback 包裹一下回调函数
const onPieSelectStart = React.useCallback(event => {
console.log('onSwipeStart', event);
}, []);
const onPieSelectEnd = React.useCallback(event => {
console.log('onSwipeEnd', event);
}, []);
return (
<Chart
data={chartData}
onPieSelectStart={onPieSelectStart}
onPieSelectEnd={onPieSelectEnd}
interactions={['pie-select']}
onInit={`
chart.axis(false);
chart.tooltip(false);
chart.coord('polar', {
transposed: true,
radius: 0.85,
});
chart.interval().position('a*percent').color('name', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0' ]).adjust('stack')
.style({
lineWidth: 1,
stroke: '#fff',
lineJoin: 'round',
lineCap: 'round'
})
.animate({
appear: {
duration: 1200,
easing: 'bounceOut'
}
});
chart.render();
chart.interaction('pie-select', {
// 小程序中使用 touchstart 表现才正常
startEvent: 'touchstart',
onStart: function(ev) {
callMethod('PieSelectStart', ev);
},
onEnd: function(ev) {
callMethod('PieSelectEnd', ev.data);
},
});
`}
/>
);
}
1.6.2
1 year ago
1.7.0
1 year ago
1.6.1
1 year ago
1.6.0
1 year ago
1.5.2
1 year ago
1.5.1
1 year ago
1.4.2
1 year ago
1.5.0
1 year ago
1.4.1
1 year ago
1.4.0
1 year ago
1.3.12
1 year ago
1.3.11
1 year ago
1.3.10
1 year ago
1.3.8
1 year ago
1.3.7
1 year ago
1.3.6
1 year ago
1.3.5
1 year ago
1.3.4
1 year ago
1.3.3
1 year ago
1.3.2
1 year ago
1.3.0
1 year ago
1.2.1
1 year ago
1.2.0
1 year ago
1.1.0
1 year ago
1.0.2
1 year ago
1.0.1
1 year ago
1.0.0
1 year ago