夕水

夕水 查看完整档案

成都编辑四川信息职业技术学院  |  软件技术 编辑某某公司  |  web前端开发 编辑 www.eveningwater.com 编辑
编辑

问之以是非而观其志,穷之以辞辩而观其变,资之以计谋而观其识,告知以祸难而观其勇,醉之以酒而观其性,临之以利而观其廉,期之以事而观其信。

个人动态

夕水 回答了问题 · 9月15日

原生JS 我想鼠标划入 添加类名 清空兄弟类名

你应该就是想做类似TAB选项卡的功能吧,按你的需求来看,只需悬浮就可以添加选中类名。


 var lis = document.querySelectorAll(".sci_ban_tit");
 lis.forEach(item => {
     item.onmouseover = () => {
        //先全部清空选中,再给当前添加选中
        lis.forEach(item => item.classList.remove('active'));
        item.classList.add('active');
     }
 })
 

我想你需要的是这样的代码,不过用css也可以实现啊?

关注 6 回答 6

夕水 回答了问题 · 9月7日

关于 vue $refs 获取组件 this 指向的疑问

this.$refs.seamlessScroll指向的是vue-seamless-scroll这个组件实例,如果添加到DOM元素上,则指的是该DOM元素,与this是不一样的,详见vm.$refs用法

关注 4 回答 3

夕水 发布了文章 · 9月6日

从零开始编写一个时间线组件

一.搭建开发环境

PS:npm速度慢可使用cnpm

第一步,让我们先把项目环境搭建好,首先打开命令窗口,执行如下命令:

npm init

搭建好了package.json文件之后,接下来开始装依赖包,我们需要用到webpack webpack-cli来打包项目,执行如下命令:

npm install webpack webpack-cli --save-dev

在编写代码时,我们需要用到es6的语法,因此我们还需要安装@babel/core @babel/cli @babel/preset-env babel-loader依赖来处理es6兼容语法。继续执行如下命令:

npm install --save-dev @babel/core @babel/cli @babel/preset-env babel-loader

接下来,创建一个babel.config.json文件,然后写入如下代码:

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1",
        },
        "useBuiltIns": "usage",
      }
    ]
  ]
}

这只是一个默认的配置,也可以自行根据需求来进行配置,更多信息详见babel文档

这还没有结束,我们还需要搭建vue的开发环境,我们需要编译.vue,所以我们需要安装vue-loader vue-template-compiler vue等依赖包,继续执行如下命令:

npm install vue vue-loader vue-template-compiler --save-dev

我们目前所需要的依赖就暂时搭建完成,接下来在页面根目录创建一个index.html文件,写入如下代码:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-cli</title>
</head>
<body>
    <div id="app"></div>
</body>
<script data-original="/build.js"></script>
</html>

在这里,我们注意到了我们打包最后引入的文件为build.js文件,接下来我们开始编写webpack的配置,在根目录下继续创建一个webpack.config.js文件,代码如下:


const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    mode:"development",
    entry:'./main.js',
    output:{
        path:__dirname,
        filename:'build.js'
    },
    module:{
        rules:[
            {
                test: /\.vue$/,
                loader: "vue-loader"
            },
            {
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

在导出后面还需要加上这一段js代码,如下:

    resolve: {
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    }

为什么要加上这一个配置,这个后面会说明原因,这里暂时先放置,继续在根目录下分别创建一个App.vuemain.js文件。代码分别如下:

import Vue from 'vue';
import App from './App.vue'

Vue.config.productionTip = false;

var vm = new Vue({
    el: "#app",
    // render:(h) => { return h(App)},
    components: {
        App
    },
    template: "<App />"
})
<template>
  <div id="app">
    <p>{{ msg }}</p>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                msg: "hello,vue.js!"
            };
        },
        mounted() {

        },
        methods: {

        }
    };
</script>

接下来,执行命令webpack,然后我们就可以看到页面中会生成一个build.js文件,然后运行index.html文件,我们就可以在浏览器页面上看到hello,vue.js!的字符串,稍等,我们似乎忘记了什么,一般在开发中,谁会给你运行webpack命令来打包,不都是执行npm run build嘛,让我们在package.json中加上这一行代码

{
  "name": "timeline-project",
  "version": "1.0.0",
  "description": "a component with vue.js",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack" //这里是添加的代码
  },
  "keywords": [
    "timeline"
  ],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.11.5",
    "@babel/core": "^7.11.5",
    "@babel/preset-env": "^7.11.5",
    "babel-loader": "^8.1.0",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.3",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

等等,我们还忘了一件事,别人都可以使用npm run dev命令来在本地运行项目,我们为什么不可以呢?我们需要安装webpack-dev-server依赖,执行如下命令安装:

npm install webpack-dev-server --save-dev

安装完成,让我们继续在package.json中添加这样一行代码,如下所示:

{
  "name": "timeline-project",
  "version": "1.0.0",
  "description": "a component with vue.js",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --open --hot --port 8081" //这里是添加的代码
  },
  "keywords": [
    "timeline"
  ],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.11.5",
    "@babel/core": "^7.11.5",
    "@babel/preset-env": "^7.11.5",
    "babel-loader": "^8.1.0",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.3",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

添加的代码很好理解,就是启动服务热更新,并且端口是8081。接下来让我们尝试运行npm run dev,看看发生了什么!

真的很棒,我们已经成功运行了vue-cli项目,搭建环境这一步到目前为止也算是成功了。

前面还提到一个问题,那就是在webpack.config.js中为什么要加上resolve配置,这是因为,如果我们需要在.vue文件中使用components选项来注册一个组件的话,就必须要引入完整的vue.js,也就是编译模板代码,如果我们只用render来创建一个组件,那么就不需要添加这个配置,这就是官网所说的运行时 + 编译器 vs. 只包含运行时

在这里我们还要注意一个问题,那就是我们需要处理单文件组件中的css样式,所以我们需要安装css-loader与style-loader依赖。执行如下命令:

npm install style-loader css-loader --save-dev

webpack.config.js中添加如下代码:


const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    mode:"development",
    entry:'./main.js',
    output:{
        path:__dirname,
        filename:'build.js'
    },
    resolve: {
        // if you don't write this,you can't use components to register component
        //only use render to register component
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    },
    module:{
        rules:[
            {
                test: /\.vue$/,
                loader: "vue-loader"
            },
            {
                test: /\.css$/,
                loader: ["style-loader","css-loader"]
            },
            {
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

如果是用less或者stylus或者scss,我们还需要格外安装依赖,例如less需要安装less-loader,这里我们就只用style-loader与css-loader即可,如对less等感兴趣可自行研究。

特别说明:由于我们所编写的时间线组件并没有用到图标,所以无需添加图标以及图片的处理。

二.分析时间线组件结构以及搭建基本架构

时间线组件可以分成三部分组成,第一部分即时间线,第二部分即时间戳,第三部分则是内容。我们先来看时间线组件的一个结构:

<timeline>
  <timeline-item></timeline-item>
</timeline>

从上图我们可以看到时间线组件包含两个组件,即timelinetimeline-item组件,接下来我们来分析一下组件的属性有哪些。首先是父组件timeline组件,根据element ui官方文档。我们可以看到父组件仅仅只提供了一个reverse属性,即指定节点排序方向,默认为正序,但实际上我们还可以添加一个属性,那就是direction属性,因为element ui默认给的时间线组件只有垂直方向,而并没有水平方向,因此我们提供这个属性来确保时间线组件分为水平时间线和垂直时间线。

根据以上分析,我们总结如下:

  direction:'vertical' //或'horizontal'
  reverse:true //或false

接下来,我们来看子组件的属性,它包含时间戳,是否显示时间戳,时间戳位置,节点的类型,节点的图标,节点的颜色以及节点的尺寸。这里我们暂时忽略图标这个选项。因此我们可以将属性定义如下:

 timestamp:'2020/9/1' //时间戳内容
 showTimestamp:true //或false,表示是否显示时间戳
 timestampPlacement:'top' //或'bottom',即时间戳的显示位置
 nodeColor:'#fff'//节点的颜色值
 nodeSize:'size' //节点的尺寸
 nodeIcon:'el-icon-more' //节点的图标,在这里我们没有引入element ui组件,因此不添加这个属性,如果要添加这个属性,需要先编写图标组件

确定了以上属性之后,我们就可以先来编写一个静态的组件元素结构,如下图所示:

  <!-- 父组件结构 -->
  <div class="timeline">
    <!-- 子组件结构 -->
    <div class="timeline-item">
      <!-- 时间线 -->
      <div class="timeline-item-tail"></div>
      <!-- 时间线上的节点 -->
      <div class="timeline-item-node"></div>
      <!-- 时间线的时间戳与内容 -->
      <div class="timeline-item-wrapper">
        <!-- 时间戳,位置在top-->
        <div class="timeline-item-timestamp is-top"></div>
        <!-- 每一个时间戳对应的内容 -->
        <div class="timeline-item-content"></div>
        <!-- 时间戳,位置在bottom-->
        <div class="timeline-item-timestamp is-bottom"></div>
      </div>
    </div>
  </div>

根据以上代码,我们可以清晰的看到一个时间线的元素构成,为了确保布局方便,我们多写几个子元素,即time-line-item以及它的所有子元素。接下来,我们开始编写静态的样式。如下:

  .timeline {
        font-size: 14px;
        margin: 0;
        background-color: #ffffff;
    }

    .timeline-item {
        position: relative;
        padding-bottom: 20px;
    }

    .timeline-item-tail {
        position: absolute;
    }

    .is-vertical .timeline-item-tail {
        border-left: 3px solid #bdbbbb;
        height: 100%;
        left: 3px;
    }

    .is-horizontal .timeline-item .timeline-item-tail {
        width: 100%;
        border-top: 3px solid #bdbbbb;
        top: 5px;
    }

    .is-horizontal:after {
        content: " ";
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }

    .timeline-item.timeline-item-info .timeline-item-tail {
        border-color: #44444f;
    }

    .timeline-item.timeline-item-info .timeline-item-node {
        background-color: #44444f;
    }

    .timeline-item.timeline-item-info .timeline-item-content {
        color: #44444f;
    }

    .timeline-item.timeline-item-primary .timeline-item-tail {
        border-color: #2396ef;
    }

    .timeline-item.timeline-item-primary .timeline-item-node {
        background-color: #2396ef;
    }

    .timeline-item.timeline-item-primary .timeline-item-content {
        color: #2396ef;
    }

    .timeline-item.timeline-item-success .timeline-item-tail {
        border-color: #23ef3e;
    }

    .timeline-item.timeline-item-success .timeline-item-node {
        background-color: #23ef3e;
    }

    .timeline-item.timeline-item-success .timeline-item-content {
        color: #23ef3e;
    }

    .timeline-item.timeline-item-warning .timeline-item-tail {
        border-color: #efae23;
    }

    .timeline-item.timeline-item-warning .timeline-item-node {
        background-color: #efae23;
    }

    .timeline-item.timeline-item-warning .timeline-item-content {
        color: #efae23;
    }

    .timeline-item.timeline-item-error .timeline-item-tail {
        border-color: #ef5223;
    }

    .timeline-item.timeline-item-error .timeline-item-node {
        background-color: #ef5223;
    }

    .timeline-item.timeline-item-error .timeline-item-content {
        color: #ef5223;
    }

    .is-horizontal .timeline-item {
        float: left;
    }

    .is-horizontal .timeline-item-wrapper {
        padding-top: 18px;
        left: -28px;
    }

    .timeline-item-node {
        background-color: #e1e6e6;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
    }

    .timeline-item-node-normal {
        width: 12px;
        height: 12px;
        left: -2px;
    }

    .timeline-item-node-large {
        width: 14px;
        height: 14px;
        left: -4px;
    }

    .timeline-item-wrapper {
        position: relative;
        top: -3px;
        padding-left: 28px;
    }

    .timeline-item-content {
        font-size: 12px;
        color: #dddde0;
        line-height: 1;
    }

    .timeline-item-timestamp {
        color: #666;
    }

    .timeline-item-timestamp.is-top {
        margin-bottom: 8px;
        padding-top: 6px;
    }

    .timeline-item-timestamp.is-bottom {
        margin-top: 8px;
    }

    .timeline-item:last-child .timeline-item-tail {
        display: none;
    }

接下来我们就要开始实现组件的逻辑封装了,首先我们需要封装timeline组件,为了将该组件归纳到一个目录下,我们先新建一个目录,叫timeline,然后新建一个index.vue文件,并且将我们编写好的css代码给移到该文件下,现在,你看到该文件的代码应该如下所示:

<script>
    export default {
        name: "timeline"
    }
</script>
<style>
    .timeline {
        font-size: 14px;
        margin: 0;
        background-color: #ffffff;
    }

    .timeline-item {
        position: relative;
        padding-bottom: 20px;
    }

    .timeline-item-tail {
        position: absolute;
    }

    .is-vertical .timeline-item-tail {
        border-left: 3px solid #bdbbbb;
        height: 100%;
        left: 3px;
    }

    .is-horizontal .timeline-item .timeline-item-tail {
        width: 100%;
        border-top: 3px solid #bdbbbb;
        top: 5px;
    }

    .is-horizontal:after {
        content: " ";
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }

    .timeline-item.timeline-item-info .timeline-item-tail {
        border-color: #44444f;
    }

    .timeline-item.timeline-item-info .timeline-item-node {
        background-color: #44444f;
    }

    .timeline-item.timeline-item-info .timeline-item-content {
        color: #44444f;
    }

    .timeline-item.timeline-item-primary .timeline-item-tail {
        border-color: #2396ef;
    }

    .timeline-item.timeline-item-primary .timeline-item-node {
        background-color: #2396ef;
    }

    .timeline-item.timeline-item-primary .timeline-item-content {
        color: #2396ef;
    }

    .timeline-item.timeline-item-success .timeline-item-tail {
        border-color: #23ef3e;
    }

    .timeline-item.timeline-item-success .timeline-item-node {
        background-color: #23ef3e;
    }

    .timeline-item.timeline-item-success .timeline-item-content {
        color: #23ef3e;
    }

    .timeline-item.timeline-item-warning .timeline-item-tail {
        border-color: #efae23;
    }

    .timeline-item.timeline-item-warning .timeline-item-node {
        background-color: #efae23;
    }

    .timeline-item.timeline-item-warning .timeline-item-content {
        color: #efae23;
    }

    .timeline-item.timeline-item-error .timeline-item-tail {
        border-color: #ef5223;
    }

    .timeline-item.timeline-item-error .timeline-item-node {
        background-color: #ef5223;
    }

    .timeline-item.timeline-item-error .timeline-item-content {
        color: #ef5223;
    }

    .is-horizontal .timeline-item {
        float: left;
    }

    .is-horizontal .timeline-item-wrapper {
        padding-top: 18px;
        left: -28px;
    }

    .timeline-item-node {
        background-color: #e1e6e6;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
    }

    .timeline-item-node-normal {
        width: 12px;
        height: 12px;
        left: -2px;
    }

    .timeline-item-node-large {
        width: 14px;
        height: 14px;
        left: -4px;
    }

    .timeline-item-wrapper {
        position: relative;
        top: -3px;
        padding-left: 28px;
    }

    .timeline-item-content {
        font-size: 12px;
        color: #dddde0;
        line-height: 1;
    }

    .timeline-item-timestamp {
        color: #666;
    }

    .timeline-item-timestamp.is-top {
        margin-bottom: 8px;
        padding-top: 6px;
    }

    .timeline-item-timestamp.is-bottom {
        margin-top: 8px;
    }

    .timeline-item:last-child .timeline-item-tail {
        display: none;
    }
</style>

三.时间线组件逻辑

PS:加载sourceMap还需要这样一个配置devtool: 'inline-source-map'

为了确保父子组件共享状态,我们利用provide/inject API来传递this对象,如下所示:

  export default {
    name: "timeline",
    provide(){
        return {
            timeline:this
        }
    }
  }

然后我们开始定义父组件的属性,根据前面所述,它包含两个属性,因此我们定义好在props中,如下所示:

    import { oneOf } from '../util'
    export default {
        name: "timeline",
        provide(){
            return {
                timeline:this
            }
        },
        props:{
            reverse:{
                type:Boolean,
                default:false
            },
            direction:{
                type:String,
                default:'vertical',
                validator:(value) => {
                    return oneOf(['vertical','horizontal'],value,'vertical');
                }
            }
        }
    }

上面代码需要用到一个工具函数oneOf,顾名思义,就是必须是其中的一项,它有三个参数,第一个参数是匹配的数组,第二个参数是匹配的项,第三个是提供的默认项,该工具函数代码如下:

export const oneOf = (arr,value,defaultValue) => {
    return arr.reduce((r,i) => i === value ? i : r,defaultValue);
}

其实也不难理解,就是我们想要的值必须是数组的一项,如果不是就返回默认项,工具函数内部代码,我们可以写得更清晰明了一点,如下所示:

export const oneOf = (arr,value,defaultValue) => {
    return arr.reduce((result,item) => {
      return item === value ? item : value;
    },defaultValue);
}

以上的代码经过简洁处理就得到了前面的一行代码,如果理解不了,可以采用后者的代码,至于validator验证选项,可参考vue-prop-validator-自定义验证函数

接下来,我们在render方法中去渲染这个父组件,代码如下:

import { oneOf } from '../util'
    export default {
        name: "timeline",
        provide(){
            return {
                timeline:this
            }
        },
        props:{
            reverse:{
                type:Boolean,
                default:false
            },
            direction:{
                type:String,
                default:'vertical',
                validator:(value) => {
                    return oneOf(['vertical','horizontal'],value,'vertical');
                }
            }
        },
        //新添加的内容
        render(){
            const reverse = this.reverse;
            const direction = this.direction;
            const classes = {
                'timeline':true,
                'is-reverse':reverse,
                ['is' + direction]:true
            }
            const slots = this.$slots.default || [];
            if(reverse)slots = slots.reverse();
            return (<div class={classes}>{slots}</div>)
        }
    }

以上代码似乎不是很好理解,其实也不难理解,首先是获取reversedirection属性,接着就是设置类名对象,类型对象包含三个,然后就是获取该组件的默认插槽内容,判断如果提供了reverse属性,则调用数组的reverse方法来让slots倒序,在这里我们应该很清晰的明白 slots如果存在,那么则一定是一个vNode节点组成的数组,如果没有,默认就是一个空数组。然后最后返回一个父元素包含该插槽的jsx元素。

在这里,我们使用了jsx语法,而我们的项目环境当中还并没有添加处理jsx的依赖,所以我们需要再次安装处理jsx语法的依赖babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx,并添加相应的配置。继续在终端输入以下命令安装依赖:

npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx --save-dev

然后在babel.config.json中添加一行配置代码如下:

 "plugins": ["transform-vue-jsx"]

接着在webpack.config.js中添加一行配置处理如下:

{
    test: /\.(jsx?|babel|es6|js)$/,
    loader: 'babel-loader',
    exclude: /node_modules/
}

现在,我们可以看到页面中不会报错,未处理jsx了。

到此为止,父组件的逻辑代码也就完成了,接下来,让我们在全局里面使用一下该组件,看看是否生效。

main.js里面添加如下一行代码:

import Timeline from './components/timeline/timeline.vue'
Vue.component(Timeline.name,Timeline)

然后在App.vue里面,我们使用这个组件,代码如下:

<template>
    <div id="app">
        <timeline></timeline>
    </div>
</template>

ok,似乎看起来没什么问题,让我们继续编写子组件的逻辑代码。

接下来,新建一个item.vue文件,在该文件中编写如下代码:

<template>
    <div class="timeline-item">
        <div class="timeline-item-tail"></div>
        <div class="timeline-item-node" 
            :class="[`timeline-item-node-${ size || ''}`,`timeline-item-node-${type || ''}`]" 
            :style="{ backgroundColor:color }"
            v-if="!$slots.dot"
        ></div>
        <div class="timeline-item-node" v-if="$slots.dot">
            <slot name="dot"></slot>
        </div>
        <div class="timeline-item-wrapper">
            <div class="timeline-item-timestamp" 
                :class="[`is-`+ timestampPlacement ]" 
                v-if="item.placement === 'top' && showTimestamp"
            >{{ timestamp }}</div>
            <div class="timeline-item-content"><slot></slot></div>
            <div class="timeline-item-timestamp" 
                :class="[`is-`+ timestampPlacement ]" 
                v-if="item.placement === 'bottom' && showTimestamp"
            >{{ timestamp }}</div>
        </div>
    </div>
</template>
<script>
export default {
    name:"timeline-item",
    inject:['timeline'],
    props:{
        timestamp:String,
        showTimestamp:{
            type:Boolean,
            default:false
        },
        timestampPlacement:{
            type:String,
            default:'top',
            validator:(value) => {
                return oneOf(['top','bottom'],value,'bottom')
            }
        },
        type:{
            type:String,
            default:'default',
            validator:(value) => {
                return oneOf(['default','info','primary','success','warning','error'],value,'default');
            }
        },
        size:{
            type:String,
            default:'normal',
            validator:(value) => {
                return oneOf(['normal','large'],value,'normal')
            }
        },
        color:String
    }
}
</script>

编写完成之后,让我们继续在main.js中引用它,然后在App.vue中使用它。代码分别如下:

 //main.js
 import TimelineItem from './components/timeline/timeline-item.vue'
 Vue.component(TimelineItem.name,TimelineItem)
<!--App.vue-->
<timeline>
    <timeline-item type="default" size="large" :show-timestamp="true" timestamp="2020/9/6" timestamp-placement="top">待审核</timeline-item>
    <timeline-item type="info" size="normal" :show-timestamp="true" timestamp="2020/9/6" timestamp-placement="bottom">审核中</timeline-item>
    <timeline-item type="error" size="large" :show-timestamp="true" timestamp="2020/9/6" timestamp-placement="top">审核失败</timeline-item>
    <timeline-item type="success" size="normal" :show-timestamp="true" timestamp="2020/9/6" timestamp-placement="bottom">审核完成</timeline-item>
</timeline>

接下来我们就可以看到一个时间线已经完美的展示了,时间线组件算是大功告成了。

本文档已经录制为视频,地址如下:

搭建开发环境
分析与创建时间线基本架构
编写时间线逻辑

源码和文档已经上传到github

查看原文

赞 5 收藏 4 评论 0

夕水 回答了问题 · 8月28日

解决一个按钮调用不同的接口

这里提供一个在线demo给你看看。

关注 4 回答 4

夕水 回答了问题 · 8月13日

vue组件内更新DOM绑定方法,this的指向竟然不是VueComponent对象?

function() {
  console.log(this);
}
//函数会有作用域,可以使用箭头函数
() => { console.log(this); }

关注 4 回答 3

夕水 回答了问题 · 8月11日

js怎么把对象合并起来?

   let cn = json.reduce((r,i) => (r[i.permission] = i['title'],r),{});

关注 4 回答 3

夕水 回答了问题 · 8月7日

js监听iframe的点击事件

可以使用postMessage api将事件发送,然后另一边接收。

关注 3 回答 3

夕水 发布了文章 · 7月14日

20个无库无框架的小型web项目(中文版)

前言

前一阵子看到了大火的github项目vanillawebprojects,对其中的实现有些好奇,于是研究了写法,但是对英文有些不太熟悉的我,无法忍受这样的纯英文项目,于是花了二周时间,潜心研究了项目的实现思路,然后自己实现了这20web项目的中文版。虽然思路来源于原项目,但是很多功能我做了扩展,相信细心的人一定会发现有哪些不同之处,让我们来一一看一下吧。

表单验证

效果如下图所示:

在线示例
github源码地址

挑选电影座位

效果如下图所示:

在线示例
github源码地址

视频播放器

效果如下图所示:

在线示例
github源码地址

汇率计算器

效果如下图所示:

在线示例
github源码地址

DOM数组方法

效果如下图所示:

在线示例
github源码地址

弹窗与滑动菜单

效果如下图所示:

在线示例
github源码地址

猜单词的双人小游戏

效果如下图所示:

在线示例
github源码地址

查找膳食

效果如下图所示:

在线示例
github源码地址

费用追踪器

效果如下图所示:

在线示例
github源码地址

音乐播放器

效果如下图所示:

在线示例
github源码地址

无限滚动

效果如下图所示:

在线示例
github源码地址

打字游戏

效果如下图所示:

在线示例
github源码地址

文本阅读器

效果如下图所示:

在线示例
github源码地址

记忆卡片

效果如下图所示:

在线示例
github源码地址

歌词搜索器

效果如下图所示:

在线示例
github源码地址

呼吸调节器

效果如下图所示:

在线示例
github源码地址

打砖块小游戏

效果如下图所示:

在线示例
github源码地址

新年倒计时

效果如下图所示:

在线示例
github源码地址

拖拽排序列表

效果如下图所示:

在线示例
github源码地址

猜数字小游戏

效果如下图所示:

在线示例
github源码地址

如果有人能发现bug,欢迎提issue,如果这些项目能够帮助到您,希望您能点个star

查看原文

赞 30 收藏 22 评论 0

夕水 发布了文章 · 7月10日

用JavaScript无canvas来完成一个柱状图表

前言

提起数据可视化技术,都不免会让人想到echarts,而最简单的入门图表就是柱状图了。它是基于canvas来实现的,而我在想,如果不用canvas,我是否能不用canvas实现柱状图,经过我的探索,终于实现了一款柱状图表。

让我们查看一个已经完成的在线示例,如下图所示:

分析实现思路

首先,我们需要确定柱状图表有哪些部分,第一右上角头部有legend部分,第二有xy轴部分,第三就是柱状图部分了。好了确定了有哪些部分,我们就可以很好的实现了,好了,让我们进入正题吧。

实现静态页面结构

编写html

目前我们完成的成品是已经封装好的,然后页面就只有一个容器元素。但我们最开始肯定不能这样写,我们先写一个写死的结构如下所示:

<div id="weekCost" class="ew-charts">
        <ew-charts-body>
            <ew-charts-legend>
                <i class="leg-1"></i>
                <span>直接访问</span>
                <i class="leg-2"></i>
                <span>邮件营销</span>
                <i class="leg-3"></i>
                <span>联盟广告</span>
                <i class="leg-4"></i>
                <span>视频广告</span>
                <i class="leg-5"></i>
                <span>搜索引擎</span>
            </ew-charts-legend>
            <ew-charts-x>
                <div class="x-1" style="letter-spacing:2px;">一月</div>
                <div class="x-2" style="letter-spacing:2px;">二月</div>
                <div class="x-3" style="letter-spacing:2px;">三月</div>
                <div class="x-4" style="letter-spacing:2px;">四月</div>
                <div class="x-5" style="letter-spacing:2px;">五月</div>
                <div class="x-6" style="letter-spacing:2px;">六月</div>
                <div class="x-7" style="letter-spacing:2px;">七月</div>
            </ew-charts-x>
            <ew-charts-y>
                <div class="y-1">500</div>
                <div class="y-2">1000</div>
                <div class="y-3">1500</div>
                <div class="y-4">2000</div>
            </ew-charts-y>
            <ew-charts-zone>
                <div class="zone-1">
                    <bar class="bar-1 dataId-1-1" data-value="320"></bar>
                    <bar class="bar-2 dataId-1-2" data-value="120"></bar>
                    <bar class="bar-3 dataId-1-3" data-value="220"></bar>
                    <bar class="bar-4 dataId-1-4" data-value="150"></bar>
                    <bar class="bar-5 dataId-1-5" data-value="862"></bar>
                </div>
                <div class="zone-2">
                    <bar class="bar-1 dataId-2-1" data-value="332"></bar>
                    <bar class="bar-2 dataId-2-2" data-value="132"></bar>
                    <bar class="bar-3 dataId-2-3" data-value="182"></bar>
                    <bar class="bar-4 dataId-2-4" data-value="232"></bar>
                    <bar class="bar-5 dataId-2-5" data-value="1018"></bar>
                </div>
                <div class="zone-3">
                    <bar class="bar-1 dataId-3-1" data-value="301"></bar>
                    <bar class="bar-2 dataId-3-2" data-value="101"></bar>
                    <bar class="bar-3 dataId-3-3" data-value="191"></bar>
                    <bar class="bar-4 dataId-3-4" data-value="201"></bar>
                    <bar class="bar-5 dataId-3-5" data-value="964"></bar>
                </div>
                <div class="zone-4">
                    <bar class="bar-1 dataId-4-1" data-value="334"></bar>
                    <bar class="bar-2 dataId-4-2" data-value="134"></bar>
                    <bar class="bar-3 dataId-4-3" data-value="234"></bar>
                    <bar class="bar-4 dataId-4-4" data-value="154"></bar>
                    <bar class="bar-5 dataId-4-5" data-value="1026"></bar>
                </div>
                <div class="zone-5">
                    <bar class="bar-1 dataId-5-1" data-value="390"></bar>
                    <bar class="bar-2 dataId-5-2" data-value="90"></bar>
                    <bar class="bar-3 dataId-5-3" data-value="290"></bar>
                    <bar class="bar-4 dataId-5-4" data-value="190"></bar>
                    <bar class="bar-5 dataId-5-5" data-value="1679"></bar>
                </div>
                <div class="zone-6">
                    <bar class="bar-1 dataId-6-1" data-value="330"></bar>
                    <bar class="bar-2 dataId-6-2" data-value="230"></bar>
                    <bar class="bar-3 dataId-6-3" data-value="330"></bar>
                    <bar class="bar-4 dataId-6-4" data-value="330"></bar>
                    <bar class="bar-5 dataId-6-5" data-value="1600"></bar>
                </div>
                <div class="zone-7">
                    <bar class="bar-1 dataId-7-1" data-value="320"></bar>
                    <bar class="bar-2 dataId-7-2" data-value="210"></bar>
                    <bar class="bar-3 dataId-7-3" data-value="310"></bar>
                    <bar class="bar-4 dataId-7-4" data-value="410"></bar>
                    <bar class="bar-5 dataId-7-5" data-value="1570"></bar>
                </div>
            </ew-charts-zone>
        </ew-charts-body>
    </div>

编写css

接下来就需要根据页面元素,一个一个的添加样式了,这是一个慢工细活的过程,需要慢慢来。

/**
* 功能:普通页面样式设置
**/
/*********************************************/
/* 样式初始化部分 */
/*********************************************/
* {
    margin: 0;
    padding: 0;
}
body,html {
    height: 100%;
    font: 20px "微软雅黑";
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
}
/* 转换为IE盒子模型 */
*,*::before,*::after {
    box-sizing: border-box;
}

/* 手型按钮 */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="radio"],
input[type="checkbox"],
a {
    cursor: pointer;
}

button,
input,
textarea,
select {
    outline: none;
}
@charset "utf-8";

/**
* 功能:统计图表样式
**/
/**** 图表自定义标签初始化部分 ****/
.ew-charts,
ew-charts-body,
ew-charts-x,
ew-charts-y,
ew-charts-zone,
ew-charts-legend {
    display: block;
}

ew-charts-x,
ew-charts-x>div,
ew-charts-y,
ew-charts-y>div {
    box-sizing: border-box;
    position: absolute;
    overflow: hidden;
}

ew-charts-zone,
ew-charts-zone>div,
ew-charts-zone>div bar {
    box-sizing: border-box;
}

ew-charts-body,
ew-charts-zone>div,
ew-charts-zone>div bar {
    position: relative;
}

ew-charts-zone,
ew-charts-zone>div bar,
ew-charts-legend,
ew-charts-zone>div bar>span {
    position: absolute;
}

/* 图表容器 */
.ew-charts {
    width: 100%;
    height: 100%;
    color: #f8f5fa;
    background: linear-gradient(to right, #234, #789);
    margin: auto;
    color: #b3b3b3;
}

/*表体*/
ew-charts-body {
    width: 100%;
    height: 100%;
    font-size: 16px;
}

/*X轴*/
ew-charts-x {
    width: 90%;
    height: 8%;
    border-top: 1px solid #fefefe;
    left: 6%;
    bottom: 0;
}

ew-charts-x>div {
    height: 100%;
    text-align: center;
    line-height: 30px;
    top: 0;
}

/*Y轴*/
ew-charts-y {
    width: 6%;
    height: 80%;
    border-right: 1px solid #fefefe;
    overflow: visible;
    left: 0;
    top: 12%;
}

ew-charts-y>div {
    width: 100%;
    height: 24px;
    text-align: right;
    padding-right: 6px;
    left: 0;
}

/*表格数据区间*/
ew-charts-zone {
    width: 90%;
    height: 80%;
    left: 6%;
    top: 12%;
}

ew-charts-zone>div {
    height: 100%;
    float: right;
}

ew-charts-zone>div bar {
    height: 0;
    bottom: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
    transition: 0.6s cubic-bezier(.19, .55, .58, 1.3);
    /*默认值设置*/
    background-color: #606060;
    border: 1px solid #cdcdcd;
    box-shadow: 0 0 5px #606060;
}

ew-charts-zone>div bar:hover {
    z-index: 10;
}

ew-charts-zone>div bar>span {
    left: 50%;
    top: -40px;
    transform: translateX(-50%);
    font: 32px "方正姚体", "arial";
    opacity: 0;
}

ew-charts-zone>div bar>span.animation {
    animation: data-value-show 0.6s forwards;
}

/*图注*/
ew-charts-legend {
    top: 10px;
    right: 4%;
}

ew-charts-legend i,
ew-charts-legend span {
    display: inline-block;
    vertical-align: middle;
}

ew-charts-legend i {
    width: 34px;
    height: 20px;
    border-radius: 3px;
    margin-left: 12px;
    margin-right: 6px;
    background-color: #606060;
    border: 1px solid #cdcdcd;
}
ew-charts-legend span {
    letter-spacing: 2px;
}
/*图表动画部分*/
@keyframes data-value-show {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

编写js

首先,我们需要定义一个函数,用于封装。

function ewCharts(options) {
    //这里是判断传入的参数中是否含有color属性,从而给予color属性值
    if (!Array.isArray(options.color) || options.color.length !== options.data.Y.length) {
        let len = options.data.Y.length - options.color.length;
        for (let i = 0; i < len; i++) {
            options.color.push('#ffffff');
        }
    }
    //为后期的扩展做准备,type类型为bar就是默认的柱状图
    options.type = options.type === "bar" ? options.type : "bar";
    //将参数赋值到实例上
    this.options = options;
    //开始初始化
    this.init(options);
}

接着,我们可以看到页面效果颜色有点高亮,接下来就是完成颜色的高亮效果工具函数,如下所示:

/**
 * 颜色高亮
 */
ewCharts.prototype.lightColor = function (color) {
    // 传入的颜色为16进制颜色模式,如:#ffffff
    let everyColorLight = function (lightColor) {
        // 将传入的颜色转换成16进制数字,然后再乘以1.6相当于将颜色变亮1.6倍
        const value = Math.round(parseInt(lightColor, 16) * 1.6);
        // 值有一个最小值与最大值,当超过255则等于255,最小值不能小于16
        return (value >= 255 ? 255 : value <= 16 ? 16 : value).toString(16);
    }
    // 相当于处理每一区间的颜色代码,除了#之外的,每2位代表一种颜色,如#fef2f3,则f2代表红色区间,f2代表绿色区间,f3代表蓝色区间
    return '#' + everyColorLight(color.slice(1, 3)) + everyColorLight(color.slice(3, 5)) + everyColorLight(color.slice(5, 7));
}

然后,我们需要创建一个设置样式的函数,如下所示:

/**
 * 样式规则设置
 */
ewCharts.prototype.setStyle = function () {
    //这里的操作无非就是判断页面中是否含有link标签,如果含有,就将样式规则插入到该标签所包含的样式表中
    let link = this.$('link', false), linkIndex = 0;
    for (let i = 0, len = link.length; i < len; i++) {
        if (/\w+\.css/.test(link[i].getAttribute('href'))) {
            linkIndex = i;
        }
    }
    //api文档https://www.w3school.com.cn/xmldom/met_cssstylesheet_insertrule.asp
    return link[linkIndex].sheet.insertRule.bind(link[linkIndex].sheet);
}

然后,我们再来完成一个获取DOM元素的函数封装,如下所示:

/**,
 * 获取DOM元素
 */
ewCharts.prototype.$ = function (selector, isSingle) {
    // 如果传入的包含#,则是唯一的元素执行querySelector方法,否则根据传入的布尔值来判断执行哪个方法查询DOM
    isSingle = selector.indexOf('#') > -1 ? true : typeof isSingle === 'boolean' ? isSingle : true;
    return isSingle ? document.querySelector(selector) : document.querySelectorAll(selector);
}

然后,我们就来完成初始化函数,如下所示:

/**
 * 初始化
 */
ewCharts.prototype.init = function (options) {
    // 设置样式规则
    let setStyle = this.setStyle();
    //图表类型判断,为后期做扩展
    switch (options.type) {
        case "bar":
            //初始化页面图表所有部分
            this.resetAllCharts(this.$(options.el));
            //初始化X轴部分
            this.resetChartsX(options.data.X, setStyle);
            //初始化Y轴部分
            this.resetChartsY(options.data.Y, setStyle);
            //初始化图注部分
            this.resetChartsLegend(options.data, setStyle);
            break;
    }
}

然后,完成初始化页面图表的结构,前面页面结构和css写好只有,页面应该只保留一个容器元素,如下所示:

<div id="weekCost"></div>

接下来,我们就往该元素添加结构,如下所示:

/**
 * 初始化图表结构
 */
ewCharts.prototype.resetAllCharts = function (el) {
    el.innerHTML = "<ew-charts-body>" +
        "<ew-charts-legend></ew-charts-legend>" +
        "<ew-charts-x></ew-charts-x>" +
        "<ew-charts-y></ew-charts-y>" +
        "<ew-charts-zone></ew-charts-zone>" +
        "</ew-charts-body>";
    //为容器元素添加一个类名
    el.classList.add('ew-charts');
    return el;
}

继续初始化X轴,如下所示:

/**
 * 设置X轴
 * x轴的数据
 * 设置样式的方法
 */
ewCharts.prototype.resetChartsX = function (dataX, setStyle) {
    let chartsX = this.$('ew-charts-x'), chartsXHTML = '';
    let dataXLen = dataX.length;
    // 添加x轴的文本元素
    for (let i = 0; i < dataXLen; i++) {
        chartsXHTML += "<div class=x-" + (i + 1) + " style='letter-spacing:2px;'>" + dataX[i] + "</div>";
    }
    chartsX.innerHTML = chartsXHTML;
    let chartsXContent = this.$('ew-charts-x > div', false), chartsXContentWidthArr = [];
    // 获取元素的宽度数组,并找到最大宽度,从而设置每个元素的宽度为最大宽度
    for (let j = 0; j < dataXLen; j++) {
        chartsXContentWidthArr.push(chartsXContent[j].offsetWidth);
    }
    //最大宽度与单位宽度以及单位宽度的一半
    let maxWidth = Math.max.apply(null, chartsXContentWidthArr), unitWidth = parseInt(100 / dataXLen), half = unitWidth / 2;
    for (let k = 0; k < dataXLen; k++) {
        //循环分别设置x轴上的坐标数据的元素宽度与left偏移量
        setStyle('ew-charts-x > div.x-' + (k + 1) + '{width:' + maxWidth + 'px;' + 'left:calc(' + (unitWidth * (k + 1) - half) + '% - ' + half + 'px)}', k);
    }
}

x轴部分已经完成,继续完成y轴部分:

/**
 * 设置Y轴
 */
ewCharts.prototype.resetChartsY = function (dataY, setStyle) {
    let newDataValue = [], chartsY = this.$('ew-charts-y'), chartsYHTML = '';
    let keyNameArr = this.options.data.keyName;
    let keyValue = Array.isArray(keyNameArr) && keyNameArr.length === 2 ? keyNameArr[1] : 'value';
    for (let i = 0, len = dataY.length; i < len; i++) {
        // 将多个value值数组合并成一个数组
        newDataValue = newDataValue.concat(dataY[i][keyValue]);
    }
    // 求value数组的最大值
    let maxValue = Math.max.apply(null, newDataValue);
    if (/\./.test(String(maxValue))) {
        // 如果最大值有小数,则向上取整
        maxValue = Math.ceil(maxValue);
    }
    // 定义分段数与当前Y轴的最大值
    let subSections = null, currentMaxValue = null;
    // 按照每段为1,5,50,500,5000,50000基准值来分段的
    // 当前作为基准值判断的依据数组
    let judgeMaxArr = [1000000, 100000, 10000, 1000, 100, 10];
    let currentJudgeValue = null;
    for (let l = 0, length = judgeMaxArr.length; l < length; l++) {
        // 如果满足条件就跳出循环
        if (maxValue >= judgeMaxArr[l]) {
            currentJudgeValue = judgeMaxArr[l];
            break;
        }
    }
    // 如果currentValue的值为null,则默认分段值设为1
    if (!currentJudgeValue) currentJudgeValue = 1;
    // 计算分段数
    subSections = currentJudgeValue > 1 ? Math.ceil(maxValue / (currentJudgeValue / 2)) : Math.ceil(maxValue / currentJudgeValue);
    // 计算当前Y轴最大值
    currentMaxValue = currentJudgeValue > 1 ? subSections * (currentJudgeValue / 2) : subSections * currentJudgeValue;
    // 根据分段数来生成Y轴元素
    for (let j = 0; j < subSections; j++) {
        chartsYHTML += "<div class='y-" + (j + 1) + "'>" + (currentMaxValue / subSections) * (j + 1) + "</div>";
    }
    chartsY.innerHTML = chartsYHTML;
    // 设置CSS规则
    for (let k = 0; k < subSections; k++) {
        setStyle('ew-charts-y > div.y-' + (k + 1) + '{ bottom:calc(' + parseInt((100 / subSections) * (k + 1)) + '% - 16px);}');
    }
    // 设置区域
    this.resetChartsZone(subSections, keyValue, currentMaxValue, setStyle);
}

y轴部分也已经完成,接下来是完成柱状图部分,也就是区域部分,如下:

/**
 * 设置区域
 */
ewCharts.prototype.resetChartsZone = function (subSections, keyValue, currentMaxValue, setStyle) {
    // 区域整体背景
    setStyle("ew-charts-zone { background:repeating-linear-gradient(180deg,#535456 0%,#724109 " + 100 / subSections + "%,#334455 calc(" + 100 / subSections + "% + 1px),#e0e1e5 " + 100 / subSections * 2 + "%)}", subSections + 1);
    let zoneLen = this.options.data.X.length;
    let chartsZone = this.$('ew-charts-zone'), chartsZoneHTML = '';
    // 因为设置了margin-left与margin-right各1%,所以要减去2
    let series_unit = parseInt(100 / zoneLen) - 2;
    // 设置剩余空间
    let freeSpace = 0;
    // 系列数
    let series_count = this.options.data.Y.length;
    // 每一条数据的宽度
    let series_width = 0;
    // 每一条数据的left值
    let series_left = null;
    // 根据系列数来调整样式
    if (series_count < 3) {
        series_width = 28;
        freeSpace = (100 - (series_count * 30)) / 2;
        series_left = 30;
    } else if (series_count >= 3 && series_count < 6) {
        series_width = 18;
        freeSpace = (100 - (series_count * 20)) / 2;
        series_left = 20;
    } else {
        series_width = 100 / (series_count - 1);
        freeSpace = 100 / series_count;
        series_left = 0;
    }
    let seriesHTML = '';
    for (let j = 0; j < series_count; j++) {
        // 边框颜色高亮
        let borderColor = this.lightColor(this.options.color[j]);
        let left = null;
        if (series_left > 0) {
            left = series_left * j + freeSpace;
        } else {
            left = freeSpace * j;
        }
        // 设置初始样式
        setStyle('ew-charts-zone > div bar.bar-' + (j + 1) + "{width:" + series_width + '%;background-color:' + this.options.color[j] + ';border-color:' + borderColor + ';left:' + left + '%;box-shadow:0 0 5px ' + this.options.color[j] + ';}', j);
        // 设置悬浮样式
        setStyle('ew-charts-zone > div bar.bar-' + (j + 1) + ':hover{box-shadow:0 0 15px ' + this.options.color[j] + ';}');
        seriesHTML += '<bar class="bar-' + (j + 1) + '"></bar>'
    }
    setStyle("ew-charts-zone > div[class*='zone-']{ width:" + series_unit + "%;margin-left:1%;margin-right:1%;}");
    for (let i = 0; i < zoneLen; i++) {
        chartsZoneHTML += "<div class='zone-" + (i + 1) + "'>" + seriesHTML + "</div>";
    }
    chartsZone.innerHTML = chartsZoneHTML;
    let dataY = this.options.data.Y;
    // 延迟设置高度
    setTimeout(() => {
        for (let k = 0; k < zoneLen; k++) {
            for (let l = 0; l < series_count; l++) {
                // 获取bar元素
                const bar = chartsZone.children[k].children[l];
                // 设置class类名,方便设置样式规则
                bar.classList.add('dataId-' + (k + 1) + '-' + (l + 1));
                // 设置值,方便后续的悬浮操作显示值
                bar.setAttribute('data-value', dataY[l][keyValue][k]);
                // 设置高度
                setStyle('ew-charts-zone > div bar.dataId-' + (k + 1) + '-' + (l + 1) + '{height:' + (dataY[l][keyValue][k]) / currentMaxValue * 100 + '%;}', l);
            }
        }
        // 绑定悬浮事件
        let bar = this.$('ew-charts-zone div bar', false);
        [].slice.call(bar).forEach((item) => {
            item.onmouseenter = function () {
                let value = this.getAttribute('data-value');
                this.innerHTML = "<span class='animation'>" + value + '</span>';
            }
            item.onmouseleave = function () {
                this.innerHTML = '';
            }
        })
    }, 0);

}

最后就是完成图注部分了,如下所示:

/**
 * 设置图注
 */
ewCharts.prototype.resetChartsLegend = function (dataLegend, setStyle) {
    let legendHTML = "";
    //图注数据的属性名
    let keyName = Array.isArray(dataLegend.keyName) && dataLegend.keyName.length === 2 ? dataLegend.keyName[0] : 'label';
    for (let i = 0, len = dataLegend.Y.length; i < len; i++) {
        let borderColor = this.lightColor(this.options.color[i]);
        setStyle("ew-charts-legend > i.leg-" + (i + 1) + "{ background:" + this.options.color[i] + ";border-color:" + borderColor + ";}", i);
        legendHTML += "<i class='leg-" + (i + 1) + "'></i><span>" + dataLegend.Y[i][keyName] + "</span>";
    }
    this.$('ew-charts-legend').innerHTML = legendHTML;
}

接下来,调用这个封装好的函数,如下所示:

/**
* 功能:调用统计图表功能
**/
/************************************************/
/* DOM加载完毕后执行(多媒体资源尚未开始加载) */
/************************************************/
document.onreadystatechange = function(){
    if(document.readyState == "interactive"){
        let ewChart = new ewCharts({
            el:"#weekCost",
            color:["#07bc85","dd2345","#346578","#ff8654","#998213"],
            data:{
                X:['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
                Y:[
                    {
                        name: '直接访问',
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: '邮件营销',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '联盟广告',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: '视频广告',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: '搜索引擎',
                        data: [862, 1018, 964, 1026, 1679, 1600, 1570]
                    },
                ],
                keyName:['name','data']
            }
        });
        console.log(ewChart);
    }
}

嗯,一款柱状图表就大功告成了,由于每一部分的功能我都做了注释,所以不需要做详解,如有问题欢迎联系我,如果发现bug,也欢迎提issue,项目地址为:my-web-projects,如有帮助,望不吝啬star

查看原文

赞 1 收藏 1 评论 0

夕水 回答了问题 · 6月19日

解决js数组对象的处理

转换成时间戳的思路很好,以下是我的写法:

/**
* 将时间转换成时间戳,仅小时与分钟的转换,如7:03,21:00之类的时间
* @param {*} value 
*/
let filterTime = function (value) {
    const hour = Number(value.slice(0, value.indexOf(':')).replace(/^0/, '')) * 60 * 60 * 1000;
    const minute = Number(value.slice(value.indexOf(':') + 1, value.length).replace(/^0/, '')) * 60 * 1000;
    return hour + minute;
}
/**
* 判断时间段是否交叉
*/
let judgeDate = function (timeArr,startTime,endTime) {
    for (let i = 0, len = timeArr.length; i < len; i++) {
        let start = timeArr[i], end = timeArr[i];
        //满足可以修改的时间段只有两种情况,即开始时间和结束时间都小于等于已知时间段与开始时间大于已知时间段的结束时间,但结束时间需要小于等于
        //已知时间段的开始时间
        if (filterTime(startTime) <= filterTime(start) && filterTime(endTime) <= filterTime(start)) {
            return true;
        } else if (filterTime(startTime) >= filterTime(end)) {
            return true;
        }
    }
    return false;
}
if(!judgeDate()){
    console.log('时间交叉')
}

关注 4 回答 4

认证与成就

  • 获得 297 次点赞
  • 获得 24 枚徽章 获得 1 枚金徽章, 获得 7 枚银徽章, 获得 16 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

注册于 2018-04-08
个人主页被 2.4k 人浏览