no message

Former-commit-id: 0a49e22e5a531c2df8fa90244bedb6e0ac4297c6 [formerly 0a49e22e5a531c2df8fa90244bedb6e0ac4297c6 [formerly 0a49e22e5a531c2df8fa90244bedb6e0ac4297c6 [formerly 0a49e22e5a531c2df8fa90244bedb6e0ac4297c6 [formerly a570816c9de27ef7bc3b80c1cd5bb8bd0f2c9c13 [formerly 39ab0a504140b305df41c0d209d913079d210ef7]]]]]
Former-commit-id: 7a56aafdafea6ee6ffd2b046959b88c471eaab15
Former-commit-id: 7466b6ec8a35116a499addb8630047ca7576bacc
Former-commit-id: 98b9f572a6b21a6ee02483794ecd0dd0cf6873b3 [formerly 8bbac95c8d9e75c185affb7e7a6f1fddc7cc6ed5]
Former-commit-id: c3909adc020a418579d7b3a2034689bba0e35593
Former-commit-id: 35cf98c0c012ee69dad83556f6654ab074730d9b
Former-commit-id: ce8623ae25b423c26062e738d0df9276bee3c387
Former-commit-id: 214996c73a86f6b46d2414225b6660358f585946
Former-commit-id: fe121e22a74d82a43357212cd157c01eeda108e5

design.sketch.REMOVED.git-id

@@ -1 +1 @@
-59cc75ac4ddfd1c2192b1543df281217eb5d77bf
+4bcd95302c6d5c8ed1e44b96e2ba6978b84bea68

package.json

@@ -19,6 +19,7 @@
     "clipboard-polyfill": "^2.4.1",
     "countup.js": "^1.9.3",
     "dayjs": "^1.6.7",
+    "echarts": "^4.1.0",
     "element-ui": "^2.0.11",
     "file-saver": "^1.3.3",
     "github-markdown-css": "^2.10.0",
@@ -34,6 +35,7 @@
     "path-posix": "^1.0.0",
     "quill": "^1.3.4",
     "simplemde": "^1.11.2",
+    "v-charts": "^1.17.6",
     "v-contextmenu": "^2.7.0",
     "vue": "^2.5.2",
     "vue-grid-layout": "^2.1.11",

src/components/core/d2-container/components/d2-container-full.vue

@@ -38,6 +38,7 @@ export default {
     flex-grow: 1;
     padding: 20px;
     overflow: auto;
+    position: relative;
   }
   .d2-container-full__footer {
     padding: 20px;

src/components/demo/register.js

@@ -1,5 +1,7 @@
 import Vue from 'vue'
 
-Vue.component('d2-demo-link-btn', () => import('@/components/demo/d2-demo-link-btn'))
+import d2DemoLinkBtn from '@/components/demo/d2-demo-link-btn'
+
+Vue.component('d2-demo-link-btn', d2DemoLinkBtn)
 Vue.component('d2-demo-page-header', () => import('@/components/demo/d2-demo-page-header'))
 Vue.component('d2-demo-page-cover', () => import('@/components/demo/d2-demo-page-cover'))

src/main.js

@@ -8,6 +8,9 @@ import i18n from './i18n'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 
+// v-charts
+import VCharts from 'v-charts'
+
 // font-awesome
 import '@/assets/library/font-awesome-4.7.0/css/font-awesome.min.css'
 
@@ -53,6 +56,7 @@ import bigdataTable from '@/plugin/vue-bigdata-table'
 import buildConfig from '../config/index'
 
 Vue.use(ElementUI)
+Vue.use(VCharts)
 Vue.use(contentmenu)
 
 Vue.use(pluginImport)

src/menu/index.js

@@ -116,11 +116,37 @@ const demoComponents = {
   ])('/demo/components/')
 }
 
+// 路由菜单 组件
+const demoCharts = {
+  path: '/demo/charts',
+  title: '图表',
+  icon: 'line-chart',
+  children: (pre => [
+    { path: `${pre}index`, title: '图表首页' },
+    {
+      path: `${pre}list`,
+      title: '图表',
+      children: [
+        {
+          path: `${pre}list/line`,
+          title: '折线图',
+          children: [
+            { path: `${pre}list/line/demo1`, title: '示例' },
+            { path: `${pre}list/line/demo2`, title: '横坐标的倾斜' },
+            { path: `${pre}list/line/demo3`, title: '堆叠面积图' },
+            { path: `${pre}list/line/demo4`, title: '显示指标数值' }
+          ]
+        }
+      ]
+    }
+  ])('/demo/charts/')
+}
+
 // 路由菜单 组件库
 const demoElement = {
   path: '/demo/element',
   title: 'Element 组件库',
-  icon: 'puzzle-piece',
+  icon: 'cubes',
   children: (pre => [
     { path: `${pre}index`, title: '组件库首页' },
     {
@@ -210,6 +236,7 @@ const demoElement = {
 export const side = [
   demoPlugins,
   demoComponents,
+  demoCharts,
   demoElement
 ]
 
@@ -225,6 +252,7 @@ export default [
     children: [
       demoPlugins,
       demoComponents,
+      demoCharts,
       demoElement,
       {
         title: '空菜单演示',

src/pages/demo/charts/index/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <d2-container type="full">
+    <d2-demo-page-cover
+      title="图表"
+      sub-title="集成图表组件">
+      <img :src="`${$assetsPublicPath}static/image/icon/500/charts.png`">
+    </d2-demo-page-cover>
+  </d2-container>
+</template>

src/pages/demo/charts/list/_mixin/list.js

@@ -0,0 +1,9 @@
+export default {
+  data () {
+    return {
+      pubSetting: {
+        height: '100%'
+      }
+    }
+  }
+}

src/pages/demo/charts/list/line/demo1/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <d2-container type="full">
+    <template slot="header">示例</template>
+    <div class="inner">
+      <ve-line :data="chartData" v-bind="pubSetting"></ve-line>
+    </div>
+    <template slot="footer">
+      <d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import list from '@/pages/demo/charts/list/_mixin/list.js'
+export default {
+  mixins: [
+    list
+  ],
+  data: function () {
+    return {
+      chartData: {
+        columns: ['日期', '访问用户', '下单用户', '下单率'],
+        rows: [
+          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
+          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
+          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
+          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
+          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
+          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.inner {
+  position: absolute;
+  top: 20px;
+  right:  20px;
+  bottom: 20px;
+  left: 20px;
+}
+</style>

src/pages/demo/charts/list/line/demo2/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <d2-container type="full">
+    <template slot="header">横坐标的倾斜</template>
+    <div class="inner">
+      <ve-line :data="chartData" :extend="extend" v-bind="pubSetting"></ve-line>
+    </div>
+    <template slot="footer">
+      <d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import list from '@/pages/demo/charts/list/_mixin/list.js'
+export default {
+  mixins: [
+    list
+  ],
+  data: function () {
+    this.extend = {
+      'xAxis.0.axisLabel.rotate': 45
+    }
+    return {
+      chartData: {
+        columns: ['日期', '访问用户', '下单用户', '下单率'],
+        rows: [
+          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
+          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
+          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
+          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
+          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
+          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 },
+          { '日期': '1/7', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
+          { '日期': '1/8', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
+          { '日期': '1/9', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
+          { '日期': '1/10', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
+          { '日期': '1/11', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
+          { '日期': '1/12', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.inner {
+  position: absolute;
+  top: 20px;
+  right:  20px;
+  bottom: 20px;
+  left: 20px;
+}
+</style>

src/pages/demo/charts/list/line/demo3/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <d2-container type="full">
+    <template slot="header">堆叠面积图</template>
+    <div class="inner">
+      <ve-line :data="chartData" :settings="chartSettings" v-bind="pubSetting"></ve-line>
+    </div>
+    <template slot="footer">
+      <d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import list from '@/pages/demo/charts/list/_mixin/list.js'
+export default {
+  mixins: [
+    list
+  ],
+  data () {
+    this.chartSettings = {
+      stack: { '用户': ['访问用户', '下单用户'] },
+      area: true
+    }
+    return {
+      chartData: {
+        columns: ['日期', '访问用户', '下单用户', '下单率'],
+        rows: [
+          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
+          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
+          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
+          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
+          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
+          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.inner {
+  position: absolute;
+  top: 20px;
+  right:  20px;
+  bottom: 20px;
+  left: 20px;
+}
+</style>

src/pages/demo/charts/list/line/demo4/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <d2-container type="full">
+    <template slot="header">显示指标数值</template>
+    <div class="inner">
+      <ve-line :data="chartData" :extend="extend" v-bind="pubSetting"></ve-line>
+    </div>
+    <template slot="footer">
+      <d2-demo-link-btn title="更多示例和文档" link="https://v-charts.js.org"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import list from '@/pages/demo/charts/list/_mixin/list.js'
+export default {
+  mixins: [
+    list
+  ],
+  data () {
+    this.extend = {
+      series: {
+        label: {
+          normal: {
+            show: true
+          }
+        }
+      }
+    }
+    return {
+      chartData: {
+        columns: ['日期', '访问用户', '下单用户', '下单率'],
+        rows: [
+          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
+          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
+          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
+          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
+          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
+          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.inner {
+  position: absolute;
+  top: 20px;
+  right:  20px;
+  bottom: 20px;
+  left: 20px;
+}
+</style>

src/router/index.js.REMOVED.git-id

@@ -1 +1 @@
-89e063c3ddd8c257b9e34b7c88bc6d39efbc4ad5
+75041a6a688f975cc1b62327c7bb6c7fa8358afc