有排名的柱状图

阅读：评论：0

有排名的柱状图

项目中使用到的echart 这个图我是纠结了一天,然后又花时间实践了一天,最后才有点头续
单单看图的话,会觉得好简单啊有什么困难的
请听需求:
1.此图要随着网页大小改变而改变;
2.这个是显示前10名的值

为什么包了这么多层都是有原因的啊哭泣

地图部分就不贴代码了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{padding: 0;margin: 0;box-sizing: border-box;}body,html{width: 100%;height: 100%;background: #f1f1f1;}</style>
</head>
<body>
<div style="width: 40%;height: 30%;display: inline-block;position:relative;overflow: hidden;background: #fff;padding: 10px;"><div  style="width:55%;display: inline-block;margin-left:9%;height:80%;background:#f1f1f1;">我是地图</div><div style="width: 30%;height:90%;display: inline-block ;position: absolute;top:10%; margin-left: 2%;"><h4 style="margin-bottom:8px;margin-top:0;font-size: 14px;color: #4b4c4c;">top10</h4><div id="wrap" style="height: 100%;width: 100%;position: relative;"><div id="topNum" style="display: inline-block;width: 10%;height: 80%;"></div><div id="topName" style="width: 30%;height: 80%;;display: inline-block;position:absolute;font-size: 12px;"></div><div id="topCanvas" style="display: inline-block;width: 80%;height: 80%;"></div><div id="borderBottom" style="position: absolute;width: 95%;height: 100%;top: 0; border-top: 1px solid #edf0f3;"></div></div></div>
</div>
<script src="../jquery-1.8.3.js"></script>
<script src="echarts.min.js"></script>
<script>var data =  {"allAmount":[{"name":"浙江","value":9944},{"name":"山东","value":6200},{"name":"北京","value":3100},{"name":"天津","value":3000},{"name":"河北","value":3},{"name":"山西","value":8000},{"name":"内蒙古","value":-1},{"name":"辽宁","value":-1},{"name":"吉林","value":-1},{"name":"黑龙江","value":-1},{"name":"上海","value":-1},{"name":"江苏","value":-1},{"name":"安徽","value":-1},{"name":"福建","value":-1},{"name":"江西","value":-1},{"name":"河南","value":-1},{"name":"湖北","value":-1},{"name":"湖南","value":-1},{"name":"广东","value":-1},{"name":"广西","value":-1},{"name":"海南","value":-1},{"name":"重庆","value":-1},{"name":"四川","value":-1},{"name":"贵州","value":-1},{"name":"云南","value":-1},{"name":"西藏","value":-1},{"name":"陕西","value":-1},{"name":"甘肃","value":-1},{"name":"青海","value":-1},{"name":"宁夏","value":-1},{"name":"新疆","value":-1},{"name":"台湾","value":-1},{"name":"香港","value":-1},{"name":"澳门","value":-1}],"localCount":"0"}getAllMount()function getAllMount(){var html2 = "";//因为是top10所以选择前十个,即使value=-1也没关系 主要是占位 要不然前面的 1 2 3 这种不好添加var provinceTop10 = [];for(var i=0;i<data.allAmount.length;i++){if(i<10){provinceTop10.push(data.allAmount[i]);}else{break;}}//记录value 不为 -1的数组var provinceTop10Arry = [];//记录value 不为 -1的数组 的长度var provinceTop10Index = ""for(var i=0;i<provinceTop10.length;i++){//value为-1时候 把name和value都为空 就像是隐藏了一样if(provinceTop10[i].value == "-1"){provinceTop10[i].value = '';provinceTop10[i].name = '';}else{provinceTop10Arry.push(provinceTop10[i].value)}}provinceTop10Index = provinceTop10Arry.length;var html3 = "";var num = ""for(var i = provinceTop10.length-1;i >= 0;i--){num = 10-i;//value != -1 的显示if(num <= provinceTop10Index ){//前三名的颜色if(num<=3){html3 += '<div style="position: relative;height:9.9%;"><div style="white-space:nowrap;color:#808080; text-align: center;  position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%); "> <p style=" font-size:8px;-webkit-transform:scale(0.8);padding: 0 3px;margin: 0;background: #57a6ff;color:#fff">'+num+'</p></div></div>'}else{html3 += '<div style="position: relative;height:9.9%;"><div style="white-space:nowrap;color:#808080; text-align: center;  position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%); "> <p style=" font-size:8px;-webkit-transform:scale(0.8);padding: 0 3px;margin: 0;background: #99b4d3;color:#fff">'+num+'</p></div></div>'}}else{html3 += '<div style="position: relative;height:9.5%;"><div style="white-space:nowrap;color:#808080; text-align: center;  position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%); "> <p style=" font-size:8px;-webkit-transform:scale(0.8);padding: 0;margin: 0;"></p></div></div>'}}$("#topNum").html(html3);//设置下边框var html4 = "";for(var i = 0;i<provinceTop10Index;i++){html4 += '<div style="border-bottom: 1px solid #edf0f3;height: 8%;"></div>'}$("#borderBottom").html(html4);var html = "";for(var i = 0;i< provinceTop10.length-1;i++){var itemName = "";itemName = provinceTop10[i].name;html += '<div style="position: relative;height:9.8%;"><div style="white-space:nowrap;color:#808080; text-align: center;  position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%); title="'+itemName+'"> <p style=" font-size:8px;-webkit-transform:scale(0.8);padding: 0;margin: 0;">'+itemName+'</p></div></div>'}$("#topName").html(html);for(var i=0;i<provinceTop10.length;i++){if(provinceTop10.value == -1){}}var provinceTop10Name=[];for(var i=0;i<provinceTop10.length;i++){provinceTop10Name.push(provinceTop10[i].name);}var provinceTop10Value=[];for(var i=0;i<provinceTop10.length;i++){provinceTop10Value.push(provinceTop10[i].value)}var provinceTop10List={}provinceTop10List.provinceTop10Name = provinceTop10Name;provinceTop10List.provinceTop10Value = provinceTop10Value;initChinaTopChart(provinceTop10List)
}function initChinaTopChart(data) {var myChart = echarts.ElementById('topCanvas'));var typeOption = {title: {show: false,},grid: {left: '0',right: '-10px',bottom: '10',top:"-20px",containLabel: true},xAxis: [{type: 'value',position: 'top',axisLine: {lineStyle:{color: '#e5e5e5',width: 1,},show:false,},axisTick:{show:false,},axisLabel:{//坐标轴文字show:false},// minInterval:1,splitLine:{//网格线的格式show:false,//去掉x轴上的网格线——lineStyle:{color: '#e5e5e5',//网格线颜色width: 1,//网格线宽度type: 'dashed'//网格线样式}},}],yAxis: [{type: 'category',data:data.provinceTop10Name,inverse:true,//倒置y轴数据axisLine: {show:false,},minInterval:1,splitLine:{//网格线的格式// show:true,//去掉x轴上的网格线——lineStyle:{color: '#e5e5e5',//网格线颜色width: 1,//网格线宽度}},axisTick: {//刻度相关// alignWithLabel: true,//保证刻度线和标签对齐length:40,lineStyle:{color:"#e5e5e5",},show:false,},boundaryGap:true,axisLabel:{//坐标轴文字color:"#666666",fontFamily:"Arial",margin:60,show:false,},}],series: [{name: '当前资源',type: 'bar',stack: '总量',roam:true,barWidth: 8,data:data.provinceTop10Value,itemStyle: {normal: {color: function(params) {//首先定义一个数组var colorList = ['#57a5fe','#57a5fe','#57a5fe','#95afce','#95afce','#95afce','#95afce','#95afce','#95afce','#95afce'];return colorList[params.dataIndex]}}},//?????颜色??label: {normal: {show: true,position: "left",color:"#666666",fontFamily:"Arial",
//                            formatter:'{c}'},},}]};size = size;myChart.setOption(typeOption);};
</script>
</body>
</html>

下面图就是完成效果

这个标签文字不知道为什么和柱状图的颜色一样,我在项目里面也是这样写的,但是文字标签颜色就是我设置的#666的颜色就像第一个图

本文发布于:2024-01-29 17:56:08，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170652217317247.html

上一篇：2022 年 F1Delta Time 新年大奖赛来啦

下一篇：echarts横向柱状图TOP排名

标签：柱状图

留言与评论（共有 0 条评论）