当前位置： 首页 > news >正文

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

news 2024/10/24 14:02:40

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

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

UI

直接搜到类似在线代码（数据列表--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图的宽高来缩放图表，通过定位，让框与框的间距消失

改动前：

改动后：

.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>

最终效果：

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

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.

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. 解决前代码：根据父元素可视高度实现

//用于使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.


http://www.mrgr.cn/news/57581.html

相关文章：

  • 【1024特辑 | 机器学习-无监督学习】EM算法
  • vue，java，webSocket通讯，服务端主动给多客户端发消息
  • Python | Leetcode Python题解之第498题对角线遍历
  • 矩阵的可解性：关于Ax=b的研究
  • git 下载慢
  • PyTorch模型转换ONNX 入门
  • android 生成json 文件
  • 双十一护眼台灯测评推荐：实测书客、柏曼和明基护眼台灯怎么样
  • Lora算法原理及应用
  • qt QLineEdit详解
  • 大模型微调实战：基于 LLaMAFactory 通过 LoRA 微调修改模型自我认知
  • 分组密码填充模式
  • 自闭症学校：儿童成长的崭新希望
  • Spring Boot：植物健康监测的智能管家
  • 请列举四种「等比例自适应矩形」实现方案？
  • API接口在各个领域的发挥着什么样的作用呢
  • 1024程序员日|向改变世界的程序员 致敬！
  • 字符串-04-字符串加解密
  • 最新整理：自动化测试常见面试题
  • fmql之Linux中I2C总线框架
  • 开源模型应用落地-Qwen2-VL-7B-Instruct-vLLM-OpenAI API Client调用
  • 基于RabbitMQ，Redis，Redisson，RocketMQ四种技术实现订单延时关闭功能及其相关优缺点介绍（以12306为主题）
  • Stability.AI 发布 SD3.5 模型，能否逆袭击败 FLUX？如何在ComfyUI中的使用SD3.5？
  • 使用gpt2-medium基座说明模型微调
  • anolis os 8.8 修改kube-proxy的模式为ipvs-kubeadm部署
  • arcgis pro 3.3.1安装教程