单网页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 效果图：
========================
其他略，方法同上；
但请注意：有些只能显示一组数据
========================
