Merge remote-tracking branch 'origin/20210819' into wangrui

runner @ 0a4f2d33

-Subproject commit f4746173cf454453e2895964ec3ed3d6a13d0e42
+Subproject commit 0a4f2d33af0abc1da40e1482e27708fb9bea6ac1

src/components/echarts/LineBar.vue

@@ -5,9 +5,7 @@
 </template>
 
 <script>
-import * as echarts from 'echarts'
-import mixinChart from '@/public/mixins/mixinChart'
-
+import mixinChart from 'runner/common/mixins/mixinChart'
 export default {
     name: 'lineBar',
 
@@ -24,7 +22,10 @@ export default {
         layout: {
             type: Object,
             default () {
-                return {}
+                return {
+                    width: '100%',
+                    height: '100%'
+                }
             }
         },
 
@@ -46,34 +47,44 @@ export default {
 
     methods: {
         initComponents () {
-            const { width = '', height = '', id = '', className = 'line-bar-chart-class' } = this.mergeChartConf() || {}
-            // 基础配置, 不含series
-            const option = this.getChartOption(this.option.base) || {}
-            const seriesData = this.getSeriesData(this.option.seriesData || []) || []
-            // if (!seriesData.length) {
-            //     throw Error('该组件图表数据只能接受length为2的数组')
-            // }
-            option.series = seriesData
+            const { width = '', height = '' } = this.layout
+            const option = this.getChartOption() || {}
             this.barChartConf = {
-                className,
-                id,
                 width,
                 height,
-                option
+                option,
+                id: 'line-bar-chart-id' + this.utils.randomStr()
             }
         },
 
         /**
-         * @method mergeChartConf 合并图表配置项
+         * @method getSeriesData 图表数据
          */
-        mergeChartConf () {
-            const defaultChartConf = {
-                width: '100%',
-                height: '100%',
-                // 不同的id（防止id重复，同一个页面，无法展示多个同组件图表）
-                id: 'line-bar-chart-id' + this.utils.randomStr()
+        getSeriesData (data) {
+            const defSeriesOpts = {
+                name: 'back',
+                type: 'bar',
+                barWidth: '4px',
+                itemStyle: {
+                    borderRadius: [0, 0, 0, 0],
+                    normal: {
+                        color: '#233549'
+                    }
+                },
+                barGap: '-100%',
+                data: []
             }
-            return this.deepMerge({}, defaultChartConf, this.layout)
+            let result = [defSeriesOpts]
+            const { seriesData = [] } = this.option
+            console.log(this.option)
+            if (seriesData.length) {
+                const temp = []
+                seriesData.forEach(item => {
+                    temp.push(this.deepMerge({}, defSeriesOpts, item))
+                })
+                result = temp
+            }
+            return result
         },
 
         /**
@@ -86,7 +97,7 @@ export default {
                 },
                 grid: {
                     left: 0,
-                    right: 10,
+                    right: 5,
                     bottom: 0,
                     top: 0,
                     containLabel: true
@@ -108,7 +119,7 @@ export default {
                 },
                 yAxis: [
                     {
-                        type: 'category',
+                        type: 'category', // y 轴左侧的数据
                         axisTick: {
                             show: false
                         },
@@ -130,7 +141,7 @@ export default {
                         },
                         data: []
                     }, {
-                        type: 'category',
+                        type: 'category', // y 轴右侧的数据
                         axisLine: {
                             show: false
                         },
@@ -161,57 +172,10 @@ export default {
                     }
                 ]
             }
-            return this.deepMerge({}, defaultOption, customOption)
-        },
+            const result = this.deepMerge({}, defaultOption, this.option.base)
+            result.series = this.getSeriesData()
 
-        /**
-         * @method getSeriesData 图表数据
-         */
-        getSeriesData () {
-            if (this.option.seriesData.length !== 2) return []
-            const defSeriesData = [
-                {
-                    name: 'back',
-                    type: 'bar',
-                    barWidth: '4px',
-                    itemStyle: {
-                        borderRadius: [0, 0, 0, 0],
-                        normal: {
-                            color: '#233549'
-                        }
-                    },
-                    barGap: '-100%',
-                    data: [1, 2, 3]
-                },
-                {
-                    name: 'show',
-                    type: 'bar',
-                    barWidth: '4px',
-                    itemStyle: {
-                        borderRadius: [0, 0, 0, 0],
-                        normal: {
-                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
-                                offset: 0,
-                                color: 'rgba(59, 150, 235, 0.1)'
-                            }, {
-                                offset: 1,
-                                color: '#3b96eb'
-                            }], false)
-                        }
-                    },
-                    markPoint: {
-                        symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODdEN0ZCRTVBMUJBMTFFQkE2NTJGMjkxNkVGRjdGMjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODdEN0ZCRTZBMUJBMTFFQkE2NTJGMjkxNkVGRjdGMjkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4N0Q3RkJFM0ExQkExMUVCQTY1MkYyOTE2RUZGN0YyOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4N0Q3RkJFNEExQkExMUVCQTY1MkYyOTE2RUZGN0YyOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvpJkncAAAI7SURBVHjafFNLaxNRFD73zjOZpE2ampa2agwtiCAuBBdxJQpq0bUrl+JjIYqb4i9w4aa7gksRXboTBC2KQl24kEILvghinybmMU1m7mTu3J6TTmAo1tnMvfd83znf+e657MILBQd8LLH+J0jfT7hV2iwZWjTHgF1G9hiythSoVz3JHy1Ux6vJRDxJvFPemLU09UmC/veXSF971zp0nP60p3OKJxWxWDa7UdosO7r6WAtTt790cmumBgXOwI4U+IGE+imnOTmqewudkFWeVMd/koKBbGZzeBiA8XzVz7XzNlTSOsxoHLIyArcbwjc8Xz6TCZ/ZPJxD/M0kmXMNLlYD565jwMkRG85hghNYfUhIcJs+TKFW9rvnfCibrfm43YjIbCIDGkos1nuWHLJghojFNEzjGtoCitQkJlmr+faPaas1Rvj1HZD9ylKRCaw2YoaTiptZqkjEYWtPVlNAVmOQLWAccX/28LHbGFChYm8P2/5Z6hENamNFaIl+ZcC9iwR3yvYqiFsk/OCeFUnY8M3Hpax4kzOCpw3fXIkr9nvGJCvDehBmuJitdszzhE8aFi3Wcl+vGo37R9LufIellrYDa0lIziwtUhOWGHWUd32rq98jHOGTE6bqHgSvt/MvT+d3vh91vAfHTHEJryqHbTS7vej9ase68rmRWSbcYMpYYrbJBK2QAjNtQArDFpI1JEuMiG4PvJgoB2R93/BLBPgEousIQmBkzrrbJ0QxRh30MAbBKDblv69qV4ABAOvFCo1MtxZ0AAAAAElFTkSuQmCC',
-                        symbolSize: [10, 10],
-                        data: []
-                    },
-                    data: [],
-                    z: 3
-                }
-            ]
-            const seriesData = [{}, {}]
-            seriesData[0] = this.deepMerge({}, defSeriesData[0], this.option.seriesData[0])
-            seriesData[1] = this.deepMerge({}, defSeriesData[1], this.option.seriesData[1])
-            return seriesData
+            return result
         }
     }
 }