代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts柱状图</title>
<style>
/*注意必须要给echarts图存放的父元素设置高度 也可以设置宽度*/
#bar{
width:500px;
height:200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="" id="bar"></div>
</body>
<script src="./js/echarts.min.js"></script>
<script>
var myChart = echarts.init(document.getElementById('bar'));
var valueUnit = '人数';//纵坐标名字 单位
var option = {
title: {
text: '柱状图',
left: 'center',
textStyle: { //标题内容的样式
color: '#000',
fontStyle: 'normal',
fontWeight: 100,
fontSize: 16 //主题文字字体大小，默认为18px
},
},
color: ['#3398DB'],//给柱状图设置颜色
tooltip : {
trigger: 'axis',//设置鼠标划过时显示信息 如果不设置 不显示坐标轴指示器
axisPointer : {// 坐标轴指示器，坐标轴触发有效
type : 'shadow'// 默认为直线，可选为：'line'线型 | 'shadow'阴影 | 'cross'十字交叉坐标轴指示器
}
},
grid: {//设置柱状图位置 上下左右距离也可以用 y y2 x x2 表示 可以用百分比表示也可以直接数字 例如 x:20
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',//设置坐标轴显示类别
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],//横坐标显示内容
axisTick: {
alignWithLabel: true//坐标轴刻度与标签对齐 如果不设置 默认坐标刻度将柱状图包括在内
},
splitLine:{
show:false //设置横坐标坐标轴标准线 竖线 的显示隐藏 不设置 默认隐藏
},
axisLabel: {//横坐标类目文字
show: true,
textStyle: {
color: '#000',//设置横坐标轴文字颜色
fontSize: '14'//设置横坐标轴文字颜大小
}
},
axisLine: {
lineStyle: {
color: '#000',//设置横坐标轴线颜色
width: 1, //这里是坐标轴的宽度,可以去掉
}
}
}
],
yAxis : [
{
type : 'value',//纵坐标显示数值
name: valueUnit,
nameTextStyle: {
padding: [0, 0, 0, -30] // echarts坐标轴的name属性更改位置 四个数字分别为上右下左与原位置距离
},
splitLine:{
show:false //设置纵坐标坐标轴标准线 横线 的显示隐藏 不设置 默认为true显示
},
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',//设置柱状图的柱状的宽度
data:[10, 52, 200, 334, 390, 330, 220]
}
]
};
myChart.setOption(option);
</script>
</html>
