您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“怎么用vue-cli3+echarts實(shí)現(xiàn)漸變色儀表盤組件封裝”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么用vue-cli3+echarts實(shí)現(xiàn)漸變色儀表盤組件封裝”吧!
效果預(yù)覽
1、使用兩個(gè)儀表盤疊加,起始角度一樣,底部儀表盤結(jié)束角度固定不變
2、通過props傳入數(shù)據(jù)
3、計(jì)算在上層的儀表盤的結(jié)束角度并賦值
代碼
<template> <div class="gauge"> <div class="gauge__bottom" ref="bottomGauge"></div> <div class="gauge__top" ref="topGauge"></div> <div class="gauge__label">數(shù)據(jù)占比</div> <div class="gauge__title">{{ this.gaugeData.gaugeTitle }}</div> </div> </template> <script> import echarts from "echarts"; export default { name: "gauge", props: ["gaugeData"],//傳入的數(shù)據(jù) data() { return { bottomOption: { series: [ { name: "", type: "gauge", startAngle: "225", endAngle: "-45", data: [{ value: 100, name: "" }], splitNumber: 10, detail: { show: false, }, splitLine: { show: false, }, pointer: { show: false, }, axisTick: { show: false, }, axisLabel: { show: false }, axisLine: { lineStyle: { width: 10, color: [ [ 1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, // 起始顏色 color: "#707089", }, { offset: 1, // 結(jié)束顏色 color: "#707089", }, ]), ], ], }, }, }, ], }, topOption: { series: [ { name: "業(yè)務(wù)指標(biāo)", type: "gauge", startAngle: "225", endAngle: "", detail: { formatter: "{value}%", color: "#01F9FF", fontSize: 18, fontFamily: "ZhenyanGB-Regular", offsetCenter: [0, 0], }, data: [{ value: "", name: "" }], splitNumber: 10, splitLine: { show: false, }, pointer: { show: false, }, axisTick: { show: false, }, axisLabel: { show: false }, axisLine: { lineStyle: { width: 10, color: "", }, }, }, ], }, }; }, mounted() { this.getTopGauge(); this.getBottomGauge(); }, methods: { getTopGauge() { const chart = this.$refs.topGauge; if (chart) { const myChart = this.$echarts.init(chart, null, { renderer: "svg" }); this.$once("hook:beforeDestroy", function () { echarts.dispose(myChart); }); this.topOption.series[0].data[0].value = this.gaugeData.gaugePercent; this.topOption.series[0].axisLine.lineStyle.color = this.gaugeData.guageColor; let tmp = 225 - 270 * (this.gaugeData.gaugePercent / 100); this.topOption.series[0].endAngle = tmp; const option = this.topOption; myChart.setOption(option); } }, getBottomGauge() { const chart = this.$refs.bottomGauge; if (chart) { const myChart = this.$echarts.init(chart, null, { renderer: "svg" }); this.$once("hook:beforeDestroy", function () { echarts.dispose(myChart); }); const option = this.bottomOption; myChart.setOption(option); } }, }, }; </script> <style lang="less"> .gauge { width: 150px; height: 165px; position: relative; &__top { position: absolute; top: 0; left: 0; width: 100%; height: 150px; } &__bottom { position: absolute; top: 0; left: 0; width: 100%; height: 150px; } &__label { position: absolute; height: 21px; width: 64px; background: #0547c9; border: 1px solid #1e92ff; border-radius: 11.5px; border-radius: 11.5px; bottom: 35px; left: 50%; transform: translate(-50%, 0); font-family: PingFangSC-Regular; font-size: 8px; color: #ffffff; text-align: center; line-height: 21px; } &__title { font-family: PingFangSC-Medium; font-size: 14px; color: #52f9cb; text-align: center; position: absolute; bottom: 5px; left: 50%; transform: translate(-50%, 0); } } </style>
到此,相信大家對(duì)“怎么用vue-cli3+echarts實(shí)現(xiàn)漸變色儀表盤組件封裝”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。