一、ECharts 概述
ECharts 是一个使用 JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形库 ZRender，提供直观、交互丰富、可高度个性化定制的数据可视化图表。
官方网址：https://echarts.apache.org/zh/index.html
二、ECharts 基本使用
> 快速上手
① 引入 echarts.js 文件
② 准备一个呈现图表的盒子
③ 初始化 echarts 实例对象
④ 准备配置项
⑤ 将配置项设置给 echarts 实例对象
需要注意：除了配置项外，其他代码基本固定。配置项可参考官方文档：
https://echarts.apache.org/zh/option.html#title
> 在 HTML 中使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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 实例对象
var mCharts = echarts.init（document.querySelector（'div'））
// 4. 准备配置项
var option = {
xAxis: {
type: 'category',
data: ['张三', '李四', '王五', '赵六']
},
yAxis: {
type: 'value'
},
series: [
{
name: '数学分析',
type: 'bar',
data: [100, 59, 69, 92]
}
]
}
// 5. 配置项设置给实例对象
mCharts.setOption（option）
</script>
</body>
</html>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h64813.shtml
