NodeJS + React + Webpack + Echarts

Z时代
2024-01-10
分类：综合

react

最近画了个简单的前端图，使用百度的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 }}></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;