vue3+eachrts饼图轮流切换显示高亮数据

2024-04-03 11:44
文章标签 javascript 数据 显示 vue vue3 切换 frontend 高亮 轮流 eachrts

本文主要是介绍vue3+eachrts饼图轮流切换显示高亮数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述

<template><div class="charts-box"><div class="charts-instance" ref="chartRef"></div>// 自定义legend 样式<div class="charts-note"><span v-for="(items, index) in data.dataList" class="charts-legend"><span class="legend" :style="{background:colorList[index]}"></span><span>{{items.name}}</span><span style="color: #999999;margin-left: 5px;">{{((items.value / props.total)*100).toFixed(2) }}%</span></span></div></div></template><script setup>import {ref, onMounted, onUnmounted, reactive, watch} from 'vue'import * as echarts from 'echarts'import useEmitter from "@/hooks/useEmitter";import {findRightBottomPie, removeTrailingZeros} from "@/views/BangFuData/service"; // 接口const props = defineProps(['timeRange', 'dictItem', 'total'])const emitter = useEmitter()const chartRef = ref()const data = reactive({dataList: [{"name": "中央统战部","value": "4742.93","count": null,"type": null},{"name": "民盟","value": "439.47","count": null,"type": null},{"name": "致公党","value": "377.23","count": null,"type": null},{"name": "农工党","value": "1181.58","count": null,"type": null},{"name": "民建","value": "365.38","count": null,"type": null},{"name": "民进","value": "200.72","count": null,"type": null},{"name": "全国工商联","value": "2112.68","count": null,"type": null},{"name": "民革","value": "102.70","count": null,"type": null},{"name": "九三学社","value": "439.30","count": null,"type": null},{"name": "台盟","value": "24.50","count": null,"type": null}],})const colorList =['#876FFE', '#F85A8E','#E74C3C','#FFC476','#F1C40F','#80C269','#13B5B1','#54DCFF','#1A92FF','#5085FF', '#F85A8E','#E74C3C','#FFC476','#F1C40F','#80C269','#13B5B1']const findData = (callback) => {let rightBottomPieRes = findRightBottomPie(props.timeRange === 'previous' ? 2 : 1)rightBottomPieRes.then(res => {// let arr = []// props.dictItem.find(qhItem => {//   let result = res.find(item => item.name.indexOf(qhItem.label) > -1)//   if (result) {//     arr.push({name: qhItem.label, value: result.value})//   } else {//     arr.push({name: qhItem.label, value: 0})//   }// })data.dataList = rescallback()})}let myChart = nullconst option = ref(null)const buildOption = () => {let _option = {tooltip: {show: false,trigger: 'item',},legend: {show: false,itemWidth: 12,itemHeight: 12,itemGap: 20,icon: 'roundRect',bottom: '5%',left: '45px',right: '45px',formatter: (name) => {let total = 0;let tarValue = 0;for (let i = 0; i < data.dataList.length; i++) {total += parseFloat(data.dataList[i].value);}for (let index = 0; index < data.dataList.length; index++) {if (name.indexOf(data.dataList[index].name)> -1) {if(total && total !== 0){tarValue = ((data.dataList[index].value / total)*100).toFixed(2);}}}// if(tarValue === 0){//   return `{oneone|${name}}`;// }return `{oneone|${name}}   {threethree|${removeTrailingZeros(tarValue)}%}`;},textStyle: {rich: {threethree: {color: "#999",}}}},title: {text: '0',//主标题文本subtext:'资金(万元)',//副标题文本right:'center',top:'42%',textStyle:{fontSize: '1.2rem',color:'#454c5c',align:'center'},subtextStyle:{fontFamily : "微软雅黑",fontSize: '0.8rem',color:'#6c7a89',}},color: colorList,series: [{name: '',type: 'pie',radius: ['35%', '55%'],center: ['50%', '50%'],avoidLabelOverlap: false,itemStyle: {borderRadius: 0,borderColor: '#fff',borderWidth: 2},// label: {//     show: false,//     position: 'center'// },emphasis: {label: {show: true,fontSize: 20,fontWeight: 'bold'},scale: true,scaleSize: 20},// labelLine: {//     show: false// },label: {show: true,alignTo: 'edge',formatter: '{name|{b}} {time|{d}%} \n',minMargin: 5,edgeDistance: 10,lineHeight: 15,rich: {name: {fontSize: 14,color: '#000'},time: {fontSize: 14,color: '#999'}}},labelLine: {show: true,length: 30,length2: 0,maxSurfaceAngle: 80},labelLayout: function (params) {const isLeft = params.labelRect.x < myChart.getWidth() / 2;const points = params.labelLinePoints;// Update the end point.points[2][0] = isLeft  ? params.labelRect.x : params.labelRect.x + params.labelRect.width;return {labelLinePoints: points};},data: data.dataList}]}_option.series[0].data = data.dataList;option.value = _option}const handleChartLoop = (option, myChart) => {if (!myChart) {return;}let currentIndex = -1; // 当前高亮图形在饼图数据中的下标let timeTicket = setInterval(selectPie, 2000); // 设置自动切换高亮图形的定时器// 取消所有高亮并高亮当前图形function highlightPie() {// 遍历饼图数据，取消所有图形的高亮效果for (let idx in option.series[0].data) {myChart.dispatchAction({type: "downplay",seriesIndex: 0,dataIndex: idx,});}// 高亮当前图形myChart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: currentIndex,});let data = option.series[0].data[currentIndex] && option.series[0].data[currentIndex].value ? option.series[0].data[currentIndex].value : 0myChart.setOption({title: {text: removeTrailingZeros(parseFloat(data).toFixed(2))},series: {label: {show: false,formatter: () => {if ((option.series[0].data[currentIndex] && option.series[0].data[currentIndex].value === 0)|| !props.total || props.total == 0) {return `{name|${option.series[0].data[currentIndex].name}} {time|0%} \n`}let val = removeTrailingZeros(((option.series[0].data[currentIndex].value/props.total)*100).toFixed(2))return `{name|${option.series[0].data[currentIndex].name}} {time|${val}%} \n`}}}})}// 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形myChart.on("mouseover", (params) => {clearInterval(timeTicket);currentIndex = params.dataIndex;highlightPie();});// 用户鼠标移出时，重新开始自动切换myChart.on("mouseout", (params) => {if (timeTicket) {clearInterval(timeTicket);}timeTicket = setInterval(selectPie, 1000);});// 高亮效果切换到下一个图形function selectPie() {let dataLen = option.series[0].data.length;currentIndex = (currentIndex + 1) % dataLen;highlightPie();}}watch(() => props.timeRange, (nv, ov) => {findData(()=>buildOption())})watch(()=>option.value,(newOption,oldOption)=>{if(myChart == null) {myChart = echarts.init(chartRef.value);}option.value && myChart && myChart.setOption(newOption)if(oldOption==null){option.value && myChart && handleChartLoop(option.value,myChart);} else {//option.value && myChart && handleChartLoop(option.value,myChart);}})onMounted(()=>{myChart = echarts.init(chartRef.value);findData(()=>buildOption());emitter.on('echartsTimeRangeChange',()=>setTimeout(() => myChart && myChart.resize({width:chartRef.value.clientWidth,height:chartRef.value.clientHeight}), 50))emitter.on('echartsUpdate',()=>myChart && myChart.resize({width:chartRef.value.clientWidth,height:chartRef.value.clientHeight}))})onUnmounted(()=>{emitter.off('echartsTimeRangeChange')emitter.off('echartsUpdate')myChart.dispose()})</script><style scoped>.charts-box{height: calc(100% - 48px);}.charts-instance{height: 60%;width: 100%;overflow: hidden;
}
.charts-note{margin-left: 15%;height: 40%;overflow: hidden;
}
.charts-legend {display: inline-block;vertical-align: middle;margin-top: 15px;width: 50%;font-size: 12px;
}
.legend {display: inline-block;vertical-align: middle;margin-right:5px;width: 12px;height: 12px;border-radius: 2px;
}</style>

这篇关于vue3+eachrts饼图轮流切换显示高亮数据的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/872824。

相关文章

SQL Server修改数据库名及物理数据文件名操作步骤

SQL Server修改数据库名及物理数据文件名操作步骤

《SQLServer修改数据库名及物理数据文件名操作步骤》在SQLServer中重命名数据库是一个常见的操作,但需要确保用户具有足够的权限来执行此操作,：本文主要介绍SQLServer修改数据... 目录一、背景介绍二、操作步骤2.1 设置为单用户模式（断开连接）2.2 修改数据库名称2.3 查找逻辑文件名
阅读更多...
苹果macOS 26 Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色

苹果macOS 26 Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色

《苹果macOS26Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色》在整体系统设计方面，macOS26采用了全新的玻璃质感视觉风格，应用于Dock栏、应用图标以及桌面小部件等多个界面... 科技媒体 MACRumors 昨日（6 月 13 日）发布博文，报道称在 macOS 26 Tahoe 中
阅读更多...
全面解析HTML5中Checkbox标签

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一，通过合理使用其属性和样式自定义方法，可以为用户提供丰富多样的交互体验，这篇文章给大家介绍HTML5中C... 在html5中，Checkbox（复选框）是一种常用的表单元素，允许用户在一组选项中选择多个项目。本
阅读更多...
HTML5 搜索框Search Box详解

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具，能够有效提升用户体验,通过结合自动补全功能和适当的样式，可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框（Search Box）详解搜索框是一个用于输入查询内容的控件，通常用于网站或应用程
阅读更多...
canal实现mysql数据同步的详细过程

canal实现mysql数据同步的详细过程

《canal实现mysql数据同步的详细过程》：本文主要介绍canal实现mysql数据同步的详细过程,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的... 目录1、canal下载2、mysql同步用户创建和授权3、canal admin安装和启动4、canal
阅读更多...
CSS3中的字体及相关属性详解

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》：本文主要介绍了CSS3中的字体及相关属性，详细内容请阅读本文，希望能对你有所帮助... 字体网页字体的三个来源：用户机器上安装的字体，放心使用。保存在第三方网站上的字体，例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字
阅读更多...
使用SpringBoot整合Sharding Sphere实现数据脱敏的示例

使用SpringBoot整合Sharding Sphere实现数据脱敏的示例

《使用SpringBoot整合ShardingSphere实现数据脱敏的示例》ApacheShardingSphere数据脱敏模块,通过SQL拦截与改写实现敏感信息加密存储,解决手动处理繁琐及系统改... 目录痛点一：痛点二：脱敏配置Quick Start——Spring 显示配置：1.引入依赖2.创建脱敏
阅读更多...
html 滚动条滚动过快会留下边框线的解决方案

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》：本文主要介绍了html滚动条滚动过快会留下边框线的解决方案，解决方法很简单，详细内容请阅读本文，希望能对你有所帮助... 滚动条滚动过快时，会留下边框线但其实大部分时候是这样的，没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行
阅读更多...
详解如何使用Python构建从数据到文档的自动化工作流

详解如何使用Python构建从数据到文档的自动化工作流

《详解如何使用Python构建从数据到文档的自动化工作流》这篇文章将通过真实工作场景拆解,为大家展示如何用Python构建自动化工作流,让工具代替人力完成这些数字苦力活,感兴趣的小伙伴可以跟随小编一起... 目录一、Excel处理：从数据搬运工到智能分析师二、PDF处理：文档工厂的智能生产线三、邮件自动化：
阅读更多...
RedisTemplate默认序列化方式显示中文乱码的解决

RedisTemplate默认序列化方式显示中文乱码的解决

《RedisTemplate默认序列化方式显示中文乱码的解决》本文主要介绍了SpringDataRedis默认使用JdkSerializationRedisSerializer导致数据乱码,文中通过示... 目录1. 问题原因2. 解决方案3. 配置类示例4. 配置说明5. 使用示例6. 验证存储结果7.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2