数据可视化_Echarts
关注
分享
扫一扫
文章平均质量分 83
diviner_s
数据科学与大数据技术专业，大三本科在读
展开
-
手把手教你做出数据可视化项目（七）可视化图表数据动态获取及界面跳转
数据可视化前言：https://blog.csdn.net/diviner_s/article/details/115933789Apache Echarts简介：https://blog.csdn.net/diviner_s/article/details/115934089项目最终效果图：此篇博客为自己学习pink老师的课后完成的项目的总结与记录，仅供交流参考。版权所有，转载请标注原作者！使用echarts技术做的可视图，此外其项目包含 的技术有html、css、js、jquerry、aja.原创 2021-06-16 11:23:32 · 253673 阅读 · 543 评论 -
手把手教你做出数据可视化项目（六）动态3D柱状图及其自动旋转
数据可视化前言：https://blog.csdn.net/diviner_s/article/details/115933789项目最终效果图：此篇博客为自己学习pink老师的课后完成的项目的总结与记录，仅供交流参考。版权所有，转载请标注原作者！使用echarts技术做的可视图，此外其项目包含 的技术有html、css、js、jquerry、ajax、websocket、koa等。文章目录动态三维柱状图三维柱状图数据存储柱状图配置tooltip配置xAxis3D配置yAxis3D配置zAxi.原创 2021-06-12 15:15:31 · 18539 阅读 · 285 评论 -
手把手教你做出数据可视化项目（五）动态高亮显示动画
数据可视化前言：https://blog.csdn.net/diviner_s/article/details/115933789项目最终效果图：此篇博客为自己学习pink老师的课后完成的项目的总结与记录，仅供交流参考。版权所有，转载请标注原作者！使用echarts技术做的可视图，此外其项目包含 的技术有html、css、js、jquerry、ajax、websocket、koa等。...原创 2021-06-09 12:09:54 · 14987 阅读 · 271 评论 -
手把手教你做出数据可视化项目（四）动态模拟航班飞行路线
数据可视化前言：https://blog.csdn.net/diviner_s/article/details/115933789项目最终效果图：此篇博客为自己学习pink老师的课后完成的项目的总结与记录，仅供交流参考。版权所有，转载请标注原作者！使用echarts技术做的可视图，此外其项目包含 的技术有html、css、js、jquerry、ajax、websocket、koa等。文章目录模拟航班飞行路线模拟航班飞行路线这个动态模拟飞行路线展示的是从郑州去往其他城市的动态跃迁图。今天.原创 2021-06-03 18:27:35 · 30440 阅读 · 245 评论 -
手把手教你做出数据可视化项目（三）3D地球旋转
数据可视化前言：https://blog.csdn.net/diviner_s/article/details/115933789项目最终效果图：此篇博客为自己学习pink老师的课后完成的项目的总结与记录，仅供交流参考。版权所有，转载请标注原作者！使用echarts技术做的可视图，此外其项目包含 的技术有html、css、js、jquerry、ajax、websocket、koa等。...原创 2021-05-25 15:22:14 · 26693 阅读 · 222 评论 -
手把手教你做出数据可视化项目（二）可视化图表配置
数据可视化前言：https://blog.csdn.net/diviner_s/article/details/115933789项目最终效果图：此篇博客为自己学习pink老师的课后完成的项目的总结与记录，仅供交流参考。版权所有，转载请标注原作者！使用echarts技术做的可视图，此外其项目包含 的技术有html、css、js、jquerry、ajax、websocket、koa等。此章节使用的是echarts技术，详情进传送门：echarts简介echarts图表总结Ech.原创 2021-05-25 13:59:22 · 7631 阅读 · 17 评论 -
手把手教你做出数据可视化项目（一）页面布局
项目最终效果图：此篇博客为自己学习pink老师的课后完成的项目的总结与记录，仅供交流参考。版权所有，转载请标注原作者！使用echarts技术做的可视图，此外其项目包含 的技术有html、css、js、jquerry、ajax、websocket、koa等。此项目将前后端分离。界面布局界面采用css3的Flex布局为了使代码更为整洁，我们将布局全部放在css中。在index.html中引用index.css文件基础设置body在css中background属性设置背景图line.原创 2021-05-24 20:48:41 · 12786 阅读 · 23 评论 -
Apeach Echarts|后台项目的开发初学
后台项目的开发1.后台项目的目标我们已经学习完了 KOA2 的快速上手, 并且对 KOA2 当中的中间件的特点页进行了讲解. 接下来就是利用KOA2 的知识来进行后台项目的开发，后台项目需要达到这以下几个目标:计算服务器处理请求的总耗时计算出服务器对于这个请求它的所有中间件总耗时时长究竟是，我们需要计算一下在响应头上加上响应内容的 mime 类型加入mime类型, 可以让浏览器更好的来处理由服务器返回的数据.如果响应给前端浏览器是 json 格式的数据，这时候就需要在咱们的响应头当中增加 C原创 2021-04-29 18:27:42 · 1886 阅读 · 3 评论 -
Apeach Echarts | Koa2的安装及使用
Apeach EchartsKOA2使用Koa2的介绍基于Node.js平台的Wev服务器框架，由Express原班人打造，致力于web应用和API开发领域中的一个更小、更富有表现力、更健壮的基石。Express koa koa2都是web服务器的框架，他们之间的差别和关系可以通过下面的表格表示出框架名作用异步处理Expressweb框架回调函数Koaweb框架Generator+yieldKoa2web框架async/await环境原创 2021-04-29 10:45:31 · 1739 阅读 · 1 评论 -
Apache Echarts高级|图表显示优化
文章目录Echarts高级一、显示相关1.主题2.调色盘Echarts高级一、显示相关1.主题默认主题ECharts中默认内置了两套主题：light,dark在初始化对象方法init中可以指明var mChart = echarts.init(dom,'light')var mChart = echarts.init(dom,'dark')自定义主题1.在主题编译器中编辑主题主题编译器的地址为：https://www.echartsjs.com/theme-builder/原创 2021-04-27 17:15:53 · 3120 阅读 · 1 评论 -
Apache Echarts图表总结
常用配置项总结每个均配有对应的源代码以及知识点~~~~1.柱状图 barhttps://blog.csdn.net/diviner_s/article/details/115936504series[].type图表类型xAxisx轴yAxisy轴markPoint最大值\最小值markLine平均值label显示文本barWidth柱宽度折线图 linehttps://blog.csdn.net/diviner_s/ar原创 2021-04-23 22:11:49 · 4882 阅读 · 11 评论 -
Apache Echarts常用图表之仪表盘
仪表盘的常见效果数值范围：max,min多个指针：增加data中数组的元素多个指针颜色的差异：itemStyle仪表盘的特点仪表盘可以更加直观的表现出某个指标的进度或实际情况<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=原创 2021-04-23 21:37:30 · 1613 阅读 · 0 评论 -
Apache Echarts常用图表之雷达图
雷达图雷达图的实验步骤Echarts最基础代码：<!DOCTYPE html><html lang = "en"><head> <script src="js/echarts.min.js"></script></head><body> <div style="width:600px;height:400px"> </div> <script> var mCha原创 2021-04-23 21:26:18 · 2001 阅读 · 0 评论 -
Apache Echarts实现矢量地图
文章目录Echarts常用图表5地图1. 地图图表的使用方式2.矢量地图的实验步骤Echarts常用图表5地图1. 地图图表的使用方式百度地图API : 使用百度地图的 api , 它能够在线联网展示地图, 百度地图需要申请 ak矢量地图` : 可以离线展示地图, 需要开发者准备矢量地图数据接下来的实现是通过矢量图的方式来实现的2.矢量地图的实验步骤1.先上Echarts经典基本代码框架~~<!DOCTYPE html><html lang="en"><h原创 2021-04-22 19:04:59 · 3057 阅读 · 5 评论 -
Apache Echarts常用图表之饼状图
文章目录Echarts常用图表饼图1. 饼图的实现步骤2. 饼图的常见效果Echarts常用图表饼图饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。1. 饼图的实现步骤1.先上Echarts经典基本代码框架~~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="echarts.min.js">&原创 2021-04-22 16:25:50 · 5126 阅读 · 1 评论 -
Apache Echarts常用图表|关于直角坐标系的常用配置
文章目录直角坐标系的常用配置网格 gridgird.showgird.borderWidthgrid的位置和大小坐标轴 axis区域缩放 dataZoom直角坐标系的常用配置直角坐标系的图表指的是带有x轴和y轴的图表，常见的直角坐标系的图表有：柱状图，折线图，散点图。网格 gridgrid是直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。它可以用来控制直角坐标系的布局和大小，x轴和y轴就是在grid的基础上进行绘制的。在 ECharts 2.x 里单个 ec原创 2021-04-21 17:47:53 · 1737 阅读 · 9 评论 -
Apache Echarts常用图表之散点图
文章目录Echarts常用图表散点图1. 散点图的实现步骤2. 散点图的常见效果Echarts常用图表散点图散点图可以帮助我们推断出变量间的相关性，追求不同维度数据之间的相关性，根据点的分布，从而找到线性的关系。散点图也经常用在地图的标注上1. 散点图的实现步骤1.先上Echarts经典基本代码框架~~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l原创 2021-04-21 16:17:27 · 4262 阅读 · 3 评论 -
Apache Echarts常用图表之折线图
文章目录Echarts常用图表折线图1. 折线图的实现步骤2. 折线图的常见效果最大值\最小值 `markPoint`平均值 `markLine`标注区间 `markArea`数值显示 `label`平滑线条`smooth`线条样式`linestyle`填充风格 `areaStyle`紧挨边缘`boundaryGap`配置缩放比例 `scale`堆叠图3. 通用配置标题：`title`提示框：`tooltip`工具按钮：`toolbox`图例：`legend`Echarts常用图表折线图折线图更多的使原创 2021-04-21 14:54:05 · 19467 阅读 · 2 评论 -
Apache Echarts常用图表之柱状图
文章目录Echarts常用图表柱状图1. 柱状图的实现步骤2. 柱状图的常见效果最大值\最小值 `markPoint`平均值 `markLine`数值显示 `label`柱宽度 `barwidth`横向柱状图3. 通用配置标题：`title`提示框：`tooltip`工具按钮：`toolbox`图例：`legend`Echarts常用图表柱状图1. 柱状图的实现步骤1.先上Echarts经典基本代码框架~~<!DOCTYPE html><html lang="en">&原创 2021-04-21 10:52:06 · 16577 阅读 · 0 评论 -
Apache Echarts简介|Echarts基本操作|配置
1. Echarts介绍ECharts是百度公司开源的一个使用 JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形库 ZRender ，提供直观，交互丰富，可高度个性化定制的数据可视化图表。开源免费它是开源免费的，也就是我们可以免费的使用 ECharts ，不需要缴纳任何的费用功能丰富它的功能非常的丰富，提供了各种各样的图表，支持各种各样的定制, 满足各种需求，比如折线图、柱状图、饼图、K线图等. 在他的官方示例中, 提供了上百种图表, 可以用 只有你想不到, 没有她做不原创 2021-04-21 09:34:39 · 19911 阅读 · 2 评论 -
数据可视化前言
1. 什么是数据可视化数据可视化就是把数据以更加直观的方式进行呈现， 我们常用图表化来对数据进行表示。我们通过各种形式多样的图表对数据进行分许可视化，帮助人们更加直观的了解到具体信息。2.数据可视化的好处清晰有效地传达与沟通信息数据可视化的好处之一就是能够清晰有效的传达信息和沟通信息. 继续看刚才的那个例子, 如果使用同样的数据, 换成另外一种展现形式, 比如下边的这幅饼图. 我们可以很容易的就看出每个产品的销量占比.不需要太多的脑力计算和思维转换.更容易洞察隐藏在数据中的信息将数原创 2021-04-21 09:14:38 · 19400 阅读 · 4 评论 -
安装nvm及通过nvm安装node和npm
文章目录nvm下载地址查看自己的安装路径检查是否安装成功nvm下载地址nvm安装地址：https://github.com/coreybutler/nvm-windows/releasesgithub服务器在国内较少，下载速度会很慢选择nvm-setup.zip进行安装，（个人感觉还是安装包更加方便！）下载完后，接下来就是安装经典界面，自己可以选择下安装路径，注意！路径一定要是英文的不要有汉字，可以用下划线_接下来就是一直下一步了。查看自己的安装路径在安装好的nvm文件里有个set原创 2021-04-19 19:42:18 · 1327 阅读 · 0 评论