乘风原创程序

  • vue-cli3+echarts实现渐变色仪表盘组件封装
  • 2022/3/27 14:11:57
  • 本文实例为大家分享了vue-cli3+echarts 实现封装一个渐变色仪表盘组件,供大家参考,具体内容如下

    效果预览

    思路

    1、使用两个仪表盘叠加,起始角度一样,底部仪表盘结束角度固定不变
    2、通过props传入数据
    3、计算在上层的仪表盘的结束角度并赋值

    代码

    <template>
    ? <div class="gauge">
    ? ? <div class="gauge__bottom" ref="bottomgauge"></div>
    ? ? <div class="gauge__top" ref="topgauge"></div>
    ? ? <div class="gauge__label">数据占比</div>
    ? ? <div class="gauge__title">{{ this.gaugedata.gaugetitle }}</div>
    ? </div>
    </template>
    
    <script>
    import echarts from "echarts";
    export default {
    ? name: "gauge",
    ? props: ["gaugedata"],//传入的数据
    ? 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,
    ? ? ? ? ? ? ? ? ? ? ? ? // 结束颜色
    ? ? ? ? ? ? ? ? ? ? ? ? color: "#707089",
    ? ? ? ? ? ? ? ? ? ? ? },
    ? ? ? ? ? ? ? ? ? ? ]),
    ? ? ? ? ? ? ? ? ? ],
    ? ? ? ? ? ? ? ? ],
    ? ? ? ? ? ? ? },
    ? ? ? ? ? ? },
    ? ? ? ? ? },
    ? ? ? ? ],
    ? ? ? },
    ? ? ? topoption: {
    ? ? ? ? series: [
    ? ? ? ? ? {
    ? ? ? ? ? ? name: "业务指标",
    ? ? ? ? ? ? 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>