- 博客(55)
- 收藏
- 关注
原创 element-ui table设置列fixed时X轴滚动条无法拖动问题
element-ui table设置列fixed时X轴滚动条无法拖动问题
2024-04-24 09:45:09
671
原创 Object.defineProperty方法结合递归实现数据的可观测性
Object.defineProperty方法结合递归实现数据的可观测性
2022-06-16 16:18:48
187
原创 echarts数据可视化高级配置
echarts默认主题及自定义主题我们只需要在初始化echarts实例.init方法中写入主题就行let mEcharts = echarts.init(document.querySelector('div'), 'light')默认有两个主题:lightdark自定义主题:进入echarts官网主题网址进行自定义主题配置配置完之后,选择左上角的下载,下载格式选择js文件下载完之后用script标签引入,在init方法中写入即可<script src="/theme/i
2021-10-11 15:28:16
471
原创 echarts数据可视化系列:仪表盘
绘制仪表盘及配置let mEcharts = echarts.init(document.querySelector('div')) let option = { series: [ { // 图表的类型 type: 'gauge', // 系列名称 name: '仪表盘',
2021-10-10 10:21:45
1006
原创 echarts数据库可视化:雷达图
绘制雷达图及配置let mEcharts = echarts.init(document.querySelector('div')) let option = { radar: { // 给雷达图设置5个最大值,数据的值不能大于最大值 indicator: [ {name: '性能', max: 400}, {name: '
2021-10-10 10:19:27
2144
原创 echarts数据可视化系列:中国地图绘制
绘制中国地图及相关配置绘制地图有两种方式:百度地图API(要申请SDK)矢量地图数据(需要开发者自己获取,我把中国地图各省地图及世界地图的json数据放到百度网盘中,提取码:http)因为后面需要用到jquery,所以我也为大家准备好了jquery文件,根地图数据放在一起// 基于div初始化echarts实例 let mEcharts = echarts.init(document.querySelector('div')) // 每个城市的空气质量
2021-10-09 22:04:40
6900
5
原创 echarts数据可视化系列:饼图
绘制饼图及配置// 基于div初始化echarts实例let mEcharts = echarts.init(document.querySelector('div')) // 饼图的数据 let pieData = [ {'name': '淘宝', 'value': 1985}, {'name': '京东', 'value': 35640}, {'name': '唯品汇', 'value': 8472},
2021-10-09 19:55:30
718
原创 echarts数据可视化系列:散点图
绘制散点图及配置// 基于div初始化echarts实例let mEcharts = echarts.init(document.querySelector('div')) // 每个人的身高 let data = [ {'name': 'zhangsan', 'height': 194, 'width': 75}, {'name': 'zhangsan', 'height': 174, 'width': 70},
2021-10-09 17:10:06
695
原创 echarts数据可视化系列:折线图
绘制折线图及配置说明:引入echarts文件和echarts的容器及实例化echarts就不写了,上篇文章已写:可以自行查看,这里直接从配置入手<script> let mEcharts = echarts.init(document.querySelector('div')) // x轴的月份 let yuefen = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月',
2021-10-09 11:36:04
1137
原创 echart数据可视化
ECharts是一个基于javascript的开源可视化图表库特性:可以流畅的运行在PC端和移动设备上,底层依赖矢量图形库ZRender。提供直观,交互丰富,可高度个性化定制的可视化图表**丰富的可视化类型常规类:柱状图折线图饼状图 散点图K线图统计类:盒型图地图类:地图热力图线图关系类:关系图treemap旭日图多维类:平行坐标BI类:漏斗图仪表盘使用方法引入echarts的js文件下载echarts下载好之后解压得到pac
2021-10-09 10:48:32
208
原创 echarts数据可视化系列:柱状图
绘制柱状图及配置引入echarts文件<script src="/lib/echarts.min.js"></script>给echarts定义一个有宽高的容器<body> <!-- 为 ECharts 准备一个定义了宽高的 DOM --> <div id="main" style="width: 600px;height:400px;"></div></body>3.基于定义好的容器,初始化
2021-10-09 10:46:00
4530
2
原创 mysql数据库连接失败的问题errno:1049错误
今天我用phpstudy这个软件打开mysql数据库,然后连接数据库失败的问题:报的是1049,这是意思是数据库不存在的意思。错误如下在这个cmd窗口可以一直往上翻到刚刚连数据据的时候看看你的数据库名称是不是对的,我这里的数据库名称就不对了。那这个时候就打开这个config文件,里面有个default.json的json文件。里面有个database,在database填写你自己正确的数据库名称,保存后在连接数据库就可以了这个样子就表示成功了,希望对你们的错误有帮助!!!...
2021-07-02 17:48:03
8701
3
原创 小程序的代码构成
了解项目的基本组成结构pages用来存放所有小程序的页面utils用来存放工具性质的模块(例如:格式化时间的自定义模块)app.js小程序项目的入口文件app.json小程序项目的全局配置文件app.wxss小程序项目的全局样式文件project.config.json项目的配置文件sitemap.json用来配置小程序及其页面是否允许被微信索引小程序页面的组成部分小程序官方建议把所有的小程序页面,都存放在pages目录中,以单独的文件夹存在其中,每个页面由4个基..
2021-04-28 17:10:47
226
原创 小程序的简单介绍
前言:由于前段时间工作的原因,导致好长时间都没有更新文章了。这次我想了很久,决定写几篇关于小程序的文章(基础篇)比较适合新手入门。小程序的开发与普通网页开发的区别1. **运行环境的不同**:网页运行在网络环境中,而小程序运行在微信环境中2. **API不同**:由于运行环境的不同,所以小程序无法调用DOM和BOM的API。但是,小程序可以调用微信环境提供的API。如:地理定位,扫码,支付等。3. **开发环境的不同**:网页的开发模式是以[*浏览器+代码编辑器*]。而小程序的开发模式是:先申
2021-04-23 15:42:27
243
原创 vuex状态管理
Vuex是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。示例:首先我们用vue init webpack vuex-demo生成一个项目然后进入vuex-demo中使用命令:npm i -S vuex下载vuex的依赖包进入项目中的src文件夹下创建一个store.js的文件,为仓库文件然后在store.js文件中使用:import Vue from 'vu
2020-12-22 22:21:19
158
原创 使用vue-cli脚手架搭建项目
vue-cli学习### 一、准备工作 需要安装node,npm,webpack,vue-cli安装webpack之后检查版本的时候可能会叫我们安装webpack-cli,按照提示安装即可 npm i webpack -g npm i vue-cli -g 安装完之后检查一下对应的版本即可,注意vue -V是大写二、使用脚手架搭建项目 初始化一个项目名称为demo的vue项目 vue init webpack demo 安装完成之后会出现如下提示:安装完之后
2020-12-20 21:46:36
101
原创 路由命名
路由命名路由传参:query <script> let Foo1 = { template:`<div> <button @click="toFoo2">go foo2</button> <router-link :to="{path:'/foo2',query:{id:123}}">go foo2</router
2020-12-20 21:40:14
248
原创 Vue自定义指令
Vue自定义指令### Vue.directive();有两个参数,第一个参数就是自定义指令的名称“字符串类型”,第二个参数是个函数或者对象用法指令里面的函数bind:function(){}指令第一次被绑定到元素上面的时候调用,被调用多少次就执行多少次<div id="app"> <p v-haha>{{msg}}</p> </div> <script> Vue.direct
2020-12-20 21:39:19
155
原创 Vue注册组件
Vue注册组件注册组件,关键字:component()有两个参数第一个参数:新组件的名称(字符串类型)组件名定义时可以使用驼峰命名,但是使用时必须是用“-”来连接第二个参数:回调函数(写Vue的代码)自定义组件是可以复用多个的,但是都是双标签,不建议使用单标签的形式 <div id="app"> <itme-li></itme-li> <itme-li></itme-li> <
2020-12-20 21:38:12
430
原创 Vue的实例方法
Vue的实例方法extend:用法:如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。示例:<div id="app"></div> <div id="app1"></div> <div id="app2"></div> <script> //定一个人的类
2020-12-20 21:36:36
734
原创 vue-router
vue-router### 简介由于Vue在开发时对路由支持的不足,于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,实际上就是组件的切换。路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是我们WebApp的链接路径管理系统。有的小伙伴会有疑虑,为什么我们不能像原来一样直接用a标签编写链接呢?
2020-12-20 21:32:37
102
原创 Vue的生命周期
Vue的生命周期### vue的生命周期是什么?vue的生命周期是指vue的实例对象的创建之初到销毁的过程。vue所有的功能实现都是围绕着生命周期进行的,在生命周期的不同阶段调用对应的钩子函数实现组件数据管理和dom渲染两大重要功能。vue的生命周期有11个过程,不过其中用的比较多的是8个左右beforCreate:vue对象创建之前。对应的钩子函数为beforeCreate。此阶段为实例初始化之后,此时的数据观察和事件机制都未形成,不能获得DOM节点。vue的el和data数据都是und
2020-12-20 21:31:11
163
原创 Vue的入门
Vue的入门Vue引入Vue.js有两种方式直接引入链接<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>下载vue的源码:https://cdn.jsdelivr.net/npm/vue/dist/vue.js,然后在引入就行了创建Vue实例 <div id="app">{{msg}}</div> <script>
2020-12-20 21:28:51
165
1
原创 koa框架
简介:koa是基于node.js平台的web开发框架,致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。通过利用 async 函数,Koa 帮你丢弃回调函数,并有力地增强错误处理。 Koa 并没有捆绑任何中间件, 而是提供了一套优雅的方法,帮助您快速而愉快地编写服务端应用程序。安装的方法:npm i koa使用方法:安装完了之后然后就是引包和创建对象:引包:const koa = require("koa");引完包之后就是创建对象let app = new
2020-11-15 21:50:01
4210
原创 canvas
canvas简介canvas是H5新增的一个标签。它可以通过javascript在其中绘制图像的HTML元素,可以用来处理照片集和实时视频处理和渲染。在页面上放置一个canvas就相当于一个画布,可以绘制出各种各样的图形。如果不利用js编写的话,canvas就是一个透明的区域。canvas自带两个属性值:width和height。接下来就让我们一起来学习吧!首先我们要在...
2020-10-18 20:28:06
1303
原创 多媒体和地图
多媒体简介Video是H5新增的用来添加视频的标签,在标签的src属性里添加视频的地址就行了。支持的格式有:mp4,ogv webm。safari浏览器和IE9以上浏览器只支持mp4。IE8以下不支持,IE9以上浏览器可以使用source标签支持解决兼容性video的属性controls:给视频添加控件autoplay:自动播放loop:循环播放preload:预加载 <video src="video/1.mp4" width="300px" height="100px" co
2020-10-18 20:27:17
106
原创 H5拖拽事件
拖拽是一个非常普遍的功能,我们经常在电脑上拖动某个文件或者图片都是非常常见的,其实javascript也实现了相对应的功能,在H5中(draggable)成为了标准操作,任何元素都可以拖拽,接下来就让我们一起了解下拖拽的组件和事件吧拖拽的知识点draggable组件:值有:true(允许拖动) | false(不允许拖动) | auto(是根据浏览器定义是否可以拖动,一般图片在浏览器上是可以拖动的,所以浏览器默认值是auto)。使用方法如下 <div id="app" draggable="tr
2020-10-13 20:39:00
1093
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人