vue可视化图表 基于Echarts封装好的v-charts简介
**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的基本用法了,上面用的是柱状图,其他例如:折线图,饼状图等等都是这样的用法,区别就是标签不一样
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 //折线图 2 <ve-line :data="chartData"></ve-line> 3 //饼状图 4 <ve-pie :data="chartData"></ve-pie>
等等这里不在一一赘述,需要的直接去看v-charts官网介绍即可。
如果有我没说明白的地方,欢迎大家给我留言或者私信。