易函123

前言在前端开发中会遇到一些频繁的事件触发，比如： window 的 resize、scroll mousedown、mousemove、mousewheel(鼠标滚轮) keyup(弹起键盘)、keydown(按下键盘)、keypress(按下字符键盘)…… 想象一下窗口的 resize 事件或者是一个元素的 onmouseover 事件 - 他们触发时，执行的非常迅速，并且触发很多次。如果你的回调过重，你可能使浏览器死掉。 这就是为什么要使用防抖。 原理 防抖的原理：在 wait 时间内，持续触发某个事件。第一种情况：如果某个事件触发 wait 秒内又触发了该事件，就应该以新的事件 wait 等待时间为准，wait 秒后再执行此事件；第二种情况：如果某个事件触发 wait 秒后，未再触发该事件，则在 wait 秒后直接执行该事件。 通俗一点：定义 wait=2000，持续点击按钮，前后点击间隔都在 2 秒内，则在最后一次点击按钮后，等待 2 秒再执行 func 方法。如果点击完按钮，2 秒后未再次点击按钮，则 2 秒后直接执行 func 方法。 示例代码代码一(根据原 ...

1234567891011121314series:[ { type: 'line', connectNulls: true,//无数据是是否连线 stack: 'Total', symbol: 'circle', //拐点样式 symbolSize: 4, //拐点圆大小 itemStyle: { color: '#292B37', //拐点内圆颜色 borderColor: '#5B5E74', //拐点外圆颜色 width: 2, //拐点内圆大小 }, }]

1234567891011121314151617181920212223242526272829303132series:[ { type: 'bar', stack: 'Total', itemStyle: { borderRadius: [4, 4, 4, 4], // 圆柱 color: function (params) { //首先定义一个数组 const colorList = [ { x: 0, y: 1, x2: 0, y2: 0, colorStops: [{ ...

无拐点123456789series: [ { data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true, //关键点，为true是不支持虚线的，实线就用true symbolSize:0, // 折线拐点圆的大小 }] 折线线型1234567891011121314series: [ { data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', lineStyle:{ width:2, type:'dotted' //'dotted'虚线 'solid'实线 'dashed'虚线 }  ...

1234567891011121314series:[ { type: 'line', connectNulls: true,//无数据是是否连线 stack: 'Total', symbol: 'circle', //拐点样式 symbolSize: 4, //拐点圆大小 itemStyle: { color: '#292B37', //拐点内圆颜色 borderColor: '#5B5E74', //拐点外圆颜色 width: 2, //拐点内圆大小 }, }]

1234567891011121314151617series:[ { type: 'bar', stack: 'Total', itemStyle: { borderColor: bgColor, borderRadius: [4, 4, 4, 4], // 圆柱 color: bgColor }, emphasis: { itemStyle: { borderColor: bgColor, color: bgColor } }, }]

图例选中状态表。 12345678legend:{ selected: { // 选中'系列1' '系列1': true, // 不选中'系列2' '系列2': false }} 使用 1234567legend: { show: true, selected: { '1星': true, '2星': true, '3星': true, '4星': false, '5星': false }, bottom: 0},

123xAxis:{ boundaryGap: false, // 不留白，从原点开始}

示例1234567grid: { top: '3%', left: '12%', right: '0%', bottom: '3%', containLabel: true}, echarts 组件离容器左侧的距离。 containLabel:containLabel 为 false 的时候：grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是由坐标轴形成的矩形的尺寸和位置。这比较适用于多个 grid 进行对齐的场景，因为往往多个 grid 对齐的时候，是依据坐标轴来对齐的。 containLabel 为 true 的时候：grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变 ...

设置了两条基准线1234567891011121314151617181920212223242526272829303132333435markLine: { symbol: "none", data: [{ label: { width: "30", position: 'start', formatter: t('sleepManage_cycle.sameChart.rs'), fontSize: '10', color: '#86899D', overflow: 'break', }, silent: false, lineStyle: { type: "das ...