多个Echart遍历生成 / 词图云

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>

词图云

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Element plus 下拉框组件选中一个选项后显示的是 value 而不是 label

Element plus 下拉框组件选中一个选项后显示的是 value 而不是 label

最近刚进行 Vue3 Element plus 项目实践&#xff0c;在进行表单二次封装的时候&#xff0c;表单元素 select 下拉框组件选中一个选项后显示的是 value 而不是 label&#xff0c;下面上代码&#xff1a; 原来的写法&#xff1a; <el-selectv-if"v.type select"…
阅读更多...
中小学教室多媒体电脑安全登录解决方案

中小学教室多媒体电脑安全登录解决方案

中小学教室多媒体电脑面临学生随意登录的问题&#xff0c;主要涉及到设备使用、网络安全、教学秩序等多个方面。以下是对这一问题的详细分析&#xff1a; 一、设备使用问题 1. 设备损坏风险 学生随意登录可能导致多媒体电脑设备过度使用&#xff0c;增加设备损坏的风险。不当…
阅读更多...
Python从0到100（七十八）：神经网络--从0开始搭建全连接网络和CNN网络

Python从0到100（七十八）：神经网络--从0开始搭建全连接网络和CNN网络

前言&#xff1a; 零基础学Python&#xff1a;Python从0到100最新最全教程。 想做这件事情很久了&#xff0c;这次我更新了自己所写过的所有博客&#xff0c;汇集成了Python从0到100&#xff0c;共一百节课&#xff0c;帮助大家一个月时间里从零基础到学习Python基础语法、Pyth…
阅读更多...
Gitlab 数据备份全攻略：命令、方法与注意事项

Gitlab 数据备份全攻略：命令、方法与注意事项

文章目录 1、备份命令2、备份目录名称说明3、手工备份配置文件3.1 备份配置文件3.2 备份ssh文件 4、备份注意事项4.1 停止puma和sicdekiq组件4.2 copy策略需要更多磁盘空间 5、数据备份方法5.1 docker命令备份5.2 kubectl命令备份5.3 参数说明5.4、选择性备份5.5、非tar备份5.6…
阅读更多...
设计模式12：状态模式

设计模式12：状态模式

系列总链接&#xff1a;《大话设计模式》学习记录_net 大话设计-CSDN博客 参考&#xff1a;设计模式之状态模式 (C 实现)_设计模式的状态模式实现-CSDN博客 1.概述 状态模式允许一个对象在其内部状态改变时改变其行为。对象看起来像是改变了其类。使用状态模式可以将状态的相…
阅读更多...
如何使用 Wireshark：从入门到进阶的网络分析工具

如何使用 Wireshark：从入门到进阶的网络分析工具

简述 Wireshark 是全球最受欢迎的网络协议分析工具&#xff0c;它帮助用户捕获和分析网络流量&#xff0c;诊断网络问题&#xff0c;排查安全漏洞&#xff0c;甚至恢复丢失的数据文件。作为一名网络工程师、安全专家、甚至是开发者&#xff0c;Wireshark 都是你必须掌握的工具…
阅读更多...
100个问题学langchain入门(2/10)

100个问题学langchain入门(2/10)

问题 11 在 LangChain 中&#xff0c;如何将文档转化为向量以存储到 Vectorstore 中&#xff1f;具体使用了哪些技术或工具&#xff1f; 在 LangChain 中&#xff0c;将文档转化为向量以存储到 Vectorstore 中&#xff0c;主要通过以下步骤和技术完成&#xff1a; 转化流程&a…
阅读更多...
C#winform引入DLL，DLL嵌入exe

C#winform引入DLL，DLL嵌入exe

C#winform将DLL嵌入exe 1 项目引入DLL1.1 项目-鼠标右击-点击添加引用&#xff1b;1.2 点击“浏览”&#xff1b;1.3 添加选中DLL1.4 勾选引入的DLL&#xff0c;点击“确定”1.5 添加成功后 2 DLL嵌入exe2.1 打开引入DLL属性窗口2.2 将“复制本地”项设为“false”2.3 双击打开…
阅读更多...
828华为云征文 | 华为云Flexus云服务器X实例搭建企业内部VPN私有隧道，以实现安全远程办公

828华为云征文 | 华为云Flexus云服务器X实例搭建企业内部VPN私有隧道，以实现安全远程办公

VPN虚拟专用网络适用于企业内部人员流动频繁和远程办公的情况&#xff0c;出差员工或在家办公的员工利用当地ISP就可以和企业的VPN网关建立私有的隧道连接。 通过拨入当地的ISP进入Internet再连接企业的VPN网关&#xff0c;在用户和VPN网关之间建立一个安全的“隧道”&#xff…
阅读更多...
wxpyton+wxFormBuilder加法运算示例

wxpyton+wxFormBuilder加法运算示例

wxpythonwxFormBuilder加法运算示例 在wxFormBuilder里设计一个窗体&#xff0c;生成如下代码&#xff1a;calc_From.py 放在lib文件夹下面 import gettext import wx import wx.xrc _ gettext.gettext class MyFrame1(wx.Frame):def __init__(self, parent):wx.Frame.__init…
阅读更多...
【AI驱动的数据结构：包装类的艺术与科学】

【AI驱动的数据结构：包装类的艺术与科学】

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” 文章目录 包装类装箱和拆箱阿里巴巴面试题 包装类 在Java中基本数据类型不是继承来自Object&#xff0c;为了…
阅读更多...
springBoot Maven 剔除无用的jar引用

springBoot Maven 剔除无用的jar引用

目录 Used undeclared dependencies found Unused declared dependencies found 当项目经过一段时间的开发和维护后&#xff0c;经常会遇到项目打包速度变慢的问题。这通常与项目中包含大量的jar依赖有关&#xff0c;这些依赖之间的关系错综复杂。这种情况在项目维护过程中是…
阅读更多...
电脑玩《刺客信条》时中，遇到找不到d3dx9_42.dll的问题是什么原因？缺失d3dx9_42.dll应该怎么解决呢？下面一起来看看吧！

电脑玩《刺客信条》时中，遇到找不到d3dx9_42.dll的问题是什么原因？缺失d3dx9_42.dll应该怎么解决呢？下面一起来看看吧！

电脑玩《刺客信条》时&#xff0c;找不到d3dx9_42.dll的原因及解决办法 对于许多热爱《刺客信条》这款游戏的玩家来说&#xff0c;在游戏中遇到找不到d3dx9_42.dll的问题无疑是非常令人头疼的。这一错误不仅会导致游戏无法启动&#xff0c;还可能引发运行过程中的图形错误、卡…
阅读更多...
【CSS in Depth 2 精译_083】13.3：CSS 混合模式的用法及相关注意事项 + 13.4：本章小结

【CSS in Depth 2 精译_083】13.3：CSS 混合模式的用法及相关注意事项 + 13.4：本章小结

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第四部分 视觉增强技术 ✔️【第 13 章 渐变、阴影与混合模式】 ✔️ 13.1 渐变 13.1.1 使用多个颜色节点&#xff08;上&#xff09;13.1.2 颜色插值方法&#xff08;中&#xff09;13.1.3 径向渐变…
阅读更多...
环境变量的知识

环境变量的知识

目录 1. 环境变量的概念 2. 命令行参数 2.1 2.2 创建 code.c 文件 2.3 对比 ./code 执行和直接 code 执行 2.4 怎么可以不带 ./ 2.4.1 把我们的二进制文件拷贝到 usr/bin 路径下&#xff0c;也不用带 ./ 了 2.4.2 把我们自己的路径添加到环境变量里 3. 认识PATH 3.…
阅读更多...
Linux Swap: 深入解析 mkswap, mkfs.swap, 和 swapon

Linux Swap: 深入解析 mkswap, mkfs.swap, 和 swapon

文章目录 Linux Swap: 深入解析 mkswap, mkfs.swap, 和 swapon什么是 Swap&#xff1f;主要命令介绍1. mkswap2. mkfs.swap3. swapon 创建和管理 Swap 的步骤1. 创建 Swap 分区2. 初始化 Swap3. 激活 Swap4. 持久化配置5. 查看 Swap 状态 删除 Swap 分区或文件1. 停用 Swap2. 删…
阅读更多...
模具生产过程中的标签使用流程图

模具生产过程中的标签使用流程图

①NFC芯片嵌入周转筐&#xff0c;通过读卡器读取CK_Label_v3的数据&#xff0c;并将这些信息上传至服务器进行存储&#xff1b; ②服务器随后与客户的WMS&#xff08;仓库管理系统&#xff09;进行交互&#xff0c;记录和同步注塑机的原始数据&#xff1b; ③当周转筐内的模具…
阅读更多...
自己搭建专属AI：Llama大模型私有化部署

自己搭建专属AI：Llama大模型私有化部署

前言 AI新时代&#xff0c;提高了生产力且能帮助用户快速解答问题&#xff0c;现在用的比较多的是Openai、Claude&#xff0c;为了保证个人隐私数据&#xff0c;所以尝试本地&#xff08;Mac M3&#xff09;搭建Llama模型进行沟通。 Gpt4all 安装比较简单&#xff0c;根据 G…
阅读更多...
【笔记】深度学习模型评估指标

【笔记】深度学习模型评估指标

推荐链接&#xff1a; &#xff08;0&#xff09;多分类器的评价指标 &#xff08;1&#xff09;泛化误差的评价方法&#xff1a;【机器学习】模型评估与选择&#xff08;留出法、交叉验证法、查全率、查准率、偏差、方差&#xff09; &#xff08;2&#xff09;机器学习&…
阅读更多...
前端实现页面自动播放音频方法

前端实现页面自动播放音频方法

前端实现页面视频在谷歌浏览器中自动播放音频方法 了解Chrome自动播放策略 在Chrome和其他现代浏览器中&#xff0c;为了改善用户体验&#xff0c;自动播放功能受到了限制。Chrome的自动播放策略主要针对有声音的视频&#xff0c;目的是防止页面在用户不知情的情况下自动播放声…
阅读更多...
最新文章

Copyright @ 2022~2023