初始化

.gitignore

@@ -0,0 +1,55 @@
+# Created by .ignore support plugin (hsz.mobi)
+### JetBrains template
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff:
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/dictionaries
+
+# Sensitive or high-churn files:
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.xml
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+
+# Gradle:
+.idea/**/gradle.xml
+.idea/**/libraries
+.idea/
+
+# Mongo Explorer plugin:
+.idea/**/mongoSettings.xml
+
+## File-based project format:
+*.iws
+
+## Plugin-specific files:
+
+# IntelliJ
+/out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+/node_modules/
+
+##打包的文件
+dll/
+dist/
+
+## yarn 
+yarn.lock

config/config.js

@@ -0,0 +1,285 @@
+const path = require('path');
+const webpack = require('webpack');
+const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
+const glob = require("glob");
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+// const CopyWebpackPlugin = require("copy-webpack-plugin");
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const packageJson = require("./../package.json");
+const HappyPack = require('happypack');
+const os = require('os');
+const happyThreadPool = HappyPack.ThreadPool({size: os.cpus().length});
+let pathVars = require("./pathVars");
+let config = {};
+
+/*----------------------------------- page ---------------------------------*/
+//测试页面
+let files = [].concat(
+    glob.sync(pathVars.testPath + `/Custom*/index.html`),
+);
+console.log("测试页面\n", files);
+let entryDev = {
+    vendor: Object.keys(packageJson.dependencies)
+};
+let pageAry = [];
+files.forEach(function (filePath) {
+    let tempAry = filePath.split('/');
+    //demo文件夹名
+    let typeName = tempAry[tempAry.length - 3];
+    let chunkName = tempAry[tempAry.length - 2];
+    let htmlName = chunkName + "/index.html";
+
+    let obj = {};
+    obj["filePath"] = filePath;
+    obj["chunkName"] = chunkName;
+    obj["htmlName"] = htmlName;
+    obj["entryJs"] = pathVars.testPath + "/" + chunkName + "/index.js";
+    entryDev[chunkName] = obj["entryJs"];
+    pageAry.push(obj);
+});
+
+
+//图表主js文件
+let chartFiles = glob.sync(pathVars.srcPath + "/chart/Custom*/Custom*.js");
+console.log("图表主js文件\n", chartFiles);
+let chartAry = [];
+let entryDist = {};
+chartFiles.forEach(function (filePath) {
+    let tempAry = filePath.split('/');
+    let chunkName = tempAry[tempAry.length - 2];
+    let obj = {};
+    obj["chunkName"] = chunkName;
+    chartAry.push(obj);
+    //
+    entryDist[chunkName] = filePath;
+});
+
+
+/*-----------------------------  entry  ------------------------------*/
+
+config["entryDev"] = entryDev;
+
+
+config["entryDist"] = entryDist;
+
+
+/*-----------------------------  devServer  ------------------------------*/
+let devServer = {
+    // open: true,
+    publicPath: "/",
+    contentBase: pathVars.devPath,
+    hot: true,
+    inline: true,
+    port: 3000,
+    host: 'localhost',
+    watchOptions:{
+        ignored:/node_modules/,
+        aggregateTimeout:500
+    }
+};
+config["devServer"] = devServer;
+
+
+/*-----------------------------  output  ------------------------------*/
+let outputDev = {
+    path: pathVars.distPath,
+    publicPath: "/",     // 表示资源的发布地址，当配置过该属性后，打包文件中所有通过相对路径引用的资源都会被配置的路径所替换(如：css中背景图的路径)
+    filename: "[name]/main.js"
+};
+config["outputDev"] = outputDev;
+
+let outputDist = {
+    path: pathVars.distPath,
+    publicPath: "/",
+    filename: "[name]_[chunkhash:5].js",
+    library: "[name]",
+    libraryTarget: "umd"
+//  libraryExport: "default"
+};
+config["outputDist"] = outputDist;
+
+
+/*-----------------------------  externals  ------------------------------*/
+if (process.env.NODE_ENV === "noThird") {
+    console.log("==================", process.env.NODE_ENV);
+    config["externals"] = {
+        'three': {
+            commonjs: 'THREE',
+            commonjs2: 'THREE',
+            amd: 'THREE',
+            root: 'THREE'
+        },
+        'zrender': {
+            commonjs: 'zrender',
+            commonjs2: 'zrender',
+            amd: 'zrender',
+            root: 'zrender'
+        },
+        'gsap': {
+            commonjs: 'gsap',
+            commonjs2: 'gsap',
+            amd: 'gsap',
+            root: 'gsap'
+        }
+    };
+} else {
+    config["externals"] = {};
+    config["outputDist"]["filename"]="[name].js"
+}
+
+let resolve = {
+    alias: {
+        utils: path.resolve(__dirname, '../src/utils/'),
+    }
+};
+config["resolve"] = resolve;
+
+
+/*-----------------------------  module  ------------------------------*/
+let rules = [
+    {
+        test: /\.js$/,
+        // exclude: pathVars.nodeModulesPath,
+        loader: "babel-loader",
+    },
+    {
+        test: /\.(glsl|vs|fs|vert|frag)$/,
+        // exclude: [pathVars.nodeModulesPath, pathVars.dllPath],
+        use: ["raw-loader", "glslify-loader"]
+    }
+]
+
+let imgRuleDev = {
+    test: /\.(png|jpg|gif)$/,
+    use: [
+        {
+            loader: 'file-loader',
+            options: {
+                publicPath: '/',
+                name: 'imgInChart/[name]_[hash:5].[ext]'
+            }
+        }
+    ]
+}
+let imgRuleDist = {
+    test: /\.(png|jpg|gif)$/,
+    use: [
+        {
+            loader: 'file-loader',
+            options: {
+                publicPath: '../../static/',
+                name: 'imgInChart/[name]_[hash:5].[ext]'
+            }
+        }
+    ]
+};
+
+config["moduleBaseDev"] = {rules: rules.concat(imgRuleDev)};
+config["moduleBaseDist"] = {rules: rules.concat(imgRuleDist)};
+
+
+//---------------------------------- plugin -----------------------------------//
+let pluginBase = [
+    new webpack.DllReferencePlugin({
+        context: pathVars.rootPath,
+        manifest: require(pathVars.dllPath + '/manifest.json')
+    }),
+    new HappyPack({
+        id: 'babel',
+        loaders: ["babel-loader"],
+        threadPool: happyThreadPool
+    }),
+    new webpack.DefinePlugin({
+        my_ENV: JSON.stringify(process.env.my_ENV)
+    })
+];
+
+const htmlBase = [];
+pageAry.forEach(function (page) {
+    const htmlPlugin = new HtmlWebpackPlugin({
+        title: '',
+        template: page["filePath"],
+        filename: page["htmlName"],
+        inject: 'body',
+        chunks: ["manifest", "vendor", "common", page["chunkName"]],
+        chunksSortMode: 'none'
+    });
+    htmlBase.push(htmlPlugin);
+});
+
+//------------------- dev
+let pluginsDev = [
+    new webpack.HotModuleReplacementPlugin()
+];
+config["pluginsDev"] = pluginBase.concat(pluginsDev, htmlBase);
+
+
+//------------------- dist
+let pluginDist = [
+    new CleanWebpackPlugin(pathVars.distPath,
+        {
+            root: pathVars.rootPath,
+            verbose: true
+        }
+    ),
+    new webpack.NoEmitOnErrorsPlugin(),
+
+
+];
+config["pluginDist"] = pluginBase.concat(pluginDist);
+
+//----------------------------------- optimization  ---------------------------//
+config["optimizationDev"] = {
+    minimize: false,
+    splitChunks: {
+        chunks: "all", //initial
+        minSize: 30 * 1024, //模块大于30k会被抽离到公共模块 也就是说每个页面的js不会大于30k
+        minChunks: 1, //模块出现1次就会被抽离到公共模块
+        maxAsyncRequests: 5, //异步模块，一次最多只能被加载5个
+        maxInitialRequests: 3, //入口模块最多只能加载3个
+        name: true,
+        cacheGroups: {
+            default: {
+                chunks: "all",
+                name: "common",
+                test: /[\\/]src[\\/]/,
+                minChunks: 3,
+                priority: -20,
+                reuseExistingChunk: true
+            },
+            vendors: {
+                chunks: "all",
+                name: "vendor",
+                test: /[\\/]node_modules[\\/]/,
+                minChunks: 1,
+                priority: -10
+            }
+        }
+    },
+    runtimeChunk: {
+        name: "manifest"
+    }
+};
+//
+config["optimizationDist"] = {
+    minimize: false,
+    minimizer: [
+        new UglifyJsPlugin({
+            cache: true,
+            parallel: true,
+            uglifyOptions: {
+                warnings: false,
+                compress: {
+                    // warnings: false,
+                    drop_debugger: true,
+                    drop_console: true
+                }
+            }
+        }),
+        new OptimizeCssAssetsPlugin({})
+    ],
+    splitChunks: {}
+
+};
+module.exports = config;

config/pathVars.js

@@ -0,0 +1,28 @@
+const path = require('path');
+let pathVars = {};
+
+//项目根目录
+pathVars.rootPath = path.resolve(__dirname, '../');
+
+//源文件目录
+pathVars.srcPath = path.resolve(pathVars.rootPath, './src');
+
+//预编译文件存放目录
+pathVars.dllPath = path.resolve(pathVars.rootPath, './dll');
+
+//开发测试目录
+pathVars.devPath = path.resolve(pathVars.rootPath, './dev');
+
+//
+pathVars.staticPath = path.resolve(pathVars.rootPath, './dev/static');
+
+//发布目录
+pathVars.distPath = path.resolve(pathVars.rootPath, './dist');
+
+//node_modules目录
+pathVars.nodeModulesPath = path.resolve(pathVars.rootPath, './node_modules');
+
+//测试目录
+pathVars.testPath = path.resolve(pathVars.rootPath, './test');
+
+module.exports = pathVars;

config/webpack.dev.config.js

@@ -0,0 +1,12 @@
+let config = require("./config");
+module.exports = {
+    mode: 'development',
+    devtool: 'eval-source-map',
+    entry: config.entryDev,
+    output: config.outputDev,
+    devServer:config.devServer,
+    plugins: config.pluginsDev,
+    module: config.moduleBaseDev,
+    optimization: config["optimizationDev"],
+    resolve: config.resolve
+};

config/webpack.dist.config.js

@@ -0,0 +1,12 @@
+let config = require("./config");
+
+module.exports = {
+    mode:"production",
+    entry: config.entryDist,
+    output: config.outputDist,
+    externals: config.externals,
+    plugins: config.pluginDist,
+    module: config.moduleBaseDist,
+    optimization:config["optimizationDist"],
+    resolve: config.resolve
+};

config/webpack.dll.config.js

@@ -0,0 +1,51 @@
+/*
+ * 用来预编译第三方库*/
+
+const webpack = require('webpack');
+const pathVars = require('./pathVars');
+const packageJson = require("./../package.json");
+// const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+//
+module.exports = {
+    mode: 'development',
+    entry: {
+        /*第三方库*/
+        dll: Object.keys(packageJson.dependencies)
+    },
+    output: {
+        path: pathVars.dllPath,
+        filename: "[name].js",
+        library: '[name]',
+        libraryTarget: 'umd',
+        umdNamedDefine: true
+    },
+    plugins: [
+        //new webpack.NoEmitOnErrorsPlugin(),
+        new webpack.DllPlugin({
+            // path 定义 manifest 文件生成的位置 [name]的部分由entry的名字替换
+            path: pathVars.dllPath + '/manifest.json',
+            // name 是dll暴露的对象名，要跟 output.library 保持一致
+            name: '[name]',
+            // context 是解析包路径的上下文，这个要跟接下来配置的dll一致
+            context: pathVars.dllPath
+        })
+    ],
+    module: {
+        rules: [
+            {
+                test: /\.(css|less)$/,
+                //exclude: [pathVars.nodeModulesPath],
+                use: [
+                    "style-loader",
+                    "css-loader",
+                    "less-loader"
+                ],
+            },
+            {
+                test: /\.js$/,
+                //exclude: pathVars.nodeModulesPath,
+                loader: "babel-loader"
+            }
+        ]
+    }
+};

package.json

@@ -0,0 +1,54 @@
+{
+  "name": "charts",
+  "version": "1.0.0",
+  "description": "图表二次开发",
+  "main": "index.js",
+  "scripts": {
+    "clear": "npm cache clean --force",
+    "dll": "webpack --config config/webpack.dll.config.js --progress --colors",
+    "dev": "webpack-dev-server --config config/webpack.dev.config.js --progress --colors",
+    "dist": "cross-env NODE_ENV=third ./node_modules/.bin/webpack --config config/webpack.dist.config.js --display-error-details --progress --colors"
+  },
+  "repository": {
+    "type": "git",
+    "url": "http://192.168.1.67:3000/productDpartment/chartDp.git"
+  },
+  "keywords": [
+    "chart"
+  ],
+  "author": "丁月明",
+  "license": "ISC",
+  "dependencies": {
+    "gsap": "^1.20.2",
+    "jquery": "^3.5.1",
+    "three": "^0.110.0",
+    "three-obj-loader": "^1.1.3",
+    "three-orbitcontrols": "^2.1.1",
+    "three-stats": "^1.0.1",
+    "zrender": "^4.2.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-stage-0": "^6.24.1",
+    "clean-webpack-plugin": "^1.0.0",
+    "cross-env": "^5.2.0",
+    "css-loader": "^2.1.0",
+    "file-loader": "^3.0.1",
+    "glob": "^7.1.3",
+    "happypack": "^5.0.1",
+    "html-webpack-plugin": "^3.2.0",
+    "json-loader": "^0.5.7",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "style-loader": "^0.23.1",
+    "uglifyjs-webpack-plugin": "^2.1.1",
+    "url-loader": "^0.5.8",
+    "webpack": "^4.28.3",
+    "webpack-cli": "^3.2.0",
+    "webpack-dev-server": "^3.1.14",
+    "webpack-glsl-loader": "^1.0.1",
+    "glslify-loader": "^2.0.0",
+    "raw-loader": "^3.0.0"
+  }
+}

src/chart/CustomChartBar/CustomChartBar.js

@@ -0,0 +1,108 @@
+import utils from 'utils/index.js';
+import echarts from './echarts.min.js';
+
+import styleConfig from './config/styleConfig';
+import dataConfig from './config/dataConfig';
+
+export default class CustomChartBar{
+    constructor(dom, opts){
+        opts = opts || {};
+        if(opts.getConfig === true){
+            return;
+        }
+
+        this.chart = null;
+        this._dom = dom;
+
+        this.init(opts);
+    }
+
+    init(opts){
+        this.chart = echarts.init(this._dom);
+        this.setOption(opts);
+    }
+
+    setOption(opts, data){
+        // this.chart.setOption(this.mergeOption(opts, data), {notMerge:true});
+        this.chart.setOption(opts, {notMerge:true});
+    }
+
+
+    mergeOption(style, dataConfig){
+        style = utils.deepCopy(style);
+        style.xAxis.data = dataConfig.defaultData[dataConfig.configList[0].defaultKey];
+        style.color = style.color.color;
+        style.yAxis = {
+            type:'value'
+        }
+
+        style.series = [];
+        let series = dataConfig.configList[1].defaultKey;
+        if(Array.isArray(series) === true){
+            series.forEach( item => {
+                style.series.push({
+                    data:dataConfig.defaultData[item],
+                    type:'bar'
+                })
+            })
+        }else{
+            style.series = [
+                {
+                  data: dataConfig.defaultData[series],
+                  type: 'bar'
+                }
+              ]
+        }
+        
+        return style;
+    }
+
+    getConfig(){
+        return{
+            styleConfig:utils.deepCopy(styleConfig),
+            dataConfig:utils.deepCopy(dataConfig),
+            fun:{
+                getColName: this.getColName,
+                themeMerge: this.themeMerge,
+            }
+        }
+    }
+    themeMerge(style, dataConfig){
+        style = utils.deepCopy(style);
+        style.xAxis.data = dataConfig.xAxis[0].data;
+        style.color = style.color.color;
+        style.yAxis = {
+            type:'value'
+        }
+
+        style.series = [];
+        let series = dataConfig.series;
+        if(Array.isArray(series) === true){
+            series.forEach( item => {
+                style.series.push({
+                    data:item.data,
+                    type:'bar'
+                })
+            })
+        }
+        
+        return style;
+    }
+
+    getColName(dataConfig){
+        let column = {};
+        dataConfig = JSON.parse(JSON.stringify(dataConfig));
+        let dataConfigKey = dataConfig.configList;
+        column.xAxis = [dataConfigKey[0].defaultKey];
+        column.series = dataConfigKey[1].defaultKey;
+        return column;
+    }
+
+    resize(){
+        this.chart.resize();
+    }
+
+    dispose(){
+        this.chart.dispose();
+    }
+}

src/chart/CustomChartBar/config/dataConfig.js

@@ -0,0 +1,19 @@
+const dataConfig = {
+    configList:[{
+        name:'分类名称',
+        type:'xAxis',
+        comType:'single',
+        defaultKey:'商品'
+    },{
+        name:'数值名称',
+        type:'series',
+        comType:'multi',
+        defaultKey:['销量', '收入']
+    }],
+    defaultData:{
+        '销量': [5, 20, 36, 10, 10, 20],
+        '收入': [50, 100, 136, 70, 40, 80],
+        "商品": ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
+    }
+}
+export default dataConfig;

src/chart/CustomChartBar/config/styleConfig.js

@@ -0,0 +1,88 @@
+const styleConfig = {
+    xAxis:{
+        name:'X轴',
+        sub:{
+            show:{
+                name:'是否显示',
+                comType:'radio',
+                defaultValue:true,
+                comInfo:[{
+                        'name': '是',
+                        'value': true
+                    },
+                    {
+                        'name': '否',
+                        'value': false
+                }]
+            },
+            name:{
+                name:'坐标轴名称',
+                comType:'input',
+                defaultValue:''
+            },
+            nameTextStyle:{
+                name:'坐标轴名称样式',
+                sub:{
+                    color:{
+                        name:'颜色',
+                        comType:'colorPicker',
+                        defaultValue:'#fff'
+                    },
+                    fontSize:{
+                        name:'字体大小',
+                        comType:'slider',
+                        defaultValue:12,
+                        comInfo:{
+                            min:12,
+                            max:50
+                        }
+                    }
+                }
+            },
+            axisLine:{
+                name:'轴线设置',
+                sub:{
+                    show:{
+                        name:'是否显示',
+                        comType:'radio',
+                        defaultValue:true,
+                        comInfo:[{
+                                'name': '是',
+                                'value': true
+                            },
+                            {
+                                'name': '否',
+                                'value': false
+                        }]
+                    },
+                    lineStyle:{
+                        name:'样式',
+                        sub:{
+                            width:{
+                                name:'宽度',
+                                comType:'slider',
+                                defaultValue:1,
+                                comInfo:{
+                                    min:1,
+                                    max:10
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    },
+    color:{
+        name:'系列色',
+        sub:{
+            color:{
+                name:'系列色',
+                comType: 'colorPickerList',
+                defaultValue:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+            }
+        }
+    }
+}
+
+export default styleConfig;

src/utils/index.js

@@ -0,0 +1,20 @@
+const Utils = {
+    deepCopy: function(obj){
+        if(obj === null){
+            return obj;
+        }
+        var result = Array.isArray(obj) ? [] : {};
+        for (var key in obj) {
+            if (obj.hasOwnProperty(key)) {
+                if (typeof obj[key] === 'object' && obj[key]!==null) {
+                    result[key] = this.deepCopy(obj[key]);   //递归复制
+                } else {
+                    result[key] = obj[key];
+                }
+            }
+        }
+        return result;
+    }
+}
+
+export default Utils;

test/CustomChartBar/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        *{
+            margin:0;
+            padding:0;
+        }
+        html, body{
+            width: 100%;
+            height: 100%;
+        }
+        #container{
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+</head>
+<body>
+    <div id="container"></div>
+</body>
+</html>

test/CustomChartBar/index.js

@@ -0,0 +1,12 @@
+import chart from '../../src/chart/CustomChartBar/CustomChartBar.js';
+import Utils from '../utils.js';
+
+let config = new chart(document.querySelector('#container'), {getConfig:true}).getConfig();
+let current_chart = new chart(document.querySelector('#container'));
+
+
+let styleConfig = config.styleConfig;
+let dataConfig = config.dataConfig;
+console.log(123, Utils.parseStyle(styleConfig), dataConfig)
+current_chart.setOption(Utils.parseStyle(styleConfig), dataConfig);
+

test/utils.js

@@ -0,0 +1,17 @@
+const Utils = {
+    parseStyle: function(style){
+        let result = {};
+
+        for(var key in style){
+            if(style[key].sub){
+                result[key] = this.parseStyle(style[key].sub);
+            }else{
+                result[key] = style[key].defaultValue;
+            }
+        }
+
+        return result;
+    }
+}
+
+export default Utils;