【看板展示】【主要对bar/line图展示效果的微调】

kanban-client/README.md

@@ -19,7 +19,11 @@
 * 新增本地测试用的webpack.dev.config.js，调整package.json运行参数
 * table滚屏间隔参数支持自定义，修改默认间隔算法为行数(>=5)，(单位 秒 )
 * 使用模块化的echarts-for-react代替手动引入的echarts.min.js
-
+##### 20170919
+* pie展示调整，根据宽高计算图例、饼图的展示效果
+* 微调bar、line的各个元素定位，更适应不同大小的展示
+* 修改打包文件路径，匹配整合项目中的文件路径
+* 布局块之间margin为1，以正确显示边框线
 #### 运行
 * 本地运行
 ```

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

@@ -11,7 +11,7 @@
   background-color: #010101;
 }
 .rc-table-header-item {
-  font-weight: normal;
+  font-weight: bold;
 }
 .rc-table-title {
   text-align: center;

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

@@ -18,7 +18,7 @@
 
 .@{prefixCls}-header-item {
     // font-size: 1rem;
-    font-weight: normal;
+    font-weight: bold;
 }
 
 .@{prefixCls}-title {

kanban-client/app/component/Layout.js

@@ -30,7 +30,7 @@ class BasicLayout extends React.Component {
     items: [],
     onLayoutChange: (l) => { },
     cols: 10, // 屏幕横宽最大值为10
-    margin: [0, 0], // 元素间隔为0
+    margin: [1, 1], // 元素间隔为0
     verticalCompact: false,
     useCSSTransforms: false, // 不使用动画
     autoSize: true

kanban-client/app/component/converter.js

@@ -40,13 +40,24 @@ function titleConfig(title) {
 function formConfig(model) {
     let { type, header, config, layout } = model;
     let { fontSize, fieldstyle, valuestyle, columns, data} = config;
+    data = data.map((d) => {
+        d.field = {
+            text: d.field.text,
+            style: parseStyleStr(d.field.style)
+        };
+        d.value = {
+            text: d.value.text,
+            style: parseStyleStr(d.value.style)
+        };
+        return d;
+    });
     let c = {
         type: 'form',
         config: {
             fontSize: fontSize || getFontSize(),
             header: Renders[header] || header,
-            fieldStyle: parseStr(fieldstyle),
-            valueStyle: parseStr(valuestyle),
+            fieldStyle: parseStyleStr(fieldstyle),
+            valueStyle: parseStyleStr(valuestyle),
             columns,
             data
         },
@@ -57,12 +68,13 @@ function formConfig(model) {
 
 function tableConfig(model) {
     let { type, config, layout } = model;
-    let { fontSize, title, cls, render, columns, data, rowHeight} = config;
+    let { fontSize, title, cls, render, columns, data, rowHeight, interval} = config;
     return {
         type: 'table',
         config: {
             fontSize: fontSize || getFontSize(),
             rowHeight: rowHeight,
+            refreshInterval: interval,
             title: Renders[title] || title,
             render: Renders[render],
             columns: columns.map((v, i) => {
@@ -95,11 +107,12 @@ function barConfig(model) {
                     }
                 },
                 grid: {
-                    top: layout.h < 60 ? '30%' : '25%',
-                    bottom: '15%'
+                    top: layout.h * getScreenSize().height / 100 < 310 ? '35%' : '28%',
+                    bottom: layout.h * getScreenSize().height / 100 < 310 ? '20%' : '15%',
                 },
                 legend: {
-                    top: '15%',
+                    top: layout.h * getScreenSize().height / 100 < 310 ? '20%' : '18%',
+                    right: '5%',
                     padding: 0,
                     orient: 'horizontal',
                     itemGap: layout.w,
@@ -114,7 +127,7 @@ function barConfig(model) {
                     type: xtype,
                     data: xf,
                     name: xtitle,
-                    nameGap: 0,
+                    nameGap: 5,
                     nameRotate: 270,
                     nameTextStyle: {
                         fontSize: getFontSize() * .7
@@ -160,11 +173,12 @@ function lineConfig(model) {
                     trigger: 'axis'
                 },
                 grid: {
-                    top: layout.h < 60 ? '30%' : '25%',
-                    bottom: '15%'
+                    top: layout.h * getScreenSize().height / 100 < 310 ? '35%' : '28%',
+                    bottom: layout.h * getScreenSize().height / 100 < 310 ? '20%' : '15%',
                 },
                 legend: {
-                    top: '15%',
+                    top: layout.h * getScreenSize().height / 100 < 310 ? '20%' : '18%',
+                    right: '5%',
                     padding: 0,
                     orient: 'horizontal',
                     itemGap: layout.w,
@@ -180,7 +194,7 @@ function lineConfig(model) {
                     data : xf,
                     name: xtitle,
                     nameRotate: 270,
-                    nameGap: 0,
+                    nameGap: 5,
                     nameTextStyle: {
                         fontSize: fontSize || getFontSize() * .7
                     },
@@ -240,7 +254,7 @@ function getChartsTitle(fontSize, layout, title, subtitle) {
     var title = {
         show: true,
         text: title,
-        subtext: subtitle,
+        subtext: layout.h * getScreenSize().height / 100 < 300 ? '' : subtitle,
         textAlign: 'center',
         textStyle: {
             verticalAlign: 'top',
@@ -291,7 +305,10 @@ function getLineSeries(fontSize, series) {
             normal: {
                 show: true,
                 position: 'inside',
-                formatter: '{c}'
+                formatter: '{c}',
+                textStyle: {
+                    fontSize: fontSize || getFontSize() * .7
+                }
             }
         }
     }
@@ -351,7 +368,10 @@ function getLayout(layout) {
     return l;
 }
 
-function parseStr(str) {
+function parseStyleStr(str) {
+    if(!str) {
+        return {};
+    }
     if(typeof str == 'object') {
         return str;
     }

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

@@ -7,12 +7,13 @@ import { converter } from './converter.js';
 import RenderUtils from '../utils/RenderUtils.js';
 import URL from '../constants/url.dev.json';
 
-import tempdata from '../data/testpie.json';
+import tempdata from '../data/tempdata.json';
 
 class Factory extends React.Component {
 
     constructor(props) {
         super(props);
+        this.dev = 'local';
         this.index = 0;
         this.state = {
             titleHeight: 0,
@@ -102,10 +103,13 @@ class Factory extends React.Component {
 
     componentWillMount() {
         let { code } = this.props;
-        this.getModelConfig(code[0]);
-        // this.setState({
-        //     model: converter(tempdata.data[0]),
-        // });
+        if(this.dev == 'local') {
+            this.setState({
+                model: converter(tempdata.data[0]),
+            });
+        }else {
+            this.getModelConfig(code[0]);
+        }
     }
 
     componentDidMount() {

kanban-client/app/main.dev.js

@@ -9,7 +9,7 @@ import './assets/FixedBox/index.less';
 import './assets/Title/index.less';
 import './assets/MessageBox/msgbox.less';
 
-var code = '52EFB432511';
+var code = '54215ECB516';
 
 ReactDOM.render(
     <Factory code={[code]} />,

kanban-client/webpack.config.js

@@ -5,12 +5,12 @@ var HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
     entry: {
-        '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',
+        'static/js/boardshow/src/whatwg-fetch': 'whatwg-fetch',
+        'static/js/boardshow/src/main': './app/main.js',
+        'static/js/boardshow/src/title': './app/src/Title/Title.jsx',
+        'static/js/boardshow/src/table': './app/component/Table.jsx',
+        'static/js/boardshow/src/form': './app/src/Form/index.js',
+        'static/js/boardshow/src/chart': './app/src/Charts/ECharts.js',
         vendor: ['react', 'react-dom']
     },
     output: {
@@ -73,14 +73,14 @@ module.exports = {
         // 样式分离打包
         new ExtractTextPlugin({
             filename: (getPath) => {
-                return getPath('css/[name].css').replace('src/', '').replace('css/js', 'css');
+                return getPath('static/css/boardshow/[name].css').replace('/static/js/boardshow/src/', '/');
             },
             allChunks: true
         }),
         // 公共模块打包
         new webpack.optimize.CommonsChunkPlugin({ 
             names: ['vendor', 'manifest'],
-            filename: 'static/js/[name].js'
+            filename: 'static/js/boardshow/src/[name].js'
         }),
         // 生成入口html
         new HtmlWebpackPlugin({                        //根据模板插入css/js等生成最终HTML