vue2结合echarts实现数据排名列表——前端柱状进度条排行榜

写在前面，博主是个在北京打拼的码农，工作多年做过各类项目，最近心血来潮在这儿写点东西，欢迎大家多多指教。

数据排名列表——图表开发，动态柱状图表，排名图

UI

3debe8ac928c47f5b666fe9afae805ed.png

直接搜到类似在线代码（数据列表--bar - category-work,grid直角坐标,legend,series-bar柱状图,toolbox工具栏,tooltip提示框 - makeapie echarts社区图表可视化案例），准备在此基础上向UI靠拢

全部代码：

 enableChart() {let that = this;// 启用表格----重组数据格式this.tableData = JSON.parse(JSON.stringify(this.chartData));if (this.tableData && this.tableData.length) {// this.tableData.push(this.allNumObj);this.tableData = [...this.tableData, this.benjiObj, this.allNumObj];}this.$nextTick(function() {const elPart = document.querySelectorAll("tr");elPart.forEach(a => {a.children[2].style.color = "#fd5702";});});this.$forceUpdate();//       if (["舆情办结率"].includes(this.typeName)) {// return;// // 舆情办结率没图表所以不刷新//             }//  if (["舆情办结率", "转办时效"].includes(this.typeName)) {//         this.titleStr = "均值";//       }else{//         this.titleStr = "合计";//       }// color: #fd5702;var myChart = echarts.init(document.getElementById("chartPart1"));var colorList = ["#FC0033", "#FD5702", "#FEB507", "#BBBBBB"];var datas = this.chartData.map(a => {return { value: a.nowInfoNum, name: a.addressName };});let junZhi = (this.chartData[0].nowInfoAllNum /(this.addressOption.length - 2)).toFixed(2);if (this.loginUl.orgParentId != 0) {junZhi = (this.chartData[0].nowInfoAllNum /(this.addressOption.length - 1)).toFixed(2);}if (this.loginUl.orgParentId != 7) {junZhi = (this.chartData[0].nowInfoAllNum / this.addressOption.length).toFixed(2);}let maxArr = new Array(datas.length).fill(this.chartData[0] ? this.chartData[0].nowInfoAllNum : "暂无");//合计值字段;let option = {tooltip: {trigger: "axis",axisPointer: {type: "none"},formatter: function(params, index) {return (params[0].name +"，位列第" +(params[0].dataIndex + 1) +"，" +params[0].seriesName +params[0].value +"<br>均值：" +junZhi);}},legend: {show: false},grid: {top: 30, //图表距离容器下面多少距离containLabel: true},xAxis: {show: false,type: "value"},yAxis: [{type: "category",inverse: true,axisLine: {show: false},axisTick: {show: false},axisPointer: {label: {show: false,margin: 20}},// itemGap: 10,data: datas.map(item => item.name),axisLabel: {// width:2000,    //网格宽度// height:'auto',   //网格高度margin: 140,fontSize: 16,align: "left",color: "#333",// offset: 100,  // 调整标签与刻度值的距离rich: {a1: {color: "#fff",backgroundColor: colorList[0],width: 30,height: 30,align: "center",borderRadius: 2},a2: {color: "#fff",backgroundColor: colorList[1],width: 30,height: 30,align: "center",borderRadius: 2},a3: {color: "#fff",backgroundColor: colorList[2],width: 30,height: 30,align: "center",borderRadius: 2},b: {color: "#fff",backgroundColor: colorList[3],width: 30,height: 30,align: "center",borderRadius: 2}},formatter: function(params) {var index = datas.map(item => item.name).indexOf(params);index = index + 1;let disposeText = params.length > 6 ? params + "..." : params;if (index - 1 < 3) {return ["{a" + index + "|" + index + "}" + "  " + disposeText].join("\n");} else {return ["{b|" + index + "}" + "  " + disposeText].join("\n");}}}},{type: "category",inverse: true,axisTick: "none",axisLine: "none",show: true,data: datas.map(item => item.value),axisLabel: {show: false, //右侧百分比fontSize: 14,color: "#333",formatter: "{value}%"}}],series: [{//   left: 100,// right: 0,// top:0,// bottom:0,z: 2,name: this.typeName,type: "bar",barWidth: 20,zlevel: 1,data: datas.map((item, i) => {let colorStr = "";if (that.checkName === item.name) {colorStr = "#009b63";} else {if (i > 3) {colorStr = colorList[3];} else {colorStr = colorList[i];}}let itemStyle = {color: colorStr,barBorderRadius: 30};//设置选中的柱子颜色return {value: item.value,itemStyle: itemStyle};}),label: {show: false,position: "right",color: "#333333",fontSize: 14,offset: [10, 0]}},{name: "合计",type: "bar",barWidth: 20,barGap: "-100%",itemStyle: {normal: {color: "#EEEEEE",barBorderRadius: 30},emphasis: {// 高亮状态下的样式color: "#EEEEEE"}},data: maxArr}]};var worldMapContainer = document.getElementById("chartPart1");//用于使chart自适应高度和宽度,通过外部元素高宽计算容器高宽 - 50worldMapContainer.style.width =document.getElementsByClassName("left")[0].clientWidth + 100 + "px";let H = 400;if (60 * this.chartData.length > 400) {H = 60 * this.chartData.length;}document.getElementsByClassName("left")[0].style.height = H + "px";worldMapContainer.style.height = H + "px";//设置容器高宽myChart.setOption(option);myChart.resize();this.$forceUpdate();},

调整echarts图的缩放大小

echarts如何改变图形的大小

echarts 放大与缩放的功能

echarts图表的大小调整的解决方案

echarts如何改变图形的大小

echarts的图表撑满整个容器 echarts图大小设置

那么怎么真真正正的解决上述几个问题呢

当我们直接拿别人二次开发过的echarts图，发现有点无从下手，搜索后也没发现有啥好属性，某处边距就是很宽看着难受

我的解决方法是

父元素相对定位，子元素绝对定位，直接调整子元素Echarts图的宽高来缩放图表，通过定位，让框与框的间距消失

改动前：

75b3e77ae884469c971bdfe2021d4d85.png

 

改动后：

fc726a470a6148f79c17097c180ac248.png

.left {position: relative;
.chartPartEl {position: absolute !important;top: 0;left: -90px;
}}<div class="left" v-show="isUnfold"><templatev-if="chartData && chartData.length && chartData[0].nowInfoAllNum"><p><button class="green" @click="handleOk()">下载图片</button></p><divclass="chartPartEl"id="chartPart1"ref="chartPart1"style="width: 500px;height: 500px;"></div></template><p v-else class="notData">暂无数据</p></div>

 

最终效果：

b84c5fd631b841ad9dd539b3b0e2b4cd.png

5ee6cdc4241441d981e5559a7866abf5.png

 

 

 

 

 

本次开发中碰到的有意思的文章：

 

1.ECharts 高度宽度自适应（转载） - hao_1234_1234 - 博客园

  var worldMapContainer = document.getElementById("chartPart1");//用于使chart自适应高度和宽度,通过外部元素高宽计算容器高宽var resizeWorldMapContainer = function() {worldMapContainer.style.width =document.getElementsByClassName("left")[0].clientWidth - 100 + "px";worldMapContainer.style.height =document.getElementsByClassName("content")[0].clientWidth + "px";}; //设置容器高宽resizeWorldMapContainer();myChart.setOption(option);myChart.resize();

 

2.4361476db20642b9a701a8bbdfb6549e.png

3.javaScript实用方法第三篇（.fill .filter .find）_js .fill-CSDN博客 

4.Error in callback for watcher “options“: “TypeError:Cannot read properties of null (reading ‘level‘)_error in callback for watcher "options": "typeerro-CSDN博客 

5.4727e943c56b42489b7575efa74cd7e3.png 解决前代码：根据父元素可视高度实现

//用于使chart自适应高度和宽度,通过外部元素高宽计算容器高宽var resizeWorldMapContainer = function() {worldMapContainer.style.width =document.getElementsByClassName("left")[0].clientWidth - 100 + "px";worldMapContainer.style.height =document.getElementsByClassName("content")[0].clientWidth + "px";}; //设置容器高宽resizeWorldMapContainer();

解决后代码：根据数据数量多少决定

  var worldMapContainer = document.getElementById("chartPart1");//用于使chart自适应高度和宽度,通过外部元素高宽计算容器高宽// var resizeWorldMapContainer = function() {worldMapContainer.style.width =document.getElementsByClassName("left")[0].clientWidth - 100 + "px";let H=400;if(60*this.chartData.length>400){
H=60*this.chartData.length;}worldMapContainer.style.height =H+'px';// document.getElementsByClassName("left")[0].clientHeight + "px";// }; //设置容器高宽// resizeWorldMapContainer();

6.b4c48ba754d04681a383bfe26c079dce.png

 

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

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

相关文章

多线程——线程池

多线程——线程池

目录 前言 一、什么是线程池 1.引入线程池的原因 2.线程池的介绍 二、标准库中的线程池 1.构造方法 2.方法参数 &#xff08;1&#xff09;corePoolSize 与 maximumPoolSize &#xff08;2&#xff09;keepAliveTime 与 unit &#xff08;3&#xff09;workQueue&am…
阅读更多...
Redis集群分片存储最佳实践，手把手搭建Redis集群

Redis集群分片存储最佳实践，手把手搭建Redis集群

目录 一、Redis集群介绍1、设计目标2、为什么需要分片存储 二、官网集群方案三、搭建集群1、准备6个独立的Redis服务2、通过redis-cli工具创建集群3、检验集群4、集群重新分片5、故障转移测试6、集群扩容7、集群节点删除 四、集群关心的问题五、集群功能限制 一、Redis集群介绍…
阅读更多...
蓝桥杯题目理解

蓝桥杯题目理解

1. 一维差分 1.1. 小蓝的操作 1.1.1. 题目解析&#xff1a; 这道题提到了对于“区间”进行操作&#xff0c;而差分数列就是对于区间进行操作的好方法。 观察差分数列&#xff1a; 给定数列&#xff1a;1 3 5 2 7 1 差分数列&#xff1a;1 2 2 -3 5 6 题目要求把原数组全部…
阅读更多...
基于SpringBoot的高校体测管理系统设计与实现（源码+定制+开发）高校体测记录系统设计、高校体测信息管理平台、智能体测管理系统开发、高校体测记录系统设计

基于SpringBoot的高校体测管理系统设计与实现（源码+定制+开发）高校体测记录系统设计、高校体测信息管理平台、智能体测管理系统开发、高校体测记录系统设计

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…
阅读更多...
25届电信保研经验贴（自动化所）

25届电信保研经验贴（自动化所）

个人背景 学校&#xff1a;中九 专业&#xff1a;电子信息工程 加权&#xff1a;92.89 绩点&#xff1a;3.91/4.0 rank&#xff1a;前五学期rank2/95&#xff0c;综合排名rank1&#xff08;前六学期和综合排名出的晚&#xff0c;实际上只用到了前五学期&#xff09; 科研…
阅读更多...
海外云手机实现高效的海外社交媒体营销

海外云手机实现高效的海外社交媒体营销

随着全球化的深入发展&#xff0c;越来越多的中国企业走向国际市场&#xff0c;尤其是B2B外贸企业&#xff0c;海外社交媒体营销已成为其扩大市场的重要手段。在复杂多变的海外市场环境中&#xff0c;如何有效提高营销效率并降低运营风险&#xff0c;成为了众多企业的首要任务。…
阅读更多...
路由器 相关知识

路由器 相关知识

一、路由器是什么 参考&#xff1a;图解系列--路由器和它庞大的功能_路由功能-CSDN博客 路由器是指&#xff1a;主要负责 OSI参考模型中网络层的处理工作&#xff0c;并根据路由表信息在不同的网络 之间转发IP 分组的网络硬件(图3-1)。这里的网络一般是指IP 子网&#xff0c;…
阅读更多...
Java基础（7）图书管理系统

Java基础（7）图书管理系统

目录 1.前言 2.正文 2.1思路 2.2Book包 2.3people包 2.4operation包 2.5主函数 3.小结 1.前言 哈喽大家好吖&#xff0c;今天来给前面Java基础的学习来一个基础的实战&#xff0c;做一个简单的图书管理系统&#xff0c;这里边综合利用了我们之前学习到的类和对象&…
阅读更多...
爬虫ip技术未来发展趋势

爬虫ip技术未来发展趋势

各位朋友&#xff0c;大家好&#xff01;有伙伴问爬虫技术未来会有更好的发展么&#xff0c;那今天小蝌蚪来跟大家聊聊爬虫技术未来的发展趋势分享一下行业咨询。 大家在日常工作和生活中&#xff0c;都希望事情能更省心、高效吧&#xff1f;未来的爬虫技术就朝着这个方向发展…
阅读更多...
sheng的学习笔记-AI基础-正确率/召回率/F1指标/ROC曲线

sheng的学习笔记-AI基础-正确率/召回率/F1指标/ROC曲线

AI目录&#xff1a;sheng的学习笔记-AI目录-CSDN博客 分类准确度问题 假设有一个癌症预测系统&#xff0c;输入体检信息&#xff0c;可以判断是否有癌症。如果癌症产生的概率只有0.1%&#xff0c;那么系统预测所有人都是健康&#xff0c;即可达到99.9%的准确率。 但显然这样的…
阅读更多...
在Keil调试内存中的程序

在Keil调试内存中的程序

在Keil调试内存中的程序 目录 在Keil调试内存中的程序1. 问题引出2. 测试工程3. 工程和Keil配置 实验环境&#xff1a; MCU&#xff1a;STM32F103C8T6 (Flash 64K RAM 20K)Keil&#xff1a;uVision V5.27.0.0仿真器&#xff1a;ST-Link 参考源码&#xff1a;https://download.c…
阅读更多...
Redis 集群 总结

Redis 集群 总结

前言 相关系列 《Redis & 目录》&#xff08;持续更新&#xff09;《Redis & 集群 & 源码》&#xff08;学习过程/多有漏误/仅作参考/不再更新&#xff09;《Redis & 集群 & 总结》&#xff08;学习总结/最新最准/持续更新&#xff09;《Redis & 集群…
阅读更多...
导出问题处理

导出问题处理

问题描述 测试出来一个问题&#xff0c;使用地市的角色&#xff0c;导出数据然后超过了20w的数据&#xff0c;提示报错&#xff0c;我还以为是偶然的问题&#xff0c;然后是发现是普遍的问题&#xff0c;本地环境复现了&#xff0c;然后是&#xff0c;这个功能是三套角色&…
阅读更多...
ESP32-S3学习笔记：常用的ESP-IDF命令总结

ESP32-S3学习笔记：常用的ESP-IDF命令总结

参考资料&#xff1a;1.esptool.py工具 2.idf.py工具 后续文章的讲解需要用到IDF命令行工具&#xff0c;当前文章简单介绍一下。 目录 打开命令行的小技巧 一、读flash信息 二、擦除flash 三、读flash数据 四、写flash数据 打开命令行的小技巧 大家安装完IDF开发包后…
阅读更多...
React类组件详解

React类组件详解

React类组件是通过创建class继承React.Component来创建的&#xff0c;是React中用于构建用户界面的重要部分。以下是对React类组件的详细解释&#xff1a; 一、定义与基本结构 类组件使用ES6的class语法定义&#xff0c;并继承自React.Component。它们具有更复杂的功能&#xf…
阅读更多...
腾讯云 COS 多 AZ 存储保证服务高可用性

腾讯云 COS 多 AZ 存储保证服务高可用性

腾讯云 COS 的多 AZ 存储架构能够为用户数据提供数据中心级别的容灾能力。多 AZ 存储将客户数据分散存储在城市中多个不同的数据中心&#xff0c;当某个数据中心因为自然灾害、断电等极端情况导致整体故障时&#xff0c;多 AZ 存储架构依然可以为客户提供稳定可靠的存储服务。 …
阅读更多...
表格编辑demo

表格编辑demo

<el-form :model"form" :rules"status ? rules : {}" ref"form" class"form-container" :inline"true"><el-table :data"tableData"><el-table-column label"计算公式"><templat…
阅读更多...
ArcGIS001:ArcGIS10.2安装教程

ArcGIS001:ArcGIS10.2安装教程

摘要&#xff1a;本文详细介绍arcgis10.2的安装、破解、汉化过程。 一、软件下载 安装包链接&#xff1a;https://pan.baidu.com/s/1T3UJ7t_ELZ73TH2wGOcfpg?pwd08zk 提取码&#xff1a;08zk 二、安装NET Framework 3.5 双击打开控制面板&#xff0c;点击【卸载程序】&…
阅读更多...
05方差分析续

05方差分析续

文章目录 1.Three way ANOVA2.Latin square design2.Hierarchical (nested) ANOVA3.Split-plot ANOVA4.Repeated measures ANOVA5.Mixed effect models 1.Three way ANOVA 三因素相关分析 单因子分析的代码 data(mtcars) nrow(mtcars) # 32 mtcars$cyl as.factor(mtcars$cyl…
阅读更多...
c#子控件拖动父控件方法及父控件限在窗体内拖动

c#子控件拖动父控件方法及父控件限在窗体内拖动

一、效果 拖放位置不超过窗体四边，超出后自动靠边停靠支持多子控件拖动指定控件拖放（含父控件或窗体）点击左上角logo弹出消息窗口（默认位置右下角）1.1 效果展示 1.2 关于MQTTnet（最新版v4.3.7.1207）实现在线客服功能，见下篇博文 https://github.com/dotnet/MQTTnet 网上…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023