可視化配置工具

時間 2020-06-06

標籤可視化配置工具简体版

原文原文鏈接

先上效果

開發環境要求

須要事先安裝node及npmhtml

前期準備

1.建立文件夾react-echarts-editor
2.在項目根目錄(如下稱根目錄)下建立src目錄
3.在項目根目錄下建立dist目錄
4.在src目錄下建立app.js文件(該文件就來一個react-echarts版的hello world)node

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文件react

<!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.jsonwebpack

npm init -y

7.在根目錄下建立使用命令安裝webpack、babel、react、echarts 、lodashweb

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以下:npm

{
  "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.jsjson

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.項目結構最後以下:瀏覽器

測試項目

在根目錄下執行:babel

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。