松江专业做网站,搭建网站哪个好,百度热词,佛山做网站-准度科技公司文章目录 一、数据可视化1.1 什么是数据可视化1.2 数据可视化的使用场景1.3 常见可视化库1.4 小结 二、ECharts简介2.1 什么是ECharts 三、ECharts的快速入门3.1 ECharts使用五部曲3.2 选择不同类型图表3.3 相关配置讲解3.4 小结 一、数据可视化
1.1 什么是数据可视化
数据可… 文章目录 一、数据可视化1.1 什么是数据可视化1.2 数据可视化的使用场景1.3 常见可视化库1.4 小结 二、ECharts简介2.1 什么是ECharts 三、ECharts的快速入门3.1 ECharts使用五部曲3.2 选择不同类型图表3.3 相关配置讲解3.4 小结 一、数据可视化
1.1 什么是数据可视化
数据可视化主要目的借助于图形化手段清晰有效地传达与沟通信息。数据可视化可以把数据从冰冷的数字转换成图形揭示蕴含在数据中的规律和道理
1.2 数据可视化的使用场景 1.3 常见可视化库 1.4 小结 二、ECharts简介
2.1 什么是ECharts
ECharts是一个使用 JavaScripηt实现的开源可视化库可以流畅的运行在PC和移动设备上兼容当前绝大部分浏览器E8/9/10/11 Chrome, Firefox, Safari等底层依赖矢量图形库REnder提供直观交互丰富可高度个性化定制的数据可视化图表。 优点
丰富的可视化类型多种数据格式支持流数据的支持移动端优化跨平台使用绚丽的特效详细的文档说明
大白话
是一个JS插件性能好可流畅运行PC与移动设备兼容主流浏览器提供很多常用图表且可定制。 折线图、柱状图、散点图、饼图、K线图
ECharts能满足绝大多数可视化图表实现使用方便功能强大是实现数据可视化的最优选择之一。
官网地址https://echarts.apache.org/zh/index.html
三、ECharts的快速入门
3.1 ECharts使用五部曲
ECharts使用五步曲:
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleECharts体验/titlestyle.box {width: 400px;height: 400px;background-color: pink;}/style!-- 1. 下载引入EChart.js 文件 --script srcjs/echarts.min.js/script
/headbody!-- 2. 准备一个盒子用来装生成的图表 注意 这个盒子必须具备大小 --div classbox/divscript// 3.初始化echarts 实例对象 var myChart echarts.init(document.querySelector(.box));// 4. 指定配置项和数据var option {title: {text: ECharts 入门示例},tooltip: {},legend: {data: [销量]},xAxis: {data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子]},yAxis: {},series: [{name: 销量,type: bar,data: [5, 20, 36, 10, 10, 20]}]};// 5. 将配置项和数据(option) 设置给 实例对象(myChart)myChart.setOption(option);/script
/body/html3.2 选择不同类型图表 选择Echarts图表
3.3 相关配置讲解 3.4 小结
