m0_74019046-CSDN博客

原创 react-类组件2

在开发中不能直接通过修改state的值来使界面发生变化，必须通过setState来修改才能使页面发生变化。使用setState修改时，，如果发生变化会覆盖原来的，然后再执行render。

2024-07-12 15:49:41 438

Class.context.Type 挂载在class的contextType 属性会被重新赋值为由React.createContext()创建的Context对象，通过this.context可以使用Context上的值。Context.Provider，每个context对象都会返回一个Provider React组件，它允许组件订阅context的变化。jsx顶层只能有一个根元素，jsx中的标签可以是单标签，也可以是双标签。在正常的dom操作中监听点击事件，监听的函数的this是节点对象。

2024-07-07 10:40:48 1022 1

原创 css 动画

3D形变函数会创建一个合成层来启用GPU硬件加速。

2024-06-22 16:22:29 337

原创 webpack--压缩，代码的拆分，tree shinking

对代码进行压缩、丑化compress中的属性：arrows: class 或者object中的函数，转换成箭头函数arguments:将函数中使用的argumens[index]转换成对应的形参名称dead_code:移除不可达的代码mangle中的属性:toplevel:默认是false,顶层作用域中的变量名称进行丑化keep_classnames 默认是false,是否保持依赖的类的名称keep_fnames:默认是false,是否保持原来的函数名称。

2024-06-11 20:38:35 878

原创 webpack-性能优化-提取css

Content Delivery Network 或 Content Distribution Network 的缩写一般把静态资源或第三方资源放到CDN上。可以在 output的publicPath配置cdn的地址，打包后所有的脚本的前缀都变为这个cdn地址了,一般不会这样使用设置externals排除需要打包的包(使用的较多)需要在index.html引入对用的js脚本。

2024-06-06 20:58:46 348

原创 echarts-series的x,y轴的规则

在二维数组中，如果里面是数字，在类目轴中解析为对应的序号，value轴会解析成具体的值。例如[1,2] 如果x轴是类目轴，1代表类目轴的第2个，匹配第二个。如果是value轴，则代表值1在二维数组中，如果里面是字符串，会在类目轴中解析同一字符串的位置，在value轴中会转化为数字，如果转化不了，则无效。例如 [“1”,2] 如果x轴是类目轴，会在x轴上找"1"这个字符串。如果为value轴，会转化为对应的数值。有些字符串如"d1",不能转换成数字的会报错。

2024-06-03 21:33:53 393

原创百度地图2

TileLayer(opts: TileLayerOptions):向地图中添加自定义图层。getTilesUrl(tileCoord: Pixel, zoom: Number) 向地图返回地图图块的网址CopyrightControl():版权控件addCopyright({id,content,bounds}) 添加版权信息。// 创建Map实例//根据当前坐标，选取合适的瓦片图});

2024-05-31 17:04:18 1032

原创百度地图1

/ 百度地图API功能// 复杂的自定义覆盖物return div;var txt = "银湖海岸城", mouseoverTxt = txt + " " + parseInt(Math.random() * 1000,10) + "套";

2024-05-30 21:31:43 1027

原创 echarts-极坐标系和单轴

polar 极坐标系的位置radiusAxis 极坐标系的径向轴angleAxis 角度轴coordinateSystem: “polar”, 指定坐标轴体系，默认是直角坐标系。series一般设为饼图barpolar 极坐标系，可以用于散点图和折线图polar. radius:极坐标系的半径polar. center ：极坐标系的中心（圆心）坐标其他属性跟xAxis基本相同。

2024-05-30 20:51:15 345

原创 echarts-dataset,graphic,dataZoom, toolbox

dataset数据集，也可以完成数据的映射，一般用于一段数据画多个图表例子：如果data为对象的形式，可以使用encode还可以使用 dimensiondimension 还可以定义多个图表可以给x,y轴都指定内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。

2024-05-29 20:38:25 396

原创 echarts性能优化

echarts数据量多的时候优化方案：渲染的数据太多时，渲染的速度会变慢。

2024-05-29 20:03:09 428

原创 echarts-象形柱图

一般的柱图都是纯色柱图，使用象形柱图可以给柱图定义自己的样式。样式的调节与柱图一样，核心在于symbol调节柱图的组成。使用symbol设置图形类型symbolRepeat:指定图形元素是否重复。设置symbolRepeat后图形会堆叠。设置 symbolSize调整大小后会有层叠的效果。

2024-05-28 21:17:54 563

原创 echarts-事件

echarts部分事件。

2024-05-28 15:57:14 454

原创 echarts- 热力图, k线图，雷达图

热力图可以看成是一种矩形的散点图。热力图的矩形受itemStyle的影响。通常配合visualmap组件来根据值的大小做颜色的变化。热力图主要通过颜色去表现数值的大小，visualMap:视觉映射组件。

2024-05-27 11:02:27 471

原创 echarts-地图

可以修改陆地，海洋的颜色bmap: {zoom: 18,stylers: {},},],},},series: [width: 1,},effect: {},data: [coords: [],},coords: [],},],},],

2024-05-26 21:47:39 1166

原创 echarts-树图、关系图、桑基图、日历图

树图主要用来表达关系结构。树图的端点也收symbol的调节没有子节点的要叶子节点leave树图中的data只能有一个数据layout：树图的布局，有正交和径向两种，默认情况下是’orthogonal’正交布局，'radial’是径向布局。:在 layout = ‘orthogonal’ 的时候，该配置项才生效，在水平方向的排列方式。取值有’LR’ （从左到右）, ‘RL’（从右到左）, ‘TB’（从上到下）, ‘BT’（从下到上）。：树图初始展开的层级（深度）。

2024-05-24 17:52:25 1060

原创 echarts-富文本，data的对象形式

在文本textStyle和axisLabel的rich中可以使用富文本，写入富文本的类名。富文本类名可以在formatter中使用。

2024-05-22 11:01:04 300

原创 echarts-饼图，散点图，漏斗图，旭日图

饼图着重表示占比。一般饼图只需要修改点。与其他图表相同，也受itemStyle的调节。相比于其他表，饼图特有的属性有 :angle系列：startAngle,endAngle,minAngle,padAngle,minShowLabelAngle,clockwise顺逆时针半径和中心 radius,center。

2024-05-22 10:53:07 888

原创 echarts-折线图与柱状图，图形的标记，堆叠

如果要画一个图标就需要在series里加一个对象。data中定义图标的数据。xAxisIndex、yAxisIndex、polarIndex(radiusAxis,angleAxis等) 用来选择使用哪条坐标轴。coordinateSystem 用来选择坐标系是什么坐标系，默认是直角坐标系。id,name用来给图表一个唯一的标识，用于setOption的更新或用id获取图表。

2024-05-21 20:58:30 1067

原创 echarts-坐标轴1

value 值类型，表示为连续的数字限制刻度的范围category 按传入的字符展示，time 时间轴，以时间作为标准。一般x轴是时间轴或者是类目轴。log 对数轴用于处理对数数据，使用较少。

2024-05-20 19:14:28 292

原创 echarts-坐标轴2

类目轴的间隔 interval时间轴的间隔 minInterval,maxInterval数值轴一般不建议设置间隔min和 max只用数值轴才支持。

2024-05-20 19:14:09 276

原创 echarts-tooltip

tooltip的content部分默认是用html去绘制的，所以要使用div作为echarts的容器。要使用canvas绘制，要必须使用canvas模式。tooltip后如果渲染的元素是canvans,tooltip不能显示出来。

2024-05-19 20:00:44 1322

原创 echarts-legend

formatter 用来格式化图例文本，支持字符串模板和回调函数两种形式。

2024-05-19 15:26:13 745

原创 echarts-1

setOption 可以多次渲染echarts,除了也可以用于第一次绘制外，后续重新渲染也可以用。默认使用的是英文，可以将 echarts.init()配置项里的locale设置为ZH就行。通常都要对返回的数据进行处理，例如这里先对time排序，然后再返回x轴和y轴的值。echarts可以配置主题，内置了默认和暗黑模式，还可以自定义或者使用别人的主题。其他的也可以设置id例如yAxis，id不同时会替换之前的yAxis。echarts.init(挂载的dom对象，主题，{配置项})

2024-05-18 19:49:01 761

原创 webpack-性能优化-代码分离

1.**对打包后的结果进行优化(**分包处理，减小包的体积，使用cdn服务器)2.优化打包速度(exclude,cache-loader)一般更侧重于对打包后的结果进行优化。默认情况下所有打包后的结果都会放到一个文件中，如自己编写的代码，第三方库react,axios,dayjs等都会打包到一个文件中，这就需要对代码进行分离。

2024-04-29 16:36:17 812

原创 webpack-babel2

浏览器的兼容性问题不知包括随屏幕大小而变化，还包括针对浏览器支持的特性（如css特性，js特性）做处理。目前市场上有很多浏览器：Chrome,Safari,IE,Edge等，要根据它们的市场占有率来决定是否兼容它们。在脚手架中经常看到类似的配置:在生产环境中，该配置指定了支持的浏览器版本范围，包括超过全球市场份额0.2%的浏览器、尚未停止维护的浏览器，以及排除了Opera Mini所有版本的浏览器。在开发环境中，该配置指定了最新版本的Chrome、Firefox和Safari浏览器。

2024-04-21 21:33:54 837

原创 webpack-source-map

通常运行在浏览器上的代码是压缩过的，在浏览器上运行的代码和编写的代码是有差异的，这些代码会进行丑化压缩，修改变量名称，将ts转换为js等操作。当代码出错时调试转化后代码很困难，可以通过source-map将转换后的代码映射到源文件，使浏览器可以重构原始源并在调试器中显示重建后的原始源。使用source-map的步骤：1.根据源代码，生成source-map文件，webpack在打包时，可以通过配置生成source-map。2. 在转换后的代码最后添加一行注释，指向source-map。

2024-04-21 15:26:53 273

原创 webpack-babel

它可以将 ES6/ES7/ES8 等新特性转换为 ES5 等旧版本的 JavaScript 代码，使得开发人员可以使用最新的语言特性而不必担心兼容性问题。此外，Babel 还可以用于转换 JSX 语法为普通的 JavaScript 代码，从而在项目中使用 React 等库。通常会使用预设好的插件 @babel/preset-env,并单独建立一个babel.config.js。babel作为一个独立的工具和postcss一样，可以单独来使用。babel是一个编译器，将源代码转换为浏览器可以直接识别的代码。

2024-04-15 21:16:56 443

空空如也

空空如也