react(4)-react 折线图等图表

参考文档：https://www.npmjs.com/package/react-highcharts、https://www.jianshu.com/p/163edf15b15a

config具体含义:

1、Highcharts包含标题（Title）：主标题是必须的但是subTTitle不是必须
2、坐标轴（Axis）：有x坐标（xAxis）和y坐标（yAxis）
3、数据列（Series）：每个曲线，每个柱形条组，每个饼图的部分
4、数据提示框（Tooltip）：鼠标放上去的提示框
5、图例（Legend）：通过点击标示可以显示或隐藏该数据列
6、版权信息（Credits）：一般是highcharts的官网，指定credits.enabled=false不让显示
7、导出功能按钮（Exporting）：需要包含exporting.js
8、标示线（PlotLines）：主动添加如平均线等

举例：

import ReactHighcharts from'react-highcharts';

class SummaryLeft extends Component {
  render () {
var config = {
    title: {
		text: '折线图'
	},
	subtitle: {
		text: '数据来源：thesolarfoundation.com'
	},
	yAxis: {
		title: {
			text: '就业人数'
		}
	},
	credits:{
		enabled:false
	},
	xAxis:{
		categories:['2010','2011','2012','2013','2014','2015','2016','2017']
	},
	series: [{
		name: '安装，实施人员',
		data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
	}, {
		name: '工人',
		data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
	}, {
		name: '销售',
		data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
	}, {
		name: '项目开发',
		data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
	}, {
		name: '其他',
		data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
	}],
    };


    return (
      <div>
        <ReactHighcharts config={config} />
      </div>
    );
  }
}

一般把x轴坐标点定死，y轴根据series自动获取坐标点排版

具体怎么写图表，可以看：https://www.hcharts.cn/demo/highcharts