0
0

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

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

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

UI

3debe8ac928c47f5b666fe9afae805ed.png

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

全部代码：

  1.  enableChart() {
  2.       let that = this;
  3.       // 启用表格----重组数据格式
  5.       this.tableData = JSON.parse(JSON.stringify(this.chartData));
  6.       if (this.tableData && this.tableData.length) {
  7.         // this.tableData.push(this.allNumObj);
  8.         this.tableData = [...this.tableData, this.benjiObj, this.allNumObj];
  9.       }
  11.       this.$nextTick(function() {
  12.         const elPart = document.querySelectorAll("tr");
  13.         elPart.forEach(a => {
  14.           a.children[2].style.color = "#fd5702";
  15.         });
  16.       });
  18.       this.$forceUpdate();
  19.       //       if (["舆情办结率"].includes(this.typeName)) {
  20.       // return;
  21.       // // 舆情办结率没图表所以不刷新
  22.       //             }
  23.       //  if (["舆情办结率", "转办时效"].includes(this.typeName)) {
  24.       //         this.titleStr = "均值";
  25.       //       }else{
  26.       //         this.titleStr = "合计";
  28.       //       }
  29.       // color: #fd5702;
  30.       var myChart = echarts.init(document.getElementById("chartPart1"));
  31.       var colorList = ["#FC0033", "#FD5702", "#FEB507", "#BBBBBB"];
  32.       var datas = this.chartData.map(a => {
  33.         return { value: a.nowInfoNum, name: a.addressName };
  34.       });
  35.       let junZhi = (
  36.         this.chartData[0].nowInfoAllNum /
  37.         (this.addressOption.length - 2)
  38.       ).toFixed(2);
  39.       if (this.loginUl.orgParentId != 0) {
  40.         junZhi = (
  41.           this.chartData[0].nowInfoAllNum /
  42.           (this.addressOption.length - 1)
  43.         ).toFixed(2);
  44.       }
  45.       if (this.loginUl.orgParentId != 7) {
  46.         junZhi = (
  47.           this.chartData[0].nowInfoAllNum / this.addressOption.length
  48.         ).toFixed(2);
  49.       }
  50.       let maxArr = new Array(datas.length).fill(
  51.         this.chartData[0] ? this.chartData[0].nowInfoAllNum : "暂无"
  52.       );
  53.       //合计值字段;
  55.       let option = {
  56.         tooltip: {
  57.           trigger: "axis",
  58.           axisPointer: {
  59.             type: "none"
  60.           },
  61.           formatter: function(params, index) {
  62.             return (
  63.               params[0].name +
  64.               "，位列第" +
  65.               (params[0].dataIndex + 1) +
  66.               "，" +
  67.               params[0].seriesName +
  68.               params[0].value +
  69.               "<br>均值：" +
  70.               junZhi
  71.             );
  72.           }
  73.         },
  74.         legend: {
  75.           show: false
  76.         },
  77.         grid: {
  78.           top: 30, //图表距离容器下面多少距离
  80.           containLabel: true
  81.         },
  83.         xAxis: {
  84.           show: false,
  85.           type: "value"
  86.         },
  87.         yAxis: [
  88.           {
  89.             type: "category",
  91.             inverse: true,
  92.             axisLine: {
  93.               show: false
  94.             },
  95.             axisTick: {
  96.               show: false
  97.             },
  98.             axisPointer: {
  99.               label: {
  100.                 show: false,
  101.                 margin: 20
  102.               }
  103.             },
  104.             // itemGap: 10,
  105.             data: datas.map(item => item.name),
  106.             axisLabel: {
  107.               // width:2000,    //网格宽度
  108.               // height:'auto',   //网格高度
  109.               margin: 140,
  110.               fontSize: 16,
  111.               align: "left",
  112.               color: "#333",
  113.               // offset: 100,  // 调整标签与刻度值的距离
  114.               rich: {
  115.                 a1: {
  116.                   color: "#fff",
  117.                   backgroundColor: colorList[0],
  118.                   width: 30,
  119.                   height: 30,
  120.                   align: "center",
  121.                   borderRadius: 2
  122.                 },
  123.                 a2: {
  124.                   color: "#fff",
  125.                   backgroundColor: colorList[1],
  126.                   width: 30,
  127.                   height: 30,
  128.                   align: "center",
  129.                   borderRadius: 2
  130.                 },
  131.                 a3: {
  132.                   color: "#fff",
  133.                   backgroundColor: colorList[2],
  134.                   width: 30,
  135.                   height: 30,
  136.                   align: "center",
  137.                   borderRadius: 2
  138.                 },
  139.                 b: {
  140.                   color: "#fff",
  141.                   backgroundColor: colorList[3],
  142.                   width: 30,
  143.                   height: 30,
  144.                   align: "center",
  145.                   borderRadius: 2
  146.                 }
  147.               },
  148.               formatter: function(params) {
  149.                 var index = datas.map(item => item.name).indexOf(params);
  151.                 index = index + 1;
  153.                 let disposeText = params.length > 6 ? params + "..." : params;
  154.                 if (index - 1 < 3) {
  155.                   return [
  156.                     "{a" + index + "|" + index + "}" + "  " + disposeText
  157.                   ].join("\n");
  158.                 } else {
  159.                   return ["{b|" + index + "}" + "  " + disposeText].join("\n");
  160.                 }
  161.               }
  162.             }
  163.           },
  164.           {
  165.             type: "category",
  166.             inverse: true,
  167.             axisTick: "none",
  168.             axisLine: "none",
  169.             show: true,
  170.             data: datas.map(item => item.value),
  171.             axisLabel: {
  172.               show: false, //右侧百分比
  173.               fontSize: 14,
  174.               color: "#333",
  175.               formatter: "{value}%"
  176.             }
  177.           }
  178.         ],
  179.         series: [
  180.           {
  181.             //   left: 100,
  182.             // right: 0,
  183.             // top:0,
  184.             // bottom:0,
  185.             z: 2,
  186.             name: this.typeName,
  187.             type: "bar",
  188.             barWidth: 20,
  189.             zlevel: 1,
  190.             data: datas.map((item, i) => {
  191.               let colorStr = "";
  192.               if (that.checkName === item.name) {
  193.                 colorStr = "#009b63";
  194.               } else {
  195.                 if (i > 3) {
  196.                   colorStr = colorList[3];
  197.                 } else {
  198.                   colorStr = colorList[i];
  199.                 }
  200.               }
  201.               let itemStyle = {
  202.                 color: colorStr,
  203.                 barBorderRadius: 30
  204.               };
  205.               //设置选中的柱子颜色
  206.               return {
  207.                 value: item.value,
  208.                 itemStyle: itemStyle
  209.               };
  210.             }),
  211.             label: {
  212.               show: false,
  213.               position: "right",
  214.               color: "#333333",
  215.               fontSize: 14,
  216.               offset: [10, 0]
  217.             }
  218.           },
  219.           {
  220.             name: "合计",
  221.             type: "bar",
  222.             barWidth: 20,
  223.             barGap: "-100%",
  224.             itemStyle: {
  225.               normal: {
  226.                 color: "#EEEEEE",
  227.                 barBorderRadius: 30
  228.               },
  229.               emphasis: {
  230.                 // 高亮状态下的样式
  231.                 color: "#EEEEEE"
  232.               }
  233.             },
  234.             data: maxArr
  235.           }
  236.         ]
  237.       };
  239.       var worldMapContainer = document.getElementById("chartPart1");
  240.       //用于使chart自适应高度和宽度,通过外部元素高宽计算容器高宽 - 50
  241.       worldMapContainer.style.width =
  242.         document.getElementsByClassName("left")[0].clientWidth + 100 + "px";
  243.       let H = 400;
  244.       if (60 * this.chartData.length > 400) {
  245.         H = 60 * this.chartData.length;
  246.       }
  247.       document.getElementsByClassName("left")[0].style.height = H + "px";
  248.       worldMapContainer.style.height = H + "px";
  249.       //设置容器高宽
  250.       myChart.setOption(option);
  251.       myChart.resize();
  252.       this.$forceUpdate();
  253.     },

调整echarts图的缩放大小

echarts如何改变图形的大小

echarts 放大与缩放的功能

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

echarts如何改变图形的大小

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

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

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

我的解决方法是

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

改动前：

75b3e77ae884469c971bdfe2021d4d85.png

改动后：

fc726a470a6148f79c17097c180ac248.png

  2.   .left {
  3.    
  4.     position: relative;
  5. .chartPartEl {
  6.   position: absolute !important;
  7.   top: 0;
  8.   left: -90px;
  9. }
  10.   }
  12.  <div class="left" v-show="isUnfold">
  13.           <template
  14.             v-if="chartData && chartData.length && chartData[0].nowInfoAllNum"
  15.           >
  16.             <p><button class="green" @click="handleOk()">下载图片</button></p>
  17.             <div
  18.               class="chartPartEl"
  19.               id="chartPart1"
  20.               ref="chartPart1"
  21.               style="width: 500px;height: 500px;"
  22.             ></div>
  23.           </template>
  24.           <p v-else class="notData">暂无数据</p>
  25.         </div>

最终效果：

b84c5fd631b841ad9dd539b3b0e2b4cd.png

5ee6cdc4241441d981e5559a7866abf5.png

后期改造：

加入均值线显示平均值

  1.  // markLine: {
  2.             //   data: [
  3.             //     {
  4.             //       name: "平均值",
  5.             //       xAxis: junZhi
  6.             //     }
  7.             //   ]
  8.             // }

全部代码：

  1.  enableChart() {
  2.       let that = this;
  3.       // 启用表格----重组数据格式
  4.       this.tableData = [];
  5.       this.tableData = JSON.parse(JSON.stringify(this.chartData)) || [];
  6.       if (
  7.         (this.tableData && this.tableData.length) ||
  8.         this.addressId == "0" ||
  9.         this.addressId == 666 ||
  10.         this.addressId == 123456
  11.       ) {
  12.         if (this.benjiObj) {
  13.           this.tableData = [...this.tableData, this.benjiObj];
  14.         }
  15.         this.tableData = [...this.tableData, this.allNumObj];
  16.       }
  17.       this.$nextTick(function() {
  18.         const elPart = document.querySelectorAll("tr");
  19.         elPart.forEach(a => {
  20.           a.children[2].style.color = "#fd5702";
  21.         });
  22.       });
  24.       this.$forceUpdate();
  25.       //       if (["舆情办结率"].includes(this.typeName)) {
  26.       // return;
  27.       // // 舆情办结率没图表所以不刷新
  28.       //             }
  29.       //  if (["舆情办结率", "转办时效"].includes(this.typeName)) {
  30.       //         this.titleStr = "均值";
  31.       //       }else{
  32.       //         this.titleStr = "合计";
  34.       //       }
  35.       // color: #fd5702;
  36.       let myChart = "";
  38.       if (!document.getElementById("chartPart1")) {
  39.         return;
  40.       }
  42.       myChart = echarts.init(document.getElementById("chartPart1"));
  44.       var colorList = ["#FC0033", "#FD5702", "#FEB507", "#BBBBBB"];
  45.       var datas = this.chartData.map(a => {
  46.         return { value: a.nowInfoNum, name: a.addressName };
  47.       });
  48.       let junZhi = (
  49.         this.chartData[0].nowInfoAllNum /
  50.         (this.addressOption.length - 2)
  51.       ).toFixed(2);
  53.       if (this.loginUl.orgParentId != 0) {
  54.         // junZhi = (
  55.         //   this.chartData[0].nowInfoAllNum /
  56.         //   (this.addressOption.length - 1)
  57.         // ).toFixed(2);
  58.         junZhi = (
  59.           this.chartData[0].nowInfoAllNum / this.chartData.length
  60.         ).toFixed(2);
  61.       }
  62.       if (this.loginUl.orgParentId != 7) {
  63.         // junZhi = (
  64.         //   this.chartData[0].nowInfoAllNum / this.addressOption.length
  65.         // ).toFixed(2);
  66.         junZhi = (
  67.           this.chartData[0].nowInfoAllNum / this.chartData.length
  68.         ).toFixed(2);
  69.       }
  70.       //特殊情况
  71.       if (this.typeName == "舆情办结率" || this.typeName.includes("时效")) {
  72.         junZhi = this.chartData[0].junZhi;
  73.       }
  74.       let maxArr = new Array(datas.length).fill(
  75.         this.chartData[0] ? this.chartData[0].nowInfoAllNum : "暂无"
  76.       );
  78.       //合计值字段;
  79.       let option = {
  80.         tooltip: {
  81.           trigger: "axis",
  82.           axisPointer: {
  83.             type: "none"
  84.           },
  85.           formatter: function(params, index) {
  86.             return (
  87.               params[0].name +
  88.               "，位列第" +
  89.               (params[0].dataIndex + 1) +
  90.               "，" +
  91.               params[0].seriesName +
  92.               params[0].value +
  93.               "<br>均值：" +
  94.               junZhi
  95.             );
  96.           }
  97.         },
  98.         legend: {
  99.           show: false
  100.         },
  101.         grid: {
  102.           top: 30, //图表距离容器下面多少距离
  104.           containLabel: true
  105.         },
  107.         xAxis: {
  108.           show: false,
  109.           type: "value"
  110.         },
  111.         yAxis: [
  112.           {
  113.             type: "category",
  115.             inverse: true,
  116.             axisLine: {
  117.               show: false
  118.             },
  119.             axisTick: {
  120.               show: false
  121.             },
  122.             axisPointer: {
  123.               label: {
  124.                 show: false,
  125.                 margin: 20
  126.               }
  127.             },
  128.             // itemGap: 10,
  129.             data: datas.map(item => item.name),
  130.             axisLabel: {
  131.               // width:2000,    //网格宽度
  132.               // height:'auto',   //网格高度
  133.               margin: 140,
  134.               fontSize: 16,
  135.               align: "left",
  136.               color: "#333",
  137.               // offset: 100,  // 调整标签与刻度值的距离
  138.               rich: {
  139.                 a1: {
  140.                   color: "#fff",
  141.                   backgroundColor: colorList[0],
  142.                   width: 30,
  143.                   height: 30,
  144.                   align: "center",
  145.                   borderRadius: 2
  146.                 },
  147.                 a2: {
  148.                   color: "#fff",
  149.                   backgroundColor: colorList[1],
  150.                   width: 30,
  151.                   height: 30,
  152.                   align: "center",
  153.                   borderRadius: 2
  154.                 },
  155.                 a3: {
  156.                   color: "#fff",
  157.                   backgroundColor: colorList[2],
  158.                   width: 30,
  159.                   height: 30,
  160.                   align: "center",
  161.                   borderRadius: 2
  162.                 },
  163.                 b: {
  164.                   color: "#fff",
  165.                   backgroundColor: colorList[3],
  166.                   width: 30,
  167.                   height: 30,
  168.                   align: "center",
  169.                   borderRadius: 2
  170.                 }
  171.               },
  172.               formatter: function(params) {
  173.                 var index = datas.map(item => item.name).indexOf(params);
  175.                 index = index + 1;
  177.                 let disposeText =
  178.                   params.length > 5 ? params.slice(0, 5) + "..." : params;
  179.                 if (index - 1 < 3) {
  180.                   return [
  181.                     "{a" + index + "|" + index + "}" + "  " + disposeText
  182.                   ].join("\n");
  183.                 } else {
  184.                   return ["{b|" + index + "}" + "  " + disposeText].join("\n");
  185.                 }
  186.               }
  187.             }
  188.           },
  189.           {
  190.             type: "category",
  191.             inverse: true,
  192.             axisTick: "none",
  193.             axisLine: "none",
  194.             show: true,
  195.             data: datas.map(item => item.value),
  196.             axisLabel: {
  197.               show: false, //右侧百分比
  198.               fontSize: 14,
  199.               color: "#333",
  200.               formatter: "{value}%"
  201.             }
  202.           }
  203.         ],
  204.         series: [
  205.           {
  206.             //   left: 100,
  207.             // right: 0,
  208.             // top:0,
  209.             // bottom:0,
  210.             z: 2,
  211.             name: this.typeName,
  212.             type: "bar",
  213.             barWidth: 20,
  214.             zlevel: 1,
  215.             data: datas.map((item, i) => {
  216.               let colorStr = "";
  217.               if (that.checkName === item.name) {
  218.                 colorStr = "#009b63";
  219.               } else {
  220.                 if (i > 3) {
  221.                   colorStr = colorList[3];
  222.                 } else {
  223.                   colorStr = colorList[i];
  224.                 }
  225.               }
  226.               let itemStyle = {
  227.                 color: colorStr,
  228.                 barBorderRadius: 30
  229.               };
  230.               //设置选中的柱子颜色
  231.               return {
  232.                 value: item.value,
  233.                 itemStyle: itemStyle
  234.               };
  235.             }),
  236.             label: {
  237.               show: false,
  238.               position: "right",
  239.               color: "#333333",
  240.               fontSize: 14,
  241.               offset: [10, 0]
  242.             },
  243.             // markLine: {
  244.             //   data: [
  245.             //     {
  246.             //       name: "平均值",
  247.             //       xAxis: junZhi
  248.             //     }
  249.             //   ]
  250.             // }
  251.           },
  252.           {
  253.             name: "合计",
  254.             type: "bar",
  255.             barWidth: 20,
  256.             barGap: "-100%",
  257.             itemStyle: {
  258.               normal: {
  259.                 color: "#EEEEEE",
  260.                 barBorderRadius: 30
  261.               },
  262.               emphasis: {
  263.                 // 高亮状态下的样式
  264.                 color: "#EEEEEE"
  265.               }
  266.             },
  267.             data: maxArr,
  268.             // markLine: {
  269.             //   data: [
  270.             //     {
  271.             //       name: "平均值",
  272.             //       xAxis: junZhi
  273.             //     }
  274.             //   ]
  275.             // }
  276.           }
  277.         ]
  278.       };
  280.       var worldMapContainer = document.getElementById("chartPart1");
  281.       //用于使chart自适应高度和宽度,通过外部元素高宽计算容器高宽 - 50
  282.       worldMapContainer.style.width =
  283.         document.getElementsByClassName("left")[0].clientWidth + 100 + "px";
  284.       let H = 400;
  285.       if (60 * this.chartData.length > 400) {
  286.         H = 60 * this.chartData.length;
  287.       }
  288.       document.getElementsByClassName("left")[0].style.height = H + "px";
  289.       worldMapContainer.style.height = H + "px";
  290.       //设置容器高宽
  291.       myChart.setOption(option);
  292.       myChart.resize();
  293.       this.$forceUpdate();
  294.     },

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

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

  1.   var worldMapContainer = document.getElementById("chartPart1");
  3.       //用于使chart自适应高度和宽度,通过外部元素高宽计算容器高宽
  4.       var resizeWorldMapContainer = function() {
  5.         worldMapContainer.style.width =
  6.           document.getElementsByClassName("left")[0].clientWidth - 100 + "px";
  7.         worldMapContainer.style.height =
  8.           document.getElementsByClassName("content")[0].clientWidth + "px";
  9.       }; //设置容器高宽
  10.       resizeWorldMapContainer();
  11.       myChart.setOption(option);
  12.       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 解决前代码：根据父元素可视高度实现

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

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

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

6.b4c48ba754d04681a383bfe26c079dce.png

7.官网搜索，很多二次开发的不符合我们要求的图表，我们引用后进行第三次改造，就要经常去官方文档搜索关键词了

标签： echarts vue.js 前端
本文转载自: https://blog.csdn.net/aZHANGJIANZHENa/article/details/142878003
版权归原作者 JianZhen✓ 所有， 如有侵权，请联系我们删除。
登录后发布评论

“vue2结合echarts实现数据排名列表——前端柱状进度条排行榜”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。