Dnn01-优快云博客

在前端中，可以通过 CSS 和一些简单的样式调整来实现，同时保持页面可滚动。这通常涉及到在容器内部创建滚动区域，并隐藏默认的滚动条样式。下面是实现这一效果的基本步骤：1.创建一个滚动容器元素，使其包裹需要滚动的内容。2.通过 CSS 隐藏默认的滚动条样式，并设置容器的高度、宽度以及 overflow 属性来实现滚动效果。

2024-01-17 15:36:57 808

原创 vue中，使用echarts，一开始图表显示，切换页面后图表不显示。

【代码】vue中，使用echarts，一开始图表显示，切换页面后图表不显示。

2023-12-13 16:31:47 1247

原创 vue3 动态引入图片时require is not defined

【代码】vue3 动态引入图片时require is not defined。

2023-12-11 11:28:27 1270

原创 el-popconfirm和el-button标签一起使用不起作用，已解决。

el-popconfirm不起作用

2023-10-27 11:28:16 614 1

原创 this.$router.push跳转页面网址闪烁，页面不跳转或者很慢，已解决

router跳转页面闪烁不跳转

2023-10-27 11:12:11 1139 1

原创使用云效管理代码，推代码时报Https克隆账号或密码错误，已解决

Https克隆账号或密码错误

2023-08-10 16:24:41 2726 2

原创 2023第一记--安装node最新版本遇到的问题：npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。

安装node最新版本后启动项目，报错：npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。

2023-02-08 11:40:27 380

前段时间做人物关系图，先在echarts上面找组件做，但是感觉不是给很丰富，后来发现了一个做人物关系图的好东西：Relation Graph 里面有各种各样的关系图，非常好用。Relation Graph官网链接: Relation GraphRelation Graph官网人物关系图链接: Relation Graph 人物关系图下面是人物关系图的用法，使用起来也非常简单：第一步：我们安装Relation Graphnpm install --save relation-graph第二

2021-08-30 15:39:47 3784 2

原创 vue项目中使用DataV组件做排名轮播表

今天做轮播排名，发现了很好用的插件DataV，代码非常简单，在页面中直接引用标签，直接在data里面写数据就就行了。下面是基本用法。第一步：我们先安装DataVnpm install @jiaminghi/data-view第二步：在main.js里面全局注册DataV// 将自动注册所有组件为全局组件import dataV from '@jiaminghi/data-view'Vue.use(dataV)第三步：就可以在页面里使用啦...

2021-08-30 15:17:25 8646 10

原创 Echarts 地图中地点轮播

今天做了个上海地图，要求自动轮播每一个区，本来以为会很难搞，但是去网上看了看，复制粘贴就搞定了，以此记录下，方便以后查找。第一步：我们在页面中引入echarts和所需的依赖import echarts from "echarts";import "echarts/map/js/province/shanghai.js";第二步：我们要准备一个有宽高的dom<div class="visual_chart" id="main1"></div>第三步：在methods里

2021-08-30 14:50:46 1231 1

原创 echarts 有两种图时怎么让第二个图的值参考右边坐标轴？

echarts 有两种图时怎么让第二个图的值参考右边坐标轴？在echarts中，有时会有两种图出现展示数据，这是怎么让第二个图的值参考右边坐标轴呢，一个配置项就可以搞定。情况如图：此时，柱状图参考的是左边的y轴，但是，点状图参考的也是左边的y轴，我们只需要在点状图的serise里面设置yAxisIdnex:1,它就能参考右侧坐标轴啦。...

2020-11-09 17:58:53 1587 1

原创 echarts 折线图折线从头开始

在echarts折线图中，默认折线从刻度中心开始，我们为了图标的美观有时需要折线从头开始显示，一个配置项就可以轻松搞定。boundaryGap:false

2020-11-02 16:25:23 6163

原创 vue 生命周期函数小tips

vue 实例生命周期钩子每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。生命周期不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。1.生命周期钩子的 this 上下文指向调用它的 Vue 实例。2.destroyed钩子函数有一点一定要特别注意：在执行destroy方法后，对

2020-10-20 15:49:50 298

原创 echarts x轴数据过多左右滚动显示

echarts x轴数据过多左右滚动显示今天在使用echarts做柱状图时，遇到x轴数据过多的情况，全部显示的话，柱状图都挤到一起了。所以想让它可以显示一部分，其余部分滚动显示，就可以配置dataZoom，它与xAxis、yAxis并列，简单配置后，就可以实现x轴刻度左右滚动了。代码如下：dataZoom: [ { type: "slider", show: true, xAxisIndex: [0],

2020-10-20 15:38:44 9305

原创 echarts y轴刻度加单位

echarts y轴刻度加单位今天学习到的新知识，如何在echarts图表中给刻度加单位。方法有很多，我用的是formatter来加单位的：yAxis: { min: 0, max: 60, type: 'value', axisLabel:{ formatter:'{value} 亿'， } } 另一种方法是,在Y轴顶部,使用title来说明y轴的含义数据的就行:option = {

2020-10-20 14:55:02 14772

原创 echarts 图表和字体自适应浏览器窗口

echarts 图表和字体自适应浏览器窗口在使用echarts做图表的时候，更换设备或者缩放浏览器窗口大小时，需要自适应浏览器窗口。 1. 自适应浏览器窗口，在setOption后引入下边window.onresize...即可。//根据窗口的大小变动图表 window.onresize = function () { myChart.resize(); //myChart1.resize(); //若有多个图表变动，可多写 }; 2. echerts字体自

2020-10-15 14:28:20 865

原创 echarts 柱状图数据堆叠放置

echarts 柱状图数据堆叠放置在使用echarts做柱状图时，有时会需要多个柱状图堆叠，这种情况下想要tooltip显示堆叠的柱状图各自的值，可以通过设置stack属性来实现。代码如下：var option = { series:[ { name:"柱状图1", stack:"xxx", }, { name:"柱状图2", stac

2020-10-10 10:48:12 2060

原创 echarts 通过grid属性调整图表位置

echarts 调整图表位置关于图表的位置，之前在论坛上看到一张图，感觉挺清晰明了的，分享给大家，希望能对大家有所帮助。代码如下： option = { tooltip: {}, grid:{//图表位置 x:25,//左 y:45,//上 x2:25,//右 y2:20,//下

2020-10-09 15:50:52 2063

原创 echarts 环状图中添加图片

echarts 环状图中添加图片由于业务需要，我们可以在饼图内加入图片、图标或文字等让单调的饼图变得美观，这里我是在环状图里添加图片。代码如下：option = { graphic: {//图形中间图片 elements: [{ type: "image", style: { image: require("image/abc.png"),//你的图片地址

2020-10-09 15:40:20 5375 3

原创 echarts x轴刻度文本过长怎么解决？

echarts x轴刻度文本过长怎么解决？在echarts中，x轴刻度文本过长时，默认会挤在一起显示，这样就看不清刻度文本了，解决方式有好几种，我采用的是在xAxis.axisLabel中使用formatter回调函数让其换行显示。代码如下：axisLabel : { formatter : function(params){ var newParamsName = "";// 最终拼接成的字符串

2020-10-09 15:10:24 1169 2

原创 echarts 地图tooltip提示框超出浏览器窗口怎么隐藏？

echarts tooltip提示框超出浏览器窗口怎么隐藏？在使用echarts做图时，发现tooltip默认会超出浏览器窗口外，刚开始想做边境检测，试着写了一些代码发现太麻烦了，需要上下左右做多次判断。最后发现了一个简单快捷的方法，分享给大家。就是在tooltip里配置confine:true,这样当tooltip就不会超出浏览器窗口啦。...

2020-10-09 11:38:47 1321

空空如也

空空如也