JS制作没有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>
马优晨
发布了393 篇原创文章 · 获赞 303 · 访问量 134万+
他的留言板关注
JS制作没有Y轴的柱状图

猜你喜欢
