echarts入门笔记

小咪咪 2022-05-22 07:22 199阅读 0赞

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>  
    
  <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>

![70][]

[70]: /images/20220522/271b6d961190424d8298012207ca55a4.png