Merge pull request #8 from pdsuwwz/feature/chart-echarts

📈 Charts catalog

Author: pdsuwwz

README.md

@@ -39,13 +39,13 @@
   * [ ] 表单详情(类似只读)
   * [ ] 表单 props rules Mixins 封装
 * 图表 Chart (D3, Echarts...)
-  * [ ] 仪表盘
-  * [ ] 折线图
-  * [ ] 柱状图
-  * [ ] 饼图
-  * [ ] 散点图
-  * [ ] 架构图
-  * [ ] 雷达图
+  * [x] 仪表盘
+  * [x] 折线图
+  * [x] 柱状图
+  * [x] 饼图
+  * [x] 散点图
+  * [x] 架构图
+  * [x] 雷达图
   * [ ] 混合图
 * 工具 Tools
   * [x] axios 封装

package.json

@@ -15,6 +15,7 @@
     "@fortawesome/vue-fontawesome": "~2.0.0",
     "axios": "^0.20.0",
     "core-js": "^3.6.5",
+    "echarts": "^4.9.0",
     "element-ui": "^2.13.2",
     "js-cookie": "^2.2.1",
     "vue": "^2.6.11",

src/modules/ChartsTest/components/dialog/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="wrap-dialog">
+    <el-dialog
+      :title="title"
+      :visible.sync="dialogVisible"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+    >
+      <div>
+        <slot />
+      </div>
+      <div slot="footer">
+        <el-button @click="dialogVisibleHide">
+          取 消
+        </el-button>
+        <el-button
+          type="primary"
+          @click="dialogVisibleHide"
+        >
+          确 定
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+export default {
+  components: {},
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      deep: true,
+      default: () => false
+    },
+    title: {
+      type: String,
+      deep: true,
+      default: () => '图标'
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {},
+  watch: {},
+  beforeCreate () {
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+    dialogVisibleHide () {
+      this.$emit('dialogVisibleHide', false)
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.wrap-dialog {
+
+}
+</style>

src/modules/ChartsTest/components/layout/index.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="layout-wrap">
+    <div class="wrap-flex">
+      <div
+        v-for="(item, index) in chartsData"
+        :key="index"
+        class="wrap-flex-item"
+        @click="onClcikItem(item)"
+      >
+        <div class="wrap-img">
+          <img
+            :src="item.imgUrl"
+            alt=""
+          >
+        </div>
+        <div class="wrap-label">
+          <h1 :title="item.name">
+            {{ item.name }}
+          </h1>
+        </div>
+      </div>
+    </div>
+    <Dialog
+      :dialog-visible="DialogVisible"
+      :title="DialogTitle"
+      @dialogVisibleHide="dialogVisibleHide"
+    >
+      <template #default>
+        <div id="echarts-container" />
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Dialog from '@/modules/ChartsTest/components/dialog/index.vue'
+import Echarts from 'echarts'
+import echartsUtils from '@/modules/ChartsTest/utils/echarts'
+export default {
+  components: {
+    Dialog
+  },
+  props: {
+    chartsData: {
+      type: Array,
+      deep: true,
+      default: () => {}
+    }
+  },
+  data () {
+    return {
+      DialogVisible: false,
+      DialogTitle: ''
+    }
+  },
+  computed: {},
+  watch: {},
+  beforeCreate () {
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+    dialogVisibleHide (visible) {
+      this.DialogVisible = visible
+    },
+    onClcikItem ({ data, name, type }) {
+      this.DialogVisible = true
+      this.DialogTitle = name
+      this.$nextTick(() => {
+        const dom = document.querySelector('#echarts-container')
+        const echarts = Echarts.init(dom)
+        echarts.clear()
+        echarts.setOption(echartsUtils[type](data))
+      })
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.layout-wrap {
+  .wrap-flex {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    .wrap-flex-item {
+      width: 350px;
+      height: 300px;
+      box-sizing: border-box;
+      border: 1px solid rgb(238, 238, 238);
+      margin: 20px 12px;
+      border-radius: 5px;
+      transition: all .2s;
+      box-shadow: 0px 0px 0px transparent;
+      padding: 20px 12px;
+      background-image: linear-gradient(180deg, rgb(253, 252, 251) 0%, rgb(210, 210, 210) 100%);
+      &:hover {
+        border: 1px solid #ccc;
+        box-shadow: 0px 0px 5px rgb(236, 236, 236);
+        cursor: pointer;
+      }
+      .wrap-img {
+          text-align: center;
+        img {
+          width: 294px;
+        }
+      }
+      .wrap-label {
+        height: 38px;
+        line-height: 38px;
+        h1 {
+          width: 294px;
+          font-size: 20px;
+          margin: 0px auto;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+      }
+    }
+  }
+  /deep/ #echarts-container {
+    width: 100%;
+    height: 400px;
+  }
+}
+</style>