1.安装
这里直接使用react-chartjs-2:
npm install react-chartjs-2 chart.js --save
2.这里数据的构造没有做深入研究，只是简单的尝试了一下使用方式，话不多说，直接贴代码：
import React, { Component } from 'react';
import { HorizontalBar, Bar, Pie, Scatter, Line, Radar, Doughnut, Polar, Bubble } from 'react-chartjs-2';
var Width = document.documentElement.clientWidth;
export default class TestScreen extends Component {
render() {
const data = {
labels: ['1', '2', '3', '4', '5', '6', '7'],
datasets: [
{
label: '展示',
backgroundColor: ['red', 'blue', 'yellow', 'blue', 'red', 'blue', 'yellow'],
borderColor: 'blue',
borderWidth: 1,
hoverBackgroundColor: 'red',
hoverBorderColor: 'red',
data: [65, 59, 80, 81, 56, 55, 40],
fill: 'red'
},
],
};
const bubbleData = {
datasets: [{
label: 'Bubble',
data: [{
x: -10,
y: 0,
r:3
}, {
x: 0,
y: 10,
r:1
}, {
x: 10,
y: 5,
r:7
}],
backgroundColor:'red'
}]
};
const scatterData = {
datasets: [{
label: 'Scatter',
data: [{
x: -10,
y: 0,
}, {
x: 0,
y: 10,
}, {
x: 10,
y: 5,
}],
backgroundColor:'blue'
}]
};
return (
<div style={{ height: '100%', width: '100%' }}>
<Bubble data={bubbleData} width={Width} height="250" />
<Bar data={data} width={Width} height="250" />
<Pie data={data} width={Width} height="250" />
<HorizontalBar data={data} width={Width} height="250" />
<Scatter data={scatterData} width={Width} height="250" />
<Line data={data} width={Width} height="250" />
<Radar data={data} width={Width} height="250" />
<Doughnut data={data} width={Width} height="250" />
<Polar data={data} width={Width} height="250" />
</div>
);
}
}