ECharts的介绍
ECharts是一个使用JavaScript实现的开源可视化库,兼容性强,底层依赖矢量图形库ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
特点
开源免费
功能丰富
(1)丰富的可视化类型
(2)多种数据格式支持( key-value数据格式 二维表 TypedArray)
(3)流数据的支持(流数据的动态渲染、增量渲染技术)
社区活跃
移动端的优化
跨平台的使用
绚丽的特效
三维可视化
官网:http://echarts.apache.org/zh/index.html
ECharts的基本使用
引入echart.js文件
准备一个呈现图表的盒子
初始化echarts实例对象
准备配置项
将配置项设置给echarts实例对象
使用vscode编写代码
下载live server
live server的作用:
1.模拟服务器的方式打开页面
2.代码改动后,会自动刷新页面
在CODE文件里面新建一个文件夹lib
将echarts.min.js复制到lib文件夹中
在CODE 文件中新建一个文件 ECharts的快速上手.html
源码
<!--
步骤1:引入echarts.js文件
步骤2:准备一个呈现图表的盒子
步骤3:初始化echarts实例对象
步骤4:准备配置项
步骤5:将配置项设置给echarts实例对象
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 步骤1:引入echarts.js文件 -->
<script src="lib/echarts.min.js"></script>
</head>
<body>
<!-- 步骤2:准备一个呈现图表的盒子 -->
<div style="width: 600px;height: 400px;"></div>
<script>
// 步骤3:初始化echarts实例对象
//参数,dom,决定图标最终呈现的位置
var mCharts= echarts.init(document.querySelector('div'))
//步骤4:准备配置项
var option={
xAxis:{
type:'category',
data:['小明','小红','小王']
},
yAxis:{
type:'value'
},
series:[
{
name:'语文',
type:'bar',
data:[70,92,87]
}
]
}
//步骤5:将配置项设置给echarts实例对象
mCharts.setOption(option)
</script>
</body>
</html>