ECharts
文章平均质量分 62
ECharts
漂流の少年
stay hungry, stay foolish.
展开
-
ECharts学习目录
1.初识ECharts原创 2021-08-14 20:11:28 · 382 阅读 · 0 评论 -
细节处理(电商平台数据可视化实时监控系统项目)
目录效果预览组件合并创建ScreenPage.vue,并配置路由规则创建布局和样式注册组件,并将组件置于合适位置调整原有样式:global.less、Hot.vue图例大小、Stock.vue圆环的大小全屏切换布局和样式的调整全屏状态数据的定义全屏状态样式的定义全屏图标的处理点击事件的处理联动效果:发送全屏数据给服务器,服务器收到之后会转发给每一个处于连接状态的客户端主题切换数据的存储:Vuex(state:theme,mutation: changeThem原创 2021-10-12 00:45:37 · 458 阅读 · 0 评论 -
WebSocket的引入
目录WebSocket的基本使用使用WebSocket改造项目原创 2021-10-07 23:40:20 · 1886 阅读 · 0 评论 -
单独图表组件的开发 --- 库存与销量模块(圆环饼图 )
目录通用代码结构和流程组件的结构:StockPage.vue、Stock.vue代码流程结构:初始化图表对象initChart、获取数据getData、处理数据更新图表updateChart、分辨率适配screenAdapter图表基本功能的实现数据的获取:/api/stock数据的处理:五个饼图(series数组下有5个对象)、每个饼图两个区域(series下的每个对象的data属性拥有两个对象)图表的位置:type为pie、每个饼图的位置不同(center)、圆环需要设置两个半原创 2021-10-07 13:09:41 · 347 阅读 · 0 评论 -
单独图表组件的开发 --- 热销商品占比(饼图)
目录效果预览通用代码结构和流程图表基本功能实现数据的获取:/api/hotproduct,获取的是三个类别下所有分类的数据数据的处理:饼图的数据(name、value)、图例的数据图表的设置:type类型为pie切换数据的实现布局和样式:左右两个箭头点击事件的处理:改变currentIndex,分类名称:计算属性UI调整主题的使用:init第二个参数箭头和分类名称的颜色: css标题的设置:title高亮状态显示文字:emphasis图例的形状和位置:leg原创 2021-10-07 10:58:25 · 268 阅读 · 0 评论 -
单独图表组件的开发 --- 销售排行图表
目录通用代码结构和流程组件的结构:RankPage.vue、Rank.vue代码流程结构:初始化图表对象initChart、获取数据getData、处理数据更新图表updateChart、分辨率适配screenAdapter图表基本功能实现数据的获取 /api/rank数据的处理 : x轴数据、y轴数据图表的设置:type类型为barUI调整主题的使用:init的第二个参数标题的设置:title坐标轴大小和位置:grid工具提示:tooltip颜色设置:不同数值显示不.原创 2021-10-06 10:34:55 · 216 阅读 · 0 评论 -
单独图表组件的开发 --- 商家分布模块(地图+散点图 )
目录效果预览通用代码结构和流程显示地图获取中国地区的矢量数据(数据在之前导入的static文件夹中)注册地图数据配置geo显示散点图获取数据:/api/map处理数据:散点数据、图例数据图表的设置:配置series(type为effectScatter、coordinateSystem为geo)UI调整主题的使用:init方法的第二个参数标题的显示:title地图位置和颜色:geo、geo.itemStyle图例的位置和方向:legend涟漪效果:r...原创 2021-10-05 12:37:07 · 585 阅读 · 0 评论 -
单独图表组件的开发---销量趋势图表(折线图)
目录原创 2021-10-04 13:52:04 · 381 阅读 · 0 评论 -
单独图表组件的开发---商家销售统计(横向柱状图)
目录组件结构的设计布局结构的设计图表基本功能的实现动态刷新的实现UI的调整拆分图表的option分辨率适配components/Seller.vueviews/SellerPage.vueApp.vuerouter/index.jsassets/css/global.less原创 2021-09-30 22:30:08 · 408 阅读 · 0 评论 -
前端项目的创建和准备
目录1.使用vue-cli搭建项目并删除无关代码首先要安装vue-cli npm install @vue/cli -g创建前端项目(我这里的项目名就叫vision) vue create vision在创建过程中配置一下npm run serve将项目跑起来,在浏览器地址栏中输入 http://localhost:8080/即可访问2.静态资源的引入将下载好的静态资源放到当前vision项目下面的public目录...原创 2021-09-27 21:31:27 · 854 阅读 · 0 评论 -
后台项目初步(电商平台数据可视化实时监控系统)
目录1.后台项目的目标①计算服务器处理请求的总耗时②在响应头加上响应内容的mime类型③根据URL读取指定目录下的文件内容用三个中间件来实现2.项目准备①安装包npm init -ynpm install koa②创建目录和文件结构app.jsdata/ 为了方便,数据不从数据库获取,而是以文件的形式存放在这个文件夹中middleware/ koa_response_data.js //处理业务逻...原创 2021-09-26 00:15:29 · 680 阅读 · 0 评论 -
koa2快速上手(电商平台数据可视化实时监控系统)
1. koa2简介①基于node.js的web开发框架②由express原班人马打造express、koa、koa2三者异步处理的方式不同express - 回调函数koa - Generator + yieldkoa2 - async/await③环境依赖Node v7.6.0及以上2.koa2特点...原创 2021-09-24 12:22:29 · 614 阅读 · 0 评论 -
电商平台数据可视化实时监控系统(开发目录)
目录原创 2021-09-24 12:04:47 · 1050 阅读 · 0 评论 -
交互API(echarts对象和echartsInstance对象)
目录1.全局echarts对象引入echarts.js文件之后就可以使用init方法初始化ECharts实例对象使用主题registerTheme方法注册主题只有注册过的主题,才能在init方法中使用该主题registerMap方法注册地图数据$.get('json/map/china.json',function(data){echarts.registerMap('china',data);});geo组件使用地图数据var...原创 2021-09-21 21:24:09 · 948 阅读 · 0 评论 -
动画的使用(ECharts)
目录1.加载动画ECharts已经内置好了加载数据的动画,我们只需要在合适的时机显示或隐藏即可显示加载动画:mCharts.showLoading()隐藏加载动画:mCharts.hideLoading()<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e原创 2021-09-21 11:04:24 · 1520 阅读 · 0 评论 -
ECharts的高级使用(样式、自适应)
目录1.样式1.1 直接样式itemStyle、textStyle、lineStyle(折线图)、areaStyle(雷达图)、label<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"原创 2021-09-21 09:12:14 · 520 阅读 · 0 评论 -
ECharts的高级使用(主题、调色板、颜色渐变)
目录1. 主题1.1 内置的主题init方法有两个参数,第一个参数代表的是一个dom节点,第二个参数代表你需要使用哪一套主题默认内置了两套主题,light、dark<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n原创 2021-09-20 17:27:15 · 4628 阅读 · 4 评论 -
仪表盘(用ECharts绘制)
目录仪表盘主要用在进度把控和数据范围的监测基本实现1.基本的代码结构2.在series下面设置type:guage3.在series下面的data配置数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name原创 2021-08-19 00:55:45 · 1788 阅读 · 0 评论 -
雷达图(用ECharts绘制)
目录雷达图可以从多个维度来对比不同数据之间的情况基本实现①ECharts最基本的代码结构:引入js文件、DOM容器、初始化对象、配置option②定义各个维度的最大值,并在option的radar选项中配置③在series中配置具体的数据④在series中设置type为radar<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta h原创 2021-08-19 00:29:36 · 9564 阅读 · 1 评论 -
地图(用ECharts绘制)
目录基本实现1.ECharts最基本的代码结构2.准备中国地图的矢量数据3.使用Ajax获取矢量地图数据4.在Ajax的回调函数中注册地图矢量数据,名字为chinaMap5.配置geo的type为'map',map为'chinaMap'<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp原创 2021-08-18 15:36:21 · 2687 阅读 · 0 评论 -
饼图(用ECharts绘制)
目录常见效果显示数值 label.formatter圆环 设置两个半径radius:[50%, 70%] (百分比参照的是容器宽度和高度中较小的那一个的一半)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">...原创 2021-08-17 20:11:57 · 860 阅读 · 2 评论 -
直角坐标系的常用配置
目录直角坐标系图表:柱状图、折线图、散点图1.网格gridgrid用来控制直角坐标系的布局和大小x轴和y轴就是在grid的基础上进行绘制的显示grid showgrid的边框 borderWidth、borderColorgrid的位置 left、top、right、bottomgrid的大小 width、height<!DOCTYPE html><...原创 2021-08-17 11:59:39 · 267 阅读 · 0 评论 -
散点图(用ECharts绘制)
目录先用python随机生成一点数据import randomfor i in range(50): height = round(random.uniform(150.0, 190.0), 1) weight = round(random.uniform(40.0, 100.0), 1) print('{ "gender": "female", "height": ' + str(height) + ', "weight": ' + str(weight) + ' }原创 2021-08-17 00:51:26 · 3717 阅读 · 2 评论 -
折线图(用ECharts绘制)
目录折线图常常用来分析数据随时间的变化趋势常见效果最大值、最小值 markPoint平均值 markLine标注区间 markArea线条风格:平滑 smooth 风格:lineStyle填充风格 areaStyle<!DOCTYPE html><html lang="en"><he...原创 2021-08-16 20:16:05 · 817 阅读 · 0 评论 -
柱状图(用ECharts绘制)
目录柱状图常常用于描述分类后的数据常见效果实现最大值、最小值 markPoint平均值 markLine数值的显示 label柱的宽度 barWidth横向柱状图 交换x和y轴的角色<!DOCTYPE html><html lan...原创 2021-08-15 01:12:39 · 1362 阅读 · 0 评论 -
初识ECharts
1.简介ECharts是一款基于JavaScript的数据可视化图表库。最初由百度团队开源,并于2018年初捐赠给Apache基金会。2021年1月26日晚,Apache基金会官方宣布ECharts项目正式毕业。1月28日,ECharts 5线上发布会举行。...原创 2021-08-14 20:11:00 · 304 阅读 · 0 评论