【看板展示】【样式引用修改、pie根据宽高调整展示形式】

kanban-client/README.md

@@ -18,6 +18,7 @@
 * 调整form数据解析错误问题
 * 新增本地测试用的webpack.dev.config.js，调整package.json运行参数
 * table滚屏间隔参数支持自定义，修改默认间隔算法为行数(>=5)，(单位 秒 )
+* 使用模块化的echarts-for-react代替手动引入的echarts.min.js
 
 #### 运行
 * 本地运行

kanban-client/app/assets/Form/index.css

@@ -23,7 +23,6 @@ body,
   overflow: hidden;
 }
 .rc-form-header {
-  font-size: large;
   font-weight: bold;
 }
 .rc-form-container {

kanban-client/app/assets/Form/index.less

@@ -24,7 +24,6 @@ html,body,#root{
     overflow: hidden;
 }
 .@{prefixCls}-header {
-    font-size: large;
     font-weight: bold;
 }
 .@{prefixCls}-container{

kanban-client/app/component/Table.jsx

@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom';
 import Table from '../src/Table/index.js';
 import Animate from 'rc-animate';
 import renders from '../utils/RenderUtils.js';
+import '../assets/Table/index.less';
+import '../assets/Table/animation.less';
 
 class TableModel extends React.Component {
 	constructor(props) {
@@ -137,7 +139,7 @@ class TableModel extends React.Component {
 			});
 		}
 	}
-
+	
 	changeData() {
 		this.setState({
 			data: this.dataArr[this.dataIndex]

kanban-client/app/component/converter.js

@@ -215,11 +215,8 @@ function lineConfig(model) {
 function pieConfig(model) {
     let { type, config, layout } = model;
     let { fontSize, title, subtitle, series} = config;
-    series = series instanceof Array ? series : [series];
-    series.map((a,b) => {})
     series = series.map((v, i) => {
         v.value = v.data;
-        v.name += `_@_${v.data}`;
         return v;
     });
     return {
@@ -229,11 +226,7 @@ function pieConfig(model) {
                 title: getChartsTitle(fontSize, layout, title, subtitle),
                 tooltip: {
                     trigger: 'item',
-                    // formatter: '{a} <br/>{b} : {c} ({d}%)'
-                    formatter: function(a, b, c, d, e) {
-                        let ns = a.data.name.split('_@_');
-                        return ns[0] + ' : ' + ns[1] + '\n' + a.percent + '%';
-                    }
+                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                 },
                 legend: getPieLegend(fontSize, layout, series),
                 series: getPieSeries(fontSize, layout, series)
@@ -312,19 +305,17 @@ function getLineSeries(fontSize, series) {
 }
 
 function getPieSeries(fontSize, layout, series) {
-    let data = series;
+    let data = series instanceof Array ? series : [series];
     const model = {
         type: 'pie',
-        radius: '45%',
-        center: ['30%','50%'],
+        radius: `${layout.w * .7}%`,
+        center: getScreenSize().height * layout.h / 100 > 500 ? ['50%', '60%'] : (layout.w * getScreenSize().width / 100 < 450 ? ['50%', '55%'] : ['35%', '50%']),
         label: {
             normal: {
-                show: data.length > 7 ? false : true,
-                position: 'inside',
                 textStyle: {
                     fontSize: fontSize || getFontSize() * 0.7
                 },
-                formatter: '{d}%'
+                formatter: '{b}:  {c} \n {d}%'
             }
         }
     }
@@ -335,19 +326,13 @@ function getPieSeries(fontSize, layout, series) {
 }
 
 function getPieLegend(fontSize, layout, series) {
-    series.sort((a,b) => b.data - a.data);
-
     let legend = {
-        width: '25%',
-        right: '5%',
-        orient: 'vertical',
-        padding: layout.w / 20,
+        show: (layout.w * getScreenSize().width / 100 > 450 || layout.h * getScreenSize().height / 100 > 500),
+        right: (getScreenSize().height * layout.h / 100 > 500 ? 'auto' : '5%'),
+        orient: (getScreenSize().height * layout.h / 100 > 500 ? 'horizontal' : 'vertical'),
+        padding: 0,
         itemGap: layout.w / 10,
         top: '20%',
-        formatter: function (name) {
-            let s = name.split('_@_');
-            return s[0] +' : '+ s[1]
-        },
         textStyle: {
             fontSize: fontSize || getFontSize() * 0.7
         },

kanban-client/app/component/factory.dev.js

@@ -102,10 +102,10 @@ class Factory extends React.Component {
 
     componentWillMount() {
         let { code } = this.props;
-        // this.getModelConfig(code[0]);
-        this.setState({
-            model: converter(tempdata.data[0]),
-        });
+        this.getModelConfig(code[0]);
+        // this.setState({
+        //     model: converter(tempdata.data[0]),
+        // });
     }
 
     componentDidMount() {

kanban-client/app/component/factory.js

@@ -7,8 +7,6 @@ import { converter } from './converter.js';
 import RenderUtils from '../utils/RenderUtils.js';
 import URL from '../constants/url.json';
 
-// import tempdata from '../data/error.json';
-
 class Factory extends React.Component {
 
     constructor(props) {
@@ -103,9 +101,6 @@ class Factory extends React.Component {
     componentWillMount() {
         let { code } = this.props;
         this.getModelConfig(code[0]);
-        // this.setState({
-        //     model: converter(tempdata.data[0]),
-        // });
     }
 
     componentDidMount() {

kanban-client/app/main.js

@@ -2,13 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Factory from './component/factory.js';
 
-import './assets/Table/index.less';
-import './assets/Table/animation.less';
-import './assets/Form/index.less';
-import './assets/FixedBox/index.less';
-import './assets/Title/index.less';
-import './assets/MessageBox/msgbox.less';
-
 var code = window.location.search.substring(6);
 
 ReactDOM.render(

kanban-client/app/src/FixedBox/FixedBox.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import renders from '../../utils/RenderUtils.js';
+import '../../assets/FixedBox/index.less';
 
 export default class FixedBox extends React.Component {
     static propTypes = {

kanban-client/app/src/Form/Form.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import FormItem from './FormItem.jsx';
 import renders from '../../utils/RenderUtils.js';
+import '../../assets/Form/index.less';
 
 export default class Form extends React.Component {
     static propTypes = {

kanban-client/app/src/MsgBox/MessageBox.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import '../../assets/MessageBox/msgbox.less';
 
 export default class MessageBox extends React.Component {
     static propTypes = {

kanban-client/app/src/Title/Title.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import renders from '../../utils/RenderUtils.js';
+import '../../assets/Title/index.less';
 
 export default class Title extends React.Component {
   static propTypes = {

kanban-client/webpack.config.js

@@ -5,17 +5,14 @@ var HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
     entry: {
-        'src/whatwg-fetch': 'whatwg-fetch',
-        'src/main': './app/main.js',
-        'src/title': './app/src/Title/Title.jsx',
-        'src/table': './app/component/Table.jsx',
-        'src/form': './app/src/Form/index.js',
-        'src/chart': './app/src/Charts/ECharts.js',
+        'static/js/whatwg-fetch': 'whatwg-fetch',
+        'static/js/main': './app/main.js',
+        'static/js/title': './app/src/Title/Title.jsx',
+        'static/js/table': './app/component/Table.jsx',
+        'static/js/form': './app/src/Form/index.js',
+        'static/js/chart': './app/src/Charts/ECharts.js',
         vendor: ['react', 'react-dom']
     },
-    externals: {
-        echarts: 'echarts'
-    },
     output: {
         path: path.resolve(__dirname, './build'),
         filename: '[name].bundle.js',
@@ -82,7 +79,8 @@ module.exports = {
         }),
         // 公共模块打包
         new webpack.optimize.CommonsChunkPlugin({ 
-            names: ['vendor', 'manifest']
+            names: ['vendor', 'manifest'],
+            filename: 'static/js/[name].js'
         }),
         // 生成入口html
         new HtmlWebpackPlugin({                        //根据模板插入css/js等生成最终HTML

kanban-client/webpack.dev.config.js

@@ -58,12 +58,6 @@ module.exports = {
                 }
             }
         }),
-        // 生产环境
-        // new webpack.DefinePlugin({
-        //     "process.env": {
-        //         NODE_ENV: JSON.stringify("production")
-        //     }
-        // }),
         // 样式分离打包
         new ExtractTextPlugin({
             filename: (getPath) => {