
echarts学习
echarts使用过程中对细节学习
VYPS
这个作者很懒,什么都没留下…
展开
-
echarts的tooltip轮播
(1)this.tooltipIndex是tooltip从哪个开始,如果只作展示无其他操作,可以写为0。(2)如果需要重复轮播,则在if判断中将this.tooltipIndex的值设置为0。原创 2024-03-05 10:22:08 · 766 阅读 · 0 评论 -
监听页面大小,使echarts自适应缩放
但是在打开F12调试窗口时发现echarts图标里面的内容并不会随着页面大小变化而改变元素宽高,resize() 调用echarts中内置的resize函数进行自适应缩放。给echarts图标设置宽高时用的是vh和vw,这就导致一些元素会挤压或者超出原本设定的范围大小,可以在mounted中使用监听浏览器窗口缩放,原创 2023-10-09 16:50:03 · 1036 阅读 · 1 评论 -
echarts -- legend属性使用的方法详解
legend: [{data: [{}],left: "0",padding: [0, 0,-3, 0], // 修改文字和图标距离},},data: [{}],padding: [0, 0,-3, 0], // 修改文字和图标距离},},data: [{}],padding: [0, 0,-3, 0], // 修改文字和图标距离},],实现效果。转载 2023-09-19 14:45:51 · 11543 阅读 · 0 评论 -
echarts -- tooltip
如果trigger的值为axis时,可以通过{a0},{a1},这样添加索引的方式来表达。axis 一般用于多组数据,比如堆叠折线图或者堆叠柱状图,会显示那一组的数据。可以通过console.log打印一下params具体的内容,根据自己需求设置显示内容。缺点:不能显示出横轴纵轴以外隐藏的数据,不够灵活。常见变量有 {a}, {b},{c},{d}2、axisPointer:设置鼠标悬停后echarts对应列的背景展示。值:shadow 会展示柱状阴影。4、formatter:可以定义提示框显示的内容。原创 2023-09-19 10:48:39 · 2858 阅读 · 0 评论 -
echarts -- toolbox 工具箱
4、 magicType: { type: ['line', 'bar'] } //切换为折线图 和 柱状图。3、 dataView: { readOnly: false } //数据视图。6、 saveAsImage: {} //保存为图片。1、 show: true //展示与隐藏。} //区域缩放 和区域缩放还原。5、 restore: {}, //还原。echarts盒子右上角。原创 2023-09-18 16:56:03 · 823 阅读 · 0 评论