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 ...
随机推荐
- Python 安装 httplib2
简述 httplib2 是一个使用 Python 写的支持的非常全面的 HTTP 特性的库.需要 Python2.3 或更高版本的运行环境,0.5.0 版及其以后包含了对 Python3 的支持. 简 ...
- 【LeetCode】Merge Intervals 题解 利用Comparator进行排序
题目链接Merge Intervals /** * Definition for an interval. * public class Interval { * int start; * int e ...
- HDOJ 5008 Boring String Problem
后缀数组+RMQ+二分 后缀数组二分确定第K不同子串的位置 , 二分LCP确定可选的区间范围 , RMQ求范围内最小的sa Boring String Problem Time Limit: 6000 ...
- 【Android】资源系列(二) -- 文件原样保留的资源assets和res/raw文件夹
这两个文件夹都能够存放文件.而在打包的时候被原样保留. 那用这两个文件夹可以做什么事呢? 1.放一个apk,要用的时候调出来.免得去下载server下载. 2.放一个sql,当app数据库非常大的时候 ...
- PForDelta的介绍论文
ttp://paperhub.s3.amazonaws.com/7558905a56f370848a04fa349dd8bb9d.pdf FOR(Frame-Of-Reference),PFor(Pa ...
- Atitit.html解析器的选型 jsoup nsoup ，java c# .net 版本号
Atitit.html解析器的选型 jsoup nsoup ,java c# .net 版本号 1. 框架选型的要求 1 1.1. 文档多 1 1.2. 跨平台 1 2. html解析器特性: 1 2 ...
- 单点登录(二)使用Cookie+File实现单点登录登出（附源代码）
上一篇文章<单点登录(一)使用Cookie+File实现单点登录>中,我们实现了单点登录的功能. 本文作为上一篇文章的扩展部分,加入"单点登出"功能. 源代码下载:链接 ...
- win7 一个电脑接入多个显示器
Display 在第一个选项display,选中某一个屏幕的时候 如果被选中的屏幕已经是main display,那么下方会显示this is your currently main display ...
- k-meas非监督聚类分析
实验名称: k-meas非监督聚类分析 一.实验目的和要求 目的: 加深对非监督学习的理解和认识 掌握聚类方法K-Means算法的设计方法 要求: 根据聚类数据,采用k-Means聚类 ...
- <Sicily>Brackets Matching
一.题目描述 Let us define a regular brackets sequence in the following way: Empty sequence is a regular s ...