随笔分类 -  Echarts可视化图标的使用

交互API
摘要：全局echarts对象 全局 echarts 对象是引入 echarts.js 文件之后就可以直接使用的 echarts.init 初始化ECharts实例对象使用主题 echarts.registerTheme 注册主题只有注册过的主题,才能在init方法中使用该主题 echarts.regist 阅读全文
posted @ 2021-11-10 22:57 keyeking 阅读(51) 评论(0) 推荐(0)
动画
摘要：加载动画 ECharts 已经内置好了加载数据的动画, 我们只需要在合适的时机显示或者隐藏即可 显示加载动画 box.showLoading() // 在获取数据之前, 显示加载动画 $.get('data/data.json', function (res) { box.hideLoading() 阅读全文
posted @ 2021-11-10 22:15 keyeking 阅读(56) 评论(0) 推荐(0)
echarts中的显示
摘要：主题 默认主题 ECharts 中默认内置了两套主题: light dark 在初始化对象方法 init 中可以指明 var chart = echarts.init(box, 'light') var chart = echarts.init(box, 'dark') light效果 var bo 阅读全文
posted @ 2021-11-10 21:25 keyeking 阅读(295) 评论(0) 推荐(0)
仪表盘图
摘要：1>ECharts 最基本的代码结构 仪表盘主要用在进度把控以及数据范围的监测 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE= 阅读全文
posted @ 2021-11-09 21:11 keyeking 阅读(68) 评论(0) 推荐(0)
雷达图
摘要：1> ECharts 最基本的代码结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v 阅读全文
posted @ 2021-11-09 20:54 keyeking 阅读(402) 评论(0) 推荐(0)
地图
摘要：地图图表的使用方式 百度地图API : 使用百度地图的 api , 它能够在线联网展示地图, 百度地图需要申请 ak 矢量地图 : 可以离线展示地图, 需要开发者准备矢量地图数据 1>ECharts 最基本的代码结构 <!DOCTYPE html> <html lang="en"> <head> < 阅读全文
posted @ 2021-11-08 23:34 keyeking 阅读(114) 评论(0) 推荐(0)
饼图
摘要：1> ECharts 最基本的代码结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v 阅读全文
posted @ 2021-11-07 22:38 keyeking 阅读(389) 评论(0) 推荐(0)
直角坐标系的常见配置
摘要：直角坐标系的图表指的是带有x轴和y轴的图表, 常见的直角坐标系的图表有: 柱状图 折线图 散点图 针对于直角坐标系的图表, 有一些通用的配置 1> 网格 grid grid是用来控制直角坐标系的布局和大小, x轴和y轴就是在grid的基础上进行绘制的 显示 grid show: true grid 阅读全文
posted @ 2021-11-05 23:09 keyeking 阅读(254) 评论(0) 推荐(0)
散点图的常见效果
摘要：气泡图效果 要能够达到气泡图的效果, 其实就是让每一个散点的大小不同, 让每一个散点的颜色不同 symbolSize 控制散点的大小 itemStyle.color 控制散点的颜色 这两个配置项都支持固定值的写法, 也支持回调函数的写法固定值的写法如下: series:[ { type:'scatt 阅读全文
posted @ 2021-11-05 22:16 keyeking 阅读(344) 评论(0) 推荐(0)
散点图
摘要：散点图 散点图可以帮助我们推断出变量之间的相关性 散点图的type是scatter 1> ECharts 最基本的代码结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Co 阅读全文
posted @ 2021-11-05 21:45 keyeking 阅读(537) 评论(0) 推荐(0)
折线图的常见效果
摘要：常见效果 标记： markPoint：最大值、最小值 markLine：平均值 markArea：标注区间 markPoint：最大值、最小值 series:[ { type:'line', data:yData, markPoint:{ data:[ { type:'max' }, { type: 阅读全文
posted @ 2021-11-05 20:29 keyeking 阅读(276) 评论(0) 推荐(0)
折线图
摘要：实现步骤 1> ECharts 最基本的代码结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na 阅读全文
posted @ 2021-11-05 11:08 keyeking 阅读(129) 评论(0) 推荐(0)
通用配置
摘要：通用配置 指任何图标都能使用的配置 标题：title 提示：tooltip 工具按钮：toolbox 图例：legend 通用配置-标题(title) 文字样式 <div style="width: 600px ; height: 400px;"></div> <script> var myChar 阅读全文
posted @ 2021-11-05 10:46 keyeking 阅读(74) 评论(0) 推荐(0)
ECharts常用图表-柱状图的使用
摘要：柱状图的使用 柱状图的实现步骤 1>ECharts 最基本的代码结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" 阅读全文
posted @ 2021-11-03 23:28 keyeking 阅读(6159) 评论(0) 推荐(0)
配置项详解
摘要：xAxis 直角坐标系中的 x 轴，如果 type 属性的值为 category，那么需要配置 data 数据，代表在 x 轴的呈现； yAxis 直角坐标系中的 y 轴，如果 type 属性配置为 value，那么无需配置 data ，此时 y 轴会自动去 series 下找数据进行图表的绘制 s 阅读全文
posted @ 2021-11-03 23:05 keyeking 阅读(397) 评论(0) 推荐(0)
数据可视化
摘要：什么是数据可视化，说白了， 就是把数据以更加直观的方式进行呈现， 那什么方式是更加直观的方式呢?就是图表 我们看一组数据 毛衣：120 衬衣：200 袄子：150 鞋子：80 领带：70 西装：110 裙子：130 这个数据就是某些产品的销量. 单纯从这些文字上来看, 很难看出数据之间对比的关系. 阅读全文
posted @ 2021-11-03 22:57 keyeking 阅读(126) 评论(0) 推荐(0)