添加g2组件

Author: fanxiaocheng

template/config/index.js

@@ -30,7 +30,7 @@ module.exports = {
     assetsPublicPath: '/',
     proxyTable: {
       '/api': {
-        target: 'http://try6.edusoho.cn',
+        target: 'http://t5.edusoho.cn',
         changeOrigin: true
       }
     },

template/src/assets/fonts/close-icon/iconfont.css

@@ -1,6 +1,7 @@
 @import '~cd-vue/src/styles/index.less';
 
-@import '../fonts/cvp-icon.css';
+@import '../fonts/cvp-icon/cvp-icon.css';
+@import '../fonts/close-icon/iconfont.css';
 
 @import './variables.less';
 @import './mixins.less';

template/src/assets/fonts/close-icon/iconfont.eot

@@ -1,11 +1,11 @@
 <template>
   <transition name="modal" v-if="show">
     <div class="modal-mask">
-      <div class="modal-wrapper">
-        <div class="modal-dialog">
-          <div class="modal-header" :class="modalSize">
+      <div :class="`modal-wrapper-${position}`" @click.self="maskClose">
+        <div class="modal-dialog" :class="modalSize">
+          <div class="modal-header">
             <slot name="close">
-              <i class="groupon-icon groupon-icon-guanbi" @click="closeClickListener"></i>
+              <i class="iconfont icon-modal-close" @click="closeClickListener"></i>
             </slot>
             <slot name="header">
               default header
@@ -36,8 +36,26 @@ export default {
       show: false
     }
   },
-  props: ['closeBtn', 'size'],
+  props: {
+    size: {
+      type: String,
+      default: 'md',
+    },
+    position: {
+      type: String,
+      default: 'top',
+    },
+    maskCloseable: {
+      type: Boolean,
+      default: true,
+    }
+  },
   methods: {
+    maskClose() {
+      if(this.maskCloseable) {
+        this.closeModal();
+      }
+    },
     closeClickListener() {
       this.closeModal();
     },
@@ -76,11 +94,22 @@ export default {
     transition: opacity .3s ease;
   }
 
-  .modal-wrapper {
+  .modal-wrapper-center {
     display: table-cell;
     vertical-align: middle;
   }
 
+  .modal-wrapper-top {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    padding-top: 30px;
+  }
+
   .modal-dialog {
     width: 600px;
     margin: 0px auto;
@@ -98,10 +127,16 @@ export default {
       margin-top: 0;
       font-weight: 400;
     }
-    .groupon-icon {
+    .iconfont {
       position: absolute;
       right: 0;
       top: 0;
+      cursor: pointer;
+      opacity: .5;
+      color: #000;
+      &:hover {
+        opacity: 1;
+      }
     }
   }
 

template/src/assets/fonts/close-icon/iconfont.svg

@@ -0,0 +1,133 @@
+import DataSet from '@antv/data-set';
+// 等这次
+export default class BaseG2 {
+  constructor(chart, data, config) {
+    this.chart = chart;
+    this.data = data;
+    this.config = config;
+    // 
+    this.key1 = '';
+    this.key2 = '';
+    this.number = 0;  // 为了区分多条和单条折线图
+    this.yKey = '';  // 规定多种数据时，采用'yKey'的值
+    this.yVal = '';  // 规定多种数据时，采用'yVal'的值
+    this.setData();
+  }
+
+  setData() {
+    for(let value in this.data[0]) {
+      this.number++;
+      this[`key${this.number}`] = value;
+    }
+
+    if(this.number <= 2) {
+      this.yKey = this.key2;
+    }
+  }
+
+  init() {
+    this.setSource();
+    this.setScale();
+    this.setAxis();
+    this.setTooltip();
+    this.setEvents();
+    if(this.setPositioin && typeof this.setPositioin === 'function') {
+      this.setPositioin();
+    }
+    this.done();
+  }
+
+  /*
+   * 配置图形的数据源
+   * https://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_source
+  */
+  setSource() { 
+    const number = this.number;
+    if(number >= 3) {
+      // 处理折线图等有多条折线图的情况
+      const ds = new DataSet();
+      const dv = ds.createView().source(this.data);
+      const fields = [];
+
+      this.yKey = 'yKey';
+      this.yVal = 'yVal'; // 数据项超过2个时，将多个项目合并后统一命名为yVal
+      for(let i = 2;i <= number; i++) {
+        fields.push(this[`key${i}`]);
+      }
+      
+      dv.transform({
+        type: 'fold',
+        fields,
+        key: this.yKey,
+        value: this.yVal,
+      });
+      this.chart.source(dv, {
+        [this.key1]: {
+          range: [0, 1]
+        }
+      });
+    } else {
+      this.chart.source(this.data);
+    }
+  }
+
+  /*
+   * 对指定的数据字段进行列定义
+   * https://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_scale
+  */
+  setScale() {
+    if(this.config.scaleConfig) {
+      this.chart.scale(this.config.scaleConfig || {});
+    }
+  }
+  
+  /*
+   * 配置坐标轴
+   * https://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_axis
+  */
+  setAxis() {
+    const axisConfig = this.config.axisConfig;
+    if(axisConfig) {
+      for (const key in axisConfig) {
+        this.chart.axis(key, axisConfig[key]);
+      }
+    }
+  }
+
+  /*
+   * 配置图例
+   * https://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_legend
+  */
+  setLegend() {
+    const legendConfig = this.config.legendConfig;
+    if(legendConfig) {
+      for(const filed in legendConfig) {
+        this.chart.legend(field, legendConfig[filed] || {});
+      }
+    }
+  }
+
+  /*
+   * 配置鼠标移到图形上时的弹层
+   * https://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_tooltip
+  */
+  setTooltip() {
+    if(this.tooltipConfig) {
+      this.chart.tooltip(this.tooltipConfig || {});
+    }
+  }
+
+  setEvents() {
+    // 注册事件
+    if(this.config['event']) {
+      console.log('event注册');
+      for(const name in this.config['event']) {
+        this.chart.on(name, this.config['event'][name])
+      }
+    }
+  }
+
+  done() {
+    this.chart.render();
+  }
+}

template/src/assets/fonts/close-icon/iconfont.ttf

@@ -0,0 +1,82 @@
+import { Chart } from '@antv/g2';
+
+// 创建唯一的 ID
+let uniqueId = 0;
+function generateUniqueId() {
+  uniqueId += 1;
+  return `el-g2-${uniqueId}`;
+}
+
+export default function createG2(__operation) {
+  return {
+    data() {
+      return {
+        chart: null,
+        chartId: generateUniqueId(),
+      };
+    },
+    props: {
+      height: {
+        type: Number,
+        default: 300,
+      },
+      data: {
+        type: Array,
+        default: function() {
+          return [];
+        }
+      },
+      config: {
+        type: Object,
+        default: function() {
+          return {};
+        }
+      },
+      title: String,
+    },
+    watch: {
+      data: function(newData, oldData) {
+        if (oldData && newData) {
+          this.chart.changeData(newData);
+        }
+      },
+      height: function(val, oldVal) {
+        if (oldVal && val) {
+          this.chart.changeHeight(val);
+        }
+      },
+    },
+    mounted() {
+      this.initChart();
+    },
+    beforeDestroy() {
+      this.chart.destroy();
+      this.chart = null;
+      this.chartId = null;
+    },
+    methods: {
+      initChart() {
+        const { height, data } = this;
+        const chart = new Chart({
+          id: this.chartId, // 这里还是需要用id，或者是如下的container
+          height,
+          forceFit: true,
+          background: {
+            fill: '#fff',
+          },
+          padding: this.config.padding || 50,
+        });
+        
+        this.chart = chart;
+        __operation(chart, data, this.config);
+      },
+    },
+    render(createElement) {
+      return createElement('div', {
+        attrs: {
+          id: this.chartId,
+        },
+      });
+    },
+  };
+}