echarts入门笔记

最新推荐文章于 2022-10-17 18:06:29 发布

醋黄瓜

最新推荐文章于 2022-10-17 18:06:29 发布

阅读量258

点赞数

分类专栏： echarts 文章标签： js

本文链接：https://blog.csdn.net/qq_37130983/article/details/80732281

版权

echarts 专栏收录该内容

4 篇文章 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>