![](https://img-blog.csdnimg.cn/5445f2161bf9487a82c4e251381d2d8a.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
echarts
一个基于 JavaScript 的开源可视化图表库
寧三一
到最后,我没成为至尊宝,也没成为紫霞,而是成为了城墙下的那群人,看着别人的爱情,咀嚼着自己的青春
展开
-
Echarts笔记——折线图/柱状图(1)设置Y轴双坐标轴
Echarts笔记——折线图/柱状图(1)设置Y轴双坐标轴,图标参考右坐标轴设置Y右坐标轴position: "right", # y 轴的位置,参数 "left","right"。设置图标参考右边坐标轴yAxisIndex: 1, # y轴的 index定位索引 ,默认值为0 ,参数类型:number。<!DOCTYPE html><html lang="en"><head&...原创 2021-04-01 14:30:25 · 7287 阅读 · 0 评论 -
Echarts笔记——折线图(4)堆叠折线图(时间轴)
Echarts笔记——折线图(4)堆叠折线图(时间轴)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>堆叠折线图(时间轴)</title> <script src="../../js/echarts.min.js"></script> <script src="...原创 2021-04-01 14:05:39 · 1214 阅读 · 0 评论 -
Echarts笔记——动画配置项
Echarts笔记——动画配置项开启动画animation : true # 是否开启动画,默认true动画时长animationDuration : 5000 # 单位毫秒,5秒,初始动画的时长,支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的初始动画效果缓动动画animationEasing : " bounceOut " #初始动画的缓动效果。不同的缓动效果可以参考动画阙值...原创 2021-04-01 13:59:33 · 3620 阅读 · 0 评论 -
Echarts笔记——增量动画
Echarts笔记——增量动画目录Echarts笔记——增量动画1. 添加按钮2. 获取按钮标签3. 响应修改数据函数4. 响应增加数据函数5. 效果图6. 原码1. 添加按钮// 添加按钮<button id="modify">修改数据</button><button id="add">添加数据</button>2. 获取按钮标签// 获取添加数据按钮的标签v...原创 2021-03-31 22:00:24 · 818 阅读 · 0 评论 -
Echarts笔记——加载动画
Echarts笔记——加载动画 在数据加载前,设置加载动画 myChart.showLoading() 服务器数据取得成功之后,隐藏加载动画 myChart.hideLoading()原创 2021-03-31 21:41:29 · 608 阅读 · 0 评论 -
Echarts笔记——echarts图表自适应屏幕大小
Echarts笔记——echarts图表自适应屏幕大小<div id="main" style="height: 800px"></div> <!-- 只保留盒子的高度 -->window.onresize = function (ec) { // 监听窗口大小变化 // console.log(ec) myChart1.resize() // 自适应大小变化}<!DOCTYPE...原创 2021-03-31 21:28:29 · 3721 阅读 · 0 评论 -
Echarts笔记——高亮样式(1)饼图高亮显示
Echarts笔记——高亮样式(1)饼图高亮显示高亮样式类型 ( emphasis )<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, ...原创 2021-03-31 16:50:06 · 3155 阅读 · 1 评论 -
Echarts笔记——渐变色(2)径向渐变
Echarts笔记——渐变色(2)径向渐变径向渐变 ( radial ) x ,y 相当于 圆心, r 相当于半径长度 。 offset 的范围 0~1 ,用于表示位置。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ..原创 2021-03-31 16:12:38 · 2953 阅读 · 0 评论 -
Echarts笔记——渐变色(1)线性渐变
Echarts笔记——渐变色(1)线性渐变线性渐变 ( linear ) color 的 x,y,x1,y1 分别表示四个方向。 offset 的范围 0~1 ,用于表示位置。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">..原创 2021-03-31 16:08:16 · 1449 阅读 · 0 评论 -
Echarts笔记——主题切换(1)
Echarts笔记——主题切换(1)1.主题下载:https://echarts.apache.org/zh/download-theme.html2. 主题切换示例echarts内置了两个主题:“light”,“dark”。<script src="../../js/主题/wn.js"></script> <!-- 引入 vintage 主题 --><script src="theme/vintage.js...原创 2021-03-31 15:39:50 · 457 阅读 · 0 评论 -
Echarts笔记——仪表盘(1)
Echarts笔记——仪表盘(1)1. 仪表盘类型 (gauge )。2. series常用配置:axisLine: 仪表盘轴线相关配置 pointer: 仪表盘指针 axisTick: 刻度样式 axisLabel:标签样式 splitLine:分割线样式 anchor: 表盘中指针的固定点 detail:仪表盘详情,用于显示数据<!DOCTYPE html><html lang="en"><head> <meta c.原创 2021-03-31 14:53:52 · 2266 阅读 · 0 评论 -
Echarts笔记——雷达图(1)radar雷达图坐标系
Echarts笔记——雷达图(1)radar雷达图坐标系1.雷达图类型 ( radar )。2. 区别以往的直角坐标系,雷达图没有x轴和y轴,使用只适用雷达图的雷达图坐标系组件 :radar 。3. 需要先配置 radar 雷达坐标系,关键参数 indicator 雷达指示器(用于定义多个维度的最大值)。radar: { // 雷达图坐标系组件,只适用于雷达图。 name: { textSt.原创 2021-03-31 14:31:20 · 6089 阅读 · 0 评论 -
Echarts笔记——地图(2)散点图与地图结合
Echarts笔记——地图(2)散点图与地图结合<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scal原创 2021-03-30 21:57:14 · 962 阅读 · 0 评论 -
Echarts笔记——地图(1)中国地图
Echarts笔记——地图(1)中国地图1. 地图类型( geo )2. 导入地图数据包<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, ma.原创 2021-03-30 21:53:04 · 284 阅读 · 3 评论 -
Echarts笔记——饼图(2)南丁格尔饼图
Echarts笔记——饼图(2)南丁格尔饼图1. 设置为南丁格尔饼图(圆心角相同):roseType:'area'。2.表示是否支持多个选中('single'表示单选,或者'multiple'表示多选):selectedMode<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" ...原创 2021-03-30 21:43:53 · 1192 阅读 · 0 评论 -
Echarts笔记——饼图(1)基础饼图
Echarts笔记——饼图(1)基础饼图1. 饼图类型 ( pie )。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-sca..原创 2021-03-30 21:37:58 · 268 阅读 · 0 评论 -
Echarts笔记——折线图(3)网格与区域缩放组件
Echarts笔记——折线图(3)网格与区域缩放组件1. 网格类型 ( grid )。2. dataZoom ( 区域缩放组件 )。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=n...原创 2021-03-30 21:32:21 · 736 阅读 · 0 评论 -
Echarts笔记——散点图(1)BMI涟漪散点图
Echarts笔记——散点图(1)BMI涟漪散点图1. 基础散点图类型(scatter) , 涟漪散点图 ( effectScatter ) 。2. 设置涟漪动画( rippleEffect )<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>散点图</title> <script src="..原创 2021-03-30 21:04:37 · 1704 阅读 · 0 评论 -
Echarts笔记——折线图(2)时间轴
Echarts笔记——折线图(1)时间轴( timeline )<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../../js/echarts.min.js"></script> <script src="../../j原创 2021-03-30 20:46:00 · 2834 阅读 · 0 评论 -
Echarts笔记——折线图(1)折线图标记区间
Echarts笔记——折线图(1)折线图标记区间1.折线图类型( line )。2.markPoint : 图表标注(最大值,最小值)。3.markLine : 图表标线 ( 平均线 )。4.markArea :图表标域 (标记区间 )<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</...原创 2021-03-30 20:40:07 · 3296 阅读 · 0 评论 -
Echarts笔记——柱状图(1)水平堆叠柱状图
Echarts笔记——水平堆叠柱状图1. 水平(x轴,y轴对调属性)2.堆叠(series里 添加stack属性)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte.原创 2021-03-30 19:11:08 · 1578 阅读 · 0 评论