vue实现滑动取值圆环图表效果代码-html代码-BFW代码库

vue实现滑动取值圆环图表效果代码

代码语言：html

所属分类：图表

代码描述：vue实现滑动取值圆环图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.min.css">
    <style>
        @import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
    
    body {
      font-family: "Open Sans", sans-serif;
    }
    
    .slider {
      -webkit-appearance: none;
      width: 100%;
      height: 10px;
      border-radius: 5px;
      background: #d3d3d3;
      outline: none;
      opacity: 0.7;
      -webkit-transition: 0.2s;
      transition: opacity 0.2s;
    }
    
    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: #4caf50;
      cursor: pointer;
    }
    
    .slider::-moz-range-thumb {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: #4caf50;
      cursor: pointer;
    }
    </style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <div id="app" class="bg-gray-300 h-screen flex justify-center items-center">
        <div class="bg-white shadow rounded flex w-1/2">
            <div class=" w-1/2" id="chartContainer">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" xml:space="preserve" width="100%" height="100%">
        <g transform="translate(200,200)">
          <path
            v-for="(path, index) in newPaths()"
            :d="path"
            :stroke="colors[index]"
            fill="none"
            stroke-width="20"
            :key="index"
          />
        </g>
      </svg>
            </div>
            <div class=" w-1/2 p-3" id="selectContainer">
                <div class="n" v-for="(item, index) in m">
                    <div class="flex justify-between items-center mt-3 text-gray-600">
    .........完整代码请登录后点击上方下载按钮下载查看