第一部分 eCharts的准备工作
1.eCharts的准备工作
第一步:
导入echarts
从 npm 获取
npm install echarts --save
从 CDN 获取
推荐从 bootcdn引用 echarts。
第二步:
创建一个dom并且设置它的宽高
第三步:
书写配置,下面的案例可以显示一个简单的柱状图
展示案例图:
代码:
<!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>eCharts的基本使用</title>
<!-- 第一步导入 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.common.js"></script>
</head>
<body>
<!-- 第二步 创建一个dom -->
<div class="box1" style="width:800px;height: 400px;"></div>
</body>
<script>
// 基于准备好的dom,初始化echarts实例
let box1 = document.querySelector('.box1')
// 使用init方法,初始化echarts的实例
let myCharts1 = echarts.init(box1)
// 设置配置项
myCharts1.setOption({
// title配置项专门设置标题
title:{
text:'echarts的基本使用(我是主标题)',
subtext:'我是副标题',
// 设置标题的位置
left:'center',
// 设置主标题字体样式
textStyle:{
color:"red",
fontWeight:'bold',
fontFamily:'微软雅黑'
},
// 设置副标题字体样式
subtextStyle:{
color:"#555",
fontWeight:'lighter',
fontFamily:'微软雅黑'
}
},
// x轴
xAxis:{
data:['衣服','食品','生活用品','家具','厨具','裤子']
},
// y轴
yAxis:{
// 设置是否显示y轴线
axisLine:{
show:true
},
// 设置是否显示y轴刻度
axisTick:{
show:true
}
},
// 设置图表的类型
series:[
{
type:'bar',
data:[10,45,23,67,30,12]
}
]
})
</script>
</html>
总结
以上就是今天要讲的内容,希望对大家有所帮助!!!