交互API
摘要：全局echarts对象： 全局echarts对象是引入echarts.js文件之后就可以直接使用的。 init：初始化echarts实例对象，使用主题。 echarts.registerTheme：注册主题的时候使用。 registerMap： （1）注册地图数据 $.get('json/map/c
阅读全文
posted @
2020-12-29 17:28
稳住别慌
阅读(136)
推荐(0) 编辑
Echarts动画的使用
摘要：加载动画的显示与隐藏： Echarts已经内置好了加载数据的动画，我们只需要在合适的时机显示或者隐藏即可。 显示加载动画：myCharts.showLoading() 隐藏加载动画：myCharts.hideLoading() 增量动画的使用： 不管是更改数据还是增加数据都要通过 myCharts.
阅读全文
posted @
2020-12-29 17:26
稳住别慌
阅读(8921)
推荐(0) 编辑
echarts图表的自适应
摘要：自适应：当浏览器的大小发生变化的时候，想让图表也能随之适配变化。 （1）监听窗口大小变化事件（调用echarts组件时，多个echarts图表的自适应问题） window.addEventListener("resize", () => { myEcharts.resize(); }); （2）在事
阅读全文
posted @
2020-12-29 14:22
稳住别慌
阅读(7386)
推荐(0) 编辑
echarts样式的配置
摘要：直接样式：itemStyle、textStyle、lineStyle、areaStyle、label 高亮样式：在 emphasis 中包裹 itemStyle、textStyle、lineStyle、areaStyle、label 注意：这些样式的优先级高，会覆盖主题中、调色盘的效果 <scrip
阅读全文
posted @
2020-12-28 17:19
稳住别慌
阅读(420)
推荐(0) 编辑
echarts调色盘的使用
摘要：（1）调色盘：它是一组颜色，图形、系列会自动从其中选择颜色。 调色盘原则：就近原则。 主题的调色盘：是引入的js文件中 echarts.registerTheme 中的color 全局的调色盘： option:{ color:['red','green','blue',...], } <script
阅读全文
posted @
2020-12-28 16:53
稳住别慌
阅读(1499)
推荐(0) 编辑
Echarts主题相关的使用
摘要：内置主题： Echarts中默认内置了两套主题：light、dark。 在初始化对象方法init中可以指明主题方式： var myChart = echarts.init(document.getElementById('main'), 'dark'); var myChart = echarts.
阅读全文
posted @
2020-12-28 16:12
稳住别慌
阅读(1014)
推荐(0) 编辑
Echart基础小结
摘要：1.各个图表的英文单词： bar：柱状图 line：折线图 scatter/effectScatter：散点图/涟漪动画的散点图 pie：饼图 map：地图 radar：雷达图 gauge：仪表盘 2.每个图表的使用场景： （1）柱状图：描述的是分类的数据，呈现的是每个分类中有多少（最大值、最小值、
阅读全文
posted @
2020-12-28 12:01
稳住别慌
阅读(471)
推荐(0) 编辑
仪表盘gauge
摘要：仪表盘主要用在进度把控以及数据范围的检测 实现步骤： （1）Echarts最基本的代码结构 引入js文件，DOM容器，初始化对象，设置option （2）准备数据，设置给series下的data data:[{value:97}] （3）图表类型 在series下设置 type: "gauge" 常
阅读全文
posted @
2020-12-28 11:43
稳住别慌
阅读(1096)
推荐(0) 编辑
雷达图radar
摘要：雷达图实现步骤： （1）Echarts最基本的代码结构 引入js文件，DOM容器，初始化对象，设置option （2）定义各个维度的最大值 indicator:[{name:''易用性",max:100},...] （3）准备具体产品的数据 data:[{name:"华为手机1",value:[80
阅读全文
posted @
2020-12-28 11:29
稳住别慌
阅读(790)
推荐(0) 编辑
地图的常见效果（显示某个区域、让不同城市显示不同颜色、地图和散点图结合）
摘要：1.显示某个区域步骤： （1）加载该区域的矢量地图数据 （2）通过registerMap注册到echarts全局对象中 （3）指明geo配置下的type和map属性 （4）通过zoom放大该区域 （5）通过center定位中心点 <script src="lib/echarts.min.js"></
阅读全文
posted @
2020-12-26 17:07
稳住别慌
阅读(3075)
推荐(0) 编辑
地图的基本实现
摘要：地图图表的使用方式 （1）百度地图API 需要申请百度地图的ak （2）矢量地图 需要准备矢量地图的地图数据 矢量地图的实现步骤： （1）Echarts最基本的代码结构： 引入js文件，DOM容器，初始化对象，设置option （2）准备中国的矢量地图json文件，放到json/map/的目录下 c
阅读全文
posted @
2020-12-26 16:44
稳住别慌
阅读(210)
推荐(0) 编辑
饼图的常见效果 map
摘要：饼图常见效果 显示数值：label、formatter 圆环的设置：radius:['50%','70%'] 设置内外半径不一样 南丁格尔图：roseType: 'radius' 选中效果： 选中模式：selectedMode:single\multiple 选中偏移量：selectedOffset
阅读全文
posted @
2020-12-26 15:30
稳住别慌
阅读(405)
推荐(0) 编辑
直角坐标系
摘要：直角坐标系中的常用配置 直角坐标系图表：柱状图、折线图、散点图 配置1：网格 grid grid是用来控制直角坐标系的布局和大小，x轴和y轴就是在grid的基础上进行绘制的。 显示grid：show进行控制 grid的边框：borderWidth、borderColor grid的位置和大小：lef
阅读全文
posted @
2020-12-26 13:59
稳住别慌
阅读(971)
推荐(0) 编辑
散点图的常见效果
摘要：散点图的常见效果： 气泡图效果： 散点的大小不同（symbolSize） 散点的颜色不同（itemStyle中的color） 涟漪动画效果： type: "effectScatter", // 具有涟漪动画的散点图 showEffectOn: 'emphasis', // render每个散点渲染完
阅读全文
posted @
2020-12-26 11:05
稳住别慌
阅读(689)
推荐(0) 编辑
散点图的基本实现scatter
摘要：散点图：散点图可以帮助我们推断出变量间的相关性。 实现步骤： （1）Echarts最基本的代码结构： 引入js文件，DOM容器，初始化对象，设置option （2）x轴数据和y轴的数据：二维数组 数组1：[[身高1,体重1],[身高2,体重2],[身高3,体重3]...] （3）图表类型： 在ser
阅读全文
posted @
2020-12-26 10:34
稳住别慌
阅读(542)
推荐(0) 编辑
折线图line
摘要：常见效果： 标记：最大值、最小值（markPoint）；平均值（markLine）；标注区间（markArea） 线条控制：线条平滑度smooth、线条风格lineStyle（曲线、点线、颜色进行控制） 填充风格：areaStyle 紧挨边缘：boundaryGap（紧挨y轴要写在xAxis中） 缩
阅读全文
posted @
2020-12-25 15:08
稳住别慌
阅读(330)
推荐(0) 编辑
平行四边形按钮
摘要：生成一个平行四边形按钮，但按钮中的字体不是倾斜的 <button style="transform: skewX(-30deg);" @click='console.log(11)'><p style="transform: skewX(30deg);">按钮1</p></button> <butt
阅读全文
posted @
2020-12-25 11:35
稳住别慌
阅读(519)
推荐(0) 编辑
echarts通用配置
摘要：通用配置：指的是任何一种类型的图表都可以使用的配置。 1.通用配置title （1）文字样式：textStyle （2）标题边框：borderWidth、borderColor、borderRadius （3）标题位置：left、top、right、bottom title: { text: '期末
阅读全文
posted @
2020-12-24 16:30
稳住别慌
阅读(419)
推荐(0) 编辑
柱状图bar
摘要：柱状图的特点：柱状图描述的是分类数据，呈现的是每一个分类中有多少，通过柱状图，可以很清晰的看出每个分类数据的排名情况 常见效果 1.标记：markPoint ：最大值、最小值；markLine：平均值 series: [{ name: '语文', type: 'bar', // 标注最大值、最小值
阅读全文
posted @
2020-12-24 14:20
稳住别慌
阅读(1122)
推荐(0) 编辑
echarts-demo
摘要：1.数据可视化 数据可视化主要目的：借助于图形化手段，清洗有效地传达与沟通信息。 数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。 2.Echarts （1）引入echarts.js （2）准备一个呈现图表的盒子（要有宽高） （3）初始化echarts实例对象 （4）准备配
阅读全文
posted @
2020-12-24 11:39
稳住别慌
阅读(852)
推荐(0) 编辑
实现背景图片的透明度，但是图片上的文字透明度不变
摘要：方法1 背景图+定位 <div class="btn1"> <div class="btn11"> <span>文字</span> </div> </div> .btn1 { width: 120px; height: 150px; background: url("../assets/1.jpg"
阅读全文
posted @
2020-12-23 13:20
稳住别慌
阅读(660)
推荐(0) 编辑
在使用elementui的时候，实现给input框前面或后面添加图标
摘要：1.在input框前面添加图标 添加 prefix-icon="el-icon-user" <el-form-item prop="username"> <el-input ref="username" prefix-icon="el-icon-user" v-model="loginForm.us
阅读全文
posted @
2020-12-18 10:45
稳住别慌
阅读(12160)
推荐(0) 编辑
calc的妙用
摘要：一般用于移动端的开发，设置高度为100%-头部的高度 .container{ height: calc(100% - 40px); //注：减号前后要有空格，否则很可能不生效！！ }
阅读全文
posted @
2020-12-17 10:30
稳住别慌
阅读(190)
推荐(0) 编辑
element表格提交时，获取所有选中的checkbox的数据
摘要：<el-table :data="tableData" border @selection-change="changeFun"> // table表头设置selection-change（changeFun方法） data 设置 multipleSelection: [], methods设置 c
阅读全文
posted @
2020-12-17 10:27
稳住别慌
阅读(3560)
推荐(0) 编辑
点击input选中文本
摘要：$(".unline-ipt").click(function () { $(this).focus().select(); this.selectionStart = 0; this.selectionEnd = this.val().length; })
阅读全文
posted @
2020-12-17 10:22
稳住别慌
阅读(364)
推荐(0) 编辑
Keep Alive 缓存
摘要：1. 常见方法 // 组件 export default { name: 'test-keep-alive', data () { return { includedComponents: "test-keep-alive" } } } <keep-alive include="test-keep-
阅读全文
posted @
2020-12-14 16:32
稳住别慌
阅读(188)
推荐(0) 编辑
null和undefined的区别
摘要：1.首先是数据类型不一样 console.log(typeof null) // objectconsole.log(typeof undefined) // undefined 2.null和undefined 两者相等，但是当两者做全等比较时，两者又不等。（因为它们的数据类型不一样） conso
阅读全文
posted @
2020-12-08 10:06
稳住别慌
阅读(833)
推荐(0) 编辑
