怎么用vue和echarts实现进度条式柱状图

这篇文章主要介绍“怎么用vue和echarts实现进度条式柱状图”，在日常操作中，相信很多人在怎么用vue和echarts实现进度条式柱状图问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用vue和echarts实现进度条式柱状图”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

本文实例为大家分享了vue+echarts实现进度条式柱状图的具体代码，供大家参考，具体内容如下

效果图如下

代码：

<template>   <div class="content-page">     <div class="tab-content">       <div id="myChart1"></div>     </div>   </div> </template> <script> import * as echarts from 'echarts'; export default {     data() {       return {         option: {           color: ["#157ef5"],// 设置柱状图的颜色           textStyle: {             color: "#828282"           },           tooltip: {             trigger: "axis",             axisPointer: {               type: "line"             }           },           grid: {             left: "3%",             right: "4%",             bottom: "3%",             containLabel: true           },           xAxis: {             type: "value",             // 设置x轴显示几段             min: 0,             max: 100,             interval: 50,             axisTick: { show: false },             axisLine: {               lineStyle: {                 color: "transparent"               }             }           },           yAxis: {             type: "category",             data: ["财政收入", "总部经济"],             axisTick: { show: false },             axisLine: {               lineStyle: {                 color: "#e0e0e0"               }             },             inside: true,             textStyle: {               color: "#000"             }           },           series: [             {               type: "bar",               itemStyle: {                   color: "#f1f1f1",// 定义柱形的背景色                   borderRadius:[0, 10, 10, 0] //定义背景柱形的圆角               },               barGap: "-100%", //设置柱形重合的重要步骤               data: [100, 100],               animation: false, // 关闭动画效果               barWidth: "22px",// 设置柱形宽度             },             {               type: "bar",               data: [65, 75],               barWidth: "22px",               barGap: "-100%", //设置柱形重合的重要步骤               itemStyle: {                   borderRadius:[0, 10, 10, 0],// 定义柱形的圆角                   color: function(params) {                       var colorList = ['#3C90EB', '#B573F4', '#F9B341', '#F9B341', '#91c7ae'];                       return colorList[params.dataIndex]                   }               },             }           ]         }       }     },     mounted() {       this.getChartData();     },     methods: {       getChartData() {         let myChart1 = echarts.init(document.querySelector("#myChart1"));         myChart1.setOption(this.option); // 设置图表初始化数据         setTimeout(function() {           window.onresize = function() {             myChart1.resize();// 图表根据窗口大小进行自适应           };         }, 200);       }     } } </script> <style lang="less" scoped> #myChart1 {   width: 600px;   height: 400px; } </style>

到此，关于“怎么用vue和echarts实现进度条式柱状图”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！