vue使用随笔

一、vue-cli中引用echarts，自定义echarts中工具toolbox中下载图标

import png from '@/assets/images/download.png';

... ...


toolbox: {
    feature: {
        saveAsImage: {
            icon: 'image://' + png,
        }
    }
},

... ...

 二、vue打包css文件中背景图片的路径问题

vue-cli--build--utils.js

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath:'../../'  // 添加这条
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

vue单文件组件<style lang="sass">

.table-download
    display: inline-block
    vertical-align: middle
    margin: 0 10px 0 30px
    width: 28px
    height: 28px
    background: url("../../assets/images/download.png") no-repeat
    background-size: 28px
    &:hover
        background-image: url("../../assets/images/on-download.png")

 使用echarts格式化标签时，发现返回了标签但是并没有显示（很郁闷~.~）,应该是echarts内部的处理逻辑问题

                        let flag = 0;
                        option.xAxis.axisLabel.formatter = function (value, index) {
　　　　　　　　　　　　　　　　　console.log(value); // 发现循环了两次
  
                            let tvalue = parseInt(value);
                            if (index === 0 || index === dataLength - 1) {
                                flag = 0; // 关键点，在数据第二次循环时重置0
                                return '';
                            } else if (t >= 30) {
                                if ((tvalue - flag) >= 10) {
                                    flag = tvalue;
                                    return tvalue;
                                }
                                return '';
                            } else {
                                if ((tvalue - flag) >= 5) {
                                    flag = tvalue;
                                    return tvalue;
                                }
                                return '';
                            }
                        };