Get started with v-charts CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with v-charts CDN - cdnhub.io</title>
  <style>
    .chart-container {
      width: 600px;
      height: 400px;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="chart-container">
      <v-chart :options="lineChartOptions" ref="lineChart"></v-chart>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
  <script src="https://cdn.cdnhub.io/v-charts/1.19.0/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          lineChartOptions: {
            title: {
              text: 'Line Chart'
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['Page A', 'Page B']
            },
            xAxis: {
              data: ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F']
            },
            yAxis: {},
            series: [
              {
                name: 'Page A',
                type: 'line',
                data: [10, 5, 20, 30, 40, 35]
              },
              {
                name: 'Page B',
                type: 'line',
                data: [7, 11, 15, 26, 20, 30]
              }
            ]
          }
        }
      },
      mounted() {
        this.$nextTick(() => {
          this.$refs.lineChart.refresh()
        })
      }
    })
  </script>
</body>
</html>

https://cdn.cdnhub.io/v-charts/1.19.0/amap.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/amap.min.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/bar.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/bar.min.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/bmap.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/bmap.min.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/candle.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/candle.min.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/chart.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/chart.min.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/constants.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/constants.min.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/core.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/core.min.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/funnel.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/funnel.min.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/gauge.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/gauge.min.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/heatmap.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/heatmap.min.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/histogram.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/histogram.min.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/index.esm.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/index.esm.min.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/index.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/index.min.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/line.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/line.min.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/liquidfill.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/liquidfill.min.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/map.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/map.min.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/pie.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/pie.min.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/radar.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/radar.min.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/ring.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/ring.min.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/sankey.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/sankey.min.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/scatter.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/scatter.min.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/tree.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/tree.min.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/waterfall.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/waterfall.min.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/wordcloud.js Copied!

https://cdn.cdnhub.io/v-charts/1.19.0/wordcloud.min.js Copied!

Get started with v-charts CDN

Stable version

How to start using v-charts CDN

All versions