-
v-charts
v-charts 是基于 Vue2.0 和 Echarts 封装的图标组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，就可以生成常见的图表。
学习新知识前，先从安装起步
一、安装
-
npm 安装
npm i v-charts echarts -S- 1
-
cdn 引入
<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">- 1
- 2
- 3
- 4
-
使用百度地图或高德地图时需要额外引入相应的模块
<script src="https://cdn.jsdelivr.net/npm/echarts-amap/dist/echarts-amap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>- 1
- 2
二、使用
-
演示案例
<!DOCTYPE html> <html lang="en"> <head> <title>v-charts</title> </head> <body> <div id="app"> <ve-line :data="chartData" :colors="chartColors" :width="width" :height="height" :grid="grid" :scale="scale" :settings="chartSettings"> </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/line.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: { columns: ['日期', '销售额'], rows: [ { '日期': '1月1日', '销售额': 123 }, { '日期': '1月2日', '销售额': 1223 }, { '日期': '1月3日', '销售额': 2123 }, { '日期': '1月4日', '销售额': 4123 }, { '日期': '1月5日', '销售额': 3123 }, { '日期': '1月6日', '销售额': 7123 } ] }, chartColors : [ '#19d4ae','#5ablef', '#19d2ae','#5ablef', '#19d1ae','#5ablef', '#19d3ae','#5ablef' ] grid:{left:20,right:20} scale:{y:true} width:'80px' height:'350px' chartSettings: { axisSite: { right: ['占比'] }, yAxisType: ['KMB','percent'], area:true } } }, components: { VeLine } }) </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
-
全局引入
<!DOCTYPE html> <html lang="en"> <head> <title>v-charts</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/line.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: { columns: ['日期', '销售额'], rows: [ { '日期': '1月1日', '销售额': 123 }, { '日期': '1月2日', '销售额': 1223 }, { '日期': '1月3日', '销售额': 2123 }, { '日期': '1月4日', '销售额': 4123 }, { '日期': '1月5日', '销售额': 3123 }, { '日期': '1月6日', '销售额': 7123 } ] } } }, components: { VeLine } }) </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
-
按需引入
import Vue from 'vue' // 引入所需加载的echart图表，对应的各类图表如下所示 import VeLine from 'v-charts/lib/line.common' import App from './App.vue' Vue.component(VeLine.name, VeLine) new Vue({ el: '#app', render: h => h(App) })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
|- lib/ |- line.common.js -------------- 折线图 |- bar.common.js --------------- 条形图 |- histogram.common.js --------- 柱状图 |- pie.common.js --------------- 饼图 |- ring.common.js -------------- 环图 |- funnel.common.js ------------ 漏斗图 |- waterfall.common.js --------- 瀑布图 |- radar.common.js ------------- 雷达图 |- map.common.js --------------- 地图 |- sankey.common.js ------------ 桑基图 |- heatmap.common.js ----------- 热力图 |- scatter.common.js ----------- 散点图 |- candle.common.js ------------ k线图 |- gauge.common.js ------------- 仪表盘 |- tree.common.js -------------- 树图 |- bmap.common.js -------------- 百度地图 |- amap.common.js -------------- 高德地图- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
三、data数据
指标和维度
v-charts 的数据由指标和维度组成。以一组常见的数据为例：
日期 访问用户 下单用户 2018-05-22 32371 29810 2018-05-23 12328 11398 2018-05-24 92381 82910
-
“维度” 指的是数据的属性，例如表格中的 “日期” 维度，表示生成的每组数据的日期。
-
“指标” 是量化衡量标准，例如表格中的 “访问用户” 和 “下单用户”。
-
绘制成折线图如下
{ columns: ['日期', '访问用户', '下单用户'], rows: [ { '日期': '2018-05-22', '访问用户': 32371, '下单用户': 19810 }, { '日期': '2018-05-23', '访问用户': 12328, '下单用户': 4398 }, { '日期': '2018-05-24', '访问用户': 92381, '下单用户': 52910 } ] }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- columns 中是维度和指标的集合，v-charts 中的大部分图表都是单维度多指标，所以默认第一个值为 维度，剩余的值为指标
- rows 中是数据的集合。
四、案例
-
折线-------堆叠面积图
-
柱状图 -------堆叠柱状图
-
饼图 -------限制显示条数饼图
-
雷达图 -------设置显示的指标维图
-
地图 -------设置指标维度
-
-
相关阅读:
Qt6_贪吃蛇Greedy Snake
java基于微信小程序的美食制作教程系统 uniapp 小程序
Unity ECS最新DOTS环境搭建教程
基于文化算法优化的神经网络预测研究（Matlab代码实现）
2023应届毕业生前端面试总结
【毕业设计】基于单片机的手势检测识别系统 - arduino 物联网嵌入式
电视电话会议和视频会议的区别
电商架构浅析
ヾ(⌐ ■_■)— HTML-CSS选择器
JavaScript 65 JavaScript 类 65.2 JavaScript 类继承
- 原文地址：https://blog.csdn.net/qq_53810245/article/details/126896575