組件

<template> <div class="chart" :style="{height:height,width:width}"> </div> </template> <script> import echarts from "echarts"; export default {props: {barObj: {type: Object},width: {type: String,default: "100%"},height: {type: String,default: "150px"}},data() {return {myChart: null};},mounted() {let _this = this;_this.init();window.addEventListener("resize", function() {_this.myChart.resize();});},beforeDestroy() {if (!this.myChart) {return;}this.myChart.dispose();this.myChart = null;},methods: {init() {this.drawLine();},drawLine() {let self = this;self.myChart = echarts.init(this.$el);self.myChart.clear();let data = self.barObj;// 繪制圖表self.myChart.setOption({grid: {top: '0',left: '0',bottom: '0',right: '0'},yAxis: [{type: 'category',inverse: true,axisTick: {show: false},axisLabel: {show: false},axisLine: {show: false}}],xAxis: [{type: 'value',axisLabel: {show: false},axisLine: {show: false},splitLine: {show: false}}],series: [{type: 'bar',barWidth: data.barWidth,data: data.barData,label: {normal: {show: false,}},itemStyle: {normal: {color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{offset: 0,color: data.color[0] // 0% 處的顏色}, {offset: 1,color: data.color[1] // 100% 處的顏色}], false),barBorderRadius: data.barWidth / 2}}}, {type: "bar",barWidth: data.barWidth,xAxisIndex: 0,barGap: "-100%",data: [100],itemStyle: {normal: {color: "#F5F7F7",barBorderRadius: data.barWidth / 2}},zlevel: -1}]});}} }; </script> <style lang="scss" scoped></style>

使用

<template> <div class="land_co land-wrap"><div class="land_lyxz"><jump name="不動產登記情況" :index="index"></jump><div class="content"><div v-for="(item,index) in barList" :key="index" class="bar-div"><div class="bar-title-div"><span class="bar-title">{{item.title}}</span><span class="bar-val">{{item.value}}</span><span class="bar-ratio">{{item.ratio}}</span></div><bar-progress :bar-obj="item.barObj" height="20px"></bar-progress></div></div></div> </div> </template><script> import jump from "@/components/jump"; import barProgress from "../components/chart/barProgress"; export default {props: {index: {default: 1}},data() {return {barList: [{title: "共頒發不動產權證 (本）",value: "423,163",ratio: "↑ 27.98%",barObj: {barData: ["27.98"],color: ["#46D675", "#BEF9A9"],barWidth: 10}},{title: "不動產證明(份）",value: "133,668",ratio: "↑ 9.42%",barObj: {barData: ["9.42"],color: ["#FFBA00", "#FFFA78"],barWidth: 10}}]};},methods: {},watch: {jsyd: {handler() {this.$nextTick(() => {});},deep: true}},mounted() {},directives: {},components: {jump,barProgress} }; </script><style lang="scss" scoped> @import "../../../styles/mixin"; @import "../../../styles/zrzy_land_lyxz"; .land-wrap {.content {padding-right: 20px;margin-right: 20px;box-sizing: border-box;font-size: 24px;color: #191f25;}.bar-div {margin-bottom: 44px;}.bar-title-div {margin-bottom: 16px;margin-top: 50px;position: relative;.bar-title {margin-right: 20px;}.bar-value {font-size: 38px;font-weight: bold;}.bar-ratio {position: absolute;color: #FF3939;font-weight: bold;right: 0;}} } </style>

總結

以上是生活随笔為你收集整理的vue 用echarts写的进度条组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。