结果:
代码:
<!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>柱状图</title>
<script src="./echarts.js"></script>
<style>
#app {
height: 400px;
width: 400px;
background-color: black;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
// 实例化对象那个
var myChart = echarts.init(document.querySelector('#app'));
// 配置options
var option = {
color:["#2f89cf"], //修改柱子的颜色
tooltip:{
trigger:"axis",
axisPointer:{
type:"shadow" //鼠标放上边有阴影 line和shadow
}
},
// 修改图表大小
grid:{
left:'0%',
top:'10px',
bottom:'4%',
right:'0%',
containLabel:true
},
// x轴相关设置
xAxis:[{
type:'category',
// x轴文字的配置
axisLabel:{
color:'rgba(255,255,255,6)',
fontSize:'12'
},
// x轴坐标轴样式不显示
axisLine:{
show:false
},
data:['旅游','教育',
'游戏','医疗',"电商","社交",'金融'],
axisTick:{
alignWithLabel:true
}
}
],
yAxis:[
{
type:'value',
axisLabel:{
color:'rgba(255,255,255,6)',
fontSize:'12'
},
// y轴线条配置
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.1)',
width:2
}
},
// y轴分割线样式
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.1)'
}
}
}
],
// 修改柱子的圆角和宽度
series:[
{
name:'直接访问',
type:'bar',
barWidth:'35%',//宽度
// y轴的数据
data:[200,300,300,900,1500,1200,600],
itemStyle:{
// 修改柱子圆角
barBorderRadius:5
}
}
]
}
// 配置项个实例对象
myChart.setOption(option);
// 让图表跟随屏幕自适应
// window.addEventListener('resize',function() {
// myChart.resize()
// })
</script>
</body>
</html>