柱状图
<!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 src="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px"></div>
<script>
let mEcharts = echarts.init(document.querySelector("div"))
//x轴数据
let xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
//y轴数据
let yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
let option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type:'value'
},
series: [
{
name:'语文成绩',
type:'bar',
data:yDataArr
}
]
}
mEcharts.setOption(option)
</script>
</body>
</html>
常见效果(series之下配置)
最大/最小值(markPoint)
平均值(markLIne)
修改框背景颜色
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
是后边透明的背景而不是数据条的颜色
数值显示
label: {
show: true,
rotate: -15,
position:'insideTopLeft'
}
show属性显示具体数值
rotate为数值的旋转角度
position为数值显示的位置。
支持:
top
/left
/right
/bottom
/inside
/insideLeft
/insideRight
/insideTop
/insideBottom
/insideTopLeft
/insideBottomLeft
/insideTopRight
/insideBottomRight
柱条宽度
barWidth:'30%'
也可以为具体的px,用引号括起来
将柱状图x,y轴互换
很简单,只需要将xAxis和yAxis对象里的内容互换即可
yAxis: {
type: 'category',
data: xDataArr
},
xAxis: {
type: 'value'
},
<script>
let mEcharts = echarts.init(document.querySelector("div"))
//x轴数据
let xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
//y轴数据
let yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
let option = {
yAxis: {
type: 'category',
data: xDataArr
},
xAxis: {
type: 'value'
},
series: [
{
data: yDataArr,
name: '语文成绩',
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
markPoint: {
data: [
{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
markLine: {
data: [
{
type: 'average',
name: '平均值'
}
]
},
label: {
show: true,
rotate: -15,
position:'insideTopLeft'
},
barWidth:'15px'
}
]
}
mEcharts.setOption(option)
</script>