踩坑中~ 官方文档 https://www.yuque.com/antv/f2/intro 毕竟不像echarts接触过,所以还是先看看文档较好 github https://github.com/simaQ/f2-canvas https://github.com/antvis/wx-f2 用mpvue-echarts写,这个回头再来填坑,看了官方的教程感觉要引入mpvue其实和引入vant组件的没啥太大区别,mpvue-echarts还是比较方便的 坑还是要踩的 !标记标记

AntV F2是蚂蚁金服旗下的一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(Node, 小程序,Weex), 完备的图形语法理论,满足你的各种可视化需求,专业的移动设计指引为你带来最佳的移动端图表体验. AntV F2官方文档地址:https://antv.alipay.com/zh-cn/f2/3.x/ 话不多说,直接进入正题: Antv F2官方比较友好,给我们提供了两种方式方便我们使用,分别是CDN方式(引入在线资源 <script src="htt

前天遇到个坑,把我给坑死了 ,在帮朋友做一个微信公众号的项目,使用的vue全家桶,有个模块需要用到数据可视化展现,之前做项目的时候用过antv,比较熟悉,因为是移动端的项目,所以用的是antv f2这个可视化框架,按照之前写的方式都做完之后,最后发现下面出现了两个相同的legend,找了半天也没发现问题出在哪,百思不得其解 watch:{ statisticsList: { handler(newValue, oldValue) { // 更新数据 this.lineChart.changeDa

前言 我在 搭建vue项目环境 简单说明了项目初始化完成后的目录结构. 但在实际项目中,src目录下的结构需要跟随项目做一些小小的调整. 目录结构 ├── src 项目源码目录 │ ├── api 所有请求 │ ├── assets 静态资源 │ ├── components 全局公用组件 │ ├── filtres 全局 filter │ ├── router 路由 │ ├── store 全局 store管理 │ ├── styles 全局样式 │ ├── utils 全局公用方法 │ ├─

一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面版 虽然不总是必须,但是某些时候你可能需要将某些 DOM 内容放到一个盒子里.对于这种情况,可以试试面板组件. 基本实例 默认的 .panel 组件所做的只是设置基本的边框(border)和内补(padding)来包含内容. 带标题的面版 通过 .panel-heading 可以很简单地为面板加入一

柱状图横向滚动 思路 通过 Interaction 实现平移,通过 ScrollBar 显示滚动条 1.Interaction F2 提供一套交互机制,以达到通用交互行为的封装和复用.基于此机制,我们提供了以下五种通用的交互行为: 饼图选中 柱状图选中 图表平移 pan 图表缩放 图表 swipe 快扫 2.ScrollBar Scroll bar 是一个静态插件,主要用于辅助 pan 和 pinch 交互. 滚动条只是为 pan 服务的. 数据结构 数据结构: [ { provinceShor

vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm install -g vue //全局安装vue npm install -g webpack //全局安装webpack npm install -g vue-cli //全局安装vue-cli 注意:上面这些装过一次之后都不需要再安装了比如说我的项目要生成在D:/project下面那么先进到目录里

上篇是年后的项目搭建的,时间比较仓促,感觉有点low 1.gulp-vue 文件对公用js的有依赖,以后别的同事拿去搭其他项目,估计会被喷 2.不支持vue-loader一样写模版语言和es6语法 最近h5端的项目,用了webpack+vue-router,用jade+es6+stylus瞬间感觉自己高大上了,es6用起来,感觉也是爽爽哒.(其实语法用的也不多,也就import,一些简单的新方法,主要是箭头函数,再也不用self=this了)所以考虑进行一次升级,使在web端可以简单支持vue

Vue项目目录 初始化项目 vue init webpack []projectname] cd [projectname] npm install vue run dev 目录树 +---build | build.js | check-versions.js | dev-client.js | dev-server.js | utils.js | vue-loader.conf.js | webpack.base.conf.js | webpack.dev.conf.js | webpack

最近一直在学习Vue,基本的文档看完后就需要进行具体的项目进行练手了,本系列文章主要是将我学习过程记录下来,和大家一起学习交流. 我在git上找到了一个淘票票的Vue项目,项目地址: https://github.com/canfoo/vue2.0-taopiaopiao,大家喜欢的话可以给作者点个fork. 看了下项目的代码,然后决定自己在山寨一下这个项目,从零开始自己搭建下. 第一步就是开始进行项目的初始化了,这里使用了Vue的脚手架,Vue-cli进行项目的基础代码结构搭建.由于使用了vu

github地址 使用技术栈 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1) vue-router(^2.5.3) vue-loader(^12.2.1) eslint(^3.19.0) 需要学习的知识 vue.js vuex vue-router vue-loader webpack2 eslint 内容相当多,尤其是webpack2教程,官方脚手架vue-cli虽然相当完整齐全,但是修改起来还是挺花时间,

关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易懂的API和数据绑定的功能也为其揽获了不少用户.本文主要讲解vue项目的构建与实战,因此不会太多涉及其API和语法部分,旨在帮助vue的入门级用户了解从零开始构建vue项目的步骤和方法. vue项目分类 首先,在构建一个vue项目之前我们需要了解vue项目的分类,这里我主要将其分为两类:(1)直接引

Vue项目搭建完整剖析全过程 项目源码地址:https://github.com/ballyalex 有帮助的话就加个星星呗~!  项目技术栈:vue+webpack+bower+sass+axios MINGW64使用简介: 在运行项目的目录下开启,其中,ctrl+c是退出,clear是清除. NPM使用技巧: 国内网络访问npm的速度是比较慢的,所以我们可以采用淘宝开发的cnpm代替. 方便调试查看工具: 谷歌浏览器的vue插件. Vue模块介绍: vuex: 管理核心数据 vue-rout

快速搭建vue项目 一,确认自己有无搭建好node以及npm环境,这些是前提,具体安装方法可参考https://nodejs.org/en/. 二,开始构建项目. 第1步:新建一个文件夹,随意命名. 第2步:通过vue-cli来构建项目,vue-cli是vue的脚手架工具,可通过命令行: npm install -g vue-cli 来进行安装.vue-cli只用安装一次,以后可以不用再安装. 第3步:在安装完vue-cli之后,找到自己新建的文件夹,并在这里打开命令提示符cmd.可以通过按住s

由于 webpack3升级后,新增了 Scope Hositing(作用域提升) 功能,据说是对 js的性能提升很大.因此,我们做了一个测试对比,就是 webpack3和 webpack1/2 的性能对比,如下: 测试目标 以下数据是2天随机时段3部手机各2组数据,每组数据都是30次取平均值,为了测试js的解析能力,排除了网络请求的影响 平台:M5 Note Build/MRA58K 系统:android 6.0 时间 before after 2017-08-10 13:00 920 511

一.导语 最近在研究,左侧是导航,右侧是显示对应的内容,左右可单独滚动,不互相影响,如何实现? 萝卜蹲的游戏大家都玩过,白萝卜蹲,白萝卜蹲,白萝卜蹲完红萝卜蹲,可是若是在含有滚动条的页面的情况下,白萝卜是子元素,红萝卜是父元素,白萝卜蹲完不想让红萝卜蹲,怎么办? js是直接用阻止默认事件e.preventDefault(); ,vue虽然也有阻止默认事件 @scroll.prevent,但是并没有效果啊,怎么办啊??有木有同学会啊??? 二.正文 记录下如何更改vue项目运行的端口号 使用web

一.导语 困困的我,好想睡啊,但还是敲下这边有的没的的笔记吧 二.正文 1.输入 vue list 可查看此环境下,vue能创建的项目模板 没将webpack.vue-route啃精了的话,老实用webpack这个模板吧,他会自动的将你所要的环境都搭建好 2.输入 vue init webpack myDemo 可创建webpack型的vue项目 其中 webpack为项目模板,可从上图中的5中模板类型中选择其中一种,myDemo是项目名称 如此,一个vue项目自动创建成功,可到对应的项目存放路

新建Vue项目 1.安装Vue命令行工具,webpack和git,使用淘宝镜像CNPM.参考http://www.imooc.com/video/12299 2.打开命令行,进入到要存放的目录,windows用户可以使用shift+鼠标右键,在想要存放的目录下打开命令行.然后输入"vue init webpack project-name",进入vue新建项目.                                通过提示信息我们可以看到,项目在git上是可以看到的. 3.安

# 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQuery npm install jquery 2.安装Bootstrap npm 以上两步,也可以先在package.json 配置文件中指定版本号,然后运行 npm install 安装完了以后项目是跑不起来的,尽管二者都已经安装成功了,但还是会报错 "Bootstrap's JavaScript

vue项目基础结构 一个vue的项目,我觉得最小的子集其实就是{vue,vue-router,component},vue作为基础库,为我们提供双向绑定等功能.vue-router连接不同的"页面",component作为样式或者行为输出,你可以通过这三个东西来实现最基本的静态SPA网站.当然我在这里不谈vue全家桶这样宽泛的概念,我会如数家珍的把主要的技术点一一列举. 1.vue-cli:搭建基本的vue项目骨架,脚手架工具 2.sass-loader&node-sass:我

手把手教你用vue-cli搭建vue项目 本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子.使用vue-cli搭建项目最开始我也是看网上的教程一步步搭下来,所以其中的一些步骤说法为了表达正确会进行一定参考. 一. 项目使用技术.框架简单介绍 我们使用vue-cli来搭建整个项目,vue-cli就是一个脚手架,步骤很简单,输入几个命令之后就会生成整个项目,里面包括了webpack.ESLint.babel很多配置等等,省了很多事