# 1、Echarts介绍
Echarts就是一个js的可视化图表库，就用来在网页上画图表的。
# 2、Echarts快速上手
echarts的代码都是写在script里面的
> 核心分为4个步骤
>
> 1、准备一个盒子，放置图表
>
> 2、echarts实例化对象
>
> 3、设置option
>
> 4、将option配置给echarts实例化对象
```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>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
<!--1、定义一个盒子，图表放在这个盒子里-->
<div id="box" style="width: 400px;height: 600px;border: 1px red solid;"></div>
<script>
// 2、echarts实例化对象
var myChart = echarts.init(document.getElementById('box'))// 获取盒子的id
// 3、设置option
// option是最核心的部分，一切修改都是在option里面改
var option ={
title:{
text:'柱状图',// 图表标题
link:'http://www.baidu.com',// 标题超链接
},
tooltip:{//提示框
trigger:'item',
formatter:'{b}<br>{c}'
},
xAxis:{// x轴
type:'category',// 类目轴
data:['A','B','D'],
},
yAxis:{// y轴
type:'value',// 数值轴,不用写data，会调用series的data
},
series:[
{
name:'语文',
type:'bar',// 图表类型，还可以写line、scatter、pie
data:[70,90,87]
}
]
}
//4、将option配置给echarts实例化对象
myChart.setOption(option)
</script>
/body>
</html>
3183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
