实现逻辑：
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.min.js"></script>
</header>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height:250px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
barWidth:30,//条形的宽的为30
tooltip: {},
grid: {
left: '0',
right: '0',
bottom: '1%',
containLabel: true
},
toolbox: {
feature : {
mark : {show: false},//控制辅助线
}
},
legend: {//说明
//orient: 'vertical', //说明显示在的位置所在
// center: 'center ',//说明的位置居中显示 默认居中横排显示
data:['累积', '新增']//数据说明
},
xAxis: {//X轴上的内容
type : 'category',
splitLine:{
show:false
},
splitNumber:0,
axisLabel:{
//横坐标上的文字斜着显示 文字颜色 begin
interval:0,
rotate:0,
margin:0,
textStyle:{color:"#333" }
//横坐标上的文字换行显示 文字颜色end
},
type : 'category',
data: ['1k&1V3', '2k&1V3', '','1k&1V3', '4k&1V5', '','3k&1V3'].map(function (str) {
return str.replace('&', '\n')
}),
},
yAxis: {//Y轴上的内容
type : 'value',
show : false,
splitLine:{
show:false
},
axisLabel : {
formatter: function(){
return "";
}
}
},
series: [
//第二条数据 begin
{
type: 'bar',
// name:'新增',
barWidth:40,
barGap:'10%',
barCategoryGap:'10%',
data: [510, 400, 300, 200, 100,300,200],
//柱状条颜色的设置为#eb6768 begin
itemStyle: {
normal: {
color: '#3b8ede',
shadowBlur: 2,
shadowColor: 'rgba(3, 3, 4, 0.5)'
}
}
//柱状条颜色的设置为#eb6768 end
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>效果图：
更多web前端知识，请查阅 HTML中文网 ！！
以上就是JavaScript如何制作没有Y轴的柱状图？（代码示例）的详细内容，更多请关注0133技术站其它相关文章！
