echarts 去除左侧空隙、空白

mrshao

ECharts默认情况下上下左右是有一些空白区域的,白色背景下图表没被撑满就会显得丑丑的

类似这样:
image.png

去除后是这样:
image.png

好看了很多

解决方案:

通过 grid 属性来控制直角坐标系内绘图网格四周边框位置,具体有如下配置项:
x:直角坐标系内绘图网格与左侧距离,数值单位 px,支持百分比(字符串),如:50%
x2:直角坐标系内绘图网格与右侧距离,数值单位 px,支持百分比(字符串),如:50%
y:直角坐标系内绘图网格与顶部距离,数值单位 px,支持百分比(字符串),如:50%
y2:直角坐标系内绘图网格与底部距离,数值单位 px,支持百分比(字符串),如:50%

示例代码:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <script src="echarts-all.js"></script>
    <script type="text/javascript">
        window.onload = function() {
          // 基于准备好的dom,初始化echarts图表
          var myChart = echarts.init(document.getElementById('main'));
          //图表配置
          var option = {
              backgroundColor:'#EFEFEF',
              tooltip : {
                  trigger: 'axis'
              },
              xAxis : [
                  {
                      type : 'category',
                      boundaryGap : false,
                      data : ['周一','周二','周三','周四','周五','周六','周日']
                  }
              ],
              yAxis : [
                  {
                      type : 'value',
                      axisLabel : {
                          formatter: '{value} °C'
                      }
                  }
              ],
              series : [
                  {
                      name:'最高气温',
                      type:'line',
                      data:[11, 11, 15, 13, 12, 13, 10]
                  },
                  {
                      name:'最低气温',
                      type:'line',
                      data:[1, -2, 2, 5, 3, 2, 0]
                  }
              ],
              grid: {
                x: 50,
                y: 25,
                x2: 30,
                y2: 35
              },
          };
          // 为echarts对象加载数据
          myChart.setOption(option);
 
          //窗口缩放后重新调整图标尺寸
          window.onresize = function (){
                  myChart.resize();
            }
        }
    </script>
</head>
<style>
 #main {
   position: absolute;
   top: 15px;
   bottom: 15px;
   left: 15px;
   right: 15px;
 }
</style>
<body>
    <!-- 用于显示图表的div -->
    <div id="main"></div>
</script>
</body>

原文地址:https://www.hangge.com/blog/c...

grid属性支持的选项:
image.png

官方文档地址:https://echarts.apache.org/ex...

阅读 133
7 声望
0 粉丝
0 条评论
你知道吗?

7 声望
0 粉丝
宣传栏