2019年09月_终是后来居上

转载 Vue项目中使用Echarts 和Echarts中水球liquidFill的中文API

一安装Echartsnpm install echarts-liquidFill --savenpm install echarts --save二引入Echarts 在入口文件index.js中如下所示仅供参考import Vue from 'vue'import vueRouter from 'vue-router'import Echarts from 'echarts'...

2019-09-30 11:54:32 8060 1

转载 vue开发中，build时css打包报错

vue在打包的时候css报错，首先声明的这个并没有解决webpack本身的问题，本来这个也是一个警示，不会影响代码正常运行这个是因为我在多个页面引入了同一个css文件，webpack打包时候对css文件顺序报错，如果css少，可以稍微改动下css文件顺序即可，但是当很多文件引入的时候，就没法一个个改了，解决办法是在build的文件中加入ignoreOrder:true,...

2019-09-29 16:15:19 989

原创水球图设置

//数值大小var max = 500; //满刻度大小var arr = 0.6var data = max * arr;option = { backgroundColor: "#fff", title: { top: '47%', left: 'center', text: '22%', textStyl...

2019-09-29 15:39:03 2809 3

原创 echarts 配置柱状图的时候数据label不显示的问题

版本问题，不同版本下，部分配置项书写方式有差异。配置报表的时候柱状图的标签一直不显示，写为以下格式后可以正常显示。app.title = '坐标轴刻度与标签对齐';option = { color: ['#3398DB'], tooltip : { trigger: 'axis', axisPointer : { // ...

2019-09-29 11:30:41 14081 5

转载 vuejs之过滤器(filters)的使用

过滤器函数可以使用在两个地方:1.双大括号表达式 {{ 文本字符串 | 过滤函数 }}2.v-bind:str= “文本字符串 | 过滤函数”过滤函数接收的第一个参数是字符串message过滤器串联{{ 文本字符串 | 过滤函数1 | 过滤函数2 | … | 过滤函数N }}过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数...

2019-09-28 16:04:59 250

转载使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结

代码：<el-form-item label="视频上传" prop="Video">  <el-upload class="avatar-uploader el-upload--text" :action="uploadUrl" :show-file-list="false" :on-success...

2019-09-27 14:56:16 5017 1

原创 Vue-给对象新增属性（使用Vue.$set()）并更新视图

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上：Vue.set(vm.obj, 'e', 0)您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：this.$set(this.obj,...

2019-09-26 14:38:25 991

原创 js编码解码

encodeURI(uri)var uri="my test.php?name=ståle&car=saab";document.write(encodeURI(uri)+ "<br>");decodeURI(uri)var uri="my test.asp?name=ståle&car=saab";document.write(encodeURI(uri)...

2019-09-26 10:52:15 131

原创 Vue-Cli 3.0 中配置高德地图api

vue 中使用高德地图有两种方式一、vue-amap 组件官网：https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install但是用了段时候感觉功能太少二、直接引用高德地图 SDK因为第一种方式尝试失败了，所以我选择了直接引用SDK的方式。使用这种方式没有出现方式一中存在的问题。直接引用SDK的方式步骤：在 p...

2019-09-25 18:00:03 2131 4

原创 echarts 水球图

// ECharts 水球图插件，需要额外插件脚本，参见上方“脚本”// 完整配置参数参见：https://github.com/ecomfe/echarts-liquidfillvar option = { series: [{ type: 'liquidFill', data: [0.6, 0.5, 0.4, 0.3], radiu...

2019-09-24 14:57:33 597

转载 echarts图表x，y轴的设置

xAxis属性代表echarts图表的x轴设置代码如下xAxis : [ { type : 'category', // type:坐标轴类型。 // [ default: 'category' ] /*可选： 1.'value' 数值轴，适用于连续数据； 2.'category' 类目轴，适用于离散的类目数据，为该类型...

2019-09-18 16:45:01 15034

原创 echarts 颜色

myChart.setOption({ title: { text: '年收益趋势' }, tooltip: {}, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] ...

2019-09-10 16:43:41 759

原创 vue-charts 记录

使用方法https://github.com/ecomfe/vue-echarts/blob/master/README.zh_CN.mddemohttps://github.com/ecomfe/vue-echarts/blob/master/src/demo/Demo.vue

2019-09-07 16:02:48 94

原创 echarts 折线图变的圆润

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 93...

2019-09-07 14:51:02 2310 1

转载 CSS3 实现六边形Div图片展示效果

二. 原理讲解这个效果用到的主要知识点：1. transform: rotate(120deg); 图片旋转2. overflow: hidden; 超出隐藏3. visibility: hidden; 也是隐藏，与 display:none; 相似，但不同的是，它虽然隐藏了，但依然会在网页中占有位置我们要用到3层div进行旋转来得到这个效果（注: 3层 div 的大小是一样的）。最...

2019-09-05 10:13:22 1164

原创 vue动态添加背景图

<div class="right-con" :style="{backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')', backgroundSize:'contain'}"></div><div class="boxT" :style="{backgroundImage:...

2019-09-05 10:05:43 2513

原创 vue用js获取当前定位（高德地图）

在index.html页面<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己申请的key"></script> <script type="text/javascript"> var map = new AMap.Map('c...

2019-09-04 13:41:03 8663 4

转载 css实现六边形图片（最简单易懂方法实现高逼格图片展示）

（1）那么第一步，当然是绘制容器，容器是一个有宽高的div。　　　　绘制之前，必须明白一个问题，那就是，等边六边形是通过三个相同宽高的div拼合而成的（如下图所示），所以div的宽高必须满足 √3 倍的条件才能拼成一个正六边形，这里就不带大家计算这个值了，有兴趣可以用三角函数私下自己计算一下。在此处，我设置了外层容器宽为190px，高为110px，然后设置背景图片。代码如下<...

2019-09-03 15:21:35 2879

岁末zzz的博客