多个Echart遍历生成 / 词图云

news2025/1/24 4:41:06

echart官网

安装

如果版本报错推荐安装以下版本
npm install echarts@4.8.0 --save

npm uninstall echarts//这个是卸载命令

以下安装成功后是局部引入:

多个Echart遍历生成

vue3+echart

单个页面多个图表循环渲染展示:

在这里插入图片描述

<template>
  <div class="main">
    <div class="section">
      <div class="section" v-for="(chartOption, index) in chartOptions" :key="index">
        <div :ref="el => chartRefs[index] = el" style="width:1400px;height: 400px"></div>
      </div>
      <!-- 隐藏表格 -->
      <!-- <div  class="table-section">
      <el-dialog v-model="showTable" title="" width="500" align-center>
      <el-table :data="tableData" style="width: 100%" >
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="value" label="值" />
        <el-table-column  label="编辑" >
            <template #default="scope">
           <el-button type="primary" @click="btnView(scope.row)">查看</el-button>
            </template>
        </el-table-column>
      </el-table></el-dialog>
    </div> -->
    </div>
  </div>
</template>

<script lang='ts'>
import { ref, reactive, toRefs, onUnmounted, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router"; //引入路由
import * as echarts from "echarts";
export default {
  name: "",
  setup() {
    let router = useRouter(),
    route = useRoute();
    // 图标数据
    const chartOptions: any = [
      {
        title: [
          {
            left: "left",
            text: "违规命中统计",
          }
        ],
        legend: {
          data: ['违规规则', 'Union Ads']
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          { 
            name: '违规规则',
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            itemStyle: {
              color: "#23e3fb", 
            },
          },
        ],
        tooltip: {
          // 这里暂时不设置 formatter
        }
      },
      {
        title: [
          {
            left: "left",
            text: "违规门店统计",
          }
        ],
        legend: {
          data: ['违规门店', 'Union Ads']
        },
        tooltip: {
          // 这里暂时不设置 formatter
        },
        xAxis: {
          type: "category",
          data: ["1", "2", "3", "4", "5", "6", "7"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            name: '违规门店',
            itemStyle: {
              color: "#23e3fb", 
            },
          },
        ],
      },
      {
        title: [
          {
            left: "left",
            text: "违规坐席统计",
          }
        ],
         legend: {
          data: ['违规坐席', 'Union Ads']
        },
        tooltip: {
          // 这里暂时不设置 formatter
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            name:'违规坐席'
          },
        ],
      },
    ];

    const data: any = reactive({
    });
    const chartRefs = ref<HTMLDivElement[]>([]);
    const charts = ref<echarts.ECharts[]>([]);
    onMounted(() => {
      chartOptions.forEach((option, index) => {
        if (chartRefs.value[index]) {
          const chart = echarts.init(chartRefs.value[index]);
          const finalOption = {
            ...option,
            tooltip: {
              ...option.tooltip,
            }
          };
          chart.setOption(finalOption);
          charts.value[index] = chart;
        }
      });
    });

    onUnmounted(() => {
      charts.value.forEach(chart => {
        if (chart) {
          chart.dispose();
        }
      });
    });

    const refData = toRefs(data);
    return {
      ...refData,
      chartOptions,
      chartRefs,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>

点击单个图表可显示弹框

点击图表单个柱状图显示对应的表格弹框操作

在这里插入图片描述

<template>
  <div class="main">
    <div class="section">
      <div class="section" v-for="(chartOption, index) in chartOptions" :key="index">
        <div :ref="el => chartRefs[index] = el" style="width:1400px;height: 400px"></div>
      </div>
      <!-- 隐藏表格 -->
      <div  class="table-section">
      <el-dialog v-model="showTable" title="" width="500" align-center>
      <el-table :data="tableData" style="width: 100%" >
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="value" label="值" />
        <el-table-column  label="编辑" >
            <template #default="scope">
           <el-button type="primary" @click="btnView(scope.row)">查看</el-button>
            </template>
        </el-table-column>
      </el-table></el-dialog>
    </div>
    </div>
  </div>
</template>
<script lang='ts'>
import { ref, reactive, toRefs, onUnmounted, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router"; //引入路由
import * as echarts from "echarts";
export default {
  name: "",
  setup() {
    let router = useRouter(),
    route = useRoute();
    // 图标数据
    const chartOptions: any = [
      {
        title: [
          {
            left: "left",
            text: "违规命中统计",
          }
        ],
        legend: {
          data: ['违规规则', 'Union Ads']
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          { 
            name: '违规规则',
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            itemStyle: {
              color: "#23e3fb", 
            },
          },
        ],
        tooltip: {
          // 这里暂时不设置 formatter
        }
      },
      {
        title: [
          {
            left: "left",
            text: "违规门店统计",
          }
        ],
        legend: {
          data: ['违规门店', 'Union Ads']
        },
        tooltip: {
          // 这里暂时不设置 formatter
        },
        xAxis: {
          type: "category",
          data: ["1", "2", "3", "4", "5", "6", "7"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            name: '违规门店',
            itemStyle: {
              color: "#23e3fb", 
            },
          },
        ],
      },
      {
        title: [
          {
            left: "left",
            text: "违规坐席统计",
          }
        ],
         legend: {
          data: ['违规坐席', 'Union Ads']
        },
        tooltip: {
          // 这里暂时不设置 formatter
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            name:'违规坐席'
          },
        ],
      },
    ];
    const initParams = (params: any) => {
      let tooltipContent = '';
      const bullet = '<span style="display: inline-block; width: 10px; height: 10px; background-color:#23e3fb; border-radius: 50%; margin-right: 5px;"></span>';
      if (Array.isArray(params)) {
        // 多个数据项
        params.forEach((param) => {
          tooltipContent += `${param.seriesName}<br/>${bullet}${param.name} &nbsp; ${param.value}<br/>`;
        });
      } else {
        // 单个数据项
        tooltipContent += `${params.seriesName}<br/>${bullet}${params.name} &nbsp; ${params.value}<br/>`;
      }

      return tooltipContent;
    };

    const data: any = reactive({
      // chartOptions:chartOptions,//也可在这里赋值使用(也可定义并暴露出去)
      showTable:false,//点击图标显示弹框表格
      tableData:[]=[],//弹框表格数据
    });
    const chartRefs = ref<HTMLDivElement[]>([]);
    const charts = ref<echarts.ECharts[]>([]);
    const handleChartClick = (params: any) => {
      data.showTable = true;
      data.tableData = [
        { name: params.seriesName, value: params.value },
        { name: '日期', value: params.name },
        // 可以根据需要添加更多字段
      ];
    };
    onMounted(() => {
      chartOptions.forEach((option, index) => {
        if (chartRefs.value[index]) {
          const chart = echarts.init(chartRefs.value[index]);
          const finalOption = {
            ...option,
            tooltip: {
              ...option.tooltip,
              formatter: initParams
            }
          };
          chart.setOption(finalOption);
          chart.on('click', handleChartClick);
          charts.value[index] = chart;
        }
      });
    });

    onUnmounted(() => {
      charts.value.forEach(chart => {
        if (chart) {
          chart.dispose();
        }
      });
    });

    const refData = toRefs(data);
    return {
      ...refData,
      chartOptions,
      chartRefs,
      initParams
    };
  },
};
</script>

<style lang="scss" scoped>
</style>

词图云

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2263249.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

混凝土-钢板结构抗剪性能DIC全场应变测试

混凝土-钢板结构抗剪性能DIC全场应变测试

混凝土-钢板结构发挥了钢板抗拉及混凝土抗压的特点&#xff0c;为建筑设计、选材、施工等过程带来了更多的可能性。构件将混凝土与钢板结合&#xff0c;从而改善抗剪承载性能&#xff0c;提升建筑性能。 采用3D-DIC非接触式三维全场应变测量技术&#xff0c;对构件的抗剪承载力…
阅读更多...
网络安全渗透有什么常见的漏洞吗？

网络安全渗透有什么常见的漏洞吗？

弱口令与密码安全问题 THINKMO 01 暴力破解登录&#xff08;Weak Password Attack&#xff09; 在某次渗透测试中&#xff0c;测试人员发现一个网站的后台管理系统使用了非常简单的密码 admin123&#xff0c;而且用户名也是常见的 admin。那么攻击者就可以通过暴力破解工具&…
阅读更多...
音频开发中常见的知识体系

音频开发中常见的知识体系

在 Linux 系统中&#xff0c;/dev/snd 目录包含与声音设备相关的文件。每个文件代表系统中的一部分音频硬件或音频控制接口。以下是你列出的文件及其含义&#xff1a; 一.基本术语 样本长度(sample)&#xff1a;样本是记录音频数据最基本的单位&#xff0c;计算机对每个通道采…
阅读更多...
Linux setfacl 命令详解

Linux setfacl 命令详解

文章目录 Linux setfacl 命令详解一、ACL 和 setfacl 简介二、基本语法三、常用操作1. 查看 ACL2. 为用户设置权限3. 为组设置权限4. 删除 ACL 条目5. 设置默认 ACL6. 递归设置 ACL 四、示例操作1. 创建示例目录和文件2. 设置 ACL3. 验证 ACL 五、注意事项六、总结 Linux setfa…
阅读更多...
编程训练系统(代码+数据库+LW)

编程训练系统(代码+数据库+LW)

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了编程训练系统的开发全过程。通过分析编程训练系统管理的不足&#xff0c;创建了一个计算机管理编程训练系统的方案。文章介绍了编程训练系统的系统分析部分&…
阅读更多...
提炼关键词的力量：AI驱动下的SEO优化策略

提炼关键词的力量：AI驱动下的SEO优化策略

内容概要 在当今数字化营销的环境中&#xff0c;关键词对于提升网站的可见性和流量起着至关重要的作用。企业和个人必须重视有效的关键词策略&#xff0c;以便在竞争激烈的网络市场中脱颖而出。本文将深入探讨如何利用人工智能技术来优化SEO策略&#xff0c;特别是在关键词选择…
阅读更多...
【Where语法全解密】.NET开源ORM框架 SqlSugar 系列

【Where语法全解密】.NET开源ORM框架 SqlSugar 系列

文章目录 前言一、普通表达式查询 Where二、根据SQL查询 where三、动态查询四、动态拼表达式查询 &#xff0c;拼拉姆达五、条件拼接查询六、链式条件查询七、根据Class查询&#xff0c;根据实查询八、根据Class中主键查询九、根据字典查询十、查询函数十一、Where中有子查询十…
阅读更多...
模型优化之知识蒸馏

模型优化之知识蒸馏

文章目录 知识蒸馏优点工作原理示例代码 知识蒸馏优点 把老师模型中的规律迁移到学生模型中&#xff0c;相比从头训练&#xff0c;加快了训练速度。另一方面&#xff0c;如果学生模型的训练精度和老师模型差不多&#xff0c;相当于得到了规模更小的学生模型&#xff0c;起到模…
阅读更多...
电脑问题4[非华为电脑安装华为电脑管家华为荣耀手机多屏协助]

电脑问题4[非华为电脑安装华为电脑管家华为荣耀手机多屏协助]

非华为电脑安装华为电脑管家华为荣耀手机多屏协助 我是荣耀手机之前一直用的是window的"连接手机"功能,电脑控制手机还蛮好用,但是又不能够没有好的电脑控制手机的功能,后来想了想看了看,竟然安装了华为电脑关键,竟然可以顺利连接上荣耀手机,发现还蛮好用! 本文引用…
阅读更多...
win11 C盘出现感叹号解决方法

win11 C盘出现感叹号解决方法

出现感叹号&#xff0c;原因是对C盘进行了BitLocker驱动器加密操作。如果想去除感叹号&#xff0c;对C盘进行BitLocker解密即可。 步骤如下&#xff1a; 1.点击Windows搜索框 2.搜索框内输入 系统 3.按下回车&#xff0c;进入系统界面 4.点击隐私和安全性 点击BitLocker驱…
阅读更多...
MyBatis通过注解配置执行SQL语句原理源码分析

MyBatis通过注解配置执行SQL语句原理源码分析

文章目录 前置准备流程简要分析配置文件解析加载 Mapper 接口MapperAnnotationBuilder解析接口方法注解parseStatement 方法详解MapperBuilderAssistant 前置准备 创建一个mybatis-config.xml文件&#xff0c;配置mapper接口 <mappers><!--注解配置--><mapper…
阅读更多...
[数据结构] 链表

[数据结构] 链表

目录 1.链表的基本概念 2.链表的实现 -- 节点的构造和链接 节点如何构造? 如何将链表关联起来? 3.链表的方法(功能) 1).display() -- 链表的遍历 2).size() -- 求链表的长度 3).addFirst(int val) -- 头插法 4).addLast(int val) -- 尾插法 5).addIndex -- 在任意位置…
阅读更多...
计算机基础 试题

计算机基础 试题

建议做的时候复制粘贴，全部颜色改为黑色，做完了可以看博客对答案。 一、单项选择题（本大题共25小题，每小题2分，共50分〉 1．计算机内部采用二进制数表示信息，为了便于书写，常用十六进制数表示。一个二进制数0010011010110用十六进制数表示为 A．9A6 B．26B C．4D6 D．…
阅读更多...
设计模式12：状态模式

设计模式12：状态模式

系列总链接&#xff1a;《大话设计模式》学习记录_net 大话设计-CSDN博客 参考&#xff1a;设计模式之状态模式 (C 实现)_设计模式的状态模式实现-CSDN博客 1.概述 状态模式允许一个对象在其内部状态改变时改变其行为。对象看起来像是改变了其类。使用状态模式可以将状态的相…
阅读更多...
SmartX分享：NVMe-oF 介绍、SMTX ZBS 如何选择高性能场景解决方案与如何实现

SmartX分享：NVMe-oF 介绍、SMTX ZBS 如何选择高性能场景解决方案与如何实现

目录 背景什么是 NVMe-oFZBS AccessiSCSI 与 iSERNMVe-oF 介绍NVMeNVMe-oFNVMe-oF 承载网络&#xff08;数据平面&#xff09; ZBS NVMe-oF 实现ZBS 接入策略ZBS 接入点分配策略性能测试 为什么要支持 RoCE引用 背景 前几篇文章&#xff0c;我们认识到了 SmartX 公司产品 SMTX…
阅读更多...
数据可视化-1. 折线图

数据可视化-1. 折线图

目录 1. 折线图适用场景分析 1. 1 时间序列数据展示 1.2 趋势分析 1.3 多变量比较 1.4 数据异常检测 1.5 简洁易读的数据可视化 1.6 特定领域的应用 2. 折线图局限性 3. 折线图代码实现 3.1 Python 源代码 3.2 折线图效果&#xff08;网页显示&#xff09; 1. 折线图…
阅读更多...
python网络框架——Django、Tornado、Flask和Twisted

python网络框架——Django、Tornado、Flask和Twisted

Django、Tornado和flask是全栈网络框架&#xff0c;而Twisted更专注于网络底层的高性能封装&#xff0c;不提供HTML模版引擎等界面功能&#xff0c;因此不能称为全栈框架。 1、Django 发布于2003年&#xff0c;是当前python世界里最负盛名且最成熟的网络框架。相较于其他web框…
阅读更多...
Flash语音芯片相比OTP语音芯片的优势

Flash语音芯片相比OTP语音芯片的优势

Flash语音芯片和OTP语音芯片是两种常见的语音解决方案&#xff0c;在各自的应用领域中发挥着重要作用。本文‌将介绍Flash语音芯片相比OTP(One-Time Programmable)语音芯片的显著优势‌。 1‌.可重复擦写‌&#xff1a;Flash语音芯片的最大特点是支持多次编程和擦除&#xff0c…
阅读更多...
门店全域推广，线下商家营销布局的增量新高地

门店全域推广，线下商家营销布局的增量新高地

门店是商业中最古老的经营业态之一。很早就有行商坐贾的说法&#xff0c;坐贾指的就是门店商家&#xff0c;与经常做商品流通的「行商」相对应。 现在的门店经营&#xff0c;早已不是坐等客来&#xff0c;依靠自然流量吸引顾客上门&#xff0c;大部分的门店经营与推广都已经开…
阅读更多...
NX系列-使用 `nmcli` 命令创建 Wi-Fi 热点并设置固定 IP 地址

NX系列-使用 `nmcli` 命令创建 Wi-Fi 热点并设置固定 IP 地址

使用 nmcli 命令创建 Wi-Fi 热点并设置固定 IP 地址 一、前言 在一些场景下&#xff0c;我们需要将计算机或嵌入式设备&#xff08;例如 NVIDIA Orin NX&#xff09;转换为 Wi-Fi 热点&#xff0c;以便其他设备&#xff08;如手机、笔记本等&#xff09;能够连接并使用该设备…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023