Get started with v-charts CDN
MIT licensed
V-Charts is a versatile and interactive data visualization library for Vue.js applications.
Tags:- vue
- echarts
Stable version
Copied!
How to start using 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>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!