vue-cli和v-charts实现可视化图表过程解析

<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请求后台数据进行填充，拿到的数据进行赋值给this.chartData.rows，数据类型要求是json格式的 数组

 sevenTurnover(){
     this.$http({
       url:"merchantMain/sevenTurnover",
       method:"get",
       params:{
         machineCode:this.$route.query.machineCode
       }
     }).then((res)=>{
       console.log(res.data.data);
       this.chartData.rows=res.data.data;
       console.log(this.chartData.rows);
       this.turnoverNumber();
     })
   },

这样，我们就可以通过调用接口进行可视化图表展示了，效果图如下（这个是移动端项目的图表展示效果）：

v-charts的入门使用还是比较简单的，具体的一些个性化设置或修改可以根据文档进行自定义修改