前端及开发文章及欣赏

JavaScript -- Map数据结构

前端达人

什么是Map

Map和对象类似都是键值对的集合。

Map和对象的区别

对象一般用字符串当键。

Map可以用数字、字符串、布尔值、null、undefined、数组、对象、Set、Map等做键。
在这里插入图片描述

Map实例的属性和方法

set()

向Map实例中添加新成员,可连续添加。
如果新成员的键已存在,那么新成员将会覆盖以存在的键
在这里插入图片描述

get()

通过Map实例的键,来访问其对应的值。

获取不存在的成员返回undefined。
在这里插入图片描述
在这里插入图片描述

has()

通过Map实例的键,来判断成员是否存在。
在这里插入图片描述

delete()

删除Map实例成员,删除实例中不存在的成员不报错。
在这里插入图片描述

clear()

清空Map实例成员。
在这里插入图片描述

forEach()

遍历Map实例成员,接收两个参数,第一个是一个回调,回调接收三个参数:value、key、Map。第二个参数是是this指向。
在这里插入图片描述

size属性

获取Map成员个数。
在这里插入图片描述

Map构造函数

二维数组

在这里插入图片描述

Set

Set必须体现出键和值。
在这里插入图片描述

Map

Map作为参数,传入构造函数,相当于Map实例的克隆
在这里插入图片描述

Map注意事项

Map对于重复键的判断基本遵循 ===,但在Map中NaN ===NaN。

Map的应用

操作DOM

 <p>1</p> <p>2</p> <script> const [p1,p2] = document.querySelectorAll('p'); const m = new Map([ [p1,'red'], [p2,'blue'] ]); m.forEach((color, elem) => { elem.style.color = color }) </script> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

在这里插入图片描述

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


解决vagrant上使用Homestead很慢(响应速度10s+)

前端达人

说明:

使用vagrant和Homestead 在vBox上面跑laravel, 响应速度非常缓慢(大概在10+s),

尝试过增加虚拟机配置, 但是没有任何效果, 经验证也不是数据库的原因 .

 

通过网上查询了解到, 是因为VirtualBox的IO引起的: http://mitchellh.com/comparing-filesystem-performance-in-virtual-machines


解决方法1:

在Homestead.yaml下添加type:nfs, 注意空格, map对应windows下面的物理路径

解决方法2:
如果上诉方法, 还是不能增加响应速度(我的就是), 则尝试以下方法
安装一个vagrant 插件


$ vagrant plugin install vagrant-winnfsd


然后修改 Homestead/scripts/homestead.rb 的代码, 循环部分替换成如下:

 

重启vagrant 之后, 响应速度已经将至 200 ms


----------参考资料
https://laracasts.com/discuss/channels/general-discussion/for-those-who-find-homesteadvagrantvirtualbox-slow-on-windows?page=1
http://mitchellh.com/comparing-filesystem-performance-in-virtual-machines


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:博客园

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

Invalid default value for prop "data": Props with type Object/Array must use a factory function to r

前端达人

超级好用

问题: 

 大致意思是Object/Array类型的Props必须使用工厂函数返回默认值。

 

问题定位:

 

 

解决办法:

将默认的值以函数的方式进行返回


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

Java中JSON文档解析

前端达人

1.JSON是什么?

  1. JSON的全称为JavaScript Object Notation ,也就是JavaScript对象标记法。
  2. JSON是一种轻量级的数据交换格式,用于两个程序之间的数据交换,类似于XML文档。

2.JSON对象格式

使用JSON表示一个对象的格式:

{
    "属性名1":"属性值1",
    "属性名2":"属性值2",
    ......
    "属性名":"属性值n"
}  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

注意事项

  • 一个对象整体由一个大括号表示
  • 对象的属性,是由一个个键值对组成
  • 键值对的键与值之间应该使用冒号隔开,而不同键值对之间需要使用逗号隔开
  • 键与值最好都使用双引号,值可以是JavaScript中的任何一种数据类型

示例

{
    "name":"金苹果",
    "info":"讲述了种植苹果的辛酸历程"
}  
  • 1
  • 2
  • 3
  • 4

3.JSON数组表示

JSON中的数组使用 [ ] 表示,并且数组可以跟对象互相嵌套

格式:

[元素1,元素2...]  
  • 1

示例:

数组包含对象

 ["张三","李四",{
        "name":"王五",
        "info":"一个在技术上使劲钻研的人"
    }]  
  • 1
  • 2
  • 3
  • 4

对象包含数组:

{
    "name":"李小超",
    "friend":["张三","李四",
              {
                "name":"王五",
                "info":"一个在技术上使劲钻研的人"
            }
             ]
    "info":"一个非常帅气的人"
}  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

对象与对象的嵌套:

{
    "name":"李小超",
    "project":{
        "school":"HPU",
        "name":"computer"
    }
}  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

4.JSON的解析

1. 使用Gson解析JSON文件

  1. 将Java对象转换为JSON字符串

    String json = new Gson().toJSON(要转换的对象);  
            
    • 1

    代码示例:

    Book b = new Book("金苹果","讲述了种植苹果的辛酸路程"); String str = new Gson().toJson(b);  
            
    • 1
    • 2
  2. 将JSON字符串转换为Java对象

    对象 = new Gson().fromJson(JSON字符串,对象类型.class);  
            
    • 1

    代码示例:

    1. 将JSON字符串转换为Java对象
     Book b2 = new Gson().fromJson(str, Book.class); System.out.println(b2.getName());  
            
    • 1
    • 2
    1. 将JSON字符串转换为Java集合
    String js = "{\"name\":\"金苹果\",\"info\":\"讲述了种植苹果的辛酸历程\",\"page\":[\"锄禾日当午\",\"汗滴禾下土\"]}"; HashMap data = new Gson().fromJson(js,HashMap.class); System.out.println(data.get("page").getClass()); /*
        输出结果:class java.util.ArrayList
    */  
            
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    我们在写JSON字符串的时候,需要注意使用转义字符转换双引号,另外,如果键值对的值是JSON数组,那么对应数组在转换之后的类型是ArrayList

2. 使用fastJson解析JSON文件

使用fastJSON解析与Gson十分相似,不过前者使用的是静态方法。

  1. Java对象转换为JSON字符串

    String json=JSON.toJSONString(要转换的对象);  
            
    • 1
  2. JSON字符串转换为Java对象

    类型 对象名=JSON.parseObject(JSON字符串, 类型.class);
    或者
    List<类型> list=JSON.parseArray(JSON字符串,类型.class);  
            
    • 1
    • 2
    • 3

    示例:
    转换为Java对象

     Book b2 = JSON.parseObject(json1,Book.class);  
            
    • 1

    转换为List集合

    List list = JSON.parseArray(json1,String.class);  
            
    • 1

    在这里进行说明一下,我们观察JSON.parseArray()的源码可以看到,这个方法的返回值就是一个List类型的数据,我们向方法中传递的第二个参数是List元素所属的类型。


    蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

    文章来源:csdn

    分享此文一切功德,皆悉回向给文章原作者及众读者.
    免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

    蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



JavaScript|异步编程

前端达人

JavaScript|异步编程

1.异步的概念

**异步(Asynchronous, async)是与同步(Synchronous, sync)**相对的概念。在我们学习的传统单线程编程中,程序的运行是同步的(步骤在一个控制流序列中按顺序执行)。而异步的概念则是不保证同步的概念,也就是说,一个异步过程的执行将不再与原有的序列有顺序关系。简单来理解就是:同步按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效率更高。异步就是从主线程发射一个子线程来完成任务。

2.回调函数

回调函数就是一个函数,它是在我们启动一个异步任务的时候就告诉它:等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>异步编程</title> </head> <body> <p>等待4秒过后执行</p> <p id="p2">太阳</p> <p id="p3">月亮</p> <script> // 回调函数 function sayHello(){ document.getElementById("p2").innerHTML = "Hello!Sun"; } // 使用setTimeout()可以设置sayHello为一个4秒的过程,第一个参数是回调函数,第二个参数是毫秒数 setTimeout(sayHello,4000); </script> </body> </html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

在这里插入图片描述

等待四秒过后:

在这里插入图片描述

主线程并未停止,body中的内容正常运行,而当4秒回调过后,子函数运行结果就改变了h2的值。




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


vue 封装dialog_Vue 弹出框组件的完整封装过程

前端达人

引言

因为项目搬砖需要,笔者从 2019 年 11 月份开始学习 Vue.js,在完整地敲了一遍 vue-admin 框架中的用户管理 Demo 、断点跟踪前端调用流程、并摸清楚了 Vue.js 的开发套路后,总算可以出师了。

写作本文有两个原因,一是对这段时间学习 Vue.js 的过程做一个总结;另外就是完成自己 2019 下半年在 GitChat 的写作目标,8 月份曾在一个知识星球公布了下半年写两篇 Chat 的目标,迟迟没有完成。

以上就是本文产生的背景了,再说回到 Vue.js。笔者年初也弄了一阵儿 Angular.js,虽然都是前端框架,感觉 Vue.js 入门更简单一些,其数据驱动的设计理念跟 Java 面向对象编程的思维模式相似,所以学起来更轻松。

之所以选择弹框组件这个话题,是因为笔者参与的新产品中,很多地方都涉及到弹出页面,所以仔细研究了一下弹框组件的封装原理,解决了弹出页面封装的技术问题后,笔者这半路前端也能够应付一阵子开发工作了!

环境准备

Vue 开发相关的工具及其关系回顾,这里先回忆一下跟 Vue 项目开发有关的概念:

名词

解释

作用

Vue.js

一个前端框架

用于构建用户界面的渐进式框架

*.vue 文件

一种文件类型

以类 HTML 语法描述一个 Vue 组件

vue-cli

Vue 官方脚手架

对单个 *.vue 文件进行快速原型开发

eslint

前端代码检查工具

编写高质量前端代码的利器,类似 findbugs

webpack

模块打包器

类似 maven,将前端项目打包成静态资源文件

IDEA Vue.js 插件

IDEA 插件

使 IDEA 能够支持 Vue 项目开发

我们在使用 IDEA 开发 Vue 项目时,只需要安装 Vue.js 插件就可以了,不需要使用 vue-cli 脚手架;引入 ESLint 是为了编写高质量的前端代码,也可以不用,而且 IDEA 的快速修正功能很强大,不需要完全了解 ESLint 规范;至于打包工具 webpack,初学完全可以先忽略它。

GitHub 上有一个 Vue 的半成品项目 vueAdmin-template,可以基于它来学习或者二次开发,本文也是在它基础上完成一个弹框组件学习案例的。这里使用 IDEA 作为开发工具,相关准备工作如下:

IDEA 安装 Vue.js 插件;

IDEA 安装 eslint 插件;

IDEA 添加 .vue 文件模板;

IDEA 导入 vueAdmin-template,项目地址。

常见的几种弹出框类型

Web 开发过程中常用的弹框,归纳起来,主要有三类:

消息提示框,即 alert,不需要进行操作;

操作确认框,即 confirm,包含“确定”和“取消”按钮;

页面弹出框,即 openwindow,弹出一个完整的页面,用户输入信息后,通过“确定”或“取消”提交信息。

第一、二类弹出框,ElementUI 都有封装,拿来用即可;第三类弹出框,可以结合 el-dialog 组件完成。 在笔者参与的项目中,弹出页面的特点在于,父组件弹出子组件后,用户需要在弹出页面配置信息、点击“确定”按钮提交。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

echarts中关于自定义legend图例文字

前端达人

文章摘自:https://blog.csdn.net/YPJMFC/article/details/78979319,非常感谢大牛分享。

echarts中关于自定义legend图例文字
首先看一张echarts饼图: 
 
这张图很好做,根本不值得提,但是用过echarts的可能会发现这个图例有点不一样,做这个图例花了我好几个小时去查,去试。结合一下echarts中legend图例的特质我们分析一下一些难点:

1.这里的图例文本包含两个变量,而formatter提供的变量模板只有name
2.两个变量的样式各不相同
3.对齐,换行与居中的应用



一个个看:

1.两个变量
formatter有两种形式: 
- 模板 
- 回调函数

模板

使用字符串模板,模板变量为图例名称 {name}
formatter: 'Legend {name}'

这种想要修改name的值,暂时我做不到,欢迎读者指正

回调函数

使用回调函数
formatter: function (name) {
    return 'Legend ' + name;
}

我们在返回时可以对name进行修改,从而返回我们需要的值,初步改动是这样:

var data = [
    {value:40, name:'货币'},
    {value:20, name:'股票'},
    {value:40, name:'债券'}
]
formatter:  function(name){
    var total = 0;
    var target;
    for (var i = 0, l = data.length; i < l; i++) {
    total += data[i].value;
    if (data[i].name == name) {
        target = data[i].value;
        }
    }
    return name + ' ' + ((target/total)*100).toFixed(2) + '%';
}


2.两种样式
想自定义图例文字样式,就要用到富文本:rich,但是在官方文档中看到的只有模板形式的富文本样式配置,由1知用模板很难实现自定义name,所以只能用回调函数形式,采用富文本的形式对name进行改造:

formatter:  function(name){
    var total = 0;
    var target;
    for (var i = 0, l = data.length; i < l; i++) {
    total += data[i].value;
    if (data[i].name == name) {
        target = data[i].value;
        }
    }
    var arr = [
        '{a|'+((target/total)*100).toFixed(2)+'%}',
        '{b|'+name+'}',
    ]
    return arr.join('\n')
},
textStyle:{
    rich:{
        a:{
            fontSize:20,
            verticalAlign:'top',
            align:'center',
            padding:[0,0,28,0]
        },
        b:{
            fontSize:14,
            align:'center',
            padding:[0,10,0,0],
            lineHeight:25
        }
    }
}

3.对齐,换行与居中
为了图例与第一行文字对齐,需要设置两个样式的padding,把文字顶到合适的位置,然后为了上下行的间隔,设置了第2行文字的行高,最终呈现了上面图片的效果。不知道是不是有点地方做烦了,但是能最终实现自己想要的效果,很有成就感。

4.实例
这是完整的组件:

class ConfigChart extends Component {

    constructor(props) {
        super(props);
        this.state = {};
    };
    getOption = () => {
        var data = [
            {value:40, name:'货币'},
            {value:20, name:'股票'},
            {value:40, name:'债券'}
        ]
        const option = {
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            // formatter:  function(name){

            //     var total = 0;
            //     var target;
            //     for (var i = 0, l = data.length; i < l; i++) {
            //     total += data[i].value;
            //     if (data[i].name == name) {
            //     target = data[i].value;
            //     }
            //     }
            //     return name + ' ' + ((target/total)*100).toFixed(2) + '%';
            // },

            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: [50, 80],
                    center: ['50%', '40%'],
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    data: [
                        {
                            value: 40,
                            name: '货币',
                            itemStyle: { normal: { color: "#5877F0" } }
                        },
                        { value: 20, name: '股票', itemStyle: { normal: { color: "#AA9FFD" } } },
                        { value: 40, name: '债券', itemStyle: { normal: { color: "#F96481" } } }
                    ]
                }
            ],
            legend: {
                x: 'center',
                // y: 'bottom',
                bottom:5,
                itemGap:30,
                itemWidth:5,
                textStyle:{
                    fontSize: 12
                },
                align:'left',
                data: [
                    {
                        name:'货币',
                        icon:'circle'
                    },
                    {
                        name:'股票',
                        icon:'circle'
                    },{
                        name:'债券',
                        icon:'circle'
                    }
                ],
                // formatter:'{a|{name}}\n{name}',
                formatter:  function(name){
                    var total = 0;
                    var target;
                    for (var i = 0, l = data.length; i < l; i++) {
                    total += data[i].value;
                    if (data[i].name == name) {
                        target = data[i].value;
                        }
                    }
                    var arr = [
                        '{a|'+((target/total)*100).toFixed(2)+'%}',
                        '{b|'+name+'}',
                    ]
                    // return name + ' ' + ((target/total)*100).toFixed(2) + '%';
                    return arr.join('\n')
                },
                textStyle:{
                    rich:{
                        a:{
                            fontSize:20,
                            verticalAlign:'top',
                            align:'center',
                            padding:[0,0,28,0]
                        },
                        b:{
                            fontSize:14,
                            align:'center',
                            padding:[0,10,0,0],
                            lineHeight:25
                        }
                    }
                }
            },
            backgroundColor: "#fff"
        };
        return option;
    };
    render() {
        const _this = this;
        const { isShow } = this.props;
        return isShow ?
            <div className={StyleClass.configChartWrapper}>
                <ReactEcharts
                    option={_this.getOption()}
                    echarts={echarts}
                    style={{ height: '265px', width: $.width() }}
                    className='react_for_echarts' />
            </div> : null;
    }

}
其实大神上面的数据还是有点问题,按照大神这样做的话,饼状图的百分比和算出来的有一点点出入(算出来的值加起来不够百分百),其实就是最后一项的百分比和饼状图的不一样,其他的都一样,所以,我自己修改了几个小时,终于把它完善了(主要是绿色的代码),代码如下:

this.dateEchart.setOption({

color:['#4BC373','#4178E8','#FF5B57'],

             tooltip: {

trigger: 'item',

formatter: "{a} <br/>{b}: {c} ({d}%)"

},

legend: {

orient: 'vertical',

right:'10%',

top:'40%',

data:['微信支付','支付宝网上支付','银行支付'],

formatter:(name)=>{

let target,count;

let total=0,num=0;

let l=this.data2.length;

for(var i=0;i<l;i++){

total+=this.data2[i].value;

}

for(i=0;i<l;i++){

if((this.data2[i].name==name)&&(i<l-1)){

target=this.data2[i].value;

count=((target/total)*100).toFixed(2)+'%';

return name+': '+count;

}

if((this.data2[i].name==name)&&(i==l-1)){

for(i=0;i<l-1;i++){

num+=parseFloat((((this.data2[i].value)/total)*100).toFixed(2));

}

let yy=(100-num).toFixed(2);

return name+': '+yy+'%';

}

}

}

},

series: [

{

name:'访问来源',

type:'pie',

radius: ['40%', '60%'],

center:['40%','50%'],

avoidLabelOverlap: false,

label: {

normal: {

show: false,

position: 'center'

},

emphasis: {

show: true,

textStyle: {

fontSize: '30',

fontWeight: 'bold'

}

},

},

labelLine: {

normal: {

show: false

}

},

data:this.data2

}

]

         });


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

echarts-x轴 y轴配置(字体颜色,线的颜色,分割线,y周单位颜色)

前端达人


  1. //var myChart = this.$echarts.init(document.getElementById("echart-twoline")); //vue
  2. var myChart = echarts.init(document.getElementById("echart-twoline"));//jquery
  3. var option = {
  4. tooltip: {
  5. trigger: 'axis',
  6. axisPointer: {
  7. type: 'shadow'
  8. }
  9. },
  10. legend: {
  11. data: ['计划劳务资源', "实际劳务资源"],
  12. //align: 'left',
  13. right: 10,
  14. textStyle: {
  15. color: "#fff"
  16. },
  17. itemWidth: 14,
  18. itemHeight: 10,
  19. itemGap: 13,
  20. },
  21. grid: {
  22. left: '3%',
  23. right: '4%',
  24. bottom: '3%',
  25. containLabel: true
  26. },
  27. xAxis: [{
  28. type: 'category',
  29. data: ['1月','2月','3月', '4月'],
  30. axisLine: {/x轴线的颜色以及宽度
  31. show: true,
  32. lineStyle: {
  33. color: "rgba(219,225,255,1)",
  34. width: 0,
  35. type: "solid"
  36. }
  37. },
  38. axisTick: {
  39. show: false,
  40. },
  41. axisLabel: {//x轴文字的配置
  42. show: true,
  43. textStyle: {
  44. color: "rgba(219,225,255,1)",
  45. }
  46. },
  47. splitLine: {//分割线配置
  48. show:false,
  49. lineStyle: {
  50. color: "rgba(219,225,255,1)",
  51. }
  52. }
  53. }],
  54. yAxis: [{
  55. type: 'value',
  56. name:"单位:人",//y轴上方的单位
  57. nameTextStyle:{//y轴上方单位的颜色
  58. color:'#151515'
  59. },
  60. axisLabel: {//y轴文字的配置
  61. textStyle: {
  62. color: "rgba(219,225,255,1)",
  63. margin: 15
  64. },
  65. // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
  66. },
  67. axisTick: {
  68. show: false,
  69. },
  70. axisLine: {//y轴线的颜色以及宽度
  71. show: false,
  72. lineStyle: {
  73. color: "rgba(219,225,255,1)",
  74. width: 1,
  75. type: "solid"
  76. },
  77. },
  78. splitLine: {//分割线配置
  79. show:false,
  80. lineStyle: {
  81. color: "rgba(219,225,255,1)",
  82. }
  83. }
  84. }],
  85. series: [{
  86. name: '计划劳务资源',
  87. type: 'bar',
  88. data: [38,38,42,48],
  89. barWidth: 10, //柱子宽度
  90. barGap: .5, //柱子之间间距
  91. itemStyle: {
  92. normal: {
  93. color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  94. offset: 0,
  95. color: 'rgba(0, 153, 239, 0.8)'
  96. }, {
  97. offset: 1,
  98. color: 'rgba(66, 187, 255, 1)'
  99. }]),
  100. opacity: 1,
  101. }
  102. }
  103. }, {
  104. name: '实际劳务资源',
  105. type: 'bar',
  106. data: [40, 30, 42, 50],
  107. barWidth: 10,
  108. barGap: .5,
  109. itemStyle: {
  110. normal: {
  111. color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  112. offset: 0,
  113. color: 'rgba(0, 242, 159, 1)'
  114. }, {
  115. offset: 1,
  116. color: 'rgba(76, 240, 254, 1)'
  117. }]),
  118. opacity: 1,
  119. }
  120. }
  121. }]
  122. };
  123. myChart.setOption(option);
  124. window.addEventListener("resize", () => {
  125. myChart.resize();
  126. });

 

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn + 博客园

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


echarts分割线变虚线

前端达人

 
  1. yAxis.splitLine Object
  2. 坐标轴在 grid 区域中的分隔线。
  3. yAxis.splitLine.show boolean
  4. [ default: true ]
  5. 是否显示分隔线。默认数值轴显示,类目轴不显示。
  6. yAxis.splitLine.interval number, Function
  7. [ default: 'auto' ]
  8. 坐标轴分隔线的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。
  9. 默认会采用标签不重叠的策略间隔显示标签。
  10. 可以设置成 0 强制显示所有标签。
  11. 如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。
  12. 可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:
  13. (index:number, value: string) => boolean
  14. 第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false
  15. yAxis.splitLine.lineStyle Object
  16. yAxis.splitLine.lineStyle.color Array, string
  17. [ default: ['#ccc'] ]
  18. 分隔线颜色,可以设置成单个颜色。
  19. 也可以设置成颜色数组,分隔线会按数组中颜色的顺序依次循环设置颜色。
  20. 示例
  21. splitLine: {
  22. lineStyle: {
  23. // 使用深浅的间隔色
  24. color: ['#aaa', '#ddd']
  25. }
  26. }
  27. yAxis.splitLine.lineStyle.width number
  28. [ default: 1 ]
  29. 分隔线线宽。
  30. yAxis.splitLine.lineStyle.type string
  31. [ default: 'solid' ]
  32. 分隔线线的类型。
  33. 可选:
  34. 'solid'
  35. 'dashed'
  36. 'dotted'
 
  1. yAxis: {
  2. splitLine: {
  3. show: true,
  4. lineStyle:{
  5. type:'dashed'
  6. }
  7. }
  8. },

1

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn + 博客园

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


vue项目引入字体.ttf

前端达人

1、下载所需要的字体,.ttf格式本文以(FZCYJ.ttf 为例)

2、在src下新建common文件,文件夹中包含以下文件


3、打开font.css


  1. @font-face {
  2. font-family: 'FZCYJ'; //重命名字体名
  3. src: url('FZCYJ.ttf'); //引入字体
  4. font-weight: normal;
  5. font-style: normal;
  6. }

4、配置webpack.base.conf.js 文件


5、App.vue引入字体


6、可在body中设置字体


  1. body{
  2. font-family: FZCYJ;
  3. }

 
或者

1、UI设计图有"华文黑体",担心客户端没有该字体,将"huawen.ttf"字体文件,放入项目中:

2、创建一个font.scss(或font.css)文件:

1 @font-face { 2  font-family: 'huawen'; //重命名字体名 3  src: url('huawen.ttf'); //引入字体 4  font-weight: normal; 5  font-style: normal; 6 }

3、在main.js中引入

import '@/common/css/font.scss';

4、就可以直接使用了:

div { font-family: 'huawen';
}

 

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn + 博客园

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档