單網頁vue的charts數據可視化作圖介紹和使用
1 說明
1.1 推薦指數：★★★★
1.2 在官方文檔的基礎上進行，具體化和簡單化，目的就是一秒就懂，拿來就能使用。
1.3 親測的工具：谷歌瀏覽器和微軟vscode編輯器。
2 v-charts介紹：
2.1 是vue的charts的封裝。
2.2 在線地址：https://v-charts.js.org/#/
3 單網頁vue的數據可視化，插件名稱介紹
餅圖：ve-pie
折線圖：ve-line
柱狀圖：ve-histogram
水滴圖：ve-liquidfill
散點圖：ve-scatter
=以上是5大基本圖=
環形圖：ve-ring
樹圖：ve-tree
漏斗圖：ve-funnel
雷達圖：ve-radar
詞雲圖：ve-wordcloud
瀑布圖：ve-waterfall
4 具體舉例：
4.1 具體實現的代碼、需要修改的地方和說明。
<!DOCTYPE html>
<html lang="en">
<head>
<title>v-charts</title>
</head>
<body>
<div id="app">
<!--需要修改的地方1-->
<!--餅圖，有bug，只能顯示一組數據-->
<!--ve-pie :data="chartData"></!--ve-pie-->
<!--折線圖-->
<!--ve-line :data="chartData"></!--ve-line-->
<!--環形圖，有bug，只能顯示一組數據-->
<!--ve-ring :data="chartData"></!--ve-ring-->
<!--散點圖-->
<!--ve-scatter :data="chartData"></!--ve-scatter-->
<!--樹圖bug-->
<!--ve-tree :data="chartData"></!--ve-tree-->
<!--漏斗圖bug，只能顯示一組數據-->
<!--ve-funnel :data="chartData"></!--ve-funnel-->
<!--雷達圖-->
<!--ve-radar :data="chartData"></!--ve-radar-->
<!--水滴圖bug-->
<!--ve-liquidfill :data="chartData"></!--ve-liquidfill-->
<!--詞雲圖bug-->
<!--ve-wordcloud :data="chartData"></!--ve-wordcloud-->
<!--瀑布圖bug，只能顯示一組數據-->
<ve-waterfall :data="chartData"></ve-waterfall>
<!--柱狀圖-->
<!--ve-histogram :data="chartData" :settings="chartSettings"></!--ve-histogram-->
<!--ve-histogram :data="chartData" ></!--ve-histogram-->
</div>
<!--在線導入vue的相關js文件和css文件-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
<script>
new Vue({
el: '#app',
data: function () {
return {
// 需要修改的地方2，注意有些圖形只能顯示一組數據
chartData: {
columns: ['日期', '訪問用戶', '下單用戶', '下單率'],
rows: [
// 注意這是3組數據比較：'訪問用戶', '下單用戶', '下單率'
{ '日期': '1/1', '訪問用戶': 1393, '下單用戶': 1093, '下單率': 0.32 },
{ '日期': '1/2', '訪問用戶': 3530, '下單用戶': 3230, '下單率': 0.26 },
{ '日期': '1/3', '訪問用戶': 2923, '下單用戶': 2623, '下單率': 0.76 },
{ '日期': '1/4', '訪問用戶': 1723, '下單用戶': 1423, '下單率': 0.49 },
{ '日期': '1/5', '訪問用戶': 3792, '下單用戶': 3492, '下單率': 0.323 },
{ '日期': '1/6', '訪問用戶': 4593, '下單用戶': 4293, '下單率': 0.78 }
]
}
// // 需要修改的地方2
}
}
})
</script>
</body>
</html>
4.2 ve-pie餅圖
4.2.1 ve-pie.html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title>v-charts:ve-pie</title>
</head>
<body>
<div id="app">
<!--餅圖-->
<ve-pie :data="chartData"></ve-pie>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
<script>
new Vue({
el: '#app',
data: function () {
return {
chartData: {
// 餅狀圖只能實現一組數據的比較，也不能說是bug
// '下單用戶'和'下單率'這兩組數據是不能顯示的，請注意。
columns: ['日期', '訪問用戶', '下單用戶', '下單率'],
rows: [
{ '日期': '1/1', '訪問用戶': 1393, '下單用戶': 1093, '下單率': 0.32 },
{ '日期': '1/2', '訪問用戶': 3530, '下單用戶': 3230, '下單率': 0.26 },
{ '日期': '1/3', '訪問用戶': 2923, '下單用戶': 2623, '下單率': 0.76 },
{ '日期': '1/4', '訪問用戶': 1723, '下單用戶': 1423, '下單率': 0.49 },
{ '日期': '1/5', '訪問用戶': 3792, '下單用戶': 3492, '下單率': 0.323 },
{ '日期': '1/6', '訪問用戶': 4593, '下單用戶': 4293, '下單率': 0.78 }
]
}
}
}
})
</script>
</body>
</html>
4.2.2 效果圖：
4.3 ve-line折線圖
4.3.1 ve-line.html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title>v-charts:ve-line</title>
</head>
<body>
<div id="app">
<!--折線圖-->
<ve-line :data="chartData"></ve-line>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
<script>
new Vue({
el: '#app',
data: function () {
return {
chartData: {
// 完美，顯示3組數據
columns: ['日期', '訪問用戶', '下單用戶', '下單率'],
rows: [
{ '日期': '1/1', '訪問用戶': 1393, '下單用戶': 1093, '下單率': 0.32 },
{ '日期': '1/2', '訪問用戶': 3530, '下單用戶': 3230, '下單率': 0.26 },
{ '日期': '1/3', '訪問用戶': 2923, '下單用戶': 2623, '下單率': 0.76 },
{ '日期': '1/4', '訪問用戶': 1723, '下單用戶': 1423, '下單率': 0.49 },
{ '日期': '1/5', '訪問用戶': 3792, '下單用戶': 3492, '下單率': 0.323 },
{ '日期': '1/6', '訪問用戶': 4593, '下單用戶': 4293, '下單率': 0.78 }
]
}
}
}
})
</script>
</body>
</html>
4.3.2 效果圖：
4.4 ve-scatter散點圖
4.4.1 ve-scatter.html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title>v-charts:ve-scatter</title>
</head>
<body>
<div id="app">
<!--散點圖-->
<ve-scatter :data="chartData"></ve-scatter>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
<script>
new Vue({
el: '#app',
data: function () {
return {
chartData: {
// 完美，顯示3組數據
columns: ['日期', '訪問用戶', '下單用戶', '下單率'],
rows: [
{ '日期': '1/1', '訪問用戶': 1393, '下單用戶': 1093, '下單率': 0.32 },
{ '日期': '1/2', '訪問用戶': 3530, '下單用戶': 3230, '下單率': 0.26 },
{ '日期': '1/3', '訪問用戶': 2923, '下單用戶': 2623, '下單率': 0.76 },
{ '日期': '1/4', '訪問用戶': 1723, '下單用戶': 1423, '下單率': 0.49 },
{ '日期': '1/5', '訪問用戶': 3792, '下單用戶': 3492, '下單率': 0.323 },
{ '日期': '1/6', '訪問用戶': 4593, '下單用戶': 4293, '下單率': 0.78 }
]
}
}
}
})
</script>
</body>
</html>
4.4.2 效果圖：
========================
其他略，方法同上；
但請注意：有些只能顯示一組數據
========================
