carbonzhao的专栏

本文介绍了在Vue项目中使用ECharts 4.9绘制中国地图及散点图的方法。首先通过npm安装指定版本，在main.js全局引入ECharts。然后导入中国地图JSON数据并注册为"china"地图。通过geo组件配置基础地图，或使用map图表类型实现地图展示。重点演示了如何在地理坐标系上叠加散点图，通过设置series的coordinateSystem为"geo"，并配置坐标数据实现城市标注。文末提供了完整的代码示例，包括模板结构、JS逻辑和样式设置，实现了具有交

页面表单，有时候我们想着最左侧的应该合理整齐的左对齐，右侧的表单都是右对齐，这样页面看起来会整洁很多。需要注意的是我使用的是栅格cl-row/col布局，你使用的什么就使用什么父元素来筛选。二、右对齐时，最左侧一列又显示凌乱。一、左对齐时，中间出现过多空白。如下页面表单，展示后就很丑。三、修正样式后看起来舒服多了。

2.通过import引入的外部css文件，这种引入方式是全局的，也会影响其他组件的页面样式。里面css样式，如果标签内不加scoped可能会影响其他组件的样式。//所以可以通过一下方法引入，则不会影响其他组件的页面样式。

经过分析发现el-popover及el-radio__original有aria-hidden属性，具体aria-hidden属性应用自行搜索了解。在使用el-popover和el-radio-group实现弹窗选择数据后调用el-popover的doClose()方法时一直报错！给el-popover添加@show="popshow"方法，显示后移除相应的属性！世界一下子干净了好多。

给el-tree结构配置一下props，注意！:props="defaultProps"查阅官方文档如下描述，支持bool和函数回调处理，这里咱们选择更灵活的函数回调实现。这4个并没有下级节点，即它并不是叶子节点，就不需求展示前面的三角展开图标!完成后，刷新页面显示正常，不再给用户制造操作误途。

tags用于默认值的回调，changed事件用于组件数据发生变化时的回调通知。组件本身也比较简单，没有啥值得去细分和品评的技术点。又来分享一点点工作积累及解决方案。

之前实现过的简单的条件树功能如下图：经过最新客户需求确认，上述条件树还需要再次改造，以满足正常需要！

【代码】VUE echarts 教程七 折线图 自定义样式。

【代码】VUE echarts 教程六 动态排序折线图。

本文介绍了 JavaScript 中常用的 40 种语法糖，涵盖变量声明、对象操作、函数简写和现代语法特性等多个方面。掌握这些语法糖，可以使代码更简洁、更易读，并提升开发效率。我们鼓励大家在实际项目中尝试这些技巧，感受它们带来的便利。现在，请思考一下：你在日常开发中还遇到过哪些让你惊艳的语法糖？欢迎在评论区分享你的经验和见解，让我们一起进步！

【代码】VUE echarts 教程四 双变量关系图。

【代码】VUE echarts 教程三 凹凸图。

【代码】VUE echarts 教程二 折线堆叠图。

拆线内部填充：面积图。

客户那边文档相当的多，目前需要协助其将文档转为数据写入数据库，并与其他系统进行数据共享及建设，所以不得不搞一个识别的功能，用户上传PDF文档后，对于关键信息点进行识别入库！页面整体代码，包含一些测试数据，我没有删除，你自己进行分析删除即可.以下为核心代码，直接分享，到中午吃饭时间了，就大概分享一下。以上是核心代码，绑定点击及拖动事件绘制待定区域！

给最后一个元素塞入5行6列的数据，因为VUE本身就是MVVM，即我们好数据，对数据进行直接操作时，页面则会动态渲染。数据定义，元素从左到右均在数组中定义，只有最后一个元素时，才会显示自定义宫格功能，所以，数据仍然定义在其child中，注意其他元素并没有child。页面动态布局经常性要交给客户来操作，他们按时他们的习惯在同一个屏幕内显示若干个子视图，尤其是在医学影像领域对于影像的同屏显示目视对比显的更为重要。我使用的elmentUI,其主题默认是白色，我根据页面修改了组件的样式：你想改就改，不改就忽略。

灯红酒绿总有人看着眼杂，但将风格统一终究是上上选择。下面来处理这个问题。这样漂亮的页面，搭配的却是一个白色风格的下拉框 ，这也过于刺眼。1、修改触发框的样式，将边框、背景颜色置为匹配的颜色。给el-select添加popper-class。第二部分：是修改弹出的popover的样式。2、修改弹出的popover的样式。添加CSS样式修改对应的UI样式。第一部分：是修改触发框的样式。

修改默认样式如下：这里减40的目的是将eltable的header高度减掉，控制它的可视区域，让横向滚动条常显在底部。又遇到了难受的问题，el-table嵌入在一个div里面，结果因为内容太多,横向、纵向我都得滚动查看！结果发现横向滚动时只能让它纵向触底后才能进行横向操作，这就很变态，明显不符合用户操作习惯。要先纵向触底再进行横向操作，这。这样横向、纵向操作就没问题了，互不影响。

DICOM是医学图像和相关信息的国际标准，它定义了满足临床需要的可用于数据交换的医学图像格式，被广泛用于放射、成像的诊疗诊断设备。也就是说，在医院放射科使用的设备上读取的影像基本都是DICOM格式，包括CT、MRI、超声等的讲解及技术规范。咱就不展开讨论了，网上一堆，大家去查阅即可。我就在想，区域链、人工智能、AI等等这些喙头啥时候是个头儿。咱的项目基本都是趋于实战，很少讲原理，因为有些原理讲起来可能我就没那么多心血来写作了，那么大篇幅的进行整理及输出。细节的代码注释则不进行讲解了，自己研究查看。

经过调整后，嗯，好看了很多。咱就说这样的左右间距丑不丑。

【代码】vue2之css 滚动条设置（颜色、宽度、滑块等）

我本想着给他安装node.js、vscode、mysql，按照我开发过程中运行系统的方式让他运行，等我开发完成后，我才发现这样的操作体验就是一场灾难，他上班后每天就是开机，打开vscode点击run dev，然后去执行脚本运行node写的服务！这样的使用体验真的是一场灾难！:你项目终端运行的命令参数，如果是npm run dev这里就是dev，如果是npm run serve这里就是serve，你自己根据实际填写。：项目脚手架脚本，因为我项目使用的是Vue_cli创建的，所以，我指向VUE的脚本。

‌。

即加号、减号点击就是在年月日显示进行切换。给Scrollview添加了鼠标滚动事件：当切换日期显示时滚轮滚动时，scrollview的滚动条没有反应，就很奇葩。因scrollview内的内容不断的进行变化，他的contentsize也是动态变化，但此时当切换后鼠标滚轮无法触发Scrollview的滚动条一块儿跟着滑动。有以下功能逻辑，实现了一个时间轴组件，点击+、-号向地图那样放大组件以显示不同的UI。修正方案为：强行更新scrollview，出现的问题随之修复。

elementUI的日期组件，有完整的UI样式及弹窗，但是我的页面不要它的UI样式，点击的时候却要弹出类似的日期选择器，那怎么办呢？这是我的项目中要用到的UI风格：区别在于我不需要它的输入框来触发！以下是elementUI自带的UI风格，一定要一个输入框来触发。

最近又搞了个小项目，单机版本的内部考勤管理系统，直接部署在对方的工作电脑上，不需要在云端部署，因为项目本身就小，我就没配置后端同事进行开发，而是通过VUE直连mysql进行业务开发及保存。后期再通过PM2来守护页面及服务，随时打开使用。下面来复盘一下整体开发过程。

再次使用多个span标签来显示组合的文本消息，因为span标签是行元素，所以多个会被渲染在同一行，并且根据你给出的样式进行渲染！它的作用就是告诉msgBox从这儿开始换行，充分利用P标签是块标签(独占一行)来进行内容的行切换。看这个效果是不是很炫？突出重点提示内容，对于用户交互相当的棒！

当然因为B页面有可能还有其他子级页面等，根据根据相应的逻辑完善这块儿的逻辑即可！B页面：path: '/project/researchGroup',2.在router文件下的index.js中，添加meta节点并新增。A页面：path: '/project/add',

也不知道从什么地方或者是什么人才的显示器还是老年痴呆机，将代码缩进设置为2，倒逼一部分开发人员将缩进全部改为2，让我看着极其的烦躁不舒服！那你赶紧滚出IT编码界吧，丑了八唧的缩进2，也不知道是怎么看着顺眼的！执行完成 上述后，随便打开一个页面文件，看看这个丑了八唧的页面！1、搜索： Detect Indentation找到如下选项，取消勾选！在页面文件中右键后选择Format Document！如果展示：这看着不舒服吗？3、打开你的项目，找到如下文件：统统改为4。4、找到你项目的如下文件：统统改为4。

完成 后再次运行相应的命令即可！

最近做小程序，有这么一个小需求，列表行上所能放的子元素的数量是不固定的，这就要求需要动态的为当前行处理动态width，如下页面显示：注意这里需要声明一下，为了避免频繁的写重复的dom,我将页面高度抽象化，所有显示项放在数据中可配置：如下：根据不同的type给一个固定的dom就行了，同一个页面，input输入框显示是一样的，下拉显示是一样等！！！这样我只需要在页面上做几个不同的if分支即可，根据type渲染不同的但却行为高度一致的行UI！这里本可以直接给性别分别50%就完事了，但为了精益求精，

<input class="value-lable big-width" data-id="code" key="code" type="text" :value="stepData.code" placeholder="请输入" @blur="textFieldInputed" />代码如上，同学们注意观察，input动态绑定了:value来显示默认值，当你将，当你在textFieldInputed方法内监听输入的文字是否有效时，就会出现问题。如果有效，则输入的文本允许显示出来，.

Vue好不好？呵呵，也许好，也许不好。那他的语义定义好不好？只能说马马虎虎。心情不好点，可以说，那就是灾难看如下：父向子组件传递参数过来，使用v-bind指令，我说去你大爷！使用砣峰式，页面啥也不渲染！！页面空白！不知道为啥？这种低等的BUG，能出现在一个相对成熟的框架中，也是有些恶心到人。再看如下：子组件向父传递回调，尼玛，V-ON后面的方法出现驼峰时，根本无法回馈到父方...

如下截图及源码，可以跑起来看看效果，select的双向绑定，指定v-model键就可以，内部的option被选中后，对应的值就会透传到select的v-model指令中。使用的时候，取其值就可以。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...