卡片组件和折线图组件

src/components/cardComponents/ShowCard.vue

@@ -0,0 +1,38 @@
+<template>
+    <div style="height: 350px;">
+        <el-row>
+            <el-col :span="6">
+                <el-card :body-style="{ padding: '0px' }">
+                    <div style="display: flex; align-items: center;">
+                        <div><img class="cardImg" :src="cardImage" alt="Card Image" style="height: 100px; border-radius: 50%;"/></div>
+                        <div>
+                            <div style="color:#909399;">{{ cardTitle }}</div>
+                            <div style="font-weight: bold;font-size: large">{{ cardMiddle }}</div>
+                            <div>
+                                <span style="color:#909399;">{{ cardBottom }}</span> ⬇️
+                                <span style="color:orangered;">{{ `${cardBottomRight}%` }}</span>
+                            </div>
+                        </div>
+                    </div>
+
+                </el-card>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script setup>
+
+const props = defineProps({
+    cardData: {
+        type: Object,
+        required: true,
+    },
+})
+const { cardImage, cardTitle, cardMiddle, cardBottom, cardBottomRight } = props.cardData
+
+</script>
+
+<style scoped>
+
+</style>

src/components/cardComponents/dynamicCard.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="6">
+        <el-card :body-style="{ padding: '0px' }" @click="changeFn">
+          <div style="display: flex; align-items: center;">
+            <div>
+              <div>
+                <el-select v-model="value" placeholder="Select" size="small">
+                  <el-option
+                      v-for="item in options"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                      :disabled="item.disabled"
+                  />
+                </el-select>
+              </div>
+              <!--<div style="color:#909399;margin-left: 8px">{{ color }}</div>-->
+              <div style="font-weight: bold;font-size: large;margin-left: 8px">{{ cardMiddle }}</div>
+              <div style="margin-left: 8px">
+                <span style="color:#909399;">{{ cardBottom }}</span> ⬇️
+                <span style="color:orangered;">{{ `${ cardBottomRight }%` }}</span>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { ref, toRefs, computed, reactive } from 'vue'
+
+export default {
+  props: ['dynamicCardData', 'selectOptions'],
+  emits: ['change'],
+
+  setup(props, context) {
+    // 父组件传递的卡片数据
+    let cardData = props.dynamicCardData
+    // 父组件传递的下拉框数据
+    let selectOptions = props.selectOptions
+    // el-selection配置
+    const value = ref('')
+    const options = selectOptions
+
+    // todo 抛出点击后切换显示图线的方法
+    let status = true
+    function changeFn() {
+      status = !status
+      context.emit('change', status)
+    }
+
+    return {
+      cardData,
+      ...toRefs(cardData),
+      selectOptions,
+      value,
+      options,
+      changeFn
+    }
+  }
+}
+
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/components/echartsComponents/LineChart.vue

@@ -0,0 +1,182 @@
+<template>
+  <div>
+    <el-row :gutter="5">
+      <el-col :span="14">
+        <el-card>
+          <div id="main" ref="line" style="height: 400px;"></div>
+        </el-card>
+      </el-col>
+      <el-col :span="10">
+        <el-card>
+          <div class="grid-content ep-bg-purple-light" style="background-color:#9b9da1; height: 400px;">占个位置</div>
+          <el-button type="primary" @click="changeFn">更改数据</el-button>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { onMounted, onBeforeUnmount, ref, } from 'vue'
+import * as echarts from 'echarts'
+
+export default {
+  props: ['chartData'],
+  emits: ['change'],
+
+  setup(props, context) {
+    let lineChart = ref()
+    onMounted(() => {
+      lineChart = echarts.init(document.getElementById('main'))
+      updateChart()
+      resizeChart()
+      window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
+    })
+    onBeforeUnmount(() => {
+      window.removeEventListener('resize', resizeChart)   // 在组件销毁前移除事件监听，避免内存泄漏
+    })
+    // 获取图像数据 lieChartData
+    let lieChartData = props.chartData
+    function updateChart() {
+      const option = {
+        title: {
+          text: props.chartData.title,
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        // legend: {data: ['数据1', '数据2'], right: '50%',left: '50%'},
+        toolbox: {
+          feature: {
+            saveAsImage: { yAxisIndex: 'none' }
+          }
+        },
+        grid: {
+          top: 70, right: 60, bottom: 30, left: 55,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: lieChartData.xData
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            // name: yTitle1,
+            splitLine: {
+              show: true // 设置显示分割线
+            },
+            axisLabel: {
+              formatter: '{value} 单位1'
+            }
+          },
+          {
+            type: 'value',
+            // name: yTitle2,
+            splitLine: {
+              show: false
+            },
+            axisLabel: {
+              formatter: '{value} 单位2'
+            }
+          }
+        ],
+        series: [
+          {
+            name: '数据1',
+            type: 'line',
+            symbolSize: 6,
+            symbol: 'circle',
+            smooth: true,
+            data: lieChartData.yData1,
+            yAxisIndex: 0,
+            lineStyle: { color: '#fe9a8b' },
+            itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#fe9a8bb3' },
+                { offset: 1, color: '#fe9a8b03' },
+              ]),
+            },
+          },
+          {
+            name: '数据2',
+            type: 'line',
+            symbolSize: 6,
+            symbol: 'circle',
+            smooth: true,
+            data: lieChartData.yData2,
+            yAxisIndex: 1,
+            lineStyle: { color: '#9E87FF' },
+            itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#9E87FFb3' },
+                { offset: 1, color: '#9E87FF03' },
+              ]),
+            },
+            emphasis: {
+              itemStyle: {
+                color: {
+                  type: 'radial',
+                  x: 0.5,
+                  y: 0.5,
+                  r: 0.5,
+                  colorStops: [
+                    { offset: 0, color: '#9E87FF' },
+                    { offset: 0.4, color: '#9E87FF' },
+                    { offset: 0.5, color: '#fff' },
+                    { offset: 0.7, color: '#fff' },
+                    { offset: 0.8, color: '#fff' },
+                    { offset: 1, color: '#fff' },
+                  ],
+                },
+                borderColor: '#9E87FF',
+                borderWidth: 2,
+              },
+            },
+          },
+        ],
+      }
+      lineChart.setOption(option)
+    }
+    // 自适应调整窗口
+    function resizeChart() {
+      if (lineChart) {
+        lineChart.resize()
+      }
+    }
+
+    function changeFn() {
+      context.emit('change')
+      console.log(lieChartData.yData1)
+      updateChart()
+    }
+
+    return {changeFn}
+  }
+}
+
+
+// let props = defineProps({
+//     chartData: {
+//         type: Object,
+//         required: true,
+//     },
+// })
+// let { title, xData, yData1, yData2 } = props.chartData  // 将需要传入的数据解构出来方便在option中调用
+
+
+</script>
+
+<style scoped lang="scss">
+
+</style>