vue-cli3+echarts實(shí)現(xiàn)漸變色儀表盤組件封裝

更新時間：2022年03月27日 15:21:56 作者：不說別的就是很菜

這篇文章主要為大家詳細(xì)介紹了vue-cli3+echarts實(shí)現(xiàn)漸變色儀表盤組件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue-cli3+echarts實(shí)現(xiàn)封裝一個漸變色儀表盤組件，供大家參考，具體內(nèi)容如下

效果預(yù)覽

思路

1、使用兩個儀表盤疊加，起始角度一樣，底部儀表盤結(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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: