VUE 单页面使用 echart 窗口变化时的用法_vue.js

来源:脚本之家  责任编辑:小易  

1. 定义我们demo的基本目录├── README.md ├── index.html // 项目入口文件├── package.json // 项目配置文件├── src // 生产目录│ ├── vue // 组件│ | ├──home.vue│ | ├──blog.vue│ | ├──about.vue│ | ├──topic.vue│ ├── components // 各种组件│ ├── views // css文件│ ├── scss //scss文件│ └── main.js // Webpack 预编译入口└── webpack.js // Webpack 配置文件2. 配置一下我们的webpack.js文件在介绍怎么配置之前你需要掌握一个命令 npm install <模块> --save-dev这个命令的意思是这个命名的意思是我们安装了这个包并且把它的基本信息写入目录的package.json文件。还有一个命令是我们直接运行cnpm install会自动下载package.json里面写入的包.在webpack的配置文件我们需要用到四个npm的模块分别是:path,webpack,extract-text-webpack-plugin,vue-loader记得先下载包在用require命令引入进来//node的路径模块var path=require('path');//我们是webpack当然要引入这个var webpack = require('webpack');//这个是构建页面资源的插件var ExtractTextPlugin = require('extract-text-webpack-plugin');//因为我们是vue.js的应用,把各个组件当做一个页面.vue后缀,所以引入这个可以编译这些文件var vue = require("vue-loader");好了,我们已经把需要的模块引入进来了,接下来我们定义一些接下来要用到的一些文件夹路径//__dirname是node里面的一个变量,指向的是当前文件夹目录var ROOT_PATH = path.resolve(__dirname);//这个我们的文件入口,等下我们就会从main.js这个文件作为入口var APP_PATH = path.resolve(ROOT_PATH, 'src/main.js');//这个是文件打包出来的输出路径var BUILD_PATH = path.resolve(ROOT_PATH, 'build');基本的文件路径我们已经定义好了,接下来我们要用到extract-text-webpack-plugin这个插件了var plugins = [//提公用js到common.js文件中new webpack.optimize.CommonsChunkPlugin('common.js'),//将样式统一发布到style.css中new ExtractTextPlugin("style.css"),// 使用 ProvidePlugin 加载使用率高的依赖库new webpack.ProvidePlugin({$: 'webpack-zepto'})];接下来是webpack的重点了loader,webpack的思想是把每个静态资源文件当做一个模块加载,我们需要做一些配置,在这里我们需要用到编译css,sass模块,多以我们还需要安装'css-loader','style-loader','node-sass','md5'module.exports = {//文件的入口,还可以写成多数组的形式,具体自己扩展entry:[APP_PATH],//输出output:{//输出路径path: BUILD_PATH,//打包的js命名filename:build.js'// 指向异步加载的路径publicPath : __dirname + '/build/',// 非主文件的命名规则,加缓存用到md5chunkFilename: '[id].build.js?[chunkhash]'},module: {loaders: [{test: /\.vue$/,loader: 'vue',},{test: /\.scss$/,loader: ExtractTextPlugin.extract("style-loader", 'css-loader')},{test: /\.css$/,loader: ExtractTextPlugin.extract("style-loader", "css-loader")},{test: /\.(png|jpg)$/,loader: 'url?limit=40000'}]},//这个特别说明下,vue提倡把一个组件当做一个页面,所以可能在一个页面写html,style,javascript,也可以引入和写scss文件vue: {css: ExtractTextPlugin.extract("css"),sass: ExtractTextPlugin.extract("css!sass-loader")},plugins: plugins}3. 配置我们的入口文件main.js这里我们需要三个npm模块,vue,vue-router,vue-resource三个模块,我们依次安装然后在引入//vue的应用当然要引,等下要用它来注册var Vue = require('vue')//这个是路由,spa应用必要哦var VueRouter = require('vue-router');//这个是类似ajax请求,肯定要拉去数据啦,所以也下载吧var VueResource = require('vue-resource');在vue里面声明并注册个空组件Vue.use(VueRouter);Vue.use(VueResource);var app = Vue.extend({});实例化VueRountervar router = new VueRouter({// 当hashbang的值为true时,所有的路径都会被格式化已#!开头,hashbang: true,history: false,saveScrollPosition: true,transitionOnLoad: truewww.zgxue.com防采集请勿采集本网。

在 VUE 项目中,为了使 echart 在窗口变化时能够自适应,要用到 window.resize = function(){ .......};

烦请注明出处,谢谢! 您可能感兴趣的文章:详解处理Vue单页面应用SEO的另一种思路解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题Vue单页面应用保证

但是我在项目刚开始的时间就有一个地方的高度变化使用了 window.resize ,在里面再次使用 会覆盖掉原来的,所以在里面图表使用时可以用

要引用VUErouter插件像VUE、angular、backbone种东西都发单页面应用其实要路由功能JQ写单页面应用非太便所谓单页面其实页面渲染同DOM结构主要看路由~

window.addEventListener('resize',this.resizeFu,false);

vue中,有一个类库叫做vue-router,是用来做单页面路由的。做路由一般分为四个步骤: 准备一个根组件 vue.extend(); 需要做路由的内容准备 template; 准备路由 new VueRouter();

resixeFu 就是图表变化时的方法

Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生

resizeFu(){ let div = document.getElementById('changeData'); if(div && this.changeData.DataTime.length>0){ this.chartsDiv.changeData.resize(); }}

完全可以,现在流行的前端框架几乎都可以满足单页面应用的开发需要

但里面有一个问题就是:每次进来当前页面都会执行 window.addEventListener

quot;></div> </div> 1 2 3 4 5 6 7 8 9 10 Vue.component('home', { /* */ }) Vue.component('page1', { /* */ }) var app = new Vue({ el: '#app', data: { currentView: 'h

解决方法是在路由勾子函数中把它给去掉,方法是

这时需要在页面第一次加载将document.documentElement.clientHeight记录到store中,store中的值不会因为页面重新渲染而改变。 以上这篇解决vue-cli单页面手机应用input点击

beforeRouteLeave(to, from, next) { //页面走掉把事件给清除掉 window.removeEventListener("resize", this.resizeFu,false); next()},

文件。优点是设置预渲染更简单,并可以将您的前端作为一个完全静态的站点。如果您使用 webpack,您可以使用 prerender-spa-plugin 轻松地添加预渲染。它已经被 Vue 应用程

补充知识:vue+echart图表自适应屏幕大小、点击侧边栏展开收缩图表自适应大小resize

正在使用vue做一个供应商管理系统。因为vue仅是view层,我们选用了director.js作路由,自己实现了多语言,路由到页面,页面模块组织,model和验证都是自己实现。因此自己要实

开发中用到了echart图表,需要图表自适应大小resize,一开始使用的方法是:

展开全部 首先在app.vue里面有这么一段 然后你所点击的按钮其实是这个东西,这个其实就是个封装完的a标签 你在router里面配置完了相关路由之后就能在点击这个按钮的时候

window.onresize = function () { this.myChart.resize();};

Spark有个关于是否允许一个application存在多个SparkContext实例的配置项, 如下: spark.driver.allowMultipleContexts: If true, log warnings instead of throwing exceptions when

但是又遇到一个问题,点击侧边栏的展开收起的时候,图表的大小没有自适应(因为窗口的大小没有变化)

展开全部 这种情况很简单,动态添加进去的tr不能应用js和css,在tr添加进页面后,再调用一下$("tr").addClass("样式名"); 重新给他添加一下样式即可.至于js的

这里参考vue+element+admin的框架写的自适应

Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是仅 ES5 支持,且无法 shim 的特性,这也就是为什么 Vue

一、index.vue的文件

引入chart图表``

这里是数据

chartData: { title: { text: '3-1(2)', textStyle: { color: '#979797', fontSize: 14 } }, tooltip: { trigger: 'axis' }, legend: { icon: 'rect', itemWidth: 4, // 图例标记的图形宽度 itemHeight: 11, textStyle: { lineHeight: 65, fontSize: 14 }, data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { type: 'value' }, series: [ { name: '邮件营销', type: 'line', stack: '总量', data: [0, 132, 101, 134, 90, 230, 210] }, { name: '联盟广告', type: 'line', stack: '总量', data: [220, 12, 191, 234, 20, 330, 10] }, { name: '视频广告', type: 'line', stack: '总量', data: [15, 232, 201, 154, 190, 330, 110] }, { name: '直接访问', type: 'line', stack: '总量', data: [320, 420, 301, 334, 60, 330, 320] }, { name: '搜索引擎', type: 'line', stack: '总量', data: [820, 932, 901, 934, 1290, 1330, 1320] } ] }

二、chart.vue

<template> <div :class="className" :style="{height:height,width:width}" /></template><script>import echarts from 'echarts'import resize from './mixins/resize'export default { mixins: [resize], props: { className: { type: String, default: 'chart' }, width: { type: String, default: '100%' }, height: { type: String, default: '300px' }, autoResize: { type: Boolean, default: true }, chartData: { type: Object, required: true } }, data() { return { chart: null } }, watch: { chartData: { deep: true, handler(val) { this.setOptions(val) } } }, mounted() { this.$nextTick(() => { this.initChart() }) }, beforeDestroy() { if (!this.chart) { return } this.chart.dispose() this.chart = null }, methods: { initChart() { this.chart = echarts.init(this.$el, 'macarons') this.setOptions(this.chartData) }, setOptions(chartData) { this.chart.setOption(chartData) } }}</script>

三、resize.js

import { debounce } from './debounce'export default { data() { return { $_sidebarElm: null } }, mounted() { this.$_initResizeEvent() this.$_initSidebarResizeEvent() }, beforeDestroy() { this.$_destroyResizeEvent() this.$_destroySidebarResizeEvent() }, // to fixed bug when cached by keep-alive // https://github.com/PanJiaChen/vue-element-admin/issues/2116 activated() { this.$_initResizeEvent() this.$_initSidebarResizeEvent() }, deactivated() { this.$_destroyResizeEvent() this.$_destroySidebarResizeEvent() }, methods: { // use $_ for mixins properties // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential $_resizeHandler() { return debounce(() => { if (this.chart) { this.chart.resize() } }, 100)() }, $_initResizeEvent() { window.addEventListener('resize', this.$_resizeHandler) }, $_destroyResizeEvent() { window.removeEventListener('resize', this.$_resizeHandler) }, $_sidebarResizeHandler(e) { if (e.propertyName === 'width') { this.$_resizeHandler() } }, $_initSidebarResizeEvent() { this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0] this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler) }, $_destroySidebarResizeEvent() { this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler) } }}

四、debounce.js

/** * @param {Function} func * @param {number} wait * @param {boolean} immediate * @return {*} */export function debounce(func, wait, immediate) { let timeout, args, context, timestamp, result const later = function() { // 据上一次触发时间间隔 const last = +new Date() - timestamp // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait if (last < wait && last > 0) { timeout = setTimeout(later, wait - last) } else { timeout = null // 如果设定为immediate===true,因为开始边界已经调用过了此处无需调用 if (!immediate) { result = func.apply(context, args) if (!timeout) context = args = null } } } return function(...args) { context = this timestamp = +new Date() const callNow = immediate && !timeout // 如果延时不存在,重新设定延时 if (!timeout) timeout = setTimeout(later, wait) if (callNow) { result = func.apply(context, args) context = args = null } return result }}

以上这篇VUE 单页面使用 echart 窗口变化时的用法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持真格学网。

Spark有个关于是否允许一个application存在多个SparkContext实例的配置项, 如下: sparkdriverallowMultipleContexts: If true, log warnings instead of throwing exceptions when multiple SparkContexts are active 该值默认为false, 即不vue-router实现单页面怎么跳转到加载写好的vue文件内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 在vue中实现echarts随窗体变化
  • 浅谈vue单页面中有多个echarts图表时的公用代码写法
  • vue实现多个echarts根据屏幕大小变化而变化实例
  • vue.js中使用echarts实现数据动态刷新功能
  • 对vue- 动态元素属性及v-bind和v-model的区别详解
  • vue+element ui+vue-quill-editor富文本编辑器及插入图片自定义
  • vue数据双向绑定原理及简单实现方法
  • 详解如何从零开始搭建express+vue开发环境
  • 详解mpvue实现对苹果x安全区域的适配
  • django+vue.js搭建前后端分离项目的示例
  • vue 组件的封装之基于axios的ajax请求方法
  • vue.js 左侧二级菜单显示与隐藏切换的实例代码
  • vue+koa2搭建mock数据环境的详细教程
  • vue elementui使用tabs与导航栏联动
  • outer实现单页面怎么跳转到加载写好的vue文件
  • 基于webpack 和 vue的单页面网站有哪些
  • vue自动路由-单页面项目(非build时构建)
  • vue单页面应用会销毁sessionid吗
  • vue模仿网易云音乐的单页面应用
  • vue.js 适合单页面应用吗
  • outer单页面路由
  • vue.js 适合单页面应用吗
  • vue.js 适合单页面应用吗
  • vue.js 适合单页面应用吗
  • 解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住i...
  • Vue单页面如何做seo页面优化
  • vue后台管理单页面好还是多页面号
  • outer实现单页面怎么跳转到加载写好的.vue文件
  • outer实现单页面怎么跳转到加载写好的.vue文件
  • vue.js 单页面怎么调用组件
  • webpack+vue.js 开发单页面,在IE9中,报错,不支持IE9吗
  • webpack+vue.js 开发单页面,在IE9中,报错,不支持IE9吗
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.js其它首页javascriptjavascript类库在vue中实现echarts随窗体变化浅谈vue单页面中有多个echarts图表时的公用代码写法vue实现多个echarts根据屏幕大小变化而变化实例vue.js中使用echarts实现数据动态刷新功能对vue- 动态元素属性及v-bind和v-model的区别详解vue+element ui+vue-quill-editor富文本编辑器及插入图片自定义详解如何从零开始搭建express+vue开发环境详解mpvue实现对苹果x安全区域的适配django+vue.js搭建前后端分离项目的示例vue 组件的封装之基于axios的ajax请求方法vue.js 左侧二级菜单显示与隐藏切换的实例代码vue+koa2搭建mock数据环境的详细教程vue elementui使用tabs与导航栏联动vue引用js文件的多种方式(推荐)vue之父子组件间通信实例讲解(pr简单理解vue中props属性vue props用法详解(小结)vue元素的隐藏和显示(v-show指令vue.js常用指令汇总(v-if、v-fovue 进阶教程之v-model详解使用vue实现图片上传的三种方式vue.js实战之利用vue-router实现vue实现文件上传功能vue中使用props传值的方法vue-week-picker实现支持按周切换的日历vue实现网络图片瀑布流 + 下拉刷新 + 上拉vuejs组件之父子通讯的方式vue init webpack 建vue项目报错的解决方对vue下点击事件传参和不传参的区别详解vue-cli3单页构建大型项目方案解析vue.js中的组件vue router demo详解傻瓜式vuex语法糖kiss-vuex整理
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved