先上效果

开发环境要求

需要事先安装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 ...

随机推荐

对jvm进行gc的时间、数量、jvm停顿时间的监控
在jdk中一个类可以获得gc的信息: public static void main(String[] args) { List<GarbageCollectorMXBean> garba ...
Android 开发者不得不面对的六个问题
一份关于移动应用开发的调查报告显示,Androdid开发者对谷歌的移动操作系统平台的兴趣正在下降.尽管依然有79%的开发者表示对Android “非常感兴趣”,但调查报告显示,一些迹象表明在2012到 ...
APP-午饭去哪吃
走到这个快节奏的城市中.部门聚餐.朋友吃饭这些都是日常生活中时有发生的事情,往往吃的东西都是千篇一律,图的也仅仅剩下的是环境了.那么.非常纠结常常去的地方,怎么办呢?来吧.我们随机摇一个吧! wate ...
第8章5节《MonkeyRunner源代码剖析》MonkeyRunner启动执行过程-执行測试脚本
MonkeyRunner在准备好AndroidDebugBridge和DeviceMonitor等服务之后,就基本上是攻克了和目标设备通信的问题了,那往下须要做的就是把測试脚本执行起来了. 178 p ...
树莓派安装node.js
因为树莓派是arm架构,node.js上并没有提供arm架构的二进制包下载. 试过使用apt包管理安装和直接node.js源代码编译安装(编译了四五个小时...),都没有成功,报非法指令错误,预计还是 ...
Atitit.运行cmd 命令行 php
Atitit.运行cmd 命令行 php 1. 运行cmd 命令行,调用系统命令的基础 1 1.1. 实际运行模式 1 1.2. 空格的问题 1 1.3. 中文路径的问题.程序文件读取编码设置 1 1 ...
HTML5 内联 SVG
SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形 ...
[JZOJ3383] [NOIP2013模拟] 太鼓达人解题报告(数位欧拉)
来源:XLk 摘录 HDU2894 Description 七夕祭上,Vani牵着cl的手,在明亮的灯光和欢乐的气氛中愉快地穿行.这时,在前面忽然出现了一台太鼓达人机台,而在机台前坐着的是刚刚被精英队 ...
Pure functions
In the next few sections, we’ll write two versions of a function called add_time, which calculates t ...
Nginx-虚拟主机配置问题
Nginx-虚拟主机配置问题标签(空格分隔): linux,php,nginx,larave 这两天突然想配置lnmp环境,学习下Nginx配置结果就遇到了下边的问题 Nginx: server下的 ...

webpack+react实现echarts可视化配置