文章目录
官方文档:Documentation - Apache ECharts
gitee仓库地址获取完整代码(第一天素材中)https://gitee.com/CMD-UROOT/echarts/tree/master/online-retailers-master
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>Document</title>
<!-- 步骤1：引入echarts.js文件 -->
<script src="lib/echarts.min.js"></script>
<!--
步骤1：引入echarts.js文件
步骤2：准备一个呈现图表的盒子
步骤3：初始化echarts实例对象
步骤4：准备配置项
步骤5：将配置项设置给echarts实例对象
-->
</head>
<body>
<!-- 步骤2：准备一个呈现图表的盒子 -->
<div style="width: 600px;height: 400px"></div>
<script>
// 步骤3：初始化echarts实例对象
// 参数, dom,决定图表最终呈现的位置(呈现到div里面)
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>效果
小结
