1.判断数据类型
1.Object.prototype.toString()
用法:
Object.prototype.toString.call(要判断类型的数据);
Object.prototype.toString.apply(要判断类型的数据);
Object.prototype.toString.bind(要判断类型的数据)();
//结果为 [Object 判断的类型类型] 例如:[Object Array]
缺点:判断不了自定义构造函数创建出来的实例对象
function Animal(name){
this.name = name
}
let cat = new Animal('黑猫')
Object.prototype.toString.call(cat); //[Object Object]
Object.prototype.toString.call(cat).slice(8,-1) //Object
如图所示，判断出来的不是Animal，而是Object。
2.constructor属性
这个属性是用来判断某个实例对象是不是这个构造函数创建出来的。
function Anamil(name) {
this.name = name
}
let ana1 = new Anamil('dog');
console.dir(ana1.constructor == Anamil) //true
console.dir(ana1.constructor == Object) //false
3.instanceof运算符
instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上
obj instanceof Object; //true 检测Object.prototype是否存在于参数obj的原型链上。
4.typeof运算符
typeof是一个一元运算符，它返回的结果 始终是一个字符串,它无法识别null这个基本类型
//typeof部分类型运算结果
typeof(1): number
typeof(NaN): number
typeof(Number.MIN_VALUE): number
typeof(Infinity): number
typeof("123"): string
typeof(true): boolean
typeof(window): object
typeof(document): object
*****typeof(null): object *****
typeof (eval): function
typeof (Date): function
typeof(sss): undefined
typeof(undefined): undefined
5.==/===运算符
6.Array.isArray() 用于判断一个对象是否为数组。如果对象是数组返回 true，否则返回 false。
2.点击按钮echarts图表修改数据
第一步:通过getOption方法获取到配置对象
let option = mychart.getOption()
第二步:修改相关内容
第三步:通过setOption方法设置配置项
mychart.setOption(option,true)
3.数组方法
1.Array.concat(arr1,arr2…)，合并两个或多个数组，生成一个新的数组。原数组不变。
2.Array.join()，将数组的每一项用指定字符连接形成一个字符串。默认连接字符为 “,” 逗号。
3.Array.reverse()，将数组倒序。原数组改变。
4.Array.sort()，对数组元素进行排序。按照字符串UniCode码排序，原数组改变。
5.Array.slice() 按照条件查找出其中的部分内容
参数：
array.slice(n, m)，从索引n开始查找到m处（不包含m）
array.slice(n) 第二个参数省略，则一直查找到末尾
array.slice(0)原样输出内容，可以实现数组克隆
array.slice(-n,-m) slice支持负参数，从最后一项开始算起，-1为最后一项，-2为倒数第二项
返回值：返回一个新数组
是否改变原数组：不改变
6.Array.splice(index,howmany,arr1,arr2…) ，用于添加或删除数组中的元素。从index位置开始删除howmany个元素，并将arr1、arr2…数据从index位置依次插入。howmany为0时，则不删除元素。
原数组改变。
7.includes()
判断一个数组是否包含一个指定的值
参数：指定的内容
返回值：布尔值
是否改变原数组：不改变。
4.echarts自适应(包括字体)
通过屏幕比例与rem结合实现自适应,代码如下:
1.计算出缩放比,动态改变跟字体大小
setFont() {
const designWidth = self.screenSize.designWidth
const designHeight = self.screenSize.designHeight
const designScale = (designHeight / designWidth).toFixed(3)
const fullWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
const fullHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
let scale = ''
const fontScale = (fullHeight / fullWidth).toFixed(3)
if (designScale > fontScale) {
scale = fullHeight / 1080
document.documentElement.style.fontSize = scale * 16 + 'px'
} else {
scale = fullWidth / 1920
document.documentElement.style.fontSize = scale * 16 + 'px'
}
this.scale = scale
}
2.echarts容器宽度设置为rem单位
3.设置配置项的时候,将fontSize设置 默认的字体大小*scale +'px' 大小
const size = 18 * self.scale
axisLabel: {
textStyle: {
fontSize: size,
},
rotate: rotate,
// formatter: function(name) {
// return name
// // return name.length > 3 ? `${name.substr(0, 3)}...` : name;
// }
},
4.浏览器窗口大小变化的时候重新渲染图表
window.onresize = () => {
setTimeout(() => {
setFont() //改变缩放比 scale
myCharts.dispose() //释放图表,清空myCharts对象为null
let myChart = echarts.init(dom) 重新渲染初始化 myChart 图表
}, 500)
}
5.echarts渐变
柱状图渐变
a ,b,c,d为0，1
a:1 arr中的颜色右到左
c:1 arr中的颜色左到右
b:1 arr中的颜色下到上
d:1 arr中的颜色上到下
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 1, 0, 0, //渐变方向从上到下
[
{offset: 0, color: '#17CC8C'}, 0%的颜色
{offset: 1, color: '#666'} 100%的颜色
]
)
}
6.折线图渐变
线条渐变
itemStyle: {
"color": {
"type": "linear",
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"colorStops": [
{
"offset": 0,
"color": "#2c86e1"
},
{
"offset": 0.5,
"color": "#d4f170"
},
{
"offset": 1,
"color": "#ff943c"
}
],
"globalCoord": false
}
},
底部填充渐变
areaStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
7.饼图渐变
itemStyle:{
normal: {
color: (list) => {
// 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
var colorList = [ {colorStart:'#488BFF',colorEnd:'#9abffd'}, {colorStart:'#26CEBA',colorEnd:'#8efaed'}, {colorStart:'#FFC069',colorEnd:'#fadfba'}, {colorStart:' #FD6865',colorEnd:'#f8b2b1'}, {colorStart:' #FD6865',colorEnd:'#f8b2b1'}, ]
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //左、下、右、上 offset: 0, color: colorList[list.dataIndex]['colorStart']
}, {
offset: 1,
color: colorList[list.dataIndex]['colorEnd']
}])
}
}
},
