html - 折线图显示不正确

Question

    <template>
      <div>
        <svg viewBox="0 0 500 100" class="line-chart">
          <polyline
            fill="none"
            stroke="#0074d9"
            stroke-width="6"
            :points="points"
          />
        </svg>
      </div>
    </template>

    <script>
    export default {
      name: 'line-chart',
      data () {
        return {
          dataLine: [100, 60, 80, 80, 30, 40],
        }
      },
      computed: {
        points () {
          let points = ''
          let pointsArr = []
          this.data.forEach((d, i) => {
            pointsArr.push(`${i * 20} ${d}`)
          })
          points = pointsArr.join(' ')
          return points
        }
      }
    }
    </script>

    <style>

   .line-chart {
  background: #fff;
  width: 610px;
  height: 130px;
  padding: 20px 20px 20px 0;
  margin-top: 3px;
}

    </style>

我想知道如何使该图表的线条显示在整个 div/容器中？正如您在上传的图片中看到的那样，它显示得非常小。先感谢您

标签： htmlcssvue.js