echarts 之 科技感进度条

1.图片展示

2.代码实现

/* ng qty 进度条 */
<template><div class="ngqty-progress"><div class="ngqty-info"><span>X4</span><span>50%</span></div><div :id="'barNgQtyProgress' + index" class="chart"></div></div>
</template>
<script>
import echarts from "echarts";export default {name: "bar-ngqty-progress",props: {index: {type: String, // String, Number, Objectrequired: false,default: "0",},data: {},},data() {return {chart: {},};},methods: {initChart() {this.chart = echarts.init(document.getElementById("barNgQtyProgress" + this.index));let category = [{ name: "省外资金", value: "50" }]; // 类别let total = 100; // 数据总数var datas = [];category.forEach((value) => {datas.push(value.value);});let option = {grid: {left: "0",top: "center", // 设置条形图的边距right: "0",},xAxis: {max: total,show: false,},yAxis: [{type: "category",inverse: false,data: category,show: false,},],series: [{// 内type: "bar",stack: "1",barWidth: 15,legendHoverLink: false,silent: true,itemStyle: {normal: {color: function () {return {type: "linear",x: 0,y: 0,x2: 1,y2: 0,colorStops: [{offset: 0,color: "#011b26", // 0% 处的颜色},{offset: 1,color: "#45f2c8", // 100% 处的颜色},],};},},},data: category,z: 1,animationEasing: "elasticOut",},{// 分隔type: "pictorialBar",itemStyle: {normal: {color: "#052132",},},symbolRepeat: "true",symbolMargin: "90 !",symbol: "rect",symbolClip: true,symbolSize: [10, 28],symbolPosition: "start",symbolOffset: [1, -1],symbolBoundingData: this.total,data: category,z: 2,animationEasing: "elasticOut",},],};// 绘制图表this.chart.setOption(option, true);window.addEventListener("resize", () => {if (this.chart) {this.chart.resize(); // 不报错}});},},mounted() {this.initChart();},
};
</script>
<style lang="less" scoped>
.ngqty-progress {width: 98%;height: 100%;.ngqty-info {height: 30px;width: 100%;margin-bottom: 10px;span {color: #4bf9ef;font-size: 30px;font-weight: bold;display: inline-block;&:nth-child(2) {float: right;}}}.chart {width: 100% !important;height: calc(100% - 45px) !important;}#barNgQtyProgress0 {padding: 5px 10px;border: 1px solid #44837d;border-right: 4px solid #44837d;border-left: 4px solid #44837d;}
}
</style>