我要评论**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>
等等这里不在一一赘述，需要的直接去看介绍即可。
如果有我没说明白的地方，欢迎大家给我留言或者私信。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论