NodeJS + React + Webpack + Echarts

最近畫了個簡單的前端圖，使用百度的echarts，基於原來項目的NodeJS+React+Webpack框架。在此記錄一下：

1.  在react里封裝echarts組件，並調用后端API。

（參考的是一個只有樣本數據，無數據封裝的例子，對於沒有接觸前端卻要對接這個圖的我，簡直是折磨得不行）。

import React from 'react';
import { tablelineagenodes, tablelineagelinks } from 'actions';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import { Button } from 'antd';

// 導入echarts
var echarts = require('echarts/lib/echarts') // 必須
require('echarts/lib/chart/sankey') // 圖表類型
require('echarts/lib/component/tooltip') // echart插件
require('echarts/lib/component/title') // 標題插件
require('echarts/lib/component/grid') // echart插件

// 后端封裝接口
@connect(
	state => ({
		nodes: state.tablelineagenodes.list,
		links: state.tablelineagelinks.list
	}), {
		pushRouter: push,
		queryTablelineagenodes: tablelineagenodes.queryTablelineagenodes,
		queryTablelineagelinks: tablelineagelinks.queryTablelineagelinks
	}
)

class Lineage extends React.Component {
	state = {context: '', isRender: false};

	constructor(props) {
		super(props)
		this.setSankeyOption = this.setSankeyOption.bind(this)
		this.initSankey = this.initSankey.bind(this)
	}

	routeBuildRecord = _url => {
		this.props.pushRouter(_url);
	}

	initSankey() {
		this.props.queryTablelineagenodes()
		this.props.queryTablelineagelinks()
	}

	componentDidMount() { //  取數
		this.initSankey()
	}

	componentDidUpdate() { // 畫圖
		const {nodes, links} = this.props;
		console.log(nodes)
		console.log(links)

		if (nodes.length !== 0 && links.length !== 0) {
			// 初始化echart
			let myChart = echarts.init(document.getElementById("app"))
			// 我們要定義一個setSankeyOption函數將data傳入option里面
			let options = this.setSankeyOption(nodes, links)
			// 設置options
			myChart.setOption(options)
		}
	}

	render() {
		return (
			<div className="sankey-react">
				<div className="condition">
					<Button type="primary" onClick={() => this.routeBuildRecord("/datacenter/datalineage")} >查詢的實體血緣為空，重新修改查詢吧</Button>
				</div>
				<div id="app" style={{width: "100%", height: "200px"}}></div>
			</div>
		)
	}

    // 一個基本的echarts圖表配置函數
	setSankeyOption(nodes, links) {
		return {
			title: {
				text: '實體血緣圖'
			},
			tooltip: {
				trigger: 'item',
				triggerOn: 'mousemove'
			},
			animation: false,
			grid: {
				left: '5%',
				right: '0',
				top: '200px',
				bottom: '5%',
				containLabel: true
			},
			series: [
				{
					type: 'sankey',
					layout: 'none',
					radius: '10%',
					center: ['50%', '50%'],
					data: nodes,
					links: links,
					itemStyle: {
						normal: {
							borderWidth: 1,
							borderColor: '#aaa'
						}
					},
					lineStyle: {
						normal: {
							color: 'source',
							curveness: 0.5
						}
					}
				}
			]
		}
	}
}

export default Lineage;

2.   結果展示：