react-charts实现折线图等等各种图形（推荐使用案例二，比较容易操作）

(一)react-charts案例一

一.案例学习网址：

https://react-charts.js.org/examples/line

二.源码下载网址：

https://github.com/react-tools/react-charts

三.具体详情使用

1.比如说，我比较喜欢官网这个案例

2.到本地创建一个Create React App运行文件夹，例如我创建了一个文件夹叫my-app

3.下载官网源码，下载好之后，比如说我需要的是上图的案例，那么我找到源码对应的两个js文件。

4.将ChartConfig.js复制到我的my-app文件夹内，然后将LineChart.js文件内的代码复制到我的my-app文件夹内的App.js里面的return内容处

最后App.js上的完整代码为：（注意：此处我直接将ChartConfig.js复制在了src目录下）

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Chart } from "react-charts";
import ChartConfig from './ChartConfig'
class App extends Component {
	render() {
		return (
			<div className="App">
				<ChartConfig series={10}>
					{({ data }) => (
						<Chart
							data={data}
							series={{
								showPoints: false,
							}}
							axes={[
								{ primary: true, type: 'time', position: 'bottom' },
								{ type: 'linear', position: 'left' },
							]}
							tooltip
						/>
					)}
				</ChartConfig>
			</div>
		);
	}
}

export default App;

7.分别执行如下代码

npm install react-charts --save
npm install ResizableBox --save

8.npm start就能看到上图我们想要的效果

四.进行简单修改操作

App.js

import React, { Component } from 'react';
import './App.css';
import { Chart } from "react-charts";
import ChartConfig from './ChartConfig'
class App extends Component {
	render() {
		const setdata=[{
			label: "Series 1",
			data: [[0, 1], [1, 2], [2, 4], [3, 2], [4, 7]]
		},
		{
			label: "Series 2",
			data: [[0, 3], [1, 1], [2, 5], [3, 6], [4, 4]]
		}]
		return (
			<div className="App">
				<ChartConfig>
					{() => (
						<Chart
							data={setdata}
							series={{
								showPoints: false,//节点处是否显示小圆点
							}}
							axes={[
								{ primary: true, type: 'time', position: 'bottom' },
								{ type: 'linear', position: 'left' },
							]}
							tooltip//设置到每一个节点的提示
						/>
					)}
				</ChartConfig>
			</div>
		);
	}
}

export default App;

ChartConfig.js

import React from 'react'
import { ResizableBox } from 'react-resizable'
export default class ChartConfig extends React.Component {
  render() {
    const {children} = this.props //children获取我们前面定义的data
    const width = 500;
    const height = 300;
    const style = {width: '100%',height: '100%'}
    return (
      <div>
        <ResizableBox width={width} height={height}>
          <div style={style}>
            {children({ })}
          </div>
        </ResizableBox>
      </div>
    )
  }
}

五.进行实际需求进行修改操作

(二)react-charts案例二（推荐使用，比较容易操作）

一.网址：hhttps://www.fusioncharts.com/charts?product=fusioncharts

二.选择好自己需要的图形类型，我需要多条折线图

三.代码

import React, { Component } from 'react';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);
const dataSource = {
	"chart": {
	  "caption": "最上端 : 主标题",
	  "yaxisname": "y轴主标题",
	  "subcaption": "最上端 : 副标题",
	  "numdivlines": "3",
	  "showvalues": "0",
	  "legenditemfontsize": "15",
	  "legenditemfontbold": "1",
	  "plottooltext": "<b>$dataValue</b> 此处设置鼠标浮动到点上时显示的文字 $label",
	  "theme": "fusion"
	},
	"categories": [
	  {
		"category": [
		  {
			"label": "x轴第1个点"
		  },
		  {
			"label": "x轴第2个点"
		  },
		  {
			"label": "x轴第3个点"
		  },
		  {
			"label": "x轴第4个点"
		  },
		  {
			"label": "x轴第5个点"
		  },
		  {
			"label": "x轴第6个点"
		  },
		  {
			"label": "x轴第7个点"
		  }
		]
	  }
	],
	"dataset": [
	  {
		"seriesname": "Received",
		"data": [
		  {
			"value": "55"
		  },
		  {
			"value": "45"
		  },
		  {
			"value": "52"
		  },
		  {
			"value": "29"
		  },
		  {
			"value": "48"
		  },
		  {
			"value": "28"
		  },
		  {
			"value": "32"
		  }
		]
	  },
	  {
		"seriesname": "Resolved",
		"data": [
		  {
			"value": "50"
		  },
		  {
			"value": "30"
		  },
		  {
			"value": "49"
		  },
		  {
			"value": "22"
		  },
		  {
			"value": "43"
		  },
		  {
			"value": "14"
		  },
		  {
			"value": "31"
		  }
		]
	  }
	]
  };
  
const chartConfigs = {
	  type: 'msspline',//column2d是柱形图，Pie3D饼图,mscombi2d柱形折线饼结合，dragcolumn2d...,msspline双曲线，spline单曲线
	  width: 600,
	  height: 400,
	  dataFormat: 'json',
	  dataSource: dataSource,
};
class Chart extends Component {
	render () {
	  return <ReactFC {...chartConfigs} />;
	}
}
class App extends Component {
	render() {
		return (
			<Chart />
		);
	}
}

export default App;

四.效果图