- 博客(25)
- 收藏
- 关注
RSS订阅原创 ECharts学习--样式
（一）直接样式itemStyle、textStyle、lineStyle、aeaStyle、labal（二）高亮样式在emphasis中包裹itemStyle、textStyle、lineStyle、aeaStyle、labalvar data = [{ name: '淘宝', value: 1000, itemStyle: { // 控制样式的颜色 color: 'yellow' }, label: { color: 'red
2020-12-03 23:06:05
280
原创 ECharts学习--调色盘
（一）调色盘它是一组颜色、图形、系列会自动从其中选择颜色。（1）主题调色盘（2）全局调色盘 （覆盖主题调色盘）在option下直接设置color属性color : ['red','pink','blue','purple','#333333'] ,会按照数组总的顺序来显示（3）局部调色盘（覆盖全局调色盘）series : [{ color:['blue','purple','#333333','red','pink',], type: 'pie',
2020-12-02 18:19:19
722
原创 ECharts学习--主题设置
（1）内置主题echarts中默认主题有两个:light、dark在初始化对象方法中，init可以指明：（1）dark var mCharts = echarts.init(document.querySelector('div'),'dark')（2）；lightvar mCharts = echarts.init(document.querySelector('div'),'light')（二）自定义主题（1）在主题编辑器中编辑主题 网址：https://.
2020-12-02 17:34:51
1320
原创 ECharts学习--仪表盘
（一）仪表盘图仪表盘图主要用于进度把控一级数据范围的监控仪表盘只需要将type设置为gauge，data直接给value值便可var mCharts = echarts.init(document.querySelector('div'));var option = { series: [{ type: 'gauge', legend : { data: '剩余流量' }, data: [
2020-12-02 11:06:25
470
原创 ECharts学习--雷达图
（一）雷达图雷达图可以用来分析多个维度的数据与标准数据的对比情况。（1） 定义各个维度的名称，和最大值（2）再series下配置type为radar，data数据为数组里面包含对象 { name 和value }var maxData = [{name: '攻击',max: 100}, {name: '防御',max: 100}, {name: '机动',max: 100}, {name: '控制',max: 100}, {name: '治疗',max: 100}]; // 定义各个维度的
2020-12-02 10:47:11
1265
原创 ECharts学习--地图（二）
（一）显示空气质量var mChart = echarts.init(document.querySelector('div'));var airData = [ { name: '北京', value: 39.92 } ...];$.get('json/map/china.json', function (ret) { // 引入中国矢量地图的json文件 跨域使用vscode中Live Server // ret就是中国各个省份的矢量地图 console.log(ret);
2020-12-02 09:42:50
251
原创 ECharts学习--地图（一）
（一）地图的基本实现和常见配置地图图标的使用方式：（1）百度地图Api（2）矢量地图<div style="width: 700px;height: 500px;"></div><script src="./lib/echarts.min.js"></script><script src="./lib/jquery.min.js"></script> <script> var mChart =
2020-11-30 21:44:53
276
原创 ECharts学习--饼图
（一）饼图饼图又称圆饼图、圆形图等，它是利用圆形及圆内扇形面积来表示数值大小的图形。饼图主要用于总体中各组成部分所占比重的研究。<div style="width: 200px;height: 200px;"></div><script> var mChart = echarts.init(document.querySelector('div')); // 饼图的数据需要的是数组，数组中包含一个一个的对象，每一个对象需要name和value
2020-11-29 20:57:37
1168
原创 ECharts学习--直角坐标系图标常用配置
（一）直角坐标系中的常用配置直角坐标系图标：柱状图，折线图，散点图（1）网格：gridgrid是用来控制直角坐标系的布局和大小。x轴和y轴就是在grid的基础上进行绘制的。<div style="width: 600px;height: 400px;"></div><script> var mChart = echarts.init(document.querySelector('div')); var xdata = ['张三',
2020-11-29 15:12:07
647
原创 ECharts学习--散点图
（一）散点图散点图是由一些散乱的点组成的图表，这些点在哪个位置，是由x值和y值确定的，所以也叫xy散点图。散点图的优点：可以帮助我么推断出变量间的相关性。<div style="width: 700px;height: 400px;"></div><script> var mChart = echarts.init(document.querySelector('div')); var data = [{'height': 152,'wei
2020-11-28 21:37:43
5771
原创 ECharts学习--折线图
（一）常见的折线图配置<div style="width: 700px;height: 400px;"></div><script> var mCharts = echarts.init(document.querySelector('div')) var yData = [3000, 2000, 1000, 3500, 2000, 5000, 7000, 2000, 10000, 4000, 2400, 1200]; var xData
2020-11-27 23:21:39
173
原创 ECharts学习--通用配置
通用配置，就是指不管在什么类型的图标中，都可以使用的配置（饼状图、折线图、雷达图等等）。（一）通用配置title（1）文字样式可以通过textStyle来进行设置，这里有很多属性，例如：color（文字颜色）、fontStyle（字体风格）、fontWeight（字体粗细）等等。这里可以通过查看官方文档，结合自身需求来尽心配置。ECharts官方文档：https://echarts.apache.org/zh/option.html#title.textStyle（2）标题边框borde
2020-11-25 20:07:07
424
原创 ECharts学习--常用图表之柱状图
（一）7大图表在使用ECharts中，经常使用的图表类型有7种：（1）柱状图（2）折线图（3）散点图（4）饼图（5）地图（6）雷达图（7）仪表盘图（二）柱状图柱状图在生活中经常看到，比如统计期末学生的某一课科成绩的时候，如：张三 60 李四 61 王五 62 赵六 63 小明 64 小红 65 实现步骤如下（1）ECharts基本的代码结构：引入js文件...
2020-11-23 08:46:37
1674
原创 ECharts学习--快速上手ECharts
（一）五个步骤实现快速上手ECharts（1）引入echarts.js文件（2）准备一个容器，来装图表（3）初始化echarts实例对象（4）准备配置项（决定图表的类型、样式）（5）将配置项设置给echarts实例对象（二）echarts的基础使用...
2020-11-22 20:00:55
297
原创 JavaScript--数组方法（一）
数组中除了push、pop、shift、unshift这四种方式来进行对数组的增删以外，还有很多的方式来对数组进行操作(一) splicearr.splice()可以做添加，删除，插入元素（这种方式可以改变原数组）：（1）只有一个参数的时候：let arr = ['1','2','3','4'];arr.splice(2);console.log(arr); // ["1", "2"]从下标0开始，截取个数。（2）（三）...
2020-11-17 15:04:24
97
原创 JavaScript--数组
（一）数组的声明创建数组的两种方法：let arr = new Array();let arr2 = [];通常我们是使用第二个方式来创建数组：let arr = ['1','2','3'];console.log(arr[1]); // 2arr[2]='5';console.log(arr[2]); // 5 可以通过这种方式直接修改数组arr[3]="6";console.log(arr); // ["1", "2", "5", "6"] 末尾增加一个6访问数组的个
2020-11-16 17:07:16
93
原创 JavaScript--字符串方法
let a = `abcdefg`console.log(a.indexOf('c',0)); // 2（一）获取字符串的长度通过length这个属性，来获取字符串的长度：let a = `123456`console.log(a.length); // 6注意 ，这里length是属性，不是方法，不许要加括号（）。（二）访问字符我们可以通过 [ ] 中括号或者charAt()的方式来进行访问：let a = `123456`console.log(a[2]); //.
2020-11-16 12:20:07
98
原创 ECharts学习--简介
什么是ECharts？ECharts是由JavaScript实现的开源可视化库。兼容性好，兼容当前绝大部分的浏览器，（IE8以上，谷歌，火狐等）。底层是依赖图形库ZRender。ECharts是完全开源免费的，它的功能十分丰富强大。ECharts的特点（1）丰富的可视化类型： 折线图、柱状图、散点图、热力图、饼状图、K线图等等（2）多种数据支持： 支持key-value数据格式 支持二维表 支持TypedArray...
2020-11-15 20:54:13
361
原创 JavaScript--数字类型方法
用e的方式编写数字有时候我们需要创建一个很多位数的数字，这时候如果直接创建的方式，就会变的很麻烦let a = 100000000;如果换成e的方式，就会变得很简洁：let a = 1e8; // 表示1的后面有8个0，即1亿let b = 100000000;console.log(a === b); // true两者完全一致。如果写非常小的数字，通过e的方式:let a = 1e-6;let b = 0.000001;console.log(a === b);
2020-11-14 16:10:01
596
原创 JavaScript--Symbol
Symbol可以用 Symbol来创建一个表示唯一的标识符。let id = Symbol('myid'); // 实例化唯一的id对象,并且给一个Symbol名"myid"let id2 = Symbol('myid'); console.log(id==id2); //false可以看出，即使Symboy名字相同，也是不同的两个东西（两者并不相等）。Symbol不会被隐式转化let id = Symbol('myid');alert(id); //Cannot conver
2020-11-13 17:51:09
189
原创 JavaScript--构造函数
1、什么是构造函数：构造函数就是用new关键字来调用的函数。2、构造函数的好处：使用过构造函数，可以减少很多重复没有意义的代码。当一个班级需要录入很多相同的数据的时候，就可以使用构造对象的方法，来实现：function Person(name,age){ this.name=name; this.age=age;}var person1 = new Person('张三',18);var person2 = new Person('李四',19);3、构造函数有两
2020-11-13 15:37:31
134
原创 JavaScript--this
thisthis是执行上下文对象的一个属性，想要知道this的指向，首先要了解它所在的作用域，不同作用域下的this指向的东西是不一样的。全局作用域下的this首先，全局作用域就是直接在script标签中，直接编写的JS代码（单独的js文件中直接编写的代码），全局作用域在打开页面的时候创建，关闭的时候销毁，并且拥有一个window的全局对象。在全局作用域下的this：var a = 1;console.log(this.a); // 1this.b = 2;console.lo
2020-11-12 17:54:21
97
原创 JavaScript--对象的引用和复制（深浅拷贝）
对象的引用和复制原始类型的复制：let a = "你好";let b = a;这个时候，，我们就有了两个独立的变量"你好"，这就好比克隆羊一样，它们都有自己的身体，自己控制自己，一直羊翘翘了，也不会影响另一只羊。而对象的克隆就不是这样，对象的克隆，并不是真正意义上的克隆。赋值的对象变量存储的不是对象本身，而是该对象中的"在内存中的地址"，所以说是该对象的"引用"。所以说在复制对象的时候，只是引用被复制，而该对象并没有被复制，这就好比分身，他们都指向同一个本体，如果分身受到伤害，本体也会受
2020-11-11 18:46:49
1470
原创 JavaScript--对象
JavaScript对象对象这个概念很抽象，在JavaScript中，一切都可以看作是对象，对象可以拥有属性，也可以拥有方法，就像是一台多功能的冰箱，它可以有重量，高度以及功耗这些属性（属性），做很多事情，可以用它冰冻东西，可以用来存储东西（方法）。我们可以用，以下两种方式来创建一个空的对象let user = new Object();//“构造函数”的语法 Object首字母要大写let user = {}; //字面量的语法文本和属性在创建对象的时候，以键值对的形式存放.
2020-11-10 14:53:41
108
原创 JavaScript--数据类型
数据类型在JavaScript中，有8种数据类型（7种原始类型和一种引用类型）：Number类型，String类型，BigInt类型，Boolean类型（逻辑类型），null值，undefined值，object类型和symbol类型；这里可以用typeof运算符返回参数的类型：1，作为运算符：typeof x。2，函数形式：typeof（x）; 两种得到的结果都是一样的BigInt类型在JavaScript中，number类型无法表示过大或过小的整数，有时候需要更大的数字，例如用于加.
2020-11-09 15:11:54
764
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人