可视化图表流程分析

V-charts是一个基于Vue和e-charts的图表工具，由饿了么团队开放。使用e-chart生成图表时，往往需要进行繁琐的数据类型转换，修改复杂的配置项。v型图的出现就是为了解决这个痛点。基于Vue2.0和e-charts包的v-charts图表组件只需提供一个对正面和背面都友好的配置项，就可以轻松生成通用图表。

v-charts中文社区文档(https://v-charts.js.org/#/)，可根据项目需要自主学习浏览；

由于项目需要使用折线图的图标显示，图表的用法也差不多，本文只谈用v型图搭建折线图；

首先，我们需要节点和npm包管理工具。现在，node的一般新版本已经内置了npm包管理工具。最新版本的节点可以在http://nodejs.cn/node.官网下载，下载安装好之后，我们可以按win R快捷键打开运行对话框，然后输入cmd进入；

进入命令行工具后输入node -v(注意中间有空格)，如果下载成功，会输出node的版本号；(我这里的节点版本是v10.16.1)

安装节点工具后，我们可以在项目终端或项目文件夹中打开命令行工具，并输入命令：

进入npm I v-charts echart-S后，NPM包管理工具会自动下载echart；当然，v-charts作为图表可视化插件库，也为我们提供了一个cdn方法(本文暂时只具体讲vue-vli模式安装，cdn方法是通过标签直接引入文件):

script src=' http :3359 cdn . jsdeliver . net/NPM/vue/dist/vue . js '/script script src=' http :https://cdn . jsdeliver . net/NPM/echart/dist/echart . min . js '/script script src=' http :https://cdn . jsdeliver . net/NPM/v-charts/Lib/index . min . js。

//main.js从' vue '导入vue从' v-charts '导入vcharts从' app '导入。/app.vue' vue。使用(vcharts)新vue ({el:' # app '，render3360h=h (app)})这样，我们的

那么我们如何使用v形图来生成图表呢？

模板//查看折线图表示层，双向绑定chartData进行数据填充//双向绑定设置，做一些设置ve-line : data=' chart data ':设置=' chart settings '/ve-line/模板脚本导出默认{ data : function(){ return { chart data 3360 { chart settings 3360 } {//设置中文图例labelmap3360 {//date对应后台返回的json数据的键，具体值根据界面字段修改。//total对应后台返回的son数据的值。对于具体值，修改total: '商家数量' }}和}}，chartdata : {///这里的格式必须是上述后台界面对应的字段，才能显示图例列3360 ['日期'，'合计']，Rows: []}。} } } } }/script然后我们编写我们的方法来填充axios请求的后台数据，并将获得的数据分配给这个. chartData.rows数据类型需要是json格式的数组

seventuring(){ this。$ http({ URL : ' ComPanitMain/Seven Rover '，method:'get '，params 3360 { machine code : this。$route.query.machineCode } })。然后((RES)={ console . log(RES . data . data)；this . chart data . rows=RES . data . data；console . log(this . chart data . rows)；this . turnovernumber()；})}，这样我们就可以通过调用界面来显示可视化图表，效果图如下(这是移动项目的图表显示效果):

开始使用v形图相对简单，可以根据文档定制一些特定的个性化设置或修改

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。