webpack+react实现echarts可视化配置
先上效果
开发环境要求
需要事先安装node及npm
前期准备
1.创建文件夹react-echarts-editor
2.在项目根目录(以下称根目录)下创建src目录
3.在项目根目录下创建dist目录
4.在src目录下创建app.js文件(该文件就来一个react-echarts版的hello world)
import React from 'react';
import ReactDOM from 'react-dom';
import ReactEcharts from "echarts-for-react"; class EchartsEditor extends React.Component{
constructor(props) {
super(props);
this.state = {
echartsOption: {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
}
};
}
render(){
return(
<div>
<ReactEcharts option={this.state.echartsOption} />
</div>
);
}
}
ReactDOM.render(<EchartsEditor/>,document.getElementById("container"));
5.在dist目录下创建index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="container"></div>
</body>
<script src="bundle.js"></script>
</html>
6.在根目录下创建使用命令创建package.json
npm init -y
7.在根目录下创建使用命令安装webpack、babel、react、echarts 、lodash
npm install webpack webpack-cli --save-dev
npm install babel-preset-flow babel-preset-env babel-preset-stage- --save-dev
npm install react react-dom echarts echarts-for-react lodash --save
安装完后package.json如下:
{
"name": "react-echarts-editor",
"version": "0.0.1",
"dependencies": {
"echarts": "^4.2.0-rc.2",
"echarts-for-react": "^2.0.15-beta.0",
"lodash": "^4.17.11",
"react": "^16.7.0",
"react-dom": "^16.7.0"
},
"devDependencies": {
"babel-preset-env": "^1.7.0",
"babel-preset-flow": "^6.23.0",
"babel-preset-stage-1": "^6.24.1",
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1"
}
}
8.在根目录下创建webpack.config.js
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
'module': {
'rules': [
{
'test': /\.(js|jsx)?$/,
'exclude': /node_modules/,
use: [{
loader: "babel-loader",
options: {presets:["env","flow","react","es2015","stage-1"]}
}]
}
]
}
}
9.项目结构最后如下:
测试项目
在根目录下执行:
npx webpack
用浏览器打开dist目录下的index.html如下则成功:
以上简单的react+webpack架构就完成了。
编写一些工具函数
createOrSet函数接收echarts的option,propChain为属性链，value为要设置的值(不懂的可以先用)
createOrSet=(echartsOption,propChain,value)=>
{
if(_.isString(value)||_.isBoolean(value)||_.isNumber(value)||_.isArray(value)) {
_.set(echartsOption, propChain, value);
}else if(_.isObject(value)){
if(_.get(echartsOption,propChain)===undefined){
_.set(echartsOption, propChain, value);
}else{
let objBefore = _.get(echartsOption,propChain);
let objAfter = {...objBefore,...value};
_.set(echartsOption, propChain, objAfter);
}
}
return echartsOption;
}
createOrSetProp=(propChain,value)=>
{
let echartsOption = _.cloneDeep(this.state.echartsOption);
echartsOption=this.createOrSet(echartsOption,propChain,value);
this.setState({echartsOption: echartsOption});
}
编写属性配置界面
<div style={{width:'50%',float:'left'}}>
<input type="text" style={{'width': '100%',float:'left'}} placeholder="输入图表标题" value={_.get(this.state.echartsOption,'title.text','')} onChange={e=>this.createOrSetProp('title.text',e.target.value)} />
<input type="range" style={{'width': '100%',float:'left'}} defaultValue='60' min="1" max="100" onChange={(e)=>{this.createOrSetProp('grid.top',e.target.value)}}/>
<input type="range" style={{'width': '100%',float:'left'}} defaultValue='60' min="1" max="100" onChange={(e)=>{this.createOrSetProp('grid.bottom',e.target.value)}}/>
<input type="range" style={{'width': '100%',float:'left'}} defaultValue='10' min="1" max="100" onChange={(e)=>{this.createOrSetProp('grid.left',e.target.value+'%')}}/>
<input type="range" style={{'width': '100%',float:'left'}} defaultValue='10' min="1" max="100" onChange={(e)=>{this.createOrSetProp('grid.right',e.target.value+'%')}}/>
</div>
webpack+react实现echarts可视化配置的更多相关文章
- webpack react基础配置一
简单介绍webpack react基本配置,入门型: 环境配置: 依赖nodejs,官网下载最新版的nodejs:nodejs.org/en 安装完nodejs npm便自动集成了,通过npm安装其 ...
- Webpack+React项目入门——入门及配置Webpack
一.入门Webpack 参考文章:<入门Webpack,看这篇就够了> 耐心看完这篇非常有帮助 二.React+Webpack环境配置 参考文章:<webpack+react项目初体 ...
- Webpack+React+ES6 最新环境搭建和配置（2017年）
刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...
- 从零配置webpack(react+less+typescript+mobx)
本文目标 从零搭建出一套支持react+less+typescript+mobx的webpack配置 最简化webpack配置 首页要初始化yarn和安装webpack的依赖 yarn init -y ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- Webpack+React+ES6开发模式入门指南
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
- webpack+react+es6开发模式
一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...
- webpack + react + es6, 并附上自己碰到的一些问题
最近一直在学react,react的基础部分已经学得差不多了,然而自己并没有做详细的记录,有兴趣的同志可以参考阮一峰老师的教程,个人觉得挺不错的,链接如下:https://github.com/rua ...
- Webpack+React+ES6入门指南[转]
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
随机推荐
- DataTable 数据导入MS ACCESS 数据库中 数字类型字段为空的解决办法
string strSql = "insert into GongCheng (GCSY,GCBH,GCBHOLD,GCMC,GCKCJD,GCJSDW,GCSJDW,GCKCDW,GCSG ...
- Android里使用正則表達式
在Android里怎样使用正則表達式: 以验证username为例.username一般字母开头,同意字母数字下划线.5-16个字节: String regEx = "^[a-zA-Z][a ...
- 实现浮点数的四舍五入RoundOff，保留几位小数
直接上代码,非常简短 double myRound(double d,int n) { d = d*pow(10,n); d += 0.5; d = (long)d; d = d/pow(10,n); ...
- Android 提示： The connection to adb is down, and a severe error has occured.
今天早上打开Eclipse,一直提示 The connection to adb is down, and a severe error has occured,无法执行程序.重新启动Eclipse. ...
- 5.IntellijIDEA常用快捷键总结
转自:https://blog.csdn.net/qq_17586821/article/details/52554731下面的这些常用快捷键需要在实际操作中不断地体会才能真正感受到它们的方便之处. ...
- 20.计算速度最快的valarray
#include <string> #include <iostream> //用于计算,计算的性能高于vector与array #include <valarray&g ...
- CentOS6.8下完全干净卸载mysql
来源整理于 https://www.cnblogs.com/wanghuaijun/p/6398240.html 虚拟机CentOS6.8下 先执行命令查看目录是否存在mysql 文件夹: cd ...
- Map<String,String>转换json字符串
import java.util.HashMap; import java.util.Map; import net.sf.json.JSONObject; public class testJson ...
- users---显示当前登录系统的所有用户的用户列表
users命令用于显示当前登录系统的所有用户的用户列表.每个显示的用户名对应一个登录会话.如果一个用户有不止一个登录会话,那他的用户名将显示相同的次数. 语法 users(选项) 选项 --help: ...
- [Code+#4]最短路 （最短路）
[Code+#4]最短路 题目背景 在北纬 91° ,有一个神奇的国度,叫做企鹅国.这里的企鹅也有自己发达的文明,称为企鹅文明.因为企鹅只有黑白两种颜色,所以他们的数学也是以二进制为基础发展的. 比如 ...