JavaScript如何制作没有Y轴的柱状图?(代码示例)

JavaScript如何制作没有Y轴的柱状图?下面本篇文章通过代码实例来给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

实现逻辑:

<!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>

效果图:

1.png

更多web前端知识,请查阅 HTML中文网 !!

以上就是JavaScript如何制作没有Y轴的柱状图?(代码示例)的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏