1. 数据可视化
1. 概念
把数据以更直观的形式展现 ----> 图表
2. 好处
- 清晰有效的传达数据信息
- 更方便观察数据之间的关系，例如比例变化等
3. 实现方式
1. 报表类
- Excel
- 水晶报表
2. 商业智能BI
- MicroSoft BI
- Power-BI
3. 编码类
- ECharts.js
- D3.js
2. ECharts
1. ECharts的介绍
- ECharts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表
- 官方网址：链接: https://echarts.apache.org/zh/index.html.
2. ECharts的快速入门
5分钟上手ECharts
- 步骤0：安装echarts.js文件
在 https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js，点击并保存为 echarts.js 文件。
// 从 npm 获取
npm install echarts --save
- 步骤1：引入echarts.js文件
// 引入 echarts.js 文件
<script src="lib/echarts.js"></script>
<script src="lib/echarts.min.js"></script>
- 步骤2：准备图表将要呈现的盒子
<body>
<div style="width: 600px;height: 400px;"></div>
</body>
- 步骤3：初始化echarts实例对象
<script>
// 传递参数：一个dom元素，图表将要呈现的盒子
var mCharts = echarts.init(document.querySelector('div'))
</script>
- 步骤4：准备配置项（配置项的学习可以参照官方文档）
// 配置项，值为一个对象
var option = {
xAxis: {
type: 'category',
data: ['小明','小红','小华']
},
yAxis: {
type: 'value'
},
series: [
{
name: '语文',
type: 'bar',
data: [70, 45, 97]
},
{
name: '数学',
type: 'bar',
data: [80, 90, 67]
}
]
}
- 步骤5：将配置项设置给echarts实例对象
// 设置配置项
mCharts.setOption(option)
实现结果：
扫一扫
1724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
