vue-cli+v-charts实现可视化图表
  v-charts是饿了么团队开源的⼀款基于Vue和Echarts的图表⼯具，在使⽤ echarts ⽣成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统⼀提供⼀种对前后端都友好的数据格式设置简单的配置项，便可轻松⽣成常见的图表。
  因为项⽬需要⽤到了折线图的图标展⽰，图表⽤法⼤同⼩异，本⽂只讲述利⽤v-charts来构建折线图；
  进⼊命令⾏⼯具之后输⼊node -v（注意中间有空格），如果下载成功会输出node的版本号；（这⾥我的node版本是v10.16.1）vuejs流程图插件
  装好node⼯具之后，我们可以在我们的项⽬终端或者项⽬⽂件夹中打开命令⾏⼯具输⼊命令：
npm i v-charts echarts -S
  输⼊之后npm包管理⼯具就会⾃动的去下载echarts；当然，作为图表可视化插件库v-charts也为我们提供了cdn的⽅式（本⽂暂时只具体讲述vue-vli模式安装，cdn的⽅式就是直接通过标签引⼊⽂件即可）：
<script src="cdn.jsdelivr/npm/vue/dist/vue.js"></script>
<script src="cdn.jsdelivr/npm/echarts/dist/echarts.min.js"></script>
<script src="cdn.jsdelivr/npm/v-charts/lib/index.min.js"></script>
<link rel="stylesheet" href="cdn.jsdelivr/npm/v-charts/lib/style.min.css">
  安装完v-charts之后，我们将要在我们的项⽬main.js中进⾏注册和使⽤：
// main.js
import Vue from 'vue'
import VCharts from 'v-charts'
import App from './App.vue'
Vue.use(VCharts)
new Vue({
el: '#app',
render: h => h(App)
})
  这样，我们的v-charts就已经安装并完成了注册了，安装步骤和使⽤都还是⽐较⽅便简洁的；
  那么我们如何使⽤v-charts进⾏⽣成图表呢？
<template>
//折线图的视图展⽰层，双向绑定chartData进⾏数据填充
//双向绑定settings，进⾏⼀些设置
<ve-line :data="chartData" ：settings="chartSettings"></ve-line>
</template>
<script>
export default {
data: function () {
return {
chartData: {
      chartSettings:{
        //设置中⽂图例
        labelMap:{
          //date对应后台返回json数据的key，具体值根据接⼝字段来修改
          date:"⽇期",
          //total对应后台返回son数据的value，具体值根据接⼝字段来修改
          total:"商户数量"
          }
        },
      chartData: {
        //这⾥的格式必须是对应上⾯后台接⼝的字段才能显⽰图例
        columns: ['date', 'total'],
        rows: []
        },
}
}
}
}
</script>
  然后我们写我们的⽅法进⾏axios请求后台数据进⾏填充，拿到的数据进⾏赋值给ws，数据类型要求是json格式的数组
sevenTurnover(){
this.$http({
url:"merchantMain/sevenTurnover",
method:"get",
params:{
machineCode:this.$route.query.machineCode
}
}).then((res)=>{
console.log(res.data.data);
ws=res.data.data;
console.log(ws);
this.turnoverNumber();
})
},
  这样，我们就可以通过调⽤接⼝进⾏可视化图表展⽰了，效果图如下（这个是移动端项⽬的图表展⽰效果）：
  v-charts的⼊门使⽤还是⽐较简单的，具体的⼀些个性化设置或修改可以根据⽂档进⾏⾃定义修改，看完本⽂如有疑问，可私信作者进⾏解答；

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。