rogerwang@f2e-CSDN博客

原创 echarts图表legend高度自适应

4、获取legend总高度 = 行数乘以每行的高度，legendRowNum * perLegendWidth。3、获取legend行数，legendRowNum = legendWidth / chartWidth。echarts图表的类目数据最多可以自适应到两行，超过两行的时候，会跟X轴坐标产生重叠。图表总高度 = grid + 间隙1 + legend + 间隙2 + dataZoom。2、获取每个legend条目的宽度和间隙总和 legendWidth。1、获取图表总宽度 chartWidth。

2023-06-02 17:51:29 1842

原创 echarts 指示线markLine

echarts折线图添加竖向指示线markLine。

2023-04-18 18:40:01 2550

原创 echarts 鼠标紧挨着tooltip提示框

鼠标悬浮在图例上时，tooltip提示框出现的位置紧挨着鼠标。

2023-04-18 18:36:29 411

原创 echarts 点击tooltip提示框内容或链接

鼠标移入tooltip提示框，并点击或复制tooltip提示框里面的内容。

2023-04-14 18:21:27 667

原创 echarts图表转图片

echarts图表转图片

2023-03-31 14:47:24 465

原创 echarts设置多个legend样式

echart设置多组legend

2022-01-07 18:11:02 11518 4

原创 echarts legend 使用formatter和rich自定义样式

echarts legend 使用formatter和rich自定义样式需要实现的效果：代码：// 需要加标签的label名称const labelMark = '产品名称2'...legend: { itemGap: 20, formatter (label) { // markLabel为是否打标签的变量，这里定义两种文本块：labelName和labelMark return labelMark === label ? `{labelName|${labe

2021-09-24 18:17:12 12259 3

原创 Dialog

简单实现一个dialog，包含标题、内容、取消事件、确认事件jsclass Dialog { constructor({ title, content, cancelCb, confirmCb } = {}) { this.title = title; this.content = content; this.cancelCb = cancelCb; this.confirmCb = confirmCb; thi.

2021-08-31 22:34:43 130

原创 html转pdf之使用Paged.js加页眉页脚

目录前言一、Paged.js是什么？二、使用三、效果图总结前言项目中需要对一个动态渲染的长html页面进行pdf导出，导出样式要求每隔一个a4纸的高度加上头和尾，最终的效果就是导出的每一页pdf都含有完整的页眉和页脚样式。简单的html布局和css没法实现该效果，有考虑用canvas做固定间隔的画布但方案和技术掌握尚不成熟只能待日后再尝试，最终使用Pageed.js实现了功能。一、Paged.js是什么？Paged.js是一个免费的开源JavaScript库，它在浏览器中对内容进行

2021-08-19 00:30:29 4641 11

原创 vue-cli4+element-ui开发配置之 less全局变量variable和mixins配置

目录一、webpack设置：vue.config.js二、less全局变量：variable & mixins使用less写样式的时候，为了方便全局调用样式常量和样式代码块，可以进行全局的样式配置。一、webpack设置：vue.config.jsmodule.exports = { ..., chainWebpack: (config) => { const types = ['vue-modules', 'vue', 'normal-modules', '

2021-07-12 23:19:07 523 2

原创 Promise对象和async函数的使用场景

目录一、接口请求结果的处理二、解答面试题总结前端编写代码过程中经常会使用Promise搭配async实现异步编程，这里简单记录下二者搭配使用的几种场景。一、接口请求结果的处理/** * 模拟接口请求（接口请求支持promise的前提下） * @param key 模块参数 */function fakeQuery (key) { return new Promise((resolve, reject) => { const responseDuratio

2021-07-12 22:42:06 281

原创使用postcss实现移动端响应式单位设置

目录前言一、依赖的npm插件二、配置postcss.config.js文件三、开发配置新增postcss-loader总结前言最近工作中有个移动端的项目是用px布局的，非响应式。要实现单位响应式，大量px布局的样式文件，改rem的话比较麻烦，因此尝试了postCss自动转换响应式单位的方案。一、依赖的npm插件autoprefixerpostcsspostcss-cssnextpostcss-importpostcss-loaderpostcss-modules-valuespos

2021-07-06 23:31:21 562

原创 css3扇形及简单动画

css3扇形html<div class="sector"></div>css.sector { display: inline-block; border-top: 50px solid #F0A548; border-left: 25px solid transparent; border-right: 25px solid transparent; border-top-left-radius: 50%; border-top-right-radius:

2021-07-06 21:58:29 358

原创 vue-cli4+element-ui开发数据系统随笔

后台管理系统开发心得文章目录后台管理系统开发心得前言一、技术选型二、项目搭建总结前言本文章主要记录最近做一个后台管理系统的一些体会和心得，从技术选型到CRUD到数据可视化等功能丰富。一、技术选型开发框架：Vue 考虑到公司前端技术栈主要以react为主，想丰富拓展下Vue方面的项目，所以前端框架选用Vueui组件：element-ui、antd(备选)样式：less 状态管理：vuex 接口请求：axios 可视化：echarts 图标：iconfont 二、项目搭

2021-07-01 22:36:25 126

原创 js树形结构和扁平数组相互转换

some utils树结构扁平化偏平数组树状化树结构扁平化/** * 把嵌套数组转成平铺数组 * @param data <Array> * @param childName <String> 子集节点的名称 * @return newData <Array> */const flatTree = (data, childName = 'children') => { if (!Array.isArray(data)) { c

2021-07-01 21:29:38 1115

原创初探Javascript中的装饰器

目录js装饰器概述作用于类的装饰器作用于类属性的装饰器js装饰器概述装饰器decorators，用于在不同的类之间进行属性或行为的共享和扩展。作用于类的装饰器/** 定义一个作用于类的装饰器 */function log (target) { target.log = (msg) => { console.log(msg) } return target}@logclass Utils { // ...someMethods}Ut

2021-06-24 00:31:59 159

原创 js快速排序

/** js数组二分法快速排序 */ function quickSort (arr) { if (!arr || arr.length <= 1) { return arr } const midIndex = Math.floor(arr.length / 2) const midNum = arr.splice(midIndex, 1)[0] const leftA.

2021-06-23 23:09:36 80

转载 Git 常用命令

Git 常用命令速查git branch 查看本地所有分支git status 查看当前状态git commit 提交git branch -a 查看所有的分支git branch -r 查看远程所有分支git commit -am “init” 提交并且加注释git remote add origin git@192.168.1.119:ndshowgit push origin master 将文件给推到服务器上git remote show origin 显示远程库origin里的资

2021-06-23 22:58:29 125

转载 Mac终端 vi/vim 的简单使用

Mac终端 vi/vim 的简单使用vi/vim 的使用命令模式：输入模式底线命令模式：vi/vim 使用实例vi/vim 的使用基本上 vi/vim 共分为三种模式，分别是命令模式（Command mode），插入模式（Insert mode）和底线命令模式（Last line mode）命令模式：启动 vi/vim，便进入了命令模式。输入模式按下i切换到输入模式，以输入字符。x 删除当前光标所在处的字符: 切换到底线命令模式，以在最底一行输入命令 ENTER(回车键)

2021-06-23 22:45:10 645

原创修改webstorm的运行内存避免卡顿

调整webstorm的运行内存避免卡顿一、用终端打开内存配置文件二、编辑运行内存值三、重启webstorm应用最新配置webstorm是一款功能强大的前端开发编辑器，但经常会出现由于内存不足导致的卡顿或死机，笔者一般是通过调大运行内存来解决该问题，具体步骤如下：一、用终端打开内存配置文件在终端输入vim /Applications/WebStorm.app/Contents/bin/webstorm.vmoptions出现显示界面，默认是128m-750m，可根据设备情况自定义修改。二、编辑运行内

2021-06-23 22:26:17 4470

RogerWang_H5的博客