echarts入门笔记
一、在echarts官网下载相应的版本
二、在网页中引入echarts
..表示上一个父文件夹下的
<scritpt src="../(你echarts下载到的路径)/echarts.js"></script>
如我echarts下载的位置在D盘的D：/html/js文件夹下，且我的html文件也在D盘的html文件夹下，这里是相对路径引入为:
<script src="../js/echarts.js"></script>
路径有相对路径跟绝对路径，相信接触echarts的你应该有一定的html，css，js基础，我就不多说了
三、引入后，为echarts准备一个容器
//去掉网页的边界的默认边距
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
//给容器一个id，为后续的初始化echarts，设置容器的宽高
<div id="echarts" style="width:100%;heigth:400px"></div>
四、初始化echarts
//相应的配置代码位置写在对应的容器下面
<script type="text/javascript">
//初始化echarts
var myChart = echarts.init(document.getElementById('echarts'));
//option数据配置
var option = {
//标题
title:{
text:'我的第一个图表'
},
//提示框
tooltip:{},
//图例开关
legend:{data:['销量']},
//x轴
xAxis:{
//x轴类型设置为类目轴，
type：'category',
//轴的数据
data:['小米','魅族','华为','苹果','一加']
},
//y轴
yAxis:{},
//配置项
series:[
{
//图例legend的对应控制的名字
name:'销量',
//设置图表类型为条形图
type:'bar',
//设置数据值
data:[4500,5600,4800,4500,4200]
}
]
};
//显示图表
myChart.setOption(option);
</script>
五、全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery.js"></script>
<script src="../js/echarts.js"></script>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
<body>
<!--给容器一个id，为后续的初始化echarts，设置容器的宽高-->
<div id="echarts" style="width:100% ; height: 400px;"></div>
<script type="text/javascript">
//初始化echarts
var myChart = echarts.init(document.getElementById('echarts'));
//option数据配置
var option = {
//标题
title:{
text:'我的第一个图表'
},
//提示框
tooltip:{},
//图例开关
legend:{data:['销量']},
//x轴
xAxis:{
//x轴类型设置为类目轴，
type:'category',
//轴的数据
data:['小米','魅族','华为','苹果','一加']
},
//y轴
yAxis:{},
//配置项
series:[
{
//图例legend的对应控制的名字
name:'销量',
//设置图表类型为条形图
type:'bar',
//设置数据值
data:[4500,5600,4800,4500,4200]
}
]
};
//显示图表
myChart.setOption(option);
</script>
</body>
</html>