wip: vite版重构中

src/views/components-demo/echarts/echart-data.ts

@@ -0,0 +1,306 @@
+import { EChartsOption } from 'echarts'
+import { EChartsOption as EChartsWordOption } from 'echarts-wordcloud'
+
+export const lineOptions: EChartsOption = {
+  xAxis: {
+    data: [
+      '一月',
+      '二月',
+      '三月',
+      '四月',
+      '五月',
+      '六月',
+      '七月',
+      '八月',
+      '九月',
+      '十月',
+      '十一月',
+      '十二月'
+    ],
+    boundaryGap: false,
+    axisTick: {
+      show: false
+    }
+  },
+  grid: {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    top: 30,
+    containLabel: true
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross'
+    },
+    padding: [5, 10]
+  },
+  yAxis: {
+    axisTick: {
+      show: false
+    }
+  },
+  legend: {
+    data: ['预期', '实际']
+  },
+  series: [
+    {
+      name: '预期',
+      smooth: true,
+      type: 'line',
+      data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123],
+      animationDuration: 2800,
+      animationEasing: 'cubicInOut'
+    },
+    {
+      name: '实际',
+      smooth: true,
+      type: 'line',
+      itemStyle: {},
+      data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
+      animationDuration: 2800,
+      animationEasing: 'quadraticOut'
+    }
+  ]
+}
+
+export const pieOptions: EChartsOption = {
+  title: {
+    text: '用户访问来源',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b} : {c} ({d}%)'
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left',
+    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
+  },
+  series: [
+    {
+      name: '用户访问来源',
+      type: 'pie',
+      radius: '55%',
+      center: ['50%', '60%'],
+      data: [
+        { value: 335, name: '直接访问' },
+        { value: 310, name: '邮件营销' },
+        { value: 234, name: '联盟广告' },
+        { value: 135, name: '视频广告' },
+        { value: 1548, name: '搜索引擎' }
+      ]
+    }
+  ]
+}
+
+export const barOptions: EChartsOption = {
+  title: {
+    text: '每周用户活跃量',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  xAxis: {
+    type: 'category',
+    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+    axisTick: {
+      alignWithLabel: true
+    }
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      name: '活跃量',
+      data: [13253, 34235, 26321, 12340, 24643, 1322, 1324],
+      type: 'bar'
+    }
+  ]
+}
+
+export const pieOptions2: EChartsOption = {
+  title: {
+    text: '用户访问来源',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b} : {c} ({d}%)'
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left'
+  },
+  series: [
+    {
+      name: '访问来源',
+      type: 'pie',
+      radius: '55%',
+      center: ['50%', '50%'],
+      data: [
+        {
+          value: 335,
+          name: '直接访问'
+        },
+        {
+          value: 310,
+          name: '邮件营销'
+        },
+        {
+          value: 274,
+          name: '联盟广告'
+        },
+        {
+          value: 235,
+          name: '视频广告'
+        },
+        {
+          value: 400,
+          name: '搜索引擎'
+        }
+      ].sort(function (a, b) {
+        return a.value - b.value
+      }),
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      }
+    }
+  ]
+}
+
+export const wordOptions: EChartsWordOption = {
+  tooltip: {},
+  series: [
+    {
+      type: 'wordCloud',
+      gridSize: 2,
+      sizeRange: [12, 50],
+      rotationRange: [-90, 90],
+      shape: 'pentagon',
+      width: 600,
+      height: 400,
+      drawOutOfBound: true,
+      textStyle: {
+        color: function () {
+          return (
+            'rgb(' +
+            [
+              Math.round(Math.random() * 160),
+              Math.round(Math.random() * 160),
+              Math.round(Math.random() * 160)
+            ].join(',') +
+            ')'
+          )
+        }
+      },
+      emphasis: {
+        textStyle: {
+          shadowBlur: 10,
+          shadowColor: '#333'
+        }
+      },
+      data: [
+        {
+          name: 'Sam S Club',
+          value: 10000,
+          textStyle: {
+            color: 'black'
+          },
+          emphasis: {
+            textStyle: {
+              color: 'red'
+            }
+          }
+        },
+        {
+          name: 'Macys',
+          value: 6181
+        },
+        {
+          name: 'Amy Schumer',
+          value: 4386
+        },
+        {
+          name: 'Jurassic World',
+          value: 4055
+        },
+        {
+          name: 'Charter Communications',
+          value: 2467
+        },
+        {
+          name: 'Chick Fil A',
+          value: 2244
+        },
+        {
+          name: 'Planet Fitness',
+          value: 1898
+        },
+        {
+          name: 'Pitch Perfect',
+          value: 1484
+        },
+        {
+          name: 'Express',
+          value: 1112
+        },
+        {
+          name: 'Home',
+          value: 965
+        },
+        {
+          name: 'Johnny Depp',
+          value: 847
+        },
+        {
+          name: 'Lena Dunham',
+          value: 582
+        },
+        {
+          name: 'Lewis Hamilton',
+          value: 555
+        },
+        {
+          name: 'KXAN',
+          value: 550
+        },
+        {
+          name: 'Mary Ellen Mark',
+          value: 462
+        },
+        {
+          name: 'Farrah Abraham',
+          value: 366
+        },
+        {
+          name: 'Rita Ora',
+          value: 360
+        },
+        {
+          name: 'Serena Williams',
+          value: 282
+        },
+        {
+          name: 'NCAA baseball tournament',
+          value: 273
+        },
+        {
+          name: 'Point Break',
+          value: 265
+        }
+      ]
+    }
+  ]
+}

src/views/components-demo/echarts/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <el-alert
+      effect="dark"
+      :closable="false"
+      title="统一封装 Echart 组件，自适应宽度，只需传入 options 与 height 属性即可展示对应的图表。"
+      type="info"
+      style="margin-bottom: 20px"
+    />
+
+    <el-row :gutter="20">
+      <el-col :span="10">
+        <div class="chart-wrap">
+          <echart :height="'300px'" :options="pieOptions" />
+        </div>
+      </el-col>
+      <el-col :span="14">
+        <div class="chart-wrap">
+          <echart :options="barOptions" :height="'300px'" />
+        </div>
+      </el-col>
+      <el-col :span="14">
+        <div class="chart-wrap">
+          <echart :options="lineOptions" :height="'300px'" />
+        </div>
+      </el-col>
+      <el-col :span="10">
+        <div class="chart-wrap">
+          <echart :options="pieOptions2" :height="'300px'" />
+        </div>
+      </el-col>
+      <el-col :span="24">
+        <div class="chart-wrap">
+          <echart :options="wordOptions" :height="'300px'" />
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts" name="EchartsDemo">
+import { lineOptions, pieOptions, barOptions, pieOptions2, wordOptions } from './echart-data'
+import Echart from '_c/Echart/index.vue'
+</script>
+
+<style lang="less" scoped>
+.chart-wrap {
+  padding: 10px;
+  margin-bottom: 20px;
+  background-color: #fff;
+  border-radius: 5px;
+}
+</style>

src/views/components-demo/preview/index.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <el-alert
+      effect="dark"
+      :closable="false"
+      title="抽取于 Element 的图片预览组件进行改造，实现函数式调用组件，无需基于图片进行点击预览。"
+      type="info"
+      style="margin-bottom: 20px"
+    />
+
+    <el-alert
+      effect="dark"
+      :closable="false"
+      title="有底图预览。"
+      type="info"
+      style="margin-bottom: 20px"
+    />
+
+    <div class="img-wrap">
+      <div
+        v-for="(item, $index) in imgList"
+        :key="item"
+        class="img-item"
+        @click="showHasImg($index)"
+      >
+        <img :src="item" alt="" />
+      </div>
+    </div>
+
+    <el-alert
+      effect="dark"
+      :closable="false"
+      title="无底图预览。"
+      type="info"
+      style="margin-top: 20px; margin-bottom: 20px"
+    />
+    <el-button type="primary" @click="showNoImg">点击预览</el-button>
+
+    <el-alert
+      effect="dark"
+      :closable="false"
+      title="点击事件，包含图片点击事件以及关闭事件。"
+      type="info"
+      style="margin-top: 20px; margin-bottom: 20px"
+    />
+    <el-button type="primary" @click="showImg">点击预览</el-button>
+  </div>
+</template>
+
+<script setup lang="ts" name="PreviewDemo">
+import { ref } from 'vue'
+import { createImgPreview } from '_c/Preview'
+import { Message } from '_c/Message'
+
+const imgList = ref<string[]>([
+  'https://img1.baidu.com/it/u=657828739,1486746195&fm=26&fmt=auto&gp=0.jpg',
+  'https://img0.baidu.com/it/u=3114228356,677481409&fm=26&fmt=auto&gp=0.jpg',
+  'https://img1.baidu.com/it/u=508846955,3814747122&fm=26&fmt=auto&gp=0.jpg',
+  'https://img1.baidu.com/it/u=3536647690,3616605490&fm=26&fmt=auto&gp=0.jpg',
+  'https://img1.baidu.com/it/u=4087287201,1148061266&fm=26&fmt=auto&gp=0.jpg',
+  'https://img2.baidu.com/it/u=3429163260,2974496379&fm=26&fmt=auto&gp=0.jpg'
+])
+
+function showHasImg(i: number) {
+  createImgPreview({
+    index: i,
+    imageList: imgList.value
+  })
+}
+
+function showNoImg() {
+  createImgPreview({
+    index: 0,
+    imageList: imgList.value
+  })
+}
+
+function showImg() {
+  createImgPreview({
+    index: 0,
+    imageList: imgList.value,
+    onClose: (i: number) => {
+      Message.info('关闭的图片索引：' + i)
+    },
+    onSelect: (i: number) => {
+      Message.info('当前点击的图片索引：' + i)
+    }
+  })
+}
+</script>
+
+<style lang="less" scoped>
+.img-wrap {
+  display: flex;
+  justify-content: center;
+
+  .img-item {
+    position: relative;
+    width: 400px;
+    height: 300px;
+    margin: 0 10px;
+    overflow: hidden;
+    cursor: pointer;
+
+    img {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+</style>