海南省建设银行官方网站招聘wordpress速度优化简书
文章目录
- 一、数据可视化
- 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 lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>ECharts体验</title><style>.box {width: 400px;height: 400px;background-color: pink;}</style><!-- 1. 下载引入EChart.js 文件 --><script src="js/echarts.min.js"></script>
</head><body><!-- 2. 准备一个盒子用来装生成的图表 注意： 这个盒子必须具备大小 --><div class="box"></div><script>// 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></html>
3.2 选择不同类型图表
选择Echarts图表
3.3 相关配置讲解
3.4 小结
