0
点赞
收藏
分享

微信扫一扫

FOYA传媒科技招聘

_karen 2024-11-06 阅读 3

文章目录

使用前提:

提前配置好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输出chartDomchartInstance,用于检查元素和实例的正确加载,然后开发调试。

代码

<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],
       };
举报

相关推荐

0 条评论