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 ...
随机推荐
- reactor模式与java nio
Reactor是由Schmidt, Douglas C提出的一种模式,在高并发server实现中广泛採用. 改模式採用事件驱动方式,当事件出现时,后调用对应的事件处理代码(Event Handl ...
- nyoj33 蛇形填数
蛇形填数 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描写叙述 在n*n方陈里填入1,2,...,n*n,要求填成蛇形.比如n=4时方陈为: 10 11 12 1 9 16 ...
- 去除ListView 上下边界蓝色或黄色阴影
默认的情况下,在 ListView 滑动到顶部或者是底部的时候,会有黄色或者蓝色的阴影出现.在不同的版本号上解决办法是不同的,在 2.3 版本号之前能够在 ListView 的属性中通过设置 andr ...
- light oj 1317
Description You probably have played the game "Throwing Balls into the Basket". It is a si ...
- bzoj1193: [HNOI2006]马步距离（贪心+bfs）
1193: [HNOI2006]马步距离 题目:传送门 题解: 毒瘤题... 模拟赛时的一道题,刚开始以为是一道大难题...一直在拼命找规律 结果.... 还是说正解吧: 暴力的解法肯定是直接bfs, ...
- thinkphp5项目--个人博客（一）
thinkphp5项目--个人博客(一) 项目地址 fry404006308/personalBlog: personalBloghttps://github.com/fry404006308/per ...
- python 统计文件top IP
lines = ''' 1.2.2.3 1.21.29.19.... ''' cnt = {} for line in lines.split(): if line not in cnt: cnt[l ...
- hdoj--1408--盐水的故事（技巧）
盐水的故事 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Subm ...
- Spring MVC模式示例（采用解耦控制器）
Product package com.mstf.bean; import java.io.Serializable; /** * Product类,封装了一些信息,包含三个属性 * @author ...
- 服务器TCP连接中 TIME_WAIT 状态过多
今天查看服务器的TCP连接数,发现其中 TIME_WAIT 状态的太多了: # netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a ...