结果：
代码：
<!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: 300px;
width: 400px;
background-color: black;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
var myColor = ['#1089E7','#F57474','#56D0E3','#F8B448','#8B78F6']
// 实例化对象
var myChart = echarts.init(document.querySelector('#app'));
// 配置
var options = {
// 修改图形大小
grid:{
top:'10%',
left:'22%',
bottom:'10%',
containLabel:false //改为false 不为刻度标签留位置
},
xAxis:{
// 不显示x轴相关信息
show:false
},
// y轴有两组数据
yAxis:[
{
type:'category',
data:['HTML5','CSS3','javascript','VUE','NODE'],
// 不显示y轴线
axisLine:{
show:false
},
// 不显示y轴刻度
axisTick:{
show:false
},
// y轴文字（刻度标签）设为白色 设置刻度标签
axisLabel:{
color:'#fff',
fontSize:12
},
inverse:true //默认和data中的数据是反的 设置为true就职顺序的
},
{
show:true,
type:'category',
data:[702,350,610,793,664],
// 不显示y轴线
axisLine:{
show:false
},
// 不显示y轴刻度
axisTick:{
show:false
},
// y轴文字（刻度标签）设为白色 设置刻度标签
axisLabel:{
color:'#fff',
fontSize:12
},
inverse:true
},
],
series:[
// 第一组柱子
{
name:'条',
type:'bar',
data:[70,34,60,78,69],
barCategoryGap:50,//修改柱子间距
barWidth:10,//修改柱子宽度
itemStyle:{//每个柱子的颜色
// 修改第一组柱子的圆角
barBorderRadius:20,
// 此时的color可以修改柱子的颜色
color:function(params) {
// params是柱子各个对象
// dataIndex是当前柱子的索引号
return myColor[params.dataIndex]
}
},
// 图形上的文本标签
label:{
// 可以显示文字
show:true,
// 显示在柱子内部
position:'inside',
// {c}会自动的解析为data中的数据
formatter:'{c}%',
color:'#fff'
},
yAxisIndex:0 //y轴层叠性
},
// 第二组柱子 外边包的框
{
name:'框',
type:'bar',
data:[100,100,100,100,100],
barWidth:15,
barCategoryGap:50,
itemStyle:{
color:'none',
borderWidth:3,
borderColor:'#00c1de',
barBorderRadius:15
},
yAxisIndex:1//第二个柱子会把第一个柱子包起来
}
]
}
// 把配置给实例化对象
myChart.setOption(options);
// 让图表跟随屏幕自适应
window.addEventListener('resize',function() {
myChart.resize()
})
</script>
</body>
</html>