**vue可视化图表 基于Echarts封装好的v-charts**
近期公司又一个新的需求，要做一个订单和销售额统计的项目，需要用到可视化图表来更直观的展示数据。首先我想到的是Echarts，众所周知Echarts是一个应用很广的可视化图表库，用来展示统计数据更合适不过，但是偶然间发现了一个更为方便的图表库，就是我们今天要介绍的v-charts，它是基于Echarts图表库进行了一次封装，让我们可以更好更方便更简单的来展示我们的数据，首先附上他的官方介绍：点击这里
v-charts对于用户很友好，把数据封装成很好的模式，不进让我们更好的来使用它，而且他还完全支持Echarts的所有方法和属性。Echarts有的图表，v-charts都进行了封装。
下面先来一个柱状图：
现附上效果图：
下面是使用方法：
点击这里查看原帖
1.安装依赖
*这里需要说明，由于v-charts是基于Echarts进行封装的，所以我们在安装依赖的时候，需要把Echarts和v-charts都进行安装。*
- npm install echarts v-charts --save-dev
2.依赖安装好之后，我们直接引入v-charts即可，我们在main.js中进行引入
- import VCharts from 'v-charts'
- Vue.use(VCharts)
3.我们在相应的组件中直接使用就可以了，比如说柱状图是ve-histogram，我们直接写标签即可，不需要在创建一个div容器了
- <ve-histogram
- :data="chartData"
- :colors="chartColor"
- :legend-visible="true"
- :loading="loading"
- :data-empty="dataEmpty"
- :extend="extend"
- :settings="chartSettings">
- </ve-histogram>
这里介绍一下我上面用到的几个属性，
data：就是我们要绑定的数据，下面会详细介绍
colors：就是我们图表中每一项对应的颜色
legend-visible：是否显示图例
loading：是否显示loaidng
data-empty：在数据为空的时候，是否显示暂无数据
extend：就是我们自定义的Echarts的原有属性，在v-charts的一些属性满足不了我们的需求的情况下，我们可以配置extend，来直接使用Echarts的optios，来覆盖v-charts的属性。
settings：一些v-charts封装好的设置。
下面就是我们的属性配置了：
在这里需要说明一下，v-charts的无数据和loading的样式是单独的，如果需要这两个需求，我们需要引入css，如果不需要，不引入就行。
- import 'v-charts/lib/style.css'
- export default {
- name: 'VCharts',
- data () {
- return {
- chartSettings: {
- xAxisType: 'time',
- area: true,
- yAxisName: ['订单总数', '订单金额'],
- axisSite: {right: ['orderAmount']},
- labelMap: {'orderCount': '订单数量', 'orderAmount': '订单金额'}
- },
- chartData: {
- columns: ['date', 'orderCount', 'orderAmount'],
- rows: []
- },
- extend: {
- series: {
- symbolSize: 10,
- label: {
- normal: {
- show: true
- }
- }
- }
- },
- chartColor: ['#89dd47', '#3cabf4'],
- loading: false,
- dataEmpty: false
- }
- }
- created () {
- this.getData()
- }
- methods: {
- async getData () {
- const res = await getOrderData(})
- if (res.data.length === 0) {
- this.dataEmpty = true
- } else {
- this.chartData.rows = res.data.rows
- this.dataEmpty = false
- }
- console.log(res)
- },
- }
- }
上述代码中的getOrderData()方法是我调用的接口方法，如下所示：
- // 图表订单和金额
- export function getOrderData (res) {
- return http.post({
- url: base_url + '/order/getOrderData',
- data: res
- })
- }
上述的http.post方法是我封装的axios的post请求方法，篇幅有限，这里不在叙述，具体封装方法，会在其他文章进行讲解。
在这里我展示一下请求过来的data的结构
- 1 rows: [
- 2 {date: '2018-11-01', orderCount: 10, orderAmount: 1093},
- 3 {date: '2018-11-02', orderCount: 20, orderAmount: 2230},
- 4 {date: '2018-11-03', orderCount: 33, orderAmount: 3623},
- 5 {date: '2018-11-04', orderCount: 50, orderAmount: 6423},
- 6 {date: '2018-11-05', orderCount: 80, orderAmount: 8492},
- 7 {date: '2018-11-06', orderCount: 60, orderAmount: 6293},
- 8 {date: '2018-11-07', orderCount: 20, orderAmount: 2293},
- 9 {date: '2018-11-08', orderCount: 60, orderAmount: 6293},
- 10 {date: '2018-11-09', orderCount: 50, orderAmount: 5293},
- 11 {date: '2018-11-10', orderCount: 30, orderAmount: 3293},
- 12 {date: '2018-11-11', orderCount: 20, orderAmount: 2293},
- 13 {date: '2018-11-12', orderCount: 80, orderAmount: 8293},
- 14 {date: '2018-11-13', orderCount: 100, orderAmount: 10293},
- 15 {date: '2018-11-14', orderCount: 10, orderAmount: 1293},
- 16 {date: '2018-11-15', orderCount: 40, orderAmount: 4293}
- 17 ]
这些都完成之后，我们就能在浏览器看到一开是的截图了。
下面附上完整代码，由于异步接口无法直观的展示我们的data结构，所以我在完整代码里面用的是静态数据，方便大家更直观的查看
- 1 <template>
- 2 <ve-histogram
- 3 :data="chartData"
- 4 :colors="chartColor"
- 5 :legend-visible="true"
- 6 :loading="loading"
- 7 :data-empty="dataEmpty"
- 8 :extend="extend"
- 9 :settings="chartSettings">
- 10 </ve-histogram>
- 11 </template>
- 12 <script>
- 13
- 14 const DATA_FROM_BACKEND = {
- 15 rows: [
- 16 {date: '2018-11-01', orderCount: 10, orderAmount: 1093},
- 17 {date: '2018-11-02', orderCount: 20, orderAmount: 2230},
- 18 {date: '2018-11-03', orderCount: 33, orderAmount: 3623},
- 19 {date: '2018-11-04', orderCount: 50, orderAmount: 6423},
- 20 {date: '2018-11-05', orderCount: 80, orderAmount: 8492},
- 21 {date: '2018-11-06', orderCount: 60, orderAmount: 6293},
- 22 {date: '2018-11-07', orderCount: 20, orderAmount: 2293},
- 23 {date: '2018-11-08', orderCount: 60, orderAmount: 6293},
- 24 {date: '2018-11-09', orderCount: 50, orderAmount: 5293},
- 25 {date: '2018-11-10', orderCount: 30, orderAmount: 3293},
- 26 {date: '2018-11-11', orderCount: 20, orderAmount: 2293},
- 27 {date: '2018-11-12', orderCount: 80, orderAmount: 8293},
- 28 {date: '2018-11-13', orderCount: 100, orderAmount: 10293},
- 29 {date: '2018-11-14', orderCount: 10, orderAmount: 1293},
- 30 {date: '2018-11-15', orderCount: 40, orderAmount: 4293}
- 31 ]
- 32 };
- 33
- 34 import 'v-charts/lib/style.css'
- 35 export default {
- 36 name: 'VCharts',
- 37 data () {
- 38 return {
- 39 chartSettings: {
- 40 xAxisType: 'time',
- 41 area: true,
- 42 yAxisName: ['订单总数', '订单金额'],
- 43 axisSite: {right: ['orderAmount']},
- 44 labelMap: {'orderCount': '订单数量', 'orderAmount': '订单金额'}
- 45 },
- 46 chartData: {
- 47 columns: ['date', 'orderCount', 'orderAmount'],
- 48 rows: []
- 49 },
- 50 extend: {
- 51 series: {
- 52 symbolSize: 10,
- 53 label: {
- 54 normal: {
- 55 show: true
- 56 }
- 57 }
- 58 }
- 59 },
- 60 chartColor: ['#89dd47', '#3cabf4'],
- 61 loading: false,
- 62 dataEmpty: false
- 63 }
- 64 }
- 65 created () {
- 66 this.getData()
- 67 }
- 68 methods: {
- 69 async getData () {
- 70 const res = await getOrderData(})
- 71 if (res.data.length === 0) {
- 72 this.dataEmpty = true
- 73 } else {
- 74 this.chartData.rows = DATA_FROM_BACKEND.rows // 注意这里应该是接口给返回回来的数据，为了方便展示data结构，我这里用的是静态数据
- 75 this.dataEmpty = false
- 76 }
- 77 console.log(res)
- 78 },
- 79 }
- 80 }
- 81 </script>
以上就是v-charts的基本用法了，上面用的是柱状图，其他例如：折线图，饼状图等等都是这样的用法，区别就是标签不一样
- 1 //折线图
- 2 <ve-line :data="chartData"></ve-line>
- 3 //饼状图
- 4 <ve-pie :data="chartData"></ve-pie>
View Code
等等这里不在一一赘述，需要的直接去看v-charts官网介绍即可。
如果有我没说明白的地方，欢迎大家给我留言或者私信。
经验首页