开发笔记 第24页

来源： thinkphp之max函数出现的问题_php max_dev-tonyang的博客-CSDN博客

使用max()

数据表(code表)设置 varchar类型 实际存储的是字符串数字(大于0)

查看表数据

问题出现：

使用Db::name(‘code’)->max(‘code_sn’); 或者 Db::name(‘code’)->limit(1)->order(‘code_sn desc’)->value(‘code_sn’); 获取到的是36038而不是10100000

如果将10100000改为50000000后 再Db::name(‘code’)->max(‘code_sn’);获取得到的是 50000000

这里将code_sn字段的varchar类型改为int 或者bigint 后再使用Db::name(‘code’)->max(‘code_sn’); 或者 Db::name(‘code’)->limit(1)->order(‘code_sn desc’)->value(‘code_sn’);查询最大的code_sn为正确值
————————————————
版权声明：本文为CSDN博主「dev-tonyang」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/chaoyang_test/article/details/130848408

来源： uniapp：uni_modules组件开发与发布_uniapp uni_modules_瓜子三百克的博客-CSDN博客

文章目录
一、前言
二、开发准备
三、 uni_modules 插件开发
1、创建uni_modules目录
2、新建uni_modules插件
2.1、新建
2.2、目录结构说明
2.3、package.json配置
3、发布到插件市场
4、修改插件基本信息
5、发布新版本
6、查看发布的插件
7、示例
一、前言
1、uni_modules定位：是uni-app插件的模块化规范（HBuilderX 3.1.0+支持），是对一组js sdk、组件、页面、uniCloud云函数、公共模块等的封装，用于嵌入到uni-app项目中使用，也支持直接封装为项目模板。
2、开发便捷性：开发者可以像开发uni-app项目一样编写一个uni_modules插件，然后在HBuilderX中直接上传至插件市场。
3、uni_modules特点：uni_modules开发的插件，可以直接在uniapp的任意页面直接使用，与easycom组件模式类似，避免了每个页面引入才能使用。

详见官方文档。

二、开发准备
1、开发环境HBuider X
2、用于开发插件的uniapp项目
3、开发和测试环境（微信开发工具、浏览器、手机）

三、 uni_modules 插件开发
1、创建uni_modules目录
已有则忽略，进入下一步。

2、新建uni_modules插件
2.1、新建

插件ID命名规范：
1、格式为：‘作者ID-插件英文名称’，示例：‘xx-yy’，其中作者ID和插件英文名称只能包含英文、数字
2、作者ID由插件作者自定义，不能使用’DCloud’、’uni’等关键字，长度要求至少2位字符
3、插件名称需直观表达插件的作用，例如：tag、button等

小细节：
uni_modules插件可以在package.json的uni_modules->dependencies节点配置三方依赖（依赖的插件也必须是uni_modules插件），如果是依赖了三方的npm插件，可以使用标准的dependencies节点配置。

2.2、目录结构说明
生成的插件目录结构如下：

其目录结构说明，见官方文档。

2.3、package.json配置
package.json在每个uni_modules插件中都必须存在，包含了插件的基本信息，是插件发布的核心，所以每个字段的含义，都必须了解清楚。

{
// 注意，不能直接拷贝本段代码到编辑器中，package.json 目前不支持注释。本段代码加的注释只是用于解释代码。
“id”: “作者ID-插件英文名称”, // 必填，插件ID，格式为：’作者ID-插件英文名称’，例如：’xx-yy’，其中作者ID和插件名称只能包含英文、数字，作者ID不能使用’DCloud’、’uni’等关键字
“displayName”: “插件显示名称”, // 必填，用于展示在插件市场的显示名称
“version”: “1.0.0”, // 必填，插件版本
“description”: “插件描述”, // 必填，插件描述
“keywords”: [], // 必填，插件标签关键词，最多5个
“repository”: “github:user/repo”, // 仓库地址
“engines”: { // HBuilderX/cli 最低兼容版本
“HBuilderX”: “^3.1.0”
},
“dcloudext”: { // DCloud插件市场配置
“category”: [“前端组件”, “通用组件”], // 必填， 插件市场分类
“sale”: { // 销售 （目前仅限uniCloud类插件）
“regular”: { // 普通授权版价格，单位为元，如果为免费插件，设置普通授权版价格为 0 即可。
“price”: “0.00”
},
“sourcecode”: { // 源码授权版价格，单位为元
“price”: “0.00”
}
},
“contact”: { // 插件作者 QQ，方便管理员审核时与作者快速沟通。
“qq”: “”
},
“declaration”: { // 隐私、权限及商业化声明
“ads”: “”, // 必填，本插件是否包含广告，如包含需详细说明广告表达方式、展示频率，请如实填写，如不包含，可填“无”
“data”: “”, // 必填，本插件采集的数据、发送的服务器地址、以及数据用途说明，请如实填写，如不采集任何数据，可填写“插件不采集任何数据”，如果使用的三方SDK需要采集数据，可填写“插件使用的 XX SDK会采集数据，详情可参考：https://other-sdk.com/”
“permissions”: “” // 必填，本插件需要申请的系统权限列表，请如实填写，如不需要任何权限，可填“无”
},
“npmurl”:”” // npm 地址
},
“uni_modules”: { // uni_modules配置
“dependencies”: [], // 依赖的 uni_modules 插件ID列表
“encrypt”: [ // 配置云函数，公共模块，clientDB Action加密
“uniCloud/cloudfunctions/uni-admin/controller/permission.js” // 注意这里是真实的文件路径，uni_modules下的uniCloud不带-aliyun、-tcb后缀，但是项目根目录下的uniCloud是带有后缀的
],
“platforms”: { // 平台兼容性：y 表示 Yes，支持；n 表示 No，不支持；u 表示 Unknown，不确定；默认为 u
“cloud”: { // 云端平台兼容性
“tcb”: “y”,
“aliyun”: “y”
},
“client”: { // 前端平台兼容性
“App”: {
“app-vue”: “y”,
“app-nvue”: “n”
},
“H5-mobile”: {
“Safari”: { // 当需要指定最小版本才支持时，可以配置minVersion
“minVersion”: “14.0.2”
},
“Android Browser”: “y”,
“微信浏览器(Android)”: “u”,
“QQ浏览器(Android)”: “u”
},
“H5-pc”: {
“Chrome”: “y”,
“IE”: “u”,
“Edge”: “u”,
“Firefox”: “u”,
“Safari”: “u”
},
“小程序”: {
“微信”: “y”,
“阿里”: “y”,
“百度”: “y”,
“字节跳动”: “y”,
“QQ”: “y”
},
“快应用”: {
“华为”: “u”,
“联盟”: “u”
}
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
有意思的是，上述配置基于npm package.json规范扩展的，所以标准的package.json属性也同样支持，比如可以通过files来控制要上传的插件包内容。

3、发布到插件市场

4、修改插件基本信息

5、发布新版本

6、查看发布的插件
发布成功之后可以去我的插件列表查看。

7、示例
这里写了示例，可以了参考一下：

组件：https://ext.dcloud.net.cn/plugin?id=6937
页面：https://ext.dcloud.net.cn/plugin?id=6938
参见官方文档
————————————————
版权声明：本文为CSDN博主「瓜子三百克」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_38633659/article/details/121939004

来源： MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用_ifnull mysql-CSDN博客

在MySQL中可以使用IF()、IFNULL()、NULLIF()、ISNULL()函数进行流程的控制。

1、IF()函数的使用
IF(expr1,expr2,expr3)，如果expr1的值为true，则返回expr2的值，如果expr1的值为false，则返回expr3的值。

SELECT IF(TRUE,’A’,’B’); — 输出结果：A
SELECT IF(FALSE,’A’,’B’); — 输出结果：B
2、IFNULL()函数的使用
IFNULL(expr1,expr2)，如果expr1的值为null，则返回expr2的值，如果expr1的值不为null，则返回expr1的值。

SELECT IFNULL(NULL,’B’); — 输出结果：B
SELECT IFNULL(‘HELLO’,’B’); — 输出结果：HELLO
3、NULLIF()函数的使用
NULLIF(expr1,expr2)，如果expr1=expr2成立，那么返回值为null，否则返回值为expr1的值。

SELECT NULLIF(‘A’,’A’); — 输出结果：null
SELECT NULLIF(‘A’,’B’); — 输出结果：A
4、ISNULL()函数的使用
ISNULL(expr)，如果expr的值为null，则返回1，如果expr1的值不为null，则返回0。

SELECT ISNULL(NULL); — 输出结果：1
SELECT ISNULL(‘HELLO’); — 输出结果：0

————————————————
版权声明：本文为CSDN博主「pan_junbiao」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/pan_junbiao/article/details/85928004

来源： jquery监听div等元素的内容变化_监听div内容变化-CSDN博客

来源： thinkphp中的volist标签详解 – 知乎

本文通过实例案例给大家介绍了thinkphp中的volist标签，本文给大家介绍的非常详细，具有参考借鉴价值，需要的朋友参考下吧，希望能帮助到大家。

八重樱：怎么从一名码农成为架构师的必看知识点：目录大全（不定期更新）93 赞同 · 4 评论文章

属性：

name（必须）：要输出的数据模板变量

id（必须）：循环变量

offset（可选）：要输出数据的offset

length（可选）：输出数据的长度

key（可选）：循环的key变量，默认值为i

mod（可选）：对key值取模，默认为2

empty（可选）：如果数据为空显示的字符串

通常模型的select方法返回的结果是一个二维数组，可以直接使用volist标签进行输出。

$User = M('User');

$list = $User->select();

$this->assign('list',$list);

<volist name="list" id="vo">

{$vo.id}

{$vo.name}

</volist>

输出偶数记录

<volist name="list" id="vo" mod="2" >

<eq name="mod" value="1">{$vo.name}</eq>

</volist>

mod从0开始计数，这里mod循环计数为0,1

Mod属性还用于控制一定记录的换行，例如：

<volist name="list" id="vo" mod="5" >

{$vo.name}

<eq name="mod" value="4"><br/></eq>

</volist>

mod循环计数，0,1,2,3,4 当值为4的时候换行。也就是5条数据换一行。

输出循环变量

<volist name="list" id="vo" key="k" >

{$k}.{$vo.name}

</volist>

循环变量从1开始1、2、3、4

如果没有指定key属性的话，默认使用循环变量i，例如：

<volist name="list" id="vo" >

{$i}.{$vo.name}

</volist>

综合案例：

<volist name="agentData" id="vo" mod="3" key="k" empty="暂时没有数据">

<p style="display:inline-block;width:280px;margin:3px;">

<input type="radio" class="regular-radio" value="{sh:$vo.agent_id}" name="agent_id" id="agent_{sh:$k}" <eq name="k" value="1">checked="checked"</eq>><label for="agent_{sh:$k}"></label><span style="display:inline-block;padding:0px 0px 5px 5px;">{sh:$vo.name} 电话({sh:$vo.tel})</span>

</p>

{sh:$mod}

<eq name="mod" value="2"><br/></eq>

</volist>

以上内容希望帮助到大家，很多PHPer在进阶的时候总会遇到一些问题和瓶颈，业务代码写多了没有方向感，不知道该从那里入手去提升，对此我整理了一些资料，包括但不限于：分布式架构、高可扩展、高性能、高并发、服务器性能调优、TP6，laravel，YII2，Redis，Swoole、Swoft、Kafka、MySQL优化、shell脚本、Docker、微服务、Nginx等多个知识点高级进阶干货需要的可以免费分享给大家，需要的可以加入我的官方群点击此处。

来源： 如何在win10系统上使用旧版本的IE浏览器_旧版ie浏览器-CSDN博客

win10系统打开IE浏览器自动变成了Edge浏览器，切换成IE模式时，IE浏览器的版本默认为IE11（注：Edge浏览器只支持IE11），有些网站只能使用IE浏览器打开或者在做一些兼容性测试时，需要使用到不同版本的浏览器。下面介绍一下，如何在win10系统上使用旧版本的IE浏览器：

第一步：使用Edge浏览器打开网站，点击右上角的…图标，选择选项在IE模式下重新加载（打开以后，这个IE浏览器的版本是IE11）

第二步： 在弹出提示栏中勾选“在兼容性视图中打开此页面”、“下次在IE模式下打开此页面”（如果下次不想使用IE打开此页面，也可以不勾选这个选项）

第三步：按f12进入开发者模式，找到仿真，可修改IE浏览器的版本

但是我的电脑使用IE浏览器打开开发者模式时，提示：开发人员工具在IE模式下不可用。若要调试页面，请在IE11中将其打开。

后面通过查看资料，找到的解决办法是：

（1）使用win+r打开“运行”对话框，输入cmd，点击确定

（2）输入“%systemroot%\system32\f12\IEChooser.exe”，回车

（3）在 IEChooser 中，选择“IE 模式”选项卡的条目

（4）进入到仿真页面，可选择不同的IE浏览器版本

————————————————
版权声明：本文为CSDN博主「weixin_50902406」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_50902406/article/details/130125357

来源： win10系统ie直接跳转edge还原方法_ie彻底合并edge_Mr刘大仁的博客-CSDN博客

一、问题：

某次打开ie浏览器，不记得做过什么操作，导致再次启动ie时，ie浏览器自动跳转到edge浏览器，网上的方法基本都是从ie的intenet选项——高级——取消“启用第三方浏览器扩展”来解决，但是我遇到的情况是ie彻底无法使用，只要打开，直接跳转edge。

二、解决：

1、打开edge浏览器

2、右上角“…”——设置

3、左侧——默认浏览器

4、让intenet explorer 在 Microsoft Edge 中打开网站，右侧下拉

5、推荐选择第二项。

6、重新打开ie，问题解决。

————————————————
版权声明：本文为CSDN博主「Mr刘大仁」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43662262/article/details/120417122

来源： 八、Echart图表 之 series盒须图（箱体图）基本使用与配置大全_echarts 盒须图-CSDN博客

🍓 作者主页：💖仙女不下凡💖

🍓 前言介绍：以下👇内容是我个人对于该技术的总结，如有不足与错误敬请指正！

🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章Echart的相关文章欢迎持续关注！

🍓Echart官网地址：https://echarts.apache.org/examples/zh/index.html#chart-type-line

✨箱体图含义：1.箱子的中间一条线，是数据的中位数，代表了样本数据的平均水平。
2.箱子的上下限，分别是数据的上四位数和下四分位数，这意味着箱子包含了50%的数据，因此箱子的宽度在一定程度上反应了数据的波动程度。
3.在箱子的上方和下方，又各有一条线，有时候代表着最大最小值，有时候会有一些点“冒出去”。请千万不要纠结，理解成“异常值”就好。

✨盒须图（箱体图）的基本使用：我看了一下网上了一些案例全部都是用dataSet映射处理的数据，看的不太明白，下面我就使用series.data处理数据绘制简单的箱体图，如下图

itemStyle：盒须图样式
itemStyle.decal：图形的贴花图案
emphasis：盒须图高亮样式
blur：淡出时的图形样式和标签样式
select：数据选中时的图形样式和标签样式
data：数据
markPoint：图表标注
markLine：图表标线
markArea：图表标域，常用于标记图表中某个范围的数据，例如标出某段时间投放了广告
universalTransition：全局过渡动画相关的配置
tooltip：本系列特定的 tooltip 设定
💕 盒须图（箱体图）还有很多配置属性，具体使用请参考一下内容

series: [{
type: ‘boxplot’, //这个配置表示显示的是箱体图
id: ”,
coordinateSystem: ‘cartesian2d’, //该系列使用的坐标系。使用二维的直角坐标系，通过xAxisIndex, yAxisIndex指定相应的坐标轴组件
xAxisIndex: 0, //使用的 x 轴的index，在单个图表实例中存在多个 x 轴的时候有用
xAxisIndex: 0, //使用的 x 轴的index，在单个图表实例中存在多个 x 轴的时候有用
name: ”, //系列名称，用于tooltip的显示，legend的图例筛选
colorBy: ‘series’, //从调色盘option.color中取色策略。series同一系列中的所有数据都是用相同的颜色/data每个数据项都使用不同的颜色
legendHoverLink: true, //是否启用图例hover时的联动高亮
hoverAnimation: true, //是否开启hover在box上的动画效果
layout: ‘horizontal’, //布局方式，属性值：horizontal/vertical
boxWidth: [7, 50], //box宽度。属性值：number/数组（意思是宽度的上下限：[min, max]）
itemStyle: {
color: none, /颜色，参考下面的文章/
borderColor: #666, //写法参考color
borderWidth: 1,
borderType: ‘solid’,
borderDashOffset: 0, //设置虚线偏移量，搭配borderType实现灵活的虚线效果
borderCap: ‘butt’, //指定线段末端绘制方式，属性值：butt/round/square
borderJoin: ‘bevel’, //设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为0的变形部分，其指定的末端和控制点在同一位置，会被忽略），属性值：bevel/round/miter
borderMiterLimit: 10, //设置斜接面限制比例，只有当borderJoin为miter时才有效
shadowBlur: ”, //图形阴影模糊大小。该属性配合shadowColor/shadowOffsetX/shadowOffsetY一起设置图形的阴影效果
shadowColor: ”, //阴影颜色。支持的格式同color
shadowOffsetX: 0, //阴影水平方向上的偏移距离
shadowOffsetY: 0, //阴影垂直方向上的偏移距离
opacity: 1, //图形透明度
decal: {
symbol: ‘rect’, //贴花的图案，属性值也可以是数组表示循环使用，circle/rect/roundRect/triangle/diamond/pin/arrow/none
symbolSize: 1, //表示占图案区域的百分比，取值范围：0-1
symbolKeepAspect: true, //是否保持图案的长宽比
color: ”, /颜色，参考下面的文章/
backgroundColor: ”,
dashArrayX: 5,
dashArrayY: 5,
rotation: 0, //图案的整体旋转角度（弧度制）
maxTileWidth: 512, //生成的图案在未重复之前的宽度上限。通常不需要设置该值，当你发现图案在重复的时候出现不连续的接缝时，可以尝试提高该值
maxTileHeight: 512
}
},
emphasis: {
disabled: false, //是否关闭高亮状态。默认false
focus: ‘none’, //高亮图形时，是否淡出其它数据图形已达到聚焦的效果。属性值：none/self/series
blurScope: ‘coordinateSystem’, //在开启focus时，可以通过blurScope配置淡出的范围
itemStyle: {} //图形样式，参考上面itemStyle配置，但是没有itemStyle.decal
},
blur: {
itemStyle: {} //图形样式，参考上面itemStyle配置，但是没有itemStyle.decal
},
select: {
disabled: false, //是否可以被选中。默认false,在开启selectedMode时有效，可用于关闭部分数据
itemStyle: {} //图形样式，参考上面itemStyle配置，但是没有itemStyle.decal
},
selectedMode: []/{}, //选中模式的配置
dimensions: ”, //使用dimensions定义series.data或者dataset.source的每个维度的信息。
encode: ”, //可以定义 data 的哪个维度被编码成什么
dataGroupId: ”, //可以定义 data 的哪个维度被编码成什么
data: [],
markPoint: {},
markLine: {},
markArea: {},
clip: type,
z: 2,
silent: false,
animationDuration: 800,
animationEasing: elasticOut,
animationDelay: 0,
universalTransition: {},
tooltip: {}
}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
👉推荐相关文章：Echart图表 之 基本使用及配置项

👉推荐相关文章：Echart图表 之 title配置项大全

👉推荐相关文章：Echart图表 之 颜色color配置项大全

👉推荐相关文章：Echart图表 之 X轴（xAxis）与 Y轴（yAxis）配置项大全

👉推荐相关文章：Echart图表 之 legend图例组件配置项大全

👉推荐相关文章：Echart图表 之 tooltip提示框组件配置项大全

👉推荐相关文章：Echart图表 之 toolbox工具栏组件配置项大全
————————————————
版权声明：本文为CSDN博主「仙女不下凡」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_55181759/article/details/124819828

来源： 二、Echart图表 之 title配置项大全_echart标题-CSDN博客

title就是图表标题，可以控制它的属性，如颜色、位置等，当有副标题的时候title有两种写法，可以写为数组或对象，下面我就以对象形式整理title的配置项，以数组形式写例子。
title: {
show: true, // 是否显示标题组件,（true/false）
text: ”, // 主标题文本，支持使用\n换行
textAlign:’auto’, //整体水平对齐（包括text和subtext）
textVerticalAlign:’auto’,//整体的垂直对齐（包括text和subtext）
padding:0, // 标题内边距 写法如[5,10]||[ 5,6, 7, 8] ,
left:’auto’, // title组件离容器左侧距离，写法如’5’||’5%’
right:’auto’, //’title组件离容器右侧距离
top:’auto’, // title组件离容器上侧距离
bottom:’auto’, // title组件离容器下侧距离
borderColor: ”, // 标题边框颜色
borderWidth: 1, // 边框宽度（默认单位px）
textStyle: { // 标题样式
color: ”, //字体颜色
fontStyle: ”, //字体风格
fontSize: 14, //字体大小
fontWeight: 400, //字体粗细
fontFamily: ”, //文字字体
lineHeight: ” //字体行高
align:’center’,//文字水平对齐方式（left/right）
verticalAlign:’middle’,//文字垂直对齐方式（top/bottom）
},
subtext: ”, // 副标题
subtextStyle: { // 副标题样式
color: ‘#ccc’,
fontStyle:’normal’,
fontWeight:’normal’,
fontFamily:’sans-serif’,
fontSize:18,
lineHeight:18,
}
}

下面为大家举个例子，展示title在图表中使用的实际效果与数组写法，效果与代码如下

title: [
{ // 标题
text: ‘Michelson-Morley Experiment’,
left: ‘center’
},
{ // 副标题
text: ‘upper: Q3 + 1.5 * IQR \nlower: Q1 – 1.5 * IQR’, // ‘/n’代表换行
borderColor: ‘#999’,
borderWidth: 1, // 边框宽度（默认单位px）
textStyle: { // 标题样式
fontSize: 14
},
left: ‘10%’, // 位置
top: ‘90%’ // 位置
}
],

👉推荐相关文章：Echart图表 之 基本使用及配置项

👉推荐相关文章：Echart图表 之 颜色color配置项大全

👉推荐相关文章：Echart图表 之 legend图例组件配置项大全

👉推荐相关文章：Echart图表 之 X轴（xAxis）与Y轴（yAxis）配置项大全

👉推荐相关文章：Echart图表 之 tooltip提示框组件配置项大全

👉推荐相关文章：Echart图表 之 toolbox工具栏组件配置项大全
————————————————
版权声明：本文为CSDN博主「仙女不下凡」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_55181759/article/details/124838942

来源： 一、Echart图表 之 基本使用及配置项_仙女不下凡的博客-CSDN博客

一、基本使用
请在阅读文章时参考Echart官网地址中的内容配合了解，首先我们知道Echart图表中有许多类型，如折线图、柱状图、饼形图等，下面我以折线图为例讲解Echart图表的基本使用。
<!–示例代码–>
<template>
<div class=”main”></div>
</template>
<script>
import * as echarts from ‘echarts’;

var chartDom = document.getElementById(‘main’);
var myChart = echarts.init(chartDom);
var option;

option = {
xAxis: {
type: ‘category’,
data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]
},
yAxis: {
type: ‘value’
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: ‘line’
}
]
};

option && myChart.setOption(option);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
效果如下：

大家可能会有疑问为什么x轴与y轴的type值不同？那么我就交换这个值演示改代码的效果。

// 代码如下，其实就是将type颠倒了
xAxis: {
type: ‘value’,
data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]
},
yAxis: {
type: ‘category’
},
1
2
3
4
5
6
7
8
所以我们得出结论xAxis与yAxis中的type属性值是呼应的，所以请大家在理解Echart配置时一定要举一反三，它的配置非常非常多理解比硬记要更加靠谱。
配置项的写法与位置
位置不同：在了解Echart的配置项时，有的属性可以在option中全局配置，也可以局部配置。
写法不同：另外配置项有时候是对象，有的时候是数组，也可以是函数。
出现的位置不同代表的含义不同，但是你会发现即使形式或者位置不同但是它使用起来是一样的，下面我就以color为例演示一下
1.全局配置color且为数组类型。

option = {
/这就是颜色的全局配置，但是如果不配置颜色echart有默认颜色这里不详解就是理解概念/
color: [‘red’, ‘green’] // 配置颜色会把默认颜色覆盖
}
1
2
3
4
2.局部配置color

option = {
title: {
textStyle: {
color: ‘red’ // 这里代表字体颜色是红色
}
}
}
1
2
3
4
5
6
7
3.对象格式color

color: { /这里是线性渐变颜色，这里理解即可不做详解/
type: ‘linear’,
x: 1,
y: 0,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: ‘rgba(240,47,194,0.7)’// 0%处的颜色
}, {
offset: 1,
color: ‘rgba(149,111,212,0.7)’ // 100%处的颜色
}]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
二、配置项option包含属性
option = {
title: {}, //标题，如有副标题可以写成数组
color: [], //颜色
backgroundColor: ”, //背景色
darkMode: ”, //是否是暗黑模式
dataZoom: [], //
dataset: [{}], //数据集合
toolbox: {}, //
tooltip: {}, //提示框
grid: {}, //图表上下左右距离盒子的距离
xAxis: {}, //x轴
yAxis: {}, //y轴
series: [{
type: ” //graph关系图，line折线图，bar柱形图，boxplot箱体图等
}],
graphic: [],
baSEOption: {},
legend: {}, //控制图例组件
calculable: ”,
options: [],
brush: {},
animation: true, //是否开启动画，布尔值
animationThreshold: 2000, //
animationDuration: 1000, //
animationEasing: ‘cubicOut’, //
animationDelay: 0, //初始动画的延迟，支持回调函数
animationDurationUpdate: 300, //数据更新动画的时长，支持回调函数
animationEasingUpdate: ‘cubicInOut’, //数据更新动画的缓动效果
animationDelayUpdate: 0, //数据更新动画的延迟，支持回调函数
blendMode: ”, //图形的混合模式
hoverLayerThreshold: 3000, /**图形数量阈值**/
useUTC: false, //是否使用UTC时间
options: ”,
]}；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
上述配置项具体作用请参考下面🍀三、各个配置项属性大全其余比较复杂的属性我会用单独的文章讲解
三、各个配置项属性大全
配置项 作用 说明
title 标题组件，包含主标题和副标题 🍀详情参考文章：Echart图表 之 title配置项大全
color 调色盘颜色列表 可以全局配置，也可以局部配置，🍀详情参考文章：Echart图表 之 颜色color配置项大全
legend 图例组件 效果如图🍀详情参考文章：Echart图表 之 legend图例组件配置项大全
grid 直角坐标系内绘图网格 可以理解为控制图表整体Echart布局，🍀详情参考文章：Echart图表 之 grid组件用法 直角坐标系内绘图网格基本使用与配置大全
xAxis/xAxis X/Y轴组件 **🍀详情参考文章：[Echart图表 之 X轴（xAxis）与 Y轴（yAxis）配置项大全]
(https://blog.csdn.net/weixin_55181759/article/details/124835864)**
dataZoom 区域缩放 正在更新中，请期待22.11.01…
backgroundColor 背景色 默认无背景支持使用rgb(255,255,255)，rgba(255,255,255,1)，#fff等方式设置
darkMode 是否是暗黑模式 默认会根据backgroundColor亮度自动设置。如果设置了容器背景色而无法判断到，就可以使用该配置手动指定，echarts会根据是否是暗黑模式调整文本等的颜色。该配置常用于主题中
animation 是否开启动画 布尔值
animationThreshold 是否开启动画的阈值 当单个系列显示的图形数量大于这个阈值时会关闭动画
animationDuration 初始动画时长 可以通过每个数据返回不同的时长实现更戏剧初始动画效果，支持回调函数animationDuration: function (idx) {return idx * 100}
animationEasing 初始动画缓动效果 属性值cubicOut
animationDelay 初始动画延迟 可以通过每个数据返回不同的delay时间实现更戏剧的初始动画效果，毫秒，支持回调函数
animationDurationUpdate 数据更新动画的时长 毫秒，支持回调函数
animationEasingUpdate 数据更新动画的缓动效果 属性值cubicInOut
animationDelayUpdate 数据更新动画的延迟 毫秒，支持回调函数
blendMode 图形的混合模式 默认为source-over。支持每个系列单独设置。lighter也是比较常见的一种混合模式，该模式下图形数量集中的区域会颜色叠加成高亮度的颜色（白色）。常常能起到突出该区域的效果
hoverLayerThreshold 图形数量阈值 这个我没看懂，后续更新~~~~
useUTC 是否使用UTC时间 true表示axis.type为time时，依据UTC时间确定tick位置，并且 axisLabel和tooltip默认展示的是UTC时间，false则依据的是本地时间
options 用于timeline的option数组，数组每一项是一个echarts option
tooltip 提示框组件 🍀详情参考文章：Echart图表 之 tooltip提示框组件配置项大全
toolbox 工具栏组件 效果如图：🍀详情参考文章：Echart图表 之 toolbox工具栏组件配置项大全
series 数据配置项 🍀详情参考文章：Echart图表 之 series盒须图（箱体图）基本使用与配置大全 这个里面主要是控制图形的数据与图表的类型，如柱形图、饼图、箱体图等，配置项如下图，
暂未写完，持续更新中…
————————————————
版权声明：本文为CSDN博主「仙女不下凡」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_55181759/article/details/124805178