趋势图

最近在做NFT类项目，因为框架用的vue3,步子迈大了，容易扯着蛋，首先是钱包（先不表），其次是趋势图，生态不太完善，找了半天没结果，最后找到合适的，不说废话上效果，上代码

1

安装

npm install @fnando/sparkline --save

yarn add @fnando/sparkline

引入import sparkline from "@fnando/sparkline";

<svg id="sparkline" width="100" height="30" stroke-width="2" stroke="#4279F7" fill="rgba(0, 0, 255, .2)"></svg>

<script>

const findClosest = (target, tagName) => {

      if (target.tagName === tagName) {

        return target;

      }

      while ((target = target.parentNode)) {

        if (target.tagName === tagName) {

          break;

        }

      }

      return target;

    }

    const init = () => {

      var options = {

        onmousemove(event, datapoint) {

          var svg = findClosest(event.target, "svg");

          var tooltip = svg.nextElementSibling;

          var date = (new Date(datapoint.date)).toUTCString().replace(/^.*?, (.*?) \d{2}:\d{2}:\d{2}.*?$/, "$1");

          tooltip.hidden = false;

          tooltip.textContent = `${date}: $${datapoint.value.toFixed(2)} USD`;

          tooltip.style.top = `${event.offsetY}px`;

          tooltip.style.left = `${event.offsetX + 20}px`;

        },

        onmouseout() {

          var svg = findClosest(event.target, "svg");

          var tooltip = svg.nextElementSibling;

          tooltip.hidden = true;

        }

      };

      sparkline(document.getElementById('sparkline'), [1, 5, 2, 4, 8, 3, 7], options);

    }

    onMounted(() => {

      init()

    })

</script>