DDR爱好者之家

vue-cli和v-charts实现可视化图表过程解析
站长资源 2024/11/24 佚名
56 1538
DDR爱好者之家 Design By 杰米

v-charts是饿了么团队开源的一款基于Vue和Echarts的图表工具，在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。

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

因为项目需要用到了折线图的图标展示，图表用法大同小异，本文只讲述利用v-charts来构建折线图；

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

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

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

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

装好node工具之后，我们可以在我们的项目终端或者项目文件夹中打开命令行工具输入命令：

npm i v-charts echarts -S

输入之后npm包管理工具就会自动的去下载echarts；当然，作为图表可视化插件库v-charts也为我们提供了cdn的方式（本文暂时只具体讲述vue-vli模式安装，cdn的方式就是直接通过标签引入文件即可）：

<script src="/UploadFiles/2021-04-02/vue.js">


安装完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请求后台数据进行填充，拿到的数据进行赋值给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();
     })
   },





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


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


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


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米