FOYA传媒科技招聘-CFANZ编程社区

文章目录

使用前提：

提前配置好ElementPlus和echarts的环境

系统访问量小组件

描述：

页面布局：
顶部标题显示为“用户访问量统计”。
一个charBox容器，其中使用echarts实现折线图展示，并附带包含一个访问量单元的简要说明（“访问量(个)”）。
图表初始化：
使用echarts库渲染线图。
组件在onMounted生命周期钩子中调用initChart方法来初始化图表。
通过ref引用 DOM 元素，chartDom确保图表的容器正确加载。
折线图配置：
配置了tooltip提示框，当鼠标悬停时显示访问量信息。
通过grid设置图表边距，使图表内容在容器中更好地布局。
x 轴：设置为类别目类型，用作props.accessData.dataList横轴数据，显示时间或其他类别数据。
y 轴：数值类型，简单设为0，表示访问量范围。
折线图数据：将props.accessData.accessList作为折线图的纵轴数据，并通过itemStyle自定义样式，主要包括线条颜色、折点样式等。
数据监听：
使用watch监听accessData的变化，每当确定数据更新时，重新调用initChart更新图表。
watch``deep: true，确保在核心属性accessData变更时仍然设置触发。
调试输出：
在initChart方法和onMounted中，加入console.log输出chartDom和chartInstance，用于检查元素和实例的正确加载，然后开发调试。

代码

<template>
  <div class="container">
    <h2 class="homeTitle">用户访问量统计</h2>
    <div class="charBox">
      <div ref="chartDom" id="main" style="width: 100%; height: 320px"></div>
      <ul class="orderListLine turnover">
        <li>访问量(个)</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, watch, ref } from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
  name: 'AccessStatistics',
  props: {
    accessData: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    const chartDom = ref(null);
    let chartInstance = null;

    const initChart = () => {
      // 检查 chartDom 是否存在
      if (!chartDom.value) {
        console.error('Chart DOM not found');
        return;
      }

      // 输出 chartDom 的值进行调试
      console.log('chartDom:', chartDom.value);

      // 如果 chartInstance 不存在，则初始化
      if (!chartInstance) {
        chartInstance = echarts.init(chartDom.value);
      }

      // 输出 chartInstance 的值进行调试
      console.log('chartInstance:', chartInstance);

      const option = {
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          top: '5%',
          left: '10',
          right: '50',
          bottom: '12%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: '#666',
              fontSize: '12px',
            },
          },
          axisLine: {
            lineStyle: {
              color: '#E5E4E4',
              width: 1,
            },
          },
          data: props.accessData.dataList,
        },
        yAxis: [
          {
            type: 'value',
            min: 0,
            axisLabel: {
              textStyle: {
                color: '#666',
                fontSize: '12px',
              },
            },
          },
        ],
        series: [
          {
            name: '访问量',
            type: 'line',
            smooth: false,
            showSymbol: false,
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: '#F29C1B',
                lineStyle: {
                  color: '#FFD000',
                },
              },
              emphasis: {
                color: '#fff',
                borderWidth: 5,
                borderColor: '#FFC100',
              },
            },
            data: props.accessData.accessList,
          },
        ],
      };

      if (chartInstance && option) {
        chartInstance.setOption(option);
      }
    };

    watch(
      () => props.accessData,
      () => {
        initChart();
      },
      { deep: true }
    );

    onMounted(() => {
      // 输出 chartDom 的值进行调试
      console.log('chartDom:', chartDom.value);

      initChart();
    });

    return {
      chartDom,
    };
  },
});
</script>

<style scoped>
/* 你的样式 */
</style>

使用：

在需要的地方引入

<!-- 用户访问量统计 -->
<AccessStatistics :accessData="accessData" />
<!-- end -->
import AccessStatistics from "./components/accessStatistics.vue";

传入的数据格式

accessData.value = {
        dateList: [
          "2022-01-01",
          "2022-01-02",
          "2022-01-03",
          "2022-01-04",
          "2022-01-05",
        ],
        accessList: [100, 200, 150, 22, 22],
      };

用户数据统计小组件

描述：

1.组件结构

该组件主要由一个容器、图表区域和数据说明组成。

标题：homeTitle显示为“用户统计”，明确标明组件的用途。
图表容器：chartDom是一个引用，用于初始化和渲染echarts实例。
说明区域：标识图表中的数据线，分别显示“用户总体（个）”和“新增用户（个）”。

2.图表逻辑与数据绑定

数据传递**：****userdata**是一个对象，包含三个属性：
**dataList**：x轴的时间或类别标签。
**totalUserList**：用户概览的数值吞吐量。
**newUserList**：新增用户数的吞吐量。
图表容器引用：**chartDom**引用**<div>**元素，用于初始化**echarts**实例。

3.初始图表

提示框**：**tooltip**触发类型为**axis**，即在鼠标悬停时显示整条数据轴的信息。背景、文本样式和相似的圆角都可以自定义。**
坐标系合理布局**：采用****grid**设置图表的边距，布置在集装箱内布局。
x轴**：使用****userdata.dataList**，即确定的时间数据或类别标签，展示x轴内容。自定义了轴标签颜色和大小，确保数据易读。
y轴**：数值类型，简单设为0，表示从零开始的用户量和新的增量。**
数据系列**：**
用户轮廓**：折线图，指定颜色为黄色。通过****itemStyle**设置平滑曲线和显示样式。
新增用户：折线图，指定颜色为红色，样式为用户基础，基础数据对比。

4.数据监听与生命周期管理

监听**userdata**的变化**：当****userdata**更新时重新初始化图表，确保显示最新的数据。
生命周期钩子：在**onMounted**中调用**initChart**，确保加载组件时初始化图表。

代码

<template>
  <div class="container">
    <h2 class="homeTitle">用户统计</h2>
    <div class="charBox">
      <div id="usermain" ref="chartDom" style="width: 100%; height: 320px"></div>
      <ul class="orderListLine user">
        <li class="one"><span></span>用户总量（个）</li>
        <li class="three"><span></span>新增用户（个）</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, watch, ref } from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
  name: 'UserStatistics',
  props: {
    userdata: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    const chartDom = ref(null);

    const initChart = () => {
      // 检查 chartDom 是否存在
      if (!chartDom.value) {
        console.error('Chart DOM not found');
        return;
      }

      // 输出 chartDom 的值进行调试
      console.log('chartDom:', chartDom.value);

      const myChart = echarts.init(chartDom.value);

      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#fff', //背景颜色（此时为默认色）
          borderRadius: 2, //边框圆角
          textStyle: {
            color: '#333', //字体颜色
            fontSize: 12, //字体大小
            fontWeight: 300,
          },
        },
        grid: {
          top: '5%',
          left: '20',
          right: '50',
          bottom: '12%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: '#666',
              fontSize: '12px',
            },
          },
          axisLine: {
            lineStyle: {
              color: '#E5E4E4',
              width: 1, //x轴线的宽度
            },
          },
          data: props.userdata.dataList, //后端传来的动态数据
        },
        yAxis: [
          {
            type: 'value',
            min: 0,
            axisLabel: {
              textStyle: {
                color: '#666',
                fontSize: '12px',
              },
            },
          }, //左侧值
        ],
        series: [
          {
            name: '用户总量',
            type: 'line',
            smooth: false, //否平滑曲线
            showSymbol: false, //未显示鼠标上移的圆点
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: '#FFD000',
                lineStyle: {
                  color: '#FFD000',
                },
              },
              emphasis: {
                color: '#fff',
                borderWidth: 5,
                borderColor: '#FFC100',
              },
            },
            data: props.userdata.totalUserList,
          },
          {
            name: '新增用户',
            type: 'line',
            smooth: false, //否平滑曲线
            showSymbol: false, //未显示鼠标上移的圆点
            symbolSize: 10, //圆点大小
            itemStyle: {
              normal: {
                color: '#FD7F7F',
                lineStyle: {
                  color: '#FD7F7F',
                },
              },
              emphasis: {
                color: '#fff',
                borderWidth: 5,
                borderColor: '#FD7F7F',
              },
            },
            data: props.userdata.newUserList,
          },
        ],
      };

      if (option) {
        myChart.setOption(option);
      }
    };

    watch(
      () => props.userdata,
      () => {
        initChart();
      },
      { deep: true }
    );

    onMounted(() => {
      initChart();
    });

    return {
      chartDom,
    };
  },
});
</script>

<style scoped>
/* 你的样式 */
</style>

使用：

<!-- 用户统计 -->
      <UserStatistics :userdata="userData" />
<!-- end -->
import UserStatistics from "./components/userStatistics.vue";
const userData = ref({});

数据格式：

userData.value = {
        dateList: [
          "2022-01-01",
          "2022-01-02",
          "2022-01-03",
          "2022-01-04",
          "2022-01-05",
        ],
        totalUserList: [100, 200, 150, 22, 22],
        newUserList: [50, 150, 156, 66, 22],
      };

使用排行top10统计

描述：

1.组件结构

标题**：根据确定的****type**属性，动态显示标题，区分“知识库分类”或“案例分类”的使用排名。
图表容器：**chartDom**使用引用，提供给**echarts**图表实例进行渲染，设置了宽度为100%，高度为380px。

2.属性说明

道具：
- sortTop10Data：包含sortNameList（分类名称数据库）和numberList（使用数量的数据库），用于对应的柱状图。
- type：字符串标题类型，用于判断是“知识库分类”还是“案例分类”，从而动态调整内容。

3.图表配置项详解

提示框（提示框）：
- trigger: 'axis'：在鼠标悬停时触发，并显示与x轴校准的数据。
- 背景背景、字体样式，使提示框清晰易读。
网格（图表网格）：
- 设置图表边距，包含标签，使图表内容不与容器边界重叠。
xAxis（x 轴）：
- show: false隐藏 x 轴，因为水平柱状图不需要显式展示 x 轴信息。
yAxis（y 轴）：
- 使用props.sortTop10Data.sortNameList作为分类数据来源。
- 隐藏图标和图标，仅显示分类名称，简化图表设计。
数据系列：
- 类型：柱状图 ( type: 'bar')，水平显示，显示分类的使用次数。
- 背景色：使用灰色背景 ( #F3F4F7)，突出柱状图的颜色。
- 柱状条样式：
  - 颜色渐变：左至右渐变的黄色条形，以增强视觉效果。
  - 圆角：设置右上角和右下角为圆角，使条形图更加美观。
  - 标签：显示每个柱状条的数值，位置轻微偏移，视觉确保对齐。

4.数据监听与生命周期管理

watch：实时监听sortTop10Data的变化，数据保证更新时，图表内容同步更新。
onMounted：在组件加载时初始化图表，通过initChart创建echarts实例并配置图表选项。

代码

<template>
  <div class="container top10">
    <h2 v-if="type === 'knowledge'" class="homeTitle">知识库分类使用排名TOP10</h2>
    <h2 v-else class="homeTitle">案例分类使用排名TOP10</h2>
    <div class="charBox">
      <div ref="chartDom" id="top" style="width: 100%; height: 380px"></div>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, watch, ref } from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
  name: 'sortTop10',
  props: {
    sortTop10Data: {
      type: Object,
      required: true,
    },
    type: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const chartDom = ref(null);
    const initChart = () => {
      const myChart = echarts.init(chartDom.value);

      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#fff', //背景颜色（此时为默认色）
          borderRadius: 2, //边框圆角
          textStyle: {
            color: '#333', //字体颜色
            fontSize: 12, //字体大小
            fontWeight: 300,
          },
        },
        grid: {
          top: '-10px',
          left: '0',
          right: '0',
          bottom: '0',
          containLabel: true,
        },
        xAxis: { 
          show: false,
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
            alignWithLabel: true,
          },
          type: 'category',
          axisLabel: {
            textStyle: {
              color: '#666',
              fontSize: '12px',
            },
          },
          data: props.sortTop10Data.sortNameList,
        },
        series: [
          {
            data: props.sortTop10Data.numberList,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: '#F3F4F7',
            },
            barWidth: 20,
            barGap: '80%', // 多个并排柱子设置柱子之间的间距
            barCategoryGap: '80%', // 多个并排柱子设置柱子之间的间距

            itemStyle: {
              emphasis: {
                barBorderRadius: 30,
              },
              normal: {
                barBorderRadius: [0, 10, 10, 0], // 圆角
                color: new echarts.graphic.LinearGradient(
                  1,
                  0,
                  0,
                  0, // 渐变色的起止位置, 右/下/左/上
                  [
                    { offset: 0, color: '#FFBD00' },
                    { offset: 1, color: '#FFD000' },
                  ]
                ),
                label: {
                  show: true,
                  formatter: '{@score}',
                  color: '#333',
                  position: ['8', '5'], // 自定义位置第一个参数为x轴方向，第二个参数为y轴方向，左上角为起点，向右向下为正数，向上向左为负数
                },
              },
            },
          },
        ],
      };

      if (option) {
        myChart.setOption(option);
      }
    };


    watch(
      () => props.sortTop10Data,
      () => {
        initChart();
      },
      { deep: true }
    );

    onMounted(() => {
      initChart();
    });

    return {
      chartDom,
    };
  },
});
</script>

<style scoped>
/* 你的样式 */
</style>

使用：

<div class="homeMain homecon">
      <!-- 案例分类使用排行榜 -->
      <sortTop10 :sortTop10Data="caseSortTop10Data" :type="'case'" />
      <!-- end -->
</div>
import sortTop10 from './components/sortTop10.vue';
const caseSortTop10Data = ref({});

数据格式

caseSortTop10Data.value = {
         caseSortNameList: ["商品10", "商品9", "商品8", "商品7", "商品6", "商品5", "商品4", "商品3", "商品2", "商品1"],
         numberList: [1, 2, 3, 4, 5, 6, 8, 8, 9, 11],
       };