最近画了个简单的前端图，使用百度的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. 结果展示：