柱状图（用ECharts绘制）
Posted So istes immer
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了柱状图（用ECharts绘制）相关的知识，希望对你有一定的参考价值。
柱状图常常用于描述分类后的数据
常见效果实现
最大值、最小值 markPoint
平均值 markLine
数值的显示 label
柱的宽度 barWidth
横向柱状图 交换x和y轴的角色
<!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>
var mCharts = echarts.init(document.querySelector('div'))
var xDataArr = ['张三', '李四', '王五', '钱七', '孙八', '赵九']
var yDataArr = [88, 45, 48, 89, 99, 77]
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value',
},
series: [{
name: '语文',
type: 'bar',
markPoint: {
data: [
{
type: 'max', name: '最大值'
},{
type: 'min', name: '最小值'
}
]
},
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
},
label: {
show: true,
rotate: 30,
position: 'inside'
},
barWidth: '50%',
data: yDataArr
}]
}
mCharts.setOption(option)
</script>
</body>
</html>效果
以上是关于柱状图（用ECharts绘制）的主要内容，如果未能解决你的问题，请参考以下文章