echarts实现表格图例

折线图的表格图例

<!--折线图-->
<template><div class="title-container"><span class="title">{{typeof props.series === 'string' ? props.series : props.series.name}}</span></div><div v-if="props.series?.metrics?.length > 0" style="width: 100%"><Chartref="chartContainer":option="chartOption"style="width: 100%; height: 300px; margin-bottom: 8px"@datazoom="onDataZoom"/><a-table:data="legendList":pagination="false"row-key="name":columns="columns":scroll="{ y: '115px' }"column-resizable@row-click="handleRowCLick"@sorter-change="sorterChange"><template #name="{ record }"><a-space:class="{ 'highlighted-row': !record.checked && data.length !== legendList?.length }"><a-badge v-if="record.checked && data.length !== legendList?.length" status="normal" /><a-badge v-else :color="record.color" />{{ record.name }}</a-space></template><template #mean="{ record }"><spanv-if="props.series.unit !== 'Bit/s'":class="{ 'highlighted-row': !record.checked && data.length !== legendList?.length }">{{ record.mean }}{{ props.series.unit }}</span><spanv-else:class="{ 'highlighted-row': !record.checked && data.length !== legendList?.length }">{{ transUnit(record.mean, props.series.unit) }}</span></template><template #max="{ record }"><spanv-if="props.series.unit !== 'Bit/s'":class="{ 'highlighted-row': !record.checked && data.length !== legendList?.length }">{{ record.max }}{{ props.series.unit }}</span><spanv-else:class="{ 'highlighted-row': !record.checked && data.length !== legendList?.length }">{{ transUnit(record.max, props.series.unit) }}</span></template><template #last="{ record }"><spanv-if="props.series.unit !== 'Bit/s'":class="{ 'highlighted-row': !record.checked && data.length !== legendList?.length }">{{ record.last }}{{ props.series.unit }}</span><spanv-else:class="{ 'highlighted-row': !record.checked && data.length !== legendList?.length }">{{ transUnit(record.last, props.series.unit) }}</span></template></a-table></div><divv-else-if="props.loadingFailed"style="display: flex; align-items: center; justify-content: center; width: 100%; height: 423px"><a-space direction="vertical" size="medium" class="empty"><NoData /><span class="table__empty">暂无内容</span></a-space></div><divv-if="!props.loadingFailed"style="display: flex; align-items: center; justify-content: center; width: 100%; height: 423px"><a-space direction="vertical" size="medium" class="empty"><a-tooltip :content="props.failedMessage" background-color="rgb(var(--red-6))"><LoadingFailed style="cursor: pointer" /></a-tooltip><span class="table__empty">加载错误</span></a-space></div>
</template><script lang="ts" setup>import { watch, ref } from 'vue';import { TableColumnData } from '@arco-design/web-vue';import cloneDeep from 'lodash/cloneDeep';import NoData from '../../../assets/images/svg/ikon/no-data.svg';import LoadingFailed from '../../../assets/images/svg/ikon/loading-failed.svg';import useChartOption from '../../../hooks/chart-option';import { transSpeedUnit, transUnit, calculateMean, handleSorterChange } from './types/api';import color from './types/const';const props = defineProps({series: {type: Object || String,default() {return {};},},// 标志这个pannel请求结果是否成功loadingFailed: {type: Boolean,default() {return true;},},// 请求失败的tooltipfailedMessage: {type: String,default: '',},// xAxis的max,min值date: {type: Array<number>,default() {return [];},},});const chartContainer = ref<HTMLElement>();const emits = defineEmits(['update:zoom']);const xAxisMin = ref();const xAxisMax = ref();const data = ref<any[]>([]);const legendList = ref<any[]>([]);const copyData = ref<any[]>([]);/* 过滤图表数据和图例数据 */watch(() => props.series,() => {if (props.date[0] && props.date[1]) {xAxisMin.value = new Date(props.date[0] * 1000).toISOString();xAxisMax.value = new Date(props.date[1] * 1000).toISOString();}const threshold = props.series.connect_threshold * 1000; // 阈值单位为秒,需要转换成msdata.value = props.series.metrics?.map((item: any, index: number) => {/* 判断legend中是否含有negative_y_keyword关键字，含有的放到正轴 */const isNegative = item.legend.includes(props.series.negative_y_keyword);return {name: item.legend,type: 'line',symbol: 'none',data: item.values.map((value: any) => {let yValue = parseInt(value[1], 10);if (isNegative === true) {yValue = -yValue;}return [value[0], yValue];}),color: color[index % 10],lineStyle: {width: 1, // 设置曲线的粗细，单位为像素},areaStyle: { opacity: 0.1 }, // 设置曲线阴影的透明度};});// 两个点的时间超过阈值就不连起来,若相邻两项的时间间隔超过阈值，在两个数据项之间插入一个空数组const newData = data.value?.map((item: any) => {const newDataArray = [];for (let i = 0; i < item.data.length - 1; i++) {const currentTimestamp = new Date(item.data[i][0]).getTime();const nextTimestamp = new Date(item.data[i + 1][0]).getTime();const timeDiff = nextTimestamp - currentTimestamp;newDataArray.push(item.data[i]);if (timeDiff > threshold) {newDataArray.push([]);}}return { ...item, data: newDataArray };});data.value = newData;copyData.value = cloneDeep(data.value);legendList.value = props.series.metrics?.map((item: any, index: any) => {const values = item.values.map((entry: any) => entry[1]); // 提取值const mean = calculateMean(values).toFixed(2);const max = Math.max(...values);const last = values[values.length - 1];return {name: item.legend,mean,max,last,color: color[index % 10],checked: false,};});},{ immediate: true },);const columns: TableColumnData[] = [{title: '名称',dataIndex: 'name',width: 280,slotName: 'name',tooltip: true,ellipsis: true,},{title: 'Avg',dataIndex: 'mean',width: 50,slotName: 'mean',tooltip: true,ellipsis: true,sortable: { sortDirections: ['ascend', 'descend'], sorter: true },},{title: 'Max',dataIndex: 'max',width: 40,slotName: 'max',tooltip: true,ellipsis: true,sortable: { sortDirections: ['ascend', 'descend'], sorter: true },},{title: 'Last',dataIndex: 'last',width: 50,slotName: 'last',tooltip: true,ellipsis: true,sortable: { sortDirections: ['ascend', 'descend'], sorter: true },},];const { chartOption } = useChartOption(() => {return {animation: false,toolbox: {// itemSize: 0,feature: {dataZoom: {show: true,icon: { back: 'image/image.png' }, // 设置一个不存在的路径title: {zoom: '区域缩放',},},magicType: {type: ['line', 'bar', 'stack'],title: {line: '切换为折线图',bar: '切换为柱状图',stack: '堆叠',},},saveAsImage: {title: '保存为图片',},},},grid: {left: `${props.series.unit === 'Bit/s' ? '15%' : '6%'}`,right: '2%',top: '8%',bottom: '12%',},tooltip: {trigger: 'axis',formatter(params: any) {let result = '';if (props.series.unit === 'Bit/s') {params.forEach((param: any) => {const { seriesName } = param;const value = transSpeedUnit(param.value[1], props.series.unit);result += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:8px;height:8px;background-color:${param.color}"></span><span style="font-size:12px">${seriesName}</span> &nbsp; <span style="font-weight:500;font-size:12px">${value}</span><br>`;});} else {params.sort((a: any, b: any) => {return b.value[1] - a.value[1];});for (let i = 0; i < params.length; i++) {const { seriesName } = params[i];const value = params[i].value[1];result += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:8px;height:8px;background-color:${params[i].color}"></span><span style="font-size:12px">${seriesName}</span> &nbsp; <span style="font-weight:500;font-size:12px">${value}${props.series.unit}</span><br>`;}}return `<span style="font-weight:500">${new Date(params[0].value[0]).toLocaleString().replace(/\//g, '-')}</span><br>${result}`;},},xAxis: {type: 'time',axisTick: {show: false, // 不显示坐标轴轴线},axisLabel: {formatter: {year: '{yyyy}',month: '{MM}/{dd}',day: '{MM}/{dd}',hour: '{HH}:{mm}',minute: '{HH}:{mm}',second: '{HH}:{mm}',},},min: xAxisMin.value,max: xAxisMax.value,},yAxis: {scale: true,splitLine: {lineStyle: {type: 'dashed', // 虚线样式},},axisLabel: {formatter(value: string) {if (props.series.unit === 'Bit/s') {return `${transUnit(Number(value), props.series.unit)}`;}return `${value}${props.series.unit}`;},},},series: data.value,};});/* 点击图例表格中某一行，显示这条数据 */const handleRowCLick = (record: any) => {if (record.checked === false) {legendList.value.forEach((item) => {if (item.name === record.name) {item.checked = true;} else {item.checked = false;}});data.value = copyData.value.filter((item: any) => item.name === record.name);} else {data.value = copyData.value;legendList.value.forEach((item) => {item.checked = false;});}};/* 对图例数据排序 */const sorterChange = (dataIndex: string, direction: string) => {legendList.value = handleSorterChange(legendList.value, { dataIndex, direction });};/* 图表缩放请求 */const onDataZoom = (e: any) => {if (e) {if (e.batch.length !== 0) {if (Object.keys(e.batch[0]).indexOf('startValue') !== -1) {const timeRanger = {start: Math.floor(e.batch[0].startValue / 1000),end: Math.round(e.batch[0].endValue / 1000),};emits('update:zoom', timeRanger);}}}};
</script><style scoped lang="less">.highlighted-row {color: var(--color-text-4);}.title {font-size: 16px;color: var(--color-text-1);font-weight: 500;}.title-container {display: flex;justify-content: center;}.table {&__empty {display: flex;align-items: center;justify-content: center;font-size: 16px;color: var(--color-text-3);}}:deep(.arco-table .arco-table-cell) {padding: 0 8px;}:deep(.arco-table-body) {min-height: auto;}:deep(.arco-table-tr) {cursor: pointer;}:deep(.arco-table .arco-table-td) {font-size: 12px;}
</style>

饼图的表格图例

Pie实现表格图例，点击某行，图表显示除这条之外剩下的数据（会有多条被选中的情况）

<!--环形图-->
<template><a-space><span class="left-line"></span><span class="title">{{ props.pieName }}</span></a-space><Chart :option="chartOption" style="width: 100%; height: 210px; margin: 16px 0 16px 0" /><div><a-table:data="legendList":pagination="false"row-key="name":scroll="{ y: '122px' }":columns="columns"@row-click="handleRowCLick"><template #name="{ record }"><a-space:class="{ 'highlighted-row': record.checked && data.length !== legendList?.length }"><a-badge v-if="record.checked && data.length !== legendList?.length" status="normal" /><a-badge v-else :color="record.color" />{{ record.name }}</a-space></template><template #count="{ record }"><span :class="{ 'highlighted-row': record.checked && data.length !== legendList?.length }">{{ record.count }}</span></template><template #percent="{ record }"><span :class="{ 'highlighted-row': record.checked && data.length !== legendList?.length }">{{ record.percent }}</span></template></a-table></div>
</template><script lang="ts" setup>import { TableColumnData } from '@arco-design/web-vue';import { watch, ref } from 'vue';import cloneDeep from 'lodash/cloneDeep';import useChartOption from '../../../hooks/chart-option';import color from './types/const';const legendList = ref<any[]>([]);const data = ref<any[]>([]);const copyData = ref<any[]>([]);const props = defineProps({series: {type: Object,default() {return {};},},pieName: {type: String,default: '',},});watch(() => props.series,() => {if (props.series?.detail?.length !== 0) {legendList.value = props.series?.detail?.map((item: any, index: number) => {const percent = Math.ceil((item.count / props.series.total) * 100);return {name: item.field,count: item.count,percent: `${percent}%`,color: color[index % 10],checked: false,};});data.value = props.series?.detail?.map((item: any) => {return {value: item.count,name: item.field,};});copyData.value = cloneDeep(data.value);}},{immediate: true,},);const columns: TableColumnData[] = [{title: '名称',dataIndex: 'name',width: 100,slotName: 'name',tooltip: true,ellipsis: true,},{title: '数量',dataIndex: 'count',width: 30,slotName: 'count',tooltip: true,ellipsis: true,sortable: { sortDirections: ['ascend', 'descend'] },},{title: '百分比',dataIndex: 'percent',width: 30,slotName: 'percent',tooltip: true,ellipsis: true,},];const { chartOption } = useChartOption(() => {return {tooltip: {show: true,trigger: 'item',},series: [{type: 'pie',radius: ['60px', '80px'],avoidLabelOverlap: false,label: {show: true,formatter: '{d}% ',},itemStyle: {color(colors) {const index = copyData.value.findIndex((item) => item.name === colors.name);return color[index % 10];},},data: data.value,},],};});/* 点击图例表格中某一行，显示除了这条数据剩下的数据 */const handleRowCLick = (record: any) => {legendList.value = legendList.value.map((item) => {if (item.name === record.name) {item.checked = !record.checked;}return item;});// data.value等于在copyData.value中过滤出legendList.value中checked为false的数据data.value = copyData.value.filter((item: any) => {const legendItem = legendList.value.find((legend: any) => legend.name === item.name);return legendItem && !legendItem.checked;});};
</script><style scoped lang="less">:deep(.arco-table .arco-table-cell) {padding: 0 8px;}.highlighted-row {color: var(--color-text-4);}.title {color: var(--color-text-1);font-size: 16px;font-weight: 500;line-height: 24px;}.left-line {padding-left: 2px;border-radius: 4px;margin-right: 2px;height: 14px;display: inline-block;color: var(--primary-6, #2962ff);border-right: 3px solid rgb(var(--primary-5));}:deep(.arco-table-body) {min-height: auto;}:deep(.arco-table-tr) {cursor: pointer;}:deep(.arco-table .arco-table-td) {font-size: 12px;}
</style>

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

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

相关文章

visual studio properties界面在哪里，properties界面如何打来；如何打开背景设置版

visual studio properties界面在哪里，properties界面如何打来；如何打开背景设置版

1.单击选中按钮或界面 2.点击f4就可以了
阅读更多...
PhotoSweeper X mac版 v4.8.5 相似重复照片清理工具 兼容 M1/M2

PhotoSweeper X mac版 v4.8.5 相似重复照片清理工具 兼容 M1/M2

PhotoSweeper X for Mac是一款Mac重复照片/相似照片清理工具&#xff01;PhotoSweeper可以帮你进行&#xff1a;重复相似照片/数码相片查找、对比和删除&#xff0c;轻松清理Mac上的重复图片&#xff0c;非常实用。 应用介绍 PhotoSweeper X for Mac是一款Mac重复照片/相似照片…
阅读更多...
实战打靶集锦-025-HackInOS

实战打靶集锦-025-HackInOS

文章目录 1. 主机发现2. 端口扫描3. 服务枚举4. 服务探查5. 提权5.1 枚举系统信息5.2 探索一下passwd5.3 枚举可执行文件5.4 查看capabilities位5.5 目录探索5.6 枚举定时任务5.7 Linpeas提权 靶机地址&#xff1a;https://download.vulnhub.com/hackinos/HackInOS.ova 1. 主机…
阅读更多...
机器学习：训练模型后，发生了什么，最后得到什么

机器学习：训练模型后，发生了什么，最后得到什么

当你训练一个模型&#xff0c;尤其是在机器学习或深度学习的上下文中&#xff0c;实际上是在进行一系列计算和优化步骤&#xff0c;以便模型能够从提供的数据中学习。训练模型的过程大致如下&#xff1a; 1. 初始化模型参数 模型的参数&#xff08;如权重和偏置&#xff09;通…
阅读更多...
【图片公式识别】图片公式转Word与LaTeX文档：智能识别与转换

【图片公式识别】图片公式转Word与LaTeX文档：智能识别与转换

前言 嘿&#xff0c;大家好呀&#xff01;&#x1f44b; 谁都知道&#xff0c;写 Word 文档里的公式可不是一件简单的事情&#xff01;你辛辛苦苦在键盘上敲出的数学公式&#xff0c;结果随着 Word 版本的更新&#xff0c;竟然变成了一张图片&#xff01;&#x1f624; 这简直就…
阅读更多...
toFixed四舍五入

toFixed四舍五入

一、问题描述 3.145.toFixed(2) // 3.15 3.155.toFixed(2) // 3.15 3.1551.toFixed(2) // 3.16 3.1550000000000001.toFixed(2) // 3.16 3.15500000000000001.toFixed(2) // 3.15 二、原因分析&#xff1a…
阅读更多...
板块一 Servlet编程：第八节 文件上传下载操作 来自【汤米尼克的JavaEE全套教程专栏】

板块一 Servlet编程：第八节 文件上传下载操作 来自【汤米尼克的JavaEE全套教程专栏】

板块一 Servlet编程&#xff1a;第八节 文件的上传下载操作 一、文件上传&#xff08;1&#xff09;前端内容&#xff08;2&#xff09;后端内容 二、文件下载&#xff08;1&#xff09;前端的超链接下载&#xff08;2&#xff09;后端下载 在之前的内容中我们终于结束了Servle…
阅读更多...
Oracle 总结

Oracle 总结

Oracle常规命令 conn 用户/密码--客户端连接的命令 show user —显示当前登录的用户增删改查 增 insect into 表名(列名列表) values(值列表);删 删除符合条件数据 delete from EMP where ENAME ‘xxx’;删除所有EMP 所有数据 delete from EMP;截断表 truncate table EMP;注…
阅读更多...
速盾网络：CDN节点无法读取您网站数据是什么意思

速盾网络：CDN节点无法读取您网站数据是什么意思

在使用CDN服务时&#xff0c;有时候可能会遇到提示&#xff1a;“CDN节点无法读取您网站数据”的情况&#xff0c;这意味着什么呢&#xff1f;让我们一起来解读速盾网络关于这个问题的解释。 意思解释&#xff1a; 当CDN节点无法读取您网站数据时&#xff0c;通常表示CDN节点…
阅读更多...
Web应用程序的自动测试工具WebDriver简介

Web应用程序的自动测试工具WebDriver简介

WebDriver 是一个开源的自动化测试工具&#xff0c;它提供了一套用于Web应用程序的自动化测试接口。通过这些接口&#xff0c;我们可以编写脚本来模拟用户的各种操作&#xff0c;如点击、拖拽、输入等&#xff0c;从而实现Web应用程序的自动化测试。 WebDriver 支持多种…
阅读更多...
qtday2作业

qtday2作业

思维导图 使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数 将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否为"admin"&#xff0c;…
阅读更多...
Linux搭建FISCO BCOS的第一个区块链网络

Linux搭建FISCO BCOS的第一个区块链网络

一、前言 FISCO BCOS是由金融区块链合作联盟&#xff08;深圳&#xff09;与微众银行共同发起的开源区块链项目&#xff0c;支持多链多账本&#xff0c;满足金融行业复杂业务需求。本文将介绍如何在Ubuntu操作系统上使用Linux命令搭建FISCO BCOS的第一个区块链网络。 目录 一…
阅读更多...
K8S部署Java项目（Springboot项目）pod状态：CrashLoopBackOff

K8S部署Java项目（Springboot项目）pod状态：CrashLoopBackOff

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…
阅读更多...
昇腾ACL应用开发之模型转换ATC

昇腾ACL应用开发之模型转换ATC

一.前提条件 在前面的章节中我们已经安装了包含模型转换的套件包CANN-TOOLKIT&#xff0c;默认的安装路径会在/usr/local/Ascend里面&#xff0c;我们将该套件所需要的东西加入到环境变量中以便我们调用&#xff1a; 将source /usr/local/Ascend/ascend-toolkit/set_env.sh加入…
阅读更多...
人为物累，心为形役

人为物累，心为形役

一、人是什么 你是你&#xff0c;他是他&#xff0c;我是我&#xff0c;有什么区别吗&#xff0c;直到自我发现我与你不同时&#xff0c;不同是什么&#xff0c;身体结构&#xff1f;人生经历&#xff1f;所拥有的一切&#xff1f;暂时搁置这些的话&#xff0c;抽离我们的意识…
阅读更多...
[ai笔记11] 论ai韭菜的自我修养

[ai笔记11] 论ai韭菜的自我修养

欢迎来到文思源想的ai空间&#xff0c;这是技术老兵学习ai以及观点分享的第11篇内容&#xff01; 上班之后时间确实少了许多&#xff0c;但是最近也没闲着&#xff0c;关于ai的学习一直在探索两个部分&#xff0c;一个是看那本有名的书《这就是ChatGPT》&#xff0c;另外一个则…
阅读更多...
Gmail邮箱群发邮件的技巧？邮箱怎么绑定？

Gmail邮箱群发邮件的技巧？邮箱怎么绑定？

Gmail邮箱注册教程指南&#xff1f;如何注册新的Gmail邮箱帐户&#xff1f; Gmail邮箱作为谷歌推出的邮件服务&#xff0c;以其高效、稳定和便捷的特性受到广大用户的喜爱。然而&#xff0c;如何在Gmail中进行有效的群发邮件&#xff0c;接下来&#xff0c;蜂邮将给大家介绍一…
阅读更多...
odoo16-API（Controller）带有验证访问的接口

odoo16-API（Controller）带有验证访问的接口

odoo16-API&#xff08;Controller&#xff09;带有验证访问的接口 目前我使用odoo原生的登录token来验证登陆的有效性 废话不多说直接上代码 # 测试获取session_id import requests class GetOdooData(http.Controller):def getOdooToken(self):# http://localhost:8123访问…
阅读更多...
objectMapper、ObjectNode、JsonNode调用接口时进行参数组装

objectMapper、ObjectNode、JsonNode调用接口时进行参数组装

objectMapper、ObjectNode、JsonNode用于调用接口时进行参数组装 public String sendText( List< String > listUser, String content ) throws JsonProcessingException{if ( listUser.size() < 0 ){return "用户ID为空&#xff01;";}if ( content.lengt…
阅读更多...
【深入理解设计模式】 工厂设计模式

【深入理解设计模式】 工厂设计模式

工厂设计模式 工厂设计模式是一种创建型设计模式&#xff0c;它提供了一种在不指定具体类的情况下创建对象的接口。在工厂设计模式中&#xff0c;我们定义一个创建对象的接口&#xff0c;让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到其子类。 工厂设计模式的目…
阅读更多...
最新文章

Copyright @ 2022~2023