echarts 进度条 admin 2023-02-15 20:33:01 篇首语:本文由小编为大家整理,主要介绍了echarts 进度条相关的知识,希望对你有一定的参考价值。 var colors = ["#f00","#00f","#ff0","#0ff","#f0f"];option = { title: { text: "世界人口总量", subtext: "数据来自网络" }, tooltip: { trigger: "axis", axisPointer: { type: "shadow" } }, grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true }, xAxis: { show:false, //不显示x轴相关信息 }, yAxis: [ { type: "category", data: ["html5", "css", "js", "vue", "node"], axisTick:{show:false}, //不显示刻度线 axisLabel:{ color:"#000" }, axisTick:{ show:false }, axisLine:{ show:false }, inverse:true }, { type: "category", data: [702, 350, 666, 555, 777], axisTick:{show:false}, //不显示刻度线 axisLabel:{ color:"#000" }, axisTick:{ show:false }, axisLine:{ show:false }, inverse:true }, ], series: [ { name: "条", yAxisIndex:0, type: "bar", data: [70, 33, 60, 78, 69], // 修改第一条柱子的圆角 itemStyle:{ normal:{ barBorderRadius:20, color:function(params){ //params 传递过来的柱子对象 // dataIndex 是当前柱子的索引 var num = colors.length; return colors[params.dataIndex%num] } }, // color 可以修改柱子的颜色 // color:"orange" }, // 柱子之间的间距 barCategoryGap:5, // 柱子之间的宽度 barWidth:20, // 显示柱子内的文字 label:{ show:true, position:"inside", formatter:"{c}%" // {c} 会自动解析为data中的数据 } }, { name: "框", yAxisIndex:1, type: "bar", data: [100, 100, 100, 100, 100], // 柱子之间的间距 barCategoryGap:5, // 柱子之间的宽度 barWidth:20, itemStyle:{ color:"none", //填充色 borderColor:"#00f", borderWidth:2, barBorderRadius:15 } } ]}; 以上是关于echarts 进度条的主要内容,如果未能解决你的问题,请参考以下文章 推荐10个不错的React开源项目 技术分享|利用maven与bamboo实现应用实时构建和代码检查 您可能还会对下面的文章感兴趣: 相关文章 浏览器打不开网址提示“ERR_CONNECTION_TIMED_OUT”错误代码的解决方法 如何安装ocx控件 VMware的虚拟机为啥ip地址老是自动变化 vbyone和EDP区别 linux/debian到底怎么重启和关机 苹果平板键盘被弄到上方去了,如何调回正常? 机器学习常用距离度量 如何查看kindle型号