欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

webpack+react实现echarts可视化配置

程序员文章站 2022-05-17 14:45:30
先上效果 开发环境要求 需要事先安装node及npm 前期准备 1.创建文件夹react-echarts-editor2.在项目根目录(以下称根目录)下创建src目录3.在项目根目录下创建dist目录4.在src目录下创建app.js文件(该文件就来一个react-echarts版的hello wo ......

先上效果

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-1 --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.项目结构最后如下:

webpack+react实现echarts可视化配置

测试项目

在根目录下执行:

npx webpack

用浏览器打开dist目录下的index.html如下则成功:

webpack+react实现echarts可视化配置

以上简单的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>

 

上一篇： 媳妇儿的二货闺蜜一和她老公生气就到我们家避难来了

下一篇： 肠粉怎么做，一起来看看

推荐阅读