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. 结果展示:
NodeJS + React + Webpack + Echarts的更多相关文章
- webpack+react实现echarts可视化配置
先上效果 开发环境要求 需要事先安装node及npm 前期准备 1.创建文件夹react-echarts-editor2.在项目根目录(以下称根目录)下创建src目录3.在项目根目录下创建dist目录 ...
- React + webpack 快速搭建开发环境
因网上大多React + webpack快速搭建的运行不起来,便自行写了一个.在搭建开发环境的前需安装nodejs,npm. 新建一个工作目录,比如叫reactdome,在reactdome目录中运行 ...
- nodejs+gulp+webpack基础知识
nodejs+gulp+webpack基础知识 2019年08月22日 11:49:40 天府云创 阅读数 22 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文 ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- 部署React+webpack工程的步骤
# 部署React+webpack工程的步骤ps:以Mac os系统做开发环境.因为npm现在使用灰常的慢,所以我使用淘宝境像cnpm. 1,准备工作: 先确保存已经安装了node.js: 2,文件部 ...
- scss + react + webpack + es6
scss + react + webpack + es6 写在前面: 刚学习完慕课网里的一个幻灯片案例,自己加了刚学的react,两者结合.首先让大家看看效果 点击此处 你可以先用纯js实现上面的效果 ...
- react +webpack 配置px2rem
项目背景需要适配ipad 以及手机端,这时候当然要告别刀耕火种时代啦(自己算rem),因为已经有成熟的工具啦,即px2rem(https://www.npmjs.com/package/px2rem) ...
- 真刀实战地搭建React+Webpack+Express搭建一个简易聊天室
一.前面bb两句 因为自惭(自残)webpack配置还不够熟悉,想折腾着做一个小实例熟悉.想着七夕快到了,做一个聊天室自己和自己聊天吧哈哈.好了,可以停止bb了,说一下干货. 二. 这个项目能学到啥? ...
- react+webpack+babel环境搭建
[react+webpack+babel环境搭建] 1.react官方文档推荐使用 babel-preset-react.babel-preset-es2015 两个perset. Babel官方文档 ...
随机推荐
- [视频播放] M3U8文件格式说明
M3U文件中可以包含多个tag,每个tag的功能和属性如下: #EXTM3U 每个M3U文件第一行必须是这个tag,请标示作用 #EXT-X-MEDIA-SEQUENCE:140651513 每一个m ...
- JavaScript中date日期的n种方法
转自博客 https://blog.csdn.net/u013992330/article/details/54318737
- 【spring】之事物配置,声明式事务管理和基于@Transactional注解的使用
http://blog.csdn.net/bao19901210/article/details/41724355
- IP地址与无符号整数值相互转换
方法1:IP地址转换为整数:比如"192.168.1.254",以点为分割,将192 168 1 254保存在一个int a[4]数组里,然后通过unsigned int nRes ...
- [转] 关于 Ceph PG
本系列文章会深入研究 Ceph 以及 Ceph 和 OpenStack 的集成: (1)安装和部署 (2)Ceph RBD 接口和工具 (3)Ceph 物理和逻辑结构 (4)Ceph 的基础数据结构 ...
- [转][C#]Environment 类
当执行 Environment.GetEnvironmentVariables() 时,可以得到以下结果(受所安装软件影响,每台电脑都不一样) Count = ["SystemDrive&q ...
- 廖雪峰Java6 IO编程-2input和output-4Filter模式
1.JDK提供的InputStream分为两类: 直接提供数据的InputStream * FileInputStream:从文件读取 * ServletInputStream:从HTTP请求读取数据 ...
- 在外部怎么调用jquery插件里的function
文章来源:百度知道 问:(function($){函数(){xxxx}})(jQuery),我怎么调用这个函数呢? (function($){ function render(jq){ 这里是jque ...
- web前端开发浅析
原文地址:http://www.cnblogs.com/babyzone2004/articles/1807381.html 摘 要:前端开发作为一项新的领域,经历的时间随然较短,却显示了强大的生命里 ...
- HDOJ 2003 求绝对值
#include<cstdio> #include<cmath> int main() { double a; while (scanf_s("%lf", ...