2020-9-18 svg 防抖 echart resizeL = lineto 需要两个参数，分别是一个点的x轴和y

svg path

链接

M = moveto 移动到的点的x轴和y轴的坐标

L = lineto 需要两个参数，分别是一个点的x轴和y轴坐标，L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段。

H = horizontal lineto 绘制平行线

V = vertical lineto 绘制垂直线

C = curveto 三次贝塞尔曲线

S = smooth curveto 简写的贝塞尔曲线命令S

Q = quadratic Bézier curve 二次贝塞尔曲线

T = smooth quadratic Bézier curveto 简写的贝塞尔曲线命令

A = elliptical Arc 弧形

Z = closepath 从当前点画一条直线到路径的起点

以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

<path d="M861 578 L946 529 Q956 520,946 512  L894 482 "
      id="PATH_3"  
       stroke="rgb(78,77,63)"
       stroke-width="2"
       fill="none"
 />

<image xlink:href="../assets/line.png" style="width:30px" >
   <animateMotion

     dur="10s"   //耗时

     repeatCount="indefinite"    //重复次数 无限

     rotate="auto"   //旋转方式

     path="M394 596 L497 537  Q511 529,525 537 L607 585  L717 646 Q728.5 656,740 646 L861 578 L946 529 Q956 520,946 512  L894 482 L995 423 Q1009 413,1023 423 L1063 445 Q1079 455,1090 445 L1209 375   " />

 </image>

svg 放射性渐变

画出渐变效果

链接

    <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:#68FAFD;
      stop-opacity:1" />
      <stop offset="33%" style="stop-color:#68FAFD;
      stop-opacity:1" />
      <stop offset="36%" style="stop-color:rgb(104, 250, 253);
      stop-opacity:0.5" />
      <stop offset="100%" style="stop-color: rgb(104, 250, 253);stop-opacity:0.05" />
    </radialGradient>
  </defs>

画出一个圆引入渐变编辑参数

<circle cx="0" cy="0" r="8" stroke="" 
  stroke-width="2" fill="url(#grad1)"  >
   <animateMotion
     begin="0s"
     dur="10s"

     repeatCount="indefinite"

     rotate="auto"

     path="M394 596 L497 537  Q511 529,525 537 L607 585 L717 646 Q728.5 656,740 646 L861 578 L946 529 Q956 520,946 512  L894 482 L995 423 Q1009 413,1023 423 L1063 445 Q1079 455,1090 445 L1209 375  " />

 </circle>

防抖

链接需求:echarts图表需要根据页面宽度的变化来调整大小

const delay = (function () {
 let timer = 0
 return function (callback, ms) {
  clearTimeout(timer)
  timer = setTimeout(callback, ms)
 }
})()

export default {
methods：{
fn() {
   delay(() => {
    //执行部分
   }, 500)
}
}
}
</script>

echart resize

链接

引入 element-resize-detector依赖
新建 chart.resize.js 文件

import echarts from 'echarts';
import Vue from 'vue';
import elementResizeDetectorMaker from "element-resize-detector"

export var version = '0.0.1';
var compatible = (/^2\./).test(Vue.version);
if (!compatible) {
    Vue.util.warn('vue echarts resize directive ' + version + ' only supports Vue 2.x, and does not support Vue ' + Vue.version);
}
let HANDLER = "_vue_echarts_resize_handler"

function bind(el) {
    unbind(el);
    el[HANDLER] = function () {
        let chart = echarts.getInstanceByDom(el);
        if (!chart) {
            return;
        }
        chart.resize();
    }
    //监听window窗体变化，更新echarts大小
    //window.addEventListener("resize", el[HANDLER])
    //监听绑定的div大小变化，更新echarts大小
    elementResizeDetectorMaker().listenTo(el,el[HANDLER])
    
}
function unbind(el) {
    //window.removeEventListener("resize", el[HANDLER]);
    elementResizeDetectorMaker().removeListener(el,el[HANDLER])
    delete el[HANDLER];
}
var directive = {
    bind: bind,
    unbind: unbind
};
Vue.directive("on-echart-resize", directive)

对应的在 echarts 图上绑定一个 v-on-echart-resize

 <div id="leftEchartsLine" ref="leftEchartsLine" v-on-echart-resize></div>

引入

import elementResizeDetectorMaker from "element-resize-detector";
import "./chart.resize";

使用

mounted() {
    let erd = elementResizeDetectorMaker();
    let that = this;
    erd.listenTo(document.getElementById("leftEchartsLine"), (element) => {
      let width = element.offsetWidth;
      let height = element.offsetHeight;
      that.$nextTick(() => {
        //使echarts尺寸重置
        that.echarts.init(document.getElementById("leftEchartsLine")).resize();
      });
    });
  },