v-charts 是基于 Vue2.0 和 Echarts 封装的图标组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,就可以生成常见的图表。
学习新知识前,先从安装起步
一、安装
-
npm 安装
npm i v-charts echarts -S
-
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">
-
使用百度地图或高德地图时需要额外引入相应的模块
<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>
二、使用
-
演示案例
<!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>
-
全局引入
<!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>
-
按需引入
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) })
|- 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 -------------- 高德地图
三、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 } ] }
- columns 中是维度和指标的集合,v-charts 中的大部分图表都是单维度多指标,所以默认第一个值为 维度,剩余的值为指标
- rows 中是数据的集合。
四、案例
-
折线-------堆叠面积图
-
柱状图 -------堆叠柱状图
-
饼图 -------限制显示条数饼图
-
雷达图 -------设置显示的指标维图
-
地图 -------设置指标维度