可视化 - 随笔分类 - 冲啊！

637 echartsInstance 对象API：setOption，resize，on，off，dispatchAction，clear，dispose，enevnts，action

摘要：echartsInstance 对象 11.echartsInstance对象常见的方法.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width= 阅读全文

posted @ 2021-02-24 17:41 冲啊！阅读(450) 评论(0) 推荐(0)

636 全局echarts 对象API：init，registerTheme，registerMap，connect

摘要：1.3.1.全局echarts 对象 10.全局echarts对象常见的方法.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device 阅读全文

posted @ 2021-02-24 17:06 冲啊！阅读(1369) 评论(0) 推荐(0)

635 echarts动画的使用：加载动画，增量动画，动画的配置

摘要：07.图表的加载动画.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 阅读全文

posted @ 2021-02-24 11:00 冲啊！阅读(565) 评论(0) 推荐(0)

633 echarts图表自适应

摘要：步骤1: 监听窗口大小变化事件步骤2: 在事件处理函数中调用 ECharts 实例对象的 resize 即可 06.图表自适应的实现.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi 阅读全文

posted @ 2021-02-23 21:07 冲啊！阅读(73) 评论(0) 推荐(0)

632 echarts样式：直接样式，高亮样式

摘要：05.样式的使用.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m 阅读全文

posted @ 2021-02-23 19:46 冲啊！阅读(136) 评论(0) 推荐(0)

631 echarts调色盘：主题调色盘，全局调色盘，局部调色盘，渐变颜色的实现

摘要：03.调色盘的使用.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> < 阅读全文

posted @ 2021-02-23 19:26 冲啊！阅读(311) 评论(0) 推荐(0)

630 ECharts显示相关主题：默认主题，自定义主题

摘要：01.内置主题的使用.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 阅读全文

posted @ 2021-02-23 16:41 冲啊！阅读(235) 评论(0) 推荐(0)

629 ECharts基础小结：柱状图 bar，.折线图 line，散点图 scatter，饼图 pie，地图 map，雷达图 radar，.仪表盘 gauge，.直角坐标系配置grid、axis、dataZoom，通用配置title、tooltip、toolbox.feature、legend

摘要：配置项小结阅读全文

posted @ 2021-02-23 16:07 冲啊！阅读(313) 评论(0) 推荐(0)

628 echarts图表7 仪表盘图：实现，数值范围，多个指针，多个指针颜色的差异

摘要：23.仪表盘的实现.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> < 阅读全文

posted @ 2021-02-23 11:10 冲啊！阅读(1430) 评论(0) 推荐(0)

627 echarts.图表6 雷达图：实现，label，区域面积 areaStyle，绘制类型 shape

摘要：22.雷达图的实现.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> < 阅读全文

posted @ 2021-02-23 10:34 冲啊！阅读(1350) 评论(0) 推荐(0)

626 echarts图表5 地图：地图图表的使用方式，.矢量地图的实现，roam，label，zoom，center，显示某个区域，不同城市颜色不同，地图和散点图结合

摘要：3.5.3.地图的常见配置 18.地图的实现.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial- 阅读全文

posted @ 2021-02-22 20:05 冲啊！阅读(773) 评论(0) 推荐(0)

625 echarts图表4 饼图：实现，显示数值label，南丁格尔图，选中效果，圆环，特点

摘要：3.4.1.饼图的实现步骤 16.饼图的实现.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial- 阅读全文

posted @ 2021-02-22 14:16 冲啊！阅读(2090) 评论(0) 推荐(0)

624 Echarts常用图表直角坐标系常见配置：网格 grid，坐标轴 axis，区域缩放 dataZoom

摘要：直角坐标系的常见配置 13.直角坐标系的常用配置_grid.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i 阅读全文

posted @ 2021-02-22 12:42 冲啊！阅读(353) 评论(0) 推荐(0)

623 ECharts常用图表散点图：实现步骤，气泡图，涟漪动画effectScatter，showEffectOn，rippleEffect，itemStyle

摘要：3.3.1.散点图的实现步骤 11.散点图的实现.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia 阅读全文

posted @ 2021-02-21 21:21 冲啊！阅读(2064) 评论(0) 推荐(0)

622 ECharts常用图表折线图：折线图的实现步骤，标记markPoint，平均值 markLine，线条控制，填充风格 areaStyle，紧挨边缘 boundaryGap，缩放&脱离0值比例scale ，堆叠图，

摘要：3.2.1.折线图的实现步骤 07.折线图的实现.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia 阅读全文

posted @ 2021-02-21 17:29 冲啊！阅读(1892) 评论(0) 推荐(0)

621 echarts通用配置：title，tooltip，toolbox，legend

摘要：3.1.4.通用配置使用 ECharts 绘制出来的图表, 都天生就自带一些功能, 这些功能是每一个图表都具备的, 我们可以通过配置, 对这些功能进行设置. 标题: title var option = { title: { text: "成绩", // 标题文字 textStyle: { col 阅读全文

posted @ 2021-02-21 11:43 冲啊！阅读(725) 评论(0) 推荐(0)

620 ECharts常用图表柱状图：标记markPoint，平均值 markLine，数值显示 label，柱宽度 barWidth，横向柱状图

摘要：3.1.图表1 柱状图 3.1.1.柱状图的实现步骤步骤1 ECharts 最基本的代码结构 <!DOCTYPE html> <html lang="en"> <head> <script src="js/echarts.min.js"></script> </head> <body> <div 阅读全文

posted @ 2021-02-21 10:56 冲啊！阅读(6507) 评论(0) 推荐(0)

619 数据可视化概述，ECharts的基本使用，相关配置讲解

摘要：1.数据可视化前言 1.1.什么是数据可视化数据可视化，说白了，就是把数据以更加直观的方式进行呈现. 那什么方式是更加直观的方式呢? 就是图表. 常言道，文不如表，表不如图，人们大脑对图的敏感程度要比苍白无力的文字好很多. 我们来看一组数据. 这个数据就是某些产品的销量. 单纯从这些文阅读全文

posted @ 2021-02-21 10:31 冲啊！阅读(613) 评论(0) 推荐(0)

617 ECharts 基本概念: 系列，dataset，组件，定位，坐标系

摘要：ECharts 基本概念 ECharts 基本概念: 系列系列（series）是指：一组数值映射成对应的图【一个系列对应一张图，series中的一个子项对应一张图。】案例：多系列混合 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <s 阅读全文

posted @ 2021-02-18 17:06 冲啊！阅读(896) 评论(0) 推荐(0)

616 ECharts 入门案例：销售柱状图，进阶案例：多 ECharts 实例

摘要：ECharts 入门入门案例：销售柱状图 <!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script> <style> #ch 阅读全文

posted @ 2021-02-18 16:16 冲啊！阅读(342) 评论(0) 推荐(0)

随笔分类 - 可视化